From dbe59a80def105a2e75741191df7f43670f94372 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=B5=AA=E5=AD=90?= Date: Wed, 25 Dec 2024 19:22:27 +0800 Subject: [PATCH] 0.6.3 --- dist/css/neodb.css | 1 + dist/js/neodb.js | 143 +++++++++++++++++++++++++++++++++++++++++++++ page-neodb.php | 28 +++++++++ 3 files changed, 172 insertions(+) create mode 100644 dist/css/neodb.css create mode 100644 dist/js/neodb.js create mode 100644 page-neodb.php diff --git a/dist/css/neodb.css b/dist/css/neodb.css new file mode 100644 index 0000000..e08b139 --- /dev/null +++ b/dist/css/neodb.css @@ -0,0 +1 @@ +.neodb-container{--db-item-width:150px;--db-item-height:180px;--db-music-width:150px;--db-music-height:150px;--db-primary-color:var(--farallon-hover-color);--db-background-white:var(--farallon-background-white);--db-background-gray:var(--farallon-background-gray);--db-border-color:var(--farallon-border-color);--db-text-light:var(--farallon-text-light);}.neodb-nav{padding:30px 0 20px;display:flex;align-items:center;flex-wrap:wrap;}.neodb-navItem{font-size:20px;cursor:pointer;border-bottom:1px solid rgba(0,0,0,0);transition:0.5s border-color;display:flex;align-items:center;text-transform:capitalize;}.neodb-navItem.current,.neodb-navItem:hover{border-color:inherit;}.neodb-navItem{margin-right:20px;}.neodb-score svg{fill:#f5c518;margin-right:5px;}.neodb-list{display:flex;align-items:flex-start;flex-wrap:wrap;}.neodb-image{width:var(--db-item-width);height:var(--db-item-height);object-fit:cover;border-radius:4px;}.neodb-image:hover{box-shadow:0 0 10px var(--db-border-color);}.neodb-title{margin-top:2px;font-size:14px;line-height:1.4;}.neodb-title a:hover{color:var(--db-primary-color);text-decoration:underline;}.neodb-genreItem{background:var(--db-background-gray);font-size:12px;padding:5px 12px;border-radius:4px;margin-right:6px;margin-bottom:10px;line-height:1.4;cursor:pointer;}.neodb-genreItem.is-active,.neodb-genreItem:hover{background-color:var(--db-primary-color);color:var(--db-background-white);}.neodb-genres{padding-bottom:15px;display:flex;flex-wrap:wrap;}.neodb-genres.u-hide + .neodb-list{padding-top:10px;}.neodb-score{display:flex;align-items:center;font-size:14px;color:var(--db-text-light);}.neodb-item{width:var(--db-item-width);margin-right:20px;margin-bottom:20px;position:relative;}.neodb-item__music img{width:var(--db-music-width);height:var(--db-music-height);object-fit:cover;}.neodb-date{position:relative;font-size:20px;color:var(--farallon-text-light);font-weight:900;line-height:1;}.neodb-date::before{content:"";position:absolute;top:0.5em;bottom:-2px;left:-10px;width:3.4em;z-index:-1;background:var(--farallon-hover-color);opacity:0.3;transform:skew(-35deg);transition:opacity 0.2s ease;border-radius:3px 8px 10px 6px;}.neodb-date{margin-top:30px;margin-bottom:10px;}.neodb-dateList{padding-left:15px;padding-top:5px;padding-right:15px;}.neodb-card__list{display:flex;align-items:center;padding:15px 0;border-bottom:1px dotted var(--farallon-border-color);font-size:14px;color:rgba(0,0,0,0.55);}.neodb-card__list:last-child{border-bottom:0;}.neodb-card__list .title{font-size:18px;margin-bottom:5px;}.neodb-card__list .rating{margin:0 0 0px;font-size:14px;line-height:1;display:flex;align-items:center;}.neodb-card__list .rating .allstardark{position:relative;color:#f99b01;height:16px;width:80px;background-repeat:repeat;background-image:url("../images/star.svg");background-size:auto 100%;margin-right:5px;}.neodb-card__list .rating .allstarlight{position:absolute;left:0;color:#f99b01;height:16px;overflow:hidden;background-repeat:repeat;background-image:url("../images/star-fill.svg");background-size:auto 100%;}.neodb-card__list img{width:80px;border-radius:4px;height:80px;object-fit:cover;flex:0 0 auto;margin-right:15px;}.neodb-titleDate{display:flex;flex-direction:column;line-height:1.1;margin-bottom:10px;flex:0 0 auto;margin-right:15px;align-items:center;}.neodb-titleDate__day{font-weight:900;font-size:44px;}.neodb-titleDate__month{font-size:14px;color:var(--farallon-text-light);font-weight:900;}.neodb-list__card{display:block;}.neodb-dateList__card{display:flex;flex-wrap:wrap;align-items:flex-start;}.neodb-listBydate{display:flex;align-items:flex-start;margin-top:15px;}@media (max-width:600px){.neodb-listBydate{flex-direction:column;}} \ No newline at end of file diff --git a/dist/js/neodb.js b/dist/js/neodb.js new file mode 100644 index 0000000..0bff788 --- /dev/null +++ b/dist/js/neodb.js @@ -0,0 +1,143 @@ +class NeoDB { + constructor(config) { + this.container = config.container; + this.types = config.types ?? ["book", "movie", "tv", "music", "game", "podcast"]; + this.baseAPI = config.baseAPI; + this.ver = "1.0.6"; + this.type = "movie"; + this.status = "complete"; + this.finished = false; + this.paged = 1; + this.subjects = []; + this._create(); + } + + on(event, element, callback) { + const nodeList = document.querySelectorAll(element); + nodeList.forEach((item) => { + item.addEventListener(event, callback); + }); + } + + _handleTypeClick() { + this.on("click", ".neodb-navItem", (t) => { + const self = t.currentTarget; + if (self.classList.contains("current")) return; + this.type = self.dataset.type; + document.querySelector(".neodb-list").innerHTML = ""; + document.querySelector(".lds-ripple").classList.remove("u-hide"); + document.querySelector(".neodb-navItem.current").classList.remove("current"); + self.classList.add("current"); + this.paged = 1; + this.finished = false; + this.subjects = []; + this._fetchData(); + }); + } + + _renderTypes() { + document.querySelector(".neodb-nav").innerHTML = this.types + .map((item) => { + return `${item}`; + }) + .join(""); + this._handleTypeClick(); + } + + _fetchData() { + const params = new URLSearchParams({ + type: "complete", + category: this.type, + page: this.paged.toString(), + }); + + return fetch(this.baseAPI + "?" + params.toString()) + .then((response) => response.json()) + .then((data) => { + if (data.length) { + // 过滤重复项 + data = data.filter(item => !this.subjects.some(existing => existing.item.id === item.item.id)); + + if (data.length) { + this.subjects = [...this.subjects, ...data]; + this._renderListTemplate(); + } + + document.querySelector(".lds-ripple").classList.add("u-hide"); + } else { + this.finished = true; // 没有更多数据 + document.querySelector(".lds-ripple").classList.add("u-hide"); + } + }); + } + + _renderListTemplate() { + document.querySelector(".neodb-list").innerHTML = this.subjects + .map((item) => { + const coverImage = item.item.cover_image_url; + const title = item.item.title; + const rating = item.item.rating; + const link = item.item.id; + + return `
+ +
+ ${rating ? `${rating}` : ""} +
+
+ ${title} +
+ +
`; + }) + .join(""); + } + + _handleScroll() { + let isLoading = false; // 标志位，表示是否正在加载数据 + let lastScrollTop = 0; // 上一次的滚动位置 + + window.addEventListener("scroll", () => { + const scrollY = window.scrollY || window.pageYOffset; + const moreElement = document.querySelector(".block-more"); + + // 检查滚动到底部的条件 + if ( + moreElement.offsetTop + moreElement.clientHeight <= scrollY + window.innerHeight && + document.querySelector(".lds-ripple").classList.contains("u-hide") && + !this.finished && + !isLoading // 确保没有正在加载数据 + ) { + isLoading = true; // 设置标志位为 true，表示正在加载数据 + document.querySelector(".lds-ripple").classList.remove("u-hide"); + this.paged++; + this._fetchData().finally(() => { + isLoading = false; // 数据加载完成后，重置标志位 + }); + } + + // 更新上一次的滚动位置 + lastScrollTop = scrollY; + }); + } + + _create() { + if (document.querySelector(".neodb-container")) { + const container = document.querySelector(this.container); + if (!container) return; + container.innerHTML = ` + +
+
+
+
+ `; + this._renderTypes(); + this._fetchData(); + this._handleScroll(); + } + } +} + diff --git a/page-neodb.php b/page-neodb.php new file mode 100644 index 0000000..4057edc --- /dev/null +++ b/page-neodb.php @@ -0,0 +1,28 @@ + +need('header.php'); ?> + + +
+
+

title() ?>

+

content(); ?>

+
+
+
+ fields->neodb ? $this->fields->neodb : 'https://neodb.imsun.org/'; ?> + +
+
+need('footer.php'); ?> \ No newline at end of file