Create Sandcastle Standalone Mode

Apps/Sandcastle/CesiumSandcastle.js

@@ -1,4 +1,5 @@
-/*global require,Blob,JSHINT*/
+/*global require,Blob,JSHINT */
+/*global decodeBase64Data, embedInSandcastleTemplate */
 /*global gallery_demos, has_new_gallery_demos, hello_world_index*/// defined in gallery/gallery-index.js, created by build
 /*global sandcastleJsHintOptions*/// defined by jsHintOptions.js, created by build
 require({
@@ -110,6 +111,8 @@ require({
     if (!defined(window.Cesium)) {
         window.Cesium = Cesium;
     }
+    // Used by Sandcastle-helpers.js
+    window.pako = pako;
 
     parser.parse();
 
@@ -383,7 +386,7 @@ require({
         // make a copy of the options, JSHint modifies the object it's given
         var options = JSON.parse(JSON.stringify(sandcastleJsHintOptions));
         /*eslint-disable new-cap*/
-        if (!JSHINT(getScriptFromEditor(false), options)) {
+        if (!JSHINT(embedInSandcastleTemplate(jsEditor.getValue(), false), options)) {
             var hints = JSHINT.errors;
             for (i = 0, len = hints.length; i < len; ++i) {
                 var hint = hints[i];
@@ -540,22 +543,6 @@ require({
         }
     });
 
-    function getScriptFromEditor(addExtraLine) {
-        return 'function startup(Cesium) {\n' +
-               '    \'use strict\';\n' +
-               '//Sandcastle_Begin\n' +
-               (addExtraLine ? '\n' : '') +
-               jsEditor.getValue() +
-               '//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';
-    }
-
     var scriptCodeRegex = /\/\/Sandcastle_Begin\s*([\s\S]*)\/\/Sandcastle_End/;
 
     function activateBucketScripts(bucketDoc) {
@@ -620,7 +607,7 @@ require({
                 // Firefox line numbers are zero-based, not one-based.
                 var isFirefox = navigator.userAgent.indexOf('Firefox/') >= 0;
 
-                element.textContent = getScriptFromEditor(isFirefox);
+                element.textContent = embedInSandcastleTemplate(jsEditor.getValue(), isFirefox);
                 bucketDoc.body.appendChild(element);
             }
         };
@@ -775,20 +762,10 @@ require({
 
                 applyLoadedDemo(code, html);
             } else if (window.location.hash.indexOf('#c=') === 0) {
-                // data stored in the hash as:
-                // Base64 encoded, raw DEFLATE compressed JSON array where index 0 is code, index 1 is html
                 var base64String = window.location.hash.substr(3);
-                // restore padding
-                while (base64String.length % 4 !== 0) {
-                    base64String += '=';
-                }
-                var jsonString = pako.inflate(atob(base64String), { raw: true, to: 'string' });
-                // we save a few bytes by omitting the leading [" and trailing "] since they are always the same
-                jsonString = '["' + jsonString + '"]';
-                json = JSON.parse(jsonString);
-                // index 0 is code, index 1 is html
-                code = json[0];
-                html = json[1];
+                var data = decodeBase64Data(base64String);
+                code = data.code;
+                html = data.html;
 
                 applyLoadedDemo(code, html);
             } else {
@@ -953,7 +930,7 @@ require({
         return location.protocol + '//' + location.host + location.pathname;
     }
 
-    registry.byId('buttonShareDrop').on('click', function() {
+    function makeCompressedBase64String() {
         var code = jsEditor.getValue();
         var html = htmlEditor.getValue();
 
@@ -965,6 +942,15 @@ require({
         var base64String = btoa(pako.deflate(jsonString, { raw: true, to: 'string', level: 9 }));
         base64String = base64String.replace(/\=+$/, ''); // remove padding
 
+        return base64String;
+    }
+
+    registry.byId('buttonShareDrop').on('click', function() {
+        var code = jsEditor.getValue();
+        var html = htmlEditor.getValue();
+
+        var base64String = makeCompressedBase64String();
+
         var shareUrlBox = document.getElementById('shareUrl');
         shareUrlBox.value = getBaseUrl() + '#c=' + base64String;
         shareUrlBox.select();
@@ -1019,7 +1005,7 @@ require({
         return local.headers + '\n' +
                htmlEditor.getValue() +
                '<script id="cesium_sandcastle_script">\n' +
-               getScriptFromEditor(false) +
+               embedInSandcastleTemplate(jsEditor.getValue(), false) +
                '</script>\n' +
                '</body>\n' +
                '</html>\n';
@@ -1045,24 +1031,11 @@ require({
 
     registry.byId('buttonNewWindow').on('click', function() {
         var baseHref = window.location.href;
+        var data = makeCompressedBase64String();
+        var url = getBaseUrl();
+        url = url.replace('index.html','') + 'standalone.html#c=' + data;
 
-        //Handle case where demo is in a sub-directory.
-        var searchLen = window.location.search.length;
-        if (searchLen > 0) {
-            baseHref = baseHref.substring(0, baseHref.length - searchLen);
-        }
-
-        var pos = baseHref.lastIndexOf('/');
-        baseHref = baseHref.substring(0, pos) + '/gallery/';
-
-        var html = getDemoHtml();
-        html = html.replace('<head>', '<head>\n    <base href="' + baseHref + '">');
-        var htmlBlob = new Blob([html], {
-            'type' : 'text/html;charset=utf-8',
-            'endings' : 'native'
-        });
-        var htmlBlobURL = URL.createObjectURL(htmlBlob);
-        window.open(htmlBlobURL, '_blank');
+        window.open(url, '_blank');
         window.focus();
     });
 

Apps/Sandcastle/Sandcastle-helpers.js

@@ -0,0 +1,40 @@
+/*global pako*/
+(function() {
+    'use strict';
+
+    window.embedInSandcastleTemplate = function(code, addExtraLine) {
+        return 'function startup(Cesium) {\n' +
+           '    \'use strict\';\n' +
+           '//Sandcastle_Begin\n' +
+           (addExtraLine ? '\n' : '') +
+           code +
+           '//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';
+    };
+    window.decodeBase64Data = function(base64String) {
+        // data stored in the hash as:
+        // Base64 encoded, raw DEFLATE compressed JSON array where index 0 is code, index 1 is html
+        // restore padding
+        while (base64String.length % 4 !== 0) {
+            base64String += '=';
+        }
+        var jsonString = pako.inflate(atob(base64String), { raw: true, to: 'string' });
+        // we save a few bytes by omitting the leading [" and trailing "] since they are always the same
+        jsonString = '["' + jsonString + '"]';
+        var json = JSON.parse(jsonString);
+        // index 0 is code, index 1 is html
+        var code = json[0];
+        var html = json[1];
+
+        return {
+            code : code,
+            html : html
+        };
+    };
+ }());

Apps/Sandcastle/index.html

@@ -20,6 +20,7 @@
 
     <script src="jsHintOptions.js"></script>
     <script src="gallery/gallery-index.js"></script>
+    <script type="text/javascript" src="Sandcastle-helpers.js"></script>
     <script src="CesiumSandcastle.js"></script>
     <!-- Needed for autocomplete -->
     <link rel="stylesheet" href="../../ThirdParty/codemirror-4.6/addon/hint/show-hint.css">

Apps/Sandcastle/standalone.html

@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
+    <title>Cesium Demo</title>
+    <script type="text/javascript" src="Sandcastle-header.js"></script>
+    <script type="text/javascript" src="ThirdParty/pako.min.js"></script>
+    <script type="text/javascript" src="../../../ThirdParty/requirejs-2.1.20/require.js"></script>
+    <script type="text/javascript">
+        if(typeof require === 'function') {
+            require.config({
+                baseUrl : '../../',
+                waitSeconds : 120
+            });
+        }
+    </script>
+</head>
+<body class="sandcastle-loading" data-sandcastle-bucket="bucket-requirejs.html">
+<script type="text/javascript" src="Sandcastle-client.js"></script>
+<script type="text/javascript" src="Sandcastle-helpers.js"></script>
+<script type="text/javascript">
+/*global pako,decodeBase64Data,embedInSandcastleTemplate */
+if (typeof require === 'function') {
+    require([
+        'Source/Cesium'
+    ], function(
+        Cesium) {
+         'use strict';
+        window.Cesium = Cesium;
+        loadDemoFromUrl();
+    });
+} else {
+    loadDemoFromUrl();
+}
+
+function loadDemoFromUrl() {
+    'use strict';
+    // The helper functions script needs this.
+    window.pako = pako;
+    var defined = Cesium.defined;
+
+    if (window.location.hash.indexOf('#c=') === 0) {
+        var base64String = window.location.hash.substr(3);
+        var data = decodeBase64Data(base64String);
+        var html = data.html;
+        var code = data.code;
+        // Replace CSS URL since standalone is one level up from the usual bucket.html
+        html = html.replace('../templates', 'templates');
+
+        // Add the HTML content
+        var htmlElement = document.createElement('div');
+        htmlElement.innerHTML = html;
+        document.body.appendChild(htmlElement);
+
+        // Wait for that to load, then add the script
+        // the window load event will re-fire since we've altered the DOM.
+        window.addEventListener("load", function(event) {
+            var scriptElement = document.createElement('script');
+            var isFirefox = navigator.userAgent.indexOf('Firefox/') >= 0;
+            document.head.appendChild(scriptElement);
+            scriptElement.innerHTML = embedInSandcastleTemplate(code, isFirefox);
+        });
+    }
+}
+</script>
+</body>
+</html>

gulpfile.js

@@ -1204,6 +1204,7 @@ var sandcastleJsHintOptions = ' + JSON.stringify(primary, null, 4) + ';\n';
 function buildSandcastle() {
     var appStream = gulp.src([
             'Apps/Sandcastle/**',
+            '!Apps/Sandcastle/standalone.html',
             '!Apps/Sandcastle/images/**',
             '!Apps/Sandcastle/gallery/**.jpg'
         ])
@@ -1227,7 +1228,13 @@ function buildSandcastle() {
         })
         .pipe(gulp.dest('Build/Apps/Sandcastle'));
 
-    return streamToPromise(eventStream.merge(appStream, imageStream));
+    var standaloneStream = gulp.src([
+        'Apps/Sandcastle/standalone.html'
+        ])
+        .pipe(gulpReplace('../../../ThirdParty/requirejs-2.1.20/require.js', '../../CesiumUnminified/Cesium.js'))
+        .pipe(gulp.dest('Build/Apps/Sandcastle'));
+
+    return streamToPromise(eventStream.merge(appStream, imageStream, standaloneStream));
 }
 
 function buildCesiumViewer() {