feat: opti link feedback on touch device

cdphp · Mar 3, 2018 · 9a58727 · 9a58727
1 parent 7e75ec4
commit 9a58727
Show file tree

Hide file tree

Showing 15 changed files with 119 additions and 68 deletions.
diff --git a/_includes/scripts/all.html b/_includes/scripts/all.html
@@ -120,11 +120,11 @@
         } else {
           _data = searchByTag(tag);
         }
-        $result.html(render(_data));
-        if (target && target.data) {
+        if (target) {
           buttonFoucs(target);
           window.history.replaceState(null, '', window.location.href.split('?')[0] + '?tag=' + target.data('encode'));
         }
+        $result.html(render(_data));
       }
 
       function searchButtonsByTag(rawTag) {
@@ -141,7 +141,8 @@
       function buttonFoucs(target) {
         if (target) {
           target.addClass('focus');
-          $lastFocusButton && $lastFocusButton.removeClass('focus');
+          target.focus();
+          $lastFocusButton && !$lastFocusButton.is(target) && $lastFocusButton.removeClass('focus');
           $lastFocusButton = target;
         }
       }
@@ -155,7 +156,6 @@
       $tags.on('click', 'button', function() {
         tagSelect($(this).children('span').text(), $(this));
       });
-
     });
   })();
 </script>
diff --git a/_includes/scripts/common.html b/_includes/scripts/common.html
@@ -1,7 +1,14 @@
 <script>
-  if(window.hasEvent('touchstart')) {
+  (function () {
     var domPageStage = document.getElementsByClassName('js-page-stage')[0];
-    domPageStage && domPageStage.classList && domPageStage.classList.add('is-touch');
-    document.addEventListener("touchstart", function(){}, false);
-  }
+    function addClass(dom, classname) {
+      dom.setAttribute('class', dom.getAttribute('class') + ' ' + classname);
+    }
+    if(window.hasEvent('touchstart')) {
+      addClass(domPageStage, 'is-touch');
+      document.addEventListener("touchstart", function(){}, false);
+    } else {
+      addClass(domPageStage, 'not-touch');
+    }
+  })();
 </script>
