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", }); } }