2 * JavaScript functionalitiy for the media management popup
4 * @author Andreas Gohr <andi@splitbrain.org>
11 * Attach event handlers to all "folders" below the given element
13 * @author Andreas Gohr <andi@splitbrain.org>
15 treeattach: function(obj){
18 var items = obj.getElementsByTagName('li');
19 for(var i=0; i<items.length; i++){
22 // attach action to make the +/- clickable
23 var clicky = elem.getElementsByTagName('img')[0];
24 clicky.style.cursor = 'pointer';
25 addEvent(clicky,'click',function(event){ return media.toggle(event,this); });
27 // attach action load folder list via AJAX
28 var link = elem.getElementsByTagName('a')[0];
29 link.style.cursor = 'pointer';
30 addEvent(link,'click',function(event){ return media.list(event,this); });
35 * Attach the image selector action to all links below the given element
36 * also add the action to autofill the "upload as" field
38 * @author Andreas Gohr <andi@splitbrain.org>
40 selectorattach: function(obj){
43 var items = getElementsByClass('select',obj,'a');
44 for(var i=0; i<items.length; i++){
46 elem.style.cursor = 'pointer';
47 addEvent(elem,'click',function(event){ return media.select(event,this); });
50 // hide syntax example
51 items = getElementsByClass('example',obj,'div');
52 for(var i=0; i<items.length; i++){
54 elem.style.display = 'none';
57 var file = $('upload__file');
59 addEvent(file,'change',media.suggest);
63 * Attach deletion confirmation dialog to the delete buttons.
65 * Michael Klier <chi@chimeric.de>
67 confirmattach: function(obj){
70 items = getElementsByClass('btn_media_delete',obj,'a');
71 for(var i=0; i<items.length; i++){
73 addEvent(elem,'click',function(e){
74 if(e.target.tagName == 'IMG'){
75 var name = e.target.parentNode.title;
77 var name = e.target.title;
79 if(!confirm(LANG['del_confirm'] + "\n" + name)) {
90 * Creates checkboxes for additional options
92 * @author Andreas Gohr <andi@splitbrain.org>
94 attachoptions: function(obj){
99 var kobox = document.createElement('input');
100 kobox.type = 'checkbox';
101 kobox.id = 'media__keepopen';
102 if(DokuCookie.getValue('keepopen')){
103 kobox.checked = true;
104 kobox.defaultChecked = true; //IE wants this
105 media.keepopen = true;
107 addEvent(kobox,'click',function(event){ return media.togglekeepopen(event,this); });
109 var kolbl = document.createElement('label');
110 kolbl.htmlFor = 'media__keepopen';
111 kolbl.innerHTML = LANG['keepopen'];
113 var kobr = document.createElement('br');
115 obj.appendChild(kobox);
116 obj.appendChild(kolbl);
117 obj.appendChild(kobr);
121 var hdbox = document.createElement('input');
122 hdbox.type = 'checkbox';
123 hdbox.id = 'media__hide';
124 if(DokuCookie.getValue('hide')){
125 hdbox.checked = true;
126 hdbox.defaultChecked = true; //IE wants this
129 addEvent(hdbox,'click',function(event){ return media.togglehide(event,this); });
131 var hdlbl = document.createElement('label');
132 hdlbl.htmlFor = 'media__hide';
133 hdlbl.innerHTML = LANG['hidedetails'];
135 var hdbr = document.createElement('br');
137 obj.appendChild(hdbox);
138 obj.appendChild(hdlbl);
139 obj.appendChild(hdbr);
144 * Toggles the keep open state
146 * @author Andreas Gohr <andi@splitbrain.org>
148 togglekeepopen: function(event,cb){
150 DokuCookie.setValue('keepopen',1);
151 media.keepopen = true;
153 DokuCookie.setValue('keepopen','');
154 media.keepopen = false;
159 * Toggles the hide details state
161 * @author Andreas Gohr <andi@splitbrain.org>
163 togglehide: function(event,cb){
165 DokuCookie.setValue('hide',1);
168 DokuCookie.setValue('hide','');
175 * Sets the visibility of the image details accordingly to the
178 * @author Andreas Gohr <andi@splitbrain.org>
180 updatehide: function(){
181 var obj = $('media__content');
183 var details = getElementsByClass('detail',obj,'div');
184 for(var i=0; i<details.length; i++){
186 details[i].style.display = 'none';
188 details[i].style.display = '';
194 * Insert the clicked image into the opener's textarea
196 * @author Andreas Gohr <andi@splitbrain.org>
198 select: function(event,link){
199 var id = link.name.substr(2);
202 // if we don't run in popup display example
203 var ex = $('ex_'+id.replace(/:/g,'_'));
204 if(ex.style.display == ''){
205 ex.style.display = 'none';
207 ex.style.display = '';
211 opener.insertTags('wiki__text','{{:'+id+'|','}}','');
213 if(!media.keepopen) window.close();
219 * list the content of a namespace using AJAX
221 * @author Andreas Gohr <andi@splitbrain.org>
223 list: function(event,link){
224 // prepare an AJAX call to fetch the subtree
225 var ajax = new sack(DOKU_BASE + 'lib/exe/ajax.php');
226 ajax.AjaxFailedAlert = '';
227 ajax.encodeURIString = false;
228 if(ajax.failed) return true;
232 var content = $('media__content');
233 content.innerHTML = '<img src="'+DOKU_BASE+'lib/images/loading.gif" alt="..." class="load" />';
235 ajax.elementObj = content;
236 ajax.afterCompletion = function(){
237 media.selectorattach(content);
238 media.confirmattach(content);
240 media.initFlashUpload();
242 ajax.runAJAX(link.search.substr(1)+'&call=medialist');
248 * Open or close a subtree using AJAX
250 * @author Andreas Gohr <andi@splitbrain.org>
252 toggle: function(event,clicky){
253 var listitem = clicky.parentNode;
255 // if already open, close by removing the sublist
256 var sublists = listitem.getElementsByTagName('ul');
258 listitem.removeChild(sublists[0]);
259 clicky.src = DOKU_BASE+'lib/images/plus.gif';
263 // get the enclosed link (is always the first one)
264 var link = listitem.getElementsByTagName('a')[0];
266 // prepare an AJAX call to fetch the subtree
267 var ajax = new sack(DOKU_BASE + 'lib/exe/ajax.php');
268 ajax.AjaxFailedAlert = '';
269 ajax.encodeURIString = false;
270 if(ajax.failed) return true;
273 var ul = document.createElement('ul');
274 //fixme add classname here
275 listitem.appendChild(ul);
276 ajax.elementObj = ul;
277 ajax.afterCompletion = function(){ media.treeattach(ul); };
278 ajax.runAJAX(link.search.substr(1)+'&call=medians');
279 clicky.src = DOKU_BASE+'lib/images/minus.gif';
284 * Prefills the wikiname.
286 * @author Andreas Gohr <andi@splitbrain.org>
289 var file = $('upload__file');
290 var name = $('upload__name');
291 if(!file || !name) return;
293 var text = file.value;
294 text = text.substr(text.lastIndexOf('/')+1);
295 text = text.substr(text.lastIndexOf('\\')+1);
300 initFlashUpload: function(){
301 if(!hasFlash(8)) return;
302 var oform = $('dw__upload');
303 var oflash = $('dw__flashupload');
304 if(!oform || !oflash) return;
306 var clicky = document.createElement('img');
307 clicky.src = DOKU_BASE+'lib/images/multiupload.png';
308 clicky.title = LANG['mu_btn'];
309 clicky.alt = LANG['mu_btn'];
310 clicky.style.cursor = 'pointer';
311 clicky.onclick = function(){
312 oform.style.display = 'none';
313 oflash.style.display = '';
315 oform.appendChild(clicky);
319 addInitEvent(function(){
320 media.treeattach($('media__tree'));
321 media.selectorattach($('media__content'));
322 media.confirmattach($('media__content'));
323 media.attachoptions($('media__opts'));
324 media.initFlashUpload();