Permalink
Browse files

FLUID-4238: Refactored Image Gallery server demo, binding the setting…

…s component's model directly to Uploader's own options.
  • Loading branch information...
1 parent 55e881f commit 0b4138369b78bda2f160d817194e9b8a17c32d6a @colinbdclark colinbdclark committed May 17, 2011
Showing with 46 additions and 44 deletions.
  1. +32 −36 js/uploader.js
  2. +14 −8 uploader.html
View
68 js/uploader.js
@@ -57,7 +57,7 @@ var demo = demo || {};
},
// Boil Uploader's onFileSuccess and onFileError to match our component's semantics.
events: {
- onImageSuccess: {
+ onSuccess: {
event: "onFileSuccess",
args: [
{
@@ -77,7 +77,7 @@ var demo = demo || {};
}
},
listeners: {
- onImageSuccess: "{imagesView}.render",
+ onSuccess: "{imagesView}.render",
onError: "{errorsView}.render"
}
}
@@ -101,7 +101,13 @@ var demo = demo || {};
settings: {
type: "demo.imageGallery.settings",
- createOnEvent: "onReady"
+ createOnEvent: "onReady",
+ options: {
+ model: "{imageGallery}.options.components.uploader.options.queueSettings",
+ listeners: {
+ modelChanged: "{imageGallery}.resetUploader"
+ }
+ }
}
},
@@ -138,12 +144,6 @@ var demo = demo || {};
};
that.resetUploader = function (options) {
- // TODO: use {imageGallery}.options.component.uploader.options.queueSetting as
- // the model for the Settings component.
- var queueSettings = that.options.components.uploader.options.queueSettings;
- fluid.each(options, function (value, key) {
- queueSettings[key] = value;
- });
that.destroyUploader();
that.loadUploaderTemplate();
};
@@ -173,43 +173,39 @@ var demo = demo || {};
* Settings controls the form that allow a user to customize the Uploader's options.
*/
fluid.defaults("demo.imageGallery.settings", {
- gradeNames: ["fluid.viewComponent", "autoInit"],
+ gradeNames: ["fluid.rendererComponent", "autoInit"],
finalInitFunction: "demo.imageGallery.settings.init",
selectors: {
- fileTypes: "#allowed-file-type",
- fileSizeLimit: "#file-size-limit",
- fileUploadLimit: "#file-queue-limit",
- inputs: "input"
+ fileSizeLimit: "#fileSizeLimit",
+ fileUploadLimit: "#fileUploadLimit",
+ fileTypes: "#fileTypes"
},
- events: {
- onOptionChanged: null
+ protoTree: {
+ fileSizeLimit: "${fileSizeLimit}",
+ fileUploadLimit: "${fileUploadLimit}",
+ fileTypes: "${fileTypes}"
},
- listeners: {
- onOptionChanged: "{imageGallery}.resetUploader"
+ events: {
+ modelChanged: null
}
});
demo.imageGallery.settings.init = function (that) {
- that.container.removeClass("hide-me");
+ // TODO: Replace these with model transformation.
+ that.events.prepareModelForRender.addListener(function (model) {
+ model.fileTypes = model.fileTypes ? model.fileTypes.join(",") : undefined;
+ });
+ that.applier.modelChanged.addListener("fileTypes", function (model) {
+ model.fileTypes = model.fileTypes ? model.fileTypes.split(",") : undefined;
+ });
- // TODO: Use the renderer and data binding for this.
- that.locate("inputs").change(function () {
- // Trim and parse input from the form fields.
- var options = {
- fileTypes: $.trim(that.locate("fileTypes").val()),
- fileSizeLimit: parseInt($.trim(that.locate("fileSizeLimit").val()), 10),
- fileUploadLimit: parseInt($.trim(that.locate("fileUploadLimit").val()), 10)
- };
-
- // Delete any empty options so we don't override the default.
- fluid.each(options, function (value, key) {
- if (!value) {
- delete options[key];
- }
- });
-
- that.events.onOptionChanged.fire(options);
+ // TODO: Replace this with a declarative listener when the framework supports it.
+ that.applier.modelChanged.addListener("*", function (model) {
+ that.events.modelChanged.fire(model);
});
+
+ that.refreshView();
+ that.container.removeClass("fl-hidden");
};
fluid.demands("demo.imageGallery.settings", ["demo.imageGallery", "fluid.uploader.multiFileUploader"], {
View
22 uploader.html
@@ -23,6 +23,12 @@
<script type="text/javascript" src="../infusion/src/webapp/framework/core/js/FluidIoC.js"></script>
<script type="text/javascript" src="../infusion/src/webapp/framework/core/js/FluidDocument.js"></script>
<script type="text/javascript" src="../infusion/src/webapp/framework/core/js/FluidView.js"></script>
+ <script type="text/javascript" src="../infusion/src/webapp/framework/core/js/FluidRequests.js"></script>
+ <script type="text/javascript" src="../infusion/src/webapp/framework/core/js/FluidDOMUtilities.js"></script>
+ <script type="text/javascript" src="../infusion/src/webapp/lib/fastXmlPull/js/fastXmlPull.js"></script>
+ <script type="text/javascript" src="../infusion/src/webapp/framework/renderer/js/fluidRenderer.js"></script>
+ <script type="text/javascript" src="../infusion/src/webapp/framework/renderer/js/fluidParser.js"></script>
+ <script type="text/javascript" src="../infusion/src/webapp/framework/renderer/js/RendererUtilities.js"></script>
<script type="text/javascript" src="../infusion/src/webapp/framework/enhancement/js/ProgressiveEnhancement.js"></script>
<!-- Uploader dependencies -->
@@ -68,22 +74,22 @@
<div id="demo-notes">
Your session will stay active for an hour. After one hour, all the uploaded images will be erased from the server.<br />
</div>
-
- <div id="multi-file-uploader-settings" class="hide-me">
+
+ <div id="multi-file-uploader-settings" class="fl-hidden">
<fieldset>
<legend>Uploader Settings</legend>
<table class="settings-table no-border">
<tr>
- <td class="no-border"><label for="file-size-limit">File Size Limit:</label></td>
- <td class="no-border"><input id="file-size-limit" type="text" /> in KB</td>
+ <td class="no-border"><label for="fileSizeLimit">File Size Limit:</label></td>
+ <td class="no-border"><input id="fileSizeLimit" type="text" /> in KB</td>
</tr>
<tr>
- <td class="no-border"><label for="file-queue-limit">File Queue Limit:</label></td>
- <td class="no-border"><input id="file-queue-limit" type="text" /></td>
+ <td class="no-border"><label for="fileUploadLimit">File Queue Limit:</label></td>
+ <td class="no-border"><input id="fileUploadLimit" type="text" /></td>
</tr>
<tr>
- <td class="no-border"><label for="allowed-file-type">Allowed File MIME Types:</label></td>
- <td class="no-border"><input id="allowed-file-type" name="allowed-file-type" type="text" /></td>
+ <td class="no-border"><label for="fileTypes">Allowed File MIME Types:</label></td>
+ <td class="no-border"><input id="fileTypes" name="allowedFileType" type="text" /></td>
</tr>
</table>
</fieldset>

0 comments on commit 0b41383

Please sign in to comment.