Ignore:
Timestamp:
Jun 14, 2013, 7:02:17 PM (7 years ago)
Author:
mistic100
Message:

rewrite config page

File:
1 edited

Legend:

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

    r22725 r23209  
     1{combine_css path=$CRYPTO_PATH|@cat:"template/style.css"}
     2
    13{combine_css path=$CRYPTO_PATH|@cat:"template/colorpicker/colorpicker.css"}
    2 {combine_script id="jquery.colorpicker" require="jquery" path=$CRYPTO_PATH|@cat:"template/colorpicker/colorpicker.js"}
    3 
    4 {footer_script require='jquery.colorpicker'}{literal}
    5 jQuery(document).ready(function() {
    6   // colorpicker
    7   $('.colorpicker-input')
    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   // change button
    32   $('.button').click(function() {
    33     $('.button').removeClass('selected');
    34     $(this).addClass('selected');
    35     $('input[name=button_color]').val($(this).attr('title'));
    36     $('#reload').attr('src', '{/literal}{$CRYPTO_PATH}{literal}template/refresh_'+ $(this).attr('title') +'.png');
     4{combine_script id="jquery.colorpicker" load="footer" path=$CRYPTO_PATH|@cat:"template/colorpicker/colorpicker.js"}
     5
     6{combine_css path="themes/default/js/plugins/chosen.css"}
     7{combine_script id='jquery.chosen' load='footer' path='themes/default/js/plugins/chosen.jquery.min.js'}
     8
     9
     10{footer_script}{literal}
     11// colorpicker
     12$('.colorpicker-input')
     13  .ColorPicker({
     14    onSubmit: function(hsb, hex, rgb, el) {
     15      $(el).val(hex);
     16      $(el).ColorPickerHide();
     17    },
     18    onChange: function(hsb, hex, rgb, el) {
     19      $(el).val(hex);
     20      changeColor(el, hex);
     21      changePreview();
     22      setThemeCutom();
     23    },
     24    onBeforeShow: function () {
     25      $(this).ColorPickerSetColor(this.value);
     26    }
     27  })
     28  .bind('keyup', function(){
     29    $(this).ColorPickerSetColor(this.value);
     30    changeColor(this, $(this).val());
     31  })
     32  .each(function() {
     33    changeColor(this, $(this).val());
    3734  });
    38  
    39   // apply a preset
    40   $('.preset').click(function() {
    41     $('.preset').removeClass('selected');
    42     $(this).addClass('selected');
    43     eval('apply_'+ $(this).attr('title') +'();');
    44     $('.colorpicker-input').each(function() { changeColor(this, $(this).val()); });
    45     $('input[name=theme]').val($(this).attr('title'));
    46     changePreview();
    47   });
    48  
    49   // display customization panel
    50   $('.customize').click(function() {
    51     $('#theming').toggle();
    52   });
    53  
    54   // change theme to 'custom' if a parameter is changed
    55   $('input.istheme').change(function() {
    56     setThemeCutom();
    57   });
    58  
    59   // update the preview
    60   $('input.istheme, input.preview').change(function() {
    61     changePreview();
    62   });
    63   $('#reload').click(function() {
    64     changePreview();
    65   });
    66  
    67   // links for random color
    68   $('a.random').click(function() {
    69     $(this).prev('label').children('input').val('random');
    70     changeColor($(this).prev('label').children('input'), 'random');
    71     changePreview();
    72     setThemeCutom();
    73   });
     35
     36// 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', '{/literal}{$CRYPTO_PATH}{literal}template/refresh_'+ $(this).attr('title') +'.png');
     42});
     43
     44// apply a preset
     45$('.preset').click(function() {
     46  $('.preset').removeClass('selected');
     47  $(this).addClass('selected');
     48 
     49  var id = $(this).attr("title");
     50 
     51  for (key in presets[id]) {
     52    $('input[name="'+ key +'"]').val([presets[id][key]]);
     53  }
     54 
     55  $('.colorpicker-input').each(function() { changeColor(this, $(this).val()); });
     56  $('input[name="theme"]').val($(this).attr('title'));
     57  changePreview();
     58});
     59
     60// display customization panel
     61$('.customize').click(function() {
     62  $('#theming').toggle();
     63});
     64
     65// change theme to 'custom' if a parameter is changed
     66$('input.istheme').change(function() {
     67  setThemeCutom();
     68});
     69
     70// update the preview
     71$('input.istheme, input.preview').change(function() {
     72  changePreview();
     73});
     74$('#reload').click(function() {
     75  changePreview();
     76});
     77
     78// links for random color
     79$('a.random').click(function() {
     80  $(this).prev('label').children('input').val('random');
     81  changeColor($(this).prev('label').children('input'), 'random');
     82  changePreview();
     83  setThemeCutom();
     84});
     85
     86// multiselect
     87$("select").css({
     88  "width":"700px"
     89}).chosen({
     90  disable_search:true,
    7491});
    7592
     
    105122{/literal}
    106123
    107 {$PRESETS_FUNC}
     124var presets = {ldelim}
     125{foreach from=$PRESETS key=name item=params}
     126  "{$name}" : {ldelim}
     127  {foreach from=$params key=key item=value}
     128    "{$key}" : "{$value}",
     129  {/foreach}
     130  },
     131{/foreach}
     132};
    108133{/footer_script}
     134
    109135
    110136{html_head}
     
    116142}
    117143{/foreach}
    118 
    119 .preset img, .button img {ldelim}
    120   margin:1px;
    121   padding:3px;
    122   border:1px solid #999;
    123 }
    124 .preset.selected img, .button.selected img {ldelim}
    125   border-color:#f70;
    126 }
    127 
    128 .big-list {ldelim}
    129   display:relative;
    130   margin-left:51%;
    131 }
    132 .big-list label {ldelim}
    133   display:inline-block;
    134   margin-right:10px;
    135 }
    136144</style>
    137145{/html_head}
     146
    138147
    139148<div class="titrePage">
     
    147156  <ul>
    148157    <li>
    149       <span class="property">{'Activate on'|@translate}</span>
    150       <div class="big-list">
    151         <label><input type="checkbox" name="activate_on[picture]" value="1" {if $crypto.activate_on.picture}checked="checked"{/if}> {'Picture comments'|@translate}</label>
    152         {if $loaded.category}<label><input type="checkbox" name="activate_on[category]" value="1" {if $crypto.activate_on.category}checked="checked"{/if}> {'Album comments'|@translate}</label>{/if}
    153         <label><input type="checkbox" name="activate_on[register]" value="1" {if $crypto.activate_on.register}checked="checked"{/if}> {'Register form'|@translate}</label>
    154         {if $loaded.contactform}<label><input type="checkbox" name="activate_on[contactform]" value="1" {if $crypto.activate_on.contactform}checked="checked"{/if}> {'Contact form'|@translate}</label>{/if}
    155         {if $loaded.guestbook}<label><input type="checkbox" name="activate_on[guestbook]" value="1" {if $crypto.activate_on.guestbook}checked="checked"{/if}> {'Guestbook'|@translate}</label>{/if}
    156         </div>
    157     </li>
    158     <li>
    159       <span class="property">{'Comments action'|@translate}</span>
     158      <b>{'Activate on'|@translate}</b>
     159      <select name="activate_on[]" multiple>
     160        <option value="picture" {if $crypto.activate_on.picture}selected{/if}>{'Picture comments'|@translate}</option>
     161        {if $loaded.category}<option value="category" {if $crypto.activate_on.category}selected{/if}>{'Album comments'|@translate}</option>{/if}
     162        <option value="register" {if $crypto.activate_on.register}selected{/if}>{'Register form'|@translate}</option>
     163        {if $loaded.contactform}<option value="contactform" {if $crypto.activate_on.contactform}selected{/if}>{'Contact form'|@translate}</option>{/if}
     164        {if $loaded.guestbook}<option value="guestbook" {if $crypto.activate_on.guestbook}selected{/if}>{'Guestbook'|@translate}</option>{/if}
     165      </select>
     166    </li>
     167    <li>
     168      <b>{'Comments action'|@translate}</b>
    160169      <label><input type="radio" name="comments_action" value="reject" {if $crypto.comments_action == 'reject'}checked="checked"{/if}> {'Reject'|@translate}</label>
    161170      <label><input type="radio" name="comments_action" value="moderate" {if $crypto.comments_action == 'moderate'}checked="checked"{/if}> {'Moderate'|@translate}</label>
    162171    </li>
    163172    <li>
    164       <span class="property">{'Captcha type'|@translate}</span>
     173      <b>{'Captcha type'|@translate}</b>
    165174      <label><input type="radio" name="captcha_type" class="preview" value="string" {if $crypto.captcha_type == 'string'}checked="checked"{/if}> {'Random string'|@translate}</label>
    166175      <label><input type="radio" name="captcha_type" class="preview" value="math" {if $crypto.captcha_type == 'math'}checked="checked"{/if}> {'Simple equation'|@translate}</label>
    167176    </li>
    168177    <!--<li>
    169       <span class="property">{'Case sensitive'|@translate}</span>
     178      <b>{'Case sensitive'|@translate}</b>
    170179      <label><input type="radio" name="case_sensitive" value="false" {if $crypto.case_sensitive == 'false'}checked="checked"{/if}> {'No'|@translate}</label>
    171180      <label><input type="radio" name="case_sensitive" value="true" {if $crypto.case_sensitive == 'true'}checked="checked"{/if}> {'Yes'|@translate}</label>
    172181    </li>-->
    173182    <li>
    174       <span class="property">{'Code lenght'|@translate}</span>
     183      <b>{'Code lenght'|@translate}</b>
    175184      <label><input type="text" name="code_length" class="preview" value="{$crypto.code_length}" size="6" maxlength="2"></label>
    176185    </li>
    177186    <li>
    178       <span class="property">{'Width'|@translate}</span>
     187      <b>{'Width'|@translate}</b>
    179188      <label><input type="text" name="width" class="preview" value="{$crypto.width}" size="6" maxlength="3"> {'good value:'|@translate} lenght&times;30</label>
    180189    </li>
    181190    <li>
    182       <span class="property">{'Height'|@translate}</span>
     191      <b>{'Height'|@translate}</b>
    183192      <label><input type="text" name="height" class="preview" value="{$crypto.height}" size="6" maxlength="3"> {'good value:'|@translate} lenght&times;12</label>
    184193    </li>
    185194    <li>
    186       <span class="property">{'Button color'|@translate}</span>
    187       <div style="display:relative;margin-left:51%;">
    188         <a class="button {if $crypto.button_color == 'dark'}selected{/if}" title="dark"><img src="{$CRYPTO_PATH}template/refresh_dark.png" alt="dark"></a>
    189         <a class="button {if $crypto.button_color == 'light'}selected{/if}" title="light"><img src="{$CRYPTO_PATH}template/refresh_light.png" alt="light"></a>
    190         <input type="hidden" name="button_color" value="{$crypto.button_color}">
    191       </div>
    192     </li>
    193     <li>
    194       <span class="property">{'Captcha theme'|@translate}</span>
    195       <div style="display:relative;margin-left:51%;">
    196         {foreach from=$presets item=preset}
    197         <a class="preset {if $crypto.theme == $preset}selected{/if}" title="{$preset}"><img src="{$CRYPTO_PATH}template/presets/{$preset}.png" alt="{$preset}"></a>
    198         {/foreach}
    199         <br><a class="customize">{'Customize'|@translate}</a><input type="hidden" name="theme" value="{$crypto.theme}">
    200       </div>
     195      <b>{'Button color'|@translate}</b>
     196      <a class="button {if $crypto.button_color == 'dark'}selected{/if}" title="dark"><img src="{$CRYPTO_PATH}template/refresh_dark.png" alt="dark"></a>
     197      <a class="button {if $crypto.button_color == 'light'}selected{/if}" title="light"><img src="{$CRYPTO_PATH}template/refresh_light.png" alt="light"></a>
     198      <input type="hidden" name="button_color" value="{$crypto.button_color}">
     199    </li>
     200    <li>
     201      <b>{'Captcha theme'|@translate}</b>
     202      {foreach from=$PRESETS key=preset item=params}
     203      <a class="preset {if $crypto.theme == $preset}selected{/if}" title="{$preset}"><img src="{$CRYPTO_PATH}template/presets/{$preset}.png" alt="{$preset}"></a>
     204      {/foreach}
     205      <input type="hidden" name="theme" value="{$crypto.theme}">
     206      <a class="customize">{'Customize'|@translate}</a>
    201207    </li>
    202208  </ul>
     
    207213    <ul>
    208214      <li>
    209         <span class="property">{'Perturbation'|@translate}</span>
     215        <b>{'Perturbation'|@translate}</b>
    210216        <label><input type="text" name="perturbation" value="{$crypto.perturbation}" class="istheme" size="6" maxlength="4"> {'range:'|@translate} 0 - 1</label>
    211217      </li>
    212218      <li>
    213         <span class="property">{'Background color'|@translate}</span>
     219        <b>{'Background color'|@translate}</b>
    214220        <label><input type="text" name="image_bg_color" value="{$crypto.image_bg_color}" class="colorpicker-input istheme" size="6" maxlength="6"></label>
    215221        <a class="random" title="{'random'|@translate}"><img src="{$CRYPTO_PATH}/template/arrow_switch.png"></a>
    216222      </li>
    217223      <li>
    218         <span class="property">{'Text color'|@translate}</span>
     224        <b>{'Text color'|@translate}</b>
    219225        <label><input type="text" name="text_color" value="{$crypto.text_color}" class="colorpicker-input istheme" size="6" maxlength="6"></label>
    220226        <a class="random" title="{'random'|@translate}"><img src="{$CRYPTO_PATH}/template/arrow_switch.png"></a>
    221227      </li>
    222228      <li>
    223         <span class="property">{'Lines density'|@translate}</span>
     229        <b>{'Lines density'|@translate}</b>
    224230        <label><input type="text" name="num_lines" value="{$crypto.num_lines}" class="istheme" size="6" maxlength="4"> {'range:'|@translate} 0 - 10</label>
    225231      </li>
    226232      <li>
    227         <span class="property">{'Lines color'|@translate}</span>
     233        <b>{'Lines color'|@translate}</b>
    228234        <label><input type="text" name="line_color" value="{$crypto.line_color}" class="colorpicker-input istheme" size="6" maxlength="6"></label>
    229235        <a class="random" title="{'random'|@translate}"><img src="{$CRYPTO_PATH}/template/arrow_switch.png"></a>
    230236      </li>
    231237      <li>
    232         <span class="property">{'Noise level'|@translate}</span>
     238        <b>{'Noise level'|@translate}</b>
    233239        <label><input type="text" name="noise_level" value="{$crypto.noise_level}" class="istheme" size="6" maxlength="4"> {'range:'|@translate} 0 - 10</label>
    234240      </li>
    235241      <li>
    236         <span class="property">{'Noise color'|@translate}</span>
     242        <b>{'Noise color'|@translate}</b>
    237243        <label><input type="text" name="noise_color" value="{$crypto.noise_color}" class="colorpicker-input istheme" size="6" maxlength="6"></label>
    238244        <a class="random" title="{'random'|@translate}"><img src="{$CRYPTO_PATH}/template/arrow_switch.png"></a>
    239245      </li>
    240246      <li>
    241         <span class="property">{'Font'|@translate}</span>
    242         <div class="big-list">
    243           {foreach from=$fonts item=font}
    244           <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>
    245           {/foreach}
    246         </div>
     247        <b>{'Font'|@translate}</b>
     248        {foreach from=$fonts item=font}
     249        <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>
     250        {/foreach}
    247251      </li>
    248252    </ul>
     
    253257  <ul style="margin-top:30px;">
    254258    <li>
    255       <span class="property">{'Preview'|@translate}</span>
     259      <b>{'Preview'|@translate}</b>
    256260      <img id="captcha" src="{$CRYPTO_PATH}securimage/securimage_show.php" alt="CAPTCHA Image">
    257261      <a href="#" onClick="return false;"><img id="reload" src="{$CRYPTO_PATH}template/refresh_{$crypto.button_color}.png"></a>
     
    260264 
    261265</fieldset>
    262 <p><input class="submit" type="submit" value="{'Submit'|@translate}" name="submit"></p>
     266
     267<p class="formButtons"><input class="submit" type="submit" value="{'Submit'|@translate}" name="submit"></p>
    263268</form>
    264269
Note: See TracChangeset for help on using the changeset viewer.