Add proof-of-concept decorator for clearing

dist/js/select2.amd.full.js

@@ -46,13 +46,13 @@ define('select2/utils',[], function () {
     function DecoratedClass () {
       var unshift = Array.prototype.unshift;
 
-      unshift.call(arguments, SuperClass.prototype.constructor);
-
       var argCount = DecoratorClass.prototype.constructor.length;
 
       var calledConstructor = SuperClass.prototype.constructor;
 
       if (argCount > 0) {
+        unshift.call(arguments, SuperClass.prototype.constructor);
+
         calledConstructor = DecoratorClass.prototype.constructor;
       }
 
@@ -74,23 +74,26 @@ define('select2/utils',[], function () {
     for (var m = 0; m < decoratedMethods.length; m++) {
       var methodName = decoratedMethods[m];
 
-      var originalMethod = function () {};
+      function calledMethod (methodName) {
+        // Stub out the original method if it's not decorating an actual method
+        var originalMethod = function () {};
 
-      if (methodName in DecoratedClass.prototype) {
-        originalMethod = DecoratedClass.prototype[methodName];
-      }
+        if (methodName in DecoratedClass.prototype) {
+          originalMethod = DecoratedClass.prototype[methodName];
+        }
 
-      var decoratedMethod = DecoratorClass.prototype[methodName];
+        var decoratedMethod = DecoratorClass.prototype[methodName];
 
-      function calledMethod () {
-        var unshift = Array.prototype.unshift;
+        return function () {
+          var unshift = Array.prototype.unshift;
 
-        unshift.call(arguments, originalMethod);
+          unshift.call(arguments, originalMethod);
 
-        return decoratedMethod.apply(this, arguments);
+          return decoratedMethod.apply(this, arguments);
+        }
       }
 
-      DecoratedClass.prototype[methodName] = calledMethod;
+      DecoratedClass.prototype[methodName] = calledMethod(methodName);
     }
 
     return DecoratedClass;
@@ -275,8 +278,6 @@ define('select2/results',[
 
       var $options = self.$results.find(".option");
 
-      console.log($options);
-
       $options.each(function () {
         var $option = $(this);
         var item = $option.data("data");
@@ -430,7 +431,7 @@ define('select2/options',[
     this.dataAdapter = SelectData;
     this.resultsAdapter = ResultsList;
     this.dropdownAdapter = Dropdown;
-    this.selectionAdapter = Selection;
+    this.selectionAdapter = options.selectionAdapter || Selection;
   }
 
   return Options;

dist/js/select2.amd.js

@@ -46,13 +46,13 @@ define('select2/utils',[], function () {
     function DecoratedClass () {
       var unshift = Array.prototype.unshift;
 
-      unshift.call(arguments, SuperClass.prototype.constructor);
-
       var argCount = DecoratorClass.prototype.constructor.length;
 
       var calledConstructor = SuperClass.prototype.constructor;
 
       if (argCount > 0) {
+        unshift.call(arguments, SuperClass.prototype.constructor);
+
         calledConstructor = DecoratorClass.prototype.constructor;
       }
 
@@ -74,23 +74,26 @@ define('select2/utils',[], function () {
     for (var m = 0; m < decoratedMethods.length; m++) {
       var methodName = decoratedMethods[m];
 
-      var originalMethod = function () {};
+      function calledMethod (methodName) {
+        // Stub out the original method if it's not decorating an actual method
+        var originalMethod = function () {};
 
-      if (methodName in DecoratedClass.prototype) {
-        originalMethod = DecoratedClass.prototype[methodName];
-      }
+        if (methodName in DecoratedClass.prototype) {
+          originalMethod = DecoratedClass.prototype[methodName];
+        }
 
-      var decoratedMethod = DecoratorClass.prototype[methodName];
+        var decoratedMethod = DecoratorClass.prototype[methodName];
 
-      function calledMethod () {
-        var unshift = Array.prototype.unshift;
+        return function () {
+          var unshift = Array.prototype.unshift;
 
-        unshift.call(arguments, originalMethod);
+          unshift.call(arguments, originalMethod);
 
-        return decoratedMethod.apply(this, arguments);
+          return decoratedMethod.apply(this, arguments);
+        }
       }
 
-      DecoratedClass.prototype[methodName] = calledMethod;
+      DecoratedClass.prototype[methodName] = calledMethod(methodName);
     }
 
     return DecoratedClass;
@@ -275,8 +278,6 @@ define('select2/results',[
 
       var $options = self.$results.find(".option");
 
-      console.log($options);
-
       $options.each(function () {
         var $option = $(this);
         var item = $option.data("data");
@@ -430,7 +431,7 @@ define('select2/options',[
     this.dataAdapter = SelectData;
     this.resultsAdapter = ResultsList;
     this.dropdownAdapter = Dropdown;
-    this.selectionAdapter = Selection;
+    this.selectionAdapter = options.selectionAdapter || Selection;
   }
 
   return Options;

dist/js/select2.full.js

@@ -9583,13 +9583,13 @@ define('select2/utils',[], function () {
     function DecoratedClass () {
       var unshift = Array.prototype.unshift;
 
-      unshift.call(arguments, SuperClass.prototype.constructor);
-
       var argCount = DecoratorClass.prototype.constructor.length;
 
       var calledConstructor = SuperClass.prototype.constructor;
 
       if (argCount > 0) {
+        unshift.call(arguments, SuperClass.prototype.constructor);
+
         calledConstructor = DecoratorClass.prototype.constructor;
       }
 
@@ -9611,23 +9611,26 @@ define('select2/utils',[], function () {
     for (var m = 0; m < decoratedMethods.length; m++) {
       var methodName = decoratedMethods[m];
 
-      var originalMethod = function () {};
+      function calledMethod (methodName) {
+        // Stub out the original method if it's not decorating an actual method
+        var originalMethod = function () {};
 
-      if (methodName in DecoratedClass.prototype) {
-        originalMethod = DecoratedClass.prototype[methodName];
-      }
+        if (methodName in DecoratedClass.prototype) {
+          originalMethod = DecoratedClass.prototype[methodName];
+        }
 
-      var decoratedMethod = DecoratorClass.prototype[methodName];
+        var decoratedMethod = DecoratorClass.prototype[methodName];
 
-      function calledMethod () {
-        var unshift = Array.prototype.unshift;
+        return function () {
+          var unshift = Array.prototype.unshift;
 
-        unshift.call(arguments, originalMethod);
+          unshift.call(arguments, originalMethod);
 
-        return decoratedMethod.apply(this, arguments);
+          return decoratedMethod.apply(this, arguments);
+        }
       }
 
-      DecoratedClass.prototype[methodName] = calledMethod;
+      DecoratedClass.prototype[methodName] = calledMethod(methodName);
     }
 
     return DecoratedClass;
@@ -9812,8 +9815,6 @@ define('select2/results',[
 
       var $options = self.$results.find(".option");
 
-      console.log($options);
-
       $options.each(function () {
         var $option = $(this);
         var item = $option.data("data");
@@ -9967,7 +9968,7 @@ define('select2/options',[
     this.dataAdapter = SelectData;
     this.resultsAdapter = ResultsList;
     this.dropdownAdapter = Dropdown;
-    this.selectionAdapter = Selection;
+    this.selectionAdapter = options.selectionAdapter || Selection;
   }
 
   return Options;

dist/js/select2.js

@@ -474,13 +474,13 @@ define('select2/utils',[], function () {
     function DecoratedClass () {
       var unshift = Array.prototype.unshift;
 
-      unshift.call(arguments, SuperClass.prototype.constructor);
-
       var argCount = DecoratorClass.prototype.constructor.length;
 
       var calledConstructor = SuperClass.prototype.constructor;
 
       if (argCount > 0) {
+        unshift.call(arguments, SuperClass.prototype.constructor);
+
         calledConstructor = DecoratorClass.prototype.constructor;
       }
 
@@ -502,23 +502,26 @@ define('select2/utils',[], function () {
     for (var m = 0; m < decoratedMethods.length; m++) {
       var methodName = decoratedMethods[m];
 
-      var originalMethod = function () {};
+      function calledMethod (methodName) {
+        // Stub out the original method if it's not decorating an actual method
+        var originalMethod = function () {};
 
-      if (methodName in DecoratedClass.prototype) {
-        originalMethod = DecoratedClass.prototype[methodName];
-      }
+        if (methodName in DecoratedClass.prototype) {
+          originalMethod = DecoratedClass.prototype[methodName];
+        }
 
-      var decoratedMethod = DecoratorClass.prototype[methodName];
+        var decoratedMethod = DecoratorClass.prototype[methodName];
 
-      function calledMethod () {
-        var unshift = Array.prototype.unshift;
+        return function () {
+          var unshift = Array.prototype.unshift;
 
-        unshift.call(arguments, originalMethod);
+          unshift.call(arguments, originalMethod);
 
-        return decoratedMethod.apply(this, arguments);
+          return decoratedMethod.apply(this, arguments);
+        }
       }
 
-      DecoratedClass.prototype[methodName] = calledMethod;
+      DecoratedClass.prototype[methodName] = calledMethod(methodName);
     }
 
     return DecoratedClass;
@@ -703,8 +706,6 @@ define('select2/results',[
 
       var $options = self.$results.find(".option");
 
-      console.log($options);
-
       $options.each(function () {
         var $option = $(this);
         var item = $option.data("data");
@@ -858,7 +859,7 @@ define('select2/options',[
     this.dataAdapter = SelectData;
     this.resultsAdapter = ResultsList;
     this.dropdownAdapter = Dropdown;
-    this.selectionAdapter = Selection;
+    this.selectionAdapter = options.selectionAdapter || Selection;
   }
 
   return Options;

playground/basic/basic.html

@@ -120,29 +120,6 @@
     <option value="WV">West Virginia</option>
 </select>
 
-<div style="width: 300px; height: 300px; border: 1px solid black" tabindex="10" id="outer">
-    <div style="width:100px; height: 100px; border: 1px solid blue" id="inner"></div>
-</div>
-
-</div>
-
-
-<div style="position: absolute; left:0; top:0; background: white; border: 1px solid red;" id="focus-spy">hello there
-</div>
-<script>
-    $(function () {
-        var el = $("#focus-spy");
-        $(window).bind("scroll", function () {
-            el.css({top: $(window).scrollTop()});
-        });
-        window.setInterval(function () {
-            var a = document.activeElement;
-            var b = $(a);
-            el.html("tag: " + a.tagName + " id:" + a.id + " class:" + b.attr("class") + " val:" + b.val());
-        }, 100);
-    });
-</script>
-
 <script>
 require(["select2/core"], function (Select2) {
     var s2 = new Select2($("#source"));

playground/basic/decorators.html

@@ -0,0 +1,215 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <title>QUnit Example</title>
+    <link href="../../dist/css/select2.css" rel="stylesheet"/>
+
+    <script src="../../vendor/almond-0.2.9.js" type="text/javascript"></script>
+    <script src="../../vendor/jquery-2.1.0.js" type="text/javascript"></script>
+
+    <script src="../../dist/js/select2.js"></script>
+</head>
+<body>
+
+
+<input type="text" style="width:300px" autofocus/><br/>
+<select style="width:300px" id="source">
+    <option value="AK">Alaska</option>
+    <option value="HI">Hawaii</option>
+    <option value="CA">California</option>
+    <option value="NV">Nevada</option>
+    <option value="OR">Oregon</option>
+    <option value="WA">Washington</option>
+    <option value="AZ">Arizona</option>
+    <option value="CO">Colorado</option>
+    <option value="ID">Idaho</option>
+    <option value="MT">Montana</option>
+    <option value="NE">Nebraska</option>
+    <option value="NM">New Mexico</option>
+    <option value="ND">North Dakota</option>
+    <option value="UT">Utah</option>
+    <option value="WY">Wyoming</option>
+    <option value="AL">Alabama</option>
+    <option value="AR">Arkansas</option>
+    <option value="IL">Illinois</option>
+    <option value="IA">Iowa</option>
+    <option value="KS">Kansas</option>
+    <option value="KY">Kentucky</option>
+    <option value="LA">Louisiana</option>
+    <option value="MN">Minnesota</option>
+    <option value="MS">Mississippi</option>
+    <option value="MO">Missouri</option>
+    <option value="OK">Oklahoma</option>
+    <option value="SD">South Dakota</option>
+    <option value="TX">Texas</option>
+    <option value="TN">Tennessee</option>
+    <option value="WI">Wisconsin</option>
+    <option value="CT">Connecticut</option>
+    <option value="DE">Delaware</option>
+    <option value="FL">Florida</option>
+    <option value="GA">Georgia</option>
+    <option value="IN">Indiana</option>
+    <option value="ME">Maine</option>
+    <option value="MD">Maryland</option>
+    <option value="MA">Massachusetts</option>
+    <option value="MI">Michigan</option>
+    <option value="NH">New Hampshire</option>
+    <option value="NJ">New Jersey</option>
+    <option value="NY">New York</option>
+    <option value="NC">North Carolina</option>
+    <option value="OH">Ohio</option>
+    <option value="PA">Pennsylvania</option>
+    <option value="RI">Rhode Island</option>
+    <option value="SC">South Carolina</option>
+    <option value="VT">Vermont</option>
+    <option value="VA">Virginia</option>
+    <option value="WV">West Virginia</option>
+</select><br/>
+<input type="text" style="width:300px" /><br/>
+<select style="width:300px">
+    <option value="AK">Alaska</option>
+    <option value="HI">Hawaii</option>
+    <option value="CA">California</option>
+    <option value="NV">Nevada</option>
+    <option value="OR">Oregon</option>
+    <option value="WA">Washington</option>
+    <option value="AZ">Arizona</option>
+    <option value="CO">Colorado</option>
+    <option value="ID">Idaho</option>
+    <option value="MT">Montana</option>
+    <option value="NE">Nebraska</option>
+    <option value="NM">New Mexico</option>
+    <option value="ND">North Dakota</option>
+    <option value="UT">Utah</option>
+    <option value="WY">Wyoming</option>
+    <option value="AL">Alabama</option>
+    <option value="AR">Arkansas</option>
+    <option value="IL">Illinois</option>
+    <option value="IA">Iowa</option>
+    <option value="KS">Kansas</option>
+    <option value="KY">Kentucky</option>
+    <option value="LA">Louisiana</option>
+    <option value="MN">Minnesota</option>
+    <option value="MS">Mississippi</option>
+    <option value="MO">Missouri</option>
+    <option value="OK">Oklahoma</option>
+    <option value="SD">South Dakota</option>
+    <option value="TX">Texas</option>
+    <option value="TN">Tennessee</option>
+    <option value="WI">Wisconsin</option>
+    <option value="CT">Connecticut</option>
+    <option value="DE">Delaware</option>
+    <option value="FL">Florida</option>
+    <option value="GA">Georgia</option>
+    <option value="IN">Indiana</option>
+    <option value="ME">Maine</option>
+    <option value="MD">Maryland</option>
+    <option value="MA">Massachusetts</option>
+    <option value="MI">Michigan</option>
+    <option value="NH">New Hampshire</option>
+    <option value="NJ">New Jersey</option>
+    <option value="NY">New York</option>
+    <option value="NC">North Carolina</option>
+    <option value="OH">Ohio</option>
+    <option value="PA">Pennsylvania</option>
+    <option value="RI">Rhode Island</option>
+    <option value="SC">South Carolina</option>
+    <option value="VT">Vermont</option>
+    <option value="VA">Virginia</option>
+    <option value="WV">West Virginia</option>
+</select>
+
+<style>
+.clear {
+    background-color: transparent;
+    border: none;
+    box-sizing: border-box;
+    color: #666;
+    cursor: pointer;
+    display: none;
+    font-size: 15px;
+    font-weight: bold;
+    height: 26px;
+    outline: 0;
+    position: absolute;
+    top: 1px;
+    right: 4px;
+    width: 26px;
+}
+
+.clear:hover {
+    color: #000;
+}
+
+.clearable {
+    padding-right: 31px;
+}
+
+.clearable .clear {
+    display: inline;
+}
+</style>
+
+<script>
+require(["select2/core", "select2/utils", "select2/selection"], function (Select2, Utils, Selection) {
+    function ClearSelection () { }
+
+    ClearSelection.prototype.render = function (decorated) {
+        var $selection = decorated.call(this);
+
+        var $clear = $(
+            '<button class="clear">&times;</button>'
+        )
+
+        $selection.append($clear);
+        $selection.addClass("clearable");
+
+        this.$clear = $clear;
+
+        return $selection;
+    };
+
+    ClearSelection.prototype.bind = function (decorated, $container) {
+        var self = this;
+
+        decorated.call(this, $container);
+
+        this.$container = $container;
+
+        this.$clear.on("click", function (evt) {
+            evt.stopPropagation();
+
+            var $first = $container.find("li").first();
+            $first.click();
+        });
+    };
+
+    ClearSelection.prototype.update = function (decorated, data) {
+        decorated.call(this, data);
+
+        if (data.length == 0 || this.$container.find("li").length == 0) {
+            this.$selection.removeClass("clearable");
+            return;
+        }
+
+        var firstOption = this.$container.find("li").first().data("data");
+        var firstData = data[0];
+
+        if (firstOption.id == firstData.id) {
+            this.$selection.removeClass("clearable");
+        } else {
+            this.$selection.addClass("clearable");
+        }
+    };
+
+    var CustomSelection = Utils.Decorate(Selection, ClearSelection);
+
+    var s2 = new Select2($("#source"), {
+        selectionAdapter: CustomSelection
+    });
+});
+</script>
+
+</body>
+</html>

src/js/select2/options.js

@@ -10,7 +10,7 @@ define([
     this.dataAdapter = SelectData;
     this.resultsAdapter = ResultsList;
     this.dropdownAdapter = Dropdown;
-    this.selectionAdapter = Selection;
+    this.selectionAdapter = options.selectionAdapter || Selection;
   }
 
   return Options;

src/js/select2/results.js

@@ -48,8 +48,6 @@ define([
 
       var $options = self.$results.find(".option");
 
-      console.log($options);
-
       $options.each(function () {
         var $option = $(this);
         var item = $option.data("data");

src/js/select2/utils.js

@@ -46,13 +46,13 @@ define([], function () {
     function DecoratedClass () {
       var unshift = Array.prototype.unshift;
 
-      unshift.call(arguments, SuperClass.prototype.constructor);
-
       var argCount = DecoratorClass.prototype.constructor.length;
 
       var calledConstructor = SuperClass.prototype.constructor;
 
       if (argCount > 0) {
+        unshift.call(arguments, SuperClass.prototype.constructor);
+
         calledConstructor = DecoratorClass.prototype.constructor;
       }
 
@@ -74,23 +74,26 @@ define([], function () {
     for (var m = 0; m < decoratedMethods.length; m++) {
       var methodName = decoratedMethods[m];
 
-      var originalMethod = function () {};
+      function calledMethod (methodName) {
+        // Stub out the original method if it's not decorating an actual method
+        var originalMethod = function () {};
 
-      if (methodName in DecoratedClass.prototype) {
-        originalMethod = DecoratedClass.prototype[methodName];
-      }
+        if (methodName in DecoratedClass.prototype) {
+          originalMethod = DecoratedClass.prototype[methodName];
+        }
 
-      var decoratedMethod = DecoratorClass.prototype[methodName];
+        var decoratedMethod = DecoratorClass.prototype[methodName];
 
-      function calledMethod () {
-        var unshift = Array.prototype.unshift;
+        return function () {
+          var unshift = Array.prototype.unshift;
 
-        unshift.call(arguments, originalMethod);
+          unshift.call(arguments, originalMethod);
 
-        return decoratedMethod.apply(this, arguments);
+          return decoratedMethod.apply(this, arguments);
+        }
       }
 
-      DecoratedClass.prototype[methodName] = calledMethod;
+      DecoratedClass.prototype[methodName] = calledMethod(methodName);
     }
 
     return DecoratedClass;