* Fix: Adjustments to animations en environment.

* Fix: Prevents content to "jump" due to scrollbar in desktop mode.
SubZane · Apr 20, 2017 · 1d0f475 · 1d0f475
1 parent 23ce8e8
commit 1d0f475
Show file tree

Hide file tree

Showing 12 changed files with 113 additions and 81 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+	"vsicons.presets.angular": false
+}
diff --git a/Gruntfile.js b/Gruntfile.js
@@ -123,7 +123,6 @@ module.exports = function (grunt) {
 
 	// These plugins provide necessary tasks.
 	grunt.loadNpmTasks('grunt-contrib-clean');
-	grunt.loadNpmTasks('grunt-contrib-less');
 	grunt.loadNpmTasks('grunt-sass');
 	grunt.loadNpmTasks('grunt-contrib-concat');
 	grunt.loadNpmTasks('grunt-contrib-uglify');

diff --git a/README.md b/README.md
@@ -1,4 +1,4 @@
-flyPanels v2.0.3
+flyPanels v2.0.6
 =======
 
 flyPanels - responsive off canvas menu panels
@@ -268,6 +268,10 @@ document.addEventListener("DOMContentLoaded", function(event) {
 
 ##changelog
 
+####2.0.6
+* Fix: Adjustments to animations en environment.
+* Fix: Prevents content to "jump" due to scrollbar in desktop mode.
+
 ####2.0.5
 * Fix: Bug with the search not removing previous search query and number of hits.
 

diff --git a/bower.json b/bower.json
@@ -1,6 +1,6 @@
 {
 	"name": "flypanels",
-	"version": "2.0.5",
+	"version": "2.0.6",
 	"homepage": "http://www.andreasnorman.com/flypanels/",
 	"authors": [
 		"Andreas Norman <an@andreasnorman.se>"

diff --git a/demo/css/flyPanels.css b/demo/css/flyPanels.css
@@ -1,21 +1,9 @@
-@-webkit-keyframes fadein {
-  0% {
-    opacity: 0; }
-  100% {
-    opacity: 0.8; } }
-
 @keyframes fadein {
   0% {
     opacity: 0; }
   100% {
     opacity: 0.8; } }
 
-@-webkit-keyframes fadeout {
-  0% {
-    opacity: 0.8; }
-  100% {
-    opacity: 0; } }
-
 @keyframes fadeout {
   0% {
     opacity: 0.8; }
@@ -54,9 +42,7 @@ html.flypanels-open, body.flypanels-open {
 .flypanels-container .offcanvas {
   margin-top: 50px;
   z-index: 100;
-  transition: -webkit-transform 0.5s;
   transition: transform 0.5s;
-  transition: transform 0.5s, -webkit-transform 0.5s;
   background-color: #c0392b;
   overflow: hidden;
   width: 260px; }
@@ -91,14 +77,10 @@ html.flypanels-open, body.flypanels-open {
     padding-top: 50px;
     -webkit-overflow-scrolling: touch;
     overflow-y: auto;
-    transition: -webkit-transform 0.5s;
     transition: transform 0.5s;
-    transition: transform 0.5s, -webkit-transform 0.5s;
-    -webkit-transform: translate3d(0, 0, 0);
-            transform: translate3d(0, 0, 0); }
+    transform: translate3d(0, 0, 0); }
     .flypanels-container .flypanels-main .flypanels-content .overlay {
-      -webkit-animation: fadein 0.5s;
-              animation: fadein 0.5s;
+      animation: fadein 0.5s;
       background-color: #fff;
       position: absolute;
       top: 0;
@@ -108,13 +90,11 @@ html.flypanels-open, body.flypanels-open {
       z-index: 100;
       opacity: 0.8; }
       .flypanels-container .flypanels-main .flypanels-content .overlay.closing {
-        -webkit-animation: fadeout 0.5s;
-                animation: fadeout 0.5s;
+        animation: fadeout 0.5s;
         opacity: 0; }
 
 .flypanels-container.openleft .flypanels-left {
-  -webkit-transform: translate3d(260px, 0, 0);
-          transform: translate3d(260px, 0, 0);
+  transform: translate3d(260px, 0, 0);
   overflow: hidden;
   width: 260px;
   position: relative; }
@@ -127,12 +107,10 @@ html.flypanels-open, body.flypanels-open {
     overflow: hidden; }
 
 .flypanels-container.openleft.closing .flypanels-left {
-  -webkit-transform: translate3d(0px, 0, 0);
-          transform: translate3d(0px, 0, 0); }
+  transform: translate3d(0px, 0, 0); }
 
 .flypanels-container.openright .flypanels-right {
-  -webkit-transform: translate3d(-260px, 0, 0);
-          transform: translate3d(-260px, 0, 0);
+  transform: translate3d(-260px, 0, 0);
   overflow: hidden;
   width: 260px;
   position: relative; }
@@ -143,8 +121,7 @@ html.flypanels-open, body.flypanels-open {
   overflow: hidden; }
 
 .flypanels-container.openright.closing .flypanels-right {
-  -webkit-transform: translate3d(260px, 0, 0);
-          transform: translate3d(260px, 0, 0); }
+  transform: translate3d(260px, 0, 0); }
 
 .flypanels-topbar a.flypanels-button-left.icon-hamburger {
   padding: 0;
@@ -153,7 +130,6 @@ html.flypanels-open, body.flypanels-open {
   width: 22px;
   height: 22px;
   position: relative;
-  -webkit-transform: rotate(0deg);
   transform: rotate(0deg);
   transition: 0.5s ease-in-out;
   cursor: pointer; }
@@ -164,7 +140,6 @@ html.flypanels-open, body.flypanels-open {
     width: 50%;
     background: #fff;
     opacity: 1;
-    -webkit-transform: rotate(0deg);
     transform: rotate(0deg);
     transition: 0.5s ease-in-out; }
     .flypanels-topbar a.flypanels-button-left.icon-hamburger span:nth-child(even) {
@@ -179,11 +154,9 @@ html.flypanels-open, body.flypanels-open {
       top: 14px; }
 
 .openleft .flypanels-topbar a.flypanels-button-left.icon-hamburger span:nth-child(1), .openleft .flypanels-topbar a.flypanels-button-left.icon-hamburger span:nth-child(6) {
-  -webkit-transform: rotate(45deg);
   transform: rotate(45deg); }
 
 .openleft .flypanels-topbar a.flypanels-button-left.icon-hamburger span:nth-child(2), .openleft .flypanels-topbar a.flypanels-button-left.icon-hamburger span:nth-child(5) {
-  -webkit-transform: rotate(-45deg);
   transform: rotate(-45deg); }
 
 .openleft .flypanels-topbar a.flypanels-button-left.icon-hamburger span:nth-child(1) {
@@ -217,7 +190,6 @@ html.flypanels-open, body.flypanels-open {
   width: 50%;
   background: #fff;
   opacity: 1;
-  -webkit-transform: rotate(0deg);
   transform: rotate(0deg);
   transition: 0.5s ease-in-out; }
   .openleft.closing .flypanels-topbar a.flypanels-button-left.icon-hamburger span:nth-child(even) {
@@ -233,8 +205,7 @@ html.flypanels-open, body.flypanels-open {
 
 .flypanels-topbar {
   transition: all 0.2s cubic-bezier(0.53, 0.54, 0.54, 0.54);
-  -webkit-transform: translate3d(0, 0, 0);
-          transform: translate3d(0, 0, 0);
+  transform: translate3d(0, 0, 0);
   width: 100%;
   height: 50px;
   background-color: #c0392b;
@@ -246,8 +217,7 @@ html.flypanels-open, body.flypanels-open {
     color: #fff;
     text-decoration: none;
     font-size: 24px; }
-    .flypanels-topbar a.flypanels-button-left,
-    .flypanels-topbar a.flypanels-button-right {
+    .flypanels-topbar a.flypanels-button-left, .flypanels-topbar a.flypanels-button-right {
       padding: 10px;
       padding-left: 20px;
       padding-right: 20px;
@@ -317,15 +287,15 @@ html.flypanels-open, body.flypanels-open {
     border-right: 1px solid #b8564c;
     width: 200px; }
   .panelcontent nav.flypanels-treemenu ul li.haschildren li.haschildren li div {
-    border-bottom-color: #a94c42; }
+    border-bottom-color: #a94c43; }
     .panelcontent nav.flypanels-treemenu ul li.haschildren li.haschildren li div a {
       background-color: #962d22; }
       .panelcontent nav.flypanels-treemenu ul li.haschildren li.haschildren li div a.link {
         border-right: none;
         width: 260px;
         padding-left: 40px; }
   .panelcontent nav.flypanels-treemenu ul li.haschildren li.haschildren li.haschildren a.link {
-    border-right: 1px solid #a94c42;
+    border-right: 1px solid #a94c43;
     width: 200px; }
   .panelcontent nav.flypanels-treemenu ul li.haschildren li.haschildren li.haschildren li div {
     border-bottom-color: #96443b; }
@@ -401,8 +371,7 @@ html.flypanels-open, body.flypanels-open {
   margin-top: 0;
   margin-bottom: 0;
   overflow: hidden;
-  -webkit-transform: translate3d(0, 0, 0);
-          transform: translate3d(0, 0, 0);
+  transform: translate3d(0, 0, 0);
   transition: 0.5s ease-in-out; }
 
 .panelcontent nav.flypanels-treemenu li.haschildren.expanded > ul {
@@ -546,16 +515,6 @@ nav.flypanels-iconmenu li a {
       bottom: 30px;
       top: 30px;
       -webkit-animation: spin2 4s infinite; }
-
-@-webkit-keyframes spin {
-  0% { }
-  100% {
-    -webkit-transform: rotate(360deg); } }
-
-@-webkit-keyframes spin2 {
-  0% { }
-  100% {
-    -webkit-transform: rotate(720deg); } }
   .flypanels-container .offcanvas .panelcontent[data-panel="search"] .resultinfo {
     color: #fff;
     font-size: 13px;

diff --git a/demo/index.html b/demo/index.html
@@ -6,8 +6,8 @@
 	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2, user-scalable=yes" />
 	<title>flyPanels - responsive off canvas panels</title>
 	<link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>
-	<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
-	<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
+	<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
+	<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
 
 	<link rel="stylesheet" href="css/flyPanels.css">
 	<link rel="stylesheet" href="css/demo.css">
@@ -136,7 +136,7 @@
 					</div>
 					<div class="row">
 						<div class="col-xs-12 col-md-8 col-md-offset-2">
-							<div class="version">v 2.0.3</div>
+							<div class="version">v 2.0.6</div>
 							<div class="github">
 								<a class="github-button" href="https://github.com/SubZane/flyPanels" data-style="mega" data-count-href="/SubZane/flyPanels/stargazers" data-count-api="/repos/SubZane/flyPanels#stargazers_count">Star</a>
 								<a class="github-button" href="https://github.com/SubZane/flyPanels" data-style="mega" data-count-href="/SubZane/flyPanels/network" data-count-api="/repos/SubZane/flyPanels#forks_count">Fork</a>
@@ -250,11 +250,9 @@ <h4><a href="http://www.andreasnorman.com/flypanels">flyPanels</a></h4>
 			</div>
 		</div>
 	</div>
-	<script src="//cdnjs.cloudflare.com/ajax/libs/fastclick/1.0.3/fastclick.min.js"></script>
 	<script src="js/flypanels.js"></script>
 	<script>
 	document.addEventListener("DOMContentLoaded", function(event) {
-		FastClick.attach(document.body);
 		flyPanels.init({
 				treeMenu: {
 					init: true

diff --git a/demo/js/flypanels.js b/demo/js/flypanels.js
@@ -1,6 +1,6 @@
-/*! flypanels - v2.0.5 - 2016-11-08
+/*! flypanels - v2.0.5 - 2017-04-20
 * https://github.com/SubZane/flyPanels
-* Copyright (c) 2016 Andreas Norman; Licensed MIT */
+* Copyright (c) 2017 Andreas Norman; Licensed MIT */
 (function (root, factory) {
 	if (typeof define === 'function' && define.amd) {
 		define([], factory(root));
@@ -106,6 +106,21 @@
 		hook('onInitTreeMenu');
 	};
 
+	var hasVerticalScroll = function () {
+		var scrollHeight = document.body.scrollHeight;
+		var clientHeight = document.documentElement.clientHeight;
+		var hasVerticalScrollbar = scrollHeight > clientHeight;
+		return hasVerticalScrollbar;
+	};
+
+	var isMobileBrowser = function () {
+		if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
+			return true;
+		} else {
+			return false;
+		}
+	};
+
 	var close = function () {
 		closeLeft();
 		closeRight();
@@ -115,22 +130,30 @@
 	var onCloseLeft = function () {
 		document.querySelector('body').classList.remove('flypanels-open');
 		document.querySelector('html').classList.remove('flypanels-open');
+		document.querySelector('.flypanels-content').style.marginRight = '';
 		hook('onCloseLeft');
 	};
 
 	var onCloseRight = function () {
 		document.querySelector('body').classList.remove('flypanels-open');
 		document.querySelector('html').classList.remove('flypanels-open');
+		document.querySelector('.flypanels-content').style.marginRight = '';
 		hook('onCloseRight');
 	};
 
 	var onOpenLeft = function () {
+		if (hasVerticalScroll() === true && isMobileBrowser() === false) {
+			document.querySelector('.flypanels-content').style.marginRight = scrollbarWidth + 'px';
+		}
 		document.querySelector('body').classList.add('flypanels-open');
 		document.querySelector('html').classList.add('flypanels-open');
 		hook('onOpenLeft');
 	};
 
 	var onOpenRight = function () {
+		if (hasVerticalScroll() === true && isMobileBrowser() === false) {
+			document.querySelector('.flypanels-content').style.marginRight = scrollbarWidth + 'px';
+		}
 		document.querySelector('body').classList.add('flypanels-open');
 		document.querySelector('html').classList.add('flypanels-open');
 		hook('onOpenRight');