expomap/templates/c_admin/settings/sections.html

{% extends 'base.html' %}
{% load i18n %}
{% load static %}

{% block select2 %}
    <link href="{% static 'js/select2-4.0.3/css/select2.min.css' %}" rel="stylesheet"/>
    <script src="{% static 'js/select2-4.0.3/js/select2.min.js' %}"></script>
{% endblock select2 %}
    
{% block main_js_exlude %}
{% endblock main_js_exlude %}


{% block scripts %}
    {# selects #}
    <link href="{% static 'js/select2-4.0.3/css/select2.min.css' %}" rel="stylesheet"/>
    <script src="{% static 'js/select2-4.0.3/js/select2.min.js' %}"></script>

    <link href="{% static 'js/jquery-ui-1.12.0-rc.2/jquery-ui.min.css' %}" rel="stylesheet"/>
    <link href="{% static 'js/jquery-ui-1.12.0-rc.2/jquery-ui.structure.min.css' %}" rel="stylesheet"/>
    <link href="{% static 'js/jquery-ui-1.12.0-rc.2/jquery-ui.theme.min.css' %}" rel="stylesheet"/>
    <script src="{% static 'js/jquery-ui-1.12.0-rc.2/jquery-ui.min.js' %}"></script>

    <script src="{% static 'js/select/select2.sortable.js' %}"></script>
    <script>
        (function($){
            $.fn.extend({
                // select2SortableOrder: function(){
                //     var args  = Array.prototype.slice.call(arguments, 0);
                //     var $this = this.filter('[multiple]');
                //     $this.each(function(){
                //         var $select  = $(this); 

                //         // skip elements not select2-ed
                //         if(typeof($select.data('select2')) !== 'object'){
                //             return false;
                //         }

                //         var $select2 = $select.siblings('.select2-container'),
                //             unselected = [],
                //             sorted;

                //         var argList = undefined;
                //         if(typeof(args[0]) != 'undefined' && args[0].length > 0 && $.isArray(args[0])){
                //             argList = args[0];
                //             sorted = [];
                //             $select.find('option').each(function(){
                //                 var isSelected = false,
                //                     index = argList.indexOf(this.value);
                //                 if (index >= 0) {
                //                     sorted[index] = this;
                //                     isSelected = true;
                //                 }
                //                 if(!isSelected){
                //                     !this.selected && unselected.push(this);
                //                 }
                //             }); 
                //         }
                //         else{
                //             $select.find('option').each(function(){
                //                 !this.selected && unselected.push(this);
                //             }); 
                //             sorted = $($select2.find('.select2-choices li[class!="select2-search-field"]').map( function() {
                //                 if (!this) {
                //                     return undefined;
                //                 }
                //                 var id = $(this).data('select2Data').id;
                //                 return $select.find('option[value="' + id + '"]')[0];
                //             }));
                //         }
                //         sorted.push.apply(sorted, unselected);
                //         $select.children().remove();
                //         $select.append(sorted);
                //     });

                //     return $this;
                // },
                select2_sortable: function(){
                    var select = $(this);
                    var ul = $(select).next('.select2-container').first('ul.select2-selection__rendered');
                    ul.sortable({
                        placeholder : 'ui-state-highlight',
                        forcePlaceholderSize: true,
                        items       : 'li:not(.select2-search__field)',
                        tolerance   : 'pointer',
                        stop: function() {
                            $($(ul).find('.select2-selection__choice').get().reverse()).each(function() {
                                var id = $(this).data('data').id;
                                var option = select.find('option[value="' + id + '"]')[0];
                                $(select).prepend(option);
                            });
                        }
                    });
                }
            });
        }(jQuery));

        function make_event_select(select){
            // var select = $(id);
            select.select2({
                // placeholder: placeholder,
                multiple: true,
                ajax: {
                    url: select.data('ajax-url'),
                    width: '550px',
                    dataType: "json",
                    quietMillis: 200,

                    data: function(params){
                        return {term: params.term,
                                page: params.page};
                    },

                    processResults: function (data) {
                        return {results: $.map(JSON.parse(data), function(obj) {
                                obj.text = obj.label;
                                return obj
                        })};
                    },

                },

                createTag: function(params) {
                    return undefined;
                },
            });
        }

        $(document).ready(function(){
            $('select[select2=true]').each(function() {
                make_event_select($(this));
                $(this).select2_sortable();
            });
            // $('#id_expo_city').select2SortableOrder({{ expo_city|safe }});
        });
    </script>
        
    <style>
        .select2-container--default .select2-selection--multiple .select2-selection__rendered li {
            float: none;
        }
    </style>
{% endblock %}

{% block body %}

    <div class="row-fluid sortable">
        <div class="box span12">
            <div class="box-header well" data-original-title>
                <h2><i class="icon-tasks"></i>{{ form.verbose }}</h2>
            </div>
            <div class="box-content">
                <form method="post" action=".">
                {% csrf_token %}

                {% for field in form %}
                    <div class="control-group {% if field.errors %}error{% endif %}">
                        <label class="control-label"><b>{{ field.label }}:</b></label>
                        <div class="controls">{{ field }}
                            <span class="help-inline">{{  field.errors }}</span>
                        </div>
                    </div>
                {% endfor %}

                <hr/>
                <button type="submit" class="btn btn-primary" >Сохранить</button>
                </form>
            </div>
        </div>
    </div>

{% endblock %}

{% block bot_scripts %}
{% endblock %}