feat: click feedback

ganxiyun · Mar 2, 2018 · cc6f11b · cc6f11b
1 parent 4f4568e
commit cc6f11b
Show file tree

Hide file tree

Showing 11 changed files with 87 additions and 31 deletions.
diff --git a/_includes/scripts/all.html b/_includes/scripts/all.html
@@ -80,6 +80,7 @@
       var $articleTags = $('.js-article-tag');
       var $tagShowAll = $('.js-tag-show-all');
       var $result = $('.js-result');
+      var $lastFocusButton = null;
       function renderHeading(year) {
         return '<h2 class="year">' + year + '</h2>'
       }
@@ -88,7 +89,9 @@
       }
       function render(data) {
         var html = '', i, cur, date;
-        Object.keys(data).forEach(function(year) {
+        Object.keys(data).sort(function(a, b) {
+          return b.localeCompare(a);
+        }).forEach(function(year) {
           html = html.concat('<section>' + renderHeading(year) + '<ul>');
           for (i = 0; i < data[year].length; i++) {
             cur = data[year][i];
@@ -106,7 +109,10 @@
           _data = searchByTag(data, tag);
         }
         $result.html(render(_data));
-        target && target.data && window.history.replaceState(null, '', window.location.href.split('?')[0] + '?tag=' + target.data('encode'));
+        if (target && target.data) {
+          buttonFoucs(target);
+          window.history.replaceState(null, '', window.location.href.split('?')[0] + '?tag=' + target.data('encode'));
+        }
       }
 
       function searchButtonsByTag(rawTag) {
@@ -120,11 +126,19 @@
         return _buttons;
       }
 
+      function buttonFoucs(target) {
+        if (target) {
+          target.addClass('focus');
+          $lastFocusButton && $lastFocusButton.removeClass('focus');
+          $lastFocusButton = target;
+        }
+      }
+
       $articleTags.removeClass('inactive');
       var query = queryString(), rawTag;
       query.tag === undefined || (rawTag = query.tag);
       tagSelect(decodeUrl(rawTag));
-      searchButtonsByTag(rawTag).focus();
+      buttonFoucs(searchButtonsByTag(rawTag));
 
       $tags.on('click', 'button', function() {
         tagSelect($(this).children('span').text(), $(this));

diff --git a/_includes/scripts/common.html b/_includes/scripts/common.html
@@ -0,0 +1,7 @@
+<script>
+  if(window.hasEvent('touchstart')) {
+    var domPageStage = document.getElementsByClassName('js-page-stage')[0];
+    domPageStage && domPageStage.classList && domPageStage.classList.add('is-touch');
+    document.addEventListener("touchstart", function(){}, false);
+  }
+</script>
diff --git a/_includes/scripts/utils.html b/_includes/scripts/utils.html
@@ -166,5 +166,9 @@
       }
       return result;
     };
+  };
+
+  window.hasEvent = function(event) {
+    return 'on'.concat(event) in window.document;
   }
 </script>
diff --git a/_layouts/base.html b/_layouts/base.html
@@ -17,6 +17,7 @@
       </div>
     </div>
     {%- include components/footer.html -%}
+    {%- include scripts/common.html -%}
     {%- if page.layout == "home" -%}
       {%- include scripts/home.html -%}
     {%- elsif page.layout == "page" -%}

diff --git a/_sass/common/_reset.scss b/_sass/common/_reset.scss
@@ -1,3 +1,9 @@
+*,
+::before,
+::after {
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+
 html {
   height: 100%;
   font-size: map-get($base, font-size-root);
@@ -117,7 +123,7 @@ a {
     text-decoration: underline;
     color: $main-color-1;
   }
-  @include transition(all map-get($animation, duration) map-get($animation, timing-function));
+  @include link-animation();
 }
 
 pre, code {

diff --git a/_sass/common/_variables.scss b/_sass/common/_variables.scss
@@ -1,5 +1,5 @@
 $base: (
-  font-family:            (-apple-system, BlinkMacSystemFont, Helvetica Neue, PingFang SC, Microsoft YaHei, Source Han Sans SC, Noto Sans CJK SC, WenQuanYi Micro Hei, sans-serif),
+  font-family:            (-apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif),
   code-font-family:       (Menlo, Monaco, Consolas, Andale Mono, lucida console, Courier New, monospace),
 
   font-size-root:         16px,
@@ -56,6 +56,6 @@ $responsive: (
 );
 
 $animation: (
-  duration:               .8s,
+  duration:               .6s,
   timing-function:        ease
 );
diff --git a/_sass/common/classes/_link.scss b/_sass/common/classes/_link.scss
@@ -1,3 +1,10 @@
+@mixin link-animation {
+  @include transition(all map-get($animation, duration) map-get($animation, timing-function));
+  .is-touch & {
+    @include transition(none);
+  }
+}
+
 @mixin link-normal {
   &,
   &:visited {
@@ -8,24 +15,20 @@
 @mixin link-emphasize {
   &.hover,
   &.active,
-  &.focus,
   &:hover,
-  &:active,
-  &:focus {
+  &:active {
     @content;
   }
 }
 
-@mixin link-emphasize-no-focus {
-  &.hover,
-  &.active,
-  &:hover,
-  &:active {
+@mixin link-focus {
+  &.focus,
+  &:focus {
     @content;
   }
 }
 
-@mixin link-colors($nc, $nbc, $ec, $ebc) {
+@mixin link-colors($nc, $nbc, $ec, $ebc, $fc: null, $fbc: null) {
   @include link-normal {
     color: $nc;
     background-color: $nbc;
@@ -40,9 +43,18 @@
       fill: $ec;
     }
   }
+  @if $fc and $fbc {
+    @include link-focus {
+      color: $fc;
+      background-color: $fbc;
+      svg path {
+        fill: $fc;
+      }
+    }
+  }
 }
 
-@mixin link-text-colors($nc, $ec) {
+@mixin link-text-colors($nc, $ec, $fc: null) {
   @include link-normal {
     color: $nc;
     svg path {
@@ -55,13 +67,26 @@
       fill: $ec;
     }
   }
+  @if $fc {
+    @include link-focus {
+      color: $fc;
+      svg path {
+        fill: $fc;
+      }
+    }
+  }
 }
 
-@mixin link-background-colors($nbc, $ebc) {
+@mixin link-background-colors($nbc, $ebc, $fbc: null) {
   @include link-normal {
     background-color: $nbc;
   }
   @include link-emphasize {
     background-color: $ebc;
   }
+  @if $fbc {
+    @include link-focus {
+      background-color: $fbc;
+    }
+  }
 }
diff --git a/_sass/common/components/_button.scss b/_sass/common/components/_button.scss
@@ -1,22 +1,25 @@
 %button {
   font-weight: map-get($base, font-weight-bold);
   line-height: 1;
-  text-decoration: none;
   box-sizing: border-box;
+  display: block;
   cursor: pointer;
-  @include link-colors( $text-color-3, $main-color-3, $text-color-1, $main-color-1);
-  @include link-normal {
+  @include link-normal() {
+    text-decoration: none;
+  }
+  @include link-emphasize () {
     text-decoration: none;
   }
-  @include link-emphasize {
+  @include link-focus() {
     text-decoration: none;
   }
-  @include transition(all map-get($animation, duration) map-get($animation, timing-function));
+  @include link-colors( $text-color-3, $main-color-3, $text-color-1, $main-color-1);
+  @include link-animation();
   svg {
     width: 1rem;
     height: 1rem;
     path {
-      @include transition(fill map-get($animation, duration) map-get($animation, timing-function));
+      @include link-animation();
     }
   }
   &.inactive {
@@ -61,5 +64,4 @@
 .pill-button {
   @extend %button;
   @include round-rect(2rem, .4rem .6rem);
-  display: block;
 }
diff --git a/_sass/components/_article.content.scss b/_sass/components/_article.content.scss
@@ -63,9 +63,6 @@
     @include split-line();
     margin-top: map-get($base, vertical-space-large) * 2;
   }
-  .mjx-chtml {
-    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-  }
   code {
     @include round-rect(default, .2rem .5rem);
     background-color: $text-background-color;
@@ -82,7 +79,6 @@
       background-color: transparent;
       word-wrap: normal;
       &.language-mermaid, &.language-chart {
-        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
         display: none;
         &[data-processed] {
           display: block;

diff --git a/_sass/components/_tags.scss b/_sass/components/_tags.scss
@@ -2,9 +2,10 @@
   &>ul {
     @include horizontal-space();
     &>li>button {
-      @include link-colors ( $text-color-1, $main-color-1, $text-color-2, $main-color-2);
+      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);
       &.all {
-        @include link-colors ( $text-color-3, $main-color-3, $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);
       }
       &>.tag-count {
         font-size: map-get($base, font-size-tiny);

diff --git a/_sass/components/_toc.scss b/_sass/components/_toc.scss
@@ -10,7 +10,7 @@
     line-height: map-get($base, line-height-small);
     font-weight: map-get($base, font-weight);
     @include round-rect(default, .2rem 1rem);
-    @include link-emphasize-no-focus {
+    @include link-emphasize {
       background-color: $text-background-color;
     }
   }