Read-only embedded

Author: mattgodbolt

Diff for: app.js

@@ -517,6 +517,9 @@ findCompilers()
             })
             .get('/e', embeddedHandler)
             .get('/embed.html', embeddedHandler) // legacy. not a 301 to prevent any redirect loops between old e links and embed.html
+            .get('/embed-ro', function (req, res) {
+                res.render('embed', renderConfig({embedded: true, readOnly: true}));
+            })
             .use(sFavicon(staticDir + '/favicon.ico'))
             .use('/v', express.static(staticDir + '/v', {maxAge: Infinity, index: false}))
             .use(express.static(staticDir, {maxAge: staticMaxAgeSecs * 1000}));

Diff for: static/editor.js

@@ -33,6 +33,7 @@ define(function (require) {
     var Sharing = require('sharing');
     var Components = require('components');
     var monaco = require('monaco');
+    var options = require('options');
     require('./d-mode');
     require('./rust-mode');
 
@@ -73,10 +74,12 @@ define(function (require) {
         }
 
         var root = this.domRoot.find(".monaco-placeholder");
+        var legacyReadOnly = !!state.options.readOnly;
         this.editor = monaco.editor.create(root[0], {
             value: state.source || defaultSrc || "",
             scrollBeyondLastLine: false,
-            language: cmMode
+            language: cmMode,
+            readOnly: !!options.readOnly || legacyReadOnly
         });
 
         this.editor.addAction({

Diff for: static/main.js

@@ -118,9 +118,9 @@ define(function (require) {
                         showMaximiseIcon: false,
                         showCloseIcon: false,
                         hasHeaders: false
-                    },
-                    content: sharing.contentFromEmbedded(window.location.hash.substr(1))
-                });
+                    }
+                },
+                sharing.configFromEmbedded(window.location.hash.substr(1)));
         }
 
         var root = $("#root");

Diff for: static/sharing.js

@@ -32,7 +32,7 @@ define(function (require) {
     var Components = require('components');
     var url = require('url');
 
-    function contentFromEmbedded(embeddedUrl) {
+    function configFromEmbedded(embeddedUrl) {
         // Old-style link?
         var params;
         try {
@@ -46,19 +46,19 @@ define(function (require) {
                 })
                 .object()
                 .value();
-            return [
-                {
-                    type: 'row',
-                    content: [
-                        Components.getEditorWith(1, params.source, filters),
-                        Components.getCompilerWith(1, filters, params.options, params.compiler)
-                    ]
-                }
-            ];
+            return {
+                content: [
+                    {
+                        type: 'row',
+                        content: [
+                            Components.getEditorWith(1, params.source, filters),
+                            Components.getCompilerWith(1, filters, params.options, params.compiler)
+                        ]
+                    }
+                ]
+            };
         } else {
-            var config = url.deserialiseState(embeddedUrl);
-            console.log(config);
-            return config.content; // TODO not this? better to return whole config ?
+            return url.deserialiseState(embeddedUrl);
         }
     }
 
@@ -68,11 +68,11 @@ define(function (require) {
         });
     }
 
-    function getEmbeddedUrl(layout) {
-        // TODO: readOnly?
+    function getEmbeddedUrl(layout, readOnly) {
         var location = window.location.origin + window.location.pathname;
         if (location[location.length - 1] !== '/') location += '/';
-        return location + 'e#' + url.serialiseState(layout.toConfig());
+        var path = readOnly ? 'embed-ro#' : 'e#';
+        return location + path + url.serialiseState(layout.toConfig());
     }
 
     function initShareButton(getLink, layout) {
@@ -134,7 +134,8 @@ define(function (require) {
     function getLinks(layout, done) {
         var result = {
             Full: permalink(layout),
-            Embed: '<iframe width="800px" height="200px" src="' + getEmbeddedUrl(layout) + '"></iframe>'
+            Embed: '<iframe width="800px" height="200px" src="' + getEmbeddedUrl(layout, false) + '"></iframe>',
+            'Embed (RO)': '<iframe width="800px" height="200px" src="' + getEmbeddedUrl(layout, true) + '"></iframe>'
         };
         if (!options.gapiKey) {
             done(result);
@@ -148,6 +149,6 @@ define(function (require) {
 
     return {
         initShareButton: initShareButton,
-        contentFromEmbedded: contentFromEmbedded
+        configFromEmbedded: configFromEmbedded
     };
 });

Diff for: test/embedding.html

@@ -10,8 +10,8 @@
     Test; here's some inline Compiler Explorer stuff:
 </div>
 <iframe width="800px" height="200px"
-        src="http://lud-ldnmg01:10240/e#source:'int+main()%7B%7D',compiler:g44,options:'-O2',filters:'colouriseAsm,intel,commentOnly,directives,labels,compileOnChange'"></iframe>
+        src="http://localhost:10240/e#source:'int+main()%7B%7D',compiler:g44,options:'-O2',filters:'colouriseAsm,intel,commentOnly,directives,labels,compileOnChange'"></iframe>
 </body>
 <div>And here's some text after</div>
-<iframe width="800px" height="200px" src="http://lud-mgodbolt01:10240/e#compiler:/usr/bin/g%2B%2B,filters:'colouriseAsm,readOnly,labels,directives,commentOnly,intel',options:'-O2',source:'//+Type+your+code+here,+or+load+an+example.%0Aint+square(int+num)+%7B%0A++++return+num+*+num%3B%0A%7D%0A'"></iframe>
-</html>
+<iframe width="800px" height="200px" src="http://localhost:10240/e#compiler:/usr/bin/g%2B%2B,filters:'colouriseAsm,readOnly,labels,directives,commentOnly,intel',options:'-O2',source:'//+Type+your+code+here,+or+load+an+example.%0Aint+square(int+num)+%7B%0A++++return+num+*+num%3B%0A%7D%0A'"></iframe>
+</html>

Diff for: views/index.pug

@@ -79,6 +79,7 @@ html(lang="en")
                   li: a(href="#" data-bind="Short") Short
                 li: a(href="#" data-bind="Full") Full
                 li: a(href="#" data-bind="Embed") Embed
+                li: a(href="#" data-bind="Embed (RO)") Embed (read only)
           input.form-control.input-sm.permalink(
           type="text" placeholder="Loading" readonly size="1024")
           span.input-group-btn