Merge remote branch 'colinbdclark/FLUID-2616'

* colinbdclark/FLUID-2616: FLUID-2616: Reworked the UI Options preview test. FLUID-2616: Ensured new onReady event fires at the correct time: after the first time it renders itself only. NOJIRA: Minor linting of UI Options. FLUID-2616: UI Options tests are now passing again. Added onReady event to signal when the component is first ready for action. FLUID-2616: Refactored demos so that they share the same code instead of cut 'n paste duplication. Puppies everywhere, rejoice! FLUID-3618: Fixed the UI Options demo's Edit Appearance button so it doesn't need to be clicked twice after saving or cancelling. FLUID-2616: Substantial simplification of the UI Options demo. FLUID-2616: UIOptions now automatically loads its template at startup. A bit more refactoring is still to come.
fluid-project · Mar 17, 2011 · b38e94f · b38e94f
2 parents 47a843e + 8c2a9db
commit b38e94f
Show file tree

Hide file tree

Showing 8 changed files with 184 additions and 238 deletions.
diff --git a/src/webapp/components/uiOptions/js/UIOptions.js b/src/webapp/components/uiOptions/js/UIOptions.js
@@ -28,10 +28,11 @@ var fluid_1_4 = fluid_1_4 || {};
 
     // This will be removed once the jQuery UI slider has built in ARIA 
     var initSliderAria = function (thumb, opts) {
-        var ariaDefaults = {role: 'slider',
-         "aria-valuenow": opts.value,
-         "aria-valuemin": opts.min, 
-         "aria-valuemax": opts.max    
+        var ariaDefaults = {
+            role: 'slider',
+            "aria-valuenow": opts.value,
+            "aria-valuemin": opts.min, 
+            "aria-valuemax": opts.max    
         };
         thumb.attr(ariaDefaults);        
     };
@@ -69,8 +70,7 @@ var fluid_1_4 = fluid_1_4 || {};
                 }
                 slider.slider("value", this.value);
                 that.updateModel(this.value, this);
-            }
-            else {
+            } else {
                 // handle invalid entry
                 this.value = that.model;
             }
