feat(tooltip): support image show in the tooltip (#110)
This commit is contained in:
parent
0f64df97db
commit
c08868297b
|
@ -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>
|
||||
<% } %>
|
||||
<% } %>
|
||||
|
|
|
@ -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
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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
|
||||
}
|
||||
|
|
|
@ -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)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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()
|
||||
|
|
Loading…
Reference in New Issue