Commits

Anton Shestakov committed 612d082

Store variables in instance aka "var self = this".

Comments (0)

Files changed (1)

 (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();
     
     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);
             
-            $widget
-                .insertAfter($select);
+            this.$closeButton = $('<a>')
+                .text(this.settings.closeButtonText)
+                .addClass(this.settings.closeButtonClass);
             
-            $modal
-                .append($filter)
-                .append($container)
-                .append($closeButton)
-                .appendTo('body');
+            this.$widget = $('<ul>')
+                .addClass(this.settings.widgetClass)
+                .insertAfter(this.$select);
+            
+            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));
         }
     };