From f9976b8cd869de75f3c3707be5850656f0ab5694 Mon Sep 17 00:00:00 2001 From: Anthony Koerber Date: Mon, 25 Apr 2016 18:35:08 -0500 Subject: [PATCH] mm-guide WIP --- .../strand-guide-tooltip.html | 2 + src/strand-guide/index.html | 14 +- src/strand-guide/strand-guide.html | 24 ++-- src/strand-guide/strand-guide.js | 129 +++++++++++++++--- src/strand-guide/strand-guide.scss | 44 ++++++ 5 files changed, 187 insertions(+), 26 deletions(-) diff --git a/src/strand-guide-tooltip/strand-guide-tooltip.html b/src/strand-guide-tooltip/strand-guide-tooltip.html index 18c28563..a9475e14 100644 --- a/src/strand-guide-tooltip/strand-guide-tooltip.html +++ b/src/strand-guide-tooltip/strand-guide-tooltip.html @@ -12,6 +12,8 @@ diff --git a/src/strand-guide/index.html b/src/strand-guide/index.html index 3d60775f..3f22d50b 100644 --- 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 @@ - + + + + + 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 index df5a9504..cc70c395 100644 --- a/src/strand-guide/strand-guide.html +++ b/src/strand-guide/strand-guide.html @@ -11,17 +11,21 @@ + + - + diff --git a/src/strand-guide/strand-guide.js b/src/strand-guide/strand-guide.js index 0445d7a4..5891c751 100644 --- 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 index 4241816a..2eb47443 100644 --- 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; } \ No newline at end of file