Merge remote-tracking branch 'justin/FLUID-4059'

* justin/FLUID-4059: FLUID-4059: made aria setting declarative in the progress demo FLUID-4059: Refactored magic numbers from progress demo FLUID_4059: Correcting namespace for onSubmit listener FLUID-4059: Updating comments NOJIRA: Correcting copyrights FLUID-4059: Updating class names and markup FLUID-4059: Modernizing renderer demo FLUID-4059: Updating copyright FLUID-4059: Componentizing the progress demo FLUID-4059: put pager demo code into a grade FLUID-4059: Used a grade to simplify inline edit demo FLUID-4059: Simplified reorderer demos FLUID-4059: Removing unused import FLUID-4059: Updated ToC demo FLUID-4059: Updating copyright FLUID-4059: Updated uploader demo
fluid-project · Sep 14, 2016 · c8457da · c8457da
2 parents a6657da + 5c4a27d
commit c8457da
Show file tree

Hide file tree

Showing 23 changed files with 626 additions and 688 deletions.
diff --git a/demos/inlineEdit/index.html b/demos/inlineEdit/index.html
@@ -58,7 +58,12 @@
             <figure>
 
             <script type="text/javascript">
-                demo.initInlineEdit();
+                demo.inlineEdit(".demoSelector-inlineEdit-container-title", {
+                    styles: {
+                        edit: "demo-inlineEdit-title-edit demo-inlineEdit-edit"
+                    }
+                });
+                demo.inlineEdit(".demoSelector-inlineEdit-container-caption");
             </script>
         </div>
     </section>

diff --git a/demos/inlineEdit/js/inlineEditDemo.js b/demos/inlineEdit/js/inlineEditDemo.js
@@ -1,5 +1,5 @@
 /*
-Copyright 2010 OCAD University
+Copyright 2010-2016 OCAD University
 
 Licensed under the Educational Community License (ECL), Version 2.0 or the New
 BSD license. You may not use this file except in compliance with one these
@@ -26,55 +26,25 @@ var demo = demo || {};
         return markupNode;
     };
 
-    /**
-     * Initialize all simple inline edit components present on the inline-edit
-     * demo.
-     */
-    demo.initInlineEdit = function () {
-
-        /**
-         * Simple inline edits example.
-         */
-        fluid.inlineEdit(".demoSelector-inlineEdit-container-title", {
-            components: {
-                undo: {
-                    type: "fluid.undo",
-                    options: {
-                        selectors: demo.initInlineEdit.selectors,
-                        renderer: demo.undoRenderer
-                    }
-                }
-            },
-            styles: {
-                edit: "demo-inlineEdit-title-edit demo-inlineEdit-edit"
-            },
-            strings: {
-                defaultViewText: "Edit this",
-                defaultFocussedViewText: "Edit this (click or press enter)"
-            }
-        });
-
-        fluid.inlineEdit(".demoSelector-inlineEdit-container-caption", {
-            components: {
-                undo: {
-                    type: "fluid.undo",
-                    options: {
-                        selectors: demo.initInlineEdit.selectors,
-                        renderer: demo.undoRenderer
-                    }
+    fluid.defaults("demo.inlineEdit", {
+        gradeNames: ["fluid.inlineEdit"],
+        strings: {
+            defaultViewText: "Edit this",
+            defaultFocussedViewText: "Edit this (click or press enter)"
+        },
+        components: {
+            undo: {
+                type: "fluid.undo",
+                options: {
+                    selectors: {
+                        undoContainer: ".demo-undoContainer",
+                        undoControl: ".demo-undoControl",
+                        redoContainer: ".demo-redoContainer",
+                        redoControl: ".demo-redoControl"
+                    },
+                    renderer: demo.undoRenderer
                 }
-            },
-            strings: {
-                defaultViewText: "Edit this",
-                defaultFocussedViewText: "Edit this (click or press enter)"
             }
-        });
-    };
-
-    demo.initInlineEdit.selectors = {
-        undoContainer: ".demo-undoContainer",
-        undoControl: ".demo-undoControl",
-        redoContainer: ".demo-redoContainer",
-        redoControl: ".demo-redoControl"
-    };
+        }
+    });
 })(jQuery, fluid);
