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