Skip to content
Browse files

Added listElement option to qq.FileUploader to specify separate file …

…list
  • Loading branch information...
1 parent e3377a6 commit 40a5df342df62a3e2be99f6b446b1f096298d577 @valums valums committed Sep 14, 2010
Showing with 45 additions and 27 deletions.
  1. +21 −27 client/fileuploader.js
  2. +24 −0 tests/separate-file-list.htm
View
48 client/fileuploader.js
@@ -478,7 +478,9 @@ qq.FileUploader = function(o){
// additional options
qq.extend(this._options, {
element: null,
-
+ // if set, will be used instead of qq-upload-list in template
+ listElement: null,
+
template: '<div class="qq-uploader">' +
'<div class="qq-upload-drop-area"><span>Drop files here to upload</span></div>' +
'<div class="qq-upload-button">Upload a file</div>' +
@@ -492,8 +494,8 @@ qq.FileUploader = function(o){
'<span class="qq-upload-size"></span>' +
'<a class="qq-upload-cancel" href="#">Cancel</a>' +
'<span class="qq-upload-failed-text">Failed</span>' +
- '</li>',
-
+ '</li>',
+
classes: {
// used to get elements from templates
button: 'qq-upload-button',
@@ -516,10 +518,12 @@ qq.FileUploader = function(o){
qq.extend(this._options, o);
this._element = this._options.element;
- this._element.innerHTML = this._options.template;
- this._classes = this._options.classes;
+ this._element.innerHTML = this._options.template;
+ this._listElement = this._options._listElement || this._find(this._element, 'list');
- this._button = this._createUploadButton(this._getElement('button'));
+ this._classes = this._options.classes;
+
+ this._button = this._createUploadButton(this._find(this._element, 'button'));
this._bindCancelEvent();
this._setupDragDrop();
@@ -531,19 +535,9 @@ qq.extend(qq.FileUploader.prototype, qq.FileUploaderBasic.prototype);
qq.extend(qq.FileUploader.prototype, {
/**
* Gets one of the elements listed in this._options.classes
- * First optional element is root for search (this._element default)
- * 1. this._getElement('button');
- * 2. this._getElement(item, 'file');
**/
- _getElement: function(parent, type){
- if (typeof parent == 'string'){
- // parent was not passed
- type = parent;
- parent = this._element;
- }
-
- var element = qq.getByClass(parent, this._options.classes[type])[0];
-
+ _find: function(parent, type){
+ var element = qq.getByClass(parent, this._options.classes[type])[0];
if (!element){
throw new Error('element not found ' + type);
}
@@ -552,7 +546,7 @@ qq.extend(qq.FileUploader.prototype, {
},
_setupDragDrop: function(){
var self = this,
- dropArea = this._getElement('drop');
+ dropArea = this._find(this._element, 'drop');
var dz = new qq.UploadDropZone({
element: dropArea,
@@ -598,7 +592,7 @@ qq.extend(qq.FileUploader.prototype, {
qq.FileUploaderBasic.prototype._onProgress.apply(this, arguments);
var item = this._getItemByFileId(id);
- var size = this._getElement(item, 'size');
+ var size = this._find(item, 'size');
size.style.display = 'inline';
var text;
@@ -615,8 +609,8 @@ qq.extend(qq.FileUploader.prototype, {
// mark completed
var item = this._getItemByFileId(id);
- qq.remove(this._getElement(item, 'cancel'));
- qq.remove(this._getElement(item, 'spinner'));
+ qq.remove(this._find(item, 'cancel'));
+ qq.remove(this._find(item, 'spinner'));
if (result.success){
qq.addClass(item, this._classes.success);
@@ -628,14 +622,14 @@ qq.extend(qq.FileUploader.prototype, {
var item = qq.toElement(this._options.fileTemplate);
item.qqFileId = id;
- var fileElement = this._getElement(item, 'file');
+ var fileElement = this._find(item, 'file');
qq.setText(fileElement, this._formatFileName(fileName));
- this._getElement(item, 'size').style.display = 'none';
+ this._find(item, 'size').style.display = 'none';
- this._getElement('list').appendChild(item);
+ this._listElement.appendChild(item);
},
_getItemByFileId: function(id){
- var item = this._getElement('list').firstChild;
+ var item = this._listElement.firstChild;
// there can't be txt nodes in dynamically created list
// and we can use nextSibling
@@ -649,7 +643,7 @@ qq.extend(qq.FileUploader.prototype, {
**/
_bindCancelEvent: function(){
var self = this,
- list = this._getElement('list');
+ list = this._listElement;
qq.attach(list, 'click', function(e){
e = e || window.event;
View
24 tests/separate-file-list.htm
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+ <link href="../client/fileuploader.css" rel="stylesheet" type="text/css">
+</head>
+<body>
+
+ <div id="demo"></div>
+ <ul id="separate-list"></ul>
+
+ <script src="../client/fileuploader.js" type="text/javascript"></script>
+ <script>
+ function createUploader(){
+ var uploader = new qq.FileUploader({
+ element: document.getElementById('demo'),
+ listElement: document.getElementById('separate-list'),
+ action: '../client/do-nothing.htm'
+ });
+ }
+ window.onload = createUploader;
+ </script>
+</body>
+</html>

0 comments on commit 40a5df3

Please sign in to comment.
Something went wrong with that request. Please try again.