tpl/vintage/pluginsadmin.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>{include="includes"}</head>
   4 <body>
   5 <div id="pageheader">
   6   {include="page.header"}
   7 </div>
   8
   9 <noscript>
  10   <div>
  11     <ul class="errors">
  12       <li>You need to enable Javascript to change plugin loading order.</li>
  13     </ul>
  14   </div>
  15   <div class="clear"></div>
  16 </noscript>
  17
  18 <div id="pluginsadmin">
  19   <form action="{$base_path}/admin/plugins" method="POST">
  20     <section id="enabled_plugins">
  21       <h1>Enabled Plugins</h1>
  22
  23       <div>
  24         {if="count($enabledPlugins)==0"}
  25           <p>No plugin enabled.</p>
  26         {else}
  27           <table id="plugin_table">
  28             <thead>
  29             <tr>
  30               <th class="center">Disable</th>
  31               <th class="center">Order</th>
  32               <th>Name</th>
  33               <th>Description</th>
  34             </tr>
  35             </thead>
  36             <tbody>
  37             {loop="$enabledPlugins"}
  38               <tr data-line="{$key}" data-order="{$counter}">
  39                 <td class="center"><input type="checkbox" name="{$key}" id="{$key}" checked="checked"></td>
  40                 <td class="center">
  41                   <a href="#" class="arrow"
  42                      onclick="return orderUp(this.parentNode.parentNode.getAttribute('data-order'));">
  43                     ▲
  44                   </a>
  45                   <a href="#" class="arrow"
  46                      onclick="return orderDown(this.parentNode.parentNode.getAttribute('data-order'));">
  47                     ▼
  48                   </a>
  49                   <input type="hidden" name="order_{$key}" value="{$counter}">
  50                 </td>
  51                 <td><label for="{$key}">{function="str_replace('_', ' ', $key)"}</label></td>
  52                 <td><label for="{$key}">{$value.description}</label></td>
  53               </tr>
  54             {/loop}
  55             </tbody>
  56           </table>
  57         {/if}
  58       </div>
  59     </section>
  60
  61     <section id="disabled_plugins">
  62       <h1>Disabled Plugins</h1>
  63
  64       <div>
  65         {if="count($disabledPlugins)==0"}
  66           <p>No plugin disabled.</p>
  67         {else}
  68           <table>
  69             <tr>
  70               <th class="center">Enable</th>
  71               <th>Name</th>
  72               <th>Description</th>
  73             </tr>
  74             {loop="$disabledPlugins"}
  75               <tr>
  76                 <td class="center"><input type="checkbox" name="{$key}" id="{$key}"></td>
  77                 <td><label for="{$key}">{function="str_replace('_', ' ', $key)"}</label></td>
  78                 <td><label for="{$key}">{$value.description}</label></td>
  79               </tr>
  80             {/loop}
  81           </table>
  82         {/if}
  83       </div>
  84
  85       <div class="center">
  86         <input type="submit" value="Save"/>
  87       </div>
  88     </section>
  89     <input type="hidden" name="token" value="{$token}">
  90   </form>
  91
  92   <form action="{$base_path}/admin/plugins" method="POST">
  93     <section id="plugin_parameters">
  94       <h1>Enabled Plugin Parameters</h1>
  95
  96       <div>
  97         {if="count($enabledPlugins)==0"}
  98           <p>No plugin enabled.</p>
  99         {else}
 100           {loop="$enabledPlugins"}
 101             {if="count($value.parameters) > 0"}
 102               <div class="plugin_parameters">
 103                 <h2>{function="str_replace('_', ' ', $key)"}</h2>
 104                 {loop="$value.parameters"}
 105                   <div class="plugin_parameter">
 106                     <div class="float_label">
 107                       <label for="{$key}">
 108                         <code>{$key}</code><br>
 109                         {if="isset($value.desc)"}
 110                           {$value.desc}
 111                         {/if}
 112                       </label>
 113                     </div>
 114                     <div class="float_input">
 115                       <input name="{$key}" value="{$value.value}" id="{$key}"/>
 116                     </div>
 117                   </div>
 118                 {/loop}
 119               </div>
 120             {/if}
 121           {/loop}
 122         {/if}
 123         <div class="center">
 124           <input type="submit" name="parameters_form" value="Save"/>
 125         </div>
 126       </div>
 127     </section>
 128     <input type="hidden" name="token" value="{$token}">
 129   </form>
 130
 131 </div>
 132 {include="page.footer"}
 133
 134 <script>
 135   /**
 136    * Change the position counter of a row.
 137    *
 138    * @param elem  Element Node to change.
 139    * @param toPos int     New position.
 140    */
 141   function changePos(elem, toPos) {
 142     var elemName = elem.getAttribute('data-line');
 143
 144     elem.setAttribute('data-order', toPos);
 145     var hiddenInput = document.querySelector('[name="order_' + elemName + '"]');
 146     hiddenInput.setAttribute('value', toPos);
 147   }
 148
 149   /**
 150    * Move a row up or down.
 151    *
 152    * @param pos  Element Node to move.
 153    * @param move int     Move: +1 (down) or -1 (up)
 154    */
 155   function changeOrder(pos, move) {
 156     var newpos = parseInt(pos) + move;
 157     var lines = document.querySelectorAll('[data-order="' + pos + '"]');
 158     var changelines = document.querySelectorAll('[data-order="' + newpos + '"]');
 159
 160     // If we go down reverse lines to preserve the rows order
 161     if (move > 0) {
 162       lines = [].slice.call(lines).reverse();
 163     }
 164
 165     for (var i = 0; i < lines.length; i++) {
 166       var parent = changelines[0].parentNode;
 167       changePos(lines[i], newpos);
 168       changePos(changelines[i], parseInt(pos));
 169       var changeItem = move < 0 ? changelines[0] : changelines[changelines.length - 1].nextSibling;
 170       parent.insertBefore(lines[i], changeItem);
 171     }
 172   }
 173
 174   /**
 175    * Move a row up in the table.
 176    *
 177    * @param pos int row counter.
 178    *
 179    * @returns false
 180    */
 181   function orderUp(pos) {
 182     if (pos == 0) {
 183       return false;
 184     }
 185     changeOrder(pos, -1);
 186     return false;
 187   }
 188
 189   /**
 190    * Move a row down in the table.
 191    *
 192    * @param pos int row counter.
 193    *
 194    * @returns false
 195    */
 196   function orderDown(pos) {
 197     var lastpos = document.querySelector('[data-order]:last-child').getAttribute('data-order');
 198     if (pos == lastpos) {
 199       return false;
 200     }
 201
 202     changeOrder(pos, +1);
 203     return false;
 204   }
 205 </script>
 206 </body>
 207 </html>