Changeset 26554 for extensions/CryptograPHP/template
- Timestamp:
- Jan 9, 2014, 1:36:32 PM (10 years ago)
- Location:
- extensions/CryptograPHP/template
- Files:
-
- 1 added
- 2 edited
Legend:
- Unmodified
- Added
- Removed
-
extensions/CryptograPHP/template/admin.tpl
r26041 r26554 9 9 10 10 {footer_script} 11 var time = 0; 12 11 13 // colorpicker 12 14 $('.colorpicker-input') … … 17 19 }, 18 20 onChange: function(hsb, hex, rgb, el) { 19 $(el).val(hex) ;21 $(el).val(hex).trigger('change'); 20 22 changeColor(el, hex); 21 changePreview();22 setThemeCutom();23 23 }, 24 24 onBeforeShow: function () { … … 33 33 changeColor(this, $(this).val()); 34 34 }); 35 36 37 $('.button').click(function() { 38 $(this).siblings('.button').removeClass('selected'); 39 $(this).addClass('selected'); 40 $('input[name='+ $(this).data('input') +']').val($(this).data('val')).trigger('change'); 41 }); 35 42 36 43 // change button 37 $('.button').click(function() { 38 $('.button').removeClass('selected'); 39 $(this).addClass('selected'); 40 $('input[name=button_color]').val($(this).attr('title')); 41 $('#reload').attr('src', '{$CRYPTO_PATH}template/refresh_'+ $(this).attr('title') +'.png'); 44 $('input[name=button_color]').change(function() { 45 $('#reload').attr('src', '{$CRYPTO_PATH}template/refresh_'+ $(this).val() +'.png'); 42 46 }); 43 47 44 48 // apply a preset 45 $('.preset').click(function() { 46 $('.preset').removeClass('selected'); 47 $(this).addClass('selected'); 48 49 var id = $(this).attr("title"); 49 $('input[name=theme]').change(function() { 50 var id = $(this).val(); 50 51 51 52 for (key in presets[id]) { 52 $('input[name="'+ key +'"]').val([presets[id][key]]); 53 if ($('input[name="'+ key +'"]').attr('type') == 'radio') { 54 $('input[name="'+ key +'"][value="'+ presets[id][key] +'"]').prop('checked', true).trigger('change', false); 55 } 56 else { 57 $('input[name="'+ key +'"]').val(presets[id][key]).trigger('change', false); 58 } 53 59 } 54 60 … … 56 62 changeColor(this, $(this).val()); 57 63 }); 58 $('input[name="theme"]').val($(this).attr('title')); 64 59 65 changePreview(); 66 }); 67 68 // toggle background type 69 $('input[name=background]').change(function() { 70 $('li[id^=background]').hide().filter('#background-'+$(this).val()).show(); 60 71 }); 61 72 … … 66 77 67 78 // change theme to 'custom' if a parameter is changed 68 $('input.istheme').change(function( ) {69 setThemeCutom();79 $('input.istheme').change(function(e, p) { 80 if (p!==false) setThemeCustom(); 70 81 }); 71 82 72 83 // update the preview 73 $('input. istheme, input.preview').change(function() {74 changePreview();84 $('input.preview').change(function(e, p) { 85 if (p!==false) changePreview(); 75 86 }); 76 87 $('#reload').click(function() { … … 80 91 // links for random color 81 92 $('a.random').click(function() { 82 $(this).prev('label').children('input').val('random') ;93 $(this).prev('label').children('input').val('random').trigger('change'); 83 94 changeColor($(this).prev('label').children('input'), 'random'); 84 changePreview();85 setThemeCutom();86 95 }); 87 96 … … 93 102 }); 94 103 95 function setThemeCu tom() {96 $('. preset').removeClass('selected');104 function setThemeCustom() { 105 $('.button[data-input=theme]').removeClass('selected'); 97 106 $('input[name=theme]').val('custom'); 98 107 } 99 108 100 109 function changePreview() { 110 var now = (new Date()).getTime(); 111 112 if (now-time < 1000) { 113 return; 114 } 115 time = now; 116 101 117 options = new Array(); 102 118 str = ''; 103 119 104 $('input [type="text"], input[type="radio"]:checked').each(function() {120 $('input.preview:not([type=radio]), input[type=radio].preview:checked').each(function() { 105 121 options[$(this).attr('name')] = $(this).val(); 106 122 }); … … 113 129 114 130 function changeColor(target, color) { 115 if (color == 'random') color = '808080'; 131 if (color == 'random') { 132 color = '808080'; 133 } 116 134 if (parseInt(color, 16) > 16777215/2) { 117 135 $(target).css('color', '#222'); … … 136 154 137 155 {html_style} 138 {foreach from=$fonts item= font}156 {foreach from=$fonts item=path key=font} 139 157 @font-face { 140 158 font-family: '{$font}'; 141 src: url({$ CRYPTO_PATH}securimage/fonts/{$font}.ttf) format("truetype");159 src: url({$path}) format("truetype"); 142 160 } 143 161 {/foreach} … … 193 211 <li> 194 212 <b>{'Button color'|translate}</b> 195 <a class="button {if $crypto.button_color == 'dark'}selected{/if}" title="dark"><img src="{$CRYPTO_PATH}template/refresh_dark.png" alt="dark"></a>196 <a class="button {if $crypto.button_color == 'light'}selected{/if}" title="light"><img src="{$CRYPTO_PATH}template/refresh_light.png" alt="light"></a>213 <a class="button {if $crypto.button_color == 'dark'}selected{/if}" data-val="dark" data-input="button_color"><img src="{$CRYPTO_PATH}template/refresh_dark.png" alt="dark"></a> 214 <a class="button {if $crypto.button_color == 'light'}selected{/if}" data-val="light" data-input="button_color"><img src="{$CRYPTO_PATH}template/refresh_light.png" alt="light"></a> 197 215 <input type="hidden" name="button_color" value="{$crypto.button_color}"> 198 216 </li> 199 217 <li> 200 218 <b>{'Captcha theme'|translate}</b> 201 202 <a class=" preset {if $crypto.theme == $preset}selected{/if}" title="{$preset}"><img src="{$CRYPTO_PATH}template/presets/{$preset}.png" alt="{$preset}"></a>203 219 {foreach from=$PRESETS key=preset item=params} 220 <a class="button {if $crypto.theme == $preset}selected{/if}" data-val="{$preset}" data-input="theme"><img src="{$CRYPTO_PATH}template/presets/{$preset}.png" alt="{$preset}"></a> 221 {/foreach} 204 222 <input type="hidden" name="theme" value="{$crypto.theme}"> 205 223 <a class="customize">{'Customize'|translate}</a> … … 213 231 <li> 214 232 <b>{'Perturbation'|translate}</b> 215 <label><input type="text" name="perturbation" value="{$crypto.perturbation}" class="istheme" size="6" maxlength="4"> {'range:'|translate} 0 - 1</label> 216 </li> 217 <li> 233 <label><input type="text" name="perturbation" value="{$crypto.perturbation}" class="istheme preview" size="6" maxlength="4"> {'range:'|translate} 0 - 1</label> 234 </li> 235 <li> 236 <b>{'Background'|translate}</b> 237 <label><input type="radio" name="background" class="istheme preview" value="color" {if $crypto.background == 'color'}checked="checked"{/if}> {'Color'|translate}</label> 238 <label><input type="radio" name="background" class="istheme preview" value="image" {if $crypto.background == 'image'}checked="checked"{/if}> {'Image'|translate}</label> 239 </li> 240 <li id="background-color" {if $crypto.background != 'color'}style="display:none;"{/if}> 218 241 <b>{'Background color'|translate}</b> 219 <label><input type="text" name=" image_bg_color" value="{$crypto.image_bg_color}" class="colorpicker-input istheme" size="6" maxlength="6"></label>242 <label><input type="text" name="bg_color" value="{$crypto.bg_color}" class="colorpicker-input istheme preview" size="6" maxlength="6"></label> 220 243 <a class="random" title="{'random'|translate}"><img src="{$CRYPTO_PATH}/template/arrow_switch.png"></a> 221 244 </li> 245 <li id="background-image" {if $crypto.background != 'image'}style="display:none;"{/if}> 246 <b>{'Background image'|translate}</b> 247 {foreach from=$backgrounds item=path key=background} 248 <a class="button {if $crypto.bg_image == $background}selected{/if}" data-val="{$background}" data-input="bg_image"><img src="{$path}" alt="{$background}" style="width:120px;height:40px;"></a> 249 {/foreach} 250 <!-- <a class="button {if $crypto.bg_image == 'random'}selected{/if}" title="{'random'|translate}" data-val="random" data-input="bg_image"><img src="{$CRYPTO_PATH}/template/arrow_switch.png"></a> --> 251 <input type="hidden" name="bg_image" value="{$crypto.bg_image}" class="istheme preview"> 252 </li> 222 253 <li> 223 254 <b>{'Text color'|translate}</b> 224 <label><input type="text" name="text_color" value="{$crypto.text_color}" class="colorpicker-input istheme " size="6" maxlength="6"></label>255 <label><input type="text" name="text_color" value="{$crypto.text_color}" class="colorpicker-input istheme preview" size="6" maxlength="6"></label> 225 256 <a class="random" title="{'random'|translate}"><img src="{$CRYPTO_PATH}/template/arrow_switch.png"></a> 226 257 </li> 227 258 <li> 228 259 <b>{'Lines density'|translate}</b> 229 <label><input type="text" name="num_lines" value="{$crypto.num_lines}" class="istheme " size="6" maxlength="4"> {'range:'|translate} 0 - 10</label>260 <label><input type="text" name="num_lines" value="{$crypto.num_lines}" class="istheme preview" size="6" maxlength="4"> {'range:'|translate} 0 - 10</label> 230 261 </li> 231 262 <li> 232 263 <b>{'Lines color'|translate}</b> 233 <label><input type="text" name="line_color" value="{$crypto.line_color}" class="colorpicker-input istheme " size="6" maxlength="6"></label>264 <label><input type="text" name="line_color" value="{$crypto.line_color}" class="colorpicker-input istheme preview" size="6" maxlength="6"></label> 234 265 <a class="random" title="{'random'|translate}"><img src="{$CRYPTO_PATH}/template/arrow_switch.png"></a> 235 266 </li> 236 267 <li> 237 268 <b>{'Noise level'|translate}</b> 238 <label><input type="text" name="noise_level" value="{$crypto.noise_level}" class="istheme " size="6" maxlength="4"> {'range:'|translate} 0 - 10</label>269 <label><input type="text" name="noise_level" value="{$crypto.noise_level}" class="istheme preview" size="6" maxlength="4"> {'range:'|translate} 0 - 10</label> 239 270 </li> 240 271 <li> 241 272 <b>{'Noise color'|translate}</b> 242 <label><input type="text" name="noise_color" value="{$crypto.noise_color}" class="colorpicker-input istheme " size="6" maxlength="6"></label>273 <label><input type="text" name="noise_color" value="{$crypto.noise_color}" class="colorpicker-input istheme preview" size="6" maxlength="6"></label> 243 274 <a class="random" title="{'random'|translate}"><img src="{$CRYPTO_PATH}/template/arrow_switch.png"></a> 244 275 </li> 245 276 <li> 246 277 <b>{'Font'|translate}</b> 247 {foreach from=$fonts item=font}248 <label style="font-family:{$font};" title="{$font}"><input type="radio" name="ttf_file" value="{$font}" {if $crypto.ttf_file == $font}checked="checked"{/if} class="istheme "> {$font}</label>249 278 {foreach from=$fonts item=path key=font} 279 <label style="font-family:{$font};" title="{$font}"><input type="radio" name="ttf_file" value="{$font}" {if $crypto.ttf_file == $font}checked="checked"{/if} class="istheme preview"> {$font}</label> 280 {/foreach} 250 281 </li> 251 282 </ul> -
extensions/CryptograPHP/template/style.css
r23209 r26554 1 . preset img, .button img {1 .button img { 2 2 margin:1px; 3 3 padding:3px; 4 4 border:1px solid #999; 5 5 } 6 . preset.selected img, .button.selected img {6 .button.selected img { 7 7 border-color:#f70; 8 8 }
Note: See TracChangeset
for help on using the changeset viewer.