diff --git a/thirdparty/multifile/example.html b/thirdparty/multifile/example.html new file mode 100755 index 00000000..b1111702 --- /dev/null +++ b/thirdparty/multifile/example.html @@ -0,0 +1,26 @@ + + + + + + + + + + +
+ + + +
+Files: + +
+ + + \ No newline at end of file diff --git a/thirdparty/multifile/multifile.css b/thirdparty/multifile/multifile.css new file mode 100755 index 00000000..03536d07 --- /dev/null +++ b/thirdparty/multifile/multifile.css @@ -0,0 +1,82 @@ +#Form_UploadForm { + padding: 5px; + line-height: 1.4em; +} + +#Form_UploadForm a { + font-weight: bold; +} + +#Form_UploadForm ol li { + list-style: decimal outside; +} + +#Form_UploadForm ul li { + list-style-type: square; +} + +#Form_UploadForm form { + text-align: left; +} + +#Form_UploadForm label { + font-size: 1.2em; +} + +#Form_UploadForm input.delete { + margin: 2px auto; + padding: 0px; + background-color: #FFFFFF; + border:1px solid #D6D3CE; +} + +#Form_UploadForm input[value="Submit"] { + cursor: pointer; +} + +#Form_UploadForm input[value="Submit"]:hover{ + background-color: #F6F6E8; +} + +#Form_UploadForm #Form_UploadForm_FilesList div { + font-size: 1.2em; + vertical-align: middle; +} + +#Form_UploadForm #Form_UploadForm_FilesList input { + margin-left: 10px; +} + +#Form_UploadForm #Form_UploadForm_FilesList .clear { + height: 0; + line-height: 0; +} + +#Form_UploadForm div.file { + display: inline; +} + +#Form_UploadForm #Form_UploadForm_action_upload { + display: inline; + margin: 5px 0; +} + +#Form_UploadForm p { + margin-top: 5px; +} + +#Form_UploadForm_FilesList { + margin-top: 5px; +} + +#Form_UploadForm_FilesList div { + width: auto; + border: 1px solid #F1EFE2; + padding: 5px; + margin-bottom: 5px; +} + +#Form_UploadForm_FilesList div .delete:hover { + background: red; + font-weight: bold; +} diff --git a/thirdparty/multifile/multifile.js b/thirdparty/multifile/multifile.js new file mode 100755 index 00000000..99a68a81 --- /dev/null +++ b/thirdparty/multifile/multifile.js @@ -0,0 +1,189 @@ +/** + * Convert a single file-input element into a 'multiple' input list + * + * Modified 2006-11-06 by Silverstripe Ltd. + * + * Usage: + * + * 1. Create a file input element (no name) + * eg. + * + * 2. Create a DIV for the output to be written to + * eg.
+ * + * 3. Instantiate a MultiSelector object, passing in the DIV and an (optional) maximum number of files + * eg. var multi_selector = new MultiSelector( document.getElementById( 'files_list' ), 3 ); + * + * 4. Add the first element + * eg. multi_selector.addElement( document.getElementById( 'first_file_element' ) ); + * + * 5. That's it. + * + * You might (will) want to play around with the addListRow() method to make the output prettier. + * + * You might also want to change the line + * element.name = 'file_' + this.count; + * ...to a naming convention that makes more sense to you. + * + * Licence: + * Use this however/wherever you like, just don't blame me if it breaks anything. + * + * Credit: + * If you're nice, you'll leave this bit: + * + * Class by Stickman -- http://www.the-stickman.com + * with thanks to: + * [for Safari fixes] + * Luis Torrefranca -- http://www.law.pitt.edu + * and + * Shawn Parker & John Pennypacker -- http://www.fuzzycoconut.com + * [for duplicate name bug] + * 'neal' + */ + +// Modified by: Silverstripe Ltd. (changed naming of file-input-elements) + +function MultiSelector( list_target, max, upload_button ){ + + this.upload_button = upload_button; + this.upload_button.setAttribute("disabled", "disabled"); + + // Where to write the list + this.list_target = list_target; + // How many elements? + this.count = -1; + // How many elements? + this.id = 0; + // Is there a maximum? + if( max ){ + this.max = max; + } else { + this.max = -1; + }; + + /** + * Add a new file input element + */ + this.addElement = function( element ){ + + // Make sure it's a file input element + if( element.tagName == 'INPUT' && element.type == 'file' ){ + + // Element name -- what number am I? + // Modified by: Silverstripe Ltd. (changed naming of file-input-elements) + element.name = 'Files[' + this.id++ + ']' + + // If we've reached maximum number, disable input element + if( this.max != -1 && this.count >= this.max ){ + element.disabled = true; + }; + + // File element counter + this.count++; + + // Add reference to this object + element.__scope = this; + element.multi_selector = this; + + // What to do when a file is selected + element.onchange = function(){ + + // New file input + var new_element = document.createElement( 'input' ); + new_element.type = 'file'; + + // Add new element + this.parentNode.insertBefore( new_element, this ); + + // Apply 'update' to element + this.multi_selector.addElement( new_element ); + + // Update list + this.multi_selector.addListRow( this ); + + // Hide this: we can't use display:none because Safari doesn't like it + this.style.position = 'absolute'; + this.style.left = '-1000px'; + + element.__scope.toggleUploadButton(); + }; + + // Most recent element + this.current_element = element; + + } else { + // This can only be applied to file input elements! + alert( 'Error: not a file input element' ); + }; + + }; + + this.toggleUploadButton = function() { + if(this.count > 0) { + this.upload_button.removeAttribute("disabled"); + } else { + this.upload_button.setAttribute("disabled", "disabled"); + } + } + + /** + * Add a new row to the list of files + */ + this.addListRow = function( element ){ + + // Modified 2006-11-06 by Silverstripe Ltd. + var filenameMatches = element.value.match(/([^\/\\]+)$/); + var filename = filenameMatches[1]; + + // Row div + var new_row = document.createElement('div'); + + // Delete button + var new_row_button = document.createElement('input'); + new_row_button.type = 'button'; + new_row_button.value = 'Delete'; + new_row_button.setAttribute('class', 'delete'); + + // References + new_row.element = element; + element.__scope = this, + + // Delete function + new_row_button.onclick= function(){ + + // Remove element from form + this.parentNode.element.parentNode.removeChild( this.parentNode.element ); + + // Remove this row from the list + this.parentNode.parentNode.removeChild( this.parentNode ); + + // Decrement counter + this.parentNode.element.multi_selector.count--; + + // Re-enable input element (if it's disabled) + this.parentNode.element.multi_selector.current_element.disabled = false; + + element.__scope.toggleUploadButton(); + + // Appease Safari + // without it Safari wants to reload the browser window + // which nixes your already queued uploads + return false; + }; + + // Set row value + // Modified 2006-11-06 by Silverstripe Ltd. + new_row.innerHTML = filename; + + // Add button + new_row.appendChild( new_row_button ); + + // Add it to the list + this.list_target.appendChild( new_row ); + + // Modified 2006-11-06 by Silverstripe Ltd. + window.ontabschanged(); + + }; + +}; \ No newline at end of file