--- a/jquery.lensy.js Sun May 05 20:12:26 2013 +0900
+++ b/jquery.lensy.js Sun May 05 22:15:37 2013 +0900
- var settings, $select, $widget, $modal, $filter, $container, $closeButton;
function Lensy(element, options) {
- settings = $.extend({}, $.fn.lensy.defaults, options);
+ this.$select = $(element);
+ this.settings = $.extend({}, $.fn.lensy.defaults, options);
- $widget = $('<ul>').addClass(settings.widgetClass);
- $modal = $('<div>').addClass(settings.modalClass).hide();
- $filter = $('<input>').attr('type', 'text').addClass(settings.filterClass);
- $container = $('<ul>').addClass(settings.containerClass);
- $closeButton = $('<a>').text(settings.closeButtonText).addClass(settings.closeButtonClass);
+ this.$filter = $('<input>')
+ .addClass(this.settings.filterClass);
+ 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.$container)
+ .append(this.$closeButton)
+ createItem: function(value) {
+ .addClass(this.settings.itemClass)
+ .attr('data-original-value', value)
+ .html(this.settings.itemFn(value));
+ createWidgetItem: function(value) {
+ .addClass(this.settings.itemClass)
+ .html((this.settings.widgetItemFn || this.settings.itemFn)(value));
+ this.$container.find('[data-original-value]').each(function() {
+ var value = $item.attr('data-original-value');
+ if (self.settings.filterFn(self.$filter.val(), value, $item)) {
+ var values = this.$select.val() || [];
+ this.$container.find('[data-original-value]').each(function() {
+ var value = $item.attr('data-original-value');
+ if (values.indexOf(value) == -1) {
+ $item.removeClass(self.settings.itemActiveClass);
+ $item.addClass(self.settings.itemActiveClass);
+ var $widgetItem = self.createWidgetItem(value);
+ self.$widget.append($widgetItem);
- $widget.click($.proxy(this.show, this));
- $closeButton.click($.proxy(this.hide, 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 value = $item.attr('data-original-value');
- var values = $select.val() || [];
+ var values = self.$select.val() || [];
if (values.indexOf(value) == -1) {
- $select.val(values.concat(value));
+ self.$select.val(values.concat(value));
- $select.val($.grep(values, function(v) { return v != value; }));
+ self.$select.val($.grep(values, function(v) { return v != value; }));
- $select.trigger('change');
+ self.$select.trigger('change');
// $container is populated with $items
- $select.find('option').each(function() {
+ this.$select.find('option').each(function() {
- var $item = $('<li>').addClass(settings.itemClass);
- $item.attr('data-original-value', $option.val());
- $item.html(settings.itemFn($option.val()));
- $container.append($item);
+ var $item = self.createItem($option.val());
$item.on('click', itemSelected);
+ self.$container.append($item);
- var update = function() {
- var values = $select.val() || [];
- $container.find('[data-original-value]').each(function() {
- var value = $item.attr('data-original-value');
- if (values.indexOf(value) == -1) {
- $item.removeClass(settings.itemActiveClass);
- $item.addClass(settings.itemActiveClass);
- var $widgetItem = $('<li>').addClass(settings.itemClass);
- $widgetItem.html((settings.widgetItemFn || settings.itemFn)(value));
- $widget.append($widgetItem);
+ this.$select.on('change', $.proxy(this.update, this));
- $select.on('change', update);
- var filter = function() {
- $container.find('[data-original-value]').each(function() {
- var value = $item.attr('data-original-value');
- if (settings.filterFn($filter.val(), value, $item)) {
- $filter.on('change keyup', filter);
+ this.$filter.on('change keyup', $.proxy(this.filter, this));