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