1
0
mirror of synced 2024-11-22 13:06:08 +03:00

Basic dropdown is in place

This commit is contained in:
Kevin Brown 2014-08-27 20:18:17 -04:00
parent ae57cf6460
commit 01c3dc5886
11 changed files with 611 additions and 51 deletions

29
dist/css/select2.css vendored
View File

@ -19,6 +19,35 @@
line-height: 28px;
overflow: hidden;
text-overflow: ellipsis; }
.select2-container.open .selection .single-select {
border-bottom: none;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0; }
.select2-container .dropdown {
background-color: white;
border: 1px solid #aaa;
border-radius: 4px;
box-sizing: border-box;
display: block;
max-height: 200px;
overflow-y: scroll;
position: absolute;
left: -100000px;
top: -100000px;
width: 100%; }
.select2-container .dropdown .results .options {
list-style: none;
margin: 0;
padding: 0; }
.select2-container .dropdown .results .options .option {
cursor: pointer;
padding: 6px; }
.select2-container.open .dropdown {
border-top-left-radius: 0;
border-top-right-radius: 0;
left: 0;
top: 28px; }
.s2-container {
margin: 0;

View File

@ -57,10 +57,13 @@ define('select2/utils',[], function () {
});
define('select2/data/select',[
'../utils'
], function (Utils) {
'../utils',
'jquery'
], function (Utils, $) {
function SelectAdapter ($element, options) {
this.$element = $element;
SelectAdapter.__super__.constructor.call(this);
}
Utils.Extend(SelectAdapter, Utils.Observable);
@ -80,6 +83,32 @@ define('select2/data/select',[
callback(data);
};
SelectAdapter.prototype.select = function (data) {
var val;
if (this.$element.prop("multiple")) {
var currentData = this.current();
data = [data];
data.push(currentData);
val = [];
for (var d = 0; d < data.length; d++) {
id = data[d].id;
if (ids.indexOf(id) === -1) {
val.push(id);
}
}
} else {
val = data.id;
}
this.$element.val(val);
this.$element.trigger("change");
}
SelectAdapter.prototype.query = function (params, callback) {
var data = [];
var self = this;
@ -107,6 +136,10 @@ define('select2/data/select',[
};
SelectAdapter.prototype.matches = function (params, data) {
if ($.trim(params.term) == "") {
return true;
}
if (data.text.indexOf(params.term) > -1) {
return true;
}
@ -122,7 +155,9 @@ define('select2/results',[
], function (Utils) {
function Results ($element, dataAdapter) {
this.$element = $element;
this.dataAdapter = dataAdapter;
this.data = dataAdapter;
Results.__super__.constructor.call(this);
}
Utils.Extend(Results, Utils.Observable);
@ -132,9 +167,62 @@ define('select2/results',[
'<ul class="options"></ul>'
);
this.$results = $results;
return $results;
};
Results.prototype.clear = function () {
this.$results.empty();
};
Results.prototype.append = function (data) {
var $options = [];
for (var d = 0; d < data.length; d++) {
var item = data[d];
var $option = this.option(item);
$options.push($option);
}
this.$results.append($options);
};
Results.prototype.option = function (data) {
var $option = $(
'<li class="option"></li>'
);
$option.html(data.text);
$option.data("data", data);
return $option;
}
Results.prototype.bind = function ($container) {
var self = this;
this.on("results:all", function (data) {
self.clear();
self.append(data);
});
this.on("results:append", function (data) {
self.append(data);
})
this.$results.on("click", ".option", function (evt) {
var data = $(this).data("data");
self.trigger("selected", {
originalEvent: evt,
data: data
})
});
};
return Results;
})
;
@ -280,15 +368,10 @@ define('select2/core',[
// Bind events
this.selection.bind($container);
// Set the initial state
var self = this;
this.data.current(function (initialData) {
self.selection.update(initialData);
});
this.selection.bind($container);
this.results.bind($container);
this.$element.on("change", function () {
self.data.current(function (data) {
@ -299,6 +382,21 @@ define('select2/core',[
this.selection.on("toggle", function () {
$container.toggleClass("open");
});
this.results.on("selected", function (params) {
self.data.select(params.data);
$container.removeClass("open");
});
// Set the initial state
this.data.current(function (initialData) {
self.selection.update(initialData);
});
this.data.query({}, function (data) {
self.results.trigger("results:all", data);
});
};
Utils.Extend(Select2, Utils.Observable);

118
dist/js/select2.amd.js vendored
View File

@ -57,10 +57,13 @@ define('select2/utils',[], function () {
});
define('select2/data/select',[
'../utils'
], function (Utils) {
'../utils',
'jquery'
], function (Utils, $) {
function SelectAdapter ($element, options) {
this.$element = $element;
SelectAdapter.__super__.constructor.call(this);
}
Utils.Extend(SelectAdapter, Utils.Observable);
@ -80,6 +83,32 @@ define('select2/data/select',[
callback(data);
};
SelectAdapter.prototype.select = function (data) {
var val;
if (this.$element.prop("multiple")) {
var currentData = this.current();
data = [data];
data.push(currentData);
val = [];
for (var d = 0; d < data.length; d++) {
id = data[d].id;
if (ids.indexOf(id) === -1) {
val.push(id);
}
}
} else {
val = data.id;
}
this.$element.val(val);
this.$element.trigger("change");
}
SelectAdapter.prototype.query = function (params, callback) {
var data = [];
var self = this;
@ -107,6 +136,10 @@ define('select2/data/select',[
};
SelectAdapter.prototype.matches = function (params, data) {
if ($.trim(params.term) == "") {
return true;
}
if (data.text.indexOf(params.term) > -1) {
return true;
}
@ -122,7 +155,9 @@ define('select2/results',[
], function (Utils) {
function Results ($element, dataAdapter) {
this.$element = $element;
this.dataAdapter = dataAdapter;
this.data = dataAdapter;
Results.__super__.constructor.call(this);
}
Utils.Extend(Results, Utils.Observable);
@ -132,9 +167,62 @@ define('select2/results',[
'<ul class="options"></ul>'
);
this.$results = $results;
return $results;
};
Results.prototype.clear = function () {
this.$results.empty();
};
Results.prototype.append = function (data) {
var $options = [];
for (var d = 0; d < data.length; d++) {
var item = data[d];
var $option = this.option(item);
$options.push($option);
}
this.$results.append($options);
};
Results.prototype.option = function (data) {
var $option = $(
'<li class="option"></li>'
);
$option.html(data.text);
$option.data("data", data);
return $option;
}
Results.prototype.bind = function ($container) {
var self = this;
this.on("results:all", function (data) {
self.clear();
self.append(data);
});
this.on("results:append", function (data) {
self.append(data);
})
this.$results.on("click", ".option", function (evt) {
var data = $(this).data("data");
self.trigger("selected", {
originalEvent: evt,
data: data
})
});
};
return Results;
})
;
@ -280,15 +368,10 @@ define('select2/core',[
// Bind events
this.selection.bind($container);
// Set the initial state
var self = this;
this.data.current(function (initialData) {
self.selection.update(initialData);
});
this.selection.bind($container);
this.results.bind($container);
this.$element.on("change", function () {
self.data.current(function (data) {
@ -299,6 +382,21 @@ define('select2/core',[
this.selection.on("toggle", function () {
$container.toggleClass("open");
});
this.results.on("selected", function (params) {
self.data.select(params.data);
$container.removeClass("open");
});
// Set the initial state
this.data.current(function (initialData) {
self.selection.update(initialData);
});
this.data.query({}, function (data) {
self.results.trigger("results:all", data);
});
};
Utils.Extend(Select2, Utils.Observable);

View File

@ -9594,10 +9594,13 @@ define('select2/utils',[], function () {
});
define('select2/data/select',[
'../utils'
], function (Utils) {
'../utils',
'jquery'
], function (Utils, $) {
function SelectAdapter ($element, options) {
this.$element = $element;
SelectAdapter.__super__.constructor.call(this);
}
Utils.Extend(SelectAdapter, Utils.Observable);
@ -9617,6 +9620,32 @@ define('select2/data/select',[
callback(data);
};
SelectAdapter.prototype.select = function (data) {
var val;
if (this.$element.prop("multiple")) {
var currentData = this.current();
data = [data];
data.push(currentData);
val = [];
for (var d = 0; d < data.length; d++) {
id = data[d].id;
if (ids.indexOf(id) === -1) {
val.push(id);
}
}
} else {
val = data.id;
}
this.$element.val(val);
this.$element.trigger("change");
}
SelectAdapter.prototype.query = function (params, callback) {
var data = [];
var self = this;
@ -9644,6 +9673,10 @@ define('select2/data/select',[
};
SelectAdapter.prototype.matches = function (params, data) {
if ($.trim(params.term) == "") {
return true;
}
if (data.text.indexOf(params.term) > -1) {
return true;
}
@ -9659,7 +9692,9 @@ define('select2/results',[
], function (Utils) {
function Results ($element, dataAdapter) {
this.$element = $element;
this.dataAdapter = dataAdapter;
this.data = dataAdapter;
Results.__super__.constructor.call(this);
}
Utils.Extend(Results, Utils.Observable);
@ -9669,9 +9704,62 @@ define('select2/results',[
'<ul class="options"></ul>'
);
this.$results = $results;
return $results;
};
Results.prototype.clear = function () {
this.$results.empty();
};
Results.prototype.append = function (data) {
var $options = [];
for (var d = 0; d < data.length; d++) {
var item = data[d];
var $option = this.option(item);
$options.push($option);
}
this.$results.append($options);
};
Results.prototype.option = function (data) {
var $option = $(
'<li class="option"></li>'
);
$option.html(data.text);
$option.data("data", data);
return $option;
}
Results.prototype.bind = function ($container) {
var self = this;
this.on("results:all", function (data) {
self.clear();
self.append(data);
});
this.on("results:append", function (data) {
self.append(data);
})
this.$results.on("click", ".option", function (evt) {
var data = $(this).data("data");
self.trigger("selected", {
originalEvent: evt,
data: data
})
});
};
return Results;
})
;
@ -9817,15 +9905,10 @@ define('select2/core',[
// Bind events
this.selection.bind($container);
// Set the initial state
var self = this;
this.data.current(function (initialData) {
self.selection.update(initialData);
});
this.selection.bind($container);
this.results.bind($container);
this.$element.on("change", function () {
self.data.current(function (data) {
@ -9836,6 +9919,21 @@ define('select2/core',[
this.selection.on("toggle", function () {
$container.toggleClass("open");
});
this.results.on("selected", function (params) {
self.data.select(params.data);
$container.removeClass("open");
});
// Set the initial state
this.data.current(function (initialData) {
self.selection.update(initialData);
});
this.data.query({}, function (data) {
self.results.trigger("results:all", data);
});
};
Utils.Extend(Select2, Utils.Observable);

118
dist/js/select2.js vendored
View File

@ -485,10 +485,13 @@ define('select2/utils',[], function () {
});
define('select2/data/select',[
'../utils'
], function (Utils) {
'../utils',
'jquery'
], function (Utils, $) {
function SelectAdapter ($element, options) {
this.$element = $element;
SelectAdapter.__super__.constructor.call(this);
}
Utils.Extend(SelectAdapter, Utils.Observable);
@ -508,6 +511,32 @@ define('select2/data/select',[
callback(data);
};
SelectAdapter.prototype.select = function (data) {
var val;
if (this.$element.prop("multiple")) {
var currentData = this.current();
data = [data];
data.push(currentData);
val = [];
for (var d = 0; d < data.length; d++) {
id = data[d].id;
if (ids.indexOf(id) === -1) {
val.push(id);
}
}
} else {
val = data.id;
}
this.$element.val(val);
this.$element.trigger("change");
}
SelectAdapter.prototype.query = function (params, callback) {
var data = [];
var self = this;
@ -535,6 +564,10 @@ define('select2/data/select',[
};
SelectAdapter.prototype.matches = function (params, data) {
if ($.trim(params.term) == "") {
return true;
}
if (data.text.indexOf(params.term) > -1) {
return true;
}
@ -550,7 +583,9 @@ define('select2/results',[
], function (Utils) {
function Results ($element, dataAdapter) {
this.$element = $element;
this.dataAdapter = dataAdapter;
this.data = dataAdapter;
Results.__super__.constructor.call(this);
}
Utils.Extend(Results, Utils.Observable);
@ -560,9 +595,62 @@ define('select2/results',[
'<ul class="options"></ul>'
);
this.$results = $results;
return $results;
};
Results.prototype.clear = function () {
this.$results.empty();
};
Results.prototype.append = function (data) {
var $options = [];
for (var d = 0; d < data.length; d++) {
var item = data[d];
var $option = this.option(item);
$options.push($option);
}
this.$results.append($options);
};
Results.prototype.option = function (data) {
var $option = $(
'<li class="option"></li>'
);
$option.html(data.text);
$option.data("data", data);
return $option;
}
Results.prototype.bind = function ($container) {
var self = this;
this.on("results:all", function (data) {
self.clear();
self.append(data);
});
this.on("results:append", function (data) {
self.append(data);
})
this.$results.on("click", ".option", function (evt) {
var data = $(this).data("data");
self.trigger("selected", {
originalEvent: evt,
data: data
})
});
};
return Results;
})
;
@ -708,15 +796,10 @@ define('select2/core',[
// Bind events
this.selection.bind($container);
// Set the initial state
var self = this;
this.data.current(function (initialData) {
self.selection.update(initialData);
});
this.selection.bind($container);
this.results.bind($container);
this.$element.on("change", function () {
self.data.current(function (data) {
@ -727,6 +810,21 @@ define('select2/core',[
this.selection.on("toggle", function () {
$container.toggleClass("open");
});
this.results.on("selected", function (params) {
self.data.select(params.data);
$container.removeClass("open");
});
// Set the initial state
this.data.current(function (initialData) {
self.selection.update(initialData);
});
this.data.query({}, function (data) {
self.results.trigger("results:all", data);
});
};
Utils.Extend(Select2, Utils.Observable);

View File

@ -42,15 +42,10 @@ define([
// Bind events
this.selection.bind($container);
// Set the initial state
var self = this;
this.data.current(function (initialData) {
self.selection.update(initialData);
});
this.selection.bind($container);
this.results.bind($container);
this.$element.on("change", function () {
self.data.current(function (data) {
@ -61,6 +56,21 @@ define([
this.selection.on("toggle", function () {
$container.toggleClass("open");
});
this.results.on("selected", function (params) {
self.data.select(params.data);
$container.removeClass("open");
});
// Set the initial state
this.data.current(function (initialData) {
self.selection.update(initialData);
});
this.data.query({}, function (data) {
self.results.trigger("results:all", data);
});
};
Utils.Extend(Select2, Utils.Observable);

View File

@ -1,8 +1,11 @@
define([
'../utils'
], function (Utils) {
'../utils',
'jquery'
], function (Utils, $) {
function SelectAdapter ($element, options) {
this.$element = $element;
SelectAdapter.__super__.constructor.call(this);
}
Utils.Extend(SelectAdapter, Utils.Observable);
@ -22,6 +25,32 @@ define([
callback(data);
};
SelectAdapter.prototype.select = function (data) {
var val;
if (this.$element.prop("multiple")) {
var currentData = this.current();
data = [data];
data.push(currentData);
val = [];
for (var d = 0; d < data.length; d++) {
id = data[d].id;
if (ids.indexOf(id) === -1) {
val.push(id);
}
}
} else {
val = data.id;
}
this.$element.val(val);
this.$element.trigger("change");
}
SelectAdapter.prototype.query = function (params, callback) {
var data = [];
var self = this;
@ -49,6 +78,10 @@ define([
};
SelectAdapter.prototype.matches = function (params, data) {
if ($.trim(params.term) == "") {
return true;
}
if (data.text.indexOf(params.term) > -1) {
return true;
}

View File

@ -3,7 +3,9 @@ define([
], function (Utils) {
function Results ($element, dataAdapter) {
this.$element = $element;
this.dataAdapter = dataAdapter;
this.data = dataAdapter;
Results.__super__.constructor.call(this);
}
Utils.Extend(Results, Utils.Observable);
@ -13,8 +15,61 @@ define([
'<ul class="options"></ul>'
);
this.$results = $results;
return $results;
};
Results.prototype.clear = function () {
this.$results.empty();
};
Results.prototype.append = function (data) {
var $options = [];
for (var d = 0; d < data.length; d++) {
var item = data[d];
var $option = this.option(item);
$options.push($option);
}
this.$results.append($options);
};
Results.prototype.option = function (data) {
var $option = $(
'<li class="option"></li>'
);
$option.html(data.text);
$option.data("data", data);
return $option;
}
Results.prototype.bind = function ($container) {
var self = this;
this.on("results:all", function (data) {
self.clear();
self.append(data);
});
this.on("results:append", function (data) {
self.append(data);
})
this.$results.on("click", ".option", function (evt) {
var data = $(this).data("data");
self.trigger("selected", {
originalEvent: evt,
data: data
})
});
};
return Results;
})

View File

@ -1,10 +1,42 @@
.select2-container {
.dropdown {
background-color: white;
border: 1px solid #aaa;
border-radius: 4px;
box-sizing: border-box;
display: block;
max-height: 200px;
overflow-y: scroll;
position: absolute;
left: -100000px;
top: -100000px;
width: 100%;
.results {
.options {
list-style: none;
margin: 0;
padding: 0;
.option {
cursor: pointer;
padding: 6px;
}
}
}
}
&.open .dropdown {
//
border-top-left-radius: 0;
border-top-right-radius: 0;
left: 0;
top: 28px;
}
}

View File

@ -18,4 +18,12 @@
text-overflow: ellipsis;
}
}
&.open {
.selection .single-select {
border-bottom: none;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
}
}

View File

@ -8,6 +8,7 @@
}
@import "single";
@import "dropdown";
.s2-container {
margin: 0;