From eac675184b5aa9d700c25e08f76405fc565cdbfe Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=99=BD=E7=BB=99?= <2271007263A@gmail.com> Date: Sat, 17 Feb 2024 21:16:25 +0800 Subject: [PATCH] update Scroller Gadget --- src/Gadgets/Compatibility/Scroller/.options | 2 +- .../Compatibility/Scroller/Scroller.css | 78 ----------------- .../Compatibility/Scroller/Scroller.js | 87 ++++++------------- 3 files changed, 27 insertions(+), 140 deletions(-) delete mode 100644 src/Gadgets/Compatibility/Scroller/Scroller.css diff --git a/src/Gadgets/Compatibility/Scroller/.options b/src/Gadgets/Compatibility/Scroller/.options index 696f75d..65ebe0a 100644 --- a/src/Gadgets/Compatibility/Scroller/.options +++ b/src/Gadgets/Compatibility/Scroller/.options @@ -1 +1 @@ -Scroller[ResourceLoader|default|hidden]|Scroller.css|Scroller.js +Scroller[ResourceLoader|default|hidden]|Scroller.js diff --git a/src/Gadgets/Compatibility/Scroller/Scroller.css b/src/Gadgets/Compatibility/Scroller/Scroller.css deleted file mode 100644 index 7c6e4cc..0000000 --- a/src/Gadgets/Compatibility/Scroller/Scroller.css +++ /dev/null @@ -1,78 +0,0 @@ -.scroller-container { - height: 15em; - display: flex; - flex-wrap: nowrap; - flex-direction: row; - align-items: center; - overflow-x: auto; - width: 90%; - overflow-y: hidden; - margin: .8em; - margin-left: 5%; - scroll-snap-type: x mandatory; - scroll-behavior: smooth; -} - -.scroller-container::-webkit-scrollbar { - display: none; -} - -.comic-header img { - height: auto; - width: 10em; - border-radius: 4px 4px 0 0; -} - -.scroller-item { - flex-wrap: wrap; - display: flex; - justify-content: left; - margin: .8em; - width: 10em; - box-shadow: 0 3px 6px rgba(0, 0, 0, 0.04), 0 3px 6px rgba(0, 0, 0, 0.0575); - border: 1px solid rgba(0, 0, 0, .12); - border-radius: 4px; - transition: all .2s; - scroll-snap-align: start; -} - -.scroller-item:nth-child(1) { - margin-left: 5%; -} - -.scroller-item:hover { - border-color: var(--color-primary--hover); - transition: all .2s; -} - -.scroller-item-now { - border-color: #999; - transition: all .2s; - box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08), 0 5px 8px rgba(0, 0, 0, 0.0975); -} - - -.scroller-btn { - position: absolute; - display: block; - width: 2em; - height: 2em; - box-shadow: 0 3px 6px rgba(0, 0, 0, 0.04), 0 3px 6px rgba(0, 0, 0, 0.0575); - border: 1px solid rgba(0, 0, 0, .12); - border-radius: 99px; - transition: all .2s; - line-height: 2em; - font-size: 1.2em; - background-color: #fff; - text-align: center; - user-select: none; -} - -.scroller-btn:hover { - border-color: var(--color-primary--hover); - transition: all .2s; -} - -#scroller-next-btn { - margin-left: 85%; -} diff --git a/src/Gadgets/Compatibility/Scroller/Scroller.js b/src/Gadgets/Compatibility/Scroller/Scroller.js index 2dca61b..8241aa6 100644 --- a/src/Gadgets/Compatibility/Scroller/Scroller.js +++ b/src/Gadgets/Compatibility/Scroller/Scroller.js @@ -1,7 +1,8 @@ /** - * SPDX-License-Identifier: CC-BY-SA-4.0 - * _addText: '{{Gadget Header|license=CC-BY-SA-4.0|import=no}}' - * @author 白给 + * * SPDX-License-Identifier: MIT + * _addText: '{{Gadget Header|license=MIT}}' + * + * @source */ /** * +--------------------------------------------------------+ @@ -17,62 +18,26 @@ /* */ "use strict"; -var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); - -function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } - -var Scroller = function () { - function Scroller() { - var _this = this; - - _classCallCheck(this, Scroller); - - this.scroller_focus_id = 0; - this.scroller_items = document.getElementsByClassName('scroller-item'); - this.scroller_container = document.getElementsByClassName('scroller-container'); - this.scroller_item_width = this.scroller_items[0].offsetWidth; - this.scroller_item_length = this.scroller_items.length; - - if (this.scroller_container.length == 0) {return 0} - - this.e_last_btn = document.getElementById('scroller-last-btn'); - this.e_next_Btn = document.getElementById('scroller-next-btn'); - - this.scroller_items[0].classList.add('scroller-item-now'); - - this.e_last_btn.addEventListener('click', function () { - _this.scroll_element_intoView(-1); - }); - this.e_next_Btn.addEventListener('click', function () { - _this.scroll_element_intoView(1); - }); +function Scroller(element){ + function wheelHandler(e) { + if (e.deltaY && !e.deltaX) { + e.preventDefault() + requestAnimationFrame(() => { + element.scrollBy(e.deltaY, 0) + }) } - - _createClass(Scroller, [{ - key: 'scroll_element_intoView', - value: function scroll_element_intoView(jump) { - var target = this.scroller_focus_id + jump; - - if (target <= 0) { - target = 0; - } - if (target >= this.scroller_item_length) { - target = this.scroller_item_length - 1; - } - - this.scroller_container[0].scrollTo(this.scroller_item_width * target, 0); - - try { - this.scroller_items[this.scroller_focus_id].classList.remove('scroller-item-now'); - } finally {} - this.scroller_items[target].classList.add('scroller-item-now'); - - this.scroller_focus_id = target; - } - }]); - - return Scroller; -}(); - -new Scroller(); -/* */ + } + + element.addEventListener('wheel', wheelHandler) + element.style.scrollSnapType = 'none' + return () => { + element.removeEventListener('wheel', wheelHandler) + element.style.scrollSnapType = '' + } +} + +const scroller_containers = document.getElementsByClassName('scroller-container') +for (let index = 0; index < scroller_containers.length; index++) { + const element = scroller_containers[index]; + Scroller(element) +} \ No newline at end of file