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