fineui/src/case/loader/sort.list.js

import { ButtonGroup } from "@/base";
import { ListLoader } from "./loader.list";
import { Layout, shortcut, Widget, extend, emptyFn, Controller, createWidget, Events, each, stripEL } from "@/core";

/**
 * Created by GUY on 2016/4/29.
 *
 * @class SortList
 * @extends Widget
 */
@shortcut()
export class SortList extends Widget {
    static xtype = "bi.sort_list";

    static EVENT_CHANGE = "EVENT_CHANGE";

    _defaultConfig() {
        return extend(super._defaultConfig(...arguments), {
            baseCls: "bi-sort-list",
            isDefaultInit: true, // 是否默认初始化数据
            // 下面是button_group的属性
            el: {
                type: ButtonGroup.xtype,
            },
            items: [],
            itemsCreator: emptyFn,
            onLoaded: emptyFn,
            // 下面是分页信息
            count: false,
            next: {},
            hasNext: emptyFn,
            // containment: this.element,
            // connectWith: ".bi-sort-list",
        });
    }

    _init() {
        super._init(...arguments);
        const o = this.options;
        this.loader = createWidget({
            type: ListLoader.xtype,
            element: this,
            isDefaultInit: o.isDefaultInit,
            el: o.el,
            items: this._formatItems(o.items),
            itemsCreator(op, callback) {
                o.itemsCreator(op, items => {
                    callback(this._formatItems(items));
                });
            },
            onLoaded: o.onLoaded,
            count: o.count,
            next: o.next,
            hasNext: o.hasNext,
        });
        this.loader.on(Controller.EVENT_CHANGE, (...args) => {
            const [type, value, obj] = args;
            this.fireEvent(Controller.EVENT_CHANGE, ...args);
            if (type === Events.CLICK) {
                this.fireEvent(SortList.EVENT_CHANGE, value, obj);
            }
        });

        this.loader.element.sortable({
            containment: o.containment || this.element,
            connectWith: o.connectWith || ".bi-sort-list",
            items: ".sort-item",
            cursor: o.cursor || "drag",
            tolerance: o.tolerance || "intersect",
            placeholder: {
                element($currentItem) {
                    const holder = createWidget({
                        type: Layout.xtype,
                        cls: "bi-sortable-holder",
                        height: $currentItem.outerHeight(),
                    });
                    holder.element.css({
                        "margin-left": $currentItem.css("margin-left"),
                        "margin-right": $currentItem.css("margin-right"),
                        "margin-top": $currentItem.css("margin-top"),
                        "margin-bottom": $currentItem.css("margin-bottom"),
                        margin: $currentItem.css("margin"),
                    });

                    return holder.element;
                },
                update() {},
            },
            start(event, ui) {},
            stop: (event, ui) => {
                this.fireEvent(SortList.EVENT_CHANGE);
            },
            over(event, ui) {},
        });
    }

    _formatItems(items) {
        each(items, (i, item) => {
            item = stripEL(item);
            item.cls = item.cls ? `${item.cls} sort-item` : "sort-item";
            item.attributes = {
                sorted: item.value,
            };
        });

        return items;
    }

    hasNext() {
        return this.loader.hasNext();
    }

    addItems(items) {
        this.loader.addItems(items);
    }

    populate(items) {
        if (items) {
            arguments[0] = this._formatItems(items);
        }
        this.loader.populate(...arguments);
    }

    empty() {
        this.loader.empty();
    }

    setNotSelectedValue() {
        this.loader.setNotSelectedValue(...arguments);
    }

    getNotSelectedValue() {
        return this.loader.getNotSelectedValue();
    }

    setValue() {
        this.loader.setValue(...arguments);
    }

    getValue() {
        return this.loader.getValue();
    }

    getAllButtons() {
        return this.loader.getAllButtons();
    }

    getAllLeaves() {
        return this.loader.getAllLeaves();
    }

    getSelectedButtons() {
        return this.loader.getSelectedButtons();
    }

    getNotSelectedButtons() {
        return this.loader.getNotSelectedButtons();
    }

    getIndexByValue(value) {
        return this.loader.getIndexByValue(value);
    }

    getNodeById(id) {
        return this.loader.getNodeById(id);
    }

    getNodeByValue(value) {
        return this.loader.getNodeByValue(value);
    }

    getSortedValues() {
        return this.loader.element.sortable("toArray", {
            attribute: "sorted",
        });
    }
}