This is an automated email from the ASF dual-hosted git repository.
wusheng pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/skywalking-website.git
The following commit(s) were added to refs/heads/master by this push:
new 662735d feat: Popover supports multiple events (#274)
662735d is described below
commit 662735d985836a80a7b26f8d6db27edce28ce375
Author: Juntao Zhang <[email protected]>
AuthorDate: Sun May 9 21:45:00 2021 -0500
feat: Popover supports multiple events (#274)
---
README.md | 10 +-
content/events/skywalkingday-2021/index.md | 2 +-
themes/docsy/assets/js/event-popup.js | 128 ++++++++++++++++++-------
themes/docsy/assets/scss/_event-popup.scss | 49 ++++++----
themes/docsy/layouts/partials/event-popup.html | 59 ++++++------
5 files changed, 159 insertions(+), 89 deletions(-)
diff --git a/README.md b/README.md
index e822701..64e15dd 100755
--- a/README.md
+++ b/README.md
@@ -37,8 +37,8 @@ title: This is a title
date: 2020-04-28
author: Author
description: This is description.
-# endDate: 2021-04-24T23:59:59
-# startDate: 2021-04-22T00:00:00
+# endTime: 2021-04-24T23:59:59Z
+# startTime: 2021-04-22T00:00:00Z
# buttonText: Go
# img: /images/skywalking_200x200.png
---
@@ -46,12 +46,12 @@ description: This is description.
Content
```
-If you want to display the event in the bottom right popover, you can
configure the parameter `endDate`. The parameters are as follows.
+If you want to display the event in the bottom right popover, you can
configure the parameter `endTime`. The parameters are as follows.
|Parameter|Description|Required|Default|
|----|----|----|----|
-|endDate|End date|true|-|
-|startDate|Start date|false|Current time|
+|endTime|End time|true|-|
+|startTime|Start time|false|Current time|
|buttonText|Button text|false|Read more|
|img|The illustration|false|/images/skywalking_200x200.png|
diff --git a/content/events/skywalkingday-2021/index.md
b/content/events/skywalkingday-2021/index.md
index 84b0c19..513525b 100644
--- a/content/events/skywalkingday-2021/index.md
+++ b/content/events/skywalkingday-2021/index.md
@@ -3,7 +3,7 @@ title: "SkyWalkingDay Conference 2021"
date: 2021-04-20
author: SkyWalking Team
description: Apache SkyWalking hosts SkyWalkingDay Conference 2021 in June
12th, jointly with Tencent and Tetrate.
-endDate: 2021-06-12T23:59:59
+endTime: 2021-06-12T10:00:00Z
---
## Abstract
diff --git a/themes/docsy/assets/js/event-popup.js
b/themes/docsy/assets/js/event-popup.js
index f8937b1..ae1bb99 100644
--- a/themes/docsy/assets/js/event-popup.js
+++ b/themes/docsy/assets/js/event-popup.js
@@ -1,40 +1,94 @@
$(function () {
- var $popup = $('.sky-event-popup')
- if (!$popup) {
- return;
- }
- var key = 'SkyWalkingPopupClosedTime';
- var startDate = $popup.data('startdate');
- var endDate = $popup.data('enddate');
- if (!isShowed(key) && isDuringDate(startDate, endDate)) {
- $popup.show()
- }
- $popup.find('.fa-window-close').on('click', function () {
- localStorage.setItem(key, new Date());
- $popup.hide()
- })
-
- function isShowed(key) {
- var storageTime = formatDate(localStorage.getItem(key));
- var now = formatDate(new Date());
- return storageTime === now;
- }
-
- function formatDate(strTime) {
- const date = new Date(strTime);
- return (
- date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate()
- );
- }
-
- function isDuringDate(startDateStr, endDateStr) {
- var currDate = new Date();
- var startDate = new Date(startDateStr);
- var endDate = new Date(endDateStr);
- if (currDate <= endDate && (currDate >= startDate || !startDateStr)) {
- return true;
- }
- return false;
- }
+ var $popup = $('.sky-event-popup')
+ var key = 'SkyWalkingPopupClosedTime';
+
+ if (!$popup || isShowed(key)) {
+ return;
+ }
+ var $items = $popup.find('.item');
+ var $pic = $popup.find('.pic');
+
+ init()
+
+ function init() {
+ var count = getActiveCount()
+ if (!count) {
+ return;
+ }
+ showPopover(count)
+ bindClick()
+ }
+
+ function getActiveCount() {
+ var count = 0;
+ $.each($items, function (index, item) {
+ var startTime = $(item).data('starttime');
+ var endTime = $(item).data('endtime');
+ if (isDuringTime(startTime, endTime)) {
+ $(item).show()
+ count++
+ }
+ })
+ return count
+ }
+
+ function showPopover(count) {
+ var src;
+ if (count === 1) {
+ $('.sky-event-popup .content-box').addClass('one')
+ src = $items.eq(0).data('img')
+ } else {
+ $items.sort(function (a, b) {
+ var aDate = new Date($(a).data('endtime'))
+ var bDate = new Date($(b).data('endtime'))
+ return aDate.getTime() - bDate.getTime()
+ })
+ $.each($items, function (index, item) {
+ var img = $(item).data('img')
+ if (img) {
+ src = img;
+ return false
+ }
+ })
+ $('.content-box').html($items)
+ }
+ if (!src) {
+ src = $pic.data('img')
+ $pic.css('height', 'auto')
+ }
+ $pic.attr('src', src)
+
+ setTimeout(function () {
+ $popup.show()
+ }, 1000)
+ }
+
+ function bindClick() {
+ $popup.find('.fa-window-close').on('click', function () {
+ localStorage.setItem(key, new Date());
+ $popup.hide()
+ })
+ }
+
+
+ function isShowed(key) {
+ var storageTime = formatTime(localStorage.getItem(key));
+ var now = formatTime(new Date());
+ return storageTime === now;
+ }
+
+ function formatTime(time) {
+ var date = new Date(time);
+ return (
+ date.getFullYear() + '-' + (date.getMonth() + 1) + '-' +
date.getDate()
+ );
+ }
+
+ function isDuringTime(startTimeStr, endTimeStr) {
+ var currTime = new Date();
+ var startTime = new Date(startTimeStr);
+ var endTime = new Date(endTimeStr);
+ return currTime <= endTime && (currTime >= startTime || !startTimeStr)
+ }
})
\ No newline at end of file
diff --git a/themes/docsy/assets/scss/_event-popup.scss
b/themes/docsy/assets/scss/_event-popup.scss
index 34e5124..b92bac9 100644
--- a/themes/docsy/assets/scss/_event-popup.scss
+++ b/themes/docsy/assets/scss/_event-popup.scss
@@ -20,12 +20,11 @@
display: none;
animation: eventFadein 0.5s linear;
box-shadow: 0 0 20px -12px #626365;
- height: 180px;
position: fixed;
right: 0;
bottom: 0;
overflow: auto;
- z-index: 1100;
+ z-index: 9999;
outline: 0;
width: 440px;
max-width: 100%;
@@ -43,11 +42,10 @@
.fa-window-close {
position: absolute;
- top: 12px;
- right: 12px;
+ top: 10px;
+ right: 10px;
font-size: 14px;
cursor: pointer;
- z-index: 1100;
color: #c9c9c9;
transition: color 0.3s;
z-index: 99;
@@ -60,32 +58,52 @@
}
}
}
- .pic-wrapper{
+
+ .pic-wrapper {
display: flex;
justify-content: center;
align-items: center;
width: 100px;
}
+
.pic {
border: none;
- height: auto;
+ height: 100%;
max-width: 100px;
}
}
.content-box {
- padding: 0px 20px 0 10px;
+ padding: 12px 20px 12px 10px;
+
box-sizing: border-box;
- display: flex;
- justify-content: center;
- align-items: center;
width: 340px;
+
+ &.one {
+ .content-text {
+ height: 60px;
+ -webkit-line-clamp: 3;
+ }
+
+ .title {
+ margin-bottom: 10px;
+ }
+
+ .modal-btn {
+ display: inline-block;
+ }
+ }
+
+ .item {
+ display: none;
+ }
}
.title {
font-size: 14px;
- margin: 13px 0 10px;
+ margin: 13px 0 0;
padding: 0;
+ line-height: 1.3;
}
.content-text {
@@ -93,11 +111,11 @@
font-size: 12px;
color: #999;
line-height: 20px;
- height: 60px;
+ height: 20px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
- -webkit-line-clamp: 3;
+ -webkit-line-clamp: 1;
-webkit-box-orient: vertical;
a {
@@ -115,9 +133,8 @@
height: 28px;
color: #fff;
background-image: linear-gradient(to right, #17b6c1, #136af4);
- border-radius: 14px;
border-radius: 2px;
- display: inline-block;
+ display: none;
line-height: 28px;
text-align: center;
margin: 11px 20px 0 0px;
diff --git a/themes/docsy/layouts/partials/event-popup.html
b/themes/docsy/layouts/partials/event-popup.html
index 4a5c9ce..a3568c3 100644
--- a/themes/docsy/layouts/partials/event-popup.html
+++ b/themes/docsy/layouts/partials/event-popup.html
@@ -1,45 +1,42 @@
-{{ $scratch := newScratch }}
-{{ $scratch.Set "flag" true }}
+{{ $scratchTotal := newScratch }}
{{ range first 50 (where .Site.Pages "Section" "events") }}
-{{ if ($scratch.Get "flag")}}
-{{ if .Params.endDate }}
-{{ if (time .Params.endDate).After now }}
-
-{{ $scratch.Set "flag" false}}
+{{ if .Params.endTime }}
+{{ if (time .Params.endTime).After now }}
+{{ $scratchTotal.Add "total" 1 }}
+{{ end }}
+{{ end }}
+{{ end }}
-{{ $bg := .Params.img}}
-<div
- class="sky-event-popup"
- data-startdate="{{.Params.startDate}}"
- data-enddate="{{.Params.endDate}}"
->
+{{if ($scratchTotal.Get "total")}}
+<div class="sky-event-popup">
<div class="sky-pop-modal">
<i class="fa fa-window-close"></i>
<div class="pic-wrapper">
<img
-
- {{if $bg}}
- src="{{$bg}}"
- {{else}}
- src="/images/skywalking_200x200.png"
- {{end}}
+ data-img="/images/skywalking_200x200.png"
class="pic"
alt="event"
/>
</div>
<div class="content-box">
- <div>
- <h3 class="title">{{ .LinkTitle }}</h3>
- <p class="content-text">
-
- <a href="{{.RelPermalink}}">
+ {{ range first 50 (where .Site.Pages "Section" "events") }}
+ {{ if .Params.endTime }}
+ {{ if (time .Params.endTime).After now }}
+
+ <div class="item"
+ data-img="{{.Params.img}}"
+ data-starttime="{{.Params.startTime}}"
+ data-endtime="{{.Params.endTime}}">
+ <a href="{{.RelPermalink}}">
+ <h3 class="title">{{ .LinkTitle }}</h3>
+ <p class="content-text">
{{.Params.description}}
- </a>
- </p>
+ </p>
+ </a>
<a href="{{.RelPermalink}}" class="modal-btn">
{{if .Params.buttonText }}
@@ -49,10 +46,12 @@
{{end}}
</a>
</div>
+ {{ end }}
+ {{ end }}
+ {{ end }}
</div>
</div>
</div>
-{{ end }}
-{{ end }}
-{{ end }}
-{{ end }}
+
+{{end}}
+
