diff --git a/.editorconfig b/.editorconfig new file mode 100644 index 00000000..54f4d3be --- /dev/null +++ b/.editorconfig @@ -0,0 +1,6 @@ +[*] +indent_style = space +end_of_line = lf + +[*.js] +indent_size = 2 diff --git a/dist/js/select2.amd.full.js b/dist/js/select2.amd.full.js index 3f991c4d..d069ffd0 100644 --- a/dist/js/select2.amd.full.js +++ b/dist/js/select2.amd.full.js @@ -54,44 +54,221 @@ define('select2/utils',[], function () { return Utils; }); -define('select2/adapters/select',[ - "../utils" +define('select2/data/select',[ + '../utils' ], function (Utils) { - function SelectAdapter (element, options) { - this.element = element; + function SelectAdapter ($element, options) { + this.$element = $element; } Utils.Extend(SelectAdapter, Utils.Observable); + SelectAdapter.prototype.current = function () { + var data = []; + var self = this; + + this.$element.find(":selected").each(function () { + var $option = $(this); + + var option = self.item($option); + + data.push(option); + }); + + return data; + }; + + SelectAdapter.prototype.item = function ($option) { + var data = { + id: $option.val(), + text: $option.html() + }; + + return data; + }; + return SelectAdapter; }); +define('select2/results',[ + './utils' +], function (Utils) { + function Results ($element, dataAdapter) { + this.$element = $element; + this.dataAdapter = dataAdapter; + } + + Utils.Extend(Results, Utils.Observable); + + Results.prototype.render = function () { + var $results = $( + '' + ); + + return $results; + } + + return Results; +}) +; +define('select2/dropdown',[ + './utils' +], function (Utils) { + function Dropdown ($element, options) { + this.$element = $element; + } + + Utils.Extend(Dropdown, Utils.Observable); + + Dropdown.prototype.render = function () { + var $dropdown = $( + '
' + + '
' + + '
' + ); + + return $dropdown; + } + + return Dropdown; +}) +; +define('select2/selection',[ + './utils' +], function (Utils) { + function Selection ($element, options) { + this.$element = $element; + this.options = options; + } + + Utils.Extend(Selection, Utils.Observable); + + Selection.prototype.render = function () { + var $selection = $( + '
' + + '
' + + '
' + ); + + this.$selection = $selection; + + return $selection; + } + + Selection.prototype.bind = function ($container) { + var self = this; + + $container.on('click', function (evt) { + self.trigger("toggle", { + originalEvent: evt + }); + }); + } + + Selection.prototype.clear = function () { + this.$selection.find(".rendered-selection").text(""); + } + + Selection.prototype.display = function (data) { + return data.text; + } + + Selection.prototype.update = function (data) { + if (data.length == 0) { + this.clear(); + return; + } + + var selection = data[0]; + + var formatted = this.display(selection); + + this.$selection.find(".rendered-selection").html(formatted); + } + + return Selection; +}); + define('select2/options',[ - "./adapters/select" -], function (SelectAdapter) { + './data/select', + './results', + './dropdown', + './selection' +], function (SelectData, ResultsList, Dropdown, Selection) { function Options (options) { this.options = options; - this.DataAdapter = SelectAdapter; + this.dataAdapter = SelectData; + this.resultsAdapter = ResultsList; + this.dropdownAdapter = Dropdown; + this.selectionAdapter = Selection; } return Options; }) ; define('select2/core',[ - "jquery", - "./options", - "./utils" + 'jquery', + './options', + './utils' ], function ($, Options, Utils) { - var Select2 = function (element, options) { - this.element = element; + var Select2 = function ($element, options) { + this.$element = $element; this.options = new Options(options); - this.adapter = new this.options.DataAdapter(element, options); + // Set up containers and adapters + + this.data = new this.options.dataAdapter($element, options); + + var $container = this.render(); + + $container.insertAfter(this.$element); + + this.selection = new this.options.selectionAdapter($element, options); + + var $selectionContainer = $container.find(".selection"); + var $selection = this.selection.render(); + + $selectionContainer.append($selection); + + this.dropdown = new this.options.dropdownAdapter($element, options); + + var $dropdown = this.dropdown.render(); + + $dropdown.insertAfter($container); + + this.results = new this.options.resultsAdapter($element, options); + + var $resultsContainer = $dropdown.find(".results"); + var $results = this.results.render(); + + $resultsContainer.append($results); + + // Set the initial state + + var initialData = this.data.current(); + + this.selection.update(initialData); + + var self = this; + + this.$element.on("change", function () { + self.selection.update(self.data.current()); + }) }; Utils.Extend(Select2, Utils.Observable); + Select2.prototype.render = function () { + var $container = $( + '
' + + '
' + + '
' + ); + + return $container; + }; + return Select2; }); diff --git a/dist/js/select2.amd.js b/dist/js/select2.amd.js index 3f991c4d..d069ffd0 100644 --- a/dist/js/select2.amd.js +++ b/dist/js/select2.amd.js @@ -54,44 +54,221 @@ define('select2/utils',[], function () { return Utils; }); -define('select2/adapters/select',[ - "../utils" +define('select2/data/select',[ + '../utils' ], function (Utils) { - function SelectAdapter (element, options) { - this.element = element; + function SelectAdapter ($element, options) { + this.$element = $element; } Utils.Extend(SelectAdapter, Utils.Observable); + SelectAdapter.prototype.current = function () { + var data = []; + var self = this; + + this.$element.find(":selected").each(function () { + var $option = $(this); + + var option = self.item($option); + + data.push(option); + }); + + return data; + }; + + SelectAdapter.prototype.item = function ($option) { + var data = { + id: $option.val(), + text: $option.html() + }; + + return data; + }; + return SelectAdapter; }); +define('select2/results',[ + './utils' +], function (Utils) { + function Results ($element, dataAdapter) { + this.$element = $element; + this.dataAdapter = dataAdapter; + } + + Utils.Extend(Results, Utils.Observable); + + Results.prototype.render = function () { + var $results = $( + '' + ); + + return $results; + } + + return Results; +}) +; +define('select2/dropdown',[ + './utils' +], function (Utils) { + function Dropdown ($element, options) { + this.$element = $element; + } + + Utils.Extend(Dropdown, Utils.Observable); + + Dropdown.prototype.render = function () { + var $dropdown = $( + '
' + + '
' + + '
' + ); + + return $dropdown; + } + + return Dropdown; +}) +; +define('select2/selection',[ + './utils' +], function (Utils) { + function Selection ($element, options) { + this.$element = $element; + this.options = options; + } + + Utils.Extend(Selection, Utils.Observable); + + Selection.prototype.render = function () { + var $selection = $( + '
' + + '
' + + '
' + ); + + this.$selection = $selection; + + return $selection; + } + + Selection.prototype.bind = function ($container) { + var self = this; + + $container.on('click', function (evt) { + self.trigger("toggle", { + originalEvent: evt + }); + }); + } + + Selection.prototype.clear = function () { + this.$selection.find(".rendered-selection").text(""); + } + + Selection.prototype.display = function (data) { + return data.text; + } + + Selection.prototype.update = function (data) { + if (data.length == 0) { + this.clear(); + return; + } + + var selection = data[0]; + + var formatted = this.display(selection); + + this.$selection.find(".rendered-selection").html(formatted); + } + + return Selection; +}); + define('select2/options',[ - "./adapters/select" -], function (SelectAdapter) { + './data/select', + './results', + './dropdown', + './selection' +], function (SelectData, ResultsList, Dropdown, Selection) { function Options (options) { this.options = options; - this.DataAdapter = SelectAdapter; + this.dataAdapter = SelectData; + this.resultsAdapter = ResultsList; + this.dropdownAdapter = Dropdown; + this.selectionAdapter = Selection; } return Options; }) ; define('select2/core',[ - "jquery", - "./options", - "./utils" + 'jquery', + './options', + './utils' ], function ($, Options, Utils) { - var Select2 = function (element, options) { - this.element = element; + var Select2 = function ($element, options) { + this.$element = $element; this.options = new Options(options); - this.adapter = new this.options.DataAdapter(element, options); + // Set up containers and adapters + + this.data = new this.options.dataAdapter($element, options); + + var $container = this.render(); + + $container.insertAfter(this.$element); + + this.selection = new this.options.selectionAdapter($element, options); + + var $selectionContainer = $container.find(".selection"); + var $selection = this.selection.render(); + + $selectionContainer.append($selection); + + this.dropdown = new this.options.dropdownAdapter($element, options); + + var $dropdown = this.dropdown.render(); + + $dropdown.insertAfter($container); + + this.results = new this.options.resultsAdapter($element, options); + + var $resultsContainer = $dropdown.find(".results"); + var $results = this.results.render(); + + $resultsContainer.append($results); + + // Set the initial state + + var initialData = this.data.current(); + + this.selection.update(initialData); + + var self = this; + + this.$element.on("change", function () { + self.selection.update(self.data.current()); + }) }; Utils.Extend(Select2, Utils.Observable); + Select2.prototype.render = function () { + var $container = $( + '
' + + '
' + + '
' + ); + + return $container; + }; + return Select2; }); diff --git a/dist/js/select2.full.js b/dist/js/select2.full.js index f3e54700..6091a5fc 100644 --- a/dist/js/select2.full.js +++ b/dist/js/select2.full.js @@ -9591,44 +9591,221 @@ define('select2/utils',[], function () { return Utils; }); -define('select2/adapters/select',[ - "../utils" +define('select2/data/select',[ + '../utils' ], function (Utils) { - function SelectAdapter (element, options) { - this.element = element; + function SelectAdapter ($element, options) { + this.$element = $element; } Utils.Extend(SelectAdapter, Utils.Observable); + SelectAdapter.prototype.current = function () { + var data = []; + var self = this; + + this.$element.find(":selected").each(function () { + var $option = $(this); + + var option = self.item($option); + + data.push(option); + }); + + return data; + }; + + SelectAdapter.prototype.item = function ($option) { + var data = { + id: $option.val(), + text: $option.html() + }; + + return data; + }; + return SelectAdapter; }); +define('select2/results',[ + './utils' +], function (Utils) { + function Results ($element, dataAdapter) { + this.$element = $element; + this.dataAdapter = dataAdapter; + } + + Utils.Extend(Results, Utils.Observable); + + Results.prototype.render = function () { + var $results = $( + '' + ); + + return $results; + } + + return Results; +}) +; +define('select2/dropdown',[ + './utils' +], function (Utils) { + function Dropdown ($element, options) { + this.$element = $element; + } + + Utils.Extend(Dropdown, Utils.Observable); + + Dropdown.prototype.render = function () { + var $dropdown = $( + '
' + + '
' + + '
' + ); + + return $dropdown; + } + + return Dropdown; +}) +; +define('select2/selection',[ + './utils' +], function (Utils) { + function Selection ($element, options) { + this.$element = $element; + this.options = options; + } + + Utils.Extend(Selection, Utils.Observable); + + Selection.prototype.render = function () { + var $selection = $( + '
' + + '
' + + '
' + ); + + this.$selection = $selection; + + return $selection; + } + + Selection.prototype.bind = function ($container) { + var self = this; + + $container.on('click', function (evt) { + self.trigger("toggle", { + originalEvent: evt + }); + }); + } + + Selection.prototype.clear = function () { + this.$selection.find(".rendered-selection").text(""); + } + + Selection.prototype.display = function (data) { + return data.text; + } + + Selection.prototype.update = function (data) { + if (data.length == 0) { + this.clear(); + return; + } + + var selection = data[0]; + + var formatted = this.display(selection); + + this.$selection.find(".rendered-selection").html(formatted); + } + + return Selection; +}); + define('select2/options',[ - "./adapters/select" -], function (SelectAdapter) { + './data/select', + './results', + './dropdown', + './selection' +], function (SelectData, ResultsList, Dropdown, Selection) { function Options (options) { this.options = options; - this.DataAdapter = SelectAdapter; + this.dataAdapter = SelectData; + this.resultsAdapter = ResultsList; + this.dropdownAdapter = Dropdown; + this.selectionAdapter = Selection; } return Options; }) ; define('select2/core',[ - "jquery", - "./options", - "./utils" + 'jquery', + './options', + './utils' ], function ($, Options, Utils) { - var Select2 = function (element, options) { - this.element = element; + var Select2 = function ($element, options) { + this.$element = $element; this.options = new Options(options); - this.adapter = new this.options.DataAdapter(element, options); + // Set up containers and adapters + + this.data = new this.options.dataAdapter($element, options); + + var $container = this.render(); + + $container.insertAfter(this.$element); + + this.selection = new this.options.selectionAdapter($element, options); + + var $selectionContainer = $container.find(".selection"); + var $selection = this.selection.render(); + + $selectionContainer.append($selection); + + this.dropdown = new this.options.dropdownAdapter($element, options); + + var $dropdown = this.dropdown.render(); + + $dropdown.insertAfter($container); + + this.results = new this.options.resultsAdapter($element, options); + + var $resultsContainer = $dropdown.find(".results"); + var $results = this.results.render(); + + $resultsContainer.append($results); + + // Set the initial state + + var initialData = this.data.current(); + + this.selection.update(initialData); + + var self = this; + + this.$element.on("change", function () { + self.selection.update(self.data.current()); + }) }; Utils.Extend(Select2, Utils.Observable); + Select2.prototype.render = function () { + var $container = $( + '
' + + '
' + + '
' + ); + + return $container; + }; + return Select2; }); diff --git a/dist/js/select2.js b/dist/js/select2.js index f7bbbc43..de65e56a 100644 --- a/dist/js/select2.js +++ b/dist/js/select2.js @@ -482,44 +482,221 @@ define('select2/utils',[], function () { return Utils; }); -define('select2/adapters/select',[ - "../utils" +define('select2/data/select',[ + '../utils' ], function (Utils) { - function SelectAdapter (element, options) { - this.element = element; + function SelectAdapter ($element, options) { + this.$element = $element; } Utils.Extend(SelectAdapter, Utils.Observable); + SelectAdapter.prototype.current = function () { + var data = []; + var self = this; + + this.$element.find(":selected").each(function () { + var $option = $(this); + + var option = self.item($option); + + data.push(option); + }); + + return data; + }; + + SelectAdapter.prototype.item = function ($option) { + var data = { + id: $option.val(), + text: $option.html() + }; + + return data; + }; + return SelectAdapter; }); +define('select2/results',[ + './utils' +], function (Utils) { + function Results ($element, dataAdapter) { + this.$element = $element; + this.dataAdapter = dataAdapter; + } + + Utils.Extend(Results, Utils.Observable); + + Results.prototype.render = function () { + var $results = $( + '' + ); + + return $results; + } + + return Results; +}) +; +define('select2/dropdown',[ + './utils' +], function (Utils) { + function Dropdown ($element, options) { + this.$element = $element; + } + + Utils.Extend(Dropdown, Utils.Observable); + + Dropdown.prototype.render = function () { + var $dropdown = $( + '
' + + '
' + + '
' + ); + + return $dropdown; + } + + return Dropdown; +}) +; +define('select2/selection',[ + './utils' +], function (Utils) { + function Selection ($element, options) { + this.$element = $element; + this.options = options; + } + + Utils.Extend(Selection, Utils.Observable); + + Selection.prototype.render = function () { + var $selection = $( + '
' + + '
' + + '
' + ); + + this.$selection = $selection; + + return $selection; + } + + Selection.prototype.bind = function ($container) { + var self = this; + + $container.on('click', function (evt) { + self.trigger("toggle", { + originalEvent: evt + }); + }); + } + + Selection.prototype.clear = function () { + this.$selection.find(".rendered-selection").text(""); + } + + Selection.prototype.display = function (data) { + return data.text; + } + + Selection.prototype.update = function (data) { + if (data.length == 0) { + this.clear(); + return; + } + + var selection = data[0]; + + var formatted = this.display(selection); + + this.$selection.find(".rendered-selection").html(formatted); + } + + return Selection; +}); + define('select2/options',[ - "./adapters/select" -], function (SelectAdapter) { + './data/select', + './results', + './dropdown', + './selection' +], function (SelectData, ResultsList, Dropdown, Selection) { function Options (options) { this.options = options; - this.DataAdapter = SelectAdapter; + this.dataAdapter = SelectData; + this.resultsAdapter = ResultsList; + this.dropdownAdapter = Dropdown; + this.selectionAdapter = Selection; } return Options; }) ; define('select2/core',[ - "jquery", - "./options", - "./utils" + 'jquery', + './options', + './utils' ], function ($, Options, Utils) { - var Select2 = function (element, options) { - this.element = element; + var Select2 = function ($element, options) { + this.$element = $element; this.options = new Options(options); - this.adapter = new this.options.DataAdapter(element, options); + // Set up containers and adapters + + this.data = new this.options.dataAdapter($element, options); + + var $container = this.render(); + + $container.insertAfter(this.$element); + + this.selection = new this.options.selectionAdapter($element, options); + + var $selectionContainer = $container.find(".selection"); + var $selection = this.selection.render(); + + $selectionContainer.append($selection); + + this.dropdown = new this.options.dropdownAdapter($element, options); + + var $dropdown = this.dropdown.render(); + + $dropdown.insertAfter($container); + + this.results = new this.options.resultsAdapter($element, options); + + var $resultsContainer = $dropdown.find(".results"); + var $results = this.results.render(); + + $resultsContainer.append($results); + + // Set the initial state + + var initialData = this.data.current(); + + this.selection.update(initialData); + + var self = this; + + this.$element.on("change", function () { + self.selection.update(self.data.current()); + }) }; Utils.Extend(Select2, Utils.Observable); + Select2.prototype.render = function () { + var $container = $( + '
' + + '
' + + '
' + ); + + return $container; + }; + return Select2; }); diff --git a/src/js/select2/adapters/select.js b/src/js/select2/adapters/select.js deleted file mode 100644 index 2c62708f..00000000 --- a/src/js/select2/adapters/select.js +++ /dev/null @@ -1,11 +0,0 @@ -define([ - "../utils" -], function (Utils) { - function SelectAdapter (element, options) { - this.element = element; - } - - Utils.Extend(SelectAdapter, Utils.Observable); - - return SelectAdapter; -}); diff --git a/src/js/select2/core.js b/src/js/select2/core.js index 150eed8e..45fc0e3f 100644 --- a/src/js/select2/core.js +++ b/src/js/select2/core.js @@ -1,16 +1,64 @@ define([ - "jquery", - "./options", - "./utils" + 'jquery', + './options', + './utils' ], function ($, Options, Utils) { - var Select2 = function (element, options) { - this.element = element; + var Select2 = function ($element, options) { + this.$element = $element; this.options = new Options(options); - this.adapter = new this.options.DataAdapter(element, options); + // Set up containers and adapters + + this.data = new this.options.dataAdapter($element, options); + + var $container = this.render(); + + $container.insertAfter(this.$element); + + this.selection = new this.options.selectionAdapter($element, options); + + var $selectionContainer = $container.find(".selection"); + var $selection = this.selection.render(); + + $selectionContainer.append($selection); + + this.dropdown = new this.options.dropdownAdapter($element, options); + + var $dropdown = this.dropdown.render(); + + $dropdown.insertAfter($container); + + this.results = new this.options.resultsAdapter($element, options); + + var $resultsContainer = $dropdown.find(".results"); + var $results = this.results.render(); + + $resultsContainer.append($results); + + // Set the initial state + + var initialData = this.data.current(); + + this.selection.update(initialData); + + var self = this; + + this.$element.on("change", function () { + self.selection.update(self.data.current()); + }) }; Utils.Extend(Select2, Utils.Observable); + Select2.prototype.render = function () { + var $container = $( + '
' + + '
' + + '
' + ); + + return $container; + }; + return Select2; }); diff --git a/src/js/select2/data/select.js b/src/js/select2/data/select.js new file mode 100644 index 00000000..fdda9a2a --- /dev/null +++ b/src/js/select2/data/select.js @@ -0,0 +1,35 @@ +define([ + '../utils' +], function (Utils) { + function SelectAdapter ($element, options) { + this.$element = $element; + } + + Utils.Extend(SelectAdapter, Utils.Observable); + + SelectAdapter.prototype.current = function () { + var data = []; + var self = this; + + this.$element.find(":selected").each(function () { + var $option = $(this); + + var option = self.item($option); + + data.push(option); + }); + + return data; + }; + + SelectAdapter.prototype.item = function ($option) { + var data = { + id: $option.val(), + text: $option.html() + }; + + return data; + }; + + return SelectAdapter; +}); diff --git a/src/js/select2/dropdown.js b/src/js/select2/dropdown.js new file mode 100644 index 00000000..339093f0 --- /dev/null +++ b/src/js/select2/dropdown.js @@ -0,0 +1,21 @@ +define([ + './utils' +], function (Utils) { + function Dropdown ($element, options) { + this.$element = $element; + } + + Utils.Extend(Dropdown, Utils.Observable); + + Dropdown.prototype.render = function () { + var $dropdown = $( + '
' + + '
' + + '
' + ); + + return $dropdown; + } + + return Dropdown; +}) diff --git a/src/js/select2/options.js b/src/js/select2/options.js index 2be781e0..2010ef42 100644 --- a/src/js/select2/options.js +++ b/src/js/select2/options.js @@ -1,10 +1,16 @@ define([ - "./adapters/select" -], function (SelectAdapter) { + './data/select', + './results', + './dropdown', + './selection' +], function (SelectData, ResultsList, Dropdown, Selection) { function Options (options) { this.options = options; - this.DataAdapter = SelectAdapter; + this.dataAdapter = SelectData; + this.resultsAdapter = ResultsList; + this.dropdownAdapter = Dropdown; + this.selectionAdapter = Selection; } return Options; diff --git a/src/js/select2/results.js b/src/js/select2/results.js new file mode 100644 index 00000000..2ed32264 --- /dev/null +++ b/src/js/select2/results.js @@ -0,0 +1,20 @@ +define([ + './utils' +], function (Utils) { + function Results ($element, dataAdapter) { + this.$element = $element; + this.dataAdapter = dataAdapter; + } + + Utils.Extend(Results, Utils.Observable); + + Results.prototype.render = function () { + var $results = $( + '' + ); + + return $results; + } + + return Results; +}) diff --git a/src/js/select2/selection.js b/src/js/select2/selection.js new file mode 100644 index 00000000..f4301e05 --- /dev/null +++ b/src/js/select2/selection.js @@ -0,0 +1,55 @@ +define([ + './utils' +], function (Utils) { + function Selection ($element, options) { + this.$element = $element; + this.options = options; + } + + Utils.Extend(Selection, Utils.Observable); + + Selection.prototype.render = function () { + var $selection = $( + '
' + + '
' + + '
' + ); + + this.$selection = $selection; + + return $selection; + } + + Selection.prototype.bind = function ($container) { + var self = this; + + $container.on('click', function (evt) { + self.trigger("toggle", { + originalEvent: evt + }); + }); + } + + Selection.prototype.clear = function () { + this.$selection.find(".rendered-selection").text(""); + } + + Selection.prototype.display = function (data) { + return data.text; + } + + Selection.prototype.update = function (data) { + if (data.length == 0) { + this.clear(); + return; + } + + var selection = data[0]; + + var formatted = this.display(selection); + + this.$selection.find(".rendered-selection").html(formatted); + } + + return Selection; +});