Ui Selected
Ui Selected
Ui Selected
var $ = require('jquery');
var UI = require('./core');
// require('./ui.dropdown');
/**
* Selected
* @desc HTML select replacer
* @via https://github.com/silviomoreto/bootstrap-select
* @license https://github.com/silviomoreto/bootstrap-select/blob/master/LICENSE
* @param element
* @param options
* @constructor
*/
Selected.DEFAULTS = {
btnWidth: null,
btnSize: null,
btnStyle: 'default',
dropUp: 0,
maxHeight: null,
maxChecked: null,
placeholder: '点击选择...',
selectedClass: 'am-checked',
disabledClass: 'am-disabled',
searchBox: false,
tpl: '<div class="am-selected am-dropdown ' +
'<%= dropUp ? \'am-dropdown-up\': \'\' %>" id="<%= id %>" data-am-dropdown>' +
' <button type="button" class="am-selected-btn am-btn am-dropdown-toggle">' +
' <span class="am-selected-status am-fl"></span>' +
' <i class="am-selected-icon am-icon-caret-' +
'<%= dropUp ? \'up\' : \'down\' %>"></i>' +
' </button>' +
' <div class="am-selected-content am-dropdown-content">' +
' <h2 class="am-selected-header">' +
'<span class="am-icon-chevron-left">返回</span></h2>' +
' <% if (searchBox) { %>' +
' <div class="am-selected-search">' +
' <input autocomplete="off" class="am-form-field am-input-sm" />' +
' </div>' +
' <% } %>' +
' <ul class="am-selected-list">' +
' <% for (var i = 0; i < options.length; i++) { %>' +
' <% var option = options[i] %>' +
' <% if (option.header) { %>' +
' <li data-group="<%= option.group %>" class="am-selected-list-header">' +
' <%= option.text %></li>' +
' <% } else { %>' +
' <li class="<%= option.classNames%>" ' +
' data-index="<%= option.index %>" ' +
' data-group="<%= option.group || 0 %>" ' +
' data-value="<%= option.value %>" >' +
' <span class="am-selected-text"><%= option.text %></span>' +
' <i class="am-icon-check"></i></li>' +
' <% } %>' +
' <% } %>' +
' </ul>' +
' <div class="am-selected-hint"></div>' +
' </div>' +
'</div>',
listTpl: '<% for (var i = 0; i < options.length; i++) { %>' +
' <% var option = options[i] %>' +
' <% if (option.header) { %>' +
' <li data-group="<%= option.group %>" class="am-selected-list-header">' +
' <%= option.text %></li>' +
' <% } else { %>' +
' <li class="<%= option.classNames %>" ' +
' data-index="<%= option.index %>" ' +
' data-group="<%= option.group || 0 %>" ' +
' data-value="<%= option.value %>" >' +
' <span class="am-selected-text"><%= option.text %></span>' +
' <i class="am-icon-check"></i></li>' +
' <% } %>' +
' <% } %>'
};
Selected.prototype.init = function() {
var _this = this;
var $element = this.$element;
var options = this.options;
$element.hide();
var data = {
id: UI.utils.generateGUID('am-selected'),
multiple: this.multiple,
options: [],
searchBox: options.searchBox,
dropUp: options.dropUp,
placeholder: options.placeholder
};
this.$list = this.$selector.find('.am-selected-list');
this.$searchField = this.$selector.find('.am-selected-search input');
this.$hint = this.$selector.find('.am-selected-hint');
this.$selector.dropdown({
justify: $selectorBtn
});
if ($element[0].required) {
hint.push('必选');
}
if (min || max) {
min && hint.push('至少选择 ' + min + ' 项');
max && hint.push('至多选择 ' + max + ' 项');
}
this.$hint.text(hint.join(','));
Selected.prototype.renderOptions = function() {
var $element = this.$element;
var options = this.options;
var optionItems = [];
var $optgroup = $element.find('optgroup');
this.$originalOptions = this.$element.find('option');
optionItems.push({
group: group,
index: index,
classNames: classNames,
text: item.text,
value: item.value
});
}
$optgroup.eq(i).find('option').each(function(index, item) {
pushOption(index, item, i);
});
});
} else {
// without option groups
this.$originalOptions.each(function(index, item) {
pushOption(index, item, null);
});
}
this.$list.html(UI.template(options.listTpl, {options: optionItems}));
this.$shadowOptions = this.$list.find('> li').
not('.am-selected-list-header');
};
Selected.prototype.setChecked = function(item) {
var options = this.options;
var $item = $(item);
var isChecked = $item.hasClass(options.selectedClass);
if (this.multiple) {
// multiple
var checkedLength = this.$list.find('.' + options.selectedClass).length;
return false;
}
} else {
// close dropdown whether item is checked or not
// @see #860
this.dropdown.close();
if (isChecked) {
return false;
}
this.$shadowOptions.not($item).removeClass(options.selectedClass);
}
$item.toggleClass(options.selectedClass);
this.syncData(item);
};
/**
* syncData
*
* @description if `item` set, only sync `item` related option
* @param {Object} [item]
*/
Selected.prototype.syncData = function(item) {
var _this = this;
var options = this.options;
var status = [];
var $checked = $([]);
this.$shadowOptions.filter('.' + options.selectedClass).each(function() {
var $this = $(this);
status.push($this.find('.am-selected-text').text());
if (!item) {
$checked = $checked.add(_this.$originalOptions
.filter('[value="' + $this.data('value') + '"]')
.prop('selected', true));
}
});
if (item) {
var $item = $(item);
this.$originalOptions
.filter('[value="' + $item.data('value') + '"]')
.prop('selected', $item.hasClass(options.selectedClass));
} else {
this.$originalOptions.not($checked).prop('selected', false);
}
// nothing selected
if (!this.$element.val()) {
status = [options.placeholder];
}
this.$status.text(status.join(', '));
Selected.prototype.bindEvents = function() {
var _this = this;
var header = 'am-selected-list-header';
var handleKeyup = UI.utils.debounce(function(e) {
_this.$shadowOptions.not('.' + header).hide().
filter(':containsNC("' + e.target.value + '")').show();
}, 100);
// observe DOM
if (UI.support.mutationobserver) {
this.observer = new UI.support.mutationobserver(function() {
_this.$element.trigger('changed.selected.amui');
});
this.observer.observe(this.$element[0], {
childList: true,
subtree: true,
characterData: true
});
}
// custom event
this.$element.on('changed.selected.amui', function() {
_this.renderOptions();
_this.syncData();
});
};
// @since: 2.5
Selected.prototype.select = function(item) {
var $item;
$item.trigger('click');
};
// @since: 2.5
Selected.prototype.enable = function() {
this.$element.prop('disable', false);
this.$selector.dropdown('enable');
};
// @since: 2.5
Selected.prototype.disable = function() {
this.$element.prop('disable', true);
this.$selector.dropdown('disable');
};
Selected.prototype.destroy = function() {
this.$element.removeData('amui.selected').show();
this.$selector.remove();
};
UI.plugin('selected', Selected);
module.exports = Selected;