[Sommaire] [Imprimer]

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