Demos: Add new infrastructure using a require.js bootstrap

Fixes #10119
Closes gh-1557

diff --git a/Gruntfile.js b/Gruntfile.js
index 3018702f55a722d6a0a3991173d3eb4c5a2e70ca..c4acdb7fcbc215fc9ddeb17c2326df0c8f61f822 100644 (file)
--- a/Gruntfile.js
+++ b/Gruntfile.js
@@ -205,9 +205,18 @@ grunt.initConfig({
        },
        uglify: minify,
        htmllint: {
-               good: [ "demos/**/*.html", "tests/**/*.html" ].concat( htmllintBad.map( function( file ) {
+               good: [ "tests/**/*.html" ].concat( htmllintBad.map( function( file ) {
                        return "!" + file;
                } ) ),
+               demos: {
+                       options: {
+                               ignore: [
+                               /The text content of element “script” was not in the required format: Expected space, tab, newline, or slash but found “.” instead/
+                       ] },
+                       src: [ "demos/**/*.html" ].concat( htmllintBad.map( function( file ) {
+                               return "!" + file;
+                       } ) )
+               },
                bad: {
                        options: {
                                ignore: [

diff --git a/demos/bootstrap.js b/demos/bootstrap.js
new file mode 100644 (file)
index 0000000..c82ecc1
--- /dev/null
+++ b/demos/bootstrap.js
@@ -0,0 +1,60 @@
+/* globals window:true, document:true */
+( function() {
+
+// Find the script element
+var scripts = document.getElementsByTagName( "script" );
+var script = scripts[ scripts.length - 1 ];
+
+// Read the modules
+var modules = script.getAttribute( "data-modules" );
+var pathParts = window.location.pathname.split( "/" );
+var effectsAll = [
+       "effect-blind",
+       "effect-bounce",
+       "effect-clip",
+       "effect-drop",
+       "effect-explode",
+       "effect-fade",
+       "effect-fold",
+       "effect-highlight",
+       "effect-puff",
+       "effect-pulsate",
+       "effect-scale",
+       "effect-shake",
+       "effect-size",
+       "effect-slide"
+];
+
+// Hide the page while things are loading to prevent a FOUC
+document.documentElement.className = "demo-loading";
+
+require.config( {
+       baseUrl: "../../ui",
+       paths: {
+               jquery: "../external/jquery/jquery",
+               external: "../external/"
+       },
+       shim: {
+               "external/globalize/globalize.culture.de-DE": [ "external/globalize/globalize" ],
+               "external/globalize/globalize.culture.ja-JP": [ "external/globalize/globalize" ]
+       }
+} );
+
+// Replace effects all shortcut modules with all the effects modules
+if ( modules && modules.indexOf( "effects-all" ) !== -1 ) {
+       modules = modules.replace( /effects-all/, effectsAll.join( " " ) );
+}
+
+modules = modules ? modules.replace( /^\s+|\s+$/g, "" ).split( /\s+/ ) : [];
+modules.push( pathParts[ pathParts.length - 2 ] );
+
+require( modules, function() {
+       var newScript = document.createElement( "script" );
+
+       document.documentElement.className = "";
+
+       newScript.text = "( function() { " + script.innerHTML + " } )();";
+       document.head.appendChild( script ).parentNode.removeChild( script );
+} );
+
+} )();

diff --git a/demos/demos.css b/demos/demos.css
index 40542532877e0924a83060a6ee80178589b879b8..0b5b5ee49c4b20a7c14ef146232bcb4b04b24eef 100644 (file)
--- a/demos/demos.css
+++ b/demos/demos.css
@@ -2,6 +2,10 @@ body {
        font-family: Arial, Helvetica, sans-serif;
 }
 
+.demo-loading {
+       visibility: hidden;
+}
+
 table {
        font-size: 1em;
 }