So much demo love

David-Mulder · Dec 16, 2015 · 4f8f4c1 · 4f8f4c1
1 parent e6fb926
commit 4f8f4c1
Show file tree

Hide file tree

Showing 21 changed files with 106 additions and 73 deletions.
diff --git a/demo/api.html b/demo/api.html
@@ -2,20 +2,15 @@
 <html>
 	<head>
 
-		<title></title>
+		<title>API Reference</title>
 
 		<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
-		<script>
-			window.Polymer = window.Polymer || {};
-			window.Polymer.dom = 'shadow';
-		</script>
 		<link rel="import" href="../../polymer/polymer.html">
 		<link rel="import" href="../../paper-card/paper-card.html">
 		<link rel="import" href="../paper-datatable.html">
 		<link rel="import" href="./demo-menu.html">
 		<link rel="import" href="../../iron-component-page/iron-component-page.html">
 
-
 	</head>
 	<body>
 

diff --git a/demo/bindings.html b/demo/bindings.html
@@ -2,7 +2,7 @@
 <html>
 	<head>
 
-		<title></title>
+		<title>The magic of data bindings</title>
 
 		<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
 		<script>

diff --git a/demo/complex-paper-datatable-card.html b/demo/complex-paper-datatable-card.html
@@ -1,7 +1,7 @@
 <!doctype html>
 <html>
 	<head>
-		<title></title>
+		<title>Full `paper-datatable-card` implementation</title>
 		<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
 		<script>
 			window.Polymer = window.Polymer || {};

diff --git a/demo/demo-menu.html b/demo/demo-menu.html
@@ -57,8 +57,12 @@
 			margin-left: 0px;
 		}
 		.title{
-			margin-left:7px !important;
-
+			margin-left: 10px !important;
+			font-size: 18px !important;
+		}
+		.title.small{
+			font-variant: small-caps;
+			font-size: 16px !important;
 		}
 		.search paper-input{
 			--paper-input-container-color: white;
@@ -80,7 +84,7 @@
 						&lt;paper-datatable&gt;
 					</div>
 				</paper-toolbar>
-				<paper-menu selected="{{currentUrl}}" attr-for-selected="data-url" on-iron-activate="navigate">
+				<paper-menu id="menu" selected="{{currentUrl}}" attr-for-selected="data-url" on-iron-activate="navigate">
 					<paper-item data-url="docs.html?getting-started" data-keywords='["editable", "edit", "columns", "tutorial", "docs"]'>
 						<iron-icon icon="book"></iron-icon>Getting started</span>
 					</paper-item>
@@ -119,30 +123,30 @@
 							<iron-icon icon="menu"></iron-icon><span>Miscellaneous demo's</span>
 						</paper-item>
 						<paper-menu class="menu-content" selected="{{currentUrl}}" attr-for-selected="data-url" on-iron-activate="navigate">
-							<paper-item data-url="filter.html" data-keywords='["filter", "demo", "search"]'>
-								<iron-icon icon="explore"></iron-icon><span>Simple filter</span>
-							</paper-item>
 							<paper-item data-url="bindings.html" data-keywords='["data binding", "binding", "selected", "selectedItem", "editable", "demo", "item", "value"]'>
-								<iron-icon icon="build"></iron-icon><span>The magic of data bindings</span>
+								<iron-icon icon="explore"></iron-icon><span>The magic of data bindings</span>
 							</paper-item>
 							<paper-item data-url="sorting.html" data-keywords='["sorting", "sortable", "demo"]'>
-								<iron-icon icon="build"></iron-icon><span>Sorting & Type system</span>
+								<iron-icon icon="explore"></iron-icon><span>Sorting & Type system</span>
+							</paper-item>
+							<paper-item data-url="resize-behavior.html" data-keywords='["resize", "demo"]'>
+								<iron-icon icon="explore"></iron-icon><span>Resize behaviors</span>
+							</paper-item>
+							<paper-item data-url="light.html" data-keywords='["table", "css", "light", "lightweight"]'>
+								<iron-icon icon="explore"></iron-icon><span>CSS only MD <span><code>&lt;table&gt;</code></span>
 							</paper-item>
 							<paper-item data-url="dynamic-columns.html" data-keywords='["adding", "removing", "columns", "demo"]'>
 								<iron-icon icon="build"></iron-icon><span>Dynamic columns</span>
 							</paper-item>
-							<paper-item data-url="resize-behavior.html" data-keywords='["resize", "demo"]'>
-								<iron-icon icon="build"></iron-icon><span>Resize behaviors</span>
+							<paper-item data-url="filter.html" data-keywords='["filter", "demo", "search"]'>
+								<iron-icon icon="build"></iron-icon><span>Simple filter</span>
 							</paper-item>
 							<paper-item data-url="paper-datatable.html" data-keywords='["data binding", "binding", "editable", "demo", "item", "value"]'>
 								<iron-icon icon="build"></iron-icon><span>Complex <code>&lt;datatable&gt;</code> element</span>
 							</paper-item>
 							<paper-item data-url="paper-datatable-card.html" data-keywords='["editable", "demo", "card", "pagination", "datasource", "data-source", "data source"]'>
 								<iron-icon icon="build"></iron-icon><span><code>&lt;datatable-card&gt;</code> element</span>
 							</paper-item>
-							<paper-item data-url="icons.html" data-keywords='["table", "css", "light", "lightweight"]'>
-								<iron-icon icon="build"></iron-icon><span>CSS only MD <span><code>&lt;table&gt;</code></span>
-							</paper-item>
 							<paper-item data-url="icons.html" data-keywords='["icons"]'>
 								<iron-icon icon="build"></iron-icon><span>Icons</span>
 							</paper-item>
@@ -170,7 +174,7 @@
 			-->
 			<paper-header-panel main>
 				<paper-toolbar>
-					<div class="title"></div>
+					<div class="title small">{{title}}</div>
 					<div class="search">
 						<paper-input value="{{searchTerm}}" no-label-float autofocus autosave="paper-datatable">
 							<iron-icon icon="search" prefix style="padding-right: 0px"></iron-icon>
@@ -204,6 +208,7 @@
 					return prev.concat(JSON.parse(cur.dataset.keywords));
 				}, []);
 				this.allSubKeywords = JSON.stringify(items);
