Merge pull request #475 from kakawait/swipe

Fix swipe and transform

layouts/partials/head.html

@@ -42,7 +42,8 @@
 
     <!--EXTERNAL STYLES-->
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.css" integrity="sha512-H9jrZiiopUdsLpg94A333EfumgUBpO9MdbxStdeITo+KEIMaNfHNvwyjjDJb+ERPaRS6DpyRlKbvPUasNItRyw==" crossorigin="anonymous" referrerpolicy="no-referrer" />    {{ if .Site.Params.comment.gitalk.enable }}
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.css" integrity="sha512-H9jrZiiopUdsLpg94A333EfumgUBpO9MdbxStdeITo+KEIMaNfHNvwyjjDJb+ERPaRS6DpyRlKbvPUasNItRyw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
+    {{ if .Site.Params.comment.gitalk.enable }}
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/gitalk/1.7.2/gitalk.css" integrity="sha512-MLcK/YRapzET1qTBXrOiZE6bGBgtATMo2bIyalVJ8EKDEGNoeA3SPQkvWAR0zNS650YG13ocXBMeioDuZcSRuQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
     {{ end }}
     <!--EXTERNAL STYLES END-->

layouts/partials/script.html

@@ -1,5 +1,5 @@
 <!--EXTERNAL SCRIPTS-->
-<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.slim.min.js" integrity="sha512-6ORWJX/LrnSjBzwefdNUyLCMTIsGoNP6NftMy2UAm1JBm6PRZCO1d7OHBStWpVFZLO+RerTvqX/Z9mBFfCJZ4A==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
 {{ if eq .Site.Params.syntaxHighlighter "highlight.js" }}
   <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.1.0/highlight.min.js" integrity="sha512-z+/WWfyD5tccCukM4VvONpEtLmbAm5LDu7eKiyMQJ9m7OfPEDL7gENyDRL3Yfe8XAuGsS2fS4xSMnl6d30kqGQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
 {{ else if eq .Site.Params.syntaxHighlighter "prism.js" }}

src/js/sidebar.js

@@ -48,6 +48,37 @@
           self.closeSidebar();
         }
       });
+
+      var xDown = null;
+      var yDown = null;
+
+      $(document).on('touchstart', function(e) {
+        if (self.$sidebar.hasClass('pushed')) {
+          var firstTouch = (e.touches || e.originalEvent.touches)[0];
+          xDown = firstTouch.clientX;
+          yDown = firstTouch.clientY;
+        }
+      }).on('touchmove', function(e) {
+        if ((!xDown || !yDown) || !self.$sidebar.hasClass('pushed')) {
+          return;
+        }
+
+        var xUp = e.touches[0].clientX;
+        var yUp = e.touches[0].clientY;
+
+        var xDiff = xDown - xUp;
+        var yDiff = yDown - yUp;
+
+        if (Math.abs(xDiff) > Math.abs(yDiff)) {
+            if (xDiff > 0) {
+              self.closeSidebar();
+            }
+        }
+
+        xDown = null;
+        yDown = null;
+      });
+
       // Detect resize of the windows
       $(window).resize(function() {
         // Check if the window is larger than the minimal medium screen value
@@ -141,6 +172,7 @@
 
       // Check if there is enough place for translating `#header .header-title` and `#header .right-picture`
       // regarding the size of `#header .header-title-link`
+      // TODO better to use text-overflow on $headerElements.title
       if (this.$header.width() - this.$sidebar.width() - this.$headerElements.titleLink.width() < 130) {
         blog = blog.not(this.$headerElements.title).not(this.$headerElements.rightPicture);
       }

src/scss/layouts/_blog.scss

@@ -4,4 +4,5 @@
     left:     0;
     width:    100%;
     height:   100%;
-}
+    overflow-x: hidden;
+}

src/scss/utils/_variables.scss

@@ -98,6 +98,7 @@ $screen-max: (
 $screen: map-merge($screen-min, $screen-max);
 // Shortcuts for medias
 $xsmall-and-down: "only screen and (max-width : #{map-get($screen, xs-max)})" !default;
+$xsmall-and-up: "only screen and (min-width : #{map-get($screen, xs-min)})" !default;
 $small-and-down:  "only screen and (max-width : #{map-get($screen, sm-max)})" !default;
 $small-only:      "only screen and (min-width : #{map-get($screen, sm-min)}) and (max-width : #{map-get($screen, sm-max)})" !default;
 $small-and-up:    "only screen and (min-width : #{map-get($screen, sm-min)})" !default;

src/scss/utils/mixins/_header.scss

@@ -5,10 +5,10 @@
     &.pushed {
         @include prefix(transform, translate3d(#{map-get($sidebar, md-screen-width)}, 0, 0), 'webkit' 'moz');
     }
-    @media #{$small-and-up} {
+    @media #{$xsmall-and-up} {
         .header-title {
             &.pushed {
-                @include prefix(transform, translate3d(-#{math.div(map-get($sidebar, lg-screen-width), 2) - 1}, 0, 0), 'webkit' 'moz');
+                @include prefix(transform, translate3d(-#{math.div(map-get($sidebar, md-screen-width), 2) - 1}, 0, 0), 'webkit' 'moz');
             }
         }
         .header-right-picture {
@@ -24,7 +24,7 @@
     &.pushed {
         @include prefix(transform, translate3d(#{map-get($sidebar, lg-screen-width)}, 0, 0), 'webkit' 'moz');
     }
-    @media #{$medium-and-up} {
+    @media #{$xsmall-and-up} {
         .header-title {
             &.pushed {
                 @include prefix(transform, translate3d(-#{math.div(map-get($sidebar, lg-screen-width), 2) - 1}, 0, 0), 'webkit' 'moz');

src/scss/utils/mixins/_post-header-cover.scss

@@ -29,22 +29,22 @@
 @mixin post-header-cover-pushed-md {
     &.pushed {
         @include prefix(transform, translate3d(#{map-get($sidebar, md-screen-width)}, 0, 0), 'webkit' 'moz');
-        width: calc(100% - #{map-get($sidebar, md-screen-width)});
+        /*background-position-x: calc(-#{map-get($sidebar, md-screen-width)});*/
     }
 }
 
 /// Mixin helper to pushed post header cover from large sidebar size
 @mixin post-header-cover-pushed-lg {
     &.pushed {
         @include prefix(transform, translate3d(#{map-get($sidebar, lg-screen-width)}, 0, 0), 'webkit' 'moz');
-        width: calc(100% - #{map-get($sidebar, lg-screen-width)});
+        /*background-position-x: calc(-#{map-get($sidebar, lg-screen-width)});*/
     }
 }
 
 /// Mixin helper to pushed post header cover from extra large sidebar size
 @mixin post-header-cover-pushed-xlg {
     &.pushed {
         @include prefix(transform, translate3d(#{map-get($sidebar, xlg-screen-width)}, 0, 0), 'webkit' 'moz');
-        width: calc(100% - #{map-get($sidebar, xlg-screen-width)});
+        /*background-position-x: calc(-#{map-get($sidebar, xlg-screen-width)});*/
     }
 }

tasks/config/cssmin.js

@@ -1,4 +1,4 @@
-const { nanoid } = require('nanoid');
+const {nanoid} = require('nanoid');
 
 module.exports = function(grunt) {
   grunt.config.set('cssmin', {

tasks/config/uglify.js

@@ -1,4 +1,4 @@
-const { nanoid } = require('nanoid');
+const {nanoid} = require('nanoid');
 
 module.exports = function(grunt) {
   var website = {};