DerDu/SPHERE-Framework

<div class="form-group {{ ElementGroup }}">
    {% if( ElementLabel is not empty ) %}
        <label>{{ ElementLabel }}{% if( Required is not empty ) %}<span class="text-danger"> *</span>{% endif %}</label>
    {% endif %}
    {% if( ElementIcon is not empty ) %}
    <div class="input-group">
        <span class="input-group-addon">
            {{ ElementIcon }}
        </span>
        {% endif %}
        <input type="text" class="form-control{% if( ElementClass is not empty ) %} {{ ElementClass }}{% endif %}" name="{{ ElementName }}"
               placeholder="{{ ElementPlaceholder }}"
               data-date-format="DD.MM.YYYY" data-date-language="de" data-date-pickTime="false"
               data-bv-date-format="DD.MM.YYYY"
               value="{{ ElementValue }}" {% if( Disabled is not empty ) %}disabled{% endif %} {% if( Required is not empty ) %}required{% endif %} {% if( TabIndex is not empty ) %}tabindex="{{ TabIndex }}"{% endif %}/>

        {{ ElementFeedbackIcon }}
        {% if( ElementIcon is not empty ) %}
    </div>
    {% endif %}
    {{ ElementFeedbackMessage }}
</div>
<script type="text/javascript">
    //noinspection JSUnresolvedFunction
    executeScript(function()
    {
        Client.Use('ModPicker', function()
        {
            jQuery('input[type="text"][name="{{ ElementName }}"]').ModPicker();
        });
    });
</script>
{% if( AjaxEventChange is not empty or AjaxEventKeyUp is not empty ) %}
    <script type="text/javascript">

        var typewatch = function ()
        {
            var timer = 0;
            return function (callback, ms)
            {
                clearTimeout(timer);
                timer = setTimeout(callback, ms);
            }
        }();

        //noinspection JSUnresolvedFunction
        executeScript(function()
        {
            Client.Use('ModAlways', function()
            {
                Client.Use('ModAjax', function()
                {
                    {% if( AjaxEventChange is not empty ) %}
                    jQuery('input[type="text"][name="{{ ElementName }}"]').on('change',function(Event){
                        Event.preventDefault();
                        {{ AjaxEventChange }}
                    });
                    {% endif %}
                    {% if( AjaxEventKeyUp is not empty ) %}
                    jQuery('input[type="text"][name="{{ ElementName }}"]').on('keyup',function(Event){
                        // Exclude Keys
                        var KeyCode = Event.which;
                        // Code 9 = TAB
                        // Code 37,38,39,40 = LEFT,UP,RIGHT,DOWN Arrow
                        if(
                                KeyCode === 9
                                || KeyCode === 37
                                || KeyCode === 38
                                || KeyCode === 39
                                || KeyCode === 40
                        ) {
                            return;
                        }

                        typewatch(function ()
                        {
                            Event.preventDefault();
                            {{ AjaxEventKeyUp }}
                        }, 500);
                    });
                    {% endif %}
                });
            });
        });
    </script>
{% endif %}