source: extensions/EasyCaptcha/template/admin.tpl @ 30946

Last change on this file since 30946 was 29633, checked in by mistic100, 10 years ago

use selectize
File size: 11.0 KB
Line 
1{combine_css path=$EASYCAPTCHA_PATH|cat:'template/style.css'}
2
3{combine_css id='jquery.selectize' path="themes/default/js/plugins/selectize.{$themeconf.colorscheme}.css"}
4{combine_script id='jquery.selectize' load='footer' path='themes/default/js/plugins/selectize.min.js'}
5
6{combine_css path=$EASYCAPTCHA_PATH|cat:'template/bgrins-spectrum/spectrum.css'}
7{combine_script id='jquery.spectrum' load='footer' path=$EASYCAPTCHA_PATH|cat:'template/bgrins-spectrum/spectrum.js'}
8
9{assign var="spectrum_language" value=$EASYCAPTCHA_PATH|cat:'template/bgrins-spectrum/i18n/jquery.spectrum-'|cat:$lang_info.code|cat:'.js'}
10{if 'PHPWG_ROOT_PATH'|constant|cat:$spectrum_language|file_exists}
11{combine_script id='jquery.spectrum.'|cat:$lang_info.code load='footer' require='jquery.spectrum' path=$spectrum_language}
12{/if}
13
14
15{footer_script}
16// multiselect
17$('[name="activate_on[]"]').selectize({
18  plugins: ['remove_button']
19});
20
21// Spectrum settings
22$.extend($.fn.spectrum.defaults, {
23    showInput: true,
24    showPalette: true,
25    localStorageKey: "spectrum.easycaptcha",
26    showInitial: true,
27    preferredFormat: "hex6",
28});
29
30// Tic-tac-toe preview
31$('.preview-tictac').on('change', function() {
32    var inputs = ['size','bg1','bg2','bd','obj','sel'],
33        url = '{$EASYCAPTCHA_PATH}tictac/gen_admin.php?t='+ new Date().getTime();
34
35    for (var i=0; i<inputs.length; i++) {
36        url+= '&'+ inputs[i] +'='+ encodeURIComponent($('input[name="tictac['+ inputs[i] +']"]').val());
37    }
38
39    $('#preview-tictac').attr('src', url);
40});
41$('.preview-tictac').eq(0).trigger('change');
42
43// Drag & drop preview
44var themes = {
45{foreach from=$THEMES key=theme item=params}
46  '{$theme}': '{$EASYCAPTCHA_PATH}drag/{$theme}/{$params.image}',
47{/foreach}
48};
49
50$('.preview-drag').on('change', function() {
51    // style
52    var inputs = ['size','nb','bg1','bg2','obj','sel','bd1','bd2','txt'],
53        style = $('#drag_style_src').text(),
54        search, replace;
55
56    for (var i=0; i<inputs.length; i++) {
57        search = '{ldelim}\\$EASYCAPTCHA.drag\\.'+ inputs[i] +'}';
58        replace = $('input[name="drag['+ inputs[i] +']"]').val();
59        style = style.replace(new RegExp(search, 'g'), replace);
60    }
61
62    var x = parseInt($('input[name="drag[size]"]').val()),
63        y = parseInt($('input[name="drag[nb]"]').val());
64
65    search = '{ldelim}math equation=\'15+(x+5)*y\' x=$EASYCAPTCHA.drag.size y=$EASYCAPTCHA.drag.nb}',
66    replace = 15+(x+5)*y;
67    style = style.replace(search, replace);
68
69    $('#drag_style').text(style);
70
71    // content
72    $('#easycaptcha .drag_item').remove();
73    var html = '',
74        image = themes[$('input[name="drag[theme]"]').val()];
75    for (var i=0; i<y; i++) {
76        html+=
77        '<div class="drag_item" style="left:'+ (10+(x+5)*i) +'px;">'+
78          '<img src="'+ image +'">'+
79        '</div>';
80    }
81    $('#easycaptcha').prepend(html);
82});
83$('#drag_style').appendTo('head'); // move to last position to have priority
84$('.preview-drag').eq(0).trigger('change');
85
86$('#easycaptcha .drop_zone').on({
87    'mouseenter': function() { $(this).addClass('valid'); },
88    'mouseleave': function() { $(this).removeClass('valid'); },
89});
90
91// Drag & drop theme
92$('.theme').on('click', function() {
93  $('.theme').removeClass('selected');
94  $(this).addClass('selected');
95  $('input[name="drag[theme]"]').val($(this).attr('title')).trigger('change');
96});
97$('.theme .title span').css('background-color', $('#content').css('background-color'));
98$('.theme .count span').css('background-color', $('#content').css('background-color'));
99
100// show previews
101$('.preview').prevAll('a').on('click', function() {
102    $(this).hide();
103    $(this).nextAll('.preview').slideDown();
104});
105{/footer_script}
106
107
108<div class="titrePage">
109  <h2>Easy Captcha</h2>
110</div>
111
112<form method="post" action="" class="properties">
113<fieldset>
114  <legend>{'Configuration'|translate}</legend>
115
116  <ul>
117    <li>
118      <b><label for="guest_only">{'Only for unauthenticated users'|translate}</label></b>
119      <input type="checkbox" name="guest_only" id="guest_only" {if $easycaptcha.guest_only}checked{/if}>
120    </li>
121    <li>
122      <b>{'Activate on'|translate}</b>
123      <select name="activate_on[]" multiple placeholder="{'Nowhere'|translate}">
124        <option value="picture" {if $easycaptcha.activate_on.picture}selected{/if}>{'Picture comments'|translate}</option>
125        {if $loaded.category}<option value="category" {if $easycaptcha.activate_on.category}selected{/if}>{'Album comments'|translate}</option>{/if}
126        <option value="register" {if $easycaptcha.activate_on.register}selected{/if}>{'Register form'|translate}</option>
127        {if $loaded.contactform}<option value="contactform" {if $easycaptcha.activate_on.contactform}selected{/if}>{'Contact form'|translate}</option>{/if}
128        {if $loaded.guestbook}<option value="guestbook" {if $easycaptcha.activate_on.guestbook}selected{/if}>{'Guestbook'|translate}</option>{/if}
129      </select>
130    </li>
131    <li>
132      <b>{'Comments action'|translate}</b>
133      <label><input type="radio" name="comments_action" value="reject" {if $easycaptcha.comments_action == 'reject'}checked="checked"{/if}> {'Reject'|translate}</label>
134      <label><input type="radio" name="comments_action" value="moderate" {if $easycaptcha.comments_action == 'moderate'}checked="checked"{/if}> {'Moderate'|translate}</label>
135    </li>
136    <li>
137      <b>{'Challenge'|translate}</b>
138      <label><input type="radio" name="challenge" value="tictac" {if $easycaptcha.challenge == 'tictac'}checked="checked"{/if}> {'Tic-tac-toe minigame'|translate}</label>
139      <label><input type="radio" name="challenge" value="drag" {if $easycaptcha.challenge == 'drag'}checked="checked"{/if}> {'Image drag & drop'|translate}</label>
140      <label><input type="radio" name="challenge" value="random" {if $easycaptcha.challenge == 'random'}checked="checked"{/if}> {'Random'|translate}</label>
141    </li>
142  </ul>
143
144  <fieldset>
145    <legend>{'Tic-tac-toe options'|translate}</legend>
146
147    <ul>
148      <li>
149        <b>{'Image size'|translate}</b>
150        <input type="number" name="tictac[size]" value="{$easycaptcha.tictac.size}" min=32 max=256 class="preview-tictac">
151      </li>
152      <li>
153        <b>{'Colors'|translate}</b>
154        <table class="colors">
155          <tr>
156            <td>{'Background'|translate} 1</td>
157            <td>{'Background'|translate} 2</td>
158            <td>{'Border'|translate}</td>
159            <td>{'Marks'|translate}</td>
160            <td>{'Selection'|translate}</td>
161          </tr>
162          <tr>
163            <td><input type="color" name="tictac[bg1]" value="{$easycaptcha.tictac.bg1}" class="preview-tictac" size="7"></td>
164            <td><input type="color" name="tictac[bg2]" value="{$easycaptcha.tictac.bg2}" class="preview-tictac" size="7"></td>
165            <td><input type="color" name="tictac[bd]" value="{$easycaptcha.tictac.bd}" class="preview-tictac" size="7"></td>
166            <td><input type="color" name="tictac[obj]" value="{$easycaptcha.tictac.obj}" class="preview-tictac" size="7"></td>
167            <td><input type="color" name="tictac[sel]" value="{$easycaptcha.tictac.sel}" class="preview-tictac" size="7"></td>
168          </tr>
169        </table>
170      </li>
171      <li>
172        <b>&nbsp;</b>
173        <a class="buttonLike">{'Preview'|translate}</a>
174        <div class="preview">
175          <img id="preview-tictac" src="">
176        </div>
177      </li>
178    </ul>
179  </fieldset>
180
181  <fieldset>
182    <legend>{'Drag & drop options'|translate}</legend>
183
184    <div class="warnings my-warnings">
185      <ul><li>{'This challenge requires that JavaScript is enabled on the visitor browser. About 1% of Internet users have Javascript disabled.'|translate}</li></ul>
186    </div>
187
188    <ul>
189      <li>
190        <b>{'Theme'|translate}</b>
191        {foreach from=$THEMES key=theme item=params}
192        <a class="theme {if $easycaptcha.drag.theme == $theme}selected{/if}" title="{$theme}">
193          <div class="title"><span>{$theme|ucfirst}</span></div>
194          <div class="count"><span>({$params.count})</span></div>
195          <img src="{$EASYCAPTCHA_PATH}drag/{$theme}/{$params.image}">
196        </a>
197        {/foreach}
198        <input type="hidden" name="drag[theme]" value="{$easycaptcha.drag.theme}" class="preview-drag">
199      </li>
200      <li>
201        <b>{'Image size'|translate}</b>
202        <label><input type="number" name="drag[size]" value="{$easycaptcha.drag.size}" min=24 max=128 class="preview-drag"></label>
203      </li>
204      <li>
205        <b>{'Number of images'|translate}</b>
206        <label><input type="number" name="drag[nb]" value="{$easycaptcha.drag.nb}" min=3 max=10 class="preview-drag"></label>
207      </li>
208      <li>
209        <b>{'Colors'|translate}</b>
210        <table class="colors">
211          <tr>
212            <td>{'Background'|translate} 1</td>
213            <td>{'Background'|translate} 2</td>
214            <td>{'Image'|translate}</td>
215            <td>{'Image border'|translate}</td>
216            <td>{'Drop'|translate}</td>
217            <td>{'Drop border'|translate}</td>
218            <td>{'Text'|translate}</td>
219          </tr>
220          <tr>
221            <td><input type="color" name="drag[bg1]" value="{$easycaptcha.drag.bg1}" class="preview-drag" size="7"></td>
222            <td><input type="color" name="drag[bg2]" value="{$easycaptcha.drag.bg2}" class="preview-drag" size="7"></td>
223            <td><input type="color" name="drag[obj]" value="{$easycaptcha.drag.obj}" class="preview-drag" size="7"></td>
224            <td><input type="color" name="drag[bd1]" value="{$easycaptcha.drag.bd1}" class="preview-drag" size="7"></td>
225            <td><input type="color" name="drag[sel]" value="{$easycaptcha.drag.sel}" class="preview-drag" size="7"></td>
226            <td><input type="color" name="drag[bd2]" value="{$easycaptcha.drag.bd2}" class="preview-drag" size="7"></td>
227            <td><input type="color" name="drag[txt]" value="{$easycaptcha.drag.txt}" class="preview-drag" size="7"></td>
228          </tr>
229        </table>
230      </li>
231      <li>
232        <b>&nbsp;</b>
233        <a class="buttonLike">{'Preview'|translate}</a>
234        <div class="preview">
235          {$easycaptcha.challenge = 'drag'}
236          {include file=$EASYCAPTCHA_ABS_PATH|cat:'template/common.inc.tpl' EASYCAPTCHA=$easycaptcha}
237          {$smarty.capture.easycaptcha}
238        </div>
239      </li>
240    </ul>
241  </fieldset>
242</fieldset>
243
244<p class="formButtons"><input class="submit" type="submit" value="{'Submit'|translate}" name="submit"></p>
245</form>
246
247<div style="text-align:right;">
248  Icons
249    [<a href="https://www.iconfinder.com/iconsets/cutecritters" class="externalLink">#1</a>]
250    [<a href="https://www.iconfinder.com/iconsets/crystalproject" class="externalLink">#2</a>]
251    [<a href="https://www.iconfinder.com/iconsets/UrbanStories-png-Artdesigner-lv" class="externalLink">#3</a>]
252    [<a href="https://www.iconfinder.com/iconsets/ie_Bright" class="externalLink">#4</a>]
253  | Libraries
254    [<a href="http://bgrins.github.io/spectrum" class="externalLink">Spectrum.js</a>]
255    [<a href="http://threedubmedia.com" class="externalLink">jQuery.events</a>]
256</div>
257
258
259{* <!-- weird thing to update bunch of CSS --> *}
260{html_head}
261<style id="drag_style"></style>
262<script type="text/template" id="drag_style_src">
263{$DRAG_CSS}
264</script>
265{/html_head}
Note: See TracBrowser for help on using the repository browser.