Download:
child 3:cd531665699b
parent 1:73d980e47217
2:612d0821dd74
Anton Shestakov <engored@ya.ru>, Sun, 05 May 2013 22:15:37 +0900
Store variables in instance aka "var self = this".

1 файлов изменено, 87 вставок(+), 71 удалений(-) [+]
jquery.lensy.js file | annotate | diff | comparison | revisions
--- a/jquery.lensy.js Sun May 05 20:12:26 2013 +0900
+++ b/jquery.lensy.js Sun May 05 22:15:37 2013 +0900
@@ -1,11 +1,9 @@
(function($) {
"use strict";
- var settings, $select, $widget, $modal, $filter, $container, $closeButton;
-
function Lensy(element, options) {
- $select = $(element);
- settings = $.extend({}, $.fn.lensy.defaults, options);
+ this.$select = $(element);
+ this.settings = $.extend({}, $.fn.lensy.defaults, options);
this.build();
this.bindEvents();
@@ -13,104 +11,122 @@
Lensy.prototype = {
build: function() {
- $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>')
+ .attr('type', 'text')
+ .addClass(this.settings.filterClass);
- $select.hide();
+ this.$container = $('<ul>')
+ .addClass(this.settings.containerClass);
+
+ this.$closeButton = $('<a>')
+ .text(this.settings.closeButtonText)
+ .addClass(this.settings.closeButtonClass);
- $widget
- .insertAfter($select);
+ this.$widget = $('<ul>')
+ .addClass(this.settings.widgetClass)
+ .insertAfter(this.$select);
- $modal
- .append($filter)
- .append($container)
- .append($closeButton)
- .appendTo('body');
+ this.$modal = $('<div>')
+ .addClass(this.settings.modalClass)
+ .append(this.$filter)
+ .append(this.$container)
+ .append(this.$closeButton)
+ .appendTo('body')
+ .hide();
+
+ this.$select.hide();
},
show: function() {
- $modal.show();
- $filter.focus();
+ this.$modal.show();
+ this.$filter.focus();
},
hide: function() {
- $modal.hide();
+ this.$modal.hide();
+ },
+
+ createItem: function(value) {
+ return $('<li>')
+ .addClass(this.settings.itemClass)
+ .attr('data-original-value', value)
+ .html(this.settings.itemFn(value));
+ },
+
+ createWidgetItem: function(value) {
+ return $('<li>')
+ .addClass(this.settings.itemClass)
+ .html((this.settings.widgetItemFn || this.settings.itemFn)(value));
+ },
+
+ filter: function() {
+ var self = this;
+
+ this.$container.find('[data-original-value]').each(function() {
+ var $item = $(this);
+ var value = $item.attr('data-original-value');
+ if (self.settings.filterFn(self.$filter.val(), value, $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(value);
+ self.$widget.append($widgetItem);
+ }
+ });
},
bindEvents: function() {
- $widget.click($.proxy(this.show, this));
+ var self = 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 $item = $(this);
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));
} else {
- $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 $option = $(this);
- 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() || [];
-
- $widget.empty();
- $container.find('[data-original-value]').each(function() {
- var $item = $(this);
- var value = $item.attr('data-original-value');
-
- if (values.indexOf(value) == -1) {
- $item.removeClass(settings.itemActiveClass);
- } else {
- $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));
+ this.update();
- $select.on('change', update);
- update();
-
- var filter = function() {
- $container.find('[data-original-value]').each(function() {
- var $item = $(this);
- var value = $item.attr('data-original-value');
- if (settings.filterFn($filter.val(), value, $item)) {
- $item.show();
- } else {
- $item.hide();
- }
- });
- };
-
- $filter.on('change keyup', filter);
- filter();
-
- return this;
+ this.$filter.on('change keyup', $.proxy(this.filter, this));
}
};