mm-guide WIP

MediaMath · May 5, 2016 · f9976b8 · f9976b8
1 parent e983381
commit f9976b8
Show file tree

Hide file tree

Showing 5 changed files with 187 additions and 26 deletions.
diff --git a/src/strand-guide-tooltip/strand-guide-tooltip.html b/src/strand-guide-tooltip/strand-guide-tooltip.html
@@ -12,6 +12,8 @@
 <dom-module id="strand-guide-tooltip">
 	<link rel="import" type="css" href="strand-guide-tooltip.css"/>
 	<template>
+
+		<content></content>
 
 	</template>
 </dom-module>

diff --git a/src/strand-guide/index.html b/src/strand-guide/index.html
@@ -12,7 +12,7 @@
 			body {  
 				margin:0;
 				padding:0;
-				background: #eee;
+				background: #ccc;
 			}
 
 			.col {
@@ -85,7 +85,11 @@
   </head>
   <body>
 
-	<strand-guide>
+  	<button id="button1">button 1</button>
+  	<button id="button2">button 2</button>
+  	<button id="button3">button 3</button>
+
+	<strand-guide id="guide">
 		<guide 
 			step="1" 
 			target="button1" 
@@ -105,6 +109,12 @@
 
 	<script>
 		window.addEventListener("WebComponentsReady", function() {
+
+			var guide = document.querySelector('#guide');
+
+			// TODO: Temp
+			guide.show();
+
 			// Data format:
 			/*
 				data = [

diff --git a/src/strand-guide/strand-guide.html b/src/strand-guide/strand-guide.html
@@ -11,17 +11,21 @@
 <link rel="import" href="../shared/behaviors/falsifiable.html"/>
 <link rel="import" href="../shared/behaviors/domgettable.html"/>
 <link rel="import" href="../shared/behaviors/stackable.html"/>
+<!-- <link rel="import" href="../strand-box/strand-box.html"/> -->
+<link rel="import" href="../strand-action/strand-action.html"/>
 
 <dom-module id="strand-guide">
 	<link rel="import" type="css" href="strand-guide.css"/>
 	<template>
-		
+
 		<content select="guide"></content>
 
-		<div id="blocker" on-tap="hide">
-			<canvas id="mask"></canvas>
+		<div id="blocker">
+
+			<canvas id="focus"></canvas>
+
+			<div id="tooltip">
 
-			<strand-guide-tooltip>
 				<p class="header">{{_header}}</p>
 				<p class="message">{{_message}}</p>
 
@@ -32,22 +36,26 @@
 				</template>
 
 				<template is="dom-if" if="{{_next}}">
-					<strand-action on-tap="_nextHandler">
+					<strand-action on-tap="_nextHandler" underline>
 						<label>{{_nextLabel}}</label>
 					</strand-action>
 				</template>
 
 				<template is="dom-if" if="{{_back}}">
-					<strand-action on-tap="_backHandler">
+					<strand-action on-tap="_backHandler" underline>
 						<label>{{_backLabel}}</label>
 					</strand-action>
 				</template>
 
 				<template is="dom-if" if="{{_progressIndicator}}">
-
+					<div id="dots">
+						<template id="progressIndicator" is="dom-repeat" items="{{data}}">
+							<div class="dot" data-index$="{{index}}" active$="{{_computeActive(index, _currentStep)}}"></div>
+						</template>
+					</div>
 				</template>
 
-			</strand-guide-tooltip>
+			</div>
 
 		</div>
 

diff --git a/src/strand-guide/strand-guide.js b/src/strand-guide/strand-guide.js
@@ -18,6 +18,11 @@
 		],
 
 		properties: {
+			scope: {
+				type: Object,
+				notify: true,
+				value: function() { return document }
+			},
 			stackType:{
 				value: "modal"
 			},
@@ -32,6 +37,18 @@
 				type: String,
 				// notify:true
 			},
+			_progressIndicator: {
+				type: Boolean,
+				// value: false,
+				computed: '_showProgressIndicator(data)',
+				// observer: '_progIndicatorChanged'
+			},
+			_currentStep: {
+				type: Number,
+				value: 0,
+				notify: true
+				// observer: '_currentStepChanged'
+			},
 			_next: {
 				type: Boolean,
 				value: false
@@ -68,40 +85,107 @@
 
 		_previousBodyOverflow: null,
 
-		domObjectChanged: function(domObject) {
-			console.log('domObjectChanged: ', domObject);
-			if (!this.data) this.data = domObject; 
+		attached: function() {
+			// TODO: handle the progress indicator
+			// this._handleDots();
+			this._setupCanvas();
 		},
-
-		// attached: function() {
-
-		// },
 
 		// detached: function() {
 
 		// },
 
+		// setup
+		domObjectChanged: function(domObject) {
+			console.log('domObjectChanged: ', domObject);
+			if (!this.data) this.data = domObject['guide']; 
+		},
+
 		_dataChanged: function(newVal, oldVal) {
 			console.log('_dataChanged: ', newVal);
 			// TODO: Start setting up with this data
+			this._setupTip();
+
 			// TODO: find all targets and get bounding - store em
-			// TODO: set all the layout properties
+			newVal.forEach(function(item) {
+				var target = Polymer.dom(this.scope).querySelector('#' + item.target);
+				item.targetRef = target;
+				console.log(item, item.targetRef); 
+			});
+		},
+
+		_setupTip: function() {
+			var data = this.data;
+			var step = this._currentStep;
+
+			this._header = data[step].hasOwnProperty('header') ? data[step].header : null;
+			this._message = data[step].hasOwnProperty('message') ? data[step].message : null;
+
+			// next, back, and labeling
+			this._next = data.length > 1;
+			this._back = data.length > 1 && step > 0;
+
+			if (this._next && step < data.length-1) {
+				this._nextLabel = 'Next';
+			} else if (this._next && step === data.length-1) {
+				this._nextLabel = 'Done';
+			}
+
+			if (this._back && step > 0) {
+				this._backLabel = 'Back';
+			}
+			// this._handleDots();
+		},
+
+		_setupCanvas: function() {
+			this.$.focus.width = window.innerWidth;
+			this.$.focus.height = window.innerHeight;
+		},
+
+		// _handleDots: function() {
+		// 	var dots = Polymer.dom(this.$$('#dots')).querySelectorAll('div.dot');
+
+		// 	for (var i = dots.length-1; i > -1 ; i--) {
+		// 		if (i === Number(dots[i].getAttribute('data-id'))) {
+		// 			dots[i].setAttribute('active', '');
+		// 		} else {
+		// 			dots[i].removeAttribute('active');
+		// 		}
+		// 	}
+		// },
+
+		_computeActive: function(index, _currentStep) {
+			// console.log(index);
+			return this._currentStep === index;
+		},
+
+		// _progIndicatorChanged: function(newVal, oldVal) {
+		// 	if (newVal) {
+		// 		this.$$('#progressIndicator').stamp(this.data);
+		// 	}
+		// },
+
+		_showProgressIndicator: function(data) {
+			return data.length > 1;
 		},
 
+		// public
 		show: function() {
 			console.log('strand-guide: show');
+			this.hidden = false; 
+
 			if(this.noscroll) {
 				this._previousBodyOverflow = document.body.style.overflow;
-				this.hidden = false;
 				document.body.style.overflow = "hidden";
 			}
 		},
 
 		hide: function(e) {
 			console.log('strand-guide: hide');
+			this.hidden = true;
+
 			if (e) e = Polymer.dom(e);
 			if (!e || this.dismiss && e.rootTarget === this.$.blocker || e.path.indexOf(this.$$("#close")) !== -1)  {
-				this.hidden = true;
 				document.body.style.overflow = this._previousBodyOverflow;
 			}
 		},
@@ -111,17 +195,30 @@
 		},
 
 		_nextHandler: function(e) {
-			console.log('_nextHandler: ', e);
+			this._currentStep++;
+
+			if (this._currentStep <= this.data.length-1) {
+				this._setupTip();
+			}
+
+			// use this handler to trigger close and cleanup
+			// since the final step says 'Done'
+			if (this._currentStep === this.data.length) {
+				// TODO: Close and cleanup actions
+				console.log('DONE');
+			}
+			// console.log('_nextHandler: ', this._currentStep);
 		},
 
 		_backHandler: function(e) {
-			console.log('_backHandler: ', e);
+			this._currentStep--;
+
+			if (this._currentStep > -1) {
+				this._setupTip();
+			}
+			// console.log('_backHandler: ', this._currentStep);
 		},
 
-		// _hiddenChanged: function(newVal, oldVal) {
-		// 	if (newVal) this.show();   
-		// },
-
 		_widthStyle: function(width) {
 			return "width:"+width+"px";
 		},

diff --git a/src/strand-guide/strand-guide.scss b/src/strand-guide/strand-guide.scss
@@ -11,4 +11,48 @@
 :host {
 	position: relative;
 	display: block;
+}
+
+:host([hidden]) {
+	display:none;
+}
+
+#blocker {
+	position: fixed;
+	left: 0;
+	top: 0;
+	bottom: 0;
+	right: 0;
+}
+
+#tooltip {
+	position: absolute;
+	top: 100px;
+	left: 100px;
+}
+
+#dots {
+	display: flex;
+	flex-direction: row;
+	justify-content: flex-start;
+	align-items: flex-start;
+}
+
+.dot {
+	box-sizing: border-box;
+	padding: 4px;
+	opacity: 0.5;
+}
+
+.dot[active] {
+	opacity: 1;
+}
+
+.dot:before {
+ 	content: "";
+ 	display: block;
+ 	background: #ffffff;
+	width: 5px;
+	height: 5px;
+	border-radius: 2.5px;
 }