Dev/guide fixes (#90)

* fix WIP * strand-guide now working under a variety of scenarios - props set via js vs attr - attached check * Fix the test * mess with the tests * mess a lil more
MediaMath · Jun 29, 2016 · c68d090 · c68d090
1 parent 0ad2ada
commit c68d090
Show file tree

Hide file tree

Showing 5 changed files with 105 additions and 36 deletions.
diff --git a/src/strand-guide/doc.json b/src/strand-guide/doc.json
@@ -23,7 +23,7 @@
 			"description":"Instructs the component not to be shown, or do any of it's setup. Suppots the case wherein the user has dismissed this guide (see the 'useLocalStorage' property), or developer would like to bind to the value of their own flag to dismiss the guide.",
 			"optional":true,
 			"default":"none",
-			"attribute":"supress-guide"
+			"attribute":"suppress-guide"
 		},
 		{
 			"name":"scope",
@@ -45,7 +45,8 @@
 			"type":"Boolean",
 			"description":"Instructs the component to display a semi-transparent overlay onto the window, with a spotlight on the desired target component being described. The focus overlay will block clicks until the guide tooltip is dismissed.",
 			"optional":true,
-			"default":"true"
+			"default":"true",
+			"attribute": "show-focus"
 		},
 		{
 			"name":"autoDismiss",

diff --git a/src/strand-guide/index.html b/src/strand-guide/index.html
@@ -105,10 +105,9 @@
 
 	<strand-guide 
 		id="guide"
-		noscroll
 		use-local-storage
-		name="example">
-		 
+		name="index-example">
+
 		<guide 
 			target="button1" 
 			header="Some Header 1"
@@ -133,7 +132,6 @@
 		</strand-button>
 	</strand-footer>
 
-
 	<script>
 		// var data = [
 		// 	{
@@ -159,9 +157,13 @@
 
 		window.addEventListener("WebComponentsReady", function() {
 			var guide = document.querySelector('#guide');
+
+			// guide.data = data;
 			// guide.showFocus = false;
 			// guide.autoDismiss = true;
-			// guide.data = data;
+			// guide.closeBtn = false;
+			// guide.useLocalStorage = true;
+
 			guide.show();
 
 			guide.addEventListener('guide-dismiss', function(){

diff --git a/src/strand-guide/strand-guide.js b/src/strand-guide/strand-guide.js
@@ -27,7 +27,8 @@
 			},
 			useLocalStorage: {
 				type: Boolean,
-				value: false
+				value: false,
+				notify: true
 			},
 			name: {
 				type: String,
@@ -38,7 +39,8 @@
 				computed: '_computeStorageName(name)'
 			},
 			suppressGuide: {
-				type: Boolean
+				type: Boolean,
+				observer: '_suppressGuideChanged'
 			},
 			scope: {
 				type: Object,
@@ -97,61 +99,109 @@
 			},
 			data: {
 				type: Array,
-				notify: true,
 				observer: '_dataChanged'
 			},
+			_initializable: {
+				type: Boolean,
+				computed: '_computeInitializable(_attachedInit, _dataInit, _suppressInit, useLocalStorage)',
+				observer: '_initializableChanged'
+			},
+
+			// initialization helpers
+			_dataInit: {
+				type: Boolean,
+				value: false,
+				notify: true
+			},
+			_suppressInit: {
+				type: Boolean,
+				value: false,
+				notify: true
+			},
+			_attachedInit: {
+				type: Boolean,
+				value: false,
+				notify: true
+			}
 		},
 
 		_bodyOverflow: null,
-		_isAttached: false,
+		_queueShow: false,
+		_queueGetTargets: false,
 
 		domObjectChanged: function(domObject) {
-			if (!this.data && !this.suppressGuide) {
+			if (!this.data) {
 				this.data = domObject['guide'];
 			}
 		},
 
 		attached: function() {
 			// Attempt to ensure that the DOM has settled before doing any layout
-			this.async(function() {
-				if (this.data) this._init();
-				this._isAttached = true;
-			});
+			this._attachedInit = true;
+		},
+
+		_suppressGuideChanged: function(newVal, oldVal) {
+			this._suppressInit = true;
 		},
 
 		_dataChanged: function(newVal, oldVal) {
-			if (!this.suppressGuide) {
-				// Collect object references for all of the targets
-				newVal.forEach(function(item) {
-					var target = Polymer.dom(this.scope).querySelector('#' + item.target);
-					item.targetRef = target;
-				}, this);
-
-				if (this._isAttached) this._init();
+			if (newVal && newVal.length > 0) {
+				if (this._attachedInit) {
+					this._getTargets();
+				} else {
+					this._queueGetTargets = true;
+				}
+				this._dataInit = true;
 			}
 		},
 
+		_getTargets: function() {
+			// Collect object references for all of the targets
+			this.data.forEach(function(item) {
+				var target = Polymer.dom(this.scope).querySelector('#' + item.target);
+				item.targetRef = target;
+			}, this);
+		},
+
 		_init: function() {
+			// Make sure we are attached before attempting to get targets
+			if (this._queueGetTargets) {
+				this._getTargets();
+				this._queueGetTargets = false;
+			}
+
 			// Trigger tooltip and canvas setup
 			this._tooltipData = this.data;
 			this._currentStep = 0;
+
+			if (this._queueShow) {
+				this.show();
+				this._queueShow = false;
+			}
 		},
 
 		show: function() {
-			if (!this.suppressGuide) {
-				this._setHidden(false);
-				this.$.tooltip.open();
-				if (this.showFocus) this.$$('#focus')._updateCanvas();
+			if (this._initializable) {
+				// Show the tooltip only if suppress was not set via localStorage
+				if (!this.suppressGuide) {
+					this._setHidden(false);
+					this.$.tooltip.open();
+					if (this.showFocus) this.$$('#focus')._updateCanvas();
+				}
+			} else {
+				this._queueShow = true;
 			}
 		},
 
 		hide: function(e) {
-			if (!this.suppressGuide) {
+			if (this._initializable) {
 				this._setHidden(true);
 				this.$.tooltip.close();
 
-				// If the user has dismissed - suppress via local storage
-				if (this.useLocalStorage) this.suppressGuide = true;
+				// User dismissal === suppress guide
+				if (this.useLocalStorage) {
+					this.set('suppressGuide', true);
+				}
 			}
 		},
 
@@ -177,7 +227,7 @@
 		_nextHandler: function(e) {
 			this._currentStep++;
 
-			// use this handler to trigger close and cleanup - the final step is 'Done'
+			// Used to trigger close and cleanup at the final step
 			if (this._currentStep === this.data.length) {
 				this._dismissHandler();
 			}
@@ -195,6 +245,18 @@
 
 		_computeStorageName: function(name) {
 			return 'guide-' + name;
+		},
+
+		_computeInitializable: function(_attachedInit, _dataInit, _suppressInit, useLocalStorage) {
+			if (useLocalStorage) {
+				return _suppressInit && _dataInit && _suppressInit;
+			} else {
+				return _dataInit && _attachedInit;
+			}
+		},
+
+		_initializableChanged: function(newVal, oldVal) {
+			if (newVal === true) this._init();
 		}
 
 	});

diff --git a/test/strand-guide.html b/test/strand-guide.html
@@ -67,21 +67,22 @@
 				a.data.length.should.equal(4);
 			});
 
-			it("should initalize when a data array is provided", function(done) {
+			it("should initalize only when a data, suppress, and attached conditions are met", function(done) {
 				var a = new Strand.Guide();
 				var data = [{
 					target: 'button1',
 					header: 'Some Header 1',
 					message: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tempor ipsum vel leo rutrum, eu rhoncus sem volutpat. Vestibulum convallis urna vel tristique pharetra.',
 					dismiss: 'Thanks, I\'ve got it.'
 				}];
+
 				var s = sinon.spy(a, "_init");
 				a.should.exist;
-				Polymer.dom(document.body).appendChild(a);
 				a.data = data;
 
 				flush(function() {
-					s.calledOnce.should.be.true;
+					a._attachedInit.should.be.false;
+					s.calledOnce.should.be.false;
 					done();
 				});
 			});

diff --git a/test/strand-item-recycler.html b/test/strand-item-recycler.html
@@ -168,6 +168,9 @@
 					var rect = recycler.getBoundingClientRect();
 					var lower = +rect.top; // Firefox carries floating-point numbers
 					var upper = +rect.bottom; // Firefox carries floating-point numbers
+
+					console.log("LOOOOOK HEEEEERE!", !!once != false);
+					console.log(new Error().stack);
 
 					(!!once).should.equal(false);
 					once = true;
@@ -199,7 +202,7 @@
 
 						done();
 
-					}, 1000);
+					}, 0);
 
 				});