osr-plastic/osr-discourse-src
Archived
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Introduces select-kit

Browse Source 
* 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
2017-11-21 11:53:09 +01:00
committed by GitHub
parent edc4b30f82
commit 39f3dbd945
191 changed files with 3160 additions and 2788 deletions
Download Patch File Download Diff File Expand all files Collapse all files
test/javascripts/components/combo-box-test.js.es6
+43 -43
View File
@@ -8,12 +8,12 @@ componentTest('default', {
},
test(assert) {
expandSelectBoxKit();
expandSelectKit();
andThen(() => {
assert.equal(selectBox('.combobox').header.name(), "hello");
assert.equal(selectBox('.combobox').rowByValue(1).name(), "hello");
assert.equal(selectBox('.combobox').rowByValue(2).name(), "world");
assert.equal(selectKit('.combobox').header.name(), "hello");
assert.equal(selectKit('.combobox').rowByValue(1).name(), "hello");
assert.equal(selectKit('.combobox').rowByValue(2).name(), "world");
});
}
});
@@ -25,11 +25,11 @@ componentTest('with valueAttribute', {
},
test(assert) {
expandSelectBoxKit();
expandSelectKit();
andThen(() => {
assert.equal(selectBox('.combobox').rowByValue(0).name(), "hello");
assert.equal(selectBox('.combobox').rowByValue(1).name(), "world");
assert.equal(selectKit('.combobox').rowByValue(0).name(), "hello");
assert.equal(selectKit('.combobox').rowByValue(1).name(), "world");
});
}
});
@@ -41,11 +41,11 @@ componentTest('with nameProperty', {
},
test(assert) {
expandSelectBoxKit();
expandSelectKit();
andThen(() => {
assert.equal(selectBox('.combobox').rowByValue(0).name(), "hello");
assert.equal(selectBox('.combobox').rowByValue(1).name(), "world");
assert.equal(selectKit('.combobox').rowByValue(0).name(), "hello");
assert.equal(selectKit('.combobox').rowByValue(1).name(), "world");
});
}
});
@@ -57,11 +57,11 @@ componentTest('with an array as content', {
},
test(assert) {
expandSelectBoxKit();
expandSelectKit();
andThen(() => {
assert.equal(selectBox('.combobox').rowByValue('evil').name(), "evil");
assert.equal(selectBox('.combobox').rowByValue('trout').name(), "trout");
assert.equal(selectKit('.combobox').rowByValue('evil').name(), "evil");
assert.equal(selectKit('.combobox').rowByValue('trout').name(), "trout");
});
}
});
@@ -75,17 +75,17 @@ componentTest('with value and none as a string', {
},
test(assert) {
expandSelectBoxKit();
expandSelectKit();
andThen(() => {
assert.equal(selectBox('.combobox').noneRow.name(), 'none');
assert.equal(selectBox('.combobox').rowByValue("evil").name(), "evil");
assert.equal(selectBox('.combobox').rowByValue("trout").name(), "trout");
assert.equal(selectBox('.combobox').header.name(), 'trout');
assert.equal(selectKit('.combobox').noneRow.name(), 'none');
assert.equal(selectKit('.combobox').rowByValue("evil").name(), "evil");
assert.equal(selectKit('.combobox').rowByValue("trout").name(), "trout");
assert.equal(selectKit('.combobox').header.name(), 'trout');
assert.equal(this.get('value'), 'trout');
});
selectBoxKitSelectRow('__none__', {selector: '.combobox' });
selectKitSelectRow('__none__', {selector: '.combobox' });
andThen(() => {
assert.equal(this.get('value'), null);
@@ -102,17 +102,17 @@ componentTest('with value and none as an object', {
},
test(assert) {
expandSelectBoxKit();
expandSelectKit();
andThen(() => {
assert.equal(selectBox('.combobox').noneRow.name(), 'none');
assert.equal(selectBox('.combobox').rowByValue("evil").name(), "evil");
assert.equal(selectBox('.combobox').rowByValue("trout").name(), "trout");
assert.equal(selectBox('.combobox').header.name(), 'evil');
assert.equal(selectKit('.combobox').noneRow.name(), 'none');
assert.equal(selectKit('.combobox').rowByValue("evil").name(), "evil");
assert.equal(selectKit('.combobox').rowByValue("trout").name(), "trout");
assert.equal(selectKit('.combobox').header.name(), 'evil');
assert.equal(this.get('value'), 'evil');
});
selectBoxKitSelectNoneRow({ selector: '.combobox' });
selectKitSelectNoneRow({ selector: '.combobox' });
andThen(() => {
assert.equal(this.get('value'), null);
@@ -130,10 +130,10 @@ componentTest('with no value and none as an object', {
},
test(assert) {
expandSelectBoxKit();
expandSelectKit();
andThen(() => {
assert.equal(selectBox('.combobox').header.name(), 'none');
assert.equal(selectKit('.combobox').header.name(), 'none');
});
}
});
@@ -148,10 +148,10 @@ componentTest('with no value and none string', {
},
test(assert) {
expandSelectBoxKit();
expandSelectKit();
andThen(() => {
assert.equal(selectBox('.combobox').header.name(), 'none');
assert.equal(selectKit('.combobox').header.name(), 'none');
});
}
});
@@ -164,10 +164,10 @@ componentTest('with no value and no none', {
},
test(assert) {
expandSelectBoxKit();
expandSelectKit();
andThen(() => {
assert.equal(selectBox('.combobox').header.name(), 'evil', 'it sets the first row as value');
assert.equal(selectKit('.combobox').header.name(), 'evil', 'it sets the first row as value');
});
}
});
@@ -182,17 +182,17 @@ componentTest('with no value and no none', {
// test(assert) {
// ();
//
// andThen(() => assert.equal(find(".select-box-kit-filter-input").length, 1, "it has a search input"));
// andThen(() => assert.equal(find(".filter-input").length, 1, "it has a search input"));
//
// selectBoxKitFillInFilter("regis");
// selectKitFillInFilter("regis");
//
// andThen(() => assert.equal(selectBox().rows.length, 1, "it filters results"));
// andThen(() => assert.equal(selectKit().rows.length, 1, "it filters results"));
//
// selectBoxKitFillInFilter("");
// selectKitFillInFilter("");
//
// andThen(() => {
// assert.equal(
// selectBox().rows.length, 2,
// selectKit().rows.length, 2,
// "it returns to original content when filter is empty"
// );
// });
@@ -209,17 +209,17 @@ componentTest('with no value and no none', {
// test(assert) {
// ();
//
// selectBoxKitFillInFilter("rob");
// selectKitFillInFilter("rob");
//
// andThen(() => assert.equal(selectBox().rows.length, 1) );
// andThen(() => assert.equal(selectKit().rows.length, 1) );
//
// collapseSelectBoxKit();
// collapseSelectKit();
//
// andThen(() => assert.notOk(selectBox().isExpanded) );
// andThen(() => assert.notOk(selectKit().isExpanded) );
//
// ();
//
// andThen(() => assert.equal(selectBox().rows.length, 1) );
// andThen(() => assert.equal(selectKit().rows.length, 1) );
// }
// });
@@ -232,10 +232,10 @@ componentTest('with empty string as value', {
},
test(assert) {
expandSelectBoxKit();
expandSelectKit();
andThen(() => {
assert.equal(selectBox('.combobox').header.name(), 'evil', 'it sets the first row as value');
assert.equal(selectKit('.combobox').header.name(), 'evil', 'it sets the first row as value');
});
}
});