Added deliteful/ScrollableContainer

ibm-js · Jan 31, 2014 · 36ad53b · 36ad53b
1 parent 51bfa6e
commit 36ad53b
Show file tree

Hide file tree

Showing 6 changed files with 712 additions and 1 deletion.
diff --git a/ScrollableContainer.js 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:
+		//	|	<d-scrollable-container>
+		//	|		<div>...</div>
+		//	|		<div>...</div>
+		//	|		<div>...</div>
+		//	|	</d-scrollable-container>
+
+		// 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
@@ -0,0 +1,141 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
+	<meta name="viewport" 
+		content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"/>
+	<meta name="apple-mobile-web-app-capable" content="yes"/>
+	<title>ScrollableContainer (full-screen)</title>
+
+	<link rel="stylesheet" href="../../../delite/themes/defaultapp.css">
+
+	<!-- For testing purposes. Real applications should load the AMD loader directly -->
+	<script type="text/javascript" src="../../../delite/tests/boilerplate.js"></script>
+
+	<script type="text/javascript">
+		require([
+			"delite/register",
+			"deliteful/ScrollableContainer",
+			"deliteful/LinearLayout",
+			"dojo/domReady!"
+		], function(register){
+			register.parse();
+		});
+	</script>
+
+	<style type="text/css">
+	ul {
+		padding: 0;
+		margin: 0;
+	}
+	li {
+		padding: 0 0.5em;
+		height: 2em;
+		list-style-type: none;
+		line-height: 2em;
+		-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
+		border-bottom: 1px solid #222222;
+		font-size: 2em;
+		cursor: pointer;
+	}
+	li:hover {
+		background-color: #61C6EB;
+	}
+	li:active {
+		background-color: #007fea;
+	}
+	</style>
+</head>
+<body>
+	<d-linear-layout style="height: 100%">
+		<div style="background-color: blue">Header</div>
+
+		<d-scrollable-container style="background-color: green" class="fill">
+			<ul>
+				<li>Item 1</li>
+				<li>Item 2</li>
+				<li>Item 3</li>
+				<li>Item 4</li>
+				<li>Item 5</li>
+				<li>Item 6</li>
+				<li>Item 7</li>
+				<li>Item 8</li>
+				<li>Item 9</li>
+				<li>Item 10</li>
+				<li>Item 11</li>
+				<li>Item 12</li>
+				<li>Item 13</li>
+				<li>Item 14</li>
+				<li>Item 15</li>
+				<li>Item 16</li>
+				<li>Item 17</li>
+				<li>Item 18</li>
+				<li>Item 19</li>
+				<li>Item 20</li>
+				<li>Item 21</li>
+				<li>Item 22</li>
+				<li>Item 23</li>
+				<li>Item 24</li>
+				<li>Item 25</li>
+				<li>Item 26</li>
+				<li>Item 27</li>
+				<li>Item 28</li>
+				<li>Item 29</li>
+				<li>Item 30</li>
+				<li>Item 31</li>
+				<li>Item 32</li>
+				<li>Item 33</li>
+				<li>Item 34</li>
+				<li>Item 35</li>
+				<li>Item 36</li>
+				<li>Item 37</li>
+				<li>Item 38</li>
+				<li>Item 39</li>
+				<li>Item 40</li>
+				<li>Item 41</li>
+				<li>Item 42</li>
+				<li>Item 43</li>
+				<li>Item 44</li>
+				<li>Item 45</li>
+				<li>Item 46</li>
+				<li>Item 47</li>
+				<li>Item 48</li>
+				<li>Item 49</li>
+				<li>Item 50</li>
+				<li>Item 61</li>
+				<li>Item 62</li>
+				<li>Item 63</li>
+				<li>Item 64</li>
+				<li>Item 65</li>
+				<li>Item 66</li>
+				<li>Item 67</li>
+				<li>Item 68</li>
+				<li>Item 69</li>
+				<li>Item 70</li>
+				<li>Item 81</li>
+				<li>Item 82</li>
+				<li>Item 83</li>
+				<li>Item 84</li>
+				<li>Item 85</li>
+				<li>Item 86</li>
+				<li>Item 87</li>
+				<li>Item 88</li>
+				<li>Item 89</li>
+				<li>Item 90</li>
+				<li>Item 91</li>
+				<li>Item 92</li>
+				<li>Item 93</li>
+				<li>Item 94</li>
+				<li>Item 95</li>
+				<li>Item 96</li>
+				<li>Item 97</li>
+				<li>Item 98</li>
+				<li>Item 99</li>
+				<li>Item 100</li>
+			</ul>
+		</d-scrollable-container>
+
+		<div style="background-color: yellow">Footer</div>
+	</d-linear-layout>
+</body>
+</html>