- Better placement of info box

- CSS cosmetics
johanlahti · Nov 8, 2016 · 02aa607 · 02aa607
1 parent 7c162e1
commit 02aa607
Show file tree

Hide file tree

Showing 7 changed files with 57 additions and 39 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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,22 +49,22 @@
   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;
 }
 .ig-infobox section {
   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
@@ -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
@@ -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",