[Summary view] [Print] [Text view]

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