13:beb624a234a7 default tip
Anton Shestakov <av6@dwimlabs.net>, Wed, 22 Jun 2016 16:32:13 +0800
demo: remove trailing spaces

previous change 8:216800922816

jquery.lensy.js

Permissions: -rw-r--r--

Other formats: Feeds:
(function($) {
"use strict";
function Lensy(element, options) {
this.$select = $(element);
this.configure(options);
this.build();
this.bindEvents();
}
Lensy.prototype = {
configure: function(options) {
this.settings = $.extend({}, $.fn.lensy.defaults, options);
},
build: function() {
this.$filter = $('<input>')
.attr('type', 'text')
.addClass(this.settings.filterClass);
this.$filterWrap = $('<div>')
.addClass(this.settings.filterWrapClass)
.append(this.$filter);
this.$container = $('<ul>')
.addClass(this.settings.containerClass);
this.$closeButton = $('<a>')
.text(this.settings.closeButtonText)
.addClass(this.settings.closeButtonClass);
this.$widget = $('<ul>')
.addClass(this.settings.widgetClass)
.insertAfter(this.$select);
this.$modal = $('<div>')
.addClass(this.settings.modalClass)
.append(this.$filterWrap)
.append(this.$container)
.append(this.$closeButton)
.appendTo('body')
.hide();
this.$select.hide();
},
show: function() {
this.$modal.show();
this.$filter.focus();
},
hide: function() {
this.$modal.hide();
},
createItem: function($option) {
var value = $option.val();
var text = $option.text();
return $('<li>')
.addClass(this.settings.itemClass)
.attr('data-original-value', value)
.attr('data-original-text', text)
.data('$option', $option)
.html(this.settings.itemFn(value, text, $option));
},
createWidgetItem: function($item) {
var value = $item.attr('data-original-value');
var text = $item.attr('data-original-text');
var $option = $item.data('$option');
return $('<li>')
.addClass(this.settings.itemClass)
.html((this.settings.widgetItemFn || this.settings.itemFn)(value, text, $option));
},
filter: function() {
var self = this;
this.$container.find('[data-original-value]').each(function() {
var $item = $(this);
var value = $item.attr('data-original-value');
var text = $item.attr('data-original-text');
if (self.settings.filterFn(self.$filter.val(), value, text, $item)) {
$item.show();
} else {
$item.hide();
}
});
},
update: function() {
var self = this;
var values = this.$select.val() || [];
this.$widget.empty();
this.$container.find('[data-original-value]').each(function() {
var $item = $(this);
var value = $item.attr('data-original-value');
if (values.indexOf(value) == -1) {
$item.removeClass(self.settings.itemActiveClass);
} else {
$item.addClass(self.settings.itemActiveClass);
var $widgetItem = self.createWidgetItem($item);
self.$widget.append($widgetItem);
}
});
},
bindEvents: function() {
var self = this;
this.$widget.click($.proxy(this.show, this));
this.$closeButton.click($.proxy(this.hide, this));
// $item in $container gets clicked on
var itemSelected = function() {
var $item = $(this);
var value = $item.attr('data-original-value');
var values = self.$select.val() || [];
if (values.indexOf(value) == -1) {
self.$select.val(values.concat(value));
} else {
self.$select.val($.grep(values, function(v) { return v != value; }));
}
self.$select.trigger('change');
};
// $container is populated with $items
this.$select.find('option').each(function() {
var $option = $(this);
var $item = self.createItem($option);
$item.on('click', itemSelected);
self.$container.append($item);
});
this.$select.on('change', $.proxy(this.update, this));
this.update();
this.$filter.on('change keyup', $.proxy(this.filter, this));
}
};
$.fn.lensy = function(options) {
return this.each(function() {
if (!$.data(this, 'lensy')) {
$.data(this, 'lensy', new Lensy(this, options));
}
});
};
$.fn.lensy.defaults = {
// escape action: close / clean filter
containerClass: 'lensy-container',
closeButtonText: 'Close',
closeButtonClass: 'lensy-button',
modalClass: 'lensy-modal',
filterClass: 'lensy-filter',
filterWrapClass: 'lensy-filter-wrap',
widgetClass: 'lensy-widget',
itemClass: 'lensy-item',
itemActiveClass: 'active',
itemFn: function(value, text) { return $('<span>').text(text); },
widgetItemFn: undefined,
filterFn: function(filterString, value, text) { return text.toLowerCase().indexOf(filterString.toLowerCase()) != -1; }
};
})(jQuery);