[26025] | 1 | {combine_css path=$EASYCAPTCHA_PATH|cat:'template/style.css'} |
---|
[24215] | 2 | |
---|
[26025] | 3 | {combine_css path='themes/default/js/plugins/chosen.css'} |
---|
[24215] | 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'} |
---|
[26025] | 10 | {if 'PHPWG_ROOT_PATH'|constant|cat:$spectrum_language|file_exists} |
---|
[24215] | 11 | {combine_script id='jquery.spectrum.'|cat:$lang_info.code load='footer' require='jquery.spectrum' path=$spectrum_language} |
---|
| 12 | {/if} |
---|
| 13 | |
---|
| 14 | |
---|
[26025] | 15 | {footer_script} |
---|
[24215] | 16 | // multiselect |
---|
| 17 | $("select").css({ |
---|
[26025] | 18 | width: 300 |
---|
[24215] | 19 | }).chosen({ |
---|
| 20 | disable_search:true, |
---|
[26025] | 21 | placeholder_text_multiple: '{'Nowhere'|translate}' |
---|
[24215] | 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'], |
---|
[26068] | 36 | url = '{$EASYCAPTCHA_PATH}tictac/gen_admin.php?t='+ new Date().getTime(); |
---|
[24215] | 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 |
---|
[26025] | 47 | var themes = { |
---|
[24226] | 48 | {foreach from=$THEMES key=theme item=params} |
---|
[24215] | 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++) { |
---|
[26025] | 60 | search = '{ldelim}\\$EASYCAPTCHA.drag\\.'+ inputs[i] +'}'; |
---|
[24215] | 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 | |
---|
[26025] | 68 | search = '{ldelim}math equation=\'15+(x+5)*y\' x=$EASYCAPTCHA.drag.size y=$EASYCAPTCHA.drag.nb}', |
---|
[24215] | 69 | replace = 15+(x+5)*y; |
---|
[26025] | 70 | style = style.replace(search, replace); |
---|
[24215] | 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 | }); |
---|
[26025] | 108 | {/footer_script} |
---|
[24215] | 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> </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"> |
---|
[24234] | 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> |
---|
[24215] | 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> </b> |
---|
| 232 | <a class="buttonLike">{'Preview'|translate}</a> |
---|
| 233 | <div class="preview"> |
---|
[26025] | 234 | {$easycaptcha.challenge = 'drag'} |
---|
| 235 | {include file=$EASYCAPTCHA_ABS_PATH|cat:'template/common.inc.tpl' EASYCAPTCHA=$easycaptcha} |
---|
[24215] | 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 |
---|
[26025] | 253 | [<a href="http://bgrins.github.io/spectrum" class="externalLink">Spectrum.js</a>] |
---|
| 254 | [<a href="http://threedubmedia.com" class="externalLink">jQuery.events</a>] |
---|
[24215] | 255 | </div> |
---|
| 256 | |
---|
| 257 | |
---|
| 258 | {* <!-- weird thing to update bunch of CSS --> *} |
---|
[26025] | 259 | {html_head} |
---|
[24215] | 260 | <style id="drag_style"></style> |
---|
| 261 | <script type="text/template" id="drag_style_src"> |
---|
[26025] | 262 | {$DRAG_CSS} |
---|
[24215] | 263 | </script> |
---|
[26025] | 264 | {/html_head} |
---|