Browse files

FLUID-4238: Minor refactoring of Image Gallery based on Cindy's test …

…results and Antranig's code review.
  • Loading branch information...
1 parent eb0469a commit bc247f02a9783713c280ec7bca40a48d4f624c6e @colinbdclark colinbdclark committed May 26, 2011
Showing with 69 additions and 68 deletions.
  1. +7 −12 css/styles.css
  2. +16 −11 js/uploader.js
  3. +46 −45 uploader.html
View
19 css/styles.css
@@ -1,13 +1,12 @@
-/*#uploader-contents, #single-file-uploader {*/
-#uploader {
+.ig-uploaders {
margin-left: 2em;
margin-top: 5em;
margin-bottom: 5em;
width: 40%;
float: left;
}
-#image-viewer {
+.ig-imageViewer {
margin-right: 2em;
margin-top: 2em;
width: 50%;
@@ -17,14 +16,14 @@
min-height: 55em;
}
-#demo-notes {
+.ig-notes {
margin-left: 1em;
clear: left;
width: 40%;
font-size: medium;
}
-#server-error {
+.ig-serverErrors {
margin-left: 1em;
margin-bottom: 1em;
clear: left;
@@ -34,24 +33,20 @@
color: #FF0000;
}
-.image-frame {
+.ig-imageFrame {
float: left;
margin: 0.5em;
height: 150px;
}
-.settings-table {
+.settingsTable {
border-spacing: 1px
}
-.no-border {
+.noBorder {
border:0 none;
}
-.hide-me {
- visibility: hidden;
-}
-
fieldset {
border: 1px solid #000000;
}
View
27 js/uploader.js
@@ -87,7 +87,7 @@ var demo = demo || {};
type: "demo.imageGallery.simpleRenderer",
container: "{imageGallery}.dom.images",
options: {
- template: "<img src='%srcURL' alt='%fileName' class='image-frame' />"
+ template: "<img src='%srcURL' alt='%fileName' class='ig-imageFrame' />"
}
},
@@ -112,10 +112,10 @@ var demo = demo || {};
},
selectors: {
- uploader: "#multi-file-uploader",
- settings: "#multi-file-uploader-settings",
- images: "#image-space",
- errors: "#server-error"
+ uploader: ".ig-multiFileUploader",
+ settings: ".ig-settings",
+ images: ".ig-imageViewer-images",
+ errors: ".ig-serverErrors"
},
events: {
@@ -143,10 +143,11 @@ var demo = demo || {};
};
that.destroyUploader = function () {
- if (!fluid.get(that, "uploader.strategy.engine")) {
- that.uploader.strategy.engine.swfUpload.destroy();
- }
that.locate("uploader").empty();
+ if (fluid.get(that, "uploader.strategy.engine")) {
+ var su = that.uploader.strategy.engine.swfUpload;
+ su.destroy();
+ }
};
that.resetUploader = function (options) {
@@ -193,15 +194,19 @@ var demo = demo || {};
},
events: {
modelChanged: null
+ },
+ styles: {
+ hidden: "fl-hidden"
}
});
demo.imageGallery.settings.init = function (that) {
// TODO: Replace these with model transformation.
that.events.prepareModelForRender.addListener(function (model) {
- model.fileTypes = model.fileTypes ? model.fileTypes.join(",") : undefined;
+ model.fileTypes = fluid.isArrayable(model.fileTypes) ?
+ model.fileTypes.join(",") : model.fileTypes;
});
- that.applier.modelChanged.addListener("fileTypes", function (model) {
+ that.applier.modelChanged.addListener("*", function (model) {
model.fileTypes = model.fileTypes ? model.fileTypes.split(",") : undefined;
});
@@ -211,7 +216,7 @@ var demo = demo || {};
});
that.refreshView();
- that.container.removeClass("fl-hidden");
+ that.container.removeClass(that.options.styles.hidden);
};
fluid.demands("demo.imageGallery.settings", ["demo.imageGallery", "fluid.uploader.multiFileUploader"], {
View
91 uploader.html
@@ -46,59 +46,60 @@
<script type="text/javascript" src="js/uploader.js"></script>
</head>
<body>
-
- <!-- Basic upload controls, used when JavaScript is unavailable -->
- <div id="uploader">
- <form action="uploader.php" method="post" enctype="multipart/form-data" class="fl-progEnhance-basic">
- <input type="hidden" name="isSingleUploader" value="1">
-
- <p>Use the Browse button to add a file, and the Save button to upload it.</p>
- <input name="fileData" type="file" />
- <input class="fl-uploader-basic-save" type="submit" value="Save"/>
- </form>
+ <div class="ig-imageGallery">
+ <!-- Basic upload controls, used when JavaScript is unavailable -->
+ <div class="ig-uploaders">
+ <form action="uploader.php" method="post" enctype="multipart/form-data" class="fl-progEnhance-basic">
+ <div>
+ <input type="hidden" name="isSingleUploader" value="1" />
+ <p>Use the Browse button to add a file, and the Save button to upload it.</p>
+ <input name="fileData" type="file" />
+ <input class="fl-uploader-basic-save" type="submit" value="Save"/>
+ </div>
+ </form>
- <div id="multi-file-uploader">
- <!-- The Uploader's template will be injected via AJAX into this container. -->
+ <div class="ig-multiFileUploader">
+ <!-- The Uploader's template will be injected via AJAX into this container. -->
+ </div>
</div>
- </div>
- <div id="image-viewer">
- <!-- The container to display all the uploaded images. -->
- <h2>Uploaded images:</h2>
- <div id="image-space"></div>
- </div>
+ <div class="ig-imageViewer">
+ <!-- The container to display all the uploaded images. -->
+ <h2>Uploaded images:</h2>
+ <div class="ig-imageViewer-images"></div>
+ </div>
- <div id="server-error">
- <!-- The returned server error message will be displayed in this container. -->
- </div>
+ <div class="ig-serverErrors">
+ <!-- The returned server error message will be displayed in this container. -->
+ </div>
- <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 class="ig-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="fl-hidden">
- <fieldset>
- <legend>Uploader Settings</legend>
- <table class="settings-table no-border">
- <tr>
- <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="fileUploadLimit">File Queue Limit:</label></td>
- <td class="no-border"><input id="fileUploadLimit" type="text" /></td>
- </tr>
- <tr>
- <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>
+ <div class="ig-settings fl-hidden">
+ <fieldset>
+ <legend>Uploader Settings</legend>
+ <table class="settingsTable noBorder">
+ <tr>
+ <td class="noBorder"><label for="fileSizeLimit">File Size Limit:</label></td>
+ <td class="noBorder"><input id="fileSizeLimit" type="text" /> in KB</td>
+ </tr>
+ <tr>
+ <td class="noBorder"><label for="fileUploadLimit">File Queue Limit:</label></td>
+ <td class="noBorder"><input id="fileUploadLimit" type="text" /></td>
+ </tr>
+ <tr>
+ <td class="noBorder"><label for="fileTypes">Allowed File MIME Types:</label></td>
+ <td class="noBorder"><input id="fileTypes" name="allowedFileType" type="text" /></td>
+ </tr>
+ </table>
+ </fieldset>
+ </div>
</div>
-
+
<script type="text/javascript">
- demo.imageGallery("body");
+ demo.imageGallery(".ig-imageGallery");
</script>
-
</body>
</html>

0 comments on commit bc247f0

Please sign in to comment.