From 2ca14517bbc683b3f7031432463787569ac3fbc5 Mon Sep 17 00:00:00 2001
From: Kevin Brown <kevin@kevinbrown.in>
Date: Thu, 28 Aug 2014 16:00:56 -0400
Subject: [PATCH] Add classes to results options

---
 dist/css/select2.css        |  5 ++++
 dist/js/select2.amd.full.js | 49 ++++++++++++++++++++++++++++++++-----
 dist/js/select2.amd.js      | 49 ++++++++++++++++++++++++++++++++-----
 dist/js/select2.full.js     | 49 ++++++++++++++++++++++++++++++++-----
 dist/js/select2.js          | 49 ++++++++++++++++++++++++++++++++-----
 src/js/select2/core.js      |  8 +++---
 src/js/select2/results.js   | 41 +++++++++++++++++++++++++++++--
 src/scss/_dropdown.scss     |  9 +++++++
 8 files changed, 229 insertions(+), 30 deletions(-)

diff --git a/dist/css/select2.css b/dist/css/select2.css
index eee2b25a..7fbe5874 100644
--- a/dist/css/select2.css
+++ b/dist/css/select2.css
@@ -43,6 +43,11 @@
     .select2-container .dropdown .results .options .option {
       cursor: pointer;
       padding: 6px; }
