More work on rendering
Switched all of the divs to spans, as the container should not be a block by default.
This commit is contained in:
Kevin Brown
parent
297a06f8d4
commit
ae57cf6460
22
dist/css/select2.css
vendored
22
dist/css/select2.css
vendored
@ -1,3 +1,25 @@
|
||||
.select2-container {
|
||||
box-sizing: border-box;
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
position: relative;
|
||||
vertical-align: middle; }
|
||||
|
||||
.select2-container .selection .single-select {
|
||||
background-color: #eee;
|
||||
border: 1px solid #aaa;
|
||||
border-radius: 4px;
|
||||
box-sizing: border-box;
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
height: 28px; }
|
||||
.select2-container .selection .single-select .rendered-selection {
|
||||
color: #444;
|
||||
display: block;
|
||||
line-height: 28px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis; }
|
||||
|
||||
.s2-container {
|
||||
margin: 0;
|
||||
position: relative;
|
||||
|
||||
85
dist/js/select2.amd.full.js
vendored
85
dist/js/select2.amd.full.js
vendored
@ -34,8 +34,10 @@ define('select2/utils',[], function () {
|
||||
};
|
||||
|
||||
Observable.prototype.trigger = function (event) {
|
||||
var slice = Array.prototype.slice;
|
||||
|
||||
if (event in this.listeners) {
|
||||
this.invoke(this.listeners[event], util.shift(arguments));
|
||||
this.invoke(this.listeners[event], slice.call(arguments, 1));
|
||||
}
|
||||
|
||||
if ("*" in this.listeners) {
|
||||
@ -63,7 +65,7 @@ define('select2/data/select',[
|
||||
|
||||
Utils.Extend(SelectAdapter, Utils.Observable);
|
||||
|
||||
SelectAdapter.prototype.current = function () {
|
||||
SelectAdapter.prototype.current = function (callback) {
|
||||
var data = [];
|
||||
var self = this;
|
||||
|
||||
@ -75,7 +77,24 @@ define('select2/data/select',[
|
||||
data.push(option);
|
||||
});
|
||||
|
||||
return data;
|
||||
callback(data);
|
||||
};
|
||||
|
||||
SelectAdapter.prototype.query = function (params, callback) {
|
||||
var data = [];
|
||||
var self = this;
|
||||
|
||||
this.$element.find("option").each(function () {
|
||||
var $option = $(this);
|
||||
|
||||
var option = self.item($option);
|
||||
|
||||
if (self.matches(params, option)) {
|
||||
data.push(option);
|
||||
}
|
||||
});
|
||||
|
||||
callback(data);
|
||||
};
|
||||
|
||||
SelectAdapter.prototype.item = function ($option) {
|
||||
@ -87,6 +106,14 @@ define('select2/data/select',[
|
||||
return data;
|
||||
};
|
||||
|
||||
SelectAdapter.prototype.matches = function (params, data) {
|
||||
if (data.text.indexOf(params.term) > -1) {
|
||||
return true;
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
return SelectAdapter;
|
||||
});
|
||||
|
||||
@ -122,9 +149,9 @@ define('select2/dropdown',[
|
||||
|
||||
Dropdown.prototype.render = function () {
|
||||
var $dropdown = $(
|
||||
'<div class="select2 select2-dropdown">' +
|
||||
'<div class="results"></div>' +
|
||||
'</div>'
|
||||
'<span class="">' +
|
||||
'<span class="results"></span>' +
|
||||
'</span>'
|
||||
);
|
||||
|
||||
return $dropdown;
|
||||
@ -139,15 +166,17 @@ define('select2/selection',[
|
||||
function Selection ($element, options) {
|
||||
this.$element = $element;
|
||||
this.options = options;
|
||||
|
||||
Selection.__super__.constructor.call(this);
|
||||
}
|
||||
|
||||
Utils.Extend(Selection, Utils.Observable);
|
||||
|
||||
Selection.prototype.render = function () {
|
||||
var $selection = $(
|
||||
'<div class="single-select">' +
|
||||
'<div class="rendered-selection"></div>' +
|
||||
'</div>'
|
||||
'<span class="single-select">' +
|
||||
'<span class="rendered-selection"></span>' +
|
||||
'</span>'
|
||||
);
|
||||
|
||||
this.$selection = $selection;
|
||||
@ -158,7 +187,7 @@ define('select2/selection',[
|
||||
Selection.prototype.bind = function ($container) {
|
||||
var self = this;
|
||||
|
||||
$container.on('click', function (evt) {
|
||||
this.$selection.on('click', function (evt) {
|
||||
self.trigger("toggle", {
|
||||
originalEvent: evt
|
||||
});
|
||||
@ -216,6 +245,8 @@ define('select2/core',[
|
||||
this.$element = $element;
|
||||
this.options = new Options(options);
|
||||
|
||||
Select2.__super__.constructor.call(this);
|
||||
|
||||
// Set up containers and adapters
|
||||
|
||||
this.data = new this.options.dataAdapter($element, options);
|
||||
@ -224,6 +255,8 @@ define('select2/core',[
|
||||
|
||||
$container.insertAfter(this.$element);
|
||||
|
||||
$container.width($element.width());
|
||||
|
||||
this.selection = new this.options.selectionAdapter($element, options);
|
||||
|
||||
var $selectionContainer = $container.find(".selection");
|
||||
@ -233,9 +266,10 @@ define('select2/core',[
|
||||
|
||||
this.dropdown = new this.options.dropdownAdapter($element, options);
|
||||
|
||||
var $dropdownContainer = $container.find(".dropdown");
|
||||
var $dropdown = this.dropdown.render();
|
||||
|
||||
$dropdown.insertAfter($container);
|
||||
$dropdownContainer.append($dropdown);
|
||||
|
||||
this.results = new this.options.resultsAdapter($element, options);
|
||||
|
||||
@ -244,26 +278,37 @@ define('select2/core',[
|
||||
|
||||
$resultsContainer.append($results);
|
||||
|
||||
// Bind events
|
||||
|
||||
this.selection.bind($container);
|
||||
|
||||
// Set the initial state
|
||||
|
||||
var initialData = this.data.current();
|
||||
|
||||
this.selection.update(initialData);
|
||||
|
||||
var self = this;
|
||||
|
||||
this.data.current(function (initialData) {
|
||||
self.selection.update(initialData);
|
||||
});
|
||||
|
||||
this.$element.on("change", function () {
|
||||
self.selection.update(self.data.current());
|
||||
})
|
||||
self.data.current(function (data) {
|
||||
self.selection.update(data);
|
||||
});
|
||||
});
|
||||
|
||||
this.selection.on("toggle", function () {
|
||||
$container.toggleClass("open");
|
||||
});
|
||||
};
|
||||
|
||||
Utils.Extend(Select2, Utils.Observable);
|
||||
|
||||
Select2.prototype.render = function () {
|
||||
var $container = $(
|
||||
'<div class="select2 select2-container">' +
|
||||
'<div class="selection"></div>' +
|
||||
'</div>'
|
||||
'<span class="select2 select2-container">' +
|
||||
'<span class="selection"></span>' +
|
||||
'<span class="dropdown"></span>' +
|
||||
'</span>'
|
||||
);
|
||||
|
||||
return $container;
|
||||
|
||||
85
dist/js/select2.amd.js
vendored
85
dist/js/select2.amd.js
vendored
@ -34,8 +34,10 @@ define('select2/utils',[], function () {
|
||||
};
|
||||
|
||||
Observable.prototype.trigger = function (event) {
|
||||
var slice = Array.prototype.slice;
|
||||
|
||||
if (event in this.listeners) {
|
||||
this.invoke(this.listeners[event], util.shift(arguments));
|
||||
this.invoke(this.listeners[event], slice.call(arguments, 1));
|
||||
}
|
||||
|
||||
if ("*" in this.listeners) {
|
||||
@ -63,7 +65,7 @@ define('select2/data/select',[
|
||||
|
||||
Utils.Extend(SelectAdapter, Utils.Observable);
|
||||
|
||||
SelectAdapter.prototype.current = function () {
|
||||
SelectAdapter.prototype.current = function (callback) {
|
||||
var data = [];
|
||||
var self = this;
|
||||
|
||||
@ -75,7 +77,24 @@ define('select2/data/select',[
|
||||
data.push(option);
|
||||
});
|
||||
|
||||
return data;
|
||||
callback(data);
|
||||
};
|
||||
|
||||
SelectAdapter.prototype.query = function (params, callback) {
|
||||
var data = [];
|
||||
var self = this;
|
||||
|
||||
this.$element.find("option").each(function () {
|
||||
var $option = $(this);
|
||||
|
||||
var option = self.item($option);
|
||||
|
||||
if (self.matches(params, option)) {
|
||||
data.push(option);
|
||||
}
|
||||
});
|
||||
|
||||
callback(data);
|
||||
};
|
||||
|
||||
SelectAdapter.prototype.item = function ($option) {
|
||||
@ -87,6 +106,14 @@ define('select2/data/select',[
|
||||
return data;
|
||||
};
|
||||
|
||||
SelectAdapter.prototype.matches = function (params, data) {
|
||||
if (data.text.indexOf(params.term) > -1) {
|
||||
return true;
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
return SelectAdapter;
|
||||
});
|
||||
|
||||
@ -122,9 +149,9 @@ define('select2/dropdown',[
|
||||
|
||||
Dropdown.prototype.render = function () {
|
||||
var $dropdown = $(
|
||||
'<div class="select2 select2-dropdown">' +
|
||||
'<div class="results"></div>' +
|
||||
'</div>'
|
||||
'<span class="">' +
|
||||
'<span class="results"></span>' +
|
||||
'</span>'
|
||||
);
|
||||
|
||||
return $dropdown;
|
||||
@ -139,15 +166,17 @@ define('select2/selection',[
|
||||
function Selection ($element, options) {
|
||||
this.$element = $element;
|
||||
this.options = options;
|
||||
|
||||
Selection.__super__.constructor.call(this);
|
||||
}
|
||||
|
||||
Utils.Extend(Selection, Utils.Observable);
|
||||
|
||||
Selection.prototype.render = function () {
|
||||
var $selection = $(
|
||||
'<div class="single-select">' +
|
||||
'<div class="rendered-selection"></div>' +
|
||||
'</div>'
|
||||
'<span class="single-select">' +
|
||||
'<span class="rendered-selection"></span>' +
|
||||
'</span>'
|
||||
);
|
||||
|
||||
this.$selection = $selection;
|
||||
@ -158,7 +187,7 @@ define('select2/selection',[
|
||||
Selection.prototype.bind = function ($container) {
|
||||
var self = this;
|
||||
|
||||
$container.on('click', function (evt) {
|
||||
this.$selection.on('click', function (evt) {
|
||||
self.trigger("toggle", {
|
||||
originalEvent: evt
|
||||
});
|
||||
@ -216,6 +245,8 @@ define('select2/core',[
|
||||
this.$element = $element;
|
||||
this.options = new Options(options);
|
||||
|
||||
Select2.__super__.constructor.call(this);
|
||||
|
||||
// Set up containers and adapters
|
||||
|
||||
this.data = new this.options.dataAdapter($element, options);
|
||||
@ -224,6 +255,8 @@ define('select2/core',[
|
||||
|
||||
$container.insertAfter(this.$element);
|
||||
|
||||
$container.width($element.width());
|
||||
|
||||
this.selection = new this.options.selectionAdapter($element, options);
|
||||
|
||||
var $selectionContainer = $container.find(".selection");
|
||||
@ -233,9 +266,10 @@ define('select2/core',[
|
||||
|
||||
this.dropdown = new this.options.dropdownAdapter($element, options);
|
||||
|
||||
var $dropdownContainer = $container.find(".dropdown");
|
||||
var $dropdown = this.dropdown.render();
|
||||
|
||||
$dropdown.insertAfter($container);
|
||||
$dropdownContainer.append($dropdown);
|
||||
|
||||
this.results = new this.options.resultsAdapter($element, options);
|
||||
|
||||
@ -244,26 +278,37 @@ define('select2/core',[
|
||||
|
||||
$resultsContainer.append($results);
|
||||
|
||||
// Bind events
|
||||
|
||||
this.selection.bind($container);
|
||||
|
||||
// Set the initial state
|
||||
|
||||
var initialData = this.data.current();
|
||||
|
||||
this.selection.update(initialData);
|
||||
|
||||
var self = this;
|
||||
|
||||
this.data.current(function (initialData) {
|
||||
self.selection.update(initialData);
|
||||
});
|
||||
|
||||
this.$element.on("change", function () {
|
||||
self.selection.update(self.data.current());
|
||||
})
|
||||
self.data.current(function (data) {
|
||||
self.selection.update(data);
|
||||
});
|
||||
});
|
||||
|
||||
this.selection.on("toggle", function () {
|
||||
$container.toggleClass("open");
|
||||
});
|
||||
};
|
||||
|
||||
Utils.Extend(Select2, Utils.Observable);
|
||||
|
||||
Select2.prototype.render = function () {
|
||||
var $container = $(
|
||||
'<div class="select2 select2-container">' +
|
||||
'<div class="selection"></div>' +
|
||||
'</div>'
|
||||
'<span class="select2 select2-container">' +
|
||||
'<span class="selection"></span>' +
|
||||
'<span class="dropdown"></span>' +
|
||||
'</span>'
|
||||
);
|
||||
|
||||
return $container;
|
||||
|
||||
85
dist/js/select2.full.js
vendored
85
dist/js/select2.full.js
vendored
@ -9571,8 +9571,10 @@ define('select2/utils',[], function () {
|
||||
};
|
||||
|
||||
Observable.prototype.trigger = function (event) {
|
||||
var slice = Array.prototype.slice;
|
||||
|
||||
if (event in this.listeners) {
|
||||
this.invoke(this.listeners[event], util.shift(arguments));
|
||||
this.invoke(this.listeners[event], slice.call(arguments, 1));
|
||||
}
|
||||
|
||||
if ("*" in this.listeners) {
|
||||
@ -9600,7 +9602,7 @@ define('select2/data/select',[
|
||||
|
||||
Utils.Extend(SelectAdapter, Utils.Observable);
|
||||
|
||||
SelectAdapter.prototype.current = function () {
|
||||
SelectAdapter.prototype.current = function (callback) {
|
||||
var data = [];
|
||||
var self = this;
|
||||
|
||||
@ -9612,7 +9614,24 @@ define('select2/data/select',[
|
||||
data.push(option);
|
||||
});
|
||||
|
||||
return data;
|
||||
callback(data);
|
||||
};
|
||||
|
||||
SelectAdapter.prototype.query = function (params, callback) {
|
||||
var data = [];
|
||||
var self = this;
|
||||
|
||||
this.$element.find("option").each(function () {
|
||||
var $option = $(this);
|
||||
|
||||
var option = self.item($option);
|
||||
|
||||
if (self.matches(params, option)) {
|
||||
data.push(option);
|
||||
}
|
||||
});
|
||||
|
||||
callback(data);
|
||||
};
|
||||
|
||||
SelectAdapter.prototype.item = function ($option) {
|
||||
@ -9624,6 +9643,14 @@ define('select2/data/select',[
|
||||
return data;
|
||||
};
|
||||
|
||||
SelectAdapter.prototype.matches = function (params, data) {
|
||||
if (data.text.indexOf(params.term) > -1) {
|
||||
return true;
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
return SelectAdapter;
|
||||
});
|
||||
|
||||
@ -9659,9 +9686,9 @@ define('select2/dropdown',[
|
||||
|
||||
Dropdown.prototype.render = function () {
|
||||
var $dropdown = $(
|
||||
'<div class="select2 select2-dropdown">' +
|
||||
'<div class="results"></div>' +
|
||||
'</div>'
|
||||
'<span class="">' +
|
||||
'<span class="results"></span>' +
|
||||
'</span>'
|
||||
);
|
||||
|
||||
return $dropdown;
|
||||
@ -9676,15 +9703,17 @@ define('select2/selection',[
|
||||
function Selection ($element, options) {
|
||||
this.$element = $element;
|
||||
this.options = options;
|
||||
|
||||
Selection.__super__.constructor.call(this);
|
||||
}
|
||||
|
||||
Utils.Extend(Selection, Utils.Observable);
|
||||
|
||||
Selection.prototype.render = function () {
|
||||
var $selection = $(
|
||||
'<div class="single-select">' +
|
||||
'<div class="rendered-selection"></div>' +
|
||||
'</div>'
|
||||
'<span class="single-select">' +
|
||||
'<span class="rendered-selection"></span>' +
|
||||
'</span>'
|
||||
);
|
||||
|
||||
this.$selection = $selection;
|
||||
@ -9695,7 +9724,7 @@ define('select2/selection',[
|
||||
Selection.prototype.bind = function ($container) {
|
||||
var self = this;
|
||||
|
||||
$container.on('click', function (evt) {
|
||||
this.$selection.on('click', function (evt) {
|
||||
self.trigger("toggle", {
|
||||
originalEvent: evt
|
||||
});
|
||||
@ -9753,6 +9782,8 @@ define('select2/core',[
|
||||
this.$element = $element;
|
||||
this.options = new Options(options);
|
||||
|
||||
Select2.__super__.constructor.call(this);
|
||||
|
||||
// Set up containers and adapters
|
||||
|
||||
this.data = new this.options.dataAdapter($element, options);
|
||||
@ -9761,6 +9792,8 @@ define('select2/core',[
|
||||
|
||||
$container.insertAfter(this.$element);
|
||||
|
||||
$container.width($element.width());
|
||||
|
||||
this.selection = new this.options.selectionAdapter($element, options);
|
||||
|
||||
var $selectionContainer = $container.find(".selection");
|
||||
@ -9770,9 +9803,10 @@ define('select2/core',[
|
||||
|
||||
this.dropdown = new this.options.dropdownAdapter($element, options);
|
||||
|
||||
var $dropdownContainer = $container.find(".dropdown");
|
||||
var $dropdown = this.dropdown.render();
|
||||
|
||||
$dropdown.insertAfter($container);
|
||||
$dropdownContainer.append($dropdown);
|
||||
|
||||
this.results = new this.options.resultsAdapter($element, options);
|
||||
|
||||
@ -9781,26 +9815,37 @@ define('select2/core',[
|
||||
|
||||
$resultsContainer.append($results);
|
||||
|
||||
// Bind events
|
||||
|
||||
this.selection.bind($container);
|
||||
|
||||
// Set the initial state
|
||||
|
||||
var initialData = this.data.current();
|
||||
|
||||
this.selection.update(initialData);
|
||||
|
||||
var self = this;
|
||||
|
||||
this.data.current(function (initialData) {
|
||||
self.selection.update(initialData);
|
||||
});
|
||||
|
||||
this.$element.on("change", function () {
|
||||
self.selection.update(self.data.current());
|
||||
})
|
||||
self.data.current(function (data) {
|
||||
self.selection.update(data);
|
||||
});
|
||||
});
|
||||
|
||||
this.selection.on("toggle", function () {
|
||||
$container.toggleClass("open");
|
||||
});
|
||||
};
|
||||
|
||||
Utils.Extend(Select2, Utils.Observable);
|
||||
|
||||
Select2.prototype.render = function () {
|
||||
var $container = $(
|
||||
'<div class="select2 select2-container">' +
|
||||
'<div class="selection"></div>' +
|
||||
'</div>'
|
||||
'<span class="select2 select2-container">' +
|
||||
'<span class="selection"></span>' +
|
||||
'<span class="dropdown"></span>' +
|
||||
'</span>'
|
||||
);
|
||||
|
||||
return $container;
|
||||
|
||||
85
dist/js/select2.js
vendored
85
dist/js/select2.js
vendored
@ -462,8 +462,10 @@ define('select2/utils',[], function () {
|
||||
};
|
||||
|
||||
Observable.prototype.trigger = function (event) {
|
||||
var slice = Array.prototype.slice;
|
||||
|
||||
if (event in this.listeners) {
|
||||
this.invoke(this.listeners[event], util.shift(arguments));
|
||||
this.invoke(this.listeners[event], slice.call(arguments, 1));
|
||||
}
|
||||
|
||||
if ("*" in this.listeners) {
|
||||
@ -491,7 +493,7 @@ define('select2/data/select',[
|
||||
|
||||
Utils.Extend(SelectAdapter, Utils.Observable);
|
||||
|
||||
SelectAdapter.prototype.current = function () {
|
||||
SelectAdapter.prototype.current = function (callback) {
|
||||
var data = [];
|
||||
var self = this;
|
||||
|
||||
@ -503,7 +505,24 @@ define('select2/data/select',[
|
||||
data.push(option);
|
||||
});
|
||||
|
||||
return data;
|
||||
callback(data);
|
||||
};
|
||||
|
||||
SelectAdapter.prototype.query = function (params, callback) {
|
||||
var data = [];
|
||||
var self = this;
|
||||
|
||||
this.$element.find("option").each(function () {
|
||||
var $option = $(this);
|
||||
|
||||
var option = self.item($option);
|
||||
|
||||
if (self.matches(params, option)) {
|
||||
data.push(option);
|
||||
}
|
||||
});
|
||||
|
||||
callback(data);
|
||||
};
|
||||
|
||||
SelectAdapter.prototype.item = function ($option) {
|
||||
@ -515,6 +534,14 @@ define('select2/data/select',[
|
||||
return data;
|
||||
};
|
||||
|
||||
SelectAdapter.prototype.matches = function (params, data) {
|
||||
if (data.text.indexOf(params.term) > -1) {
|
||||
return true;
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
return SelectAdapter;
|
||||
});
|
||||
|
||||
@ -550,9 +577,9 @@ define('select2/dropdown',[
|
||||
|
||||
Dropdown.prototype.render = function () {
|
||||
var $dropdown = $(
|
||||
'<div class="select2 select2-dropdown">' +
|
||||
'<div class="results"></div>' +
|
||||
'</div>'
|
||||
'<span class="">' +
|
||||
'<span class="results"></span>' +
|
||||
'</span>'
|
||||
);
|
||||
|
||||
return $dropdown;
|
||||
@ -567,15 +594,17 @@ define('select2/selection',[
|
||||
function Selection ($element, options) {
|
||||
this.$element = $element;
|
||||
this.options = options;
|
||||
|
||||
Selection.__super__.constructor.call(this);
|
||||
}
|
||||
|
||||
Utils.Extend(Selection, Utils.Observable);
|
||||
|
||||
Selection.prototype.render = function () {
|
||||
var $selection = $(
|
||||
'<div class="single-select">' +
|
||||
'<div class="rendered-selection"></div>' +
|
||||
'</div>'
|
||||
'<span class="single-select">' +
|
||||
'<span class="rendered-selection"></span>' +
|
||||
'</span>'
|
||||
);
|
||||
|
||||
this.$selection = $selection;
|
||||
@ -586,7 +615,7 @@ define('select2/selection',[
|
||||
Selection.prototype.bind = function ($container) {
|
||||
var self = this;
|
||||
|
||||
$container.on('click', function (evt) {
|
||||
this.$selection.on('click', function (evt) {
|
||||
self.trigger("toggle", {
|
||||
originalEvent: evt
|
||||
});
|
||||
@ -644,6 +673,8 @@ define('select2/core',[
|
||||
this.$element = $element;
|
||||
this.options = new Options(options);
|
||||
|
||||
Select2.__super__.constructor.call(this);
|
||||
|
||||
// Set up containers and adapters
|
||||
|
||||
this.data = new this.options.dataAdapter($element, options);
|
||||
@ -652,6 +683,8 @@ define('select2/core',[
|
||||
|
||||
$container.insertAfter(this.$element);
|
||||
|
||||
$container.width($element.width());
|
||||
|
||||
this.selection = new this.options.selectionAdapter($element, options);
|
||||
|
||||
var $selectionContainer = $container.find(".selection");
|
||||
@ -661,9 +694,10 @@ define('select2/core',[
|
||||
|
||||
this.dropdown = new this.options.dropdownAdapter($element, options);
|
||||
|
||||
var $dropdownContainer = $container.find(".dropdown");
|
||||
var $dropdown = this.dropdown.render();
|
||||
|
||||
$dropdown.insertAfter($container);
|
||||
$dropdownContainer.append($dropdown);
|
||||
|
||||
this.results = new this.options.resultsAdapter($element, options);
|
||||
|
||||
@ -672,26 +706,37 @@ define('select2/core',[
|
||||
|
||||
$resultsContainer.append($results);
|
||||
|
||||
// Bind events
|
||||
|
||||
this.selection.bind($container);
|
||||
|
||||
// Set the initial state
|
||||
|
||||
var initialData = this.data.current();
|
||||
|
||||
this.selection.update(initialData);
|
||||
|
||||
var self = this;
|
||||
|
||||
this.data.current(function (initialData) {
|
||||
self.selection.update(initialData);
|
||||
});
|
||||
|
||||
this.$element.on("change", function () {
|
||||
self.selection.update(self.data.current());
|
||||
})
|
||||
self.data.current(function (data) {
|
||||
self.selection.update(data);
|
||||
});
|
||||
});
|
||||
|
||||
this.selection.on("toggle", function () {
|
||||
$container.toggleClass("open");
|
||||
});
|
||||
};
|
||||
|
||||
Utils.Extend(Select2, Utils.Observable);
|
||||
|
||||
Select2.prototype.render = function () {
|
||||
var $container = $(
|
||||
'<div class="select2 select2-container">' +
|
||||
'<div class="selection"></div>' +
|
||||
'</div>'
|
||||
'<span class="select2 select2-container">' +
|
||||
'<span class="selection"></span>' +
|
||||
'<span class="dropdown"></span>' +
|
||||
'</span>'
|
||||
);
|
||||
|
||||
return $container;
|
||||
|
||||
36
src/js/select2/core.js
vendored
36
src/js/select2/core.js
vendored
@ -7,6 +7,8 @@ define([
|
||||
this.$element = $element;
|
||||
this.options = new Options(options);
|
||||
|
||||
Select2.__super__.constructor.call(this);
|
||||
|
||||
// Set up containers and adapters
|
||||
|
||||
this.data = new this.options.dataAdapter($element, options);
|
||||
@ -15,6 +17,8 @@ define([
|
||||
|
||||
$container.insertAfter(this.$element);
|
||||
|
||||
$container.width($element.width());
|
||||
|
||||
this.selection = new this.options.selectionAdapter($element, options);
|
||||
|
||||
var $selectionContainer = $container.find(".selection");
|
||||
@ -24,9 +28,10 @@ define([
|
||||
|
||||
this.dropdown = new this.options.dropdownAdapter($element, options);
|
||||
|
||||
var $dropdownContainer = $container.find(".dropdown");
|
||||
var $dropdown = this.dropdown.render();
|
||||
|
||||
$dropdown.insertAfter($container);
|
||||
$dropdownContainer.append($dropdown);
|
||||
|
||||
this.results = new this.options.resultsAdapter($element, options);
|
||||
|
||||
@ -35,26 +40,37 @@ define([
|
||||
|
||||
$resultsContainer.append($results);
|
||||
|
||||
// Bind events
|
||||
|
||||
this.selection.bind($container);
|
||||
|
||||
// Set the initial state
|
||||
|
||||
var initialData = this.data.current();
|
||||
|
||||
this.selection.update(initialData);
|
||||
|
||||
var self = this;
|
||||
|
||||
this.data.current(function (initialData) {
|
||||
self.selection.update(initialData);
|
||||
});
|
||||
|
||||
this.$element.on("change", function () {
|
||||
self.selection.update(self.data.current());
|
||||
})
|
||||
self.data.current(function (data) {
|
||||
self.selection.update(data);
|
||||
});
|
||||
});
|
||||
|
||||
this.selection.on("toggle", function () {
|
||||
$container.toggleClass("open");
|
||||
});
|
||||
};
|
||||
|
||||
Utils.Extend(Select2, Utils.Observable);
|
||||
|
||||
Select2.prototype.render = function () {
|
||||
var $container = $(
|
||||
'<div class="select2 select2-container">' +
|
||||
'<div class="selection"></div>' +
|
||||
'</div>'
|
||||
'<span class="select2 select2-container">' +
|
||||
'<span class="selection"></span>' +
|
||||
'<span class="dropdown"></span>' +
|
||||
'</span>'
|
||||
);
|
||||
|
||||
return $container;
|
||||
|
||||
29
src/js/select2/data/select.js
vendored
29
src/js/select2/data/select.js
vendored
@ -7,7 +7,7 @@ define([
|
||||
|
||||
Utils.Extend(SelectAdapter, Utils.Observable);
|
||||
|
||||
SelectAdapter.prototype.current = function () {
|
||||
SelectAdapter.prototype.current = function (callback) {
|
||||
var data = [];
|
||||
var self = this;
|
||||
|
||||
@ -19,7 +19,24 @@ define([
|
||||
data.push(option);
|
||||
});
|
||||
|
||||
return data;
|
||||
callback(data);
|
||||
};
|
||||
|
||||
SelectAdapter.prototype.query = function (params, callback) {
|
||||
var data = [];
|
||||
var self = this;
|
||||
|
||||
this.$element.find("option").each(function () {
|
||||
var $option = $(this);
|
||||
|
||||
var option = self.item($option);
|
||||
|
||||
if (self.matches(params, option)) {
|
||||
data.push(option);
|
||||
}
|
||||
});
|
||||
|
||||
callback(data);
|
||||
};
|
||||
|
||||
SelectAdapter.prototype.item = function ($option) {
|
||||
@ -31,5 +48,13 @@ define([
|
||||
return data;
|
||||
};
|
||||
|
||||
SelectAdapter.prototype.matches = function (params, data) {
|
||||
if (data.text.indexOf(params.term) > -1) {
|
||||
return true;
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
return SelectAdapter;
|
||||
});
|
||||
|
||||
6
src/js/select2/dropdown.js
vendored
6
src/js/select2/dropdown.js
vendored
@ -9,9 +9,9 @@ define([
|
||||
|
||||
Dropdown.prototype.render = function () {
|
||||
var $dropdown = $(
|
||||
'<div class="select2 select2-dropdown">' +
|
||||
'<div class="results"></div>' +
|
||||
'</div>'
|
||||
'<span class="">' +
|
||||
'<span class="results"></span>' +
|
||||
'</span>'
|
||||
);
|
||||
|
||||
return $dropdown;
|
||||
|
||||
10
src/js/select2/selection.js
vendored
10
src/js/select2/selection.js
vendored
@ -4,15 +4,17 @@ define([
|
||||
function Selection ($element, options) {
|
||||
this.$element = $element;
|
||||
this.options = options;
|
||||
|
||||
Selection.__super__.constructor.call(this);
|
||||
}
|
||||
|
||||
Utils.Extend(Selection, Utils.Observable);
|
||||
|
||||
Selection.prototype.render = function () {
|
||||
var $selection = $(
|
||||
'<div class="single-select">' +
|
||||
'<div class="rendered-selection"></div>' +
|
||||
'</div>'
|
||||
'<span class="single-select">' +
|
||||
'<span class="rendered-selection"></span>' +
|
||||
'</span>'
|
||||
);
|
||||
|
||||
this.$selection = $selection;
|
||||
@ -23,7 +25,7 @@ define([
|
||||
Selection.prototype.bind = function ($container) {
|
||||
var self = this;
|
||||
|
||||
$container.on('click', function (evt) {
|
||||
this.$selection.on('click', function (evt) {
|
||||
self.trigger("toggle", {
|
||||
originalEvent: evt
|
||||
});
|
||||
|
||||
4
src/js/select2/utils.js
vendored
4
src/js/select2/utils.js
vendored
@ -34,8 +34,10 @@ define([], function () {
|
||||
};
|
||||
|
||||
Observable.prototype.trigger = function (event) {
|
||||
var slice = Array.prototype.slice;
|
||||
|
||||
if (event in this.listeners) {
|
||||
this.invoke(this.listeners[event], util.shift(arguments));
|
||||
this.invoke(this.listeners[event], slice.call(arguments, 1));
|
||||
}
|
||||
|
||||
if ("*" in this.listeners) {
|
||||
|
||||
10
src/scss/_dropdown.scss
Normal file
10
src/scss/_dropdown.scss
Normal file
@ -0,0 +1,10 @@
|
||||
.select2-container {
|
||||
.dropdown {
|
||||
background-color: white;
|
||||
border: 1px solid #aaa;
|
||||
}
|
||||
|
||||
&.open .dropdown {
|
||||
//
|
||||
}
|
||||
}
|
||||
21
src/scss/_single.scss
Normal file
21
src/scss/_single.scss
Normal file
@ -0,0 +1,21 @@
|
||||
.select2-container {
|
||||
.selection .single-select {
|
||||
background-color: #eee;
|
||||
border: 1px solid #aaa;
|
||||
border-radius: 4px;
|
||||
box-sizing: border-box;
|
||||
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
|
||||
height: 28px;
|
||||
|
||||
.rendered-selection {
|
||||
color: #444;
|
||||
display: block;
|
||||
line-height: 28px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,3 +1,14 @@
|
||||
.select2-container {
|
||||
box-sizing: border-box;
|
||||
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
position: relative;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
@import "single";
|
||||
|
||||
.s2-container {
|
||||
margin: 0;
|
||||
position: relative;
|
||||
@ -93,4 +104,4 @@
|
||||
|
||||
.s2-hidden {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user