FLUID-4351: Move all JS into one file; update demo namespace.

fluid-project · Aug 16, 2011 · b93bf53 · b93bf53
1 parent 7e48160
commit b93bf53
Show file tree

Hide file tree

Showing 4 changed files with 95 additions and 73 deletions.
diff --git a/src/webapp/demos/uiOptions/html/uiOptions.html b/src/webapp/demos/uiOptions/html/uiOptions.html
@@ -19,7 +19,6 @@
 
         <link rel="stylesheet" type="text/css" href="../../../components/uiOptions/css/UIOptions.css" />
         <link rel="stylesheet" type="text/css" href="../../../components/uiOptions/css/FatPanelUIOptions.css" />
-        <link rel="stylesheet" type="text/css" href="../../../components/uiOptions/css/Slider.css" />
         <link rel="stylesheet" type="text/css" href="../css/uiOptions.css" />
 
         <title>User Interface Options Demo</title>
@@ -52,6 +51,10 @@
 
     <body class="uio-demo-theme">
 
+        <script type="text/javascript">
+            demo.initPageEnhancer("uio-demo-theme");
+        </script>
+
 		<div class="flc-uiOptions-fatPanel fl-uiOptions-fatPanel">
             <!-- This is the div that will contain the UI Options component -->
 			<div id="myUIOptions" class="flc-slidingPanel-panel flc-uiOptions-iframe"></div>
@@ -73,10 +76,6 @@
 
         <div class="flc-toc-tocContainer toc"> </div>
 
-        <script type="text/javascript">
-            uioDemo.slidingUIOptions($("#mySlidingPanel"), $("#myUIOptions"));            
-        </script>
-
         <div class="fl-container-950 fl-centered">
             <div class="fl-clearfix header">
                 <h1>User interface options</h1>
@@ -207,5 +206,10 @@ <h2>Leave some feedback</h2>
                 </div>
             </div>
         </div>
+
+        <script type="text/javascript">
+            demo.initFatPanel($("#mySlidingPanel"), $("#myUIOptions"));            
+        </script>
+
     </body>
 </html>
diff --git a/src/webapp/demos/uiOptions/html/uiOptionsFullWithPreview.html b/src/webapp/demos/uiOptions/html/uiOptionsFullWithPreview.html
@@ -43,9 +43,15 @@
         <script type="text/javascript" src="../../../components/uiOptions/js/UIOptions.js"></script>
         <script type="text/javascript" src="../../../components/uiOptions/js/FullPreviewUIOptions.js"></script>        
         <script type="text/javascript" src="../../../components/tableOfContents/js/TableOfContents.js"></script>
+
+        <script type="text/javascript" src="../js/uiOptions.js"></script>
     </head>
 
     <body>
+        <script type="text/javascript">
+            demo.initPageEnhancer();
+        </script>
+
         <div class="backButton">
             <a href="uiOptions.html">Return To Site</a> 
         </div>
@@ -60,42 +66,9 @@ <h1>User Interface Options</h1>
         </div>
 
         <script type="text/javascript">
-            $().ready(function () {
-                fluid.pageEnhancer({
-                    tocTemplate: "../../../components/tableOfContents/html/TableOfContents.html"
-                });
-
-                fluid.uiOptions.fullPreview("#myUIOptions", {
-                    // Tell UIOptions where to find all the templates, relative to this file
-                    prefix: "../../../components/uiOptions/html/",
-
-                    // Tell UIOptions where to redirect to if the user cancels the operation
-                    uiOptions: {
-                       options: {
-                           listeners: {
-                               onCancel: function(){
-                                   window.location = "uiOptions.html";
-                               }
-                           }
-                       }
-                    },
-
-                    previewEnhancer: {
-                        options: {
-                            // Tell the Preview's UI Enhancer where the Table of Contents template is
-                            tocTemplate: "../../../components/tableOfContents/html/TableOfContents.html",
-
-                            // and the name of the default theme
-                            classnameMap: {
-                                theme: {
-                                    "default": "uio-demo-theme"
-                                }
-                            }
-                        }
-                    }
-                });
-            });
+            demo.initFullWithPreview("#myUIOptions", "uio-demo-theme");
         </script>
+
     </body>
 </html>
 
diff --git a/src/webapp/demos/uiOptions/html/uiOptionsFullWithoutPreview.html b/src/webapp/demos/uiOptions/html/uiOptionsFullWithoutPreview.html
@@ -43,9 +43,15 @@
         <script type="text/javascript" src="../../../components/uiOptions/js/UIOptions.js"></script>
         <script type="text/javascript" src="../../../components/uiOptions/js/FullNoPreviewUIOptions.js"></script>
         <script type="text/javascript" src="../../../components/tableOfContents/js/TableOfContents.js"></script>                
