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

Last change on this file since 24234 was 24234, checked in by mistic100, 11 years ago

error with question_mark_in_urls=false, restore full language keys
+ de_DE for icons.lang.php
File size: 12.6 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}{literal}
16// multiselect
17$("select").css({
18    "width":"700px"
19}).chosen({
20    disable_search:true,
21});
22
23// Spectrum settings
24$.extend($.fn.spectrum.defaults, {
25    showInput: true,
26    showPalette: true,
27    localStorageKey: "spectrum.easycaptcha",
28    showInitial: true,
29    preferredFormat: "hex6",
30});
31
32// Tic-tac-toe preview
33$('.preview-tictac').on('change', function() {
34    var inputs = ['size','bg1','bg2','bd','obj','sel'],
35        url = '{/literal}{$EASYCAPTCHA_PATH}{literal}' + 'tictac/gen_admin.php?t='+ new Date().getTime();
36
37    for (var i=0; i<inputs.length; i++) {
38        url+= '&'+ inputs[i] +'='+ encodeURIComponent($('input[name="tictac['+ inputs[i] +']"]').val());
39    }
40
41    $('#preview-tictac').attr('src', url);
42});
43$('.preview-tictac').eq(0).trigger('change');
44
45// Drag & drop preview
46{/literal}
47var themes = {ldelim}
48{foreach from=$THEMES key=theme item=params}
49  '{$theme}': '{$EASYCAPTCHA_PATH}drag/{$theme}/{$params.image}',
50{/foreach}
51};
52{literal}
53
54$('.preview-drag').on('change', function() {
55    // style
56    var inputs = ['size','nb','bg1','bg2','obj','sel','bd1','bd2','txt'],
57        style = $('#drag_style_src').text(),
58        search, replace;
59
60    for (var i=0; i<inputs.length; i++) {
61        search = '{\\$EASYCAPTCHA_CONF\\.'+ inputs[i] +'}';
62        replace = $('input[name="drag['+ inputs[i] +']"]').val();
63        style = style.replace(new RegExp(search, 'g'), replace);
64    }
65
66    var x = parseInt($('input[name="drag[size]"]').val()),
67        y = parseInt($('input[name="drag[nb]"]').val());
68
69    search = '{dat_equation}',
70    replace = 15+(x+5)*y;
71    style = style.replace(new RegExp(search, 'g'), replace);
72
73    $('#drag_style').text(style);
74
75    // content
76    $('#easycaptcha .drag_item').remove();
77    var html = '',
78        image = themes[$('input[name="drag[theme]"]').val()];
79    for (var i=0; i<y; i++) {
80        html+=
81        '<div class="drag_item" style="left:'+ (10+(x+5)*i) +'px;">'+
82          '<img src="'+ image +'">'+
83        '</div>';
84    }
85    $('#easycaptcha').prepend(html);
86});
87$('#drag_style').appendTo('head'); // move to last position to have priority
88$('.preview-drag').eq(0).trigger('change');
89
90$('#easycaptcha .drop_zone').on({
91    'mouseenter': function() { $(this).addClass('valid'); },
92    'mouseleave': function() { $(this).removeClass('valid'); },
93});
94
95// Drag & drop theme
96$('.theme').on('click', function() {
97  $('.theme').removeClass('selected');
98  $(this).addClass('selected');
99  $('input[name="drag[theme]"]').val($(this).attr('title')).trigger('change');
100});
101$('.theme .title span').css('background-color', $('#content').css('background-color'));
102$('.theme .count span').css('background-color', $('#content').css('background-color'));
103
104// show previews
105$('.preview').prevAll('a').on('click', function() {
106    $(this).hide();
107    $(this).nextAll('.preview').slideDown();
108});
109{/literal}{/footer_script}
110
111
112<div class="titrePage">
113  <h2>Easy Captcha</h2>
114</div>
115
116<form method="post" action="" class="properties">
117<fieldset>
118  <legend>{'Configuration'|translate}</legend>
119
120  <ul>
121    <li>
122      <b>{'Activate on'|translate}</b>
123      <select name="activate_on[]" multiple>
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          {include file=$EASYCAPTCHA_ABS_PATH|cat:'template/common.inc.tpl' EASYCAPTCHA_CHALLENGE='drag' EASYCAPTCHA_CONF=$easycaptcha.drag}
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}{literal}
260<style id="drag_style"></style>
261<script type="text/template" id="drag_style_src">
262#easycaptcha, #easycaptcha_noscript {
263  background: {$EASYCAPTCHA_CONF.bg1};
264  background: -webkit-linear-gradient(top, {$EASYCAPTCHA_CONF.bg1} 0%, {$EASYCAPTCHA_CONF.bg2} 100%);
265  background: -moz-linear-gradient(top, {$EASYCAPTCHA_CONF.bg1} 0%, {$EASYCAPTCHA_CONF.bg2} 100%);
266  background: -ms-linear-gradient(top, {$EASYCAPTCHA_CONF.bg1} 0%, {$EASYCAPTCHA_CONF.bg2} 100%);
267  background: -o-linear-gradient(top, {$EASYCAPTCHA_CONF.bg1} 0%, {$EASYCAPTCHA_CONF.bg2} 100%);
268  background: linear-gradient(to bottom, {$EASYCAPTCHA_CONF.bg1} 0%, {$EASYCAPTCHA_CONF.bg2} 100%);
269  color:{$EASYCAPTCHA_CONF.txt};
270}
271#easycaptcha .drag_item {
272  width:{$EASYCAPTCHA_CONF.size}px;
273  height:{$EASYCAPTCHA_CONF.size}px;
274  border:1px solid {$EASYCAPTCHA_CONF.bd1};
275  background:{$EASYCAPTCHA_CONF.obj};
276}
277#easycaptcha .drag_item img {
278  width:{$EASYCAPTCHA_CONF.size}px;
279  height:{$EASYCAPTCHA_CONF.size}px;
280}
281#easycaptcha .drop_zone {
282  width:{$EASYCAPTCHA_CONF.size}px;
283  height:{$EASYCAPTCHA_CONF.size}px;
284  margin-left:{dat_equation}px;
285  line-height:{$EASYCAPTCHA_CONF.size}px;
286  background: {$EASYCAPTCHA_CONF.bg1};
287  background: -webkit-linear-gradient(bottom, {$EASYCAPTCHA_CONF.bg1} 0%, {$EASYCAPTCHA_CONF.bg2} 100%);
288  background: -moz-linear-gradient(bottom, {$EASYCAPTCHA_CONF.bg1} 0%, {$EASYCAPTCHA_CONF.bg2} 100%);
289  background: -ms-linear-gradient(bottom, {$EASYCAPTCHA_CONF.bg1} 0%, {$EASYCAPTCHA_CONF.bg2} 100%);
290  background: -o-linear-gradient(bottom, {$EASYCAPTCHA_CONF.bg1} 0%, {$EASYCAPTCHA_CONF.bg2} 100%);
291  background: linear-gradient(to top, {$EASYCAPTCHA_CONF.bg1} 0%, {$EASYCAPTCHA_CONF.bg2} 100%);
292  border:1px dotted {$EASYCAPTCHA_CONF.bd2};
293  color:{$EASYCAPTCHA_CONF.txt};
294}
295#easycaptcha .drop_zone.active {
296  background:{$EASYCAPTCHA_CONF.sel};
297}
298#easycaptcha .drop_zone.valid {
299  background:{$EASYCAPTCHA_CONF.sel};
300  box-shadow:0 0 0 2px {$EASYCAPTCHA_CONF.sel};
301}
302</script>
303{/literal}{/html_head}
Note: See TracBrowser for help on using the repository browser.