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

Last change on this file since 29531 was 28345, checked in by mistic100, 10 years ago

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