-
Notifications
You must be signed in to change notification settings - Fork 0
/
filecabinet.js
89 lines (88 loc) · 3.97 KB
/
filecabinet.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
/* FileCabinet was written by Christian Pelczarski
* and is freely distributable under the terms of an MIT-style license.
* Inspiration and btn-choose-file.png image from http://www.shauninman.com/archive/2007/09/10/styling_file_inputs_with_css_and_the_dom
/*--------------------------------------------------------------------------*/
var FileCabinet = Class.create({
initialize: function(addLink,options){
this.options = Object.extend( {
newElClassName: 'row',
tableWidth: 100,
linkTitle: 'Add an attachment',
linkClassName: 'fileCabinetLinkClass',
linkContent: 'add attachment'
}, options || {} );
this.addLink = $(addLink);
this.addLink.observe( 'click',this.add.bindAsEventListener(this));
this.container = new Element('div',{ 'class': 'fileCabinetContainer' });
this.addLink.insert({ after: this.container });
this.addAnother();
},
moveUnder: function(event,file){
// To debug this section it is best to make the opacity = 20 for file=input
var fileCabinet = this;
var o = fileCabinet.cumulativeOffset();
var pointer = event.pointer();
var x = pointer.x - o.left;
var y = pointer.y - o.top;
var dim = file.getDimensions();
var fdim = fileCabinet.getDimensions();
// Because, the position type is relative we have to do all this magic
var relativeY = y - (dim.height / 2);
var relativeX = x - (dim.width - 30);
// IE likes to roam all over; therefore, only allow the input=file element to move
// within the confines of the fileCabinet
var rt = o.left + fdim.width;
var btm = o.top + fdim.height;
if(pointer.x > o.left && pointer.x < rt && pointer.y > o.top && pointer.y < btm){
file.setStyle( { top: relativeY + 'px', left: relativeX + 'px' });
}
},
add: function(event){
var html = [
'<table width="#{tW}%"><tr><td align="left">',
'<span class="fileCabinet">',
'<input type="file" class="uploadFields" name="userfile[]" />',
'</span>',
'</td><td> No file attached</td>',
'<td><a href="#">remove</a></td>',
'</tr>',
'</table>'
];
var newEl = new Element('div',{ 'class':this.options.newElClassName });
newEl.insert(html.join('').interpolate({ tW: this.options.tableWidth }));
var input = newEl.select('input').first();
var fileCabinet = input.up();
var aLinks = newEl.select('a');
// Add behavior to remove link
aLinks.first().observe('click',this.remove.bindAsEventListener(this,input));
// moveUnder does a lot of the magic
var mu = this.moveUnder.bindAsEventListener(fileCabinet,input);
fileCabinet.observe('mousemove',mu);
// After select a file this will strip out everything but the filename
input.observe('change',this.friendlyFilename);
this.container.insert(newEl);
// See if the add another link needs to be added
this.addAnother();
input.fire('inputField:added');// fire a event in case you want to respond
event.stop();
},
addAnother: function(){
if(!$('addAnotherRow')){
var o = this.options;
var link = '<a href="#" title="#{a}" class="#{b}">#{c}</a>'.interpolate({ a: o.linkTitle, b: o.linkClassName, c: o.linkContent });
var addAnotherRow = new Element('div', { 'id': 'addAnotherRow' }).update(link);
addAnotherRow.down('a').observe('click',this.add.bindAsEventListener(this));
this.container.insert({ after: addAnotherRow });
this.addAnotherRow = addAnotherRow;
}
},
friendlyFilename: function(){
var value = this.value.split(/\\/).last();
this.up('td').next().update(value);
},
remove: function(event,input){
input.fire('inputField:removed');// fire a event in case you want to respond : must be before .remove()
event.element().up('div.' + this.options.newElClassName).remove();
event.stop();
}
});