initial commit
This commit is contained in:
+107
@@ -0,0 +1,107 @@
|
||||
.addMember .avatar {
|
||||
display: inline-block;
|
||||
width: 30px;
|
||||
}
|
||||
|
||||
.addMember-items {
|
||||
display: inline-block;
|
||||
padding-left: 0;
|
||||
margin-bottom: 0;
|
||||
vertical-align: middle;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.addMember-item {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.addMember-item:hover .addMember-remove {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.addMember-remove {
|
||||
position: absolute;
|
||||
top: -2px;
|
||||
right: -2px;
|
||||
display: none;
|
||||
font-size: 10px;
|
||||
line-height: 1;
|
||||
color: #ff666b;
|
||||
cursor: pointer;
|
||||
background-color: #fff;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.addMember-trigger {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.addMember-trigger-button {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
line-height: 28px;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
background-color: #dcdfe3;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.addMember-trigger-button:hover {
|
||||
background-color: #e6e9ed;
|
||||
}
|
||||
|
||||
.addMember-trigger-dropdown {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 45px;
|
||||
z-index: 1200;
|
||||
display: none;
|
||||
padding: 1px;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 2px 12px rgba(0, 0, 0, .2);
|
||||
}
|
||||
|
||||
.addMember-trigger-dropdown:before {
|
||||
position: absolute;
|
||||
top: 6px;
|
||||
left: -19px;
|
||||
display: block;
|
||||
width: 0;
|
||||
height: 0;
|
||||
content: "";
|
||||
border-color: transparent #fff transparent transparent;
|
||||
border-style: solid;
|
||||
border-width: 10px;
|
||||
}
|
||||
|
||||
.addMember-trigger.addMember-active .addMember-trigger-dropdown {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.addMember-list {
|
||||
max-height: 260px;
|
||||
padding-left: 0;
|
||||
margin-bottom: 0;
|
||||
overflow-y: auto;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.addMember-list-item {
|
||||
padding: 8px 20px;
|
||||
margin-bottom: 1px;
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.addMember-list-item > .avatar {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.addMember-list-item.addMember-selected, .addMember-list-item:hover {
|
||||
background-color: #f3f7f9;
|
||||
}
|
||||
+610
@@ -0,0 +1,610 @@
|
||||
/**
|
||||
* jQuery Selective v0.3.5
|
||||
* https://github.com/amazingSurge/jquery-selective
|
||||
*
|
||||
* Copyright (c) amazingSurge
|
||||
* Released under the LGPL-3.0 license
|
||||
*/
|
||||
import $$1 from 'jquery';
|
||||
|
||||
/*eslint no-empty-function: "off"*/
|
||||
var DEFAULTS = {
|
||||
namespace: 'selective',
|
||||
buildFromHtml: true,
|
||||
closeOnSelect: false,
|
||||
local: null,
|
||||
selected: null,
|
||||
withSearch: false,
|
||||
searchType: null, //'change' or 'keyup'
|
||||
ajax: {
|
||||
work: false,
|
||||
url: null,
|
||||
quietMills: null,
|
||||
loadMore: false,
|
||||
pageSize: null
|
||||
},
|
||||
query: function() {}, //function(api, search_text, page) {},
|
||||
tpl: {
|
||||
frame: function() {
|
||||
return `<div class="${this.namespace}"><div class="${this.namespace}-trigger">${this.options.tpl.triggerButton.call(this)}<div class="${this.namespace}-trigger-dropdown"><div class="${this.namespace}-list-wrap">${this.options.tpl.list.call(this)}</div></div></div>${this.options.tpl.items.call(this)}</div>`;
|
||||
},
|
||||
search: function() {
|
||||
return `<input class="${this.namespace}-search" type="text" placeholder="Search...">`;
|
||||
},
|
||||
select: function() {
|
||||
return `<select class="${this.namespace}-select" name="${this.namespace}" multiple="multiple"></select>`;
|
||||
},
|
||||
optionValue: function(data) {
|
||||
if('name' in data) {
|
||||
return data.name;
|
||||
}
|
||||
return data;
|
||||
},
|
||||
option: function(content) {
|
||||
return `<option value="${this.options.tpl.optionValue.call(this)}">${content}</option>`;
|
||||
},
|
||||
items: function() {
|
||||
return `<ul class="${this.namespace}-items"></ul>`;
|
||||
},
|
||||
item: function(content) {
|
||||
return `<li class="${this.namespace}-item">${content}${this.options.tpl.itemRemove.call(this)}</li>`;
|
||||
},
|
||||
itemRemove: function() {
|
||||
return `<span class="${this.namespace}-remove">x</span>`;
|
||||
},
|
||||
triggerButton: function() {
|
||||
return `<div class="${this.namespace}-trigger-button">Add</div>`;
|
||||
},
|
||||
list: function() {
|
||||
return `<ul class="${this.namespace}-list"></ul>`;
|
||||
},
|
||||
listItem: function(content) {
|
||||
return `<li class="${this.namespace}-list-item">${content}</li>`;
|
||||
}
|
||||
},
|
||||
|
||||
onBeforeShow: null,
|
||||
onAfterShow: null,
|
||||
onBeforeHide: null,
|
||||
onAfterHide: null,
|
||||
onBeforeSearch: null,
|
||||
onAfterSearch: null,
|
||||
onBeforeSelected: null,
|
||||
onAfterSelected: null,
|
||||
onBeforeUnselect: null,
|
||||
onAfterUnselect: null,
|
||||
onBeforeItemRemove: null,
|
||||
onAfterItemRemove: null,
|
||||
onBeforeItemAdd: null,
|
||||
onAfterItemAdd: null
|
||||
};
|
||||
|
||||
class Options {
|
||||
constructor(instance) {
|
||||
this.instance = instance;
|
||||
}
|
||||
|
||||
getOptions() {
|
||||
this.instance.$options = this.instance.$select.find('option');
|
||||
return this.instance.$options;
|
||||
}
|
||||
|
||||
select(opt) {
|
||||
$(opt).prop('selected', true);
|
||||
return this.instance;
|
||||
}
|
||||
|
||||
unselect(opt) {
|
||||
$(opt).prop('selected', false);
|
||||
return this.instance;
|
||||
}
|
||||
|
||||
add(data) {
|
||||
/*eslint consistent-return: "off"*/
|
||||
if (this.instance.options.buildFromHtml === false &&
|
||||
this.instance.getItem('option', this.instance.$select, this.instance.options.tpl.optionValue(data)) === undefined) {
|
||||
const $option = $(this.instance.options.tpl.option.call(this.instance, data));
|
||||
|
||||
this.instance.setIndex($option, data);
|
||||
this.instance.$select.append($option);
|
||||
return $option;
|
||||
}
|
||||
}
|
||||
|
||||
remove(opt) {
|
||||
$(opt).remove();
|
||||
return this.instance;
|
||||
}
|
||||
}
|
||||
|
||||
class List {
|
||||
constructor(instance) {
|
||||
this.instance = instance;
|
||||
}
|
||||
|
||||
build(data) {
|
||||
const $list = $('<ul></ul>');
|
||||
const $options = this.instance._options.getOptions();
|
||||
if (this.instance.options.buildFromHtml === true) {
|
||||
if ($options.length !== 0) {
|
||||
$.each($options, (i, n) => {
|
||||
const $li = $(this.instance.options.tpl.listItem.call(this.instance, n.text));
|
||||
const $n = $(n);
|
||||
this.instance.setIndex($li, $n);
|
||||
if ($n.attr('selected') !== undefined) {
|
||||
this.instance.select($li);
|
||||
}
|
||||
$list.append($li);
|
||||
});
|
||||
}
|
||||
} else if (data !== null) {
|
||||
$.each(data, i => {
|
||||
const $li = $(this.instance.options.tpl.listItem.call(this.instance, data[i]));
|
||||
|
||||
this.instance.setIndex($li, data[i]);
|
||||
$list.append($li);
|
||||
});
|
||||
|
||||
if ($options.length !== 0) {
|
||||
$.each($options, (i, n) => {
|
||||
const $n = $(n);
|
||||
const li = this.instance.getItem('li', $list, this.instance.options.tpl.optionValue($n.data('selective_index')));
|
||||
|
||||
if (li !== undefined) {
|
||||
this.instance._list.select(li);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
this.instance.$list.append($list.children('li'));
|
||||
return this.instance;
|
||||
}
|
||||
|
||||
buildSearch() {
|
||||
if (this.instance.options.withSearch === true) {
|
||||
this.instance.$triggerDropdown.prepend(this.instance.options.tpl.search.call(this.instance));
|
||||
this.instance.$search = this.instance.$triggerDropdown.find(`.${this.instance.namespace}-search`);
|
||||
}
|
||||
return this.instance;
|
||||
}
|
||||
|
||||
select(obj) {
|
||||
this.instance._trigger("beforeSelected");
|
||||
$(obj).addClass(`${this.instance.namespace}-selected`);
|
||||
this.instance._trigger("afterSelected");
|
||||
return this.instance;
|
||||
}
|
||||
|
||||
unselect(obj) {
|
||||
this.instance._trigger("beforeUnselected");
|
||||
$(obj).removeClass(`${this.instance.namespace}-selected`);
|
||||
this.instance._trigger("afterUnselected");
|
||||
return this.instance;
|
||||
}
|
||||
|
||||
click() {
|
||||
const that = this;
|
||||
this.instance.$list.on('click', 'li', function() {
|
||||
const $this = $(this);
|
||||
if (!$this.hasClass(`${that.instance.namespace}-selected`)) {
|
||||
that.instance.select($this);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
filter(val) {
|
||||
$.expr[':'].Contains = (a, i, m) => jQuery(a).text().toUpperCase().includes(m[3].toUpperCase());
|
||||
if (val) {
|
||||
this.instance.$list.find(`li:not(:Contains(${val}))`).slideUp();
|
||||
this.instance.$list.find(`li:Contains(${val})`).slideDown();
|
||||
} else {
|
||||
this.instance.$list.children('li').slideDown();
|
||||
}
|
||||
return this.instance;
|
||||
}
|
||||
|
||||
loadMore() {
|
||||
const pageMax = this.instance.options.ajax.pageSize || 9999;
|
||||
|
||||
this.instance.$listWrap.on('scroll.selective', () => {
|
||||
if (pageMax > this.instance.page) {
|
||||
const listHeight = this.instance.$list.outerHeight(true);
|
||||
const wrapHeight = this.instance.$listWrap.outerHeight();
|
||||
const wrapScrollTop = this.instance.$listWrap.scrollTop();
|
||||
const below = listHeight - wrapHeight - wrapScrollTop;
|
||||
if (below === 0) {
|
||||
this.instance.options.query(this.instance, this.instance.$search.val(), ++this.instance.page);
|
||||
}
|
||||
}
|
||||
});
|
||||
return this.instance;
|
||||
}
|
||||
|
||||
loadMoreRemove() {
|
||||
this.instance.$listWrap.off('scroll.selective');
|
||||
return this.instance;
|
||||
}
|
||||
}
|
||||
|
||||
class Search {
|
||||
constructor(instance) {
|
||||
this.instance = instance;
|
||||
}
|
||||
|
||||
change() {
|
||||
this.instance.$search.change(() => {
|
||||
this.instance._trigger("beforeSearch");
|
||||
if (this.instance.options.buildFromHtml === true) {
|
||||
this.instance._list.filter(this.instance.$search.val());
|
||||
} else if (this.instance.$search.val() !== '') {
|
||||
this.instance.page = 1;
|
||||
|
||||
this.instance.options.query(this.instance, this.instance.$search.val(), this.instance.page);
|
||||
} else {
|
||||
this.instance.update(this.instance.options.local);
|
||||
}
|
||||
this.instance._trigger("afterSearch");
|
||||
});
|
||||
}
|
||||
|
||||
keyup() {
|
||||
const quietMills = this.instance.options.ajax.quietMills || 1000;
|
||||
let oldValue = '';
|
||||
let currentValue = '';
|
||||
let timeout;
|
||||
|
||||
this.instance.$search.on('keyup', e => {
|
||||
this.instance._trigger("beforeSearch");
|
||||
currentValue = this.instance.$search.val();
|
||||
if (this.instance.options.buildFromHtml === true) {
|
||||
if (currentValue !== oldValue) {
|
||||
this.instance._list.filter(currentValue);
|
||||
}
|
||||
} else if (currentValue !== oldValue || e.keyCode === 13) {
|
||||
window.clearTimeout(timeout);
|
||||
timeout = window.setTimeout(() => {
|
||||
if (currentValue !== '') {
|
||||
this.instance.page = 1;
|
||||
this.instance.options.query(this.instance, currentValue, this.instance.page);
|
||||
} else {
|
||||
this.instance.update(this.instance.options.local);
|
||||
}
|
||||
}, quietMills);
|
||||
}
|
||||
oldValue = currentValue;
|
||||
this.instance._trigger("afterSearch");
|
||||
});
|
||||
}
|
||||
|
||||
bind(type) {
|
||||
if (type === 'change') {
|
||||
this.change();
|
||||
} else if (type === 'keyup') {
|
||||
this.keyup();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
class Items {
|
||||
constructor(instance) {
|
||||
this.instance = instance;
|
||||
}
|
||||
|
||||
withDefaults(data) {
|
||||
if (data !== null) {
|
||||
$.each(data, i => {
|
||||
this.instance._options.add(data[i]);
|
||||
this.instance._options.select(this.instance.getItem('option', this.instance.$select, this.instance.options.tpl.optionValue(data[i])));
|
||||
this.instance._items.add(data[i]);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
add(data, content) {
|
||||
let $item;
|
||||
|
||||
let fill;
|
||||
if (this.instance.options.buildFromHtml === true) {
|
||||
fill = content;
|
||||
} else {
|
||||
fill = data;
|
||||
}
|
||||
$item = $(this.instance.options.tpl.item.call(this.instance, fill));
|
||||
this.instance.setIndex($item, data);
|
||||
this.instance.$items.append($item);
|
||||
}
|
||||
|
||||
remove(obj) {
|
||||
obj = $(obj);
|
||||
let $li;
|
||||
let $option;
|
||||
if (this.instance.options.buildFromHtml === true) {
|
||||
this.instance._list.unselect(obj.data('selective_index'));
|
||||
this.instance._options.unselect(obj.data('selective_index').data('selective_index'));
|
||||
} else {
|
||||
$li = this.instance.getItem('li', this.instance.$list, this.instance.options.tpl.optionValue(obj.data('selective_index')));
|
||||
if ($li !== undefined) {
|
||||
this.instance._list.unselect($li);
|
||||
}
|
||||
$option = this.instance.getItem('option', this.instance.$select, this.instance.options.tpl.optionValue(obj.data('selective_index')));
|
||||
this.instance._options.unselect($option)._options.remove($option);
|
||||
}
|
||||
|
||||
obj.remove();
|
||||
return this.instance;
|
||||
}
|
||||
|
||||
click() {
|
||||
const that = this;
|
||||
this.instance.$items.on('click', `.${this.instance.namespace}-remove`, function() {
|
||||
const $this = $(this);
|
||||
const $item = $this.parents('li');
|
||||
that.instance.itemRemove($item);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
const NAMESPACE$1 = 'selective';
|
||||
|
||||
/**
|
||||
* Plugin constructor
|
||||
**/
|
||||
class Selective {
|
||||
constructor(element, options = {}) {
|
||||
this.element = element;
|
||||
this.$element = $$1(element).hide() || $$1('<select></select>');
|
||||
|
||||
this.options = $$1.extend(true, {}, DEFAULTS, options);
|
||||
|
||||
this.namespace = this.options.namespace;
|
||||
|
||||
const $frame = $$1(this.options.tpl.frame.call(this));
|
||||
|
||||
//get the select
|
||||
const _build = () => {
|
||||
this.$element.html(this.options.tpl.select.call(this));
|
||||
return this.$element.children('select');
|
||||
};
|
||||
|
||||
this.$select = this.$element.is('select') === true ? this.$element : _build();
|
||||
|
||||
this.$element.after($frame);
|
||||
|
||||
this.init();
|
||||
this.opened = false;
|
||||
}
|
||||
|
||||
init() {
|
||||
this.$selective = this.$element.next(`.${this.namespace}`);
|
||||
this.$items = this.$selective.find(`.${this.namespace}-items`);
|
||||
this.$trigger = this.$selective.find(`.${this.namespace}-trigger`);
|
||||
this.$triggerButton = this.$selective.find(`.${this.namespace}-trigger-button`);
|
||||
this.$triggerDropdown = this.$selective.find(`.${this.namespace}-trigger-dropdown`);
|
||||
this.$listWrap = this.$selective.find(`.${this.namespace}-list-wrap`);
|
||||
this.$list = this.$selective.find(`.${this.namespace}-list`);
|
||||
|
||||
this._list = new List(this);
|
||||
this._options = new Options(this);
|
||||
this._search = new Search(this);
|
||||
this._items = new Items(this);
|
||||
|
||||
this._items.withDefaults(this.options.selected);
|
||||
this.update(this.options.local)._list.buildSearch();
|
||||
|
||||
this.$triggerButton.on('click', () => {
|
||||
if (this.opened === false) {
|
||||
this.show();
|
||||
} else {
|
||||
this.hide();
|
||||
}
|
||||
});
|
||||
|
||||
this._list.click(this);
|
||||
this._items.click(this);
|
||||
|
||||
if (this.options.withSearch === true) {
|
||||
this._search.bind(this.options.searchType);
|
||||
}
|
||||
|
||||
this._trigger('ready');
|
||||
}
|
||||
|
||||
_trigger(eventType, ...params) {
|
||||
let data = [this].concat(params);
|
||||
|
||||
// event
|
||||
this.$element.trigger(`${NAMESPACE$1}::${eventType}`, data);
|
||||
|
||||
// callback
|
||||
eventType = eventType.replace(/\b\w+\b/g, (word) => {
|
||||
return word.substring(0, 1).toUpperCase() + word.substring(1);
|
||||
});
|
||||
let onFunction = `on${eventType}`;
|
||||
|
||||
if (typeof this.options[onFunction] === 'function') {
|
||||
this.options[onFunction].apply(this, params);
|
||||
}
|
||||
}
|
||||
|
||||
_show() {
|
||||
$$1(document).on('click.selective', e => {
|
||||
if (this.options.closeOnSelect === true) {
|
||||
if ($$1(e.target).closest(this.$triggerButton).length === 0 &&
|
||||
$$1(e.target).closest(this.$search).length === 0) {
|
||||
this._hide();
|
||||
}
|
||||
} else if ($$1(e.target).closest(this.$trigger).length === 0) {
|
||||
this._hide();
|
||||
}
|
||||
});
|
||||
|
||||
this.$trigger.addClass(`${this.namespace}-active`);
|
||||
this.opened = true;
|
||||
|
||||
if (this.options.ajax.loadMore === true) {
|
||||
this._list.loadMore();
|
||||
}
|
||||
return this;
|
||||
}
|
||||
|
||||
_hide() {
|
||||
$$1(document).off('click.selective');
|
||||
|
||||
this.$trigger.removeClass(`${this.namespace}-active`);
|
||||
this.opened = false;
|
||||
|
||||
if (this.options.ajax.loadMore === true) {
|
||||
this._list.loadMoreRemove();
|
||||
}
|
||||
return this;
|
||||
}
|
||||
|
||||
show() {
|
||||
this._trigger("beforeShow");
|
||||
this._show();
|
||||
this._trigger("afterShow");
|
||||
return this;
|
||||
}
|
||||
|
||||
hide() {
|
||||
this._trigger("beforeHide");
|
||||
this._hide();
|
||||
this._trigger("afterHide");
|
||||
return this;
|
||||
}
|
||||
|
||||
select($li) {
|
||||
this._list.select($li);
|
||||
const data = $li.data('selective_index');
|
||||
|
||||
if (this.options.buildFromHtml === true) {
|
||||
this._options.select(data);
|
||||
this.itemAdd($li, data.text());
|
||||
} else {
|
||||
this._options.add(data);
|
||||
this._options.select(this.getItem('option', this.$select, this.options.tpl.optionValue(data)));
|
||||
this.itemAdd(data);
|
||||
}
|
||||
|
||||
return this;
|
||||
}
|
||||
|
||||
unselect($li) {
|
||||
this._list.unselect($li);
|
||||
return this;
|
||||
}
|
||||
|
||||
setIndex(obj, index) {
|
||||
obj.data('selective_index', index);
|
||||
return this;
|
||||
}
|
||||
|
||||
getItem(type, $list, index) {
|
||||
const $items = $list.children(type);
|
||||
let position = '';
|
||||
for (let i = 0; i < $items.length; i++) {
|
||||
if (this.options.tpl.optionValue($items.eq(i).data('selective_index')) === index) {
|
||||
position = i;
|
||||
}
|
||||
}
|
||||
return position === '' ? undefined : $items.eq(position);
|
||||
}
|
||||
|
||||
itemAdd(data, content) {
|
||||
this._trigger("beforeItemAdd");
|
||||
this._items.add(data, content);
|
||||
this._trigger("afterItemAdd");
|
||||
|
||||
return this;
|
||||
}
|
||||
|
||||
itemRemove($li) {
|
||||
this._trigger("beforeItemRemove");
|
||||
this._items.remove($li);
|
||||
this._trigger("afterItemRemove");
|
||||
|
||||
return this;
|
||||
}
|
||||
|
||||
optionAdd(data) {
|
||||
this._options.add(data);
|
||||
|
||||
return this;
|
||||
}
|
||||
|
||||
optionRemove(opt) {
|
||||
this._options.remove(opt);
|
||||
|
||||
return this;
|
||||
}
|
||||
|
||||
update(data) {
|
||||
this.$list.empty();
|
||||
this.page = 1;
|
||||
if (data !== null) {
|
||||
this._list.build(data);
|
||||
} else {
|
||||
this._list.build();
|
||||
}
|
||||
|
||||
return this;
|
||||
}
|
||||
|
||||
destroy() {
|
||||
this.$selective.remove();
|
||||
this.$element.show();
|
||||
$$1(document).off('click.selective');
|
||||
|
||||
this._trigger('destroy');
|
||||
}
|
||||
|
||||
static setDefaults(options) {
|
||||
$$1.extend(true, DEFAULTS, $$1.isPlainObject(options) && options);
|
||||
}
|
||||
}
|
||||
|
||||
var info = {
|
||||
version:'0.3.5'
|
||||
};
|
||||
|
||||
const NAMESPACE = 'selective';
|
||||
const OtherSelective = $$1.fn.selective;
|
||||
|
||||
const jQuerySelective = function(options, ...args) {
|
||||
if (typeof options === 'string') {
|
||||
const method = options;
|
||||
|
||||
if (/^_/.test(method)) {
|
||||
return false;
|
||||
} else if ((/^(get)/.test(method))) {
|
||||
const instance = this.first().data(NAMESPACE);
|
||||
if (instance && typeof instance[method] === 'function') {
|
||||
return instance[method](...args);
|
||||
}
|
||||
} else {
|
||||
return this.each(function() {
|
||||
const instance = $$1.data(this, NAMESPACE);
|
||||
if (instance && typeof instance[method] === 'function') {
|
||||
instance[method](...args);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
return this.each(function() {
|
||||
if (!$$1(this).data(NAMESPACE)) {
|
||||
$$1(this).data(NAMESPACE, new Selective(this, options));
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
$$1.fn.selective = jQuerySelective;
|
||||
|
||||
$$1.selective = $$1.extend({
|
||||
setDefaults: Selective.setDefaults,
|
||||
noConflict: function() {
|
||||
$$1.fn.selective = OtherSelective;
|
||||
return jQuerySelective;
|
||||
}
|
||||
}, info);
|
||||
+879
@@ -0,0 +1,879 @@
|
||||
/**
|
||||
* jQuery Selective v0.3.5
|
||||
* https://github.com/amazingSurge/jquery-selective
|
||||
*
|
||||
* Copyright (c) amazingSurge
|
||||
* Released under the LGPL-3.0 license
|
||||
*/
|
||||
(
|
||||
|
||||
function(global, factory) {
|
||||
if (typeof define === "function" && define.amd) {
|
||||
define(['jquery'], factory);
|
||||
} else if (typeof exports !== "undefined") {
|
||||
factory(require('jquery'));
|
||||
} else {
|
||||
var mod = {
|
||||
exports: {}
|
||||
};
|
||||
factory(global.jQuery);
|
||||
global.jquerySelectiveEs = mod.exports;
|
||||
}
|
||||
}
|
||||
)(this,
|
||||
|
||||
function(_jquery) {
|
||||
'use strict';
|
||||
|
||||
var _jquery2 = _interopRequireDefault(_jquery);
|
||||
|
||||
function _interopRequireDefault(obj) {
|
||||
return obj && obj.__esModule ? obj : {
|
||||
default: obj
|
||||
};
|
||||
}
|
||||
|
||||
var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ?
|
||||
|
||||
function(obj) {
|
||||
return typeof obj;
|
||||
}
|
||||
:
|
||||
|
||||
function(obj) {
|
||||
return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
|
||||
};
|
||||
|
||||
function _classCallCheck(instance, Constructor) {
|
||||
if (!(instance instanceof Constructor)) {
|
||||
throw new TypeError("Cannot call a class as a function");
|
||||
}
|
||||
}
|
||||
|
||||
var _createClass = function() {
|
||||
function defineProperties(target, props) {
|
||||
for (var i = 0; i < props.length; i++) {
|
||||
var descriptor = props[i];
|
||||
descriptor.enumerable = descriptor.enumerable || false;
|
||||
descriptor.configurable = true;
|
||||
|
||||
if ("value" in descriptor)
|
||||
descriptor.writable = true;
|
||||
Object.defineProperty(target, descriptor.key, descriptor);
|
||||
}
|
||||
}
|
||||
|
||||
return function(Constructor, protoProps, staticProps) {
|
||||
if (protoProps)
|
||||
defineProperties(Constructor.prototype, protoProps);
|
||||
|
||||
if (staticProps)
|
||||
defineProperties(Constructor, staticProps);
|
||||
|
||||
return Constructor;
|
||||
};
|
||||
}();
|
||||
|
||||
/*eslint no-empty-function: "off"*/
|
||||
var DEFAULTS = {
|
||||
namespace: 'selective',
|
||||
buildFromHtml: true,
|
||||
closeOnSelect: false,
|
||||
local: null,
|
||||
selected: null,
|
||||
withSearch: false,
|
||||
searchType: null, //'change' or 'keyup'
|
||||
ajax: {
|
||||
work: false,
|
||||
url: null,
|
||||
quietMills: null,
|
||||
loadMore: false,
|
||||
pageSize: null
|
||||
},
|
||||
query: function query() {}, //function(api, search_text, page) {},
|
||||
tpl: {
|
||||
frame: function frame() {
|
||||
return '<div class="' + this.namespace + '"><div class="' + this.namespace + '-trigger">' + this.options.tpl.triggerButton.call(this) + '<div class="' + this.namespace + '-trigger-dropdown"><div class="' + this.namespace + '-list-wrap">' + this.options.tpl.list.call(this) + '</div></div></div>' + this.options.tpl.items.call(this) + '</div>';
|
||||
},
|
||||
search: function search() {
|
||||
return '<input class="' + this.namespace + '-search" type="text" placeholder="Search...">';
|
||||
},
|
||||
select: function select() {
|
||||
return '<select class="' + this.namespace + '-select" name="' + this.namespace + '" multiple="multiple"></select>';
|
||||
},
|
||||
optionValue: function optionValue(data) {
|
||||
if ('name' in data) {
|
||||
|
||||
return data.name;
|
||||
}
|
||||
|
||||
return data;
|
||||
},
|
||||
option: function option(content) {
|
||||
return '<option value="' + this.options.tpl.optionValue.call(this) + '">' + content + '</option>';
|
||||
},
|
||||
items: function items() {
|
||||
return '<ul class="' + this.namespace + '-items"></ul>';
|
||||
},
|
||||
item: function item(content) {
|
||||
return '<li class="' + this.namespace + '-item">' + content + this.options.tpl.itemRemove.call(this) + '</li>';
|
||||
},
|
||||
itemRemove: function itemRemove() {
|
||||
return '<span class="' + this.namespace + '-remove">x</span>';
|
||||
},
|
||||
triggerButton: function triggerButton() {
|
||||
return '<div class="' + this.namespace + '-trigger-button">Add</div>';
|
||||
},
|
||||
list: function list() {
|
||||
return '<ul class="' + this.namespace + '-list"></ul>';
|
||||
},
|
||||
listItem: function listItem(content) {
|
||||
return '<li class="' + this.namespace + '-list-item">' + content + '</li>';
|
||||
}
|
||||
},
|
||||
|
||||
onBeforeShow: null,
|
||||
onAfterShow: null,
|
||||
onBeforeHide: null,
|
||||
onAfterHide: null,
|
||||
onBeforeSearch: null,
|
||||
onAfterSearch: null,
|
||||
onBeforeSelected: null,
|
||||
onAfterSelected: null,
|
||||
onBeforeUnselect: null,
|
||||
onAfterUnselect: null,
|
||||
onBeforeItemRemove: null,
|
||||
onAfterItemRemove: null,
|
||||
onBeforeItemAdd: null,
|
||||
onAfterItemAdd: null
|
||||
};
|
||||
|
||||
var Options = function() {
|
||||
function Options(instance) {
|
||||
_classCallCheck(this, Options);
|
||||
|
||||
this.instance = instance;
|
||||
}
|
||||
|
||||
_createClass(Options, [{
|
||||
key: 'getOptions',
|
||||
value: function getOptions() {
|
||||
this.instance.$options = this.instance.$select.find('option');
|
||||
|
||||
return this.instance.$options;
|
||||
}
|
||||
}, {
|
||||
key: 'select',
|
||||
value: function select(opt) {
|
||||
$(opt).prop('selected', true);
|
||||
|
||||
return this.instance;
|
||||
}
|
||||
}, {
|
||||
key: 'unselect',
|
||||
value: function unselect(opt) {
|
||||
$(opt).prop('selected', false);
|
||||
|
||||
return this.instance;
|
||||
}
|
||||
}, {
|
||||
key: 'add',
|
||||
value: function add(data) {
|
||||
/*eslint consistent-return: "off"*/
|
||||
|
||||
if (this.instance.options.buildFromHtml === false && this.instance.getItem('option', this.instance.$select, this.instance.options.tpl.optionValue(data)) === undefined) {
|
||||
var $option = $(this.instance.options.tpl.option.call(this.instance, data));
|
||||
|
||||
this.instance.setIndex($option, data);
|
||||
this.instance.$select.append($option);
|
||||
|
||||
return $option;
|
||||
}
|
||||
}
|
||||
}, {
|
||||
key: 'remove',
|
||||
value: function remove(opt) {
|
||||
$(opt).remove();
|
||||
|
||||
return this.instance;
|
||||
}
|
||||
}]);
|
||||
|
||||
return Options;
|
||||
}();
|
||||
|
||||
var List = function() {
|
||||
function List(instance) {
|
||||
_classCallCheck(this, List);
|
||||
|
||||
this.instance = instance;
|
||||
}
|
||||
|
||||
_createClass(List, [{
|
||||
key: 'build',
|
||||
value: function build(data) {
|
||||
var _this = this;
|
||||
|
||||
var $list = $('<ul></ul>');
|
||||
var $options = this.instance._options.getOptions();
|
||||
|
||||
if (this.instance.options.buildFromHtml === true) {
|
||||
|
||||
if ($options.length !== 0) {
|
||||
$.each($options,
|
||||
|
||||
function(i, n) {
|
||||
var $li = $(_this.instance.options.tpl.listItem.call(_this.instance, n.text));
|
||||
var $n = $(n);
|
||||
_this.instance.setIndex($li, $n);
|
||||
|
||||
if ($n.attr('selected') !== undefined) {
|
||||
_this.instance.select($li);
|
||||
}
|
||||
$list.append($li);
|
||||
}
|
||||
);
|
||||
}
|
||||
} else if (data !== null) {
|
||||
$.each(data,
|
||||
|
||||
function(i) {
|
||||
var $li = $(_this.instance.options.tpl.listItem.call(_this.instance, data[i]));
|
||||
|
||||
_this.instance.setIndex($li, data[i]);
|
||||
$list.append($li);
|
||||
}
|
||||
);
|
||||
|
||||
if ($options.length !== 0) {
|
||||
$.each($options,
|
||||
|
||||
function(i, n) {
|
||||
var $n = $(n);
|
||||
var li = _this.instance.getItem('li', $list, _this.instance.options.tpl.optionValue($n.data('selective_index')));
|
||||
|
||||
if (li !== undefined) {
|
||||
_this.instance._list.select(li);
|
||||
}
|
||||
}
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
this.instance.$list.append($list.children('li'));
|
||||
|
||||
return this.instance;
|
||||
}
|
||||
}, {
|
||||
key: 'buildSearch',
|
||||
value: function buildSearch() {
|
||||
if (this.instance.options.withSearch === true) {
|
||||
this.instance.$triggerDropdown.prepend(this.instance.options.tpl.search.call(this.instance));
|
||||
this.instance.$search = this.instance.$triggerDropdown.find('.' + this.instance.namespace + '-search');
|
||||
}
|
||||
|
||||
return this.instance;
|
||||
}
|
||||
}, {
|
||||
key: 'select',
|
||||
value: function select(obj) {
|
||||
this.instance._trigger("beforeSelected");
|
||||
$(obj).addClass(this.instance.namespace + '-selected');
|
||||
this.instance._trigger("afterSelected");
|
||||
|
||||
return this.instance;
|
||||
}
|
||||
}, {
|
||||
key: 'unselect',
|
||||
value: function unselect(obj) {
|
||||
this.instance._trigger("beforeUnselected");
|
||||
$(obj).removeClass(this.instance.namespace + '-selected');
|
||||
this.instance._trigger("afterUnselected");
|
||||
|
||||
return this.instance;
|
||||
}
|
||||
}, {
|
||||
key: 'click',
|
||||
value: function click() {
|
||||
var that = this;
|
||||
this.instance.$list.on('click', 'li',
|
||||
|
||||
function() {
|
||||
var $this = $(this);
|
||||
|
||||
if (!$this.hasClass(that.instance.namespace + '-selected')) {
|
||||
that.instance.select($this);
|
||||
}
|
||||
}
|
||||
);
|
||||
}
|
||||
}, {
|
||||
key: 'filter',
|
||||
value: function filter(val) {
|
||||
$.expr[':'].Contains = function(a, i, m) {
|
||||
return jQuery(a).text().toUpperCase().includes(m[3].toUpperCase());
|
||||
}
|
||||
;
|
||||
|
||||
if (val) {
|
||||
this.instance.$list.find('li:not(:Contains(' + val + '))').slideUp();
|
||||
this.instance.$list.find('li:Contains(' + val + ')').slideDown();
|
||||
} else {
|
||||
this.instance.$list.children('li').slideDown();
|
||||
}
|
||||
|
||||
return this.instance;
|
||||
}
|
||||
}, {
|
||||
key: 'loadMore',
|
||||
value: function loadMore() {
|
||||
var _this2 = this;
|
||||
|
||||
var pageMax = this.instance.options.ajax.pageSize || 9999;
|
||||
|
||||
this.instance.$listWrap.on('scroll.selective',
|
||||
|
||||
function() {
|
||||
if (pageMax > _this2.instance.page) {
|
||||
var listHeight = _this2.instance.$list.outerHeight(true);
|
||||
var wrapHeight = _this2.instance.$listWrap.outerHeight();
|
||||
var wrapScrollTop = _this2.instance.$listWrap.scrollTop();
|
||||
var below = listHeight - wrapHeight - wrapScrollTop;
|
||||
|
||||
if (below === 0) {
|
||||
_this2.instance.options.query(_this2.instance, _this2.instance.$search.val(), ++_this2.instance.page);
|
||||
}
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
return this.instance;
|
||||
}
|
||||
}, {
|
||||
key: 'loadMoreRemove',
|
||||
value: function loadMoreRemove() {
|
||||
this.instance.$listWrap.off('scroll.selective');
|
||||
|
||||
return this.instance;
|
||||
}
|
||||
}]);
|
||||
|
||||
return List;
|
||||
}();
|
||||
|
||||
var Search = function() {
|
||||
function Search(instance) {
|
||||
_classCallCheck(this, Search);
|
||||
|
||||
this.instance = instance;
|
||||
}
|
||||
|
||||
_createClass(Search, [{
|
||||
key: 'change',
|
||||
value: function change() {
|
||||
var _this3 = this;
|
||||
|
||||
this.instance.$search.change(
|
||||
|
||||
function() {
|
||||
_this3.instance._trigger("beforeSearch");
|
||||
|
||||
if (_this3.instance.options.buildFromHtml === true) {
|
||||
_this3.instance._list.filter(_this3.instance.$search.val());
|
||||
} else if (_this3.instance.$search.val() !== '') {
|
||||
_this3.instance.page = 1;
|
||||
|
||||
_this3.instance.options.query(_this3.instance, _this3.instance.$search.val(), _this3.instance.page);
|
||||
} else {
|
||||
_this3.instance.update(_this3.instance.options.local);
|
||||
}
|
||||
_this3.instance._trigger("afterSearch");
|
||||
}
|
||||
);
|
||||
}
|
||||
}, {
|
||||
key: 'keyup',
|
||||
value: function keyup() {
|
||||
var _this4 = this;
|
||||
|
||||
var quietMills = this.instance.options.ajax.quietMills || 1000;
|
||||
var oldValue = '';
|
||||
var currentValue = '';
|
||||
var timeout = void 0;
|
||||
|
||||
this.instance.$search.on('keyup',
|
||||
|
||||
function(e) {
|
||||
_this4.instance._trigger("beforeSearch");
|
||||
currentValue = _this4.instance.$search.val();
|
||||
|
||||
if (_this4.instance.options.buildFromHtml === true) {
|
||||
|
||||
if (currentValue !== oldValue) {
|
||||
_this4.instance._list.filter(currentValue);
|
||||
}
|
||||
} else if (currentValue !== oldValue || e.keyCode === 13) {
|
||||
window.clearTimeout(timeout);
|
||||
timeout = window.setTimeout(
|
||||
|
||||
function() {
|
||||
if (currentValue !== '') {
|
||||
_this4.instance.page = 1;
|
||||
_this4.instance.options.query(_this4.instance, currentValue, _this4.instance.page);
|
||||
} else {
|
||||
_this4.instance.update(_this4.instance.options.local);
|
||||
}
|
||||
}
|
||||
, quietMills);
|
||||
}
|
||||
oldValue = currentValue;
|
||||
_this4.instance._trigger("afterSearch");
|
||||
}
|
||||
);
|
||||
}
|
||||
}, {
|
||||
key: 'bind',
|
||||
value: function bind(type) {
|
||||
if (type === 'change') {
|
||||
this.change();
|
||||
} else if (type === 'keyup') {
|
||||
this.keyup();
|
||||
}
|
||||
}
|
||||
}]);
|
||||
|
||||
return Search;
|
||||
}();
|
||||
|
||||
var Items = function() {
|
||||
function Items(instance) {
|
||||
_classCallCheck(this, Items);
|
||||
|
||||
this.instance = instance;
|
||||
}
|
||||
|
||||
_createClass(Items, [{
|
||||
key: 'withDefaults',
|
||||
value: function withDefaults(data) {
|
||||
var _this5 = this;
|
||||
|
||||
if (data !== null) {
|
||||
$.each(data,
|
||||
|
||||
function(i) {
|
||||
_this5.instance._options.add(data[i]);
|
||||
_this5.instance._options.select(_this5.instance.getItem('option', _this5.instance.$select, _this5.instance.options.tpl.optionValue(data[i])));
|
||||
_this5.instance._items.add(data[i]);
|
||||
}
|
||||
);
|
||||
}
|
||||
}
|
||||
}, {
|
||||
key: 'add',
|
||||
value: function add(data, content) {
|
||||
var $item = void 0;
|
||||
|
||||
var fill = void 0;
|
||||
|
||||
if (this.instance.options.buildFromHtml === true) {
|
||||
fill = content;
|
||||
} else {
|
||||
fill = data;
|
||||
}
|
||||
$item = $(this.instance.options.tpl.item.call(this.instance, fill));
|
||||
this.instance.setIndex($item, data);
|
||||
this.instance.$items.append($item);
|
||||
}
|
||||
}, {
|
||||
key: 'remove',
|
||||
value: function remove(obj) {
|
||||
obj = $(obj);
|
||||
var $li = void 0;
|
||||
var $option = void 0;
|
||||
|
||||
if (this.instance.options.buildFromHtml === true) {
|
||||
this.instance._list.unselect(obj.data('selective_index'));
|
||||
this.instance._options.unselect(obj.data('selective_index').data('selective_index'));
|
||||
} else {
|
||||
$li = this.instance.getItem('li', this.instance.$list, this.instance.options.tpl.optionValue(obj.data('selective_index')));
|
||||
|
||||
if ($li !== undefined) {
|
||||
this.instance._list.unselect($li);
|
||||
}
|
||||
$option = this.instance.getItem('option', this.instance.$select, this.instance.options.tpl.optionValue(obj.data('selective_index')));
|
||||
this.instance._options.unselect($option)._options.remove($option);
|
||||
}
|
||||
|
||||
obj.remove();
|
||||
|
||||
return this.instance;
|
||||
}
|
||||
}, {
|
||||
key: 'click',
|
||||
value: function click() {
|
||||
var that = this;
|
||||
this.instance.$items.on('click', '.' + this.instance.namespace + '-remove',
|
||||
|
||||
function() {
|
||||
var $this = $(this);
|
||||
var $item = $this.parents('li');
|
||||
that.instance.itemRemove($item);
|
||||
}
|
||||
);
|
||||
}
|
||||
}]);
|
||||
|
||||
return Items;
|
||||
}();
|
||||
|
||||
var NAMESPACE$1 = 'selective';
|
||||
|
||||
/**
|
||||
* Plugin constructor
|
||||
**/
|
||||
|
||||
var Selective = function() {
|
||||
function Selective(element) {
|
||||
var _this6 = this;
|
||||
|
||||
var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
|
||||
|
||||
_classCallCheck(this, Selective);
|
||||
|
||||
this.element = element;
|
||||
this.$element = (0, _jquery2.default)(element).hide() || (0, _jquery2.default)('<select></select>');
|
||||
|
||||
this.options = _jquery2.default.extend(true, {}, DEFAULTS, options);
|
||||
|
||||
this.namespace = this.options.namespace;
|
||||
|
||||
var $frame = (0, _jquery2.default)(this.options.tpl.frame.call(this));
|
||||
|
||||
//get the select
|
||||
var _build = function _build() {
|
||||
_this6.$element.html(_this6.options.tpl.select.call(_this6));
|
||||
|
||||
return _this6.$element.children('select');
|
||||
};
|
||||
|
||||
this.$select = this.$element.is('select') === true ? this.$element : _build();
|
||||
|
||||
this.$element.after($frame);
|
||||
|
||||
this.init();
|
||||
this.opened = false;
|
||||
}
|
||||
|
||||
_createClass(Selective, [{
|
||||
key: 'init',
|
||||
value: function init() {
|
||||
var _this7 = this;
|
||||
|
||||
this.$selective = this.$element.next('.' + this.namespace);
|
||||
this.$items = this.$selective.find('.' + this.namespace + '-items');
|
||||
this.$trigger = this.$selective.find('.' + this.namespace + '-trigger');
|
||||
this.$triggerButton = this.$selective.find('.' + this.namespace + '-trigger-button');
|
||||
this.$triggerDropdown = this.$selective.find('.' + this.namespace + '-trigger-dropdown');
|
||||
this.$listWrap = this.$selective.find('.' + this.namespace + '-list-wrap');
|
||||
this.$list = this.$selective.find('.' + this.namespace + '-list');
|
||||
|
||||
this._list = new List(this);
|
||||
this._options = new Options(this);
|
||||
this._search = new Search(this);
|
||||
this._items = new Items(this);
|
||||
|
||||
this._items.withDefaults(this.options.selected);
|
||||
this.update(this.options.local)._list.buildSearch();
|
||||
|
||||
this.$triggerButton.on('click',
|
||||
|
||||
function() {
|
||||
if (_this7.opened === false) {
|
||||
_this7.show();
|
||||
} else {
|
||||
_this7.hide();
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
this._list.click(this);
|
||||
this._items.click(this);
|
||||
|
||||
if (this.options.withSearch === true) {
|
||||
this._search.bind(this.options.searchType);
|
||||
}
|
||||
|
||||
this._trigger('ready');
|
||||
}
|
||||
}, {
|
||||
key: '_trigger',
|
||||
value: function _trigger(eventType) {
|
||||
for (var _len = arguments.length, params = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
|
||||
params[_key - 1] = arguments[_key];
|
||||
}
|
||||
|
||||
var data = [this].concat(params);
|
||||
|
||||
// event
|
||||
this.$element.trigger(NAMESPACE$1 + '::' + eventType, data);
|
||||
|
||||
// callback
|
||||
eventType = eventType.replace(/\b\w+\b/g,
|
||||
|
||||
function(word) {
|
||||
return word.substring(0, 1).toUpperCase() + word.substring(1);
|
||||
}
|
||||
);
|
||||
var onFunction = 'on' + eventType;
|
||||
|
||||
if (typeof this.options[onFunction] === 'function') {
|
||||
this.options[onFunction].apply(this, params);
|
||||
}
|
||||
}
|
||||
}, {
|
||||
key: '_show',
|
||||
value: function _show() {
|
||||
var _this8 = this;
|
||||
|
||||
(0, _jquery2.default)(document).on('click.selective',
|
||||
|
||||
function(e) {
|
||||
if (_this8.options.closeOnSelect === true) {
|
||||
|
||||
if ((0, _jquery2.default)(e.target).closest(_this8.$triggerButton).length === 0 && (0, _jquery2.default)(e.target).closest(_this8.$search).length === 0) {
|
||||
_this8._hide();
|
||||
}
|
||||
} else if ((0, _jquery2.default)(e.target).closest(_this8.$trigger).length === 0) {
|
||||
_this8._hide();
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
this.$trigger.addClass(this.namespace + '-active');
|
||||
this.opened = true;
|
||||
|
||||
if (this.options.ajax.loadMore === true) {
|
||||
this._list.loadMore();
|
||||
}
|
||||
|
||||
return this;
|
||||
}
|
||||
}, {
|
||||
key: '_hide',
|
||||
value: function _hide() {
|
||||
(0, _jquery2.default)(document).off('click.selective');
|
||||
|
||||
this.$trigger.removeClass(this.namespace + '-active');
|
||||
this.opened = false;
|
||||
|
||||
if (this.options.ajax.loadMore === true) {
|
||||
this._list.loadMoreRemove();
|
||||
}
|
||||
|
||||
return this;
|
||||
}
|
||||
}, {
|
||||
key: 'show',
|
||||
value: function show() {
|
||||
this._trigger("beforeShow");
|
||||
this._show();
|
||||
this._trigger("afterShow");
|
||||
|
||||
return this;
|
||||
}
|
||||
}, {
|
||||
key: 'hide',
|
||||
value: function hide() {
|
||||
this._trigger("beforeHide");
|
||||
this._hide();
|
||||
this._trigger("afterHide");
|
||||
|
||||
return this;
|
||||
}
|
||||
}, {
|
||||
key: 'select',
|
||||
value: function select($li) {
|
||||
this._list.select($li);
|
||||
var data = $li.data('selective_index');
|
||||
|
||||
if (this.options.buildFromHtml === true) {
|
||||
this._options.select(data);
|
||||
this.itemAdd($li, data.text());
|
||||
} else {
|
||||
this._options.add(data);
|
||||
this._options.select(this.getItem('option', this.$select, this.options.tpl.optionValue(data)));
|
||||
this.itemAdd(data);
|
||||
}
|
||||
|
||||
return this;
|
||||
}
|
||||
}, {
|
||||
key: 'unselect',
|
||||
value: function unselect($li) {
|
||||
this._list.unselect($li);
|
||||
|
||||
return this;
|
||||
}
|
||||
}, {
|
||||
key: 'setIndex',
|
||||
value: function setIndex(obj, index) {
|
||||
obj.data('selective_index', index);
|
||||
|
||||
return this;
|
||||
}
|
||||
}, {
|
||||
key: 'getItem',
|
||||
value: function getItem(type, $list, index) {
|
||||
var $items = $list.children(type);
|
||||
var position = '';
|
||||
|
||||
for (var i = 0; i < $items.length; i++) {
|
||||
|
||||
if (this.options.tpl.optionValue($items.eq(i).data('selective_index')) === index) {
|
||||
position = i;
|
||||
}
|
||||
}
|
||||
|
||||
return position === '' ? undefined : $items.eq(position);
|
||||
}
|
||||
}, {
|
||||
key: 'itemAdd',
|
||||
value: function itemAdd(data, content) {
|
||||
this._trigger("beforeItemAdd");
|
||||
this._items.add(data, content);
|
||||
this._trigger("afterItemAdd");
|
||||
|
||||
return this;
|
||||
}
|
||||
}, {
|
||||
key: 'itemRemove',
|
||||
value: function itemRemove($li) {
|
||||
this._trigger("beforeItemRemove");
|
||||
this._items.remove($li);
|
||||
this._trigger("afterItemRemove");
|
||||
|
||||
return this;
|
||||
}
|
||||
}, {
|
||||
key: 'optionAdd',
|
||||
value: function optionAdd(data) {
|
||||
this._options.add(data);
|
||||
|
||||
return this;
|
||||
}
|
||||
}, {
|
||||
key: 'optionRemove',
|
||||
value: function optionRemove(opt) {
|
||||
this._options.remove(opt);
|
||||
|
||||
return this;
|
||||
}
|
||||
}, {
|
||||
key: 'update',
|
||||
value: function update(data) {
|
||||
this.$list.empty();
|
||||
this.page = 1;
|
||||
|
||||
if (data !== null) {
|
||||
this._list.build(data);
|
||||
} else {
|
||||
this._list.build();
|
||||
}
|
||||
|
||||
return this;
|
||||
}
|
||||
}, {
|
||||
key: 'destroy',
|
||||
value: function destroy() {
|
||||
this.$selective.remove();
|
||||
this.$element.show();
|
||||
(0, _jquery2.default)(document).off('click.selective');
|
||||
|
||||
this._trigger('destroy');
|
||||
}
|
||||
}], [{
|
||||
key: 'setDefaults',
|
||||
value: function setDefaults(options) {
|
||||
_jquery2.default.extend(true, DEFAULTS, _jquery2.default.isPlainObject(options) && options);
|
||||
}
|
||||
}]);
|
||||
|
||||
return Selective;
|
||||
}();
|
||||
|
||||
var info = {
|
||||
version: '0.3.5'
|
||||
};
|
||||
|
||||
var NAMESPACE = 'selective';
|
||||
var OtherSelective = _jquery2.default.fn.selective;
|
||||
|
||||
var jQuerySelective = function jQuerySelective(options) {
|
||||
var _this9 = this;
|
||||
|
||||
for (var _len2 = arguments.length, args = Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
|
||||
args[_key2 - 1] = arguments[_key2];
|
||||
}
|
||||
|
||||
if (typeof options === 'string') {
|
||||
var _ret = function() {
|
||||
var method = options;
|
||||
|
||||
if (/^_/.test(method)) {
|
||||
|
||||
return {
|
||||
v: false
|
||||
};
|
||||
} else if (/^(get)/.test(method)) {
|
||||
var instance = _this9.first().data(NAMESPACE);
|
||||
|
||||
if (instance && typeof instance[method] === 'function') {
|
||||
|
||||
return {
|
||||
v: instance[method].apply(instance, args)
|
||||
};
|
||||
}
|
||||
} else {
|
||||
|
||||
return {
|
||||
v: _this9.each(
|
||||
|
||||
function() {
|
||||
var instance = _jquery2.default.data(this, NAMESPACE);
|
||||
|
||||
if (instance && typeof instance[method] === 'function') {
|
||||
instance[method].apply(instance, args);
|
||||
}
|
||||
}
|
||||
)
|
||||
};
|
||||
}
|
||||
}();
|
||||
|
||||
if ((typeof _ret === 'undefined' ? 'undefined' : _typeof(_ret)) === "object")
|
||||
|
||||
return _ret.v;
|
||||
}
|
||||
|
||||
return this.each(
|
||||
|
||||
function() {
|
||||
if (!(0, _jquery2.default)(this).data(NAMESPACE)) {
|
||||
(0, _jquery2.default)(this).data(NAMESPACE, new Selective(this, options));
|
||||
}
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
_jquery2.default.fn.selective = jQuerySelective;
|
||||
|
||||
_jquery2.default.selective = _jquery2.default.extend({
|
||||
setDefaults: Selective.setDefaults,
|
||||
noConflict: function noConflict() {
|
||||
_jquery2.default.fn.selective = OtherSelective;
|
||||
|
||||
return jQuerySelective;
|
||||
}
|
||||
}, info);
|
||||
}
|
||||
);
|
||||
+1
@@ -0,0 +1 @@
|
||||
.addMember .avatar{display:inline-block;width:30px}.addMember-items{display:inline-block;padding-left:0;margin-bottom:0;vertical-align:middle;list-style:none}.addMember-item{position:relative;display:inline-block;margin-right:10px}.addMember-item:hover .addMember-remove{display:block}.addMember-remove{position:absolute;top:-2px;right:-2px;display:none;font-size:10px;line-height:1;color:#ff666b;cursor:pointer;background-color:#fff;border-radius:50%}.addMember-trigger{position:relative;display:inline-block;vertical-align:middle}.addMember-trigger-button{width:30px;height:30px;line-height:28px;color:#fff;text-align:center;cursor:pointer;background-color:#dcdfe3;border-radius:50%}.addMember-trigger-button:hover{background-color:#e6e9ed}.addMember-trigger-dropdown{position:absolute;top:0;left:45px;z-index:1200;display:none;padding:1px;background-color:#fff;box-shadow:0 2px 12px rgba(0,0,0,.2)}.addMember-trigger-dropdown:before{position:absolute;top:6px;left:-19px;display:block;width:0;height:0;content:"";border-color:transparent #fff transparent transparent;border-style:solid;border-width:10px}.addMember-trigger.addMember-active .addMember-trigger-dropdown{display:block}.addMember-list{max-height:260px;padding-left:0;margin-bottom:0;overflow-y:auto;list-style:none}.addMember-list-item{padding:8px 20px;margin-bottom:1px;white-space:nowrap;cursor:pointer}.addMember-list-item>.avatar{margin-right:10px}.addMember-list-item.addMember-selected,.addMember-list-item:hover{background-color:#f3f7f9}
|
||||
+8
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user