feat: Add button of copy codeblock && perfect animation

.eslintrc

@@ -14,6 +14,8 @@
     "debounce": false,
     "throttle": false,
     "isMobile": false,
+    "codeToKeyCode": false,
+    "popAlert": false,
     "instantsearch": false,
     "GLOBAL_CONFIG": false
   },

languages/en.yml

@@ -78,3 +78,10 @@ footer:
   theme: Theme
   uv: Visitors
   pv: Views
+
+notification:
+  alert:
+    success: Success Tips
+    info: Informational Notes
+    warning: Warning
+    error: Error

languages/zh-CN.yml

@@ -78,3 +78,10 @@ footer:
   theme: 主题
   uv: 访问人数
   pv: 浏览总量
+
+notification:
+  alert:
+    success: 成功提示
+    info: 通知消息
+    warning: 警告提示
+    error: 错误提示

layout/_common/config.pug

@@ -18,7 +18,7 @@
 
 script.
   let CONFIG = {
-    root: '!{config.root}',
+    root: '!{ config.root }',
     back2top_animation: !{ theme.back2top.icon.animation },
     sidebar_offsetTop: '!{ theme.sidebar.offsetTop }',
     algolia: !{algolia},

layout/_common/layout.pug

@@ -14,6 +14,6 @@ html(lang=config.language)
     if theme.algolia_search.enable
         include ../_components/search/algolia.pug
     
+    include ../_scripts/common.pug
     if is_post()
       include ../_scripts/post.pug
-    include ../_scripts/common.pug

layout/_scripts/common.pug

 script(src=`${url_for(theme.js)}/utils.js?v=${stun_env("version")}`)
+script(src=`${url_for(theme.js)}/copy.js?v=${stun_env("version")}`)
 script(src=`${url_for(theme.js)}/scroll.js?v=${stun_env("version")}`)
 script(src=`${url_for(theme.js)}/header.js?v=${stun_env("version")}`)
 

source/css/_common/index.styl

@@ -4,4 +4,5 @@
 @import './post.styl'
 @import './page.styl'
 @import './footer.styl'
+@import './notification.styl'
 @import './responsive.styl'

source/css/_common/notification.styl

+.stun-message
+  display: flex
+  position: fixed
+  top: 1rem
+  left: 0
+  z-index: $z-index-5
+  width: 100%
+
+.stun-alert
+  position: relative
+  margin: auto
+  border-radius: 3px
+  padding: 8px 12px
+  line-height: 1rem
+  color: $black-light
+  background-color: #fff
+  box-shadow: 0 4px 12px rgba(0, 0, 0, .15)
+
+  &-success
+    color: $alert-success
+
+    & ~ i
+      color: $alert-success
+
+  &-info
+    color: $alert-info
+
+    & ~ i
+      color: $alert-info
+
+  &-warning
+    color: $alert-warning
+
+    & ~ i
+      color: $alert-warning
+
+  &-error
+    color: $alert-error
+
+    & ~ i
+      color: $alert-error
+
+  &-icon
+    font-size: 20px
+
+  &-description
+    margin-left: .5rem
+    font-size: 18px

source/css/_components/copy.styl

+.copy-button
+  position: absolute
+  top: 0
+  right: 0
+  width: 1.5rem
+  height: 1.5rem
+  line-height: .5rem
+  // Eliminate the problem of blank nodes occupying size
+  // due to the "inline-block" attribute.
+  font-size: 0
+  text-align: center
+  color: $black-light
+  cursor: pointer
+
+  .fa
+    font-size: 14px

source/css/_components/index.styl

@@ -5,6 +5,7 @@
 @import './comments.styl'
 @import './back2top.styl'
 @import './sticky-top.styl'
+@import './copy.styl'
 
 @import './analytics'
 @import './search'

source/css/_highlight/highlight.styl

@@ -7,12 +7,15 @@ $wordWrap = hexo-config('code_word_wrap')
 addLanguagesType()
   for lang in languages
     .code-highlight
-      figure.highlight
-        &{'.' + lang}
-          table
+      figure.highlight{'.' + lang}
+        & > figcaption
+          padding: .1rem 0
+
+          span
             &:before
               content: lang
-              color: $highlight-header-color
+              margin: 0 1rem 0 .5rem
+              color: alpha($highlight-header-color, .5)
 
 addLanguagesType()
 
@@ -51,7 +54,7 @@ $code-block
     pre
       margin: 0
       border: none
-      padding: 0
+      padding: .1rem 0
 
     td
       border: none
@@ -65,12 +68,11 @@ $code-block
 
       span
         float: left
-        margin-left: 2.5rem
         color: $highlight-header-color
 
       a
         float: right
-        margin-right: .5rem
+        margin-right: 2rem
         border-bottom: 0
 
     // Code block body
@@ -81,16 +83,6 @@ $code-block
       border: none
       width: 100%
 
-      // Show code type
-      &::before
-        display: block
-        position: absolute
-        left: 0
-        padding-left: 1rem
-        color: $code-block-header-text-color
-        background-color: $code-block-side-bg-color
-        transform: translate(0, -100%)
-
       // Code line numbers
       .gutter
         if ($wordWrap)

source/css/_highlight/theme.styl

@@ -6,7 +6,7 @@ if ($highlight_theme == 'light')
   $highlight-gutter-color    = $highlight-color
   $highlight-gutter-bg-color = $highlight-background
   $highlight-header-color    = $highlight-color
-  $highlight-header-bg-color = $highlight-gutter-bg-color
+  $highlight-header-bg-color = #eaf0f5
   $highlight-code-type-color = $highlight-header-color
   $highlight-comment         = #90a4ae
   $highlight-red             = #E53935

source/css/var.styl

@@ -133,6 +133,12 @@ $reward-btn-hover-color          = #e45c5c
 $reward-alipay-color             = #1caceb
 $reward-wechat-color             = #3cb034
 
+// Notification
+$alert-success                   = #52c41a
+$alert-info                      = #1890ff
+$alert-warning                   = #faad14
+$alert-error                     = #f5222d
+
 // -------------------------------------------
 // Font, line-height
 // -------------------------------------------

source/js/copy.js

+$(document).ready(function() {
+  var $copyIcon = $(
+    `<div class="copy-button">
+      <i class="fa fa-clipboard"></i>
+    </div>`);
+  $('figure.highlight').append($copyIcon);
+
+  $('.copy-button i').on('click', function() {
+    if (copy(this)) {
+      popAlert('success', '复制成功', 4);
+    } else {
+      popAlert('error', '复制失败');
+    }
+  });
+
+  function copy(btn) {
+    try {
+      var $codeWrapper =
+        $(btn).parent('.copy-button').siblings('table');
+      var selection = window.getSelection();
+      var range = document.createRange();
+      
+      // Select text by the content of node.
+      range.selectNodeContents($codeWrapper[0]);
+      selection.removeAllRanges();
+      selection.addRange(range);
+        
+      var text = selection.toString();
+      var input = document.createElement('input');
+
+      // Create a temporary input to make the
+      // execCommand command take effect.
+      input.style.display = 'none';
+      input.setAttribute('readonly', 'readonly');
+      input.setAttribute('value', text);
+      document.body.appendChild(input);
+      input.setSelectionRange(0, -1);
+
+      if (document.execCommand('copy')) {
+        document.execCommand('copy');
+        document.body.removeChild(input);
+
+        return true;
+      }
+      document.body.removeChild(input);
+    } catch (e) {
+      return false;
+    }
+  }
+});

source/js/utils.js

@@ -58,6 +58,10 @@ function isMobile() {
   return check;
 }
 
+/**
+ * Change the event code to keyCode.
+ * @param {String} code Event KeyCode
+ */
 function codeToKeyCode(code) {
   var codes = {
     'ArrowLeft': 37,
@@ -68,7 +72,46 @@ function codeToKeyCode(code) {
   return codes[code];
 }
 
+/**
+ * A UI component for notification prompts.
+ * @param {String} status The Status of message.
+ * @param {String} text The text to show.
+ * @param {Number} delay Message stay time (unit is 's', default 5s).
+ */
+function popAlert(status, text, delay) {
+  var icon = {
+    'success': 'check-circle',
+    'info': 'exclamation-circle',
+    'warning': 'exclamation-circle',
+    'error': 'times-circle'
+  };
+  
+  if (!$('.stun-alert')[0]) {
+    var $alert = $(`
+      <div class="stun-message">
+        <div class="stun-alert stun-alert-${status}">
+          <i class="stun-alert-icon fa fa-${icon[status]}"></i>
+          <span class="stun-alert-description">${text}</span>
+        </div>
+      </div>
+    `);
+  
+    $('body').append($alert);
+  }
+
+  $(document).ready(function() {
+    $('.stun-alert').velocity('stop')
+      .velocity('transition.slideDownBigIn', {
+        duration: 300
+      }).velocity('reverse', {
+        delay: delay * 1000 || 5000,
+        duration: 260
+      })
+  });
+}
+
 window.debounce = debounce;
 window.throttle = throttle;
 window.isMobile = isMobile;
 window.codeToKeyCode = codeToKeyCode;
+window.popAlert = popAlert;