00bdeb933f009dc72796cacb022e1f013be756a4
[Plinn.git] / skins / ajax_scripts / folder_contents_script.js
1 // (c) BenoƮt PIN 2006-2007
2 // http://plinn.org
3 // Licence GPL
4 //
5 //
6
7 var FolderDDropControler;
8 var DropTarget;
9 var loadListing;
10 var DDFolderUploader;
11
12 (function(){
13
14 function getTargetRow(evt){
15 var target = getTargetedObject(evt);
16 while (target.nodeName != "TR")
17 target = target.parentNode;
18 return target;
19 }
20
21 FolderDDropControler = function(listing) {
22 this.folderUrl = document.getElementById("FolderUrl").innerHTML;
23 this.targetRow = null;
24 this.lastOverPosition = null;
25 this.prevDirUp = null;
26 this.noOver = true;
27 this.listing = listing;
28 var thisControler = this;
29 this.listing.onmousedown = function(evt) {thisControler.drag(evt);};
30 this.listing.onmouseover = function(evt) {thisControler.moveRow(evt);};
31 this.listing.onmouseup = function(evt) {thisControler.drop(evt);};
32 addListener(this.listing, 'click', function(evt) {thisControler.disableClickAfterDrop(evt);});
33 addListener(this.listing, 'click', function(evt) {thisControler.selectCBRange(evt);});
34
35 if (browser.isIE) {
36 this.listing.ondragstart = function() { window.event.returnValue = false;};
37 }
38 }
39
40 FolderDDropControler.prototype.drag = function(evt){
41 var target = getTargetedObject(evt);
42 if (target.nodeName == "INPUT") return true;
43 disableDefault(evt);
44 var targetRow = getTargetRow(evt);
45 targetRow.style.backgroundColor = base_properties["highLightColor"];
46 this.listing.style.cursor = "move";
47 this.targetRow = targetRow;
48 this.lastOverPosition = targetRow.pos;
49 };
50
51 FolderDDropControler.prototype.moveRow = function(evt){
52 var targetRow = this.targetRow;
53 if (targetRow != null) {
54 this.noOver = false;
55 if (browser.isIE) document.selection.clear();
56 var overRow = getTargetRow(evt);
57
58 if (overRow.pos == targetRow.pos) return;
59
60 if (this.lastOverPosition < overRow.pos) { // move up
61 this.listing.insertBefore(targetRow, overRow.nextSibling);
62 this.prevDirUp = true;
63 this.lastOverPosition = overRow.pos;
64 }
65 else if (this.lastOverPosition > overRow.pos) { // move down
66 this.listing.insertBefore(targetRow, overRow);
67 this.prevDirUp = false;
68 this.lastOverPosition = overRow.pos;
69 }
70 else {
71 if (this.prevDirUp) {
72 this.prevDirUp = false;
73 this.listing.insertBefore(targetRow, overRow);
74 }
75 else {
76 this.prevDirUp = true;
77 this.listing.insertBefore(targetRow, overRow.nextSibling);
78 }
79 }
80 }
81 };
82
83 FolderDDropControler.prototype.drop = function(evt){
84 var targetRow = this.targetRow;
85 if (targetRow != null) {
86 targetRow.style.backgroundColor="";
87 this.listing.style.cursor = "";
88 if (this.noOver) {
89 var thisControler = this;
90 setTimeout(function(){thisControler.reset();}, 50);
91 return;
92 }
93 if (this.lastOverPosition != null) {
94 // get new object position.
95 var trim = 0;
96 if (targetRow.pos < this.lastOverPosition && !this.prevDirUp)
97 trim = -1;
98 else if (targetRow.pos > this.lastOverPosition && this.prevDirUp)
99 trim = 1;
100
101 // construct url
102 var object_id = targetRow.getElementsByTagName("INPUT")[0].getAttribute("value");
103 var url = this.folderUrl + "/moveObjectIdToPosition";
104 var form ="object_id=" + object_id + "&position:int=" +
105 String(this.lastOverPosition - 1 + trim);
106
107 // reinitialize positions
108 var rows = this.listing.getElementsByTagName("TR"), row;
109 for (var i = 0 ; i < rows.length ; i++) {
110 row = rows[i];
111 row.pos = i+1;
112 if (i % 2 == 0)
113 row.className = "even";
114 else
115 row.className = "odd";
116 }
117
118 // send request
119 var req = new XMLHttpRequest();
120 req.open("POST", url, true);
121 req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset=utf-8");
122 req.send(form);
123 var thisControler = this;
124 setTimeout(function(){thisControler.reset();}, 50);
125 }
126 }
127 };
128
129 FolderDDropControler.prototype.disableClickAfterDrop = function(evt) {
130 var target = getTargetedObject(evt);
131 if (!this.noOver) {
132 disablePropagation(evt);
133 disableDefault(evt);
134 }
135 this.reset();
136 };
137
138 FolderDDropControler.prototype.selectCBRange = function(evt) {
139 };
140
141
142 FolderDDropControler.prototype.reset = function() {
143 this.targetRow = null;
144 this.lastOverPosition = null;
145 this.prevDirUp = null;
146 this.noOver = true;
147 }
148
149
150
151 DropTarget = function(node, folderDDControler) {
152 this.folderDDControler = folderDDControler;
153 this.batchSize = parseInt(document.getElementById("BatchNavigationSize").innerHTML);
154 var thisControler = this;
155 node.onmouseup = function(evt){thisControler.drop(evt);};
156 node.onmouseover = function(evt) {thisControler.highlightTarget(evt);};
157 node.onmouseout = function(evt) {
158 var target = getTargetedObject(evt);
159 if (target.nodeName == "A" && target.className == "dropPageTarget")
160 target.className = "";
161 };
162 }
163
164 DropTarget.prototype.drop = function(evt) {
165 var target = getTargetedObject(evt);
166 if (target.nodeName == "A" &&
167 target.className != "previous" &&
168 target.className != "next") {
169 var pageNumber = parseInt(target.innerHTML);
170 var targetRow = this.folderDDControler.targetRow;
171 if ( !isNaN(pageNumber) && targetRow) {
172 this.folderDDControler.reset();
173 var object_id = targetRow.getElementsByTagName("INPUT")[0].getAttribute("value");
174 var url = this.folderDDControler.folderUrl + "/moveObjectIdToPosition";
175 var form ="object_id=" + object_id + "&position:int=" + String(this.batchSize * (pageNumber-1));
176 // send request
177 var req = new XMLHttpRequest();
178 req.open("POST", url, true);
179 req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset=utf-8");
180 req.send(form);
181 req.onreadystatechange = function() {
182 if (req.readyState == 4) {
183 switch (req.status) {
184 case 200:
185 case 204:
186 case 1223:
187 raiseMouseEvent(target, "click");
188 break;
189 default:
190 alert('Error: ' + req.status);
191 };
192 }
193 };
194 }
195 }
196 };
197
198 DropTarget.prototype.highlightTarget = function(evt){
199 if (browser.isIE) document.selection.clear();
200 var target = getTargetedObject(evt);
201 if (this.folderDDControler.targetRow &&
202 target.nodeName == "A" &&
203 target.className != "previous" &&
204 target.className != "next")
205 target.className = "dropPageTarget";
206 };
207
208
209
210
211 loadListing = function(evt) {
212 var target = getTargetedObject(evt);
213 disableDefault(evt);
214 disablePropagation(evt);
215 switch (target.nodeName) {
216 case "A" :
217 var parts = target.href.split('?')
218 var url = parts[0];
219 var query = '';
220 if (parts.length == 2)
221 query = parts[1];
222
223 var urlParts = url.split("/");
224 var url = urlParts.slice(0,urlParts.length-1).join("/");
225 if (query.search("template") == -1)
226 query += "&template=folder_contents_macros&macro=FolderListing&fragmentId=FolderListing";
227 url = url + "/folder_contents?" + query;
228
229 var fi = new FragmentImporter(url);
230 fi.load();
231 break;
232
233 case "IMG" :
234 if (target.id == 'SetSortingAsDefault') {
235 var parent = target.parentNode;
236 var url = parent.href;
237 url = url.replace("folder_contents", "folder_sort_control");
238 parent.parentNode.removeChild(parent);
239
240 var req = new XMLHttpRequest();
241 req.open("GET", url, true);
242 req.send(null);
243 }
244 break;
245 }
246 return false;
247 }
248
249 DDFolderUploader = function(dropbox, uploadUrl, listing) {
250 DDFileUploaderBase.apply(this, [dropbox, uploadUrl]);
251 this.listing = listing;
252 this.progressBarMaxSize = listing.clientWidth;
253 var thead = listing;
254 do {
255 thead = thead.previousSibling;
256 } while (thead.tagName !== 'THEAD')
257
258 var cells = thead.getElementsByTagName('th');
259 var cell;
260 this.tableSpan = 0;
261 for (var i = 0 ; i < cells.length ; i++) {
262 cell = cells[i];
263 this.tableSpan += cell.getAttribute('colspan') ? Number(cell.getAttribute('colspan')) : 1;
264 }
265 var lastRow = listing.lastChild;
266 while(lastRow && lastRow.tagName !== 'TR') {
267 lastRow = lastRow.previousSibling;
268 }
269 this.lastRowClassName = lastRow ? lastRow.className : 'even';
270 };
271
272 copyPrototype(DDFolderUploader, DDFileUploaderBase);
273
274
275 DDFolderUploader.prototype.createRow = function(file) {
276 var row = document.createElement('tr');
277 row.file = file;
278 row.className = this.lastRowClassName === 'even' ? 'odd' : 'even';
279 this.lastRowClassName = row.className;
280 var td = document.createElement('td');
281 td.setAttribute('colspan', this.tableSpan);
282 var relSpan = document.createElement('span');
283 relSpan.style.position = 'relative';
284 td.appendChild(relSpan);
285 var progressBar = document.createElement('span');
286 progressBar.className = 'upload-progress';
287 row.progressBar = progressBar;
288 relSpan.appendChild(progressBar);
289 var fileNameSpan = document.createElement('span');
290 fileNameSpan.innerHTML = file.name;
291 td.appendChild(fileNameSpan);
292 row.appendChild(td);
293 this.listing.appendChild(row);
294 this.progressBarMaxSize = row.clientWidth;
295 return row;
296 };
297
298 // Methods about upload
299 DDFolderUploader.prototype.handleFiles = function(files) {
300 var file, i, row;
301 for (i = 0; i < files.length; i++) {
302 file = files[i];
303 row = this.createRow(file);
304 this.uploadQueuePush(row);
305 }
306 };
307
308 DDFolderUploader.prototype.beforeUpload = function(item) {
309 this.uploadedItem = item;
310 this.progressBar = item.progressBar;
311 };
312
313 DDFolderUploader.prototype.uploadCompleteHandlerCB = function(req) {
314 var item = this.uploadedItem;
315 var row = getCopyOfNode(req.responseXML.documentElement.firstChild);
316 row.className = item.className;
317
318 if (req.status === 200) {
319 // update
320 console.log('todo');
321 }
322 else if(req.status === 201) {
323 // creation
324 this.listing.replaceChild(row, item);
325 this.progressBarMaxSize = row.clientWidth;
326 }
327 };
328
329 DDFolderUploader.prototype.progressHandlerCB = function(progress) {
330 // 0 <= progress <= 1
331 var size = this.progressBarMaxSize * progress;
332 size = Math.round(size);
333 this.progressBar.style.width = size + 'px';
334 };
335
336 }());