1/** 2 * JavaScript functionalitiy for the media management popup 3 * 4 * @author Andreas Gohr <andi@splitbrain.org> 5 */ 6media = { 7 keepopen: false, 8 hide: false, 9 10 /** 11 * Attach event handlers to all "folders" below the given element 12 * 13 * @author Andreas Gohr <andi@splitbrain.org> 14 */ 15 treeattach: function(obj){ 16 if(!obj) return; 17 18 var items = obj.getElementsByTagName('li'); 19 for(var i=0; i<items.length; i++){ 20 var elem = items[i]; 21 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); }); 26 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); }); 31 } 32 }, 33 34 /** 35 * Attach the image selector action to all links below the given element 36 * also add the action to autofill the "upload as" field 37 * 38 * @author Andreas Gohr <andi@splitbrain.org> 39 */ 40 selectorattach: function(obj){ 41 if(!obj) return; 42 43 var items = getElementsByClass('select',obj,'a'); 44 for(var i=0; i<items.length; i++){ 45 var elem = items[i]; 46 elem.style.cursor = 'pointer'; 47 addEvent(elem,'click',function(event){ return media.select(event,this); }); 48 } 49 50 // hide syntax example 51 items = getElementsByClass('example',obj,'div'); 52 for(var i=0; i<items.length; i++){ 53 elem = items[i]; 54 elem.style.display = 'none'; 55 } 56 57 var file = $('upload__file'); 58 if(!file) return; 59 addEvent(file,'change',media.suggest); 60 }, 61 62 /** 63 * Attache deletion confirmation dialog to the delete buttons. 64 * 65 * Michael Klier <chi@chimeric.de> 66 */ 67 confirmattach: function(obj){ 68 if(!obj) return; 69 70 items = getElementsByClass('btn_media_delete',obj,'a'); 71 for(var i=0; i<items.length; i++){ 72 elem = items[i]; 73 addEvent(elem,'click',function(event){ 74 if(!confirm(reallyDel + "\n" + elem.title)) { 75 event.preventDefault(); 76 return false; 77 } else { 78 return true; 79 } 80 }); 81 } 82 }, 83 84 /** 85 * Creates checkboxes for additional options 86 * 87 * @author Andreas Gohr <andi@splitbrain.org> 88 */ 89 attachoptions: function(obj){ 90 if(!obj) return; 91 92 // keep open 93 if(opener){ 94 var kobox = document.createElement('input'); 95 kobox.type = 'checkbox'; 96 kobox.id = 'media__keepopen'; 97 if(DokuCookie.getValue('keepopen')){ 98 kobox.checked = true; 99 kobox.defaultChecked = true; //IE wants this 100 media.keepopen = true; 101 } 102 addEvent(kobox,'click',function(event){ return media.togglekeepopen(event,this); }); 103 104 var kolbl = document.createElement('label'); 105 kolbl.htmlFor = 'media__keepopen'; 106 kolbl.innerHTML = LANG['keepopen']; 107 108 var kobr = document.createElement('br'); 109 110 obj.appendChild(kobox); 111 obj.appendChild(kolbl); 112 obj.appendChild(kobr); 113 } 114 115 // hide details 116 var hdbox = document.createElement('input'); 117 hdbox.type = 'checkbox'; 118 hdbox.id = 'media__hide'; 119 if(DokuCookie.getValue('hide')){ 120 hdbox.checked = true; 121 hdbox.defaultChecked = true; //IE wants this 122 media.hide = true; 123 } 124 addEvent(hdbox,'click',function(event){ return media.togglehide(event,this); }); 125 126 var hdlbl = document.createElement('label'); 127 hdlbl.htmlFor = 'media__hide'; 128 hdlbl.innerHTML = LANG['hidedetails']; 129 130 var hdbr = document.createElement('br'); 131 132 obj.appendChild(hdbox); 133 obj.appendChild(hdlbl); 134 obj.appendChild(hdbr); 135 media.updatehide(); 136 }, 137 138 /** 139 * Toggles the keep open state 140 * 141 * @author Andreas Gohr <andi@splitbrain.org> 142 */ 143 togglekeepopen: function(event,cb){ 144 if(cb.checked){ 145 DokuCookie.setValue('keepopen',1); 146 media.keepopen = true; 147 }else{ 148 DokuCookie.setValue('keepopen',''); 149 media.keepopen = false; 150 } 151 }, 152 153 /** 154 * Toggles the hide details state 155 * 156 * @author Andreas Gohr <andi@splitbrain.org> 157 */ 158 togglehide: function(event,cb){ 159 if(cb.checked){ 160 DokuCookie.setValue('hide',1); 161 media.hide = true; 162 }else{ 163 DokuCookie.setValue('hide',''); 164 media.hide = false; 165 } 166 media.updatehide(); 167 }, 168 169 /** 170 * Sets the visibility of the image details accordingly to the 171 * chosen hide state 172 * 173 * @author Andreas Gohr <andi@splitbrain.org> 174 */ 175 updatehide: function(){ 176 var obj = $('media__content'); 177 if(!obj) return; 178 var details = getElementsByClass('detail',obj,'div'); 179 for(var i=0; i<details.length; i++){ 180 if(media.hide){ 181 details[i].style.display = 'none'; 182 }else{ 183 details[i].style.display = ''; 184 } 185 } 186 }, 187 188 /** 189 * Insert the clicked image into the opener's textarea 190 * 191 * @author Andreas Gohr <andi@splitbrain.org> 192 */ 193 select: function(event,link){ 194 var id = link.name.substr(2); 195 196 if(!opener){ 197 // if we don't run in popup display example 198 var ex = $('ex_'+id.replace(/:/g,'_')); 199 if(ex.style.display == ''){ 200 ex.style.display = 'none'; 201 }else{ 202 ex.style.display = ''; 203 } 204 return false; 205 } 206 opener.insertTags('wiki__text','{{:'+id+'|','}}',''); 207 208 if(!media.keepopen) window.close(); 209 opener.focus(); 210 return false; 211 }, 212 213 /** 214 * list the content of a namespace using AJAX 215 * 216 * @author Andreas Gohr <andi@splitbrain.org> 217 */ 218 list: function(event,link){ 219 // prepare an AJAX call to fetch the subtree 220 var ajax = new sack(DOKU_BASE + 'lib/exe/ajax.php'); 221 ajax.AjaxFailedAlert = ''; 222 ajax.encodeURIString = false; 223 if(ajax.failed) return true; 224 225 cleanMsgArea(); 226 227 var content = $('media__content'); 228 content.innerHTML = '<img src="'+DOKU_BASE+'lib/images/loading.gif" alt="..." class="load" />'; 229 230 ajax.elementObj = content; 231 ajax.afterCompletion = function(){ 232 media.selectorattach(content); 233 media.confirmattach(content); 234 media.updatehide(); 235 media.initFlashUpload(); 236 }; 237 ajax.runAJAX(link.search.substr(1)+'&call=medialist'); 238 return false; 239 }, 240 241 242 /** 243 * Open or close a subtree using AJAX 244 * 245 * @author Andreas Gohr <andi@splitbrain.org> 246 */ 247 toggle: function(event,clicky){ 248 var listitem = clicky.parentNode; 249 250 // if already open, close by removing the sublist 251 var sublists = listitem.getElementsByTagName('ul'); 252 if(sublists.length){ 253 listitem.removeChild(sublists[0]); 254 clicky.src = DOKU_BASE+'lib/images/plus.gif'; 255 return false; 256 } 257 258 // get the enclosed link (is always the first one) 259 var link = listitem.getElementsByTagName('a')[0]; 260 261 // prepare an AJAX call to fetch the subtree 262 var ajax = new sack(DOKU_BASE + 'lib/exe/ajax.php'); 263 ajax.AjaxFailedAlert = ''; 264 ajax.encodeURIString = false; 265 if(ajax.failed) return true; 266 267 //prepare the new ul 268 var ul = document.createElement('ul'); 269 //fixme add classname here 270 listitem.appendChild(ul); 271 ajax.elementObj = ul; 272 ajax.afterCompletion = function(){ media.treeattach(ul); }; 273 ajax.runAJAX(link.search.substr(1)+'&call=medians'); 274 clicky.src = DOKU_BASE+'lib/images/minus.gif'; 275 return false; 276 }, 277 278 /** 279 * Prefills the wikiname. 280 * 281 * @author Andreas Gohr <andi@splitbrain.org> 282 */ 283 suggest: function(){ 284 var file = $('upload__file'); 285 var name = $('upload__name'); 286 if(!file || !name) return; 287 288 var text = file.value; 289 text = text.substr(text.lastIndexOf('/')+1); 290 text = text.substr(text.lastIndexOf('\\')+1); 291 name.value = text; 292 }, 293 294 295 initFlashUpload: function(){ 296 if(!hasFlash(8)) return; 297 var oform = $('dw__upload'); 298 var oflash = $('dw__flashupload'); 299 if(!oform || !oflash) return; 300 301 var clicky = document.createElement('img'); 302 clicky.src = DOKU_BASE+'lib/images/multiupload.png'; 303 clicky.title = LANG['mu_btn']; 304 clicky.alt = LANG['mu_btn']; 305 clicky.style.cursor = 'pointer'; 306 clicky.onclick = function(){ 307 oform.style.display = 'none'; 308 oflash.style.display = ''; 309 }; 310 oform.appendChild(clicky); 311 } 312}; 313 314addInitEvent(function(){ 315 media.treeattach($('media__tree')); 316 media.selectorattach($('media__content')); 317 media.confirmattach($('media__content')); 318 media.attachoptions($('media__opts')); 319 media.initFlashUpload(); 320}); 321