+      .select2-container .dropdown .results .options .option.selected {
+        background-color: #ddd; }
+      .select2-container .dropdown .results .options .option.hovered {
+        background-color: darkblue;
+        color: white; }
 .select2-container.open .dropdown {
   border-top-left-radius: 0;
   border-top-right-radius: 0;
diff --git a/dist/js/select2.amd.full.js b/dist/js/select2.amd.full.js
index 7f0287d5..74ac8cfc 100644
--- a/dist/js/select2.amd.full.js
+++ b/dist/js/select2.amd.full.js
@@ -153,7 +153,7 @@ define('select2/data/select',[
 define('select2/results',[
   './utils'
 ], function (Utils) {
-  function Results ($element, dataAdapter) {
+  function Results ($element, options, dataAdapter) {
     this.$element = $element;
     this.data = dataAdapter;
 
@@ -190,6 +190,29 @@ define('select2/results',[
     this.$results.append($options);
   };
 
+  Results.prototype.setClasses = function () {
+    var self = this;
+
+    this.data.current(function (selected) {
+      selected = $.map(selected, function (s) { return s.id; });
+
+      self.$results.find(".option.selected").removeClass("selected");
+
+      var $options = self.$results.find(".option");
+
+      console.log($options);
+
+      $options.each(function () {
+        var $option = $(this);
+        var item = $option.data("data");
+
+        if (selected.indexOf(item.id) > -1) {
+          $option.addClass("selected");
+        }
+      });
+    });
+  };
+
   Results.prototype.option = function (data) {
     var $option = $(
       '<li class="option"></li>'
@@ -207,10 +230,13 @@ define('select2/results',[
     this.on("results:all", function (data) {
       self.clear();
       self.append(data);
+      self.setClasses();
     });
 
     this.on("results:append", function (data) {
       self.append(data);
+
+      self.setClasses();
     })
 
     this.$results.on("click", ".option", function (evt) {
@@ -219,7 +245,18 @@ define('select2/results',[
       self.trigger("selected", {
         originalEvent: evt,
         data: data
-      })
+      });
+
+      self.setClasses();
+    });
+
+    this.$results.on("mouseenter", ".option", function (evt) {
+      self.$results.find(".option.hovered").removeClass("hovered");
+      $(this).addClass("hovered");
+    });
+
+    this.$results.on("mouseleave", ".option", function (evt) {
+      $(this).removeClass("hovered");
     });
   };
 
@@ -337,7 +374,7 @@ define('select2/core',[
 
     // Set up containers and adapters
 
-    this.data = new this.options.dataAdapter($element, options);
+    this.data = new this.options.dataAdapter($element, this.options);
 
     var $container = this.render();
 
@@ -345,21 +382,21 @@ define('select2/core',[
 
     $container.width($element.width());
 
-    this.selection = new this.options.selectionAdapter($element, options);
+    this.selection = new this.options.selectionAdapter($element, this.options);
 
     var $selectionContainer = $container.find(".selection");
     var $selection = this.selection.render();
 
     $selectionContainer.append($selection);
 
-    this.dropdown = new this.options.dropdownAdapter($element, options);
+    this.dropdown = new this.options.dropdownAdapter($element, this.options);
 
     var $dropdownContainer = $container.find(".dropdown");
     var $dropdown = this.dropdown.render();
 
     $dropdownContainer.append($dropdown);
 
-    this.results = new this.options.resultsAdapter($element, options);
+    this.results = new this.options.resultsAdapter($element, this.options, this.data);
 
     var $resultsContainer = $dropdown.find(".results");
     var $results = this.results.render();
diff --git a/dist/js/select2.amd.js b/dist/js/select2.amd.js
index 7f0287d5..74ac8cfc 100644
--- a/dist/js/select2.amd.js
+++ b/dist/js/select2.amd.js
@@ -153,7 +153,7 @@ define('select2/data/select',[
 define('select2/results',[
   './utils'
 ], function (Utils) {
-  function Results ($element, dataAdapter) {
+  function Results ($element, options, dataAdapter) {
     this.$element = $element;
     this.data = dataAdapter;
 
@@ -190,6 +190,29 @@ define('select2/results',[
     this.$results.append($options);
   };
 
+  Results.prototype.setClasses = function () {
+    var self = this;
+
+    this.data.current(function (selected) {
+      selected = $.map(selected, function (s) { return s.id; });
+
+      self.$results.find(".option.selected").removeClass("selected");
+
+      var $options = self.$results.find(".option");
+
+      console.log($options);
+
+      $options.each(function () {
+        var $option = $(this);
+        var item = $option.data("data");
+
+        if (selected.indexOf(item.id) > -1) {
+          $option.addClass("selected");
+        }
+      });
+    });
+  };
+
   Results.prototype.option = function (data) {
     var $option = $(
       '<li class="option"></li>'
@@ -207,10 +230,13 @@ define('select2/results',[
     this.on("results:all", function (data) {
       self.clear();
       self.append(data);
+      self.setClasses();
     });
 
     this.on("results:append", function (data) {
       self.append(data);
+
+      self.setClasses();
     })
 
     this.$results.on("click", ".option", function (evt) {
@@ -219,7 +245,18 @@ define('select2/results',[
       self.trigger("selected", {
         originalEvent: evt,
         data: data
-      })
+      });
+
+      self.setClasses();
+    });
+
+    this.$results.on("mouseenter", ".option", function (evt) {
+      self.$results.find(".option.hovered").removeClass("hovered");
+      $(this).addClass("hovered");
+    });
+
+    this.$results.on("mouseleave", ".option", function (evt) {
+      $(this).removeClass("hovered");
     });
   };
 
@@ -337,7 +374,7 @@ define('select2/core',[
 
     // Set up containers and adapters
 
-    this.data = new this.options.dataAdapter($element, options);
+    this.data = new this.options.dataAdapter($element, this.options);
 
     var $container = this.render();
 
@@ -345,21 +382,21 @@ define('select2/core',[
 
     $container.width($element.width());
 
-    this.selection = new this.options.selectionAdapter($element, options);
+    this.selection = new this.options.selectionAdapter($element, this.options);
 
     var $selectionContainer = $container.find(".selection");
     var $selection = this.selection.render();
 
     $selectionContainer.append($selection);
 
-    this.dropdown = new this.options.dropdownAdapter($element, options);
+    this.dropdown = new this.options.dropdownAdapter($element, this.options);
 
     var $dropdownContainer = $container.find(".dropdown");
     var $dropdown = this.dropdown.render();
 
     $dropdownContainer.append($dropdown);
 
-    this.results = new this.options.resultsAdapter($element, options);
+    this.results = new this.options.resultsAdapter($element, this.options, this.data);
 
     var $resultsContainer = $dropdown.find(".results");
     var $results = this.results.render();
diff --git a/dist/js/select2.full.js b/dist/js/select2.full.js
index e8204c1a..e75a7d9a 100644
--- a/dist/js/select2.full.js
+++ b/dist/js/select2.full.js
@@ -9690,7 +9690,7 @@ define('select2/data/select',[
 define('select2/results',[
   './utils'
 ], function (Utils) {
-  function Results ($element, dataAdapter) {
+  function Results ($element, options, dataAdapter) {
     this.$element = $element;
     this.data = dataAdapter;
 
@@ -9727,6 +9727,29 @@ define('select2/results',[
     this.$results.append($options);
   };
 
+  Results.prototype.setClasses = function () {
+    var self = this;
+
+    this.data.current(function (selected) {
+      selected = $.map(selected, function (s) { return s.id; });
+
+      self.$results.find(".option.selected").removeClass("selected");
+
+      var $options = self.$results.find(".option");
+
+      console.log($options);
+
+      $options.each(function () {
+        var $option = $(this);
+        var item = $option.data("data");
+
+        if (selected.indexOf(item.id) > -1) {
+          $option.addClass("selected");
+        }
+      });
+    });
+  };
+
   Results.prototype.option = function (data) {
     var $option = $(
       '<li class="option"></li>'
@@ -9744,10 +9767,13 @@ define('select2/results',[
     this.on("results:all", function (data) {
       self.clear();
       self.append(data);
+      self.setClasses();
     });
 
     this.on("results:append", function (data) {
       self.append(data);
+
+      self.setClasses();
     })
 
     this.$results.on("click", ".option", function (evt) {
@@ -9756,7 +9782,18 @@ define('select2/results',[
       self.trigger("selected", {
         originalEvent: evt,
         data: data
-      })
+      });
+
+      self.setClasses();
+    });
+
+    this.$results.on("mouseenter", ".option", function (evt) {
+      self.$results.find(".option.hovered").removeClass("hovered");
+      $(this).addClass("hovered");
+    });
+
+    this.$results.on("mouseleave", ".option", function (evt) {
+      $(this).removeClass("hovered");
     });
   };
 
@@ -9874,7 +9911,7 @@ define('select2/core',[
 
     // Set up containers and adapters
 
-    this.data = new this.options.dataAdapter($element, options);
+    this.data = new this.options.dataAdapter($element, this.options);
 
     var $container = this.render();
 
@@ -9882,21 +9919,21 @@ define('select2/core',[
 
     $container.width($element.width());
 
-    this.selection = new this.options.selectionAdapter($element, options);
+    this.selection = new this.options.selectionAdapter($element, this.options);
 
     var $selectionContainer = $container.find(".selection");
     var $selection = this.selection.render();
 
     $selectionContainer.append($selection);
 
-    this.dropdown = new this.options.dropdownAdapter($element, options);
+    this.dropdown = new this.options.dropdownAdapter($element, this.options);
 
     var $dropdownContainer = $container.find(".dropdown");
     var $dropdown = this.dropdown.render();
 
     $dropdownContainer.append($dropdown);
 
-    this.results = new this.options.resultsAdapter($element, options);
+    this.results = new this.options.resultsAdapter($element, this.options, this.data);
 
     var $resultsContainer = $dropdown.find(".results");
     var $results = this.results.render();
diff --git a/dist/js/select2.js b/dist/js/select2.js
index 1142e272..1a559193 100644
--- a/dist/js/select2.js
+++ b/dist/js/select2.js
@@ -581,7 +581,7 @@ define('select2/data/select',[
 define('select2/results',[
   './utils'
 ], function (Utils) {
-  function Results ($element, dataAdapter) {
+  function Results ($element, options, dataAdapter) {
     this.$element = $element;
     this.data = dataAdapter;
 
@@ -618,6 +618,29 @@ define('select2/results',[
     this.$results.append($options);
   };
 
+  Results.prototype.setClasses = function () {
+    var self = this;
+
+    this.data.current(function (selected) {
+      selected = $.map(selected, function (s) { return s.id; });
+
+      self.$results.find(".option.selected").removeClass("selected");
+
+      var $options = self.$results.find(".option");
+
+      console.log($options);
+
+      $options.each(function () {
+        var $option = $(this);
+        var item = $option.data("data");
+
+        if (selected.indexOf(item.id) > -1) {
+          $option.addClass("selected");
+        }
+      });
+    });
+  };
+
   Results.prototype.option = function (data) {
     var $option = $(
       '<li class="option"></li>'
@@ -635,10 +658,13 @@ define('select2/results',[
     this.on("results:all", function (data) {
       self.clear();
       self.append(data);
+      self.setClasses();
     });
 
     this.on("results:append", function (data) {
       self.append(data);
+
+      self.setClasses();
     })
 
     this.$results.on("click", ".option", function (evt) {
@@ -647,7 +673,18 @@ define('select2/results',[
       self.trigger("selected", {
         originalEvent: evt,
         data: data
-      })
+      });
+
+      self.setClasses();
+    });
+
+    this.$results.on("mouseenter", ".option", function (evt) {
+      self.$results.find(".option.hovered").removeClass("hovered");
+      $(this).addClass("hovered");
+    });
+
+    this.$results.on("mouseleave", ".option", function (evt) {
+      $(this).removeClass("hovered");
     });
   };
 
@@ -765,7 +802,7 @@ define('select2/core',[
 
     // Set up containers and adapters
 
-    this.data = new this.options.dataAdapter($element, options);
+    this.data = new this.options.dataAdapter($element, this.options);
 
     var $container = this.render();
 
@@ -773,21 +810,21 @@ define('select2/core',[
 
     $container.width($element.width());
 
-    this.selection = new this.options.selectionAdapter($element, options);
+    this.selection = new this.options.selectionAdapter($element, this.options);
 
     var $selectionContainer = $container.find(".selection");
     var $selection = this.selection.render();
 
     $selectionContainer.append($selection);
 
-    this.dropdown = new this.options.dropdownAdapter($element, options);
+    this.dropdown = new this.options.dropdownAdapter($element, this.options);
 
     var $dropdownContainer = $container.find(".dropdown");
     var $dropdown = this.dropdown.render();
 
     $dropdownContainer.append($dropdown);
 
-    this.results = new this.options.resultsAdapter($element, options);
+    this.results = new this.options.resultsAdapter($element, this.options, this.data);
 
     var $resultsContainer = $dropdown.find(".results");
     var $results = this.results.render();
diff --git a/src/js/select2/core.js b/src/js/select2/core.js
index 6fb6a46f..ae710e63 100644
--- a/src/js/select2/core.js
+++ b/src/js/select2/core.js
@@ -11,7 +11,7 @@ define([
 
     // Set up containers and adapters
 
-    this.data = new this.options.dataAdapter($element, options);
+    this.data = new this.options.dataAdapter($element, this.options);
 
     var $container = this.render();
 
@@ -19,21 +19,21 @@ define([
 
     $container.width($element.width());
 
-    this.selection = new this.options.selectionAdapter($element, options);
+    this.selection = new this.options.selectionAdapter($element, this.options);
 
     var $selectionContainer = $container.find(".selection");
     var $selection = this.selection.render();
 
     $selectionContainer.append($selection);
 
-    this.dropdown = new this.options.dropdownAdapter($element, options);
+    this.dropdown = new this.options.dropdownAdapter($element, this.options);
 
     var $dropdownContainer = $container.find(".dropdown");
     var $dropdown = this.dropdown.render();
 
     $dropdownContainer.append($dropdown);
 
-    this.results = new this.options.resultsAdapter($element, options);
+    this.results = new this.options.resultsAdapter($element, this.options, this.data);
 
     var $resultsContainer = $dropdown.find(".results");
     var $results = this.results.render();
diff --git a/src/js/select2/results.js b/src/js/select2/results.js
index e8aa937e..b8230874 100644
--- a/src/js/select2/results.js
+++ b/src/js/select2/results.js
@@ -1,7 +1,7 @@
 define([
   './utils'
 ], function (Utils) {
-  function Results ($element, dataAdapter) {
+  function Results ($element, options, dataAdapter) {
     this.$element = $element;
     this.data = dataAdapter;
 
@@ -38,6 +38,29 @@ define([
     this.$results.append($options);
   };
 
+  Results.prototype.setClasses = function () {
+    var self = this;
+
+    this.data.current(function (selected) {
+      selected = $.map(selected, function (s) { return s.id; });
+
+      self.$results.find(".option.selected").removeClass("selected");
+
+      var $options = self.$results.find(".option");
+
+      console.log($options);
+
+      $options.each(function () {
+        var $option = $(this);
+        var item = $option.data("data");
+
+        if (selected.indexOf(item.id) > -1) {
+          $option.addClass("selected");
+        }
+      });
+    });
+  };
+
   Results.prototype.option = function (data) {
     var $option = $(
       '<li class="option"></li>'
@@ -55,10 +78,13 @@ define([
     this.on("results:all", function (data) {
       self.clear();
       self.append(data);
+      self.setClasses();
     });
 
     this.on("results:append", function (data) {
       self.append(data);
+
+      self.setClasses();
     })
 
     this.$results.on("click", ".option", function (evt) {
@@ -67,7 +93,18 @@ define([
       self.trigger("selected", {
         originalEvent: evt,
         data: data
-      })
+      });
+
+      self.setClasses();
+    });
+
+    this.$results.on("mouseenter", ".option", function (evt) {
+      self.$results.find(".option.hovered").removeClass("hovered");
+      $(this).addClass("hovered");
+    });
+
+    this.$results.on("mouseleave", ".option", function (evt) {
+      $(this).removeClass("hovered");
     });
   };
 
diff --git a/src/scss/_dropdown.scss b/src/scss/_dropdown.scss
index fc4d4deb..f21d8469 100644
--- a/src/scss/_dropdown.scss
+++ b/src/scss/_dropdown.scss
@@ -27,6 +27,15 @@
         .option {
           cursor: pointer;
           padding: 6px;
+
+          &.selected {
+            background-color: #ddd;
+          }
+
+          &.hovered {
+            background-color: darkblue;
+            color: white;
+          }
         }
       }
     }