[github/shaarli/Shaarli.git] / tpl / vintage / pluginsadmin.html

<!DOCTYPE html>
<html>
<head>{include="includes"}</head>
<body>
<div id="pageheader">
  {include="page.header"}
</div>

<noscript>
  <div>
    <ul class="errors">
      <li>You need to enable Javascript to change plugin loading order.</li>
    </ul>
  </div>
  <div class="clear"></div>
</noscript>

<div id="pluginsadmin">
  <form action="?do=save_pluginadmin" method="POST">
    <section id="enabled_plugins">
      <h1>Enabled Plugins</h1>

      <div>
        {if="count($enabledPlugins)==0"}
          <p>No plugin enabled.</p>
        {else}
          <table id="plugin_table">
            <thead>
            <tr>
              <th class="center">Disable</th>
              <th class="center">Order</th>
              <th>Name</th>
              <th>Description</th>
            </tr>
            </thead>
            <tbody>
            {loop="$enabledPlugins"}
              <tr data-line="{$key}" data-order="{$counter}">
                <td class="center"><input type="checkbox" name="{$key}" id="{$key}" checked="checked"></td>
                <td class="center">
                  <a href="#" class="arrow"
                     onclick="return orderUp(this.parentNode.parentNode.getAttribute('data-order'));">
                    ▲
                  </a>
                  <a href="#" class="arrow"
                     onclick="return orderDown(this.parentNode.parentNode.getAttribute('data-order'));">
                    ▼
                  </a>
                  <input type="hidden" name="order_{$key}" value="{$counter}">
                </td>
                <td><label for="{$key}">{function="str_replace('_', ' ', $key)"}</label></td>
                <td><label for="{$key}">{$value.description}</label></td>
              </tr>
            {/loop}
            </tbody>
          </table>
        {/if}
      </div>
    </section>

    <section id="disabled_plugins">
      <h1>Disabled Plugins</h1>

      <div>
        {if="count($disabledPlugins)==0"}
          <p>No plugin disabled.</p>
        {else}
          <table>
            <tr>
              <th class="center">Enable</th>
              <th>Name</th>
              <th>Description</th>
            </tr>
            {loop="$disabledPlugins"}
              <tr>
                <td class="center"><input type="checkbox" name="{$key}" id="{$key}"></td>
                <td><label for="{$key}">{function="str_replace('_', ' ', $key)"}</label></td>
                <td><label for="{$key}">{$value.description}</label></td>
              </tr>
            {/loop}
          </table>
        {/if}
      </div>

      <div class="center">
        <input type="submit" value="Save"/>
      </div>
    </section>
  </form>

  <form action="?do=save_pluginadmin" method="POST">
    <section id="plugin_parameters">
      <h1>Enabled Plugin Parameters</h1>

      <div>
        {if="count($enabledPlugins)==0"}
          <p>No plugin enabled.</p>
        {else}
          {loop="$enabledPlugins"}
            {if="count($value.parameters) > 0"}
              <div class="plugin_parameters">
                <h2>{function="str_replace('_', ' ', $key)"}</h2>
                {loop="$value.parameters"}
                  <div class="plugin_parameter">
                    <div class="float_label">
                      <label for="{$key}">
                        <code>{$key}</code><br>
                        {if="isset($value.desc)"}
                          {$value.desc}
                        {/if}
                      </label>
                    </div>
                    <div class="float_input">
                      <input name="{$key}" value="{$value.value}" id="{$key}"/>
                    </div>
                  </div>
                {/loop}
              </div>
            {/if}
          {/loop}
        {/if}
        <div class="center">
          <input type="submit" name="parameters_form" value="Save"/>
        </div>
      </div>
    </section>
  </form>

</div>
{include="page.footer"}

<script>
  /**
   * Change the position counter of a row.
   *
   * @param elem  Element Node to change.
   * @param toPos int     New position.
   */
  function changePos(elem, toPos) {
    var elemName = elem.getAttribute('data-line');

    elem.setAttribute('data-order', toPos);
    var hiddenInput = document.querySelector('[name="order_' + elemName + '"]');
    hiddenInput.setAttribute('value', toPos);
  }

  /**
   * Move a row up or down.
   *
   * @param pos  Element Node to move.
   * @param move int     Move: +1 (down) or -1 (up)
   */
  function changeOrder(pos, move) {
    var newpos = parseInt(pos) + move;
    var lines = document.querySelectorAll('[data-order="' + pos + '"]');
    var changelines = document.querySelectorAll('[data-order="' + newpos + '"]');

    // If we go down reverse lines to preserve the rows order
    if (move > 0) {
      lines = [].slice.call(lines).reverse();
    }

    for (var i = 0; i < lines.length; i++) {
      var parent = changelines[0].parentNode;
      changePos(lines[i], newpos);
      changePos(changelines[i], parseInt(pos));
      var changeItem = move < 0 ? changelines[0] : changelines[changelines.length - 1].nextSibling;
      parent.insertBefore(lines[i], changeItem);
    }
  }

  /**
   * Move a row up in the table.
   *
   * @param pos int row counter.
   *
   * @returns false
   */
  function orderUp(pos) {
    if (pos == 0) {
      return false;
    }
    changeOrder(pos, -1);
    return false;
  }

  /**
   * Move a row down in the table.
   *
   * @param pos int row counter.
   *
   * @returns false
   */
  function orderDown(pos) {
    var lastpos = document.querySelector('[data-order]:last-child').getAttribute('data-order');
    if (pos == lastpos) {
      return false;
    }

    changeOrder(pos, +1);
    return false;
  }
