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> </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} |
---|