Move placing the sections into methods

This allows them to be overridden, allowing for things like
attaching the dropdown to a different part of the DOM.

The id is also now generated in a function that can be overridden.

dist/js/select2.amd.full.js

@@ -1521,11 +1521,21 @@ define('select2/defaults',[
 define('select2/options',[
   './defaults'
 ], function (Defaults) {
-  function Options (options) {
+  function Options (options, $element) {
-    this.options = Defaults.apply(options);
+    this.options = options;
+
+    if ($element != null) {
+      this.fromElement($element);
+    }
+
+    this.options = Defaults.apply(this.options);
   }
 
   Options.prototype.fromElement = function ($e) {
+    if (this.options.multiple == null) {
+      this.options.multiple = $e.prop('multiple');
+    }
+
     return this;
   };
 
@@ -1548,21 +1558,11 @@ define('select2/core',[
   var Select2 = function ($element, options) {
     this.$element = $element;
 
-    if ($element.attr('id') != null) {
+    this.id = this._generateId($element);
-      this.id = $element.attr('id');
-    } else if ($element.attr('name') != null) {
-      this.id = $element.attr('name') + '-' + Utils.generateChars(2);
-    } else {
-      this.id = Utils.generateChars(4);
-    }
-
-    this.id = 'select2-' + this.id;
 
     options = options || {};
 
-    options.multiple = options.multiple || $element.prop('multiple');
+    this.options = new Options(options, $element);
-
-    this.options = new Options(options);
 
     Select2.__super__.constructor.call(this);
 
@@ -1572,35 +1572,29 @@ define('select2/core',[
     this.data = new DataAdapter($element, this.options);
 
     var $container = this.render();
-    this.$container = $container;
 
-    $container.insertAfter(this.$element);
+    this._placeContainer($container);
-
-    $container.width($element.outerWidth(false));
 
     var SelectionAdapter = this.options.get('selectionAdapter');
     this.selection = new SelectionAdapter($element, this.options);
 
-    var $selectionContainer = $container.find('.selection');
     var $selection = this.selection.render();
 
-    $selectionContainer.append($selection);
+    this._placeSelection($selection);
 
     var DropdownAdapter = this.options.get('dropdownAdapter');
     this.dropdown = new DropdownAdapter($element, this.options);
 
-    var $dropdownContainer = $container.find('.dropdown-wrapper');
     var $dropdown = this.dropdown.render();
 
-    $dropdownContainer.append($dropdown);
+    this._placeDropdown($dropdown);
 
     var ResultsAdapter = this.options.get('resultsAdapter');
     this.results = new ResultsAdapter($element, this.options, this.data);
 
-    var $resultsContainer = $dropdown.find('.results');
     var $results = this.results.render();
 
-    $resultsContainer.append($results);
+    this._placeResults($results);
 
     // Bind events
 
@@ -1699,6 +1693,44 @@ define('select2/core',[
 
   Utils.Extend(Select2, Utils.Observable);
 
+  Select2.prototype._generateId = function ($element) {
+    var id = '';
+
+    if ($element.attr('id') != null) {
+      id = $element.attr('id');
+    } else if ($element.attr('name') != null) {
+      id = $element.attr('name') + '-' + Utils.generateChars(2);
+    } else {
+      id = Utils.generateChars(4);
+    }
+
+    id = 'select2-' + id;
+
+    return id;
+  };
+
+  Select2.prototype._placeContainer = function ($container) {
+    $container.insertAfter(this.$element);
+    $container.width(this.$element.outerWidth(false));
+  };
+
+  Select2.prototype._placeSelection = function ($selection) {
+    var $selectionContainer = this.$container.find('.selection');
+    $selectionContainer.append($selection);
+  };
+
+  Select2.prototype._placeDropdown = function ($dropdown) {
+    this.$dropdown = $dropdown;
+
+    var $dropdownContainer = this.$container.find('.dropdown-wrapper');
+    $dropdownContainer.append($dropdown);
+  };
+
+  Select2.prototype._placeResults = function ($results) {
+    var $resultsContainer = this.$dropdown.find('.results');
+    $resultsContainer.append($results);
+  };
+
   Select2.prototype.toggleDropdown = function () {
     if (this.isOpen()) {
       this.close();
@@ -1735,6 +1767,8 @@ define('select2/core',[
       '</span>'
     );
 
+    this.$container = $container;
+
     return $container;
   };
 

dist/js/select2.amd.js

@@ -1521,11 +1521,21 @@ define('select2/defaults',[
 define('select2/options',[
   './defaults'
 ], function (Defaults) {
-  function Options (options) {
+  function Options (options, $element) {
-    this.options = Defaults.apply(options);
+    this.options = options;
+
+    if ($element != null) {
+      this.fromElement($element);
+    }
+
+    this.options = Defaults.apply(this.options);
   }
 
   Options.prototype.fromElement = function ($e) {
+    if (this.options.multiple == null) {
+      this.options.multiple = $e.prop('multiple');
+    }
+
     return this;
   };
 
@@ -1548,21 +1558,11 @@ define('select2/core',[
   var Select2 = function ($element, options) {
     this.$element = $element;
 
-    if ($element.attr('id') != null) {
+    this.id = this._generateId($element);
-      this.id = $element.attr('id');
-    } else if ($element.attr('name') != null) {
-      this.id = $element.attr('name') + '-' + Utils.generateChars(2);
-    } else {
-      this.id = Utils.generateChars(4);
-    }
-
-    this.id = 'select2-' + this.id;
 
     options = options || {};
 
-    options.multiple = options.multiple || $element.prop('multiple');
+    this.options = new Options(options, $element);
-
-    this.options = new Options(options);
 
     Select2.__super__.constructor.call(this);
 
@@ -1572,35 +1572,29 @@ define('select2/core',[
     this.data = new DataAdapter($element, this.options);
 
     var $container = this.render();
-    this.$container = $container;
 
-    $container.insertAfter(this.$element);
+    this._placeContainer($container);
-
-    $container.width($element.outerWidth(false));
 
     var SelectionAdapter = this.options.get('selectionAdapter');
     this.selection = new SelectionAdapter($element, this.options);
 
-    var $selectionContainer = $container.find('.selection');
     var $selection = this.selection.render();
 
-    $selectionContainer.append($selection);
+    this._placeSelection($selection);
 
     var DropdownAdapter = this.options.get('dropdownAdapter');
     this.dropdown = new DropdownAdapter($element, this.options);
 
-    var $dropdownContainer = $container.find('.dropdown-wrapper');
     var $dropdown = this.dropdown.render();
 
-    $dropdownContainer.append($dropdown);
+    this._placeDropdown($dropdown);
 
     var ResultsAdapter = this.options.get('resultsAdapter');
     this.results = new ResultsAdapter($element, this.options, this.data);
 
-    var $resultsContainer = $dropdown.find('.results');
     var $results = this.results.render();
 
-    $resultsContainer.append($results);
+    this._placeResults($results);
 
     // Bind events
 
@@ -1699,6 +1693,44 @@ define('select2/core',[
 
   Utils.Extend(Select2, Utils.Observable);
 
+  Select2.prototype._generateId = function ($element) {
+    var id = '';
+
+    if ($element.attr('id') != null) {
+      id = $element.attr('id');
+    } else if ($element.attr('name') != null) {
+      id = $element.attr('name') + '-' + Utils.generateChars(2);
+    } else {
+      id = Utils.generateChars(4);
+    }
+
+    id = 'select2-' + id;
+
+    return id;
+  };
+
+  Select2.prototype._placeContainer = function ($container) {
+    $container.insertAfter(this.$element);
+    $container.width(this.$element.outerWidth(false));
+  };
+
+  Select2.prototype._placeSelection = function ($selection) {
+    var $selectionContainer = this.$container.find('.selection');
+    $selectionContainer.append($selection);
+  };
+
+  Select2.prototype._placeDropdown = function ($dropdown) {
+    this.$dropdown = $dropdown;
+
+    var $dropdownContainer = this.$container.find('.dropdown-wrapper');
+    $dropdownContainer.append($dropdown);
+  };
+
+  Select2.prototype._placeResults = function ($results) {
+    var $resultsContainer = this.$dropdown.find('.results');
+    $resultsContainer.append($results);
+  };
+
   Select2.prototype.toggleDropdown = function () {
     if (this.isOpen()) {
       this.close();
@@ -1735,6 +1767,8 @@ define('select2/core',[
       '</span>'
     );
 
+    this.$container = $container;
+
     return $container;
   };
 

dist/js/select2.full.js

@@ -11056,11 +11056,21 @@ define('select2/defaults',[
 define('select2/options',[
   './defaults'
 ], function (Defaults) {
-  function Options (options) {
+  function Options (options, $element) {
-    this.options = Defaults.apply(options);
+    this.options = options;
+
+    if ($element != null) {
+      this.fromElement($element);
+    }
+
+    this.options = Defaults.apply(this.options);
   }
 
   Options.prototype.fromElement = function ($e) {
+    if (this.options.multiple == null) {
+      this.options.multiple = $e.prop('multiple');
+    }
+
     return this;
   };
 
@@ -11083,21 +11093,11 @@ define('select2/core',[
   var Select2 = function ($element, options) {
     this.$element = $element;
 
-    if ($element.attr('id') != null) {
+    this.id = this._generateId($element);
-      this.id = $element.attr('id');
-    } else if ($element.attr('name') != null) {
-      this.id = $element.attr('name') + '-' + Utils.generateChars(2);
-    } else {
-      this.id = Utils.generateChars(4);
-    }
-
-    this.id = 'select2-' + this.id;
 
     options = options || {};
 
-    options.multiple = options.multiple || $element.prop('multiple');
+    this.options = new Options(options, $element);
-
-    this.options = new Options(options);
 
     Select2.__super__.constructor.call(this);
 
@@ -11107,35 +11107,29 @@ define('select2/core',[
     this.data = new DataAdapter($element, this.options);
 
     var $container = this.render();
-    this.$container = $container;
 
-    $container.insertAfter(this.$element);
+    this._placeContainer($container);
-
-    $container.width($element.outerWidth(false));
 
     var SelectionAdapter = this.options.get('selectionAdapter');
     this.selection = new SelectionAdapter($element, this.options);
 
-    var $selectionContainer = $container.find('.selection');
     var $selection = this.selection.render();
 
-    $selectionContainer.append($selection);
+    this._placeSelection($selection);
 
     var DropdownAdapter = this.options.get('dropdownAdapter');
     this.dropdown = new DropdownAdapter($element, this.options);
 
-    var $dropdownContainer = $container.find('.dropdown-wrapper');
     var $dropdown = this.dropdown.render();
 
-    $dropdownContainer.append($dropdown);
+    this._placeDropdown($dropdown);
 
     var ResultsAdapter = this.options.get('resultsAdapter');
     this.results = new ResultsAdapter($element, this.options, this.data);
 
-    var $resultsContainer = $dropdown.find('.results');
     var $results = this.results.render();
 
-    $resultsContainer.append($results);
+    this._placeResults($results);
 
     // Bind events
 
@@ -11234,6 +11228,44 @@ define('select2/core',[
 
   Utils.Extend(Select2, Utils.Observable);
 
+  Select2.prototype._generateId = function ($element) {
+    var id = '';
+
+    if ($element.attr('id') != null) {
+      id = $element.attr('id');
+    } else if ($element.attr('name') != null) {
+      id = $element.attr('name') + '-' + Utils.generateChars(2);
+    } else {
+      id = Utils.generateChars(4);
+    }
+
+    id = 'select2-' + id;
+
+    return id;
+  };
+
+  Select2.prototype._placeContainer = function ($container) {
+    $container.insertAfter(this.$element);
+    $container.width(this.$element.outerWidth(false));
+  };
+
+  Select2.prototype._placeSelection = function ($selection) {
+    var $selectionContainer = this.$container.find('.selection');
+    $selectionContainer.append($selection);
+  };
+
+  Select2.prototype._placeDropdown = function ($dropdown) {
+    this.$dropdown = $dropdown;
+
+    var $dropdownContainer = this.$container.find('.dropdown-wrapper');
+    $dropdownContainer.append($dropdown);
+  };
+
+  Select2.prototype._placeResults = function ($results) {
+    var $resultsContainer = this.$dropdown.find('.results');
+    $resultsContainer.append($results);
+  };
+
   Select2.prototype.toggleDropdown = function () {
     if (this.isOpen()) {
       this.close();
@@ -11270,6 +11302,8 @@ define('select2/core',[
       '</span>'
     );
 
+    this.$container = $container;
+
     return $container;
   };
 

dist/js/select2.js

@@ -1949,11 +1949,21 @@ define('select2/defaults',[
 define('select2/options',[
   './defaults'
 ], function (Defaults) {
-  function Options (options) {
+  function Options (options, $element) {
-    this.options = Defaults.apply(options);
+    this.options = options;
+
+    if ($element != null) {
+      this.fromElement($element);
+    }
+
+    this.options = Defaults.apply(this.options);
   }
 
   Options.prototype.fromElement = function ($e) {
+    if (this.options.multiple == null) {
+      this.options.multiple = $e.prop('multiple');
+    }
+
     return this;
   };
 
@@ -1976,21 +1986,11 @@ define('select2/core',[
   var Select2 = function ($element, options) {
     this.$element = $element;
 
-    if ($element.attr('id') != null) {
+    this.id = this._generateId($element);
-      this.id = $element.attr('id');
-    } else if ($element.attr('name') != null) {
-      this.id = $element.attr('name') + '-' + Utils.generateChars(2);
-    } else {
-      this.id = Utils.generateChars(4);
-    }
-
-    this.id = 'select2-' + this.id;
 
     options = options || {};
 
-    options.multiple = options.multiple || $element.prop('multiple');
+    this.options = new Options(options, $element);
-
-    this.options = new Options(options);
 
     Select2.__super__.constructor.call(this);
 
@@ -2000,35 +2000,29 @@ define('select2/core',[
     this.data = new DataAdapter($element, this.options);
 
     var $container = this.render();
-    this.$container = $container;
 
-    $container.insertAfter(this.$element);
+    this._placeContainer($container);
-
-    $container.width($element.outerWidth(false));
 
     var SelectionAdapter = this.options.get('selectionAdapter');
     this.selection = new SelectionAdapter($element, this.options);
 
-    var $selectionContainer = $container.find('.selection');
     var $selection = this.selection.render();
 
-    $selectionContainer.append($selection);
+    this._placeSelection($selection);
 
     var DropdownAdapter = this.options.get('dropdownAdapter');
     this.dropdown = new DropdownAdapter($element, this.options);
 
-    var $dropdownContainer = $container.find('.dropdown-wrapper');
     var $dropdown = this.dropdown.render();
 
-    $dropdownContainer.append($dropdown);
+    this._placeDropdown($dropdown);
 
     var ResultsAdapter = this.options.get('resultsAdapter');
     this.results = new ResultsAdapter($element, this.options, this.data);
 
-    var $resultsContainer = $dropdown.find('.results');
     var $results = this.results.render();
 
-    $resultsContainer.append($results);
+    this._placeResults($results);
 
     // Bind events
 
@@ -2127,6 +2121,44 @@ define('select2/core',[
 
   Utils.Extend(Select2, Utils.Observable);
 
+  Select2.prototype._generateId = function ($element) {
+    var id = '';
+
+    if ($element.attr('id') != null) {
+      id = $element.attr('id');
+    } else if ($element.attr('name') != null) {
+      id = $element.attr('name') + '-' + Utils.generateChars(2);
+    } else {
+      id = Utils.generateChars(4);
+    }
+
+    id = 'select2-' + id;
+
+    return id;
+  };
+
+  Select2.prototype._placeContainer = function ($container) {
+    $container.insertAfter(this.$element);
+    $container.width(this.$element.outerWidth(false));
+  };
+
+  Select2.prototype._placeSelection = function ($selection) {
+    var $selectionContainer = this.$container.find('.selection');
+    $selectionContainer.append($selection);
+  };
+
+  Select2.prototype._placeDropdown = function ($dropdown) {
+    this.$dropdown = $dropdown;
+
+    var $dropdownContainer = this.$container.find('.dropdown-wrapper');
+    $dropdownContainer.append($dropdown);
+  };
+
+  Select2.prototype._placeResults = function ($results) {
+    var $resultsContainer = this.$dropdown.find('.results');
+    $resultsContainer.append($results);
+  };
+
   Select2.prototype.toggleDropdown = function () {
     if (this.isOpen()) {
       this.close();
@@ -2163,6 +2195,8 @@ define('select2/core',[
       '</span>'
     );
 
+    this.$container = $container;
+
     return $container;
   };
 

src/js/select2/core.js

@@ -6,21 +6,11 @@ define([
   var Select2 = function ($element, options) {
     this.$element = $element;
 
-    if ($element.attr('id') != null) {
+    this.id = this._generateId($element);
-      this.id = $element.attr('id');
-    } else if ($element.attr('name') != null) {
-      this.id = $element.attr('name') + '-' + Utils.generateChars(2);
-    } else {
-      this.id = Utils.generateChars(4);
-    }
-
-    this.id = 'select2-' + this.id;
 
     options = options || {};
 
-    options.multiple = options.multiple || $element.prop('multiple');
+    this.options = new Options(options, $element);
-
-    this.options = new Options(options);
 
     Select2.__super__.constructor.call(this);
 
@@ -30,35 +20,29 @@ define([
     this.data = new DataAdapter($element, this.options);
 
     var $container = this.render();
-    this.$container = $container;
 
-    $container.insertAfter(this.$element);
+    this._placeContainer($container);
-
-    $container.width($element.outerWidth(false));
 
     var SelectionAdapter = this.options.get('selectionAdapter');
     this.selection = new SelectionAdapter($element, this.options);
 
-    var $selectionContainer = $container.find('.selection');
     var $selection = this.selection.render();
 
-    $selectionContainer.append($selection);
+    this._placeSelection($selection);
 
     var DropdownAdapter = this.options.get('dropdownAdapter');
     this.dropdown = new DropdownAdapter($element, this.options);
 
-    var $dropdownContainer = $container.find('.dropdown-wrapper');
     var $dropdown = this.dropdown.render();
 
-    $dropdownContainer.append($dropdown);
+    this._placeDropdown($dropdown);
 
     var ResultsAdapter = this.options.get('resultsAdapter');
     this.results = new ResultsAdapter($element, this.options, this.data);
 
-    var $resultsContainer = $dropdown.find('.results');
     var $results = this.results.render();
 
-    $resultsContainer.append($results);
+    this._placeResults($results);
 
     // Bind events
 
@@ -157,6 +141,44 @@ define([
 
   Utils.Extend(Select2, Utils.Observable);
 
+  Select2.prototype._generateId = function ($element) {
+    var id = '';
+
+    if ($element.attr('id') != null) {
+      id = $element.attr('id');
+    } else if ($element.attr('name') != null) {
+      id = $element.attr('name') + '-' + Utils.generateChars(2);
+    } else {
+      id = Utils.generateChars(4);
+    }
+
+    id = 'select2-' + id;
+
+    return id;
+  };
+
+  Select2.prototype._placeContainer = function ($container) {
+    $container.insertAfter(this.$element);
+    $container.width(this.$element.outerWidth(false));
+  };
+
+  Select2.prototype._placeSelection = function ($selection) {
+    var $selectionContainer = this.$container.find('.selection');
+    $selectionContainer.append($selection);
+  };
+
+  Select2.prototype._placeDropdown = function ($dropdown) {
+    this.$dropdown = $dropdown;
+
+    var $dropdownContainer = this.$container.find('.dropdown-wrapper');
+    $dropdownContainer.append($dropdown);
+  };
+
+  Select2.prototype._placeResults = function ($results) {
+    var $resultsContainer = this.$dropdown.find('.results');
+    $resultsContainer.append($results);
+  };
+
   Select2.prototype.toggleDropdown = function () {
     if (this.isOpen()) {
       this.close();
@@ -193,6 +215,8 @@ define([
       '</span>'
     );
 
+    this.$container = $container;
+
     return $container;
   };
 

src/js/select2/options.js

@@ -1,11 +1,21 @@
 define([
   './defaults'
 ], function (Defaults) {
-  function Options (options) {
+  function Options (options, $element) {
-    this.options = Defaults.apply(options);
+    this.options = options;
+
+    if ($element != null) {
+      this.fromElement($element);
+    }
+
+    this.options = Defaults.apply(this.options);
   }
 
   Options.prototype.fromElement = function ($e) {
+    if (this.options.multiple == null) {
+      this.options.multiple = $e.prop('multiple');
+    }
+
     return this;
   };