lib/scripts/media.js

   1 /**
   2  * JavaScript functionalitiy for the media management popup
   3  *
   4  * @author Andreas Gohr <andi@splitbrain.org>
   5  */
   6 var media_manager = {
   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_manager.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_manager.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_manager.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_manager.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_manager.keepopen = true;
 106             }
 107             addEvent(kobox,'click',function(event){ return media_manager.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_manager.hide    = true;
 128         }
 129         addEvent(hdbox,'click',function(event){ return media_manager.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_manager.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_manager.selectorattach(content);
 163             media_manager.confirmattach(content);
 164             media_manager.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_manager.keepopen = true;
 179         }else{
 180             DokuCookie.setValue('keepopen','');
 181             media_manager.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_manager.hide = true;
 194         }else{
 195             DokuCookie.setValue('hide','');
 196             media_manager.hide = false;
 197         }
 198         media_manager.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_manager.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_manager.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_manager.selectorattach(content);
 265             media_manager.confirmattach(content);
 266             media_manager.updatehide();
 267             media_manager.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_manager.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
 346 addInitEvent(function(){
 347     media_manager.treeattach($('media__tree'));
 348     media_manager.selectorattach($('media__content'));
 349     media_manager.confirmattach($('media__content'));
 350     media_manager.attachoptions($('media__opts'));
 351     media_manager.initFlashUpload();
 352 });