</script>
</body>
</html>
Commit	Line	Data
dea0ba28 A	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="?do=save_pluginadmin" 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}">
dc71701c	39	<td class="center"><input type="checkbox" name="{$key}" id="{$key}" checked="checked"></td>
dea0ba28	40	<td class="center">
3d8f5cf8	41	<a href="#" class="arrow"
dea0ba28 A	42	onclick="return orderUp(this.parentNode.parentNode.getAttribute('data-order'));">
	43	▲
	44	</a>
3d8f5cf8	45	<a href="#" class="arrow"
dea0ba28 A	46	onclick="return orderDown(this.parentNode.parentNode.getAttribute('data-order'));">
	47	▼
	48	</a>
	49	<input type="hidden" name="order_{$key}" value="{$counter}">
	50	</td>
dc71701c ND	51	<td><label for="{$key}">{function="str_replace('_', ' ', $key)"}</label></td>
dc71701c ND	52	<td><label for="{$key}">{$value.description}</label></td>
dea0ba28 A	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>
dc71701c ND	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>
dea0ba28 A	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	</form>
	90
	91	<form action="?do=save_pluginadmin" method="POST">
	92	<section id="plugin_parameters">
	93	<h1>Enabled Plugin Parameters</h1>
	94
	95	<div>
	96	{if="count($enabledPlugins)==0"}
	97	<p>No plugin enabled.</p>
	98	{else}
	99	{loop="$enabledPlugins"}
	100	{if="count($value.parameters) > 0"}
	101	<div class="plugin_parameters">
dc71701c	102	<h2>{function="str_replace('_', ' ', $key)"}</h2>
dea0ba28 A	103	{loop="$value.parameters"}
	104	<div class="plugin_parameter">
	105	<div class="float_label">
	106	<label for="{$key}">
1442afe3	107	<code>{$key}</code><br>
e3de09b4 A	108	{if="isset($value.desc)"}
	109	{$value.desc}
	110	{/if}
dea0ba28 A	111	</label>
	112	</div>
	113	<div class="float_input">
1442afe3	114	<input name="{$key}" value="{$value.value}" id="{$key}"/>
dea0ba28 A	115	</div>
	116	</div>
	117	{/loop}
	118	</div>
	119	{/if}
	120	{/loop}
	121	{/if}
	122	<div class="center">
	123	<input type="submit" name="parameters_form" value="Save"/>
	124	</div>
	125	</div>
	126	</section>
	127	</form>
	128
	129	</div>
	130	{include="page.footer"}
	131
758fe720 A	132	<script>
	133	/**
	134	* Change the position counter of a row.
	135	*
	136	* @param elem Element Node to change.
	137	* @param toPos int New position.
	138	*/
	139	function changePos(elem, toPos) {
	140	var elemName = elem.getAttribute('data-line');
	141
	142	elem.setAttribute('data-order', toPos);
	143	var hiddenInput = document.querySelector('[name="order_' + elemName + '"]');
	144	hiddenInput.setAttribute('value', toPos);
	145	}
	146
	147	/**
	148	* Move a row up or down.
	149	*
	150	* @param pos Element Node to move.
	151	* @param move int Move: +1 (down) or -1 (up)
	152	*/
	153	function changeOrder(pos, move) {
	154	var newpos = parseInt(pos) + move;
	155	var lines = document.querySelectorAll('[data-order="' + pos + '"]');
	156	var changelines = document.querySelectorAll('[data-order="' + newpos + '"]');
	157
	158	// If we go down reverse lines to preserve the rows order
	159	if (move > 0) {
	160	lines = [].slice.call(lines).reverse();
	161	}
	162
	163	for (var i = 0; i < lines.length; i++) {
	164	var parent = changelines[0].parentNode;
	165	changePos(lines[i], newpos);
	166	changePos(changelines[i], parseInt(pos));
	167	var changeItem = move < 0 ? changelines[0] : changelines[changelines.length - 1].nextSibling;
	168	parent.insertBefore(lines[i], changeItem);
	169	}
	170	}
	171
	172	/**
	173	* Move a row up in the table.
	174	*
	175	* @param pos int row counter.
	176	*
	177	* @returns false
	178	*/
	179	function orderUp(pos) {
	180	if (pos == 0) {
	181	return false;
	182	}
	183	changeOrder(pos, -1);
	184	return false;
	185	}
	186
	187	/**
	188	* Move a row down in the table.
	189	*
	190	* @param pos int row counter.
	191	*
	192	* @returns false
	193	*/
	194	function orderDown(pos) {
	195	var lastpos = document.querySelector('[data-order]:last-child').getAttribute('data-order');
196	if (pos == lastpos) {
197	return false;
198	}
199
200	changeOrder(pos, +1);
201	return false;
202	}
203	</script>
dea0ba28	204	</body>
dc71701c	205	</html>