update to 0.5.0

ibm-js · Dec 3, 2014 · 841cb30 · 841cb30
1 parent 8786616
commit 841cb30
Show file tree

Hide file tree

Showing 14 changed files with 205 additions and 55 deletions.
diff --git a/README.md b/README.md
@@ -27,14 +27,14 @@ Then install dependencies with bower (or manually from github if you prefer to):
 To load the minified layer you need to wrap your main `require` call with another `require`, requiring `"deliteful-build/layer"`. Then you should continue to
 refer to modules with `"deliteful/foo"`.
 
-For example, this:
-```
+For example, this code:
+```js
 require(["app/main", "deliteful/foo"], function() {
 	...
 });
 ```
 Becomes:
-```
+```js
 require(["deliteful-build/layer"], function() {
 	require(["app/main", "deliteful/foo"], function() {
 		...

diff --git a/bower.json b/bower.json
@@ -1,12 +1,12 @@
 {
   "name": "deliteful-build",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "dependencies": {
     "requirejs": "2.1.x",
-    "dstore": "0.2.0",
-    "decor-build": "0.3.x",
-    "delite-build": "0.4.x",
-    "dpointer-build": "0.3.x",
+    "dstore": "1.0.x",
+    "decor-build": "0.4.x",
+    "delite-build": "0.5.x",
+    "dpointer-build": "0.4.x",
     "ecma402-build": "0.2.x"
   },
   "keywords": [
@@ -22,6 +22,6 @@
     "CONTRIBUTING.md"
   ],
   "devDependencies": {
-    "deliteful": "0.4.0"
+    "deliteful": "0.5.0"
   }
 }
diff --git a/layer.js b/layer.js
diff --git a/layer.map b/layer.map
diff --git a/nls/layer_root.js b/nls/layer_root.js
diff --git a/samples/Buttons.html b/samples/Buttons.html
@@ -25,7 +25,7 @@
 	require(["deliteful-build/layer"], function(){
 		require([
 			"delite/register",
-			"deliteful/CheckBox",
+			"deliteful/Checkbox",
 			"deliteful/Switch",
 			"deliteful/ToggleButton",
 			"deliteful/RadioButton",

diff --git a/samples/Checkbox.html b/samples/Checkbox.html
@@ -0,0 +1,44 @@
+<!doctype html>
+<html id="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>Switch samples</title>
+
+	<script type="text/javascript" src="../../requirejs/require.js"></script>
+
+	<script type="text/javascript">
+		require.config({
+			baseUrl: "../.."
+		});
+	</script>
+
+
+	<script type="text/javascript">
+	require(["deliteful-build/layer"], function(){
+		require([
+			"delite/register",
+			"deliteful/Checkbox",
+			"delite/theme!delite/themes/{{theme}}/global.css",	// page level CSS
+			"requirejs-domready/domReady!"
+		], function (register, Checkbox) {
+			register.parse();
+		});
+
+	});
+	</script>
+</head>
+<style>
+</style>
+<body>
+	<label>
+		<d-checkbox name="options" checked="true"></d-checkbox>
+		Option 1
+	</label>
+	<d-checkbox name="options" id="option2"></d-checkbox>
+	<label for="option2"> Option 2 </label>
+</body>
+</html>
diff --git a/samples/ComboBox.html b/samples/ComboBox.html
@@ -5,7 +5,7 @@
 	<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>ComboBox</title>
+	<title>Combobox</title>
 
 	<link rel="stylesheet" href="../../delite/themes/defaultapp.css">
 
@@ -23,14 +23,29 @@
 			"delite/register",
 			"dstore/Memory",
 			"deliteful/list/List",
-			"deliteful/ComboBox",
+			"deliteful/Combobox",
 			"deliteful/Store",
 			"deliteful/Button",
+			"deliteful/RadioButton",
+			"deliteful/Checkbox",
 			"delite/theme!delite/themes/{{theme}}/global.css",	// page level CSS
 			"requirejs-domready/domReady!"
 		], function (register, Memory, List) {
 			register.parse();
 
+			startsWith.on("change", function () {
+				comboTeams.filterMode = "startsWith";
+			});
+			contains.on("change", function () {
+				comboTeams.filterMode = "contains";
+			});
+			is.on("change", function () {
+				comboTeams.filterMode = "is";
+			});
+			ignoreCase.on("change", function () {
+				comboTeams.ignoreCase = ignoreCase.checked;
+			});
+
 			showResults = function () {
 				var getSelectedItemsTxt = function (combobox) {
 					var res = "", noOptionSelected = "no option selected";
@@ -96,23 +111,36 @@
 <p>
 Your favorite team (single choice):
 </p>
-<d-combo-box selectionMode="single" autoFilter="true" id="comboTeams">
+<d-combobox selectionMode="single" autoFilter="true" id="comboTeams">
 	<d-list righttextAttr="world-cup-victories" categoryAttr: "region"
 		store="storeTeams"></d-list>
-</d-combo-box>
+</d-combobox>
 <p>
 (The number of cups is indicated for each country.)
 </p>
+
+<fieldset>
+	<legend>Filtering options</legend>
+	<d-radio-button name="radio" id="startsWith" checked="true"></d-radio-button>
+	<label for="startsWith">startsWith</label>
+	<d-radio-button name="radio" id="contains" checked="false"></d-radio-button>
+	<label for="contains">contains</label>
+	<d-radio-button name="radio" id="is" checked="false"></d-radio-button>
+	<label for="is">is</label>
+	<d-checkbox id="ignoreCase" checked></d-checkbox>
+	<label for="ignoreCase">Ignore Case</label></p>
+</fieldset>
 <br/>
 <p>
 Your favorite players (multiple choice):
 </p>
-<d-combo-box selectionMode="multiple" id="comboPlayers">
+<d-combobox selectionMode="multiple" id="comboPlayers">
 	<d-list store="storePlayers"></d-list>
-</d-combo-box>
+</d-combobox>
 
 <p>
 <button is="d-button" onclick="showResults()">Done</button>
 </p>
 
+</body>
 </html>
diff --git a/samples/ProgressBar-handler.html b/samples/ProgressBar-handler.html
@@ -51,10 +51,15 @@
 
 			//progressbar handler
 			var pbHandler = function (event) {
-				label.innerHTML =
+				if (isNaN(event.value)) {
+					label.innerHTML =
+						"Value: indeterminate";
+				} else {
+					label.innerHTML =
 						"Value: " + event.value.toFixed(2) + "<br>" +
 						"Percent: " + event.percent.toFixed(2) + "% <br>" +
 						"Max: " + event.max;
+				}
 			};
 			progressBar.addEventListener("change", pbHandler);
 

diff --git a/samples/SwapView.html b/samples/SwapView.html
@@ -0,0 +1,93 @@
+<!doctype html>
+<html>
+<head>
+	<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>Swap View</title>
+
+	<script type="text/javascript" src="../../requirejs/require.js"></script>
+
+	<script type="text/javascript">
+		require.config({
+			baseUrl: "../.."
+		});
+	</script>
+
+	<script type="text/javascript">
+	require(["deliteful-build/layer"], function(){
+		require([
+			"delite/register", "deliteful/SwapView", "deliteful/ViewIndicator", "deliteful/Button",
+			"delite/theme!delite/themes/{{theme}}/global.css",	// page level CSS
+			"requirejs-domready/domReady!"
+		], function (register) {
+			register.parse();
+
+			var handle = function (event) {
+				console.log(event.type + ": " + event.dest);
+			};
+			// Listen for delite/DisplayContainer events
+			vs.on("delite-display-load", handle);
+			vs.on("delite-before-show", handle);
+			vs.on("delite-after-show", handle);
+			vs.on("delite-before-hide", handle);
+			vs.on("delite-after-hide", handle);
+
+			document.body.style.display = "";
+		});
+
+
+	});
+	</script>
+
+	<style>
+
+		body {
+			background-color: #eeeeee;
+		}
+
+		button {
+			width: 10em;
+		}
+
+		#vs > div {
+			font-size: 20px;
+			font-family: Helvetica;
+			text-align: center;
+			font-weight: bold;
+		}
+
+		#vs {
+			width: 50%;
+			height: 300px;
+			border: 2px solid gold
+		}
+
+		#vi {
+			width: 50%;
+		}
+	</style>
+</head>
+<body style="display: none; margin:2em;">
+<button is="d-button" onclick="vs.showPrevious({reverse:true});">Previous</button>
+<button is="d-button" onclick="vs.showNext();">Next</button>
+<br>
+<d-swap-view id="vs" selectedChildId="bbb">
+	<div style="background-color: honeydew; " id="aaa">
+		<h1>View 1</h1>
+	</div>
+	<div style="background-color: whitesmoke;" id="bbb">
+		<h1>View 2</h1>
+	</div>
+	<div style="background-color: powderblue;" id=ccc>
+		<h1>View 3</h1>
+	</div>
+	<div style="background-color: oldlace;" id="ddd">
+		<h1>View 4</h1>
+	</div>
+</d-swap-view>
+<d-view-indicator id="vi" viewstack="vs"></d-view-indicator>
+<br>
+
+</body>
+</html>
diff --git a/samples/list/header-list-footer.html b/samples/list/header-list-footer.html
@@ -33,7 +33,6 @@
 				list.store.add({label: "Item #" + i});
 			}
 			list.startup();
-
 			document.body.style.display = "";
 		});
 

diff --git a/samples/list/listBox-multipleSelection-markBefore.html b/samples/list/listBox-multipleSelection-markBefore.html
@@ -20,13 +20,12 @@
 	require(["deliteful-build/layer"], function(){
 		require([
 			"delite/register",
-			"dojo/on",
 			"dstore/Memory",
 			"dstore/Trackable",
 			"deliteful/list/List",
 			"delite/theme!delite/themes/{{theme}}/global.css", // page level CSS
 			"requirejs-domready/domReady!"
-		], function (register, on, Memory, Trackable) {
+		], function (register, Memory, Trackable) {
 			var Store = Memory.createSubclass([Trackable], {});
 			var console = document.createElement("p");
 			console.innerHTML = "Click to select an item.";
@@ -66,6 +65,5 @@
 </head>
 <body style="display: none" role="application">
 	This sample demonstrate a list with listbox aria role, multiple selection mode enabled and custom CSS to display a selection mark before the currently selected item(s).
-	<input autofocus><br>
 </body>
 </html>
diff --git a/samples/list/listBox-singleSelection-markAfter.html b/samples/list/listBox-singleSelection-markAfter.html
@@ -20,12 +20,11 @@
 	require(["deliteful-build/layer"], function(){
 		require([
 		    "delite/register",
-		    "dojo/on",
 			"dstore/Memory",
 			"dstore/Trackable",
 			"deliteful/list/List",
 			"delite/theme!delite/themes/{{theme}}/global.css"	// page level CSS
-		], function (register, on, Memory, Trackable, List) {
+		], function (register, Memory, Trackable, List) {
 			var Store = Memory.createSubclass([Trackable], {});
 			var console = document.createElement("div");
 			console.innerHTML = "Click to select an item.";
@@ -64,6 +63,5 @@
 </head>
 <body style="display: none" role="application">
 	This sample demonstrate a list with listbox aria role, single selection mode enabled and custom CSS to display a selection mark after the currently selected item(s).
-	<input autofocus><br>
 </body>
 </html>
diff --git a/themes/layer_bootstrap.css b/themes/layer_bootstrap.css
-Original file line number
+Diff line change
@@ Expand Up / @@ -33,7 +33,6 @@ @@
     				list.store.add({label: "Item #" + i});
     			}
     			list.startup();
     			document.body.style.display = "";
     		});
@@ Expand Down @@