source: extensions/typetags/template/tags.tpl @ 26665

Last change on this file since 26665 was 26665, checked in by mistic100, 7 years ago

integrate in new tags manager + rename in Coloured Tags
(my apologies to translators :-) )

File size: 4.9 KB
Line 
1{if isset($TYPETAGS_LIST)}
2{combine_script id="farbtastic" require="jquery" path=$TYPETAGS_PATH|cat:"template/farbtastic/farbtastic.js"}
3{combine_css id="farbastic" path=$TYPETAGS_PATH|cat:"template/farbtastic/farbtastic.css"}
4{combine_css path=$TYPETAGS_PATH|cat:"template/style.css"}
5
6{footer_script}
7(function($){
8  var $error = $('#colorpicker-container .error'),
9      $info = $('#colorpicker-container .info'),
10      $all_select = $('select[name^=tag_color]');
11
12  var typetags_names = [{strip}
13    {foreach from=$typetags item=typetag name=loop}
14      {if !$smarty.foreach.loop.first},{/if}
15      '{$typetag.name|escape:javascript}'
16    {/foreach}
17  {/strip}];
18
19  function checkColor(color) {
20    if (color[0] == '#') {
21      color = color.substr(1);
22    }
23
24    if (color.length == 3) {
25      color = color[0]+color[0]+color[1]+color[1]+color[2]+color[2];
26    }
27    else if (color.length != 6 || isNaN(parseInt(color, 16))) {
28      return false;
29    }
30
31    return '#'+color;
32  }
33
34  function duplicateStyle($from, $to) {
35    $to.attr('style', $from.attr('style'));
36  }
37
38
39  // init select and first option with an explicit style attribute
40  $all_select.find('option:first-child').attr('style', 'color:'+ $all_select.css('color') +';background:'+ $all_select.css('background-color') +';');
41
42  // change select color on change
43  $all_select.on('change', function() {
44    duplicateStyle($(this).find(':selected'), $(this));
45    $('input[name=mode]').prop('checked', false).filter('[value='+ $(this).data('mode') +']').prop('checked', true);
46  });
47
48  // init colorpicker
49  $('#colorpicker').farbtastic('#hexval');
50
51  // add color
52  $('input[name=addtypetag]').on('click', function(e) {
53    e.preventDefault();
54
55    $error.hide();
56    $info.hide();
57
58    var name = $('input[name=typetag_name]').val(),
59        color = $('input[name=typetag_color]').val(),
60        color_text = $('input[name=typetag_color]').css('color');
61
62    if (name == '' || color == '') {
63      $error.show().html('{'You must fill all fields (name and color)'|translate|escape:javascript}');
64    }
65    else if (typetags_names.indexOf(name) != -1) {
66      $error.show().html('{'This name is already used'|translate|escape:javascript}');
67    }
68    else if ( (color = checkColor(color)) === false) {
69      $error.show().html('{'Invalid color'|translate|escape:javascript}');
70    }
71    else {
72      typetags_names.push(name);
73
74      $('select[name^=tag_color]').append('<option value="'+ color +'|'+ name +'" style="color:'+ color_text +';background:'+ color +';">'+ name +' ('+ color +')</option>');
75
76      $('input[name=typetag_name]').val(''),
77      $('input[name=typetag_color]').val('#444444').trigger('keyup');
78      $info.show().html('{'Color added'|translate|escape:javascript}');
79    }
80  });
81}(jQuery));
82{/footer_script}
83
84
85<fieldset>
86  <legend>{'Set tags color'|translate}</legend>
87  <input type="hidden" name="edit_list" value="{$TYPETAGS_LIST}">
88
89  <fieldset id="colorpicker-container">
90    <legend>{'Add a new color'|translate}</legend>
91
92    <div id="colorpicker"></div>
93    <p>&nbsp;</p>
94    <p>{'Name'|translate} : <input type="text" size="18" name="typetag_name"></p>
95    <p>{'Color'|translate} : <input type="text" id="hexval" name="typetag_color" size="7" maxlength="7" value="#444444"></p>
96    <p>
97      <span class="error"></span> <span class="info"></span><br>
98      <input class="submit" type="submit" name="addtypetag" value="{'Add'|translate}">
99    </p>
100  </fieldset>
101
102  <p>
103    <label><input type="radio" name="mode" value="global"> {'Apply the same color to all tags'|translate}</label>
104
105    <select name="tag_color-all" style="" data-mode="global">
106      <option value="-1" style="" selected>{'None'|translate}</option>
107    {foreach from=$typetags item=typetag}
108      <option value="~~{$typetag.id}~~" style="color:{$typetag.color_text};background:{$typetag.color};">{$typetag.name} ({$typetag.color})</option>
109    {/foreach}
110    </select>
111  </p>
112
113  <p>
114    <label><input type="radio" name="mode" value="unit" checked> {'Set a different color for each tag'|translate}</label>
115
116    <table class="table2" style="margin:0;">
117      <tr class="throw">
118        <th>{'Tag'|translate}</th>
119        <th>{'New color'|translate}</th>
120      </tr>
121    {foreach from=$tags item=tag}
122      <tr>
123        <td>{$tag.name}</td>
124        <td>
125          <select name="tag_color-{$tag.id}" style="color:{$tag.color_text};background:{$tag.color};" data-mode="unit">
126            <option value="-1" style="">{'None'|translate}</option>
127          {foreach from=$typetags item=typetag}
128            <option value="~~{$typetag.id}~~" style="color:{$typetag.color_text};background:{$typetag.color};" {if $tag.id_typetags==$typetag.id}selected{/if}>{$typetag.name} ({$typetag.color})</option>
129          {/foreach}
130          </select>
131        </td>
132      </tr>
133    {/foreach}
134    </table>
135  </p>
136
137  <p>
138    <input type="submit" name="typetags_submit" value="{'Submit'|translate}">
139    <input type="submit" name="typetags_cancel" value="{'Cancel'|translate}">
140  </p>
141</fieldset>
142{/if}
Note: See TracBrowser for help on using the repository browser.