diff --git a/demos/pager/index.html b/demos/pager/index.html
@@ -119,7 +119,7 @@ <h1>School Roster</h1>
     </div>
 
     <script type="text/javascript">
-        demo.initPager();
+        demo.pager(".demo-pager-container");
     </script>
 
     </body>

diff --git a/demos/pager/js/pagerDemo.js b/demos/pager/js/pagerDemo.js
@@ -1,7 +1,7 @@
 /*
 Copyright 2008-2009 University of Cambridge
 Copyright 2008-2009 University of Toronto
-Copyright 2010-2014 OCAD University
+Copyright 2010-2016 OCAD University
 Copyright 2010 Lucendo Development Ltd.
 
 Licensed under the Educational Community License (ECL), Version 2.0 or the New
@@ -19,86 +19,94 @@ var demo = demo || {};
 (function ($, fluid) {
     "use strict";
 
-    /**
-     * Main demo initialization
-     */
-    demo.initPager = function () {
-        var resources = {
+    fluid.defaults("demo.pager", {
+        gradeNames: ["fluid.viewComponent"],
+        events: {
+            onDataReady: null
+        },
+        listeners: {
+            "onCreate.loadData": "{that}.loadData"
+        },
+        resources: {
             users: {
                 href: "data/pager.json",
                 options: {
                     dataType: "json"
                 }
             }
-        };
-
-        function initPager(resourceSpecs) {
-
-            var model = resourceSpecs.users.resourceText;
-            var columnDefs = [
-                {
-                    key: "user-link",
-                    valuebinding: "*.userDisplayName",
-                    sortable: true
-                },
-                {
-                    key: "user-email",
-                    valuebinding: "*.userEmail",
-                    sortable: true
-                },
-                {
-                    key: "user-role",
-                    valuebinding: "*.memberRole",
-                    sortable: true
-                },
-                {
-                    key: "user-comment",
-                    valuebinding: "*.userComment",
-                    sortable: false
-                }
-            ];
-
-            demo.pager = fluid.pagedTable(".demo-pager-container", {
-                dataModel: model,
-                model: {
-                    pageSize: 20
-                },
-                dataOffset: "membership_collection",
-                columnDefs: columnDefs,
-                annotateColumnRange: "user-link",
-                components: {
-                    bodyRenderer: {
-                        type: "fluid.table.selfRender",
-                        options: {
-                            selectors: {
-                                root: ".demo-pager-table-data",
-                                "user-link": ".demo-user-link",
-                                "user-comment": ".demo-user-comment",
-                                "user-role": ".demo-user-role",
-                                "user-email": ".demo-user-email"
-                            },
-                            rendererOptions: {debugMode: false} // Change this to true to diagnose rendering issues
-                        }
-                    }
-                },
-                decorators: {
-                    unsortableHeader: [
+        },
+        invokers: {
+            loadData: {
+                funcName: "fluid.fetchResources",
+                args: ["{that}.options.resources", "{that}.events.onDataReady.fire"]
+            }
+        },
+        components: {
+            // Configuration for the actual Paged Table component
+            pagedTable: {
+                type: "fluid.pagedTable",
+                container: "{that}.container",
+                createOnEvent: "onDataReady",
+                options: {
+                    dataModel: "{demo.pager}.options.resources.users.resourceText",
+                    model: {
+                        pageSize: 20
+                    },
+                    dataOffset: "membership_collection",
+                    columnDefs: [
                         {
-                            type: "attrs",
-                            attributes: {
-                                title: null
-                            }
+                            key: "user-link",
+                            valuebinding: "*.userDisplayName",
+                            sortable: true
+                        },
+                        {
+                            key: "user-email",
+                            valuebinding: "*.userEmail",
+                            sortable: true
+                        },
+                        {
+                            key: "user-role",
+                            valuebinding: "*.memberRole",
+                            sortable: true
                         },
                         {
-                            type: "addClass",
-                            classes: "fl-pager-disabled"
+                            key: "user-comment",
+                            valuebinding: "*.userComment",
+                            sortable: false
                         }
-                    ]
+                    ],
+                    annotateColumnRange: "user-link",
+                    components: {
+                        bodyRenderer: {
+                            type: "fluid.table.selfRender",
+                            options: {
+                                selectors: {
+                                    root: ".demo-pager-table-data",
+                                    "user-link": ".demo-user-link",
+                                    "user-comment": ".demo-user-comment",
+                                    "user-role": ".demo-user-role",
+                                    "user-email": ".demo-user-email"
+                                },
+                                rendererOptions: {debugMode: false} // Change this to true to diagnose rendering issues
+                            }
+                        }
+                    },
+                    decorators: {
+                        unsortableHeader: [
+                            {
+                                type: "attrs",
+                                attributes: {
+                                    title: null
+                                }
+                            },
+                            {
+                                type: "addClass",
+                                classes: "fl-pager-disabled"
+                            }
+                        ]
+                    }
                 }
-            });
+            }
         }
-
-        fluid.fetchResources(resources, initPager);
-
-    };
+    });
 })(jQuery, fluid);
