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 * Attach 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 var elem = items[i]; 73 addEvent(elem,'click',function(e){ 74 if(e.target.tagName == 'IMG'){ 75 var name = e.target.parentNode.title; 76 }else{ 77 var name = e.target.title; 78 } 79 if(!confirm(LANG['del_confirm'] + "\n" + name)) { 80 e.preventDefault(); 81 return false; 82 } else { 83 return true; 84 } 85 }); 86 } 87 }, 88 89 /** 90 * Creates checkboxes for additional options 91 * 92 * @author Andreas Gohr <andi@splitbrain.org> 93 */ 94 attachoptions: function(obj){ 95 if(!obj) return; 96 97 // search link 98 var searcha = document.createElement('a'); 99 searcha.id = 'media__search'; 100 searcha.href = '#'; 101 addEvent(searcha,'click',function(event){ return media.showsearchfield(event,this); }); 102 103 var searchlbl = document.createElement('label'); 104 searchlbl.htmlFor = 'media__searchmedia'; 105 searchlbl.innerHTML = LANG['searchmedia']; 106 107 var searchbr = document.createElement('br'); 108 109 searcha.appendChild(searchlbl); 110 obj.appendChild(searcha); 111 obj.appendChild(searchbr); 112 113 // keep open 114 if(opener){ 115 var kobox = document.createElement('input'); 116 kobox.type = 'checkbox'; 117 kobox.id = 'media__keepopen'; 118 if(DokuCookie.getValue('keepopen')){ 119 kobox.checked = true; 120 kobox.defaultChecked = true; //IE wants this 121 media.keepopen = true; 122 } 123 addEvent(kobox,'click',function(event){ return media.togglekeepopen(event,this); }); 124 125 var kolbl = document.createElement('label'); 126 kolbl.htmlFor = 'media__keepopen'; 127 kolbl.innerHTML = LANG['keepopen']; 128 129 var kobr = document.createElement('br'); 130 131 obj.appendChild(kobox); 132 obj.appendChild(kolbl); 133 obj.appendChild(kobr); 134 } 135 136 // hide details 137 var hdbox = document.createElement('input'); 138 hdbox.type = 'checkbox'; 139 hdbox.id = 'media__hide'; 140 if(DokuCookie.getValue('hide')){ 141 hdbox.checked = true; 142 hdbox.defaultChecked = true; //IE wants this 143 media.hide = true; 144 } 145 addEvent(hdbox,'click',function(event){ return media.togglehide(event,this); }); 146 147 var hdlbl = document.createElement('label'); 148 hdlbl.htmlFor = 'media__hide'; 149 hdlbl.innerHTML = LANG['hidedetails']; 150 151 var hdbr = document.createElement('br'); 152 153 obj.appendChild(hdbox); 154 obj.appendChild(hdlbl); 155 obj.appendChild(hdbr); 156 media.updatehide(); 157 }, 158 159 /** 160 * Opens the searchfield 161 * 162 * @author Tobias Sarnowski <sarnowski@cosmocode.de> 163 */ 164 showsearchfield: function(event,link){ 165 // prepare an AJAX call to fetch the search 166 var ajax = new sack(DOKU_BASE + 'lib/exe/ajax.php'); 167 ajax.AjaxFailedAlert = ''; 168 ajax.encodeURIString = false; 169 if(ajax.failed) return true; 170 171 cleanMsgArea(); 172 173 var content = $('media__content'); 174 content.innerHTML = '<img src="'+DOKU_BASE+'lib/images/loading.gif" alt="..." class="load" />'; 175 176 ajax.elementObj = content; 177 ajax.afterCompletion = function(){ 178 media.selectorattach(content); 179 media.confirmattach(content); 180 media.updatehide(); 181 }; 182 ajax.runAJAX(link.search.substr(1)+'&call=mediasearchlist'); 183 return false; 184 }, 185 186 /** 187 * Toggles the keep open state 188 * 189 * @author Andreas Gohr <andi@splitbrain.org> 190 */ 191 togglekeepopen: function(event,cb){ 192 if(cb.checked){ 193 DokuCookie.setValue('keepopen',1); 194 media.keepopen = true; 195 }else{ 196 DokuCookie.setValue('keepopen',''); 197 media.keepopen = false; 198 } 199 }, 200 201 /** 202 * Toggles the hide details state 203 * 204 * @author Andreas Gohr <andi@splitbrain.org> 205 */ 206 togglehide: function(event,cb){ 207 if(cb.checked){ 208 DokuCookie.setValue('hide',1); 209 media.hide = true; 210 }else{ 211 DokuCookie.setValue('hide',''); 212 media.hide = false; 213 } 214 media.updatehide(); 215 }, 216 217 /** 218 * Sets the visibility of the image details accordingly to the 219 * chosen hide state 220 * 221 * @author Andreas Gohr <andi@splitbrain.org> 222 */ 223 updatehide: function(){ 224 var obj = $('media__content'); 225 if(!obj) return; 226 var details = getElementsByClass('detail',obj,'div'); 227 for(var i=0; i<details.length; i++){ 228 if(media.hide){ 229 details[i].style.display = 'none'; 230 }else{ 231 details[i].style.display = ''; 232 } 233 } 234 }, 235 236 /** 237 * Insert the clicked image into the opener's textarea 238 * 239 * @author Andreas Gohr <andi@splitbrain.org> 240 */ 241 select: function(event,link){ 242 var id = link.name.substr(2); 243 244 if(!opener){ 245 // if we don't run in popup display example 246 var ex = $('ex_'+id.replace(/:/g,'_')); 247 if(ex.style.display == ''){ 248 ex.style.display = 'none'; 249 }else{ 250 ex.style.display = ''; 251 } 252 return false; 253 } 254 opener.insertTags('wiki__text','{{'+id+'|','}}',''); 255 256 if(!media.keepopen) window.close(); 257 opener.focus(); 258 return false; 259 }, 260 261 /** 262 * list the content of a namespace using AJAX 263 * 264 * @author Andreas Gohr <andi@splitbrain.org> 265 */ 266 list: function(event,link){ 267 // prepare an AJAX call to fetch the subtree 268 var ajax = new sack(DOKU_BASE + 'lib/exe/ajax.php'); 269 ajax.AjaxFailedAlert = ''; 270 ajax.encodeURIString = false; 271 if(ajax.failed) return true; 272 273 cleanMsgArea(); 274 275 var content = $('media__content'); 276 content.innerHTML = '<img src="'+DOKU_BASE+'lib/images/loading.gif" alt="..." class="load" />'; 277 278 ajax.elementObj = content; 279 ajax.afterCompletion = function(){ 280 media.selectorattach(content); 281 media.confirmattach(content); 282 media.updatehide(); 283 media.initFlashUpload(); 284 }; 285 ajax.runAJAX(link.search.substr(1)+'&call=medialist'); 286 return false; 287 }, 288 289 290 /** 291 * Open or close a subtree using AJAX 292 * 293 * @author Andreas Gohr <andi@splitbrain.org> 294 */ 295 toggle: function(event,clicky){ 296 var listitem = clicky.parentNode; 297 298 // if already open, close by removing the sublist 299 var sublists = listitem.getElementsByTagName('ul'); 300 if(sublists.length){ 301 listitem.removeChild(sublists[0]); 302 clicky.src = DOKU_BASE+'lib/images/plus.gif'; 303 return false; 304 } 305 306 // get the enclosed link (is always the first one) 307 var link = listitem.getElementsByTagName('a')[0]; 308 309 // prepare an AJAX call to fetch the subtree 310 var ajax = new sack(DOKU_BASE + 'lib/exe/ajax.php'); 311 ajax.AjaxFailedAlert = ''; 312 ajax.encodeURIString = false; 313 if(ajax.failed) return true; 314 315 //prepare the new ul 316 var ul = document.createElement('ul'); 317 //fixme add classname here 318 listitem.appendChild(ul); 319 ajax.elementObj = ul; 320 ajax.afterCompletion = function(){ media.treeattach(ul); }; 321 ajax.runAJAX(link.search.substr(1)+'&call=medians'); 322 clicky.src = DOKU_BASE+'lib/images/minus.gif'; 323 return false; 324 }, 325 326 /** 327 * Prefills the wikiname. 328 * 329 * @author Andreas Gohr <andi@splitbrain.org> 330 */ 331 suggest: function(){ 332 var file = $('upload__file'); 333 var name = $('upload__name'); 334 if(!file || !name) return; 335 336 var text = file.value; 337 text = text.substr(text.lastIndexOf('/')+1); 338 text = text.substr(text.lastIndexOf('\\')+1); 339 name.value = text; 340 }, 341 342 343 initFlashUpload: function(){ 344 if(!hasFlash(8)) return; 345 var oform = $('dw__upload'); 346 var oflash = $('dw__flashupload'); 347 if(!oform || !oflash) return; 348 349 var clicky = document.createElement('img'); 350 clicky.src = DOKU_BASE+'lib/images/multiupload.png'; 351 clicky.title = LANG['mu_btn']; 352 clicky.alt = LANG['mu_btn']; 353 clicky.style.cursor = 'pointer'; 354 clicky.onclick = function(){ 355 oform.style.display = 'none'; 356 oflash.style.display = ''; 357 }; 358 oform.appendChild(clicky); 359 } 360}; 361 362addInitEvent(function(){ 363 media.treeattach($('media__tree')); 364 media.selectorattach($('media__content')); 365 media.confirmattach($('media__content')); 366 media.attachoptions($('media__opts')); 367 media.initFlashUpload(); 368}); 369
