From ce9ecfcb9d620b4608baaec3f1b8eafcb11f80ca Mon Sep 17 00:00:00 2001 From: wenjing-xin Date: Sat, 22 Jun 2024 20:41:00 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E4=BB=A3=E7=A0=81=E7=BB=84?= =?UTF-8?q?=E7=BB=87=E7=BB=93=E6=9E=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- gradle.properties | 2 +- .../static/libs/customEle/bloghaoTag.js | 89 +++++--------- .../static/libs/customEle/swipperExecute.js | 113 ++++++++++-------- 3 files changed, 95 insertions(+), 109 deletions(-) diff --git a/gradle.properties b/gradle.properties index ee9ed7b..8ca67e9 100644 --- a/gradle.properties +++ b/gradle.properties @@ -1 +1 @@ -version=1.0.0-rc1 +version=1.0.0-alpha1 diff --git a/src/main/resources/static/libs/customEle/bloghaoTag.js b/src/main/resources/static/libs/customEle/bloghaoTag.js index d826cdf..7382c55 100644 --- a/src/main/resources/static/libs/customEle/bloghaoTag.js +++ b/src/main/resources/static/libs/customEle/bloghaoTag.js @@ -83,83 +83,62 @@ function extractHeight(occupied, width, height) { let _innerHTML = _imgs.innerHTML.trim().replace(/^(
)|(
)$/g, ""); let contents = ""; let configOptions = this.options; - _innerHTML.replace( - /{([^}]*)}/g, - function ($0, $1) { - var str = $1.split(","); - str.forEach((item) => { - contents += ` -
- image -
- `; - }); - } - ); - let swipperIdName = ""; - switch (this.options.type){ + let isThumbsSwiper = false; + let swiperIdName = ""; + switch (this.options.type) { case "slides": - swipperIdName = "bloghao-img-slide"; + swiperIdName = "bloghao-img-slide"; break; case "coverflow": - swipperIdName = "bloghao-img-coverflow"; + swiperIdName = "bloghao-img-coverflow"; break; case "card": - swipperIdName = "bloghao-img-card"; + swiperIdName = "bloghao-img-card"; break; case "thumbs": - swipperIdName = "bloghao-img-thumbs"; + swiperIdName = "bloghao-img-thumb"; + isThumbsSwiper = true; break; default: - swipperIdName = "bloghao-img-normal"; + swiperIdName = "bloghao-img-normal"; } - - let htmlStr = `
-
- ${contents} -
-
`; - this.innerHTML = htmlStr; - } - } - - class ImgGalleryThumbs extends HTMLElement { - constructor() { - super(); - this.options = { - width: this.getAttribute("width") || "92%", - height: this.getAttribute("height") || 350, - type: this.getAttribute("type") || "normal", - }; - const _imgs = getDirectEle(this, "_img"); - let _innerHTML = _imgs.innerHTML.trim().replace(/^(
)|(
)$/g, ""); - let contents = ""; - let configOptions = this.options; _innerHTML.replace( /{([^}]*)}/g, function ($0, $1) { var str = $1.split(","); str.forEach((item) => { - contents += ` -
- image -
- `; + if(isThumbsSwiper){ + contents += `
+ image +
`; + }else{ + contents += `
+ image +
`; + } + }); } ); - let htmlStr = `
+ let _tmpl = `
${contents}
-
- `; + if (isThumbsSwiper) { + _tmpl = `
${contents}
-
`; - this.innerHTML = htmlStr; +
+ `; + } + this.innerHTML = _tmpl; } } @@ -172,7 +151,6 @@ function extractHeight(occupied, width, height) { }; const slideMarkdown = getDirectEle(this, "slide-markdown"); let slideContent = slideMarkdown.innerHTML.trim().replaceAll("
", "---"); - console.log( slideContent); this.render(slideContent); } render(slideContent) { @@ -197,9 +175,8 @@ function extractHeight(occupied, width, height) { // B站视频 customElements.define("bloghao-bili", BiliDom); // 图片走马灯嵌入 - customElements.define("bloghao-img-swipper", ImgGallery); - // 图片轮播展示 thumb类型 - customElements.define("bloghao-img-thumb", ImgGalleryThumbs); + customElements.define("bloghao-img-swiper", ImgGallery); + customElements.define("bloghao-slide", RevealSlide) }) diff --git a/src/main/resources/static/libs/customEle/swipperExecute.js b/src/main/resources/static/libs/customEle/swipperExecute.js index b2a06a4..0d5c8e7 100644 --- a/src/main/resources/static/libs/customEle/swipperExecute.js +++ b/src/main/resources/static/libs/customEle/swipperExecute.js @@ -1,64 +1,73 @@ (function() { function executeSwiperInit(){ - if(document.querySelector("#bloghao-img-slide")){ - new Swiper ('#bloghao-img-slide', { - direction: 'horizontal', // 垂直切换选项 - loop: true, // 循环模式选项 - autoplay: true, - mousewheel: true, - slidesPerView: 2, - }) - } - if(document.querySelector("#bloghao-img-coverflow")){ - new Swiper ('#bloghao-img-coverflow', { - direction: 'horizontal', // 垂直切换选项 - loop: true, // 循环模式选项 - autoplay: true, - effect: 'coverflow', - slidesPerView: 3, - mousewheel: true, - centeredSlides: true - }) - } - if(document.querySelector("#bloghao-img-card")){ - new Swiper ('#bloghao-img-card', { - direction: 'horizontal', - loop: true, - autoplay: true, - mousewheel: true, - effect: 'cards' - }) - } - if(document.querySelector("#bloghao-img-normal")){ - new Swiper ('#bloghao-img-normal', { - direction: 'horizontal', - loop: true, - autoplay: true - }) - } - if(document.querySelector("#bloghao-img-thumb")){ - const galleryThumbs = new Swiper('#gallery-thumbs', { - loop: true, - autoplay: true, - spaceBetween: 5, - slidesPerView: 4, - watchSlidesVisibility: true,//防止不可点击 - }); - new Swiper ('#bloghao-img-thumb', { - spaceBetween: 5, - direction: 'horizontal', - loop: true, - autoplay: true, - thumbs: { - swiper: galleryThumbs, + let swiperElement = document.getElementsByTagName("bloghao-img-swiper"); + if(swiperElement && swiperElement.length){ + Array.from(swiperElement).forEach( item => { + let swiperType = item.getAttribute("type") || "normal"; + switch (swiperType){ + case "slides": + new Swiper ('#bloghao-img-slide', { + direction: 'horizontal', + loop: true, + autoplay: true, + mousewheel: true, + slidesPerView: 2, + }) + break; + case "coverflow": + new Swiper ('#bloghao-img-coverflow', { + direction: 'horizontal', + loop: true, + autoplay: true, + effect: 'coverflow', + slidesPerView: 3, + mousewheel: true, + centeredSlides: true + }) + break; + case "card": + new Swiper ('#bloghao-img-card', { + direction: 'horizontal', + loop: true, + autoplay: true, + mousewheel: true, + effect: 'cards' + }) + break; + case "thumbs": + console.log("thumbs") + const galleryThumbs = new Swiper('#gallery-thumbs', { + loop: true, + autoplay: true, + spaceBetween: 5, + slidesPerView: 4, + watchSlidesVisibility: true, + }); + new Swiper ('#bloghao-img-thumb', { + spaceBetween: 5, + direction: 'horizontal', + loop: true, + autoplay: true, + thumbs: { + swiper: galleryThumbs, + } + }) + break; + default: + new Swiper ('#bloghao-img-normal', { + direction: 'horizontal', + loop: true, + autoplay: true + }) } }) } + // 初始化幻灯片配置 if(document.querySelector("#reveal-slide")){ let slideView = new Reveal(document.querySelector('#reveal-slide'), { embedded: true, - keyboardCondition: 'focused', // 只有在聚焦時才反應按鍵 + keyboardCondition: 'focused', }); slideView.initialize({ revealViewport: "reveal",