Import and export Sandcastle examples using Gists

Apps/Sandcastle/CesiumSandcastle.js

@@ -159,6 +159,8 @@ require({
     var newDemo;
     var demoHtml = '';
     var demoJs = '';
+    var previousCode = '';
+    var runGist = false;
 
     var galleryErrorMsg = document.createElement('span');
     galleryErrorMsg.className = 'galleryError';
@@ -512,6 +514,21 @@ require({
     });
 
     function getScriptFromEditor(addExtraLine) {
+        if (!runGist && defined(queryObject.gistId)) {
+            return 'function startup(Cesium) {\n' +
+                   '    \'use strict\';\n' +
+                   '//Sandcastle_Begin\n' +
+                   (addExtraLine ? '\n' : '') +
+                   'var viewer = new Cesium.Viewer(\'cesiumContainer\');' +
+                   '//Sandcastle_End\n' +
+                   '    Sandcastle.finishedLoading();\n' +
+                   '}\n' +
+                   'if (typeof Cesium !== "undefined") {\n' +
+                   '    startup(Cesium);\n' +
+                   '} else if (typeof require === "function") {\n' +
+                   '    require(["Cesium"], startup);\n' +
+                   '}\n';
+        }
         return 'function startup(Cesium) {\n' +
                '    \'use strict\';\n' +
                '//Sandcastle_Begin\n' +
@@ -667,6 +684,21 @@ require({
         }
     }
 
+    var queryObject = {};
+    var gistId = ioQuery.queryToObject(window.location.search.substring(1)).gist;
+    if (window.location.search) {
+        queryObject = ioQuery.queryToObject(window.location.search.substring(1));
+        if (defined(gistId)) {
+            queryObject.gistId = gistId;
+        }
+    } else {
+        queryObject.src = 'Hello World.html';
+        queryObject.label = 'Showcases';
+        if (defined(gistId)) {
+            queryObject.gistId = gistId;
+        }
+    }
+
     function loadFromGallery(demo) {
         document.getElementById('saveAsFile').download = demo.name + '.html';
         registry.byId('description').set('value', decodeHTML(demo.description).replace(/\\n/g, '\n'));
@@ -692,7 +724,22 @@ require({
 
             var scriptCode = scriptMatch[1];
             demoJs = scriptCode.replace(/\s/g, '');
-            jsEditor.setValue(scriptCode);
+
+            if (defined(queryObject.gistId)) {
+                Cesium.loadJsonp('https://api.github.com/gists/' + queryObject.gistId)
+                    .then(function(data) {
+                        var files = data.data.files;
+                        var code = files[Object.keys(files)[0]].content;
+                        jsEditor.setValue(code);
+                        demoJs = code.replace(/\s/g, '');
+                        window.history.replaceState(demo, demo.name, '?src=' + demo.name + '.html&label=' + queryObject.label + '&gist=' + queryObject.gistId);
+                    }).otherwise(function() {
+                        window.history.replaceState(demo, demo.name, '?src=' + demo.name + '.html&label=' + queryObject.label);
+                    });
+            } else {
+                jsEditor.setValue(scriptCode);
+                window.history.replaceState(demo, demo.name, '?src=' + demo.name + '.html&label=' + queryObject.label);
+            }
             jsEditor.clearHistory();
 
             var htmlText = '';
@@ -834,6 +881,61 @@ require({
         }
     }
 
+    registry.byId('buttonShare').on('click', function() {
+        var code = jsEditor.getValue();
+        if (code === previousCode) {
+            return;
+        }
+        previousCode = code;
+        var data = {
+            public : true,
+            files : {
+                'Cesium-Sandcastle.js' : {
+                    content : code
+                }
+            }
+        };
+        return Cesium.loadWithXhr({
+            url : 'https://api.github.com/gists',
+            data : JSON.stringify(data),
+            method : 'POST'
+        }).then(function(content) {
+            var textBox = document.getElementById('gistLinkShare');
+            var getUrl = window.location;
+            var baseUrl = getUrl.protocol + "//" + getUrl.host + "/" + getUrl.pathname.split('/')[1];
+            textBox.value = baseUrl + '/Sandcastle/?src=Hello%20World.html&label=Showcases&gist=' + JSON.parse(content).id;
+            textBox.select();
+        }).otherwise(function() {
+            appendConsole('consoleError', 'Unable to create ' + document.getElementById('gistId').value + '.', true);
+        });
+    });
+
+    registry.byId('buttonImport').on('click', function() {
+        gistId = document.getElementById("gistId").value;
+        if (gistId.indexOf('/') !== -1) {
+            var index = gistId.lastIndexOf('/');
+            gistId = gistId.substring(index + 1);
+        }
+
+        return Cesium.loadJsonp('https://api.github.com/gists/' + gistId)
+            .then(function(data) {
+                var files = data.data.files;
+                var code = files[Object.keys(files)[0]].content;
+                var demo = {
+                    name : 'Import Gist',
+                    description : 'Code imported from a Gist'
+                };
+                jsEditor.setValue(code);
+                demoJs = code.replace(/\s/g, '');
+                queryObject.gistId = gistId;
+                window.history.replaceState(demo, demo.name, '?src=Hello%20World.html&label=Showcases&gist=' + queryObject.gistId);
+            }).otherwise(function() {
+                if (gistId !== '') {
+                    appendConsole('consoleError', 'No such Gist exists: ' + document.getElementById('gistId').value + '. If you are inputting a url be sure it is in this form: https://gist.github.com/id', true);
+                }
+            });
+    });
+
     registry.byId('buttonNew').on('click', function() {
         var htmlText = (htmlEditor.getValue()).replace(/\s/g, '');
         var jsText = (jsEditor.getValue()).replace(/\s/g, '');
@@ -859,6 +961,7 @@ require({
     });
     // Clicking the 'Run' button simply reloads the iframe.
     registry.byId('buttonRun').on('click', function() {
+        runGist = true;
         CodeMirror.commands.runCesium(jsEditor);
     });
 
@@ -944,14 +1047,6 @@ require({
         this.originalResize(changeSize, resultSize);
     };
 
-    var queryObject = {};
-    if (window.location.search) {
-        queryObject = ioQuery.queryToObject(window.location.search.substring(1));
-    } else {
-        queryObject.src = 'Hello World.html';
-        queryObject.label = 'Showcases';
-    }
-
     function requestDemo(name) {
         return xhr.get({
             url : 'gallery/' + name + '.html',
@@ -988,7 +1083,11 @@ require({
             if (defined(queryObject.src)) {
                 if (demo.name === queryObject.src.replace('.html', '')) {
                     loadFromGallery(demo).then(function() {
-                        window.history.replaceState(demo, demo.name, '?src=' + demo.name + '.html&label=' + queryObject.label);
+                        if (defined(queryObject.gistId)) {
+                            window.history.replaceState(demo, demo.name, '?src=' + demo.name + '.html&label=' + queryObject.label + '&gist=' + queryObject.gistId);
+                        } else {
+                            window.history.replaceState(demo, demo.name, '?src=' + demo.name + '.html&label=' + queryObject.label);
+                        }
                         document.title = demo.name + ' - Cesium Sandcastle';
                     });
                 }
@@ -1065,6 +1164,7 @@ require({
             newDemo = demo;
         }
         demoLink.onclick = function(e) {
+            delete queryObject.gistId;
             if (mouse.isMiddle(e)) {
                 window.open('gallery/' + demo.name + '.html');
             } else {

Apps/Sandcastle/index.html

@@ -78,6 +78,28 @@
                     </a>
                 </div>
             </div>
+            <span data-dojo-type="dijit.ToolbarSeparator"></span>
+            <div id="buttonShareDrop" data-dojo-type="dijit.form.DropDownButton" data-dojo-props="iconClass: 'shareIcon', showLabel: true">
+                <span>Share</span>
+                <div id="dropDownShare" data-dojo-type="dijit.TooltipDialog" data-dojo-props="class: 'popDownDialog'">
+                    <div>Url:<br/>
+                        <textarea data-dojo-type="dijit.form.Textarea" id="gistLinkShare"
+                                  data-dojo-props="trim:true" style="width: 335px;"></textarea>
+                    </div>
+                    <div id="buttonShare" data-dojo-type="dijit.form.Button">Share</div>
+                </div>
+            </div>
+            <span data-dojo-type="dijit.ToolbarSeparator"></span>
+            <div id="buttonImportDrop" data-dojo-type="dijit.form.DropDownButton" data-dojo-props="iconClass: 'gitHubIcon', showLabel: true">
+                <span>Import Gist</span>
+                <div id="dropDownImport" data-dojo-type="dijit.TooltipDialog" data-dojo-props="class: 'popDownDialog'">
+                    <div>Gist Id or Url:<br/>
+                        <textarea data-dojo-type="dijit.form.Textarea" id="gistId"
+                                  data-dojo-props="trim:true" style="width: 335px;"></textarea>
+                    </div>
+                    <div id="buttonImport" data-dojo-type="dijit.form.Button">Import</div>
+                </div>
+            </div>
             <!--
             <span data-dojo-type="dijit.ToolbarSeparator"></span>
             <div id="buttonUpload" data-dojo-type="dijit.form.Button" data-dojo-props="iconClass: 'dijitIconDocuments', showLabel: true">

CHANGES.md

@@ -8,6 +8,7 @@ Change Log
 * Deprecated
   *
 * Fixed issue causing the sun not to render. [#3801](https://github.com/AnalyticalGraphicsInc/cesium/pull/3801)
+* Added ability to import and export Sandcastle example using GitHub Gists. [#3795](https://github.com/AnalyticalGraphicsInc/cesium/pull/3795)
 
 ### 1.20 - 2016-04-01
 

ThirdParty/dojo-release-1.10.4/dijit/icons/commonIcons_rtl.css

@@ -119,3 +119,17 @@ The 16 x 16px icons in these sprites are action and object type images which can
 .dijitRtl .dijitDisabled .dijitIconError {
 	background-image: url('images/commonIconsObjActDisabled_rtl.png'); /* Contains both object and action icons as a sprite image for the disabled state. These would be used by buttons and menus.   */
 }
+
+.gitHubIcon {
+	background-image: url('../../../../gitHub16px.png');
+	width: 16px;
+	height: 16px;
+	text-align: center;
+}
+
+.shareIcon {
+	background-image: url('../../../../share16px.png');
+	width: 16px;
+	height: 16px;
+	text-align: center;
+}