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

Last change on this file since 26923 was 26068, checked in by mistic100, 10 years ago

compatibility with contactform and guestbook
File size: 10.7 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>{'Activate on'|translate}</b>
122      <select name="activate_on[]" multiple>
123        <option value="picture" {if $easycaptcha.activate_on.picture}selected{/if}>{'Picture comments'|translate}</option>
124        {if $loaded.category}<option value="category" {if $easycaptcha.activate_on.category}selected{/if}>{'Album comments'|translate}</option>{/if}
125        <option value="register" {if $easycaptcha.activate_on.register}selected{/if}>{'Register form'|translate}</option>
126        {if $loaded.contactform}<option value="contactform" {if $easycaptcha.activate_on.contactform}selected{/if}>{'Contact form'|translate}</option>{/if}
127        {if $loaded.guestbook}<option value="guestbook" {if $easycaptcha.activate_on.guestbook}selected{/if}>{'Guestbook'|translate}</option>{/if}
128      </select>
129    </li>
130    <li>
131      <b>{'Comments action'|translate}</b>
132      <label><input type="radio" name="comments_action" value="reject" {if $easycaptcha.comments_action == 'reject'}checked="checked"{/if}> {'Reject'|translate}</label>
133      <label><input type="radio" name="comments_action" value="moderate" {if $easycaptcha.comments_action == 'moderate'}checked="checked"{/if}> {'Moderate'|translate}</label>
134    </li>
135    <li>
136      <b>{'Challenge'|translate}</b>
137      <label><input type="radio" name="challenge" value="tictac" {if $easycaptcha.challenge == 'tictac'}checked="checked"{/if}> {'Tic-tac-toe minigame'|translate}</label>
138      <label><input type="radio" name="challenge" value="drag" {if $easycaptcha.challenge == 'drag'}checked="checked"{/if}> {'Image drag & drop'|translate}</label>
139      <label><input type="radio" name="challenge" value="random" {if $easycaptcha.challenge == 'random'}checked="checked"{/if}> {'Random'|translate}</label>
140    </li>
141  </ul>
142
143  <fieldset>
144    <legend>{'Tic-tac-toe options'|translate}</legend>
145
146    <ul>
147      <li>
148        <b>{'Image size'|translate}</b>
149        <input type="number" name="tictac[size]" value="{$easycaptcha.tictac.size}" min=32 max=256 class="preview-tictac">
150      </li>
151      <li>
152        <b>{'Colors'|translate}</b>
153        <table class="colors">
154          <tr>
155            <td>{'Background'|translate} 1</td>
156            <td>{'Background'|translate} 2</td>
157            <td>{'Border'|translate}</td>
158            <td>{'Marks'|translate}</td>
159            <td>{'Selection'|translate}</td>
160          </tr>
161          <tr>
162            <td><input type="color" name="tictac[bg1]" value="{$easycaptcha.tictac.bg1}" class="preview-tictac" size="7"></td>
163            <td><input type="color" name="tictac[bg2]" value="{$easycaptcha.tictac.bg2}" class="preview-tictac" size="7"></td>
164            <td><input type="color" name="tictac[bd]" value="{$easycaptcha.tictac.bd}" class="preview-tictac" size="7"></td>
165            <td><input type="color" name="tictac[obj]" value="{$easycaptcha.tictac.obj}" class="preview-tictac" size="7"></td>
166            <td><input type="color" name="tictac[sel]" value="{$easycaptcha.tictac.sel}" class="preview-tictac" size="7"></td>
167          </tr>
168        </table>
169      </li>
170      <li>
171        <b>&nbsp;</b>
172        <a class="buttonLike">{'Preview'|translate}</a>
173        <div class="preview">
174          <img id="preview-tictac" src="">
175        </div>
176      </li>
177    </ul>
178  </fieldset>
179
180  <fieldset>
181    <legend>{'Drag & drop options'|translate}</legend>
182
183    <div class="warnings my-warnings">
184      <ul><li>{'This challenge requires that JavaScript is enabled on the visitor browser. About 1% of Internet users have Javascript disabled.'|translate}</li></ul>
185    </div>
186
187    <ul>
188      <li>
189        <b>{'Theme'|translate}</b>
190        {foreach from=$THEMES key=theme item=params}
191        <a class="theme {if $easycaptcha.drag.theme == $theme}selected{/if}" title="{$theme}">
192          <div class="title"><span>{$theme|ucfirst}</span></div>
193          <div class="count"><span>({$params.count})</span></div>
194          <img src="{$EASYCAPTCHA_PATH}drag/{$theme}/{$params.image}">
195        </a>
196        {/foreach}
197        <input type="hidden" name="drag[theme]" value="{$easycaptcha.drag.theme}" class="preview-drag">
198      </li>
199      <li>
200        <b>{'Image size'|translate}</b>
201        <label><input type="number" name="drag[size]" value="{$easycaptcha.drag.size}" min=24 max=128 class="preview-drag"></label>
202      </li>
203      <li>
204        <b>{'Number of images'|translate}</b>
205        <label><input type="number" name="drag[nb]" value="{$easycaptcha.drag.nb}" min=3 max=10 class="preview-drag"></label>
206      </li>
207      <li>
208        <b>{'Colors'|translate}</b>
209        <table class="colors">
210          <tr>
211            <td>{'Background'|translate} 1</td>
212            <td>{'Background'|translate} 2</td>
213            <td>{'Image'|translate}</td>
214            <td>{'Image border'|translate}</td>
215            <td>{'Drop'|translate}</td>
216            <td>{'Drop border'|translate}</td>
217            <td>{'Text'|translate}</td>
218          </tr>
219          <tr>
220            <td><input type="color" name="drag[bg1]" value="{$easycaptcha.drag.bg1}" class="preview-drag" size="7"></td>
221            <td><input type="color" name="drag[bg2]" value="{$easycaptcha.drag.bg2}" class="preview-drag" size="7"></td>
222            <td><input type="color" name="drag[obj]" value="{$easycaptcha.drag.obj}" class="preview-drag" size="7"></td>
223            <td><input type="color" name="drag[bd1]" value="{$easycaptcha.drag.bd1}" class="preview-drag" size="7"></td>
224            <td><input type="color" name="drag[sel]" value="{$easycaptcha.drag.sel}" class="preview-drag" size="7"></td>
225            <td><input type="color" name="drag[bd2]" value="{$easycaptcha.drag.bd2}" class="preview-drag" size="7"></td>
226            <td><input type="color" name="drag[txt]" value="{$easycaptcha.drag.txt}" class="preview-drag" size="7"></td>
227          </tr>
228        </table>
229      </li>
230      <li>
231        <b>&nbsp;</b>
232        <a class="buttonLike">{'Preview'|translate}</a>
233        <div class="preview">
234          {$easycaptcha.challenge = 'drag'}
235          {include file=$EASYCAPTCHA_ABS_PATH|cat:'template/common.inc.tpl' EASYCAPTCHA=$easycaptcha}
236          {$smarty.capture.easycaptcha}
237        </div>
238      </li>
239    </ul>
240  </fieldset>
241</fieldset>
242
243<p class="formButtons"><input class="submit" type="submit" value="{'Submit'|translate}" name="submit"></p>
244</form>
245
246<div style="text-align:right;">
247  Icons
248    [<a href="https://www.iconfinder.com/iconsets/cutecritters" class="externalLink">#1</a>]
249    [<a href="https://www.iconfinder.com/iconsets/crystalproject" class="externalLink">#2</a>]
250    [<a href="https://www.iconfinder.com/iconsets/UrbanStories-png-Artdesigner-lv" class="externalLink">#3</a>]
251    [<a href="https://www.iconfinder.com/iconsets/ie_Bright" class="externalLink">#4</a>]
252  | Libraries
253    [<a href="http://bgrins.github.io/spectrum" class="externalLink">Spectrum.js</a>]
254    [<a href="http://threedubmedia.com" class="externalLink">jQuery.events</a>]
255</div>
256
257
258{* <!-- weird thing to update bunch of CSS --> *}
259{html_head}
260<style id="drag_style"></style>
261<script type="text/template" id="drag_style_src">
262{$DRAG_CSS}
263</script>
264{/html_head}
Note: See TracBrowser for help on using the repository browser.