+				this.title = document.title;
 			},
 			navigate: function(event, item){
 				if(item.selected){
@@ -230,13 +235,19 @@
 					}
 				}.bind(this));
 
+				this.$.submenu.opened = true;
 				if(this.searchTerm.length > 0){
-					this.$.submenu.opened = true;
+
 					if(results.length === 0){
 						this.$.noresults.removeAttribute("hidden");
 					}
 				}else{
-					this.$.submenu.opened = false;
+
+					//Polymer.dom(this.$.submenu).querySelector("paper-menu").selectedItem doesn't work due to asyncness issues :'(
+					this.$.submenu.opened = Polymer.dom(this.$.submenu).querySelectorAll('paper-menu paper-item').some(function(submenuItem){
+						return submenuItem.dataset.url == this.currentUrl;
+					}.bind(this));
+
 				}
 			}
 		});

diff --git a/demo/docs.html b/demo/docs.html
@@ -2,7 +2,7 @@
 <html>
 	<head>
 
-		<title></title>
+		<title>Documentation</title>
 
 		<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
 		<script>

diff --git a/demo/dynamic-columns.html b/demo/dynamic-columns.html
@@ -2,7 +2,7 @@
 <html>
 	<head>
 
-		<title></title>
+		<title>Adding, removing and toggling columns</title>
 
 		<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
 		<script>

diff --git a/demo/editable.html b/demo/editable.html
@@ -2,7 +2,7 @@
 <html>
 	<head>
 
-		<title></title>
+		<title>`[editable]` data tables</title>
 
 		<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
 		<script>

diff --git a/demo/events.html b/demo/events.html
@@ -2,7 +2,7 @@
 <html>
 	<head>
 
-		<title></title>
+		<title>Event explorer</title>
 
 		<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
 		<script>

diff --git a/demo/filter.html b/demo/filter.html
@@ -2,7 +2,7 @@
 <html>
 	<head>
 
-		<title></title>
+		<title>Filter attribute</title>
 
 		<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
 		<script>

diff --git a/demo/icons.html b/demo/icons.html
@@ -2,7 +2,7 @@
 <html>
 	<head>
 
-		<title></title>
+		<title>Custom datatable `iron-iconset`</title>
 
 		<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
 		<script>

diff --git a/demo/light.html b/demo/light.html
@@ -2,7 +2,7 @@
 <html>
 	<head>
 
-		<title></title>
+		<title>Lightweight CSS-only MD tables</title>
 
 		<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
 		<script>

diff --git a/demo/paper-datatable-card.html b/demo/paper-datatable-card.html
@@ -1,7 +1,7 @@
 <!doctype html>
 <html>
 	<head>
-		<title></title>
+		<title>`paper-datatable-card` playground</title>
 		<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
 		<link rel="import" href="../../polymer/polymer.html">
 		<link rel="import" href="../paper-datatable-card.html">

diff --git a/demo/paper-datatable.html b/demo/paper-datatable.html
@@ -2,7 +2,7 @@
 <html>
 	<head>
 
-		<title></title>
+		<title>`paper-datatable` playground</title>
 
 		<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
 		<script src="libs/relativeDate.js"></script>

diff --git a/demo/resize-behavior.html b/demo/resize-behavior.html
@@ -2,7 +2,7 @@
 <html>
 	<head>
 