diff --git a/_sass/common/_reset.scss b/_sass/common/_reset.scss
@@ -115,14 +115,18 @@ h6 {
 
 a {
   font-weight: map-get($base, font-weight-bold);
-  text-decoration: none;
   @include link-normal {
-    color: $main-color-1;
+    text-decoration: none;
   }
-  @include link-emphasize {
+  .not-touch & {
+    @include link-hover {
+      text-decoration: underline;
+    }
+  }
+  @include link-active {
     text-decoration: underline;
-    color: $main-color-1;
   }
+  @include link-text-colors($main-color-1, $main-color-1, $main-color-1);
   @include link-animation();
 }
 

diff --git a/_sass/common/classes/_link.scss b/_sass/common/classes/_link.scss
@@ -7,44 +7,68 @@
 
 @mixin link-normal {
   &,
+  &:link,
   &:visited {
     @content;
   }
 }
 
-@mixin link-emphasize {
+@mixin link-hover {
   &.hover,
+  &:hover {
+    @content;
+  }
+}
+
+@mixin link-active {
   &.active,
-  &:hover,
   &:active {
     @content;
   }
 }
 
+@mixin link-emphasize {
+  @include link-hover() {
+    @content;
+  }
+  @include link-active() {
+    @content;
+  }
+}
+
 @mixin link-focus {
   &.focus,
   &:focus {
     @content;
   }
 }
 
-@mixin link-colors($nc, $nbc, $ec, $ebc, $fc: null, $fbc: null) {
-  @include link-normal {
+@mixin link-colors($nc, $nbc, $hc, $hbc, $ac, $abc, $fc: null, $fbc: null) {
+  @include link-normal() {
     color: $nc;
     background-color: $nbc;
     svg path {
       fill: $nc;
     }
   }
-  @include link-emphasize {
-    color: $ec;
-    background-color: $ebc;
+  .not-touch & {
+    @include link-hover() {
+      color: $hc;
+      background-color: $hbc;
+      svg path {
+        fill: $hc;
+      }
+    }
+  }
+  @include link-active() {
+    color: $ac;
+    background-color: $abc;
     svg path {
-      fill: $ec;
+      fill: $ac;
     }
   }
   @if $fc and $fbc {
-    @include link-focus {
+    @include link-focus() {
       color: $fc;
       background-color: $fbc;
       svg path {
@@ -54,21 +78,29 @@
   }
 }
 
-@mixin link-text-colors($nc, $ec, $fc: null) {
-  @include link-normal {
+@mixin link-text-colors($nc, $hc, $ac, $fc: null) {
+  @include link-normal() {
     color: $nc;
     svg path {
       fill: $nc;
     }
   }
-  @include link-emphasize {
-    color: $ec;
+  .not-touch & {
+    @include link-hover() {
+      color: $hc;
+      svg path {
+        fill: $hc;
+      }
+    }
+  }
+  @include link-active() {
+    color: $ac;
     svg path {
-      fill: $ec;
+      fill: $ac;
     }
   }
   @if $fc {
-    @include link-focus {
+    @include link-focus() {
       color: $fc;
       svg path {
         fill: $fc;
@@ -77,15 +109,20 @@
   }
 }
 
-@mixin link-background-colors($nbc, $ebc, $fbc: null) {
-  @include link-normal {
+@mixin link-background-colors($nbc, $hbc, $abc, $fbc: null) {
+  @include link-normal() {
     background-color: $nbc;
   }
-  @include link-emphasize {
-    background-color: $ebc;
+  .not-touch & {
+    @include link-hover() {
+      background-color: $hbc;
+    }
+  }
+  @include link-active() {
+    background-color: $abc;
   }
   @if $fbc {
-    @include link-focus {
+    @include link-focus() {
       background-color: $fbc;
     }
   }

diff --git a/_sass/common/components/_button.scss b/_sass/common/components/_button.scss
@@ -7,13 +7,13 @@
   @include link-normal() {
     text-decoration: none;
   }
-  @include link-emphasize () {
+  @include link-emphasize() {
     text-decoration: none;
   }
   @include link-focus() {
     text-decoration: none;
   }
-  @include link-colors( $text-color-3, $main-color-3, $text-color-1, $main-color-1);
+  @include link-colors($text-color-3, $main-color-3, $text-color-1, $main-color-1, $text-color-1, $main-color-1);
   @include link-animation();
   svg {
     width: 1rem;

diff --git a/_sass/components/_article.content.scss b/_sass/components/_article.content.scss
@@ -10,7 +10,9 @@
     position: relative;
     margin-top: map-get($base, vertical-space-large) + .8rem;
     & > .anchor {
-      @include link-text-colors($border-color, $main-color-1);
+      @include link-normal {
+        color: $border-color;
+      }
       margin-left: .2rem;
       visibility: hidden;
       text-decoration: none;

diff --git a/_sass/components/_follow-me.scss b/_sass/components/_follow-me.scss
@@ -13,30 +13,30 @@
     &:not(:last-child) {
       margin-right: .4rem;
     }
-    @include link-background-colors ( $main-color-1, lighten($main-color-1, 5%))
+    background-color: $main-color-1;
   }
   .mail {
-    @include link-background-colors ( $mail-color, lighten($mail-color, 5%))
+    background-color: $mail-color;
   }
   .weibo {
-    @include link-background-colors ( $weibo-color, lighten($weibo-color, 5%))
+    background-color: $weibo-color;
   }
   .facebook {
-    @include link-background-colors ( $facebook-color, lighten($facebook-color, 5%))
+    background-color: $facebook-color;
   }
   .twitter {
-    @include link-background-colors ( $twitter-color, lighten($twitter-color, 5%))
+    background-color: $twitter-color;
   }
   .googlepluse {
-    @include link-background-colors ( $google-plus-color, lighten($google-plus-color, 5%))
+    background-color: $google-plus-color;
   }
   .github {
-    @include link-background-colors ( $github-color, lighten($github-color, 20%))
+    background-color: $github-color;
   }
   .linkedin {
-    @include link-background-colors ( $linkedin-color, lighten($linkedin-color, 5%))
+    background-color: $linkedin-color;
   }
   .douban {
-    @include link-background-colors ( $douban-color, lighten($douban-color, 5%))
+    background-color: $douban-color;
   }
 }
diff --git a/_sass/components/_footer.scss b/_sass/components/_footer.scss
@@ -12,7 +12,7 @@
     color: $text-color-3;
   }
   a {
-    @include link-text-colors ( $text-color-3, $main-color-1);
+    @include link-text-colors ( $text-color-3, $main-color-1, $main-color-1);
   }
   .site-info {
     text-align: center;

diff --git a/_sass/components/_header.scss b/_sass/components/_header.scss
@@ -2,7 +2,7 @@
   background-color: $main-color-3;
   a {
     font-weight: map-get($base, font-weight);
-    @include link-text-colors( $text-color-3, $main-color-1);
+    @include link-text-colors( $text-color-3, $main-color-1, $main-color-1);
   }
   &>.main>.site-logo {
     float: left;

diff --git a/_sass/components/_tags.scss b/_sass/components/_tags.scss
@@ -1,13 +1,13 @@
 .m-tags {
-  &>ul {
+  & > ul {
     @include horizontal-space();
-    &>li>button {
+    & > li > button {
       box-sizing: border-box;
-      @include link-colors ( $text-color-1, $main-color-1, $text-color-2, $main-color-2, $text-color-2, $main-color-2);
+      @include link-colors ($text-color-1, $main-color-1, $text-color-2, $main-color-2, $text-color-2, $main-color-2, $text-color-2, $main-color-2);
       &.all {
-        @include link-colors ( $text-color-3, $main-color-3, $text-color-2, $main-color-2, $text-color-2, $main-color-2);
+        @include link-colors ($text-color-3, $main-color-3, $text-color-2, $main-color-2, $text-color-2, $main-color-2, $text-color-2, $main-color-2);
       }
-      &>.tag-count {
+      & > .tag-count {
         font-size: map-get($base, font-size-tiny);
         display: inline-block;
         line-height: 1;

diff --git a/_sass/components/_toc.scss b/_sass/components/_toc.scss
@@ -12,18 +12,26 @@
   a {
     display: inline-block;
     font-size: map-get($base, font-size-sub);
-    text-decoration: none;
+    @include link-normal() {
+      text-decoration: none;
+    }
+    @include link-emphasize() {
+      text-decoration: none;
+    }
+    @include link-focus() {
+      text-decoration: none;
+    }
+    @include link-background-colors(transparent, $text-background-color, $text-background-color);
     line-height: map-get($base, line-height-small);
     font-weight: map-get($base, font-weight);
     @include round-rect(default, .2rem 1rem);
     @include link-emphasize {
-      background-color: $text-background-color;
     }
   }
   .toc-h1,
   .toc-h2 {
     padding: 0;
-    &>a {
+    & > a {
       color: $text-color-d;
       font-weight: map-get($base, font-weight-bold);
     }

diff --git a/_sass/layout/_all.scss b/_sass/layout/_all.scss
@@ -21,12 +21,7 @@
         }
         .link {
           font-size: 1rem;
-          @include link-normal {
-            color: $text-color-d;
-          }
-          @include link-emphasize {
-            color: $main-color-1;
-          }
+          @include link-text-colors($text-color-d, $main-color-1, $main-color-1);
         }
       }
     }

diff --git a/_sass/layout/_home.scss b/_sass/layout/_home.scss
@@ -3,7 +3,7 @@
     &>h1 {
       font-size: map-get($base, font-size-header-list);
       &>a {
-        @include link-text-colors( $text-color-d, $main-color-1);
+        @include link-text-colors( $text-color-d, $main-color-1, $main-color-1);
       }
     }
     &>a {

diff --git a/_sass/layout/_post.scss b/_sass/layout/_post.scss
@@ -38,7 +38,7 @@
       }
       & > a{
         display: block;
-        @include link-text-colors($text-color, $main-color-1);
+        @include link-text-colors($text-color, $main-color-1, $main-color-1);
       }
     }
     & > .article-previous {
-Original file line number
+Diff line change
@@ Expand Up / @@ -3,7 +3,7 @@ @@
         &>h1 {
           font-size: map-get($base, font-size-header-list);
           &>a {
-            @include link-text-colors( $text-color-d, $main-color-1);
+            @include link-text-colors( $text-color-d, $main-color-1, $main-color-1);
           }
         }
         &>a {
@@ Expand Down @@