Introduces select-kit
* renames `select-box-kit` into `select-kit`
* introduces `single-select` and `multi-select` as base components
* introduces {{search-advanced-category-chooser}} as a better component for selecting category in advanced search
* improves events handling in select-kit
* recreates color selection inputs using {{multi-select}} and a custom {{selected-color}} component
* replaces category-selector by a component using select-kit and based on multi-select
* improves positioning of wrapper
* removes the need for offscreen, and instead use `select-kit-header` as a base focus point for all select-kit based components
* introduces a formal plugin api for select-kit based components
* introduces a formal pattern for loading and updating select-kit based components:
```
computeValue()
computeContent()
mutateValue()
```
This commit is contained in:
Joffrey JAFFEUX
GitHub
@@ -1,146 +0,0 @@
|
||||
function checkSelectBoxIsNotExpanded(selectBoxSelector) {
|
||||
if (find(selectBoxSelector).hasClass('is-expanded')) {
|
||||
throw 'You expected select-box to be collapsed but it is expanded.';
|
||||
}
|
||||
}
|
||||
|
||||
function checkSelectBoxIsNotCollapsed(selectBoxSelector) {
|
||||
if (!find(selectBoxSelector).hasClass('is-expanded')) {
|
||||
throw 'You expected select-box to be expanded but it is collapsed.';
|
||||
}
|
||||
}
|
||||
|
||||
Ember.Test.registerAsyncHelper('expandSelectBoxKit', function(app, selectBoxSelector) {
|
||||
selectBoxSelector = selectBoxSelector || '.select-box-kit';
|
||||
|
||||
checkSelectBoxIsNotExpanded(selectBoxSelector);
|
||||
|
||||
click(selectBoxSelector + ' .select-box-kit-header');
|
||||
});
|
||||
|
||||
Ember.Test.registerAsyncHelper('collapseSelectBoxKit', function(app, selectBoxSelector) {
|
||||
selectBoxSelector = selectBoxSelector || '.select-box-kit';
|
||||
|
||||
checkSelectBoxIsNotCollapsed(selectBoxSelector);
|
||||
|
||||
click(selectBoxSelector + ' .select-box-kit-header');
|
||||
});
|
||||
|
||||
Ember.Test.registerAsyncHelper('selectBoxKitSelectRow', function(app, rowValue, options) {
|
||||
options = options || {};
|
||||
options.selector = options.selector || '.select-box-kit';
|
||||
|
||||
checkSelectBoxIsNotCollapsed(options.selector);
|
||||
|
||||
click(options.selector + " .select-box-kit-row[data-value='" + rowValue + "']");
|
||||
});
|
||||
|
||||
Ember.Test.registerAsyncHelper('selectBoxKitSelectNoneRow', function(app, options) {
|
||||
options = options || {};
|
||||
options.selector = options.selector || '.select-box-kit';
|
||||
|
||||
checkSelectBoxIsNotCollapsed(options.selector);
|
||||
|
||||
click(options.selector + " .select-box-kit-row.none");
|
||||
});
|
||||
|
||||
Ember.Test.registerAsyncHelper('selectBoxKitFillInFilter', function(app, filter, options) {
|
||||
options = options || {};
|
||||
options.selector = options.selector || '.select-box-kit';
|
||||
|
||||
checkSelectBoxIsNotCollapsed(options.selector);
|
||||
|
||||
var filterQuerySelector = options.selector + ' .select-box-kit-filter-input';
|
||||
fillIn(filterQuerySelector, filter);
|
||||
});
|
||||
|
||||
function selectBox(selector) { // eslint-disable-line no-unused-vars
|
||||
selector = selector || '.select-box-kit';
|
||||
|
||||
function rowHelper(row) {
|
||||
return {
|
||||
name: function() { return row.attr('data-name'); },
|
||||
icon: function() { return row.find('.d-icon'); },
|
||||
title: function() { return row.attr('title'); },
|
||||
value: function() { return row.attr('data-value'); },
|
||||
el: row
|
||||
};
|
||||
}
|
||||
|
||||
function headerHelper(header) {
|
||||
return {
|
||||
name: function() {
|
||||
return header.attr('data-name');
|
||||
},
|
||||
icon: function() { return header.find('.icon'); },
|
||||
title: function() { return header.attr('title'); },
|
||||
el: header
|
||||
};
|
||||
}
|
||||
|
||||
function filterHelper(filter) {
|
||||
return {
|
||||
icon: function() { return filter.find('.d-icon'); },
|
||||
exists: function() { return exists(filter); },
|
||||
el: filter
|
||||
};
|
||||
}
|
||||
|
||||
function keyboardHelper() {
|
||||
function createEvent(target, keyCode, options) {
|
||||
target = target || ".select-box-kit-filter-input";
|
||||
selector = find(selector).find(target);
|
||||
|
||||
andThen(function() {
|
||||
var event = jQuery.Event(options.type);
|
||||
event.keyCode = keyCode;
|
||||
if (options && options.metaKey === true) { event.metaKey = true; }
|
||||
find(selector).trigger(event);
|
||||
});
|
||||
}
|
||||
|
||||
return {
|
||||
down: function(target) { createEvent(target, 40, {type: 'keydown'}); },
|
||||
up: function(target) { createEvent(target, 38, {type: 'keydown'}); },
|
||||
escape: function(target) { createEvent(target, 27, {type: 'keydown'}); },
|
||||
enter: function(target) { createEvent(target, 13, {type: 'keypress'}); },
|
||||
tab: function(target) { createEvent(target, 9, {type: 'keydown'}); },
|
||||
backspace: function(target) { createEvent(target, 8, {type: 'keydown'}); },
|
||||
selectAll: function(target) { createEvent(target, 65, {metaKey: true, type: 'keydown'}); },
|
||||
};
|
||||
}
|
||||
|
||||
return {
|
||||
keyboard: keyboardHelper(),
|
||||
|
||||
isExpanded: find(selector).hasClass('is-expanded'),
|
||||
|
||||
isHidden: find(selector).hasClass('is-hidden'),
|
||||
|
||||
header: headerHelper(find(selector).find('.select-box-kit-header')),
|
||||
|
||||
filter: filterHelper(find(selector).find('.select-box-kit-filter')),
|
||||
|
||||
rows: find(selector).find('.select-box-kit-row'),
|
||||
|
||||
rowByValue: function(value) {
|
||||
return rowHelper(find(selector).find('.select-box-kit-row[data-value="' + value + '"]'));
|
||||
},
|
||||
|
||||
rowByName: function(name) {
|
||||
return rowHelper(find(selector).find('.select-box-kit-row[data-name="' + name + '"]'));
|
||||
},
|
||||
|
||||
rowByIndex: function(index) {
|
||||
return rowHelper(find(selector).find('.select-box-kit-row:eq(' + index + ')'));
|
||||
},
|
||||
|
||||
el: find(selector),
|
||||
|
||||
noneRow: rowHelper(find(selector).find('.select-box-kit-row.none')),
|
||||
|
||||
selectedRow: rowHelper(find(selector).find('.select-box-kit-row.is-selected')),
|
||||
|
||||
highlightedRow: rowHelper(find(selector).find('.select-box-kit-row.is-highlighted'))
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,149 @@
|
||||
function checkSelectKitIsNotExpanded(selector) {
|
||||
if (find(selector).hasClass('is-expanded')) {
|
||||
throw 'You expected select-kit to be collapsed but it is expanded.';
|
||||
}
|
||||
}
|
||||
|
||||
function checkSelectKitIsNotCollapsed(selector) {
|
||||
if (!find(selector).hasClass('is-expanded')) {
|
||||
throw 'You expected select-kit to be expanded but it is collapsed.';
|
||||
}
|
||||
}
|
||||
|
||||
Ember.Test.registerAsyncHelper('expandSelectKit', function(app, selector) {
|
||||
selector = selector || '.select-kit';
|
||||
|
||||
checkSelectKitIsNotExpanded(selector);
|
||||
|
||||
click(selector + ' .select-kit-header');
|
||||
});
|
||||
|
||||
Ember.Test.registerAsyncHelper('collapseSelectKit', function(app, selector) {
|
||||
selector = selector || '.select-kit';
|
||||
|
||||
checkSelectKitIsNotCollapsed(selector);
|
||||
|
||||
click(selector + ' .select-kit-header');
|
||||
});
|
||||
|
||||
Ember.Test.registerAsyncHelper('selectKitSelectRow', function(app, rowValue, options) {
|
||||
options = options || {};
|
||||
options.selector = options.selector || '.select-kit';
|
||||
|
||||
checkSelectKitIsNotCollapsed(options.selector);
|
||||
|
||||
click(options.selector + " .select-kit-row[data-value='" + rowValue + "']");
|
||||
});
|
||||
|
||||
Ember.Test.registerAsyncHelper('selectKitSelectNoneRow', function(app, options) {
|
||||
options = options || {};
|
||||
options.selector = options.selector || '.select-kit';
|
||||
|
||||
checkSelectKitIsNotCollapsed(options.selector);
|
||||
|
||||
click(options.selector + " .select-kit-row.none");
|
||||
});
|
||||
|
||||
Ember.Test.registerAsyncHelper('selectKitFillInFilter', function(app, filter, options) {
|
||||
options = options || {};
|
||||
options.selector = options.selector || '.select-kit';
|
||||
|
||||
checkSelectKitIsNotCollapsed(options.selector);
|
||||
|
||||
var filterQuerySelector = options.selector + ' .filter-input';
|
||||
fillIn(filterQuerySelector, filter);
|
||||
|
||||
});
|
||||
|
||||
function selectKit(selector) { // eslint-disable-line no-unused-vars
|
||||
selector = selector || '.select-kit';
|
||||
|
||||
function rowHelper(row) {
|
||||
return {
|
||||
name: function() { return row.attr('data-name'); },
|
||||
icon: function() { return row.find('.d-icon'); },
|
||||
title: function() { return row.attr('title'); },
|
||||
value: function() { return row.attr('data-value'); },
|
||||
el: row
|
||||
};
|
||||
}
|
||||
|
||||
function headerHelper(header) {
|
||||
return {
|
||||
name: function() {
|
||||
return header.attr('data-name');
|
||||
},
|
||||
icon: function() { return header.find('.icon'); },
|
||||
title: function() { return header.attr('title'); },
|
||||
el: header
|
||||
};
|
||||
}
|
||||
|
||||
function filterHelper(filter) {
|
||||
return {
|
||||
icon: function() { return filter.find('.d-icon'); },
|
||||
exists: function() { return exists(filter); },
|
||||
el: filter
|
||||
};
|
||||
}
|
||||
|
||||
function keyboardHelper() {
|
||||
function createEvent(target, keyCode, options) {
|
||||
target = target || ".filter-input";
|
||||
selector = find(selector).find(target);
|
||||
options = options || {};
|
||||
|
||||
andThen(function() {
|
||||
var type = options.type || 'keydown';
|
||||
var event = jQuery.Event(type);
|
||||
event.keyCode = keyCode;
|
||||
if (options && options.metaKey === true) { event.metaKey = true; }
|
||||
find(selector).trigger(event);
|
||||
});
|
||||
}
|
||||
|
||||
return {
|
||||
down: function(target) { createEvent(target, 40); },
|
||||
up: function(target) { createEvent(target, 38); },
|
||||
escape: function(target) { createEvent(target, 27); },
|
||||
enter: function(target) { createEvent(target, 13); },
|
||||
tab: function(target) { createEvent(target, 9); },
|
||||
backspace: function(target) { createEvent(target, 8); },
|
||||
selectAll: function(target) { createEvent(target, 65, {metaKey: true}); },
|
||||
};
|
||||
}
|
||||
|
||||
return {
|
||||
keyboard: keyboardHelper(),
|
||||
|
||||
isExpanded: find(selector).hasClass('is-expanded'),
|
||||
|
||||
isHidden: find(selector).hasClass('is-hidden'),
|
||||
|
||||
header: headerHelper(find(selector).find('.select-kit-header')),
|
||||
|
||||
filter: filterHelper(find(selector).find('.select-kit-filter')),
|
||||
|
||||
rows: find(selector).find('.select-kit-row'),
|
||||
|
||||
rowByValue: function(value) {
|
||||
return rowHelper(find(selector).find('.select-kit-row[data-value="' + value + '"]'));
|
||||
},
|
||||
|
||||
rowByName: function(name) {
|
||||
return rowHelper(find(selector).find('.select-kit-row[data-name="' + name + '"]'));
|
||||
},
|
||||
|
||||
rowByIndex: function(index) {
|
||||
return rowHelper(find(selector).find('.select-kit-row:eq(' + index + ')'));
|
||||
},
|
||||
|
||||
el: find(selector),
|
||||
|
||||
noneRow: rowHelper(find(selector).find('.select-kit-row.none')),
|
||||
|
||||
selectedRow: rowHelper(find(selector).find('.select-kit-row.is-selected')),
|
||||
|
||||
highlightedRow: rowHelper(find(selector).find('.select-kit-row.is-highlighted'))
|
||||
};
|
||||
}
|
||||
Reference in New Issue
Block a user