Author: konstantin.mishin
Date: 2010-11-17 21:05:03 -0500 (Wed, 17 Nov 2010)
New Revision: 20081
Added:
sandbox/trunk/ui/fileupload/ui/src/main/resources/META-INF/resources/org.richfaces/fu-upl.gif
Removed:
sandbox/trunk/ui/fileupload/ui/src/main/resources/META-INF/resources/org.richfaces/fu-uld.gif
Modified:
sandbox/trunk/ui/fileupload/ui/src/main/resources/META-INF/resources/org.richfaces/fileupload.ecss
sandbox/trunk/ui/fileupload/ui/src/main/resources/META-INF/resources/org.richfaces/fileupload.js
sandbox/trunk/ui/fileupload/ui/src/main/templates/fileupload.template.xml
Log:
RF-9496
Modified:
sandbox/trunk/ui/fileupload/ui/src/main/resources/META-INF/resources/org.richfaces/fileupload.ecss
===================================================================
---
sandbox/trunk/ui/fileupload/ui/src/main/resources/META-INF/resources/org.richfaces/fileupload.ecss 2010-11-17
16:58:18 UTC (rev 20080)
+++
sandbox/trunk/ui/fileupload/ui/src/main/resources/META-INF/resources/org.richfaces/fileupload.ecss 2010-11-18
02:05:03 UTC (rev 20081)
@@ -37,7 +37,7 @@
width: 34%;
}
-.rf-fu-btn {
+.rf-fu-btn-add, .rf-fu-btn-upl, .rf-fu-btn-clr {
background-color: '#{richSkin.trimColor}';
background-image:
url("#{resource['org.richfaces.images:fuBtnGrad.png']}");
background-position:left top;
@@ -51,36 +51,38 @@
vertical-align: top;
}
-/*TODO Add disabled state for buttons*/
+.rf-fu-btn-upl, .rf-fu-btn-clr {
+ display: none;
+}
-.rf-fu-btn-add, .rf-fu-btn-uld, .rf-fu-btn-clr, .rf-fu-itm-lbl, .rf-fu-itm-lnk {
+.rf-fu-btn-cnt-add, .rf-fu-btn-cnt-upl, .rf-fu-btn-cnt-clr, .rf-fu-itm-lbl,
.rf-fu-itm-lnk {
font-family: '#{richSkin.generalFamilyFont}';
font-size: '#{richSkin.generalSizeFont}';
}
-.rf-fu-btn-add, .rf-fu-btn-uld, .rf-fu-btn-clr, .rf-fu-itm-lbl {
+.rf-fu-btn-cnt-add, .rf-fu-btn-cnt-upl, .rf-fu-btn-cnt-clr, .rf-fu-itm-lbl {
color: '#{richSkin.generalTextColor}';
}
-.rf-fu-btn-add, .rf-fu-btn-uld, .rf-fu-btn-clr {
+.rf-fu-btn-cnt-add, .rf-fu-btn-cnt-upl, .rf-fu-btn-cnt-clr {
background-position: 2px 2px;
background-repeat: no-repeat;
display: inline-block;
padding: 3px 5px 3px 21px;
}
-.rf-fu-btn-add {
+.rf-fu-btn-cnt-add {
background-image: url("#{resource['org.richfaces:fu-add.gif']}");
overflow: hidden;
position: relative;
}
-.rf-fu-btn-uld {
- background-image: url("#{resource['org.richfaces:fu-uld.gif']}");
+.rf-fu-btn-cnt-upl {
+ background-image: url("#{resource['org.richfaces:fu-upl.gif']}");
font-weight: bold;
}
-.rf-fu-btn-clr {
+.rf-fu-btn-cnt-clr {
background-image: url("#{resource['org.richfaces:fu-clr.gif']}");
}
Modified:
sandbox/trunk/ui/fileupload/ui/src/main/resources/META-INF/resources/org.richfaces/fileupload.js
===================================================================
---
sandbox/trunk/ui/fileupload/ui/src/main/resources/META-INF/resources/org.richfaces/fileupload.js 2010-11-17
16:58:18 UTC (rev 20080)
+++
sandbox/trunk/ui/fileupload/ui/src/main/resources/META-INF/resources/org.richfaces/fileupload.js 2010-11-18
02:05:03 UTC (rev 20081)
@@ -20,54 +20,116 @@
* 02110-1301 USA, or see the FSF site:
http://www.fsf.org.
*/
(function(richfaces, jQuery) {
+ var ITEM_STATE = {
+ NEW: {},
+ IN_PROGRESS: {},
+ DONE: {}
+ };
+
+ var ITEM_HTML = '<div class="rf-fu-itm"><span
class="rf-fu-itm-lft"><span
class="rf-fu-itm-lbl"/></span>'
+ + '<span class="rf-fu-itm-rgh"><a
href="javascript:void(0)"
class="rf-fu-itm-lnk"/></span></div>';
+
richfaces.ui = richfaces.ui || {};
richfaces.ui.FileUpload = richfaces.BaseComponent.extendClass({
name: "FileUpload",
- init: function (id) {
+ items: [],
+
+ init: function(id) {
this.id = id;
this.element = jQuery(this.attachToDom());
var header = this.element.children(".rf-fu-hdr:first");
- var buttons =
header.children(".rf-fu-btns-lft:first").children(".rf-fu-btn");
- this.addButton = buttons.first();
-// this.uploadButton = buttons.last();
-// this.clearButton =
header.children(".rf-fu-btns-rgh:first").children(".rf-fu-btn:first");
+ var leftButtons = header.children(".rf-fu-btns-lft:first");
+ this.addButton = leftButtons.children(".rf-fu-btn-add:first");
+ this.uploadButton = leftButtons.children(".rf-fu-btn-upl:first");
+ this.clearButton =
header.children(".rf-fu-btns-rgh:first").children(".rf-fu-btn-clr:first");
this.inputContainer = this.addButton.find(".rf-fu-inp-cntr:first");
this.input = this.inputContainer.children("input");
this.list = this.element.children(".rf-fu-lst:first");
this.cleanInput = this.input.clone();
- this.addProxy = jQuery.proxy(this.__add, this)
+ this.addProxy = jQuery.proxy(this.__addItem, this);
this.input.change(this.addProxy);
+ this.clearButton.click(jQuery.proxy(this.__removeAllItems, this));
},
- __add: function () {
+ __addItem: function() {
this.input.hide();
this.input.unbind("change", this.addProxy);
- var item = new Item(this.input);
+ var item = new Item(this);
this.list.append(item.getJQuery());
+ this.items.push(item);
this.input = this.cleanInput.clone();
this.inputContainer.append(this.input);
this.input.change(this.addProxy);
+ this.__updateButtons();
+ },
+
+ __removeItem: function(item) {
+ item.input.remove();
+ item.element.remove();
+ this.items.splice(this.items.indexOf(item), 1);
+ this.__updateButtons();
+ },
+
+ __removeAllItems: function(item) {
+ this.inputContainer.children(":not(:visible)").remove();
+ this.list.empty();
+ this.items.splice(0);
+ this.__updateButtons();
+ },
+
+ __updateButtons: function() {
+ if (this.items.length) {
+ var hide = true;
+ for ( var i = 0; i < this.items.length && hide; i++) {
+ if (this.items[i].state == ITEM_STATE.NEW) {
+ this.uploadButton.css("display", "inline-block");
+ hide = false;
+ }
+ }
+ if (hide) {
+ this.uploadButton.hide();
+ }
+ this.clearButton.css("display", "inline-block");
+ } else {
+ this.uploadButton.hide();
+ this.clearButton.hide();
+ }
+ },
+
+ __getLinkText: function(state) {
+ var text = "";
+ if (state == ITEM_STATE.NEW) {
+ text = "Delete";
+ } else if (state == ITEM_STATE.DONE) {
+ text = "Clear";
+ }
+ return text;
}
});
- var ITEM_HTML = '<div class="rf-fu-itm"><span
class="rf-fu-itm-lft"><span
class="rf-fu-itm-lbl"/></span>'
- + '<span class="rf-fu-itm-rgh"><a
href="javascript:void(0)"
class="rf-fu-itm-lnk"/></span></div>';
-
- var Item = function(input) {
- this.input = input;
+ var Item = function(fileUpload) {
+ this.fileUpload = fileUpload;
};
jQuery.extend(Item.prototype, {
getJQuery: function() {
+ this.state = ITEM_STATE.NEW;
+ this.input = this.fileUpload.input;
this.element = jQuery(ITEM_HTML);
this.label =
this.element.children(".rf-fu-itm-lft:first").children(".rf-fu-itm-lbl:first");
this.link =
this.element.children(".rf-fu-itm-rgh:first").children("a");
- this.label.append(this.input.val());
- this.link.append("Delete");
+ this.label.html(this.input.val());
+ this.link.html(this.fileUpload.__getLinkText(this.state));
+
+ this.link.click(jQuery.proxy(this.remove, this));
return this.element;
- }
+ },
+
+ remove: function() {
+ this.fileUpload.__removeItem(this);
+ }
});
}(window.RichFaces, jQuery));
Deleted:
sandbox/trunk/ui/fileupload/ui/src/main/resources/META-INF/resources/org.richfaces/fu-uld.gif
===================================================================
(Binary files differ)
Copied:
sandbox/trunk/ui/fileupload/ui/src/main/resources/META-INF/resources/org.richfaces/fu-upl.gif
(from rev 20072,
sandbox/trunk/ui/fileupload/ui/src/main/resources/META-INF/resources/org.richfaces/fu-uld.gif)
===================================================================
(Binary files differ)
Modified: sandbox/trunk/ui/fileupload/ui/src/main/templates/fileupload.template.xml
===================================================================
--- sandbox/trunk/ui/fileupload/ui/src/main/templates/fileupload.template.xml 2010-11-17
16:58:18 UTC (rev 20080)
+++ sandbox/trunk/ui/fileupload/ui/src/main/templates/fileupload.template.xml 2010-11-18
02:05:03 UTC (rev 20081)
@@ -39,21 +39,21 @@
<div id="#{clientId}" class="rf-fu">
<div class="rf-fu-hdr">
<span class="rf-fu-btns-lft">
- <span class="rf-fu-btn">
- <span class="rf-fu-btn-add">
+ <span class="rf-fu-btn-add">
+ <span class="rf-fu-btn-cnt-add">
<span class="rf-fu-inp-cntr"> <!-- This span is needed for IE7
only. -->
<input type="file" class="rf-fu-inp" />
</span>
Add...
</span>
</span>
- <span class="rf-fu-btn">
- <span class="rf-fu-btn-uld">Upload</span>
+ <span class="rf-fu-btn-upl">
+ <span class="rf-fu-btn-cnt-upl">Upload</span>
</span>
</span>
<span class="rf-fu-btns-rgh">
- <span class="rf-fu-btn">
- <span class="rf-fu-btn-clr">Clear All</span>
+ <span class="rf-fu-btn-clr">
+ <span class="rf-fu-btn-cnt-clr">Clear All</span>
</span>
</span>
</div>