DerDu/SPHERE-Framework

<div class="form-group {{ ElementGroup }}">
    {% if( ElementLabel is not empty ) %}
        <label for="{{ ElementName }}">{{ 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 %}
        <select id="{{ ElementName }}" name="{{ ElementName }}"
                {% if( Disabled is not empty ) %}disabled{% endif %} {% if( TabIndex is not empty ) %}tabindex="{{ TabIndex }}"{% endif %}>
            {% for Value, Title in ElementData %}
                <option value="{{ Value }}">{{ Title }}</option>
            {% endfor %}
        </select>
        {{ ElementFeedbackIcon }}
        {% if( ElementIcon is not empty ) %}
    </div>
    {% endif %}
    {{ ElementFeedbackMessage }}
</div>
<script type="text/javascript">
    //noinspection JSUnresolvedFunction
    executeScript(function()
    {
        Client.Use('ModSelecter', function()
        {
            var guiSelect = jQuery('select[name="{{ ElementName }}"]');
            guiSelect.find('option[value="{{ ElementValue }}"]').attr('selected', 'selected');
            guiSelect.on('change keyup blur', function(Event)
            {
                var noSelection = jQuery(Event.currentTarget);
                var useColor = noSelection.parent().find('span.selecter-selected');
                var useValue = noSelection.parent().find('span.selecter-item.selected');
                if (useValue.attr('data-value') == 0) {
                    useColor.css('color', 'silver');
                } else {
                    useColor.css('color', '');
                }
            });
            guiSelect.ModSelecter({{ ElementConfiguration }});

            var noSelection = guiSelect;
                var useColor = noSelection.parent().find('span.selecter-selected');
                var useValue = noSelection.parent().find('span.selecter-item.selected');
                if (useValue.attr('data-value') == 0) {
                    useColor.css('color', 'silver');
                }
            });
    });
</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('select[name="{{ ElementName }}"]').on('change',function(Event){
                        Event.preventDefault();
                        {{ AjaxEventChange }}
                    });
                    {% endif %}
                    {% if( AjaxEventKeyUp is not empty ) %}
                    jQuery('select[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 %}