Skip to content

Commit

Permalink
优化代码组织结构
Browse files Browse the repository at this point in the history
  • Loading branch information
@wenjing-xin
wenjing-xin committed Jun 22, 2024
1 parent 21d5ebb commit ce9ecfc
Show file tree
Hide file tree
Showing 3 changed files with 95 additions and 109 deletions.
2 changes: 1 addition & 1 deletion gradle.properties
View file
Original file line number Diff line number Diff line change
@@ -1 +1 @@
version=1.0.0-rc1
version=1.0.0-alpha1
89 changes: 33 additions & 56 deletions src/main/resources/static/libs/customEle/bloghaoTag.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -83,83 +83,62 @@ function extractHeight(occupied, width, height) {
let _innerHTML = _imgs.innerHTML.trim().replace(/^(<br>)|(<br>)$/g, "");
let contents = "";
let configOptions = this.options;
_innerHTML.replace(
/{([^}]*)}/g,
function ($0, $1) {
var str = $1.split(",");
str.forEach((item) => {
contents += `
<div class="swiper-slide">
<img style="height: ${configOptions.height}px;" src="${item}" alt="image" />
</div>
`;
});
}
);
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 = `<div class="swiper" id="${swipperIdName}" style="width:${this.options.width};">
<div class="swiper-wrapper">
${contents}
</div>
</div>`;
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(/^(<br>)|(<br>)$/g, "");
let contents = "";
let configOptions = this.options;
_innerHTML.replace(
/{([^}]*)}/g,
function ($0, $1) {
var str = $1.split(",");
str.forEach((item) => {
contents += `
<div class="swiper-slide">
<img style="height: ${configOptions.height}px;width: 100%" src="${item}" alt="image" />
</div>
`;
if(isThumbsSwiper){
contents += `<div class="swiper-slide">
<img style="height: ${configOptions.height}px; width: 92%;" src="${item}" alt="image" />
</div>`;
}else{
contents += `<div class="swiper-slide">
<img style="height: ${configOptions.height}px;" src="${item}" alt="image" />
</div>`;
}

});
}
);

let htmlStr = `<div class="swiper" id="bloghao-img-thumb" style="width:${this.options.width};">
let _tmpl = `<div class="swiper" id="${swiperIdName}" style="width:${this.options.width};">
<div class="swiper-wrapper">
${contents}
</div>
</div>
<div class="swiper" id="gallery-thumbs">
</div>`;
if (isThumbsSwiper) {
_tmpl = `<div class="swiper" id="${swiperIdName}" style="width:${this.options.width};">
<div class="swiper-wrapper">
${contents}
</div>
</div>`;
this.innerHTML = htmlStr;
</div>
<div class="swiper" id="gallery-thumbs">
<div class="swiper-wrapper">
${contents}
</div>
</div>`;
}
this.innerHTML = _tmpl;
}
}

Expand All @@ -172,7 +151,6 @@ function extractHeight(occupied, width, height) {
};
const slideMarkdown = getDirectEle(this, "slide-markdown");
let slideContent = slideMarkdown.innerHTML.trim().replaceAll("<br>", "---");
console.log( slideContent);
this.render(slideContent);
}
render(slideContent) {
Expand All @@ -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)

})
Expand Down
113 changes: 61 additions & 52 deletions src/main/resources/static/libs/customEle/swipperExecute.js
View file
Original file line number Diff line number Diff line change
@@ -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",
Expand Down

0 comments on commit ce9ecfc

Please sign in to comment.