+
+        <script type="text/javascript" src="../js/uiOptions.js"></script>
     </head>
 
     <body>
+        <script type="text/javascript">
+            demo.initPageEnhancer();
+        </script>
+
         <div class="backButton">
             <a href="uiOptions.html">Return To Site</a> 
         </div>
@@ -59,28 +65,9 @@ <h1>User Interface Options</h1>
         </div>
 
         <script type="text/javascript">
-            $().ready(function () {
-                fluid.pageEnhancer({
-                    tocTemplate: "../../../components/tableOfContents/html/TableOfContents.html"
-                });
-
-                fluid.uiOptions.fullNoPreview("#myUIOptions", {
-                    // Tell UIOptions where to find all the templates, relative to this file
-                    prefix: "../../../components/uiOptions/html/",
+            demo.initFullNoPreview("#myUIOptions");
+        </script>
 
-                    // Tell UIOptions where to redirect to if the user cancels the operation
-                    uiOptions: {
-                        options: {
-                            listeners: {
-                                onCancel: function(){
-                                    window.location = "uiOptions.html";
-                                }
-                            }
-                        }
-                    }
-                });
-            });
-        </script>        
     </body>
 </html>
 
diff --git a/src/webapp/demos/uiOptions/js/uiOptions.js b/src/webapp/demos/uiOptions/js/uiOptions.js
@@ -10,32 +10,90 @@ https://github.com/fluid-project/infusion/raw/master/Infusion-LICENSE.txt
 */
 
 // Declare dependencies
-/*global uioDemo:true, fluid, jQuery*/
+/*global demo:true, fluid, jQuery*/
 
 // JSLint options 
 /*jslint white: true, funcinvoke: true, undef: true, newcap: true, nomen: true, regexp: true, bitwise: true, browser: true, forin: true, maxerr: 100, indent: 4 */
 
-var uioDemo = uioDemo || {};
+var demo = demo || {};
 (function ($, fluid) {       
 
-    /* Our demo script */   
-    uioDemo.slidingUIOptions = function (panel, uioptions) {
-
-        fluid.pageEnhancer({
-            // Supply the table of contents' template URL
-            tocTemplate: "../../../components/tableOfContents/html/TableOfContents.html",
-            classnameMap: {
+    // Initialize UI Enhancer for the page.
+    demo.initPageEnhancer = function (customThemeName) {
+        var opts = {
+            tocTemplate: "../../../components/tableOfContents/html/TableOfContents.html"
+        };
+        if (customThemeName) {
+            opts.classnameMap = {
                 theme: {
-                    "default": "uio-demo-theme"
+                    "default": customThemeName
+                }
+            };
+        }
+        fluid.pageEnhancer(opts);
+    };
+
+    // Initialize UI Options on the Full Page, No Preview version
+    demo.initFullNoPreview = function (container) {
+        fluid.uiOptions.fullNoPreview(container, {
+            // Tell UIOptions where to find all the templates, relative to this file
+            prefix: "../../../components/uiOptions/html/",
+
+            // Tell UIOptions where to redirect to if the user cancels the operation
+            uiOptions: {
+                options: {
+                    listeners: {
+                        onCancel: function(){
+                            window.location = "uiOptions.html";
+                        }
+                    }
                 }
             }
         });
-
-        // Next, start up UI Options
+    };
+
+    // Initialize UI Options on the Full Page, With Preview version
+    demo.initFullWithPreview = function (container, customThemeName) {
+        fluid.uiOptions.fullPreview(container, {
+            // Tell UIOptions where to find all the templates, relative to this file
+            prefix: "../../../components/uiOptions/html/",
+
+            // Tell UIOptions where to redirect to if the user cancels the operation
+            uiOptions: {
+               options: {
+                   listeners: {
+                       onCancel: function(){
+                           window.location = "uiOptions.html";
+                       }
+                   }
+               }
+            },
+
+            // Configure the preview's UI Enhancer
+            previewEnhancer: {
+                options: {
+                    // Tell the Preview's UI Enhancer where the Table of Contents template is
+                    tocTemplate: "../../../components/tableOfContents/html/TableOfContents.html",
+
+                    // and the name of the default theme
+                    classnameMap: {
+                        theme: {
+                            "default": customThemeName
+                        }
+                    }
+                }
+            }
+        });
+    };
+
+    // Initialize UI Options on the Fat Panel version
+    demo.initFatPanel = function (panel, uioptions) {        
+        // Start up UI Options
         fluid.uiOptions.fatPanel(".flc-uiOptions-fatPanel", {
             prefix: "../../../components/uiOptions/html/"
         });
 
+        // Configure the buttons
         $(".disp-opts-with-preview").click(function(){
            window.location = "uiOptionsFullWithPreview.html";
        });