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