@@ -79,8 +79,7 @@ var fluid_1_4 = fluid_1_4 || {};
         textfield.keypress(function (evt) {
             if (evt.keyCode !== $.ui.keyCode.ENTER) {
                 return true;
-            } 
-            else {
+            } else {
                 $(evt.target).change();
                 $(fluid.findForm(evt.target)).submit();
                 return false;
@@ -372,12 +371,16 @@ var fluid_1_4 = fluid_1_4 || {};
             initPreview(that);
         });
 
-        var rendererOptions = createRenderOptions(that);
-        var template = fluid.selfRender(that.container, generateTree(that, rendererOptions.model), rendererOptions);
-
-        that.events.afterRender.fire();
-
-        return template;
+        // Fetch UI Options' template and parse it on arrival.
+        fluid.fetchResources({
+            uiOptions: {
+                href: that.options.templateUrl
+            }
+        }, function (spec) {
+            that.templates = fluid.parseTemplates(spec, ["uiOptions"], {});
+            that.hasFinishedInit = false;
+            that.refreshView();
+        });
     };
 
     /**
@@ -397,7 +400,6 @@ var fluid_1_4 = fluid_1_4 || {};
 
         // TODO: we shouldn't need the savedModel and should use the uiEnhancer.model instead
         var savedModel = that.uiEnhancer.model;
-        var template;
 
         /**
          * Saves the current model and fires onSave
@@ -431,8 +433,12 @@ var fluid_1_4 = fluid_1_4 || {};
          */
         that.refreshView = function () {
             var rendererOptions = createRenderOptions(that);
-            fluid.reRender(template, that.container, generateTree(that, rendererOptions.model), rendererOptions);
+            fluid.reRender(that.templates, that.container, generateTree(that, rendererOptions.model), rendererOptions);
             that.events.afterRender.fire();
+            if (!that.hasFinishedInit) {
+                that.hasFinishedInit = true;
+                that.events.onReady.fire();
+            }
         };
 
         /**
@@ -447,7 +453,7 @@ var fluid_1_4 = fluid_1_4 || {};
             fluid.model.copyModel(that.model, newModel);
         };
 
-        template = setupUIOptions(that);
+        setupUIOptions(that);
 
         return that;   
     };
@@ -477,11 +483,12 @@ var fluid_1_4 = fluid_1_4 || {};
             previewFrame : ".flc-uiOptions-preview-frame"
         },
         events: {
+            onReady: null,
+            afterRender: null,
             modelChanged: null,
             onSave: null,
             onCancel: null,
-            onReset: null,
-            afterRender: null
+            onReset: null
         },
         strings: {
             textFont: ["Serif", "Sans-Serif", "Arial", "Verdana", "Courier", "Times"],
@@ -499,7 +506,8 @@ var fluid_1_4 = fluid_1_4 || {};
             layout: ["simple", "default"],
             toc: ["true", "false"]
         },
-        previewTemplateUrl: "UIOptionsPreview.html"        
+        templateUrl: "UIOptions.html",
+        previewTemplateUrl: "UIOptionsPreview.html"
     });
 
 })(jQuery, fluid_1_4);
diff --git a/src/webapp/demos/uiOptions/html/uiOptions.html b/src/webapp/demos/uiOptions/html/uiOptions.html
@@ -59,7 +59,7 @@ <h1>Some Sample Title</h1>
         <p>Some content with <a id="myLink">a link</a> and<button id="myButton">a button</button>. </p>
 
         <script type="text/javascript">
-            demo.initUIOptions();
+            demo.slidingUIOptions($("#myUIOptions"), $(".myButton"));
         </script>
     </body>
 

diff --git a/src/webapp/demos/uiOptions/js/uiOptions.js b/src/webapp/demos/uiOptions/js/uiOptions.js
@@ -19,13 +19,35 @@ https://source.fluidproject.org/svn/LICENSE.txt
 
 var demo = demo || {};
 (function ($, fluid) {
+
+    // Places UI Options into a sliding panel, which can be controlled by a button.
+    var slidingPanel = function (uiOptions, button) {
+        var slideUp = function () {
+            uiOptions.container.slideUp();
+        };
+
+        // Bind listeners to UIOptions save & cancel events, sliding the panel up.
+        uiOptions.events.onCancel.addListener(slideUp);
+        uiOptions.events.onSave.addListener(slideUp);
+
+        // Bind listeners to show and hide the panel when the button is clicked.
+        button.click(function () {
+            if (uiOptions.container.is(":hidden")) {
+                uiOptions.container.slideDown();
+            } else {
+                uiOptions.container.slideUp();
+                uiOptions.cancel();
+            }
+            return false;
+        });
+
+        // Hide the panel to start.
+        uiOptions.container.hide();
+    };
 
-    var uiOptionsNode;
-    var uiOptionsComponent;
-
-    //initialize the UI Enhancer
-    var setupUIEnhancer = function () {
-        var enhancerOpts = {
+    demo.slidingUIOptions = function (container, button) {
+        // First, initialize a UIEnhancer for the page
+        var pageEnhancer = fluid.uiEnhancer(document, {
             defaultSiteSettings: {
                 theme: "mist",
                 linksBold: true,
@@ -37,47 +59,15 @@ var demo = demo || {};
                 }
 
             }
-        };
+        });
 
-        return fluid.uiEnhancer(document, enhancerOpts);
-    };
-
-    //initialize UI Options component
-    var setupUIOptions = function () {
-        var options = {
-            listeners: {
-                onCancel: function () {
-                    uiOptionsNode.slideUp();
-                },
-                onSave: function () {
-                    uiOptionsNode.slideUp();
-                }
-            }
-        };
-
-        uiOptionsComponent = fluid.uiOptions(".uiOptions", options);
-    };
-
-    //load the UI Options component
-    var loadUIOptions = function () {
-        var urlSelector = "../../../components/uiOptions/html/UIOptions.html .uiOptions";
-        uiOptionsNode.load(urlSelector, setupUIOptions);
-    };
-
-    var setupPage = function () {
-        $(".myButton").toggle(function () {
-                uiOptionsNode.slideDown();
-            }, function () {
-                uiOptionsNode.slideUp();
-                uiOptionsComponent.cancel();
-            });
-        uiOptionsNode.hide();
+        // Next, start up UI Options
+        var myUIOptions = fluid.uiOptions(container, {
+            templateUrl: "../../../components/uiOptions/html/UIOptions.html"
+        });
+
+        // Put it in the sliding panel.
+        slidingPanel(myUIOptions, button);
     };
 
-    demo.initUIOptions = function () {
-        uiOptionsNode = $("#myUIOptions");
-        setupUIEnhancer();  
-        loadUIOptions();
-        setupPage();
-    };
 })(jQuery, fluid);
diff --git a/src/webapp/integration-demos/sakai/html/ui-options-fss-sakai.html b/src/webapp/integration-demos/sakai/html/ui-options-fss-sakai.html
@@ -48,6 +48,7 @@
         <script type="text/javascript" src="../../../components/undo/js/Undo.js"></script>
         <script type="text/javascript" src="../../../components/uiOptions/js/UIEnhancer.js"></script>
         <script type="text/javascript" src="../../../components/uiOptions/js/UIOptions.js"></script>
+        <script type="text/javascript" src="../../../demos/uiOptions/js/uiOptions.js"></script>
         <script type="text/javascript" src="../js/sakai.js"></script>
 
         <title>Sakai</title>
@@ -63,7 +64,7 @@
         </div>
 
         <div class="ui_options"></div>
-
+        
         <div class="header fl-knockout">
             <h1>My Dashboard</h1>
             <p>Joe Instructor </p>
@@ -240,5 +241,10 @@ <h2>Content Management</h2>
             <p>© 2004-2008 The Sakai Foundation <br />
             Portions of Sakai are copyrighted by other parties as described in the <a href="#">Acknowledgments screen</a></p>
         </div>
+
+        <!-- Script block to instantiate UI Options when the necessary markup has loaded. -->
+        <script type="text/javascript">
+            demo.slidingUIOptions($(".ui_options"), $(".lookNfeel a"));
+        </script>
     </body>
 </html>
diff --git a/src/webapp/integration-demos/sakai/js/sakai.js b/src/webapp/integration-demos/sakai/js/sakai.js
diff --git a/src/webapp/tests/component-tests/uiOptions/html/TestPreviewTemplate.html b/src/webapp/tests/component-tests/uiOptions/html/TestPreviewTemplate.html
@@ -0,0 +1,8 @@
+<html>
+    <head>
+        <title>Test Preview Template</title>
+    </head>
+    <body>
+        <p>Hello, UI Options!</p>
+    </body>
+</html>
diff --git a/src/webapp/tests/component-tests/uiOptions/html/UIOptions-test.html b/src/webapp/tests/component-tests/uiOptions/html/UIOptions-test.html
@@ -15,6 +15,7 @@
         <script type="text/javascript" src="../../../../lib/json/js/json2.js"></script>
         <script type="text/javascript" src="../../../../framework/core/js/Fluid.js"></script>
         <script type="text/javascript" src="../../../../framework/core/js/DataBinding.js"></script>  
+        <script type="text/javascript" src="../../../../framework/core/js/FluidRequests.js"></script>  
         <script type="text/javascript" src="../../../../lib/fastXmlPull/js/fastXmlPull.js"></script>
         <script type="text/javascript" src="../../../../framework/renderer/js/fluidParser.js"></script>
         <script type="text/javascript" src="../../../../framework/renderer/js/fluidRenderer.js"></script>
@@ -37,7 +38,7 @@ <h2 id="qunit-userAgent"></h2>
     <ol id="qunit-tests"></ol>
 
     <!-- Test HTML -->
-    <div id="main" style="display:none;" class="container">
+    <div id="main" class="container">
         <div id="ui-options"></div>
      </div>
     </body>