From 02aa607dfcbe66dd19a4401c8aa900147b409196 Mon Sep 17 00:00:00 2001 From: johanlahti Date: Tue, 8 Nov 2016 17:10:33 +0100 Subject: [PATCH] - Better placement of info box - CSS cosmetics --- js/InfoBox.js | 6 +++--- js/IntroGuide.js | 23 ++++++++++++++++------- js/Navigation.js | 2 ++ package.json | 9 ++++++++- styles/app.css | 30 +++++++++++------------------- styles/app.styl | 22 +++++++++++++--------- test/js/initWithGlobal.js | 4 ++++ 7 files changed, 57 insertions(+), 39 deletions(-) mode change 100755 => 100644 styles/app.css diff --git a/js/InfoBox.js b/js/InfoBox.js index a458daa..fc63221 100644 --- a/js/InfoBox.js +++ b/js/InfoBox.js @@ -13,10 +13,10 @@ export class InfoBox { if (selector) { let referenceTag = document.querySelector( selector ); var options = Object.assign({ - gpuAcceleration: false + gpuAcceleration: false, + placement: "bottom", + flipBehavior: ["right", "bottom", "top"] // offset: 60, - // placement: "right" - // flipBehavior: ["right", "top"], // boundariesPadding: 100, // boundariesElement: document.querySelector("body"), }, popperOptions); diff --git a/js/IntroGuide.js b/js/IntroGuide.js index 28b212d..5d91f86 100644 --- a/js/IntroGuide.js +++ b/js/IntroGuide.js @@ -170,9 +170,13 @@ export class IntroGuide { if (this._beforeShowTimeout) { clearTimeout(this._beforeShowTimeout); } + + + // document.querySelector(".ig-infobox-section").click(); + // this._nav._tag.style.visibility = "hidden"; + // this._nav._tag.style.display = "none"; utils.removeClass(this._nav._tag, "ig-fadein-nav"); - this._nav._tag.style.visibility = "hidden"; var navBtnLeft = this._nav._tag.querySelectorAll(".ig-nav-btn")[0], navBtnRight = this._nav._tag.querySelectorAll(".ig-nav-btn")[1]; @@ -235,10 +239,10 @@ export class IntroGuide { this.scrollTo(this._scrollOffsetX, this._scrollOffsetY); this._nav.updateGui(step, stepConfig); - var positionObj = this._infoBox.updateGui(stepConfig.title, stepConfig.description, stepConfig.selector, "static"); //this._infoBox._tag.style.position); //stepConfig.popperOptions); + var positionObj = this._infoBox.updateGui(stepConfig.title, stepConfig.description, stepConfig.selector, stepConfig.options); //this._infoBox._tag.style.position); //stepConfig.popperOptions); var position = positionObj && positionObj.reference ? positionObj.reference : null; if (position && position.top) { - const marginY = 100; // TODO: Move to options? + const marginY = 200; // TODO: Move to options? const marginX = 0; // TODO: Move to options? const isOutsideViewportY = window.innerHeight - position.top + window.pageYOffset - marginY < 0; const isOutsideViewportX = window.innerWidth - position.left + window.pageXOffset - marginX < 0; @@ -266,9 +270,12 @@ export class IntroGuide { this._drawHole( position ); this._navDelayTimeout = setTimeout(() => { - this._nav._tag.style.visibility = "visible"; // utils.removeClass(this._nav._tag, "ig-hide"); - utils.addClass(this._nav._tag, "ig-fadein-nav"); + // this._nav._tag.style.display = "block"; + // this._nav._tag.style.visibility = "visible"; + setTimeout(() => { + utils.addClass(this._nav._tag, "ig-fadein-nav"); + }, 10); }, 500); return null; } @@ -313,14 +320,16 @@ export class IntroGuide { this._nav = new Navigation(this._infoBox._tag, (e) => { this.goToStep( this._stepIndex - 1 ); - this._infoBox._tag.focus(); + // this._infoBox._tag.focus(); + e.stopPropagation(); }, (e) => { // if (this._stepIndex > this._config.steps.length - 1) { // return this.stop(); // } this.goToStep( this._stepIndex + 1 ); - this._infoBox._tag.focus(); + // this._infoBox._tag.focus(); + e.stopPropagation(); }, this._config.steps.length ) diff --git a/js/Navigation.js b/js/Navigation.js index fae58fb..c47f00a 100644 --- a/js/Navigation.js +++ b/js/Navigation.js @@ -40,11 +40,13 @@ export class Navigation { btnPrev = this._btnPrev; const orgDisplay = "inline-block"; + removeClass(btnNext, "btnnext-alone"); switch (step) { case 0: // Hide btnPrev on first step, unless... if ( !config.btnLeftLabel && !config.btnLeftIcon) { btnPrev.style.display = "none"; + addClass(btnNext, "btnnext-alone"); } break; case this._nbrOfSteps - 1: diff --git a/package.json b/package.json index 09d6066..14086e0 100644 --- a/package.json +++ b/package.json @@ -12,8 +12,14 @@ "dist/fonts/*", "README.md" ], + "config": { + "stylus": "./node_modules/.bin/stylus" + }, "scripts": { - "test": "npm test" + "test": "echo 'No test'", + "build:js": "webpack --colors --progress", + "build:css": "stylus ./styles/*.styl -o ./styles/ && cp styles/app.css dist/css/bundle.css", + "build": "npm run build:css && npm run build:js && echo 'Done!'" }, "repository": { "type": "git", @@ -54,6 +60,7 @@ "jshint": "latest", "jshint-stylish": "latest", "run-sequence": "^1.2.1", + "stylus": "^0.54.5", "vinyl-source-stream": "latest", "webpack": "^1.13.1" }, diff --git a/styles/app.css b/styles/app.css old mode 100755 new mode 100644 index 31e969e..4ddfad9 --- a/styles/app.css +++ b/styles/app.css @@ -1,3 +1,4 @@ +@import url("https://fonts.googleapis.com/css?family=Titillium+Web:200"); .ig-maincontainer { font-size: 2rem; position: absolute; @@ -13,9 +14,7 @@ top: 0; width: 100%; height: 100%; - transition: opacity 0.3s, -webkit-filter 0.3s; transition: opacity 0.3s, filter 0.3s; - transition: opacity 0.3s, filter 0.3s, -webkit-filter 0.3s; opacity: 0; } .ig-btnclose { @@ -37,7 +36,7 @@ z-index: 2; transition: left 0.5s, top 0.5s, margin 0.8s, opacity 0.5s; color: #fff; - padding: 0 0.5em 0.5em 0.5em; + padding: 0.5em 0.5em 0.5em 0.5em; margin: 0.5em; min-width: 9em; max-width: 14em; @@ -50,7 +49,7 @@ padding-top: 0; margin-top: 0; margin-bottom: 0; - font-family: Helvetica, arial, sans-serif; + font-family: 'Titillium Web', sans-serif; font-size: 1.2em; line-height: 1; } @@ -58,14 +57,14 @@ font-size: 0.8em; word-break: normal; line-height: 1.1; - font-family: Helvetica, arial, sans-serif; + font-family: 'Titillium Web', sans-serif; font-size: 0.7em; margin-top: 0.3em; } .ig-nav-container { margin-top: 0.5em; position: relative; - font-size: 1em; + font-size: 0.9em; float: left; opacity: 0; } @@ -76,27 +75,24 @@ color: #fff; } .ig-nav-btn-group { + font-family: 'Titillium Web', sans-serif; white-space: nowrap; } .ig-nav-btn { display: inline-block; margin: 0; cursor: pointer; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; + user-select: none; padding: 0.3em 0.7em; - transition: all 0.3s; + transition: opacity 0.3s, filter 0.3s; border: 1px solid transparent; } +.ig-nav-btn.btnnext-alone { + padding-left: 0; +} .ig-nav-btn:nth-child(2) { - border-left-color: #fff; margin-left: -1px; } -.ig-nav-btn-group:hover .ig-nav-btn:nth-child(2) { - border-left-color: transparent; -} .ig-nav-btn:hover { background-color: rgba(200,200,200,0.3); box-shadow: -1px -1px 12px rgba(200,200,200,0.5); @@ -105,15 +101,11 @@ display: none; } .ig-fadein-nav { - transition: opacity 0.3s, -webkit-filter 0.3s; transition: opacity 0.3s, filter 0.3s; - transition: opacity 0.3s, filter 0.3s, -webkit-filter 0.3s; opacity: 1; } .ig-fadein canvas { - transition: opacity 0.3s, -webkit-filter 0.3s; transition: opacity 0.3s, filter 0.3s; - transition: opacity 0.3s, filter 0.3s, -webkit-filter 0.3s; opacity: 1; } .ig-fadein .ig-infobox { diff --git a/styles/app.styl b/styles/app.styl index c14c03a..1915666 100755 --- a/styles/app.styl +++ b/styles/app.styl @@ -1,4 +1,6 @@ -fontFamily = Helvetica, arial, sans-serif +@import url('https://fonts.googleapis.com/css?family=Titillium+Web:200'); + +fontFamily = 'Titillium Web', sans-serif .ig-maincontainer @@ -39,7 +41,7 @@ fontFamily = Helvetica, arial, sans-serif z-index 2 transition left 0.5s, top 0.5s, margin 0.8s, opacity 0.5s color #fff - padding 0 0.5em 0.5em 0.5em + padding 0.5em 0.5em 0.5em 0.5em margin 0.5em min-width 9em max-width 14em @@ -69,7 +71,7 @@ fontFamily = Helvetica, arial, sans-serif margin-top 0.5em // z-index 2002 position relative //absolute - font-size 1em + font-size 0.9em float left opacity 0 @@ -83,6 +85,7 @@ fontFamily = Helvetica, arial, sans-serif color #fff .ig-nav-btn-group + font-family fontFamily white-space nowrap // margin-top 1em @@ -96,22 +99,23 @@ fontFamily = Helvetica, arial, sans-serif // touch-action manipulation user-select none padding 0.3em 0.7em - transition all 0.3s //, border 0.3s + transition opacity 0.3s, filter 0.3s //, border 0.3s border 1px solid transparent // i // vertical-align bottom - + &.btnnext-alone + padding-left 0 // Make it align left btnBorderColor = #fff .ig-nav-btn:nth-child(2) - border-left-color btnBorderColor + // border-left-color btnBorderColor margin-left -1px // border-radius 0 4px 4px 0 -.ig-nav-btn-group:hover - .ig-nav-btn:nth-child(2) - border-left-color transparent +// .ig-nav-btn-group:hover +// .ig-nav-btn:nth-child(2) +// border-left-color transparent .ig-nav-btn:hover // border-color btnBorderColor diff --git a/test/js/initWithGlobal.js b/test/js/initWithGlobal.js index 14c68a1..b7b5107 100644 --- a/test/js/initWithGlobal.js +++ b/test/js/initWithGlobal.js @@ -73,6 +73,10 @@ var introConfig = { title: "Scrolling down", description: "We had to scroll down to reach here", selector: "article:nth-child(5)" + // options: { + // placement: "bottom", + // flipBehavior: ["top", "right"] + // } }, { title: "Customized buttons",