From 3843b726a8d90c39ca402355da75f3649081ad8d Mon Sep 17 00:00:00 2001 From: Adrian Vasiliu Date: Tue, 28 Jan 2014 14:36:53 +0100 Subject: [PATCH] Added deliteful/ScrollableContainer --- ScrollableContainer.js | 28 ++ .../ScrollableContainer-full-screen.html | 141 ++++++++++ .../functional/ScrollableContainer-small.html | 246 ++++++++++++++++++ tests/functional/ScrollableContainer.html | 204 +++++++++++++++ tests/unit.js | 3 +- tests/unit/ScrollableContainer.js | 91 +++++++ 6 files changed, 712 insertions(+), 1 deletion(-) create mode 100755 ScrollableContainer.js create mode 100755 tests/functional/ScrollableContainer-full-screen.html create mode 100755 tests/functional/ScrollableContainer-small.html create mode 100755 tests/functional/ScrollableContainer.html create mode 100755 tests/unit/ScrollableContainer.js diff --git a/ScrollableContainer.js b/ScrollableContainer.js new file mode 100755 index 0000000000..4a546ab286 --- /dev/null +++ b/ScrollableContainer.js @@ -0,0 +1,28 @@ +define([ + "delite/register", + "delite/Container", + "delite/Scrollable" +], function (register, Container, Scrollable) { + + // module: + // deliteful/ScrollableContainer + + return register("d-scrollable-container", [HTMLElement, Container, Scrollable], { + // summary: + // A container widget with scrolling capabilities. + // description: + // A container widget which can scroll its content + // horizontally and/or vertically. Its scrolling capabilities + // and API are provided by the mixin delite/Scrollable. + // example: + // | + // |
...
+ // |
...
+ // |
...
+ // | + + // baseClass: String + // The name of the CSS class of this widget. + baseClass: "d-scrollable-container" + }); +}); diff --git a/tests/functional/ScrollableContainer-full-screen.html b/tests/functional/ScrollableContainer-full-screen.html new file mode 100755 index 0000000000..0a970e7001 --- /dev/null +++ b/tests/functional/ScrollableContainer-full-screen.html @@ -0,0 +1,141 @@ + + + + + + + ScrollableContainer (full-screen) + + + + + + + + + + + + +
Header
+ + +
    +
  • Item 1
    • +
  • Item 2
    • +
  • Item 3
    • +
  • Item 4
    • +
  • Item 5
    • +
  • Item 6
    • +
  • Item 7
    • +
  • Item 8
    • +
  • Item 9
    • +
  • Item 10
    • +
  • Item 11
    • +
  • Item 12
    • +
  • Item 13
    • +
  • Item 14
    • +
  • Item 15
    • +
  • Item 16
    • +
  • Item 17
    • +
  • Item 18
    • +
  • Item 19
    • +
  • Item 20
    • +
  • Item 21
    • +
  • Item 22
    • +
  • Item 23
    • +
  • Item 24
    • +
  • Item 25
    • +
  • Item 26
    • +
  • Item 27
    • +
  • Item 28
    • +
  • Item 29
    • +
  • Item 30
    • +
  • Item 31
    • +
  • Item 32
    • +
  • Item 33
    • +
  • Item 34
    • +
  • Item 35
    • +
  • Item 36
    • +
  • Item 37
    • +
  • Item 38
    • +
  • Item 39
    • +
  • Item 40
    • +
  • Item 41
    • +
  • Item 42
    • +
  • Item 43
    • +
  • Item 44
    • +
  • Item 45
    • +
  • Item 46
    • +
  • Item 47
    • +
  • Item 48
    • +
  • Item 49
    • +
  • Item 50
    • +
  • Item 61
    • +
  • Item 62
    • +
  • Item 63
    • +
  • Item 64
    • +
  • Item 65
    • +
  • Item 66
    • +
  • Item 67
    • +
  • Item 68
    • +
  • Item 69
    • +
  • Item 70
    • +
  • Item 81
    • +
  • Item 82
    • +
  • Item 83
    • +
  • Item 84
    • +
  • Item 85
    • +
  • Item 86
    • +
  • Item 87
    • +
  • Item 88
    • +
  • Item 89
    • +
  • Item 90
    • +
  • Item 91
    • +
  • Item 92
    • +
  • Item 93
    • +
  • Item 94
    • +
  • Item 95
    • +
  • Item 96
    • +
  • Item 97
    • +
  • Item 98
    • +
  • Item 99
    • +
  • Item 100
    • +
+ + +
Footer
+ + + diff --git a/tests/functional/ScrollableContainer-small.html b/tests/functional/ScrollableContainer-small.html new file mode 100755 index 0000000000..6781d0db5f --- /dev/null +++ b/tests/functional/ScrollableContainer-small.html @@ -0,0 +1,246 @@ + + + + + + + ScrollableContainer (small) + + + + + + + + + + + + +
Header 1
+ + +
    +
  • Item 1
    • +
  • Item 2
    • +
  • Item 3
    • +
  • Item 4
    • +
  • Item 5
    • +
  • Item 6
    • +
  • Item 7
    • +
  • Item 8
    • +
  • Item 9
    • +
  • Item 10
    • +
  • Item 11
    • +
  • Item 12
    • +
  • Item 13
    • +
  • Item 14
    • +
  • Item 15
    • +
  • Item 16
    • +
  • Item 17
    • +
  • Item 18
    • +
  • Item 19
    • +
  • Item 20
    • +
  • Item 21
    • +
  • Item 22
    • +
  • Item 23
    • +
  • Item 24
    • +
  • Item 25
    • +
  • Item 26
    • +
  • Item 27
    • +
  • Item 28
    • +
  • Item 29
    • +
  • Item 30
    • +
  • Item 31
    • +
  • Item 32
    • +
  • Item 33
    • +
  • Item 34
    • +
  • Item 35
    • +
  • Item 36
    • +
  • Item 37
    • +
  • Item 38
    • +
  • Item 39
    • +
  • Item 40
    • +
  • Item 41
    • +
  • Item 42
    • +
  • Item 43
    • +
  • Item 44
    • +
  • Item 45
    • +
  • Item 46
    • +
  • Item 47
    • +
  • Item 48
    • +
  • Item 49
    • +
  • Item 50
    • +
  • Item 61
    • +
  • Item 62
    • +
  • Item 63
    • +
  • Item 64
    • +
  • Item 65
    • +
  • Item 66
    • +
  • Item 67
    • +
  • Item 68
    • +
  • Item 69
    • +
  • Item 70
    • +
  • Item 81
    • +
  • Item 82
    • +
  • Item 83
    • +
  • Item 84
    • +
  • Item 85
    • +
  • Item 86
    • +
  • Item 87
    • +
  • Item 88
    • +
  • Item 89
    • +
  • Item 90
    • +
  • Item 91
    • +
  • Item 92
    • +
  • Item 93
    • +
  • Item 94
    • +
  • Item 95
    • +
  • Item 96
    • +
  • Item 97
    • +
  • Item 98
    • +
  • Item 99
    • +
  • Item 100
    • +
+ + +
Footer 1
+ + + +
Header 2
+ + +
    +
  • Item 1
    • +
  • Item 2
    • +
  • Item 3
    • +
  • Item 4
    • +
  • Item 5
    • +
  • Item 6
    • +
  • Item 7
    • +
  • Item 8
    • +
  • Item 9
    • +
  • Item 10
    • +
  • Item 11
    • +
  • Item 12
    • +
  • Item 13
    • +
  • Item 14
    • +
  • Item 15
    • +
  • Item 16
    • +
  • Item 17
    • +
  • Item 18
    • +
  • Item 19
    • +
  • Item 20
    • +
  • Item 21
    • +
  • Item 22
    • +
  • Item 23
    • +
  • Item 24
    • +
  • Item 25
    • +
  • Item 26
    • +
  • Item 27
    • +
  • Item 28
    • +
  • Item 29
    • +
  • Item 30
    • +
  • Item 31
    • +
  • Item 32
    • +
  • Item 33
    • +
  • Item 34
    • +
  • Item 35
    • +
  • Item 36
    • +
  • Item 37
    • +
  • Item 38
    • +
  • Item 39
    • +
  • Item 40
    • +
  • Item 41
    • +
  • Item 42
    • +
  • Item 43
    • +
  • Item 44
    • +
  • Item 45
    • +
  • Item 46
    • +
  • Item 47
    • +
  • Item 48
    • +
  • Item 49
    • +
  • Item 50
    • +
  • Item 61
    • +
  • Item 62
    • +
  • Item 63
    • +
  • Item 64
    • +
  • Item 65
    • +
  • Item 66
    • +
  • Item 67
    • +
  • Item 68
    • +
  • Item 69
    • +
  • Item 70
    • +
  • Item 81
    • +
  • Item 82
    • +
  • Item 83
    • +
  • Item 84
    • +
  • Item 85
    • +
  • Item 86
    • +
  • Item 87
    • +
  • Item 88
    • +
  • Item 89
    • +
  • Item 90
    • +
  • Item 91
    • +
  • Item 92
    • +
  • Item 93
    • +
  • Item 94
    • +
  • Item 95
    • +
  • Item 96
    • +
  • Item 97
    • +
  • Item 98
    • +
  • Item 99
    • +
  • Item 100
    • +
+ + +
Footer 2
+ + + diff --git a/tests/functional/ScrollableContainer.html b/tests/functional/ScrollableContainer.html new file mode 100755 index 0000000000..d0cf88b3c4 --- /dev/null +++ b/tests/functional/ScrollableContainer.html @@ -0,0 +1,204 @@ + + + + + + + ScrollableContainer + + + + + + + + + + + + + + + + + + + + + +
    +
  • Item 1
    • +
  • Item 2
    • +
  • Item 3
    • +
  • Item 4
    • +
  • Item 5
    • +
  • Item 6
    • +
  • Item 7
    • +
  • Item 8
    • +
  • Item 9
    • +
  • Item 10
    • +
  • Item 11
    • +
  • Item 12
    • +
  • Item 13
    • +
  • Item 14
    • +
  • Item 15
    • +
  • Item 16
    • +
  • Item 17
    • +
  • Item 18
    • +
  • Item 19
    • +
  • Item 20
    • +
  • Item 21
    • +
  • Item 22
    • +
  • Item 23
    • +
  • Item 24
    • +
  • Item 25
    • +
  • Item 26
    • +
  • Item 27
    • +
  • Item 28
    • +
  • Item 29
    • +
  • Item 30
    • +
  • Item 31
    • +
  • Item 32
    • +
  • Item 33
    • +
  • Item 34
    • +
  • Item 35
    • +
  • Item 36
    • +
  • Item 37
    • +
  • Item 38
    • +
  • Item 39
    • +
  • Item 40
    • +
  • Item 41
    • +
  • Item 42
    • +
  • Item 43
    • +
  • Item 44
    • +
  • Item 45
    • +
  • Item 46
    • +
  • Item 47
    • +
  • Item 48
    • +
  • Item 49
    • +
  • Item 50
    • +
  • Item 61
    • +
  • Item 62
    • +
  • Item 63
    • +
  • Item 64
    • +
  • Item 65
    • +
  • Item 66
    • +
  • Item 67
    • +
  • Item 68
    • +
  • Item 69
    • +
  • Item 70
    • +
  • Item 81
    • +
  • Item 82
    • +
  • Item 83
    • +
  • Item 84
    • +
  • Item 85
    • +
  • Item 86
    • +
  • Item 87
    • +
  • Item 88
    • +
  • Item 89
    • +
  • Item 90
    • +
  • Item 91
    • +
  • Item 92
    • +
  • Item 93
    • +
  • Item 94
    • +
  • Item 95
    • +
  • Item 96
    • +
  • Item 97
    • +
  • Item 98
    • +
  • Item 99
    • +
  • Item 100
    • +
+ + + + diff --git a/tests/unit.js b/tests/unit.js index a614803049..2b6dda9b6d 100644 --- a/tests/unit.js +++ b/tests/unit.js @@ -5,5 +5,6 @@ define(["./unit/LinearLayout1", "./unit/LinearLayout4", "./unit/LinearLayout5", "./unit/SidePane.js", - "./unit/ViewStack.js" + "./unit/ViewStack.js", + "./unit/ScrollableContainer" ]); diff --git a/tests/unit/ScrollableContainer.js b/tests/unit/ScrollableContainer.js new file mode 100755 index 0000000000..b6a17fcc4b --- /dev/null +++ b/tests/unit/ScrollableContainer.js @@ -0,0 +1,91 @@ +define([ + "dcl/dcl", + "intern!object", + "intern/chai!assert", + "dojo/dom-class", + "delite/register", + "delite/Widget", + "delite/Scrollable", + "deliteful/ScrollableContainer", + "delite/tests/Scrollable-shared" // reuse the test cases from the tests of delite/Scrollable +], function (dcl, registerSuite, assert, domClass, register, Widget, + Scrollable, ScrollableContainer, ScrollableSharedTests) { + + // Note that the actual testing is done in ScrollableContainer-shared. + + var container, MyScrollableWidget, MyScrollableContainer; + /*jshint multistr: true */ + var html = " \ +
\ + \ + \ + \ + \ + "; + + + // Markup use-case + + var suite = { + name: "delite/ScrollableContainer: markup", + setup: function () { + container = document.createElement("div"); + document.body.appendChild(container); + container.innerHTML = html; + register("my-scrolable-container", [ScrollableContainer], {}); + register.parse(); + }, + teardown: function () { + container.parentNode.removeChild(container); + } + }; + + ScrollableSharedTests.containerCSSClassName = "d-scrollable-container"; + + dcl.mix(suite, ScrollableSharedTests.testCases); + + registerSuite(suite); + + // Programatic creation + + suite = { + name: "delite/ScrollableContainer: programatic", + setup: function () { + container = document.createElement("div"); + document.body.appendChild(container); + + MyScrollableContainer = register("my-sc-prog", [ScrollableContainer], {}); + + var w = new ScrollableContainer({ id: "sc1" }); + w.style.position = "absolute"; + w.style.width = "200px"; + w.style.height = "200px"; + container.appendChild(w); + w.startup(); + + var innerContent = document.createElement("div"); + innerContent.id = "sc1content"; + innerContent.style.width = "2000px"; + innerContent.style.height = "2000px"; + w.appendChild(innerContent); + w.startup(); + + w = new MyScrollableContainer({ id: "mysc1" }); + container.appendChild(w); + w.startup(); + + w = new ScrollableContainer({ id: "sc2" }); + w.scrollDirection = "none"; + container.appendChild(w); + w.startup(); + }, + teardown: function () { + container.parentNode.removeChild(container); + } + }; + + dcl.mix(suite, ScrollableSharedTests.testCases); + + registerSuite(suite); +});