lib/scripts/media.js

   1 /**
   2  * JavaScript functionalitiy for the media management popup
   3  *
   4  * @author Andreas Gohr <andi@splitbrain.org>
   5  */
   6 media = {
   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      * 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.keepopen = true;
 106             }
 107             addEvent(kobox,'click',function(event){ return media.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.hide    = true;
 128         }
 129         addEvent(hdbox,'click',function(event){ return media.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.updatehide();
 141     },
 142
 143     /**
 144      * Toggles the keep open state
 145      *
 146      * @author Andreas Gohr <andi@splitbrain.org>
 147      */
 148     togglekeepopen: function(event,cb){
 149         if(cb.checked){
 150             DokuCookie.setValue('keepopen',1);
 151             media.keepopen = true;
 152         }else{
 153             DokuCookie.setValue('keepopen','');
 154             media.keepopen = false;
 155         }
 156     },
 157
 158     /**
 159      * Toggles the hide details state
 160      *
 161      * @author Andreas Gohr <andi@splitbrain.org>
 162      */
 163     togglehide: function(event,cb){
 164         if(cb.checked){
 165             DokuCookie.setValue('hide',1);
 166             media.hide = true;
 167         }else{
 168             DokuCookie.setValue('hide','');
 169             media.hide = false;
 170         }
 171         media.updatehide();
 172     },
 173
 174     /**
 175      * Sets the visibility of the image details accordingly to the
 176      * chosen hide state
 177      *
 178      * @author Andreas Gohr <andi@splitbrain.org>
 179      */
 180     updatehide: function(){
 181         var obj = $('media__content');
 182         if(!obj) return;
 183         var details = getElementsByClass('detail',obj,'div');
 184         for(var i=0; i<details.length; i++){
 185             if(media.hide){
 186                 details[i].style.display = 'none';
 187             }else{
 188                 details[i].style.display = '';
 189             }
 190         }
 191     },
 192
 193     /**
 194      * Insert the clicked image into the opener's textarea
 195      *
 196      * @author Andreas Gohr <andi@splitbrain.org>
 197      */
 198     select: function(event,link){
 199         var id = link.name.substr(2);
 200
 201         if(!opener){
 202             // if we don't run in popup display example
 203             var ex = $('ex_'+id.replace(/:/g,'_'));
 204             if(ex.style.display == ''){
 205                 ex.style.display = 'none';
 206             }else{
 207                 ex.style.display = '';
 208             }
 209             return false;
 210         }
 211         opener.insertTags('wiki__text','{{:'+id+'|','}}','');
 212
 213         if(!media.keepopen) window.close();
 214         opener.focus();
 215         return false;
 216     },
 217
 218     /**
 219      * list the content of a namespace using AJAX
 220      *
 221      * @author Andreas Gohr <andi@splitbrain.org>
 222      */
 223     list: function(event,link){
 224         // prepare an AJAX call to fetch the subtree
 225         var ajax = new sack(DOKU_BASE + 'lib/exe/ajax.php');
 226         ajax.AjaxFailedAlert = '';
 227         ajax.encodeURIString = false;
 228         if(ajax.failed) return true;
 229
 230         cleanMsgArea();
 231
 232         var content = $('media__content');
 233         content.innerHTML = '<img src="'+DOKU_BASE+'lib/images/loading.gif" alt="..." class="load" />';
 234
 235         ajax.elementObj = content;
 236         ajax.afterCompletion = function(){
 237             media.selectorattach(content);
 238             media.confirmattach(content);
 239             media.updatehide();
 240             media.initFlashUpload();
 241         };
 242         ajax.runAJAX(link.search.substr(1)+'&call=medialist');
 243         return false;
 244     },
 245
 246
 247     /**
 248      * Open or close a subtree using AJAX
 249      *
 250      * @author Andreas Gohr <andi@splitbrain.org>
 251      */
 252     toggle: function(event,clicky){
 253         var listitem = clicky.parentNode;
 254
 255         // if already open, close by removing the sublist
 256         var sublists = listitem.getElementsByTagName('ul');
 257         if(sublists.length){
 258             listitem.removeChild(sublists[0]);
 259             clicky.src = DOKU_BASE+'lib/images/plus.gif';
 260             return false;
 261         }
 262
 263         // get the enclosed link (is always the first one)
 264         var link = listitem.getElementsByTagName('a')[0];
 265
 266         // prepare an AJAX call to fetch the subtree
 267         var ajax = new sack(DOKU_BASE + 'lib/exe/ajax.php');
 268         ajax.AjaxFailedAlert = '';
 269         ajax.encodeURIString = false;
 270         if(ajax.failed) return true;
 271
 272         //prepare the new ul
 273         var ul = document.createElement('ul');
 274         //fixme add classname here
 275         listitem.appendChild(ul);
 276         ajax.elementObj = ul;
 277         ajax.afterCompletion = function(){ media.treeattach(ul); };
 278         ajax.runAJAX(link.search.substr(1)+'&call=medians');
 279         clicky.src = DOKU_BASE+'lib/images/minus.gif';
 280         return false;
 281     },
 282
 283     /**
 284      * Prefills the wikiname.
 285      *
 286      * @author Andreas Gohr <andi@splitbrain.org>
 287      */
 288     suggest: function(){
 289         var file = $('upload__file');
 290         var name = $('upload__name');
 291         if(!file || !name) return;
 292
 293         var text = file.value;
 294         text = text.substr(text.lastIndexOf('/')+1);
 295         text = text.substr(text.lastIndexOf('\\')+1);
 296         name.value = text;
 297     },
 298
 299
 300     initFlashUpload: function(){
 301         if(!hasFlash(8)) return;
 302         var oform  = $('dw__upload');
 303         var oflash = $('dw__flashupload');
 304         if(!oform || !oflash) return;
 305
 306         var clicky = document.createElement('img');
 307         clicky.src     = DOKU_BASE+'lib/images/multiupload.png';
 308         clicky.title   = LANG['mu_btn'];
 309         clicky.alt     = LANG['mu_btn'];
 310         clicky.style.cursor = 'pointer';
 311         clicky.onclick = function(){
 312                             oform.style.display  = 'none';
 313                             oflash.style.display = '';
 314                          };
 315         oform.appendChild(clicky);
 316     }
 317 };
 318
 319 addInitEvent(function(){
 320     media.treeattach($('media__tree'));
 321     media.selectorattach($('media__content'));
 322     media.confirmattach($('media__content'));
 323     media.attachoptions($('media__opts'));
 324     media.initFlashUpload();
 325 });