FLUID-4059: Updated uploader demo

Componentised all of the demo code.
fluid-project · Sep 1, 2016 · 86da95d · 86da95d
1 parent b2f13da
commit 86da95d
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 15 deletions.
diff --git a/demos/uploader/index.html b/demos/uploader/index.html
@@ -64,7 +64,7 @@
         </div>
 
         <script type="text/javascript">
-            demo.uploader();
+            demo.uploader("#uploader-contents");
         </script>
 
     </body>

diff --git a/demos/uploader/js/uploaderDemo.js b/demos/uploader/js/uploaderDemo.js
@@ -19,21 +19,44 @@ var demo = demo || {};
 (function ($, fluid) {
     "use strict";
 
-    demo.uploader = function () {
-        // Load the Uploader's markup via AJAX and inject it into this page.
-        // Since the template is actually a standalone Web page, we also need to
+    fluid.defaults("demo.uploader", {
+        gradeNames: ["fluid.viewComponent"],
+        events: {
+            onMarkupReady: null
+        },
+        listeners: {
+            // Load the Uploader's markup via AJAX and inject it into the page.
+            "onCreate.loadTemplate": "{that}.loadTemplate"
+        },
+        invokers: {
+            loadTemplate: {
+                funcName: "demo.uploader.loadTemplate",
+                args: ["{that}.container", "{that}.options.templateURL", "{that}.options.fragmentSelector", "{that}.events.onMarkupReady.fire"]
+            }
+        },
+        // Path to the Uploader's markup
+        templateURL: "../../src/components/uploader/html/Uploader.html",
+        // Because the template is an actual standalone Web page, we also need to
         // specify a selector that points to the part of the page we're interested in.
-
-        var templateURL = "../../src/components/uploader/html/Uploader.html";
-        var fragmentSelector = ".fl-uploader";
-
-        $("#uploader-contents").load(templateURL + " " + fragmentSelector, function () {
-
-            // Once the template has been loaded into the page, instantiate the Uploader.
-            fluid.uploader(".flc-uploader", {
-                demo: true
-            });
-        });
+        fragmentSelector: ".flc-uploader",
+        components: {
+            // Configuration for the actual Uploader component
+            uploader: {
+                type: "fluid.uploader",
+                container: "{that}.options.fragmentSelector",
+                // Once the template has been loaded into the page, instantiate the Uploader.
+                createOnEvent: "onMarkupReady",
+                options: {
+                    // the demo flag causes the Uploader to simulate the uploading of files.
+                    demo: true
+                }
+            }
+        }
+    });
+
+    demo.uploader.loadTemplate = function (element, templateURL, fragmentSelector, callback) {
+        templateURL = fragmentSelector ? templateURL + " " + fragmentSelector : templateURL;
+        $(element).load(templateURL, callback);
     };
 
 })(jQuery, fluid);