Ignore:
Timestamp:
01/09/14 13:36:32 (6 years ago)
Author:
mistic100
Message:

update Securimage to 3.5.1, new font, new preset, allow to use backgrounds

File:
1 edited

Legend:

Unmodified
Added
Removed
  • extensions/CryptograPHP/template/admin.tpl

    r26041 r26554  
    99 
    1010{footer_script} 
     11var time = 0; 
     12 
    1113// colorpicker 
    1214$('.colorpicker-input') 
     
    1719    }, 
    1820    onChange: function(hsb, hex, rgb, el) {  
    19       $(el).val(hex);  
     21      $(el).val(hex).trigger('change'); 
    2022      changeColor(el, hex); 
    21       changePreview(); 
    22       setThemeCutom(); 
    2323    }, 
    2424    onBeforeShow: function () {  
     
    3333    changeColor(this, $(this).val()); 
    3434  }); 
     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}); 
    3542 
    3643// 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'); 
    4246}); 
    4347 
    4448// 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(); 
    5051   
    5152  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    } 
    5359  } 
    5460   
     
    5662    changeColor(this, $(this).val()); 
    5763  }); 
    58   $('input[name="theme"]').val($(this).attr('title')); 
     64 
    5965  changePreview(); 
     66}); 
     67 
     68// toggle background type 
     69$('input[name=background]').change(function() { 
     70  $('li[id^=background]').hide().filter('#background-'+$(this).val()).show(); 
    6071}); 
    6172 
     
    6677 
    6778// 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(); 
    7081}); 
    7182 
    7283// update the preview 
    73 $('input.istheme, input.preview').change(function() { 
    74   changePreview(); 
     84$('input.preview').change(function(e, p) { 
     85  if (p!==false) changePreview(); 
    7586}); 
    7687$('#reload').click(function() { 
     
    8091// links for random color 
    8192$('a.random').click(function() { 
    82   $(this).prev('label').children('input').val('random'); 
     93  $(this).prev('label').children('input').val('random').trigger('change'); 
    8394  changeColor($(this).prev('label').children('input'), 'random'); 
    84   changePreview(); 
    85   setThemeCutom(); 
    8695}); 
    8796 
     
    93102}); 
    94103 
    95 function setThemeCutom() { 
    96   $('.preset').removeClass('selected'); 
     104function setThemeCustom() { 
     105  $('.button[data-input=theme]').removeClass('selected'); 
    97106  $('input[name=theme]').val('custom'); 
    98107} 
    99108 
    100109function changePreview() { 
     110  var now = (new Date()).getTime(); 
     111 
     112  if (now-time < 1000) { 
     113    return; 
     114  } 
     115  time = now; 
     116   
    101117  options = new Array(); 
    102118  str = ''; 
    103119   
    104   $('input[type="text"], input[type="radio"]:checked').each(function() { 
     120  $('input.preview:not([type=radio]), input[type=radio].preview:checked').each(function() { 
    105121    options[$(this).attr('name')] = $(this).val(); 
    106122  }); 
     
    113129 
    114130function changeColor(target, color) { 
    115   if (color == 'random') color = '808080'; 
     131  if (color == 'random') { 
     132    color = '808080'; 
     133  } 
    116134  if (parseInt(color, 16) > 16777215/2) { 
    117135    $(target).css('color', '#222'); 
     
    136154 
    137155{html_style} 
    138 {foreach from=$fonts item=font} 
     156{foreach from=$fonts item=path key=font} 
    139157@font-face {   
    140158  font-family: '{$font}';   
    141   src: url({$CRYPTO_PATH}securimage/fonts/{$font}.ttf) format("truetype");   
     159  src: url({$path}) format("truetype");   
    142160} 
    143161{/foreach} 
     
    193211    <li> 
    194212      <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> 
    197215      <input type="hidden" name="button_color" value="{$crypto.button_color}"> 
    198216    </li> 
    199217    <li> 
    200218      <b>{'Captcha theme'|translate}</b> 
    201       {foreach from=$PRESETS key=preset item=params} 
    202       <a class="preset {if $crypto.theme == $preset}selected{/if}" title="{$preset}"><img src="{$CRYPTO_PATH}template/presets/{$preset}.png" alt="{$preset}"></a> 
    203       {/foreach} 
     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} 
    204222      <input type="hidden" name="theme" value="{$crypto.theme}"> 
    205223      <a class="customize">{'Customize'|translate}</a> 
     
    213231      <li> 
    214232        <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}> 
    218241        <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>  
    220243        <a class="random" title="{'random'|translate}"><img src="{$CRYPTO_PATH}/template/arrow_switch.png"></a> 
    221244      </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> 
    222253      <li> 
    223254        <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>  
    225256        <a class="random" title="{'random'|translate}"><img src="{$CRYPTO_PATH}/template/arrow_switch.png"></a> 
    226257      </li> 
    227258      <li> 
    228259        <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> 
    230261      </li> 
    231262      <li> 
    232263        <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>  
    234265        <a class="random" title="{'random'|translate}"><img src="{$CRYPTO_PATH}/template/arrow_switch.png"></a> 
    235266      </li> 
    236267      <li> 
    237268        <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> 
    239270      </li> 
    240271      <li> 
    241272        <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>  
    243274        <a class="random" title="{'random'|translate}"><img src="{$CRYPTO_PATH}/template/arrow_switch.png"></a> 
    244275      </li> 
    245276      <li> 
    246277        <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         {/foreach} 
     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} 
    250281      </li> 
    251282    </ul> 
Note: See TracChangeset for help on using the changeset viewer.