From e0e95fcf5626a52a59dada4abd4a083dd506bd41 Mon Sep 17 00:00:00 2001 From: Tom Jenkinson Date: Wed, 4 Dec 2024 22:11:40 +0000 Subject: [PATCH] wip --- demo/src/main.ts | 42 ++++++++++++++++++++++++++---------------- demo/src/style.css | 13 ++++++++----- src/item.js | 2 +- src/marquee.js | 9 ++++++--- src/slider.js | 9 ++++++++- 5 files changed, 49 insertions(+), 26 deletions(-) diff --git a/demo/src/main.ts b/demo/src/main.ts index f8e329c2..d0a62950 100644 --- a/demo/src/main.ts +++ b/demo/src/main.ts @@ -12,22 +12,32 @@ const $marquee = document.getElementById('marquee')!; const marquee = (window.m = new Marquee($marquee, { rate: -100, + // rate: -500, })); -window.l = loop( - marquee, - [ - () => 'Contrary to popular belief, Lorem Ipsum is not simply random text', - () => - 'It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old', - () => - 'Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source', - () => - 'Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC', - ], - () => { - const $separator = document.createElement('div'); - $separator.innerHTML = ' â€˘ '; - return $separator; - }, +// window.l = loop( +// marquee, +// [ +// () => +// 'testtesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttest'.repeat( +// 1, +// ), +// // () => +// // 'It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old', +// // () => +// // 'Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source', +// // () => +// // 'Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC', +// ], +// () => { +// const $separator = document.createElement('div'); +// $separator.innerHTML = ' â€˘ '; +// return $separator; +// }, +// ); + +marquee.appendItem( + 'testtesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttest'.repeat( + 1, + ), ); diff --git a/demo/src/style.css b/demo/src/style.css index 21158e46..43e03fdc 100644 --- a/demo/src/style.css +++ b/demo/src/style.css @@ -1,13 +1,16 @@ #marquee { - position: fixed; - overflow: hidden; + /* position: fixed; */ + /* overflow: hidden; */ + width: 200px; margin: 0; + margin-left: 500px; + /* margin-left: 600px; */ padding: 7px 0; font-size: 20px; - bottom: 0; + /* bottom: 0; left: 0; - right: 0; + right: 0; */ background-color: #c80000; - color: #ffffff; + color: #000000; font-family: Verdana, Geneva, sans-serif; } diff --git a/src/item.js b/src/item.js index ffafc685..5e36f97a 100644 --- a/src/item.js +++ b/src/item.js @@ -4,7 +4,7 @@ import { SizeWatcher } from './size-watcher.js'; export class Item { constructor({ $el, direction, metadata, snapToNeighbor }) { const $container = document.createElement('div'); - $container.style.all = 'unset'; + // $container.style.all = 'unset'; $container.style.display = 'block'; $container.style.opacity = '0'; $container.style.pointerEvents = 'none'; diff --git a/src/marquee.js b/src/marquee.js index ec163092..f666b335 100644 --- a/src/marquee.js +++ b/src/marquee.js @@ -6,6 +6,9 @@ import { defer, deferException, toDomEl, first, last } from './helpers.js'; import { SizeWatcher } from './size-watcher.js'; const maxTranslateDistance = 500000; +// const maxTranslateDistance = 500000; +// const maxTranslateDistance = 1000; +const maxTranslateDistance = 500; const renderInterval = 100; export class Marquee { @@ -49,9 +52,9 @@ export class Marquee { this._visible = !!document.hidden; this._waitingForRaf = false; const $window = document.createElement('div'); - $window.style.all = 'unset'; + // $window.style.all = 'unset'; $window.style.display = 'block'; - $window.style.overflow = 'hidden'; + // $window.style.overflow = 'hidden'; $window.style.position = 'relative'; if (this._direction === DIRECTION.DOWN) { $window.style.height = '100%'; @@ -67,7 +70,7 @@ export class Marquee { this._updateWindowInverseSize(); const $moving = document.createElement('div'); this._$moving = $moving; - $moving.style.all = 'unset'; + // $moving.style.all = 'unset'; $moving.style.display = 'block'; $moving.style.position = 'absolute'; $moving.style.left = '0'; diff --git a/src/slider.js b/src/slider.js index c6975f10..4371f0e0 100644 --- a/src/slider.js +++ b/src/slider.js @@ -1,6 +1,7 @@ import { DIRECTION } from './direction'; -const transitionDuration = 30000; +// const transitionDuration = 30000; +const transitionDuration = 15000; export class Slider { constructor($el, direction) { @@ -10,6 +11,7 @@ export class Slider { } setOffset(offset, rate, force) { + // force = true; const transitionState = this._transitionState; const rateChanged = !transitionState || transitionState.rate !== rate; if (transitionState && !force) { @@ -19,6 +21,8 @@ export class Slider { } } + // if (offset === 0) offset = 300; + if (force || rateChanged) { if (this._direction === DIRECTION.RIGHT) { this._$el.style.transform = `translateX(${offset}px)`; @@ -28,10 +32,13 @@ export class Slider { this._$el.style.transition = 'none'; this._$el.offsetLeft; + console.log('offset left', offset); } if (rate && (force || rateChanged)) { this._$el.style.transition = `transform ${transitionDuration}ms linear`; + + console.log('updating transition'); } if (rate) {