diff --git a/demos/progress/css/progress.css b/demos/progress/css/progress.css
@@ -69,13 +69,20 @@
     padding:1em;
 }
 
-.demo-progress-status-text, .demo-progress-restart{
+.demo-progress-liveRegion {
     text-align: center;
-    display: block;
+}
+
+.demo-progress-liveRegion > * {
     border:0;
     margin-top:1em;
 }
 
+/* hide on start */
+.demo-progress-restart {
+    display: none;
+}
+
 /* table styles */
 
 .demo-progress-table-container {
@@ -113,14 +120,14 @@
     clear:both;
 }
 
-.progress-demo-submit button.enabled {
+.progress-demo-submit button {
     background-color: #8bc5eb;
     border: 1px solid black;
     padding:3px 15px 3px 15px;
     color: black;
 }
 
-.progress-demo-submit button.disabled {
+.progress-demo-submit button:disabled {
     background-color: #cbe5f6;
     border: 1px solid #cdcccc;
     padding:3px 15px 3px 15px;

diff --git a/demos/progress/index.html b/demos/progress/index.html
@@ -33,22 +33,22 @@
     </head>
     <body>
         <div class="flc-overviewPanel fl-overviewPanel-container"></div>
-        <div class="demo-progress-container fl-centered fl-focus">
+        <div class="demoSelector-shoppingDemo demo-progress-container fl-centered fl-focus">
 
             <h1>Zip Grocery Delivery</h1>
 
             <!-- The area that displays dynamic status messages and the progress bar. -->
             <div id="demo-status-message" class="demo-progress-status-container">
 
-                <div class='demoSelector-liveRegion'>
+                <div class='demoSelector-liveRegion demo-progress-liveRegion'>
                     <!-- status text for progress -->
                     <p class='demoSelector-progress-status-text demo-progress-status-text'></p>
                     <!-- links to the demo page -->
                     <a class='demoSelector-progress-restart demo-progress-restart' href="index.html">Restart the Demo</a>
                 </div>
 
                 <!-- progress simulation -->
-                <div id="demoSelector-progress-theComponent">
+                <div class="demoSelector-progress-theComponent">
                     <div class="flc-progress demo-progress-popUp">
                         <div class="flc-progress-bar demo-progress-theBar">
                             <div class="flc-progress-indicator demo-progress-indicator">
@@ -125,12 +125,12 @@ <h1>Zip Grocery Delivery</h1>
 
         <!-- The Submit button -->
         <div class="progress-demo-submit">
-            <button class="enabled" title="Submit your order">Submit</button>
+            <button title="Submit your order">Submit</button>
         </div>
     </div>
 
     <script type="text/javascript">
-        demo.initShoppingDemo(0,200);
+        demo.shoppingDemo(".demoSelector-shoppingDemo");
     </script>
 
     </body>