[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="{$base_path}/admin/plugins" 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>
    <input type="hidden" name="token" value="{$token}">
  </form>

  <form action="{$base_path}/admin/plugins" 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>
    <input type="hidden" name="token" value="{$token}">
  </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">
1b8620b1	19	<form action="{$base_path}/admin/plugins" method="POST">
dea0ba28 A	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>
9fbc4229	89	<input type="hidden" name="token" value="{$token}">
dea0ba28 A	90	</form>
dea0ba28 A	91
1b8620b1	92	<form action="{$base_path}/admin/plugins" method="POST">
dea0ba28 A	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">
dc71701c	103	<h2>{function="str_replace('_', ' ', $key)"}</h2>
dea0ba28 A	104	{loop="$value.parameters"}
	105	<div class="plugin_parameter">
	106	<div class="float_label">
	107	<label for="{$key}">
1442afe3	108	<code>{$key}</code><br>
e3de09b4 A	109	{if="isset($value.desc)"}
	110	{$value.desc}
	111	{/if}
dea0ba28 A	112	</label>
	113	</div>
	114	<div class="float_input">
1442afe3	115	<input name="{$key}" value="{$value.value}" id="{$key}"/>
dea0ba28 A	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>
9fbc4229	128	<input type="hidden" name="token" value="{$token}">
dea0ba28 A	129	</form>
	130
	131	</div>
	132	{include="page.footer"}
	133
7e9bd977 A	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>
dea0ba28	206	</body>
dc71701c	207	</html>