-		<title></title>
+		<title>Resize behaviors</title>
 
 		<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
 		<script>

diff --git a/demo/simple.html b/demo/simple.html
@@ -2,7 +2,7 @@
 <html>
 	<head>
 
-		<title></title>
+		<title>Hello `datatable`</title>
 
 		<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
 		<script>

diff --git a/demo/sorting.html b/demo/sorting.html
@@ -2,7 +2,7 @@
 <html>
 	<head>
 
-		<title></title>
+		<title>Sorting a `paper-datatable`</title>
 
 		<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
 		<script>

diff --git a/demo/theming.html b/demo/theming.html
@@ -2,7 +2,7 @@
 <html>
 	<head>
 
-		<title></title>
+		<title>Theming options</title>
 
 		<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
 		<script>

diff --git a/demo/users-card.html b/demo/users-card.html
@@ -1,7 +1,7 @@
 <!doctype html>
 <html>
 	<head>
-		<title></title>
+		<title>Simple `paper-datatable-card`</title>
 		<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
 		<link rel="import" href="../../polymer/polymer.html">
 		<link rel="import" href="../paper-datatable-card.html">

diff --git a/paper-datatable-card.html b/paper-datatable-card.html
@@ -346,8 +346,8 @@
 						//this.retrieveVisibleData();
 					}
 				},
-				/*
-					Call this function to trigger reloading of the current page
+				/**
+				 * Call this function to trigger reloading of the current page
 				 */
 				retrieveVisibleData: function(){
 
@@ -434,46 +434,29 @@
 				_getRangeEnd: function(){
 					return Math.min((this.page)*this.pageSize, this.numberOfItems);
 				},
+				/**
+				 * Navigate to the next page
+				 */
 				nextPage: function(){
 					this.set("page", this.page+1);
 				},
+				/**
+				 * Navigate to the previous page
+				 */
 				prevPage: function(){
 					this.set("page", this.page-1);
 				},
+				/**
+				 * Navigate to the first page
+				 */
 				firstPage: function(){
 					this.set("page", 1);
 				},
-				lastPage: function(){
-					this.set("page", Math.ceil(this.numberOfItems / this.pageSize));
-				},
 				/**
-				 * DO NOT USE
+				 * Navigate to the last page
 				 */
-				addNew: function(){
-					console.warn('This feature is temporarily deprecated.');
-					/*
-					//1. check we ain't adding one already
-					if(this._datatable._getIndexById('__new__') > -1){
-						console.warn('It\'s only possible to add one item at a time.');
-						return;
-					}
-					//1. goto last page
-					//this.page = Math.floor(this.dataSource.length / this.pageSize) + 1;
-					//2. wait for data to load
-					//... :/
-					//3. generate default
-					var item = {};
-					this._datatable._columns.forEach(function(column){
-						if(column.default){
-							item[column.property] = JSON.parse(JSON.stringify(column.default));
-						}else{
-							item[column.property] = undefined;
-						}
-					});
-					item[this._datatable.idProperty] = '__new__';
-					//4. push default to visible data
-					this._datatable.push('data', item);
-					*/
+				lastPage: function(){
+					this.set("page", Math.ceil(this.numberOfItems / this.pageSize));
 				},
 				_prevPageDisabled: function(){
 					return this.page == 1;
@@ -539,11 +522,18 @@
 						}
 					}
 				},
+				/**
+				 * Deselect all items
+				 */
 				deselectAll: function(){
 					this._datatable.deselectAll(false);
 					this.splice('selectedIds', 0, this.selectedIds.length);
 					this._setSelectedToolbarVisible();
 				},
+				/**
+				 * Select the item with the specified id
+				 * @param id
+				 */
 				select: function(id){
 					this.push('selectedIds', id);
 					this._setSelectedKeysOnDatatable();

diff --git a/paper-datatable-column.html b/paper-datatable-column.html
@@ -178,6 +178,8 @@
 					/**
 					 * Can be overwritten to manually format the value in a non-editable state
 					 *
+					 * IMPORTANT: This is a property, not a method you should call directly.
+					 *
 					 * @attribute formatValue
 					 * @type Function
 					 * @default see code
@@ -187,6 +189,8 @@
 					 * Can be overwritten to manually sort the datatable if internal sorting is used. This is a normal
 					 * function following the Javascript sort API.
 					 *
+					 * IMPORTANT: This is a property, not a method you should call directly.
+					 *
 					 * @attribute sort
 					 * @type Function
 					 * @default see code
@@ -281,7 +285,7 @@
 
 				},
 
-				createCellInstance: function(model, notificationKey){
+				_createCellInstance: function(model, notificationKey){
 					if(typeof model[this.property] == 'undefined' && typeof this.default !== 'undefined'){
 						var instance = this.stamp({item: model, column:this, value: this.default, _dataKey: notificationKey});
 					}else{