Ignore:
Timestamp:
Apr 29, 2012, 5:04:37 PM (12 years ago)
Author:
mistic100
Message:

update for 2.4
deactivated for smartpocket, now compatible with simple and stripped on ContactForm
live update of preview on admin page

File:
1 edited

Legend:

Unmodified
Added
Removed

  • extensions/CryptograPHP/template/admin.tpl

    r12617 r14527  
    44{footer_script require='jquery.colorpicker'}{literal}
    55jQuery(document).ready(function() {
     6  // colorpicker
    67  $('.colorpicker-input')
    7   .ColorPicker({
    8     onSubmit: function(hsb, hex, rgb, el) {
    9       $(el).val(hex);
    10       $(el).ColorPickerHide();
    11     },
    12     onChange: function(hsb, hex, rgb, el) {
    13       $(el).val(hex);
    14       changeColor(el, hex);
    15       $('.preset').removeClass('selected');
    16       $('input[name=theme]').val('custom');
    17     },
    18     onBeforeShow: function () {
    19       $(this).ColorPickerSetColor(this.value);
    20     }
    21   })
    22   .bind('keyup', function(){
    23     $(this).ColorPickerSetColor(this.value);
    24     changeColor(this, $(this).val());
    25   })
    26   .each(function() {
    27     changeColor(this, $(this).val());
    28   });
    29  
     8    .ColorPicker({
     9      onSubmit: function(hsb, hex, rgb, el) {
     10        $(el).val(hex);
     11        $(el).ColorPickerHide();
     12      },
     13      onChange: function(hsb, hex, rgb, el) {
     14        $(el).val(hex);
     15        changeColor(el, hex);
     16        changePreview();
     17        setThemeCutom();
     18      },
     19      onBeforeShow: function () {
     20        $(this).ColorPickerSetColor(this.value);
     21      }
     22    })
     23    .bind('keyup', function(){
     24      $(this).ColorPickerSetColor(this.value);
     25      changeColor(this, $(this).val());
     26    })
     27    .each(function() {
     28      changeColor(this, $(this).val());
     29    });
     30 
     31  // apply a preset
    3032  $('.preset').click(function() {
    3133    $('.preset').removeClass('selected');
    … …  
    3436    $('.colorpicker-input').each(function() { changeColor(this, $(this).val()); });
    3537    $('input[name=theme]').val($(this).attr('title'));
    36   });
    37  
     38    changePreview();
     39  });
     40 
     41  // display customization panel
    3842  $('.customize').click(function() {
    39     $('#theming').fadeToggle();
    40   });
    41  
     43    $('#theming').toggle();
     44  });
     45 
     46  // change theme to 'custom' if a parameter is changed
    4247  $('input.istheme').change(function() {
    43     $('.preset').removeClass('selected');
    44     $('input[name=theme]').val('custom');
     48    setThemeCutom();
     49  });
     50 
     51  // update the preview
     52  $('input.istheme, input.preview').change(function() {
     53    changePreview();
     54  });
     55  $('#captcha').click(function() {
     56    changePreview();
     57  });
     58 
     59  // links for random color
     60  $('a.random').click(function() {
     61    $(this).prev('label').children('input').val('random');
     62    changeColor($(this).prev('label').children('input'), 'random');
     63    changePreview();
     64    setThemeCutom();
    4565  });
    4666});
     67
     68function setThemeCutom() {
     69  $('.preset').removeClass('selected');
     70  $('input[name=theme]').val('custom');
     71}
     72
     73function changePreview()
     74{
     75  options = new Array();
     76  str = '';
     77 
     78  $('input[type="text"], input[type="radio"]:checked').each(function() {
     79    options[$(this).attr('name')] = $(this).val();
     80  });
     81 
     82  for (x in options) {
     83    str+= '&' + x + '=' + options[x];
     84  }
     85  $('#captcha').attr('src', '{/literal}{$CRYPTO_PATH}{literal}securimage/securimage_preview.php?' + new Date().getTime() + str);
     86}
    4787
    4888function changeColor(target, color) {
    … …  
    68108}
    69109{/foreach}
     110
    70111.preset img {ldelim}
    71112  margin:1px;
    … …  
    96137    <li>
    97138      <span class="property">{'Captcha type'|@translate}</span>
    98       <label><input type="radio" name="captcha_type" value="string" {if $crypto.captcha_type == 'string'}checked="checked"{/if}> {'Random string'|@translate}</label>
    99       <label><input type="radio" name="captcha_type" value="math" {if $crypto.captcha_type == 'math'}checked="checked"{/if}> {'Simple equation'|@translate}</label>
     139      <label><input type="radio" name="captcha_type" class="preview" value="string" {if $crypto.captcha_type == 'string'}checked="checked"{/if}> {'Random string'|@translate}</label>
     140      <label><input type="radio" name="captcha_type" class="preview" value="math" {if $crypto.captcha_type == 'math'}checked="checked"{/if}> {'Simple equation'|@translate}</label>
    100141    </li>
    101142    <!--<li>
    … …  
    106147    <li>
    107148      <span class="property">{'Code lenght'|@translate}</span>
    108       <label><input type="text" name="code_length" value="{$crypto.code_length}" size="6" maxlength="2"></label>
     149      <label><input type="text" name="code_length" class="preview" value="{$crypto.code_length}" size="6" maxlength="2"></label>
    109150    </li>
    110151    <li>
    111152      <span class="property">{'Width'|@translate}</span>
    112       <label><input type="text" name="width" value="{$crypto.width}" size="6" maxlength="3"> {'good value:'|@translate} lenght*20</label>
     153      <label><input type="text" name="width" class="preview" value="{$crypto.width}" size="6" maxlength="3"> {'good value:'|@translate} lenght&times;20</label>
    113154    </li>
    114155    <li>
    115156      <span class="property">{'Height'|@translate}</span>
    116       <label><input type="text" name="height" value="{$crypto.height}" size="6" maxlength="3"> {'good value:'|@translate} width/4</label>
     157      <label><input type="text" name="height" class="preview" value="{$crypto.height}" size="6" maxlength="3"> {'good value:'|@translate} width/4</label>
    117158    </li>
    118159    <li>
    … …  
    133174      <li>
    134175        <span class="property">{'Perturbation'|@translate}</span>
    135         <label><input type="text" name="perturbation" value="{$crypto.perturbation}" class="istheme" size="6" maxlength="4"> {'range:'|@translate} 0 to 1</label>
     176        <label><input type="text" name="perturbation" value="{$crypto.perturbation}" class="istheme" size="6" maxlength="4"> {'range:'|@translate} 0 - 1</label>
    136177      </li>
    137178      <li>
    138179        <span class="property">{'Background color'|@translate}</span>
    139         <label><input type="text" name="image_bg_color" value="{$crypto.image_bg_color}" class="colorpicker-input istheme" size="6" maxlength="6"></label>
     180        <label><input type="text" name="image_bg_color" value="{$crypto.image_bg_color}" class="colorpicker-input istheme" size="6" maxlength="6"></label>
     181        <a class="random" title="{'random'|@translate}"><img src="{$CRYPTO_PATH}/template/arrow_switch.png"></a>
    140182      </li>
    141183      <li>
    142184        <span class="property">{'Text color'|@translate}</span>
    143         <label><input type="text" name="text_color" value="{$crypto.text_color}" class="colorpicker-input istheme" size="6" maxlength="6"></label>
     185        <label><input type="text" name="text_color" value="{$crypto.text_color}" class="colorpicker-input istheme" size="6" maxlength="6"></label>
     186        <a class="random" title="{'random'|@translate}"><img src="{$CRYPTO_PATH}/template/arrow_switch.png"></a>
    144187      </li>
    145188      <li>
    146189        <span class="property">{'Lines density'|@translate}</span>
    147         <label><input type="text" name="num_lines" value="{$crypto.num_lines}" class="istheme" size="6" maxlength="4"> {'range:'|@translate} 0 to 10</label>
     190        <label><input type="text" name="num_lines" value="{$crypto.num_lines}" class="istheme" size="6" maxlength="4"> {'range:'|@translate} 0 - 10</label>
    148191      </li>
    149192      <li>
    150193        <span class="property">{'Lines color'|@translate}</span>
    151         <label><input type="text" name="line_color" value="{$crypto.line_color}" class="colorpicker-input istheme" size="6" maxlength="6"></label>
     194        <label><input type="text" name="line_color" value="{$crypto.line_color}" class="colorpicker-input istheme" size="6" maxlength="6"></label>
     195        <a class="random" title="{'random'|@translate}"><img src="{$CRYPTO_PATH}/template/arrow_switch.png"></a>
    152196      </li>
    153197      <li>
    154198        <span class="property">{'Noise level'|@translate}</span>
    155         <label><input type="text" name="noise_level" value="{$crypto.noise_level}" class="istheme" size="6" maxlength="4"> {'range:'|@translate} 0 to 10</label>
     199        <label><input type="text" name="noise_level" value="{$crypto.noise_level}" class="istheme" size="6" maxlength="4"> {'range:'|@translate} 0 - 10</label>
    156200      </li>
    157201      <li>
    158202        <span class="property">{'Noise color'|@translate}</span>
    159         <label><input type="text" name="noise_color" value="{$crypto.noise_color}" class="colorpicker-input istheme" size="6" maxlength="6"></label>
     203        <label><input type="text" name="noise_color" value="{$crypto.noise_color}" class="colorpicker-input istheme" size="6" maxlength="6"></label>
     204        <a class="random" title="{'random'|@translate}"><img src="{$CRYPTO_PATH}/template/arrow_switch.png"></a>
    160205      </li>
    161206      <li>
Note: See TracChangeset for help on using the changeset viewer.