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