// Add count down to text input

This commit is contained in:
Jerome Nadaud
2013-09-12 17:59:25 +02:00
parent 039955e6a1
commit 81b6ec93f9
3 changed files with 91 additions and 22 deletions
@@ -25,26 +25,50 @@
{foreach from=$languages item=language}
<div class="input-group col-lg-12 translatable-field lang-{$language.id_lang}">
<input type="text"
id="{$input_name}_{$language.id_lang}"
{if isset($input_class)}class="{$input_class}"{/if}
name="{$input_name}_{$language.id_lang}"
value="{$input_value[$language.id_lang]|htmlentitiesUTF8|default:''}"
onkeyup="if (isArrowKey(event)) return ;updateFriendlyURL();" onblur="updateLinkRewrite();">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<img src="{$base_url}/img/l/{$language.id_lang|intval}.jpg" alt="">
{$language.iso_code}
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
{foreach from=$languages item=language}
<li>
<a href="javascript:hideOtherLanguage({$language.id_lang});"><img src="{$base_url}/img/l/{$language.id_lang|intval}.jpg" alt=""> {$language.name}</a>
</li>
{/foreach}
</ul>
</div>
{if isset($maxlength)}
<span id="{$input_name}_{$language.id_lang}_counter" class="input-group-addon"><span class="text-count-down">{$maxlength}</span></span>
{/if}
<input type="text"
id="{$input_name}_{$language.id_lang}"
{if isset($input_class)}class="{$input_class}"{/if}
name="{$input_name}_{$language.id_lang}"
value="{$input_value[$language.id_lang]|htmlentitiesUTF8|default:''}"
onkeyup="if (isArrowKey(event)) return ;updateFriendlyURL();"
onblur="updateLinkRewrite();"
{if isset($maxlength)}maxlength="{$maxlength}"{/if}>
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<img src="{$base_url}/img/l/{$language.id_lang|intval}.jpg" alt="">
{$language.iso_code}
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
{foreach from=$languages item=language}
<li>
<a href="javascript:hideOtherLanguage({$language.id_lang});"><img src="{$base_url}/img/l/{$language.id_lang|intval}.jpg" alt=""> {$language.name}</a>
</li>
{/foreach}
</ul>
</div>
</div>
{/foreach}
{if isset($maxlength)}
<script type="text/javascript">
function countDown($source, $target) {
var max = $source.attr("maxlength");
$target.html(max-$source.val().length);
$source.keyup(function(){
$target.html(max-$source.val().length);
});
}
$(document).ready(function(){
{foreach from=$languages item=language}
countDown($("#{$input_name}_{$language.id_lang}"), $("#{$input_name}_{$language.id_lang}_counter"));
{/foreach}
});
</script>
{/if}
@@ -41,7 +41,9 @@
{include file="controllers/products/input_text_lang.tpl"
languages=$languages
input_name='meta_title'
input_value=$product->meta_title}
input_value=$product->meta_title
maxlength=70
}
</div>
</div>
</div>
@@ -60,6 +62,7 @@
languages=$languages
input_name='meta_description'
input_value=$product->meta_description
maxlength=160
}
</div>
</div>
@@ -104,6 +104,9 @@
</script>
{/literal}
{/if}
{if isset($input.maxlength)}
<span id="{if isset($input.id)}{$input.id}_{$language.id_lang}{else}{$input.name}_{$language.id_lang}{/if}_counter" class="input-group-addon"><span class="text-count-down">{$input.maxlength}</span></span>
{/if}
<input type="text"
id="{if isset($input.id)}{$input.id}_{$language.id_lang}{else}{$input.name}_{$language.id_lang}{/if}"
name="{$input.name}_{$language.id_lang}"
@@ -129,6 +132,24 @@
</div>
</div>
{/foreach}
{if isset($input.maxlength)}
<script type="text/javascript">
function countDown($source, $target) {
var max = $source.attr("maxlength");
$target.html(max-$source.val().length);
$source.keyup(function(){
$target.html(max-$source.val().length);
});
}
$(document).ready(function(){
{foreach from=$languages item=language}
countDown($("#{if isset($input.id)}{$input.id}_{$language.id_lang}{else}{$input.name}_{$language.id_lang}{/if}"), $("#{if isset($input.id)}{$input.id}_{$language.id_lang}{else}{$input.name}_{$language.id_lang}{/if}_counter"));
{/foreach}
});
</script>
{/if}
</div>
{else}
{if $input.type == 'tags'}
@@ -146,6 +167,9 @@
{/literal}
{/if}
{assign var='value_text' value=$fields_value[$input.name]}
{if isset($input.maxlength)}
<span id="{if isset($input.id)}{$input.id}{else}{$input.name}{/if}_counter" class="input-group-addon"><span class="text-count-down">{$input.maxlength}</span></span>
{/if}
<input type="text"
name="{$input.name}"
id="{if isset($input.id)}{$input.id}{else}{$input.name}{/if}"
@@ -171,6 +195,22 @@
{/if}
</div>
{/if}
{if isset($input.maxlength)}
<script type="text/javascript">
function countDown($source, $target) {
var max = $source.attr("maxlength");
$target.html(max-$source.val().length);
$source.keyup(function(){
$target.html(max-$source.val().length);
});
}
$(document).ready(function(){
countDown($("#{if isset($input.id)}{$input.id}{else}{$input.name}{/if}"), $("#{if isset($input.id)}{$input.id}{else}{$input.name}{/if}_counter"));
});
</script>
{/if}
{/if}
{elseif $input.type == 'select'}
{if isset($input.options.query) && !$input.options.query && isset($input.empty_message)}
@@ -292,6 +332,7 @@
{elseif $input.type == 'textarea'}
{assign var=use_textarea_autosize value=true}
{if isset($input.lang) AND $input.lang}
{foreach $languages as $language}
<div class="row translatable-field lang-{$language.id_lang}" {if $language.id_lang != $defaultFormLanguage}style="display:none;"{/if}>
@@ -579,8 +620,9 @@
nextText: '',
dateFormat: 'yy-mm-dd'
});
{if isset($use_textarea_autosize)}
$(".textarea-autosize").autosize();
{/if}
});
{block name="script"}{/block}
</script>