Skip to content

Cascading list succession #1974

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
thibaultzanini wants to merge 43 commits into
base: master
Choose a base branch
from
Open

Cascading list succession #1974

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
43 commits
Select commit Hold shift + click to select a range
8e50184
First attempt to use the cascading list with the succession
thibaultzanini Apr 27, 2018
7310820
Fix an issue related to the changes to the succession
thibaultzanini Apr 30, 2018
bff353e
Cascading list handle resize events
thibaultzanini Apr 30, 2018
de51dc8
Refactor Component’s domContent property logic.
thibaultzanini Apr 30, 2018
4d01ac2
Fix substitution logic
thibaultzanini May 2, 2018
f599924
Initialize the is Array boolean
thibaultzanini May 2, 2018
f2364f6
Fix the condition to make it work with the transition and the new dom…
thibaultzanini May 2, 2018
8319b7c
Fix succession sample
thibaultzanini May 2, 2018
6e60ccd
Optimisation for the condition
thibaultzanini May 2, 2018
557500e
Add condition sample
thibaultzanini May 2, 2018
fe73d01
Fix a issue with the new logic of domContent and transplanted compone…
thibaultzanini May 4, 2018
38b8f8e
Fix typo in the cascading list sample
thibaultzanini May 4, 2018
9aba201
Fix broken specs
thibaultzanini May 4, 2018
ab85c2a
Fix JShint warnings
thibaultzanini May 4, 2018
b44dcc0
Make safer the cascading initialization with the succession.
thibaultzanini May 7, 2018
72b76f2
Make the Cascading list component responsive
thibaultzanini May 7, 2018
1512292
Css improvements with the cascading list
thibaultzanini May 7, 2018
742d712
Keep cascading list selection when resizing
thibaultzanini May 7, 2018
eac991f
Fix the cascading list selection
thibaultzanini May 7, 2018
b8b0b75
Add css animation when the cascading list is not flat
thibaultzanini May 9, 2018
af99976
Allow to ignore the selection after a long press on the repetition
thibaultzanini May 10, 2018
bf259e7
Improvement with loadUserInterfaceDescriptor method
thibaultzanini May 10, 2018
91cdbaa
Allow the list component to use an user interface descriptor for its …
thibaultzanini May 10, 2018
39a86a5
Update cascading list sample
thibaultzanini May 10, 2018
f396595
Add FIXME comment
thibaultzanini May 10, 2018
b5d3462
Fix an issue with the ignoreSelectionAfterLongPress property
thibaultzanini May 10, 2018
c212962
Allow the list component to dispatch a long press event.
thibaultzanini May 10, 2018
c3efa39
Update cascading list sample
thibaultzanini May 10, 2018
9284f4a
Avoid to clear the selection while deserializing
thibaultzanini May 11, 2018
60aa56e
Fix flow and repetition specs
thibaultzanini May 11, 2018
000e6fb
Cleanup list component
thibaultzanini May 11, 2018
b0f6ba2
Rename _muteSelectionChange to _ignoreSelectionChange
thibaultzanini May 11, 2018
aac2947
Fix broken virtual list
thibaultzanini May 11, 2018
7aa0772
Initial commit for the cascading list shelf
thibaultzanini May 10, 2018
6973d59
Initial commit for re-order a list
thibaultzanini May 11, 2018
15bb192
Refactor cascading list shelf
thibaultzanini May 17, 2018
f9c73fd
Make the Shelf prettier
thibaultzanini May 17, 2018
c08c14e
Don’t open cascading list shelf when it’s flat.
thibaultzanini May 17, 2018
a7ef4b3
Close automatically the shelf if it’s empty when navigate the cascadi…
thibaultzanini May 17, 2018
746d6e8
Add cascadingListShelfShouldAcceptDataObject delegate method
thibaultzanini May 21, 2018
b173b47
Hide trash button when dragging a item from the shelf
thibaultzanini May 21, 2018
7a4fef5
Allow to drag an item from the shelf
thibaultzanini May 21, 2018
694f496
Cleaning up and improvement with the cascading list
thibaultzanini May 22, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,7 @@ <h4>Components:</h4>
<a href="ui/button.info/sample/index.html">Button</a>
<a href="ui/cascading-list.info/sample/index.html">Cascading list</a>
<a href="ui/checkbox.info/sample/index.html">CheckBox</a>
<a href="ui/condition.info/sample/index.html">Condition</a>
<a href="ui/flow.info/sample/index.html">Flow</a>
<a href="ui/html-fragment.info/sample/index.html">HTML Fragment</a>
<a href="ui/list.info/sample/index.html">List</a>
Expand Down
9 changes: 9 additions & 0 deletions test/mocks/data/models/employee-list-ui-descriptor.mjson
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
{
"root": {
"prototype": "core/meta/user-interface-descriptor",
"values": {
"listIgnoreSelectionAfterLongPress": true,
"listDispatchLongPress": true
}
}
}
3 changes: 3 additions & 0 deletions test/mocks/data/models/employee.mjson
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,9 @@
},
"montage/ui/cascading-list.reel": {
"%": "test/mocks/data/models/employee-cascading-list-ui-descriptor.mjson"
},
"montage/ui/list.reel": {
"%": "test/mocks/data/models/employee-list-ui-descriptor.mjson"
}
}
}
Expand Down
6 changes: 3 additions & 3 deletions test/mocks/data/services/mock-service.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -127,9 +127,9 @@ exports.MockService = Montage.specialize({
new Store('store 2', 'Paris'),
new Store('store 3', 'Montreal'),
new Store('store 4', 'New York'),
new Store('store 4', 'London'),
new Store('store 4', 'Tokyo'),
new Store('store 4', 'Shanghai')
new Store('store 5', 'London'),
new Store('store 6', 'Tokyo'),
new Store('store 7', 'Shanghai')
];
}
},
Expand Down
84 changes: 61 additions & 23 deletions test/spec/ui/flow-spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,10 +13,10 @@ TestPageLoader.queueTest("flow/flow", function (testPage) {
flowRepetition,
rangeController;

function waitForFlowRepetition() {
function waitForFlowRepetition(times) {
var component = flow._repetition || flow;

return testPage.waitForComponentDraw(flow).then(function () {
return testPage.waitForComponentDraw(flow, times).then(function () {
return flow._repetition;
});
}
Expand Down Expand Up @@ -61,9 +61,11 @@ TestPageLoader.queueTest("flow/flow", function (testPage) {
}

flow.content = content;
waitForFlowRepetition().then(function (flowRepetition) {
expect(cleanTextContent(flowRepetition.element)).toBe("0 1 2");
waitForFlowRepetition(2).then(function () {
expect(cleanTextContent(flow._repetition.element)).toBe("0 1 2");
done();
}).catch(function (error) {
done.fail(error);
});
});
});
Expand All @@ -79,10 +81,12 @@ TestPageLoader.queueTest("flow/flow", function (testPage) {

flow.content = content;

waitForFlowRepetition().then(function (flowRepetition) {
waitForFlowRepetition(2).then(function (flowRepetition) {
expect(cleanTextContent(flowRepetition.element)).toBe("(0) (1)");
expect(flowRepetition.element.children.length).toBe(3);
done();
}).catch(function (error) {
done.fail(error);
});
});
});
Expand All @@ -98,22 +102,24 @@ TestPageLoader.queueTest("flow/flow", function (testPage) {
flow.scroll = 0;
flow.content = content;

waitForFlowRepetition().then(function (flowRepetition) {
waitForFlowRepetition(2).then(function (flowRepetition) {
expect(cleanTextContent(flowRepetition.element)).toBe("0 1 2");
flow.scroll = 3;
testPage.waitForComponentDraw(flowRepetition).then(function () {
return waitForFlowRepetition(2).then(function () {
expect(cleanTextContent(flowRepetition.element)).toBe("3 1 2 4 5");
flow.scroll = 2;
testPage.waitForComponentDraw(flowRepetition).then(function () {
return waitForFlowRepetition(2).then(function () {
expect(cleanTextContent(flowRepetition.element)).toBe("3 1 2 4 0");
flow.scroll = 0;
testPage.waitForComponentDraw(flow).then(function () {
return waitForFlowRepetition(2).then(function () {
expect(cleanTextContent(flowRepetition.element)).toBe("3 1 2 4 0");
expect(flowRepetition.element.children.length).toBe(5);
done();
});
});
});
}).catch(function (error) {
done.fail(error);
});
});
});
Expand All @@ -132,26 +138,31 @@ TestPageLoader.queueTest("flow/flow", function (testPage) {

it("should regenerate iterations and trim the excess", function (done) {
flow.handleResize();
waitForFlowRepetition().then(function (flowRepetition) {
waitForFlowRepetition(2).then(function (flowRepetition) {
expect(cleanTextContent(flowRepetition.element)).toBe("0 1 2");
expect(flowRepetition.element.children.length).toBe(3);
done();
}).catch(function (error) {
done.fail(error);
});
});
it("after flow changes in size should update frustum culling and iterations", function (done) {
flow.element.style.width = "300px";
flow.handleResize();

waitForFlowRepetition().then(function (flowRepetition) {
waitForFlowRepetition(2).then(function (flowRepetition) {
expect(cleanTextContent(flowRepetition.element)).toBe("0 1");
expect(flowRepetition.element.children.length).toBe(2);
flow.element.style.width = "500px";
flow.handleResize();
testPage.waitForComponentDraw(flowRepetition).then(function () {

return waitForFlowRepetition(2).then(function () {
expect(cleanTextContent(flowRepetition.element)).toBe("0 1 2");
expect(flowRepetition.element.children.length).toBe(3);
done();
});
}).catch(function (error) {
done.fail(error);
});
});
});
Expand All @@ -169,10 +180,12 @@ TestPageLoader.queueTest("flow/flow", function (testPage) {
rangeController.content = content;
});
it("should update the visible iterations", function (done) {
waitForFlowRepetition().then(function (flowRepetition) {
waitForFlowRepetition(2).then(function (flowRepetition) {
expect(cleanTextContent(flowRepetition.element)).toBe("(0) (1) (2)");
expect(flowRepetition.element.children.length).toBe(3);
done();
}).catch(function (error) {
done.fail(error);
});
});
});
Expand All @@ -191,63 +204,88 @@ TestPageLoader.queueTest("flow/flow", function (testPage) {
});

it("modifying controller's selection should update iterations", function (done) {
flow._repetition.isSelectionEnabled = true;
rangeController.selection = ["(1)"];
waitForFlowRepetition().then(function (flowRepetition) {

waitForFlowRepetition(2).then(function (flowRepetition) {
expect(cleanTextContent(flowRepetition.element)).toBe("(0) (1) (2)");
expect(flowRepetition.element.children[0].children[0].component.iteration.selected).toBeFalsy();
expect(flowRepetition.element.children[1].children[0].component.iteration.selected).toBeTruthy();
expect(flowRepetition.element.children[2].children[0].component.iteration.selected).toBeFalsy();
rangeController.selection = ["(2)"];
expect(flowRepetition.element.children[0].children[0].component.iteration.selected).toBeFalsy();
expect(flowRepetition.element.children[1].children[0].component.iteration.selected).toBeFalsy();
expect(flowRepetition.element.children[2].children[0].component.iteration.selected).toBeTruthy();
done();

return waitForFlowRepetition(2).then(function (flowRepetition) {
expect(flowRepetition.element.children[0].children[0].component.iteration.selected).toBeFalsy();
expect(flowRepetition.element.children[1].children[0].component.iteration.selected).toBeFalsy();
expect(flowRepetition.element.children[2].children[0].component.iteration.selected).toBeTruthy();
flow._repetition.isSelectionEnabled = false;

done();
});
}).catch(function (error) {
done.fail(error);
});
});
it("modifying iterations's selected should update controller's selection", function (done) {
waitForFlowRepetition().then(function (flowRepetition) {
flow.isSelectionEnabled = true;

waitForFlowRepetition(2).then(function (flowRepetition) {
flowRepetition.element.children[0].children[0].component.iteration.selected = true;
expect(rangeController.selection.toString()).toBe("(0)");
expect(flow.selection.toString()).toBe("(0)");
flow.isSelectionEnabled = false;
done();
});
}).catch(function (error) {
done.fail(error);
});
});
// it("changes in controller's selection should be reflected in flow's selection", function () {
// });
it("changes in flow's selection should be reflected in controller's selection", function () {
flow.isSelectionEnabled = true;
flow.selection = ["(1)"];
expect(rangeController.selection.toString()).toBe("(1)");
flow.isSelectionEnabled = false;

});
it("after scrolling enough to hide selected iteration, no iteration should be selected", function (done) {
flow.isSelectionEnabled = true;
flow.selection = ["(1)"];
flow.scroll = 50;
waitForFlowRepetition().then(function (flowRepetition) {
waitForFlowRepetition(2).then(function (flowRepetition) {
expect(cleanTextContent(flowRepetition.element)).toBe("(48) (49) (50) (51) (52)");
expect(flowRepetition.element.children[0].children[0].component.iteration.selected).toBeFalsy();
expect(flowRepetition.element.children[1].children[0].component.iteration.selected).toBeFalsy();
expect(flowRepetition.element.children[2].children[0].component.iteration.selected).toBeFalsy();
expect(flowRepetition.element.children[3].children[0].component.iteration.selected).toBeFalsy();
expect(flowRepetition.element.children[4].children[0].component.iteration.selected).toBeFalsy();
flow.isSelectionEnabled = false;
done();
}).catch(function (error) {
done.fail(error);
});
});
it("iterations in selection should be selected after they enter in the frustum area", function (done) {
flow.isSelectionEnabled = true;
flow.selection = ["(1)"];
flow.scroll = 50;

waitForFlowRepetition().then(function (flowRepetition) {
waitForFlowRepetition(2).then(function (flowRepetition) {
expect(cleanTextContent(flowRepetition.element)).toBe("(48) (49) (50) (51) (52)");

flow.scroll = 0;
waitForFlowRepetition().then(function (flowRepetition) {
return waitForFlowRepetition(2).then(function (flowRepetition) {
expect(cleanTextContent(flowRepetition.element)).toBe("(0) (1) (2) (51) (52)");
expect(flowRepetition.element.children[0].children[0].component.iteration.selected).toBeFalsy();
expect(flowRepetition.element.children[1].children[0].component.iteration.selected).toBeTruthy();
expect(flowRepetition.element.children[2].children[0].component.iteration.selected).toBeFalsy();
expect(flowRepetition.element.children[3].children[0].component.iteration.selected).toBeFalsy();
expect(flowRepetition.element.children[4].children[0].component.iteration.selected).toBeFalsy();
flow.isSelectionEnabled = false;
done();
});
}).catch(function (error) {
done.fail(error);
});
});
});
Expand Down
Loading