feat(tooltip): support image show in the tooltip (#110)

layout/_partial/first-screen.ejs

@@ -4,6 +4,7 @@ const { description: c_description } = config
 let final_description = fs_description || c_description || ''
 final_description = final_description.split('||').map(desc => desc.trim())
 if (final_description.length > 2) { final_description.length = 2 }
+const { enable: sc_enable, links: sc_links } = theme.social_contact
 %>
 <div class="first-screen-container flex-center fade-in-down-animation">
     <div class="content flex-center">
@@ -20,22 +21,37 @@ if (final_description.length > 2) { final_description.length = 2 }
             >
             </script>
         <% } %>
-        <% if (theme.social_contact.enable) { %>
+        <% if (sc_enable) { %>
             <div class="s-icon-list">
-                <% for (const key in theme.social_contact.links) { %>
-                    <% if(theme.social_contact.links[key]) { %>
-                        <div class="tooltip s-icon-item <%= key %>"
+                <% for (const key in sc_links) { %>
+                    <% if(sc_links[key]) { %>
+                        <%
+                            const tmpl = sc_links[key].split('|').map(x => x.trim())
+                            let isImg = false
+                            let link = sc_links[key]
+                            if (tmpl.length > 1) {
+                                link = tmpl[1]
+                                isImg = tmpl[0] === 'img'
+                            }
+                        %>
+                        <div class="tooltip s-icon-item <%= isImg ? 'tooltip-img clear' : ''%>"
                              data-content="<%= __(key) %>"
+                             data-name="<%= key %>"
+                             <%= isImg ? 'data-img-url='+ link +'' : '' %>
                         >
                             <% if(key === 'email') { %>
-                                <a href="mailto:<%- theme.social_contact.links[key] %>">
+                                <a href="mailto:<%- link %>">
                                     <i class="fas fa-envelope"></i>
                                 </a>
                             <% } else { %>
-                                <a target="_blank" href="<%- theme.social_contact.links[key] %>">
+                                <% if(isImg) { %>
+                                    <i class="fab fa-<%= key %>"></i>
+                                <% } else { %>
+                                    <a target="_blank" href="<%- link %>">
                                         <i class="fab fa-<%= key %>"></i>
                                     </a>
                                 <% } %>
+                            <% } %>
                         </div>
                     <% } %>
                 <% } %>

source/css/common/basic.styl

@@ -196,9 +196,16 @@ button {
     }
   }
 
+  &.show-img {
+    .tooltip-content {
+      display none !important
+    }
+  }
+
   .tooltip-content {
     position absolute
-    top 0
+    box-sizing border-box
+    top -0.4rem
     left 50%
     z-index $z-index-9
     display none
@@ -208,7 +215,45 @@ button {
     white-space nowrap
     background var(--first-text-color)
     border-radius 0.3rem
-    transform translateX(-50%) translateY(-108%)
+    transform translateX(-50%) translateY(-100%)
     transition-t("display", "0", "0.2", "ease")
+    disable-user-select()
   }
 }
+
+
+.tooltip-img {
+  position relative
+  box-sizing border-box
+
+  &.show-img {
+    .tooltip-img-box {
+      display flex
+    }
+  }
+
+  .tooltip-img-box {
+    position absolute
+    box-sizing border-box
+    top -0.4rem
+    left 50%
+    z-index $z-index-8
+    display none
+    justify-content center
+    align-items center
+    padding 0.2rem
+    background var(--fourth-text-color)
+    border-radius 0.3rem
+    transform translateX(-50%) translateY(-100%)
+    transition-t("display", "0", "0.2", "ease")
+    disable-user-select()
+    min-height 6rem
+
+    img {
+      display block
+      max-height 10rem
+    }
+  }
+}
+
+

source/css/common/code-block/code-block-tools.styl

@@ -1,10 +1,3 @@
-disable-user-select() {
-  -moz-user-select none
-  -ms-user-select none
-  -webkit-user-select none
-  user-select none
-}
-
 .highlight-container {
   position relative
   box-sizing border-box

source/css/common/keep-theme.styl

@@ -51,3 +51,10 @@ keep-container(isTransform, scaleX, scaleY, padding, marginBottomValue) {
     border-radius $keep-container-border-radius * 0.6
   }
 }
+
+disable-user-select() {
+  -moz-user-select none
+  -ms-user-select none
+  -webkit-user-select none
+  user-select none
+}

source/css/layout/_partial/first-screen.styl

@@ -1,5 +1,5 @@
 $first-screen-font-size = 2rem
-$first-screen-icon-size = 1.6rem
+$first-screen-icon-size = 1.8rem
 
 $temp-img = hexo-config('style.first_screen.background_img')
 $first-screen-img = $temp-img ? $temp-img : '/images/bg.svg'
@@ -60,6 +60,10 @@ $first-screen-font-color = $temp-font-color ? convert($temp-font-color) : var(--
       .s-icon-item {
         margin 0 1rem
         cursor pointer
+
+        i {
+          color var(--default-text-color)
+        }
       }
     }
   }

source/js/utils.js

@@ -345,6 +345,7 @@ KEEP.initUtils = () => {
     // insert tooltip content dom
     insertTooltipContent() {
       const init = () => {
+        // tooltip
         document.querySelectorAll('.tooltip').forEach((element) => {
           const { content } = element.dataset
           if (content) {
@@ -354,6 +355,59 @@ KEEP.initUtils = () => {
             )
           }
         })
+
+        // tooltip-img
+
+        const imgsSet = {}
+
+        const toggleShowImg = (dom, nameIdx) => {
+          document.addEventListener('click', () => {
+            if (imgsSet[nameIdx].isShowImg) {
+              dom.classList.remove('show-img')
+              imgsSet[nameIdx].isShowImg = false
+            }
+          })
+        }
+
+        const loadImg = (img, imgLoaded) => {
+          const temp = new Image()
+          const { src } = img.dataset
+          temp.src = src
+          temp.onload = () => {
+            imgLoaded = true
+            img.src = src
+          }
+        }
+
+        document.querySelectorAll('.tooltip-img').forEach((dom, idx) => {
+          const { imgUrl, name } = dom.dataset
+          if (imgUrl) {
+            const imgDomClass = `tooltip-img-${name}`
+            const nameIdx = `${name}_${idx}`
+            const imgDom = `<img class="${imgDomClass}" src="./images/loading.svg" data-src="${imgUrl}" alt="${name}">`
+            const imgTooltipBox = `<div class="tooltip-img-box">${imgDom}</div>`
+
+            imgsSet[nameIdx] = {
+              imgLoaded: false,
+              isShowImg: false,
+            }
+
+            dom.insertAdjacentHTML(
+              'afterbegin',
+              imgTooltipBox
+            )
+            dom.addEventListener('click', (e) => {
+              if (!imgsSet[nameIdx].imgLoaded) {
+                loadImg(document.querySelector(`.tooltip-img-box img.${imgDomClass}`), imgsSet[nameIdx].imgLoaded)
+              }
+              imgsSet[nameIdx].isShowImg = !imgsSet[nameIdx].isShowImg
+              dom.classList.toggle('show-img')
+              e.stopPropagation()
+            })
+
+            toggleShowImg(dom, nameIdx)
+          }
+        })
       }
       setTimeout(() => {
         init()