From e0e95fcf5626a52a59dada4abd4a083dd506bd41 Mon Sep 17 00:00:00 2001 From: Tom Jenkinson Date: Wed, 4 Dec 2024 22:11:40 +0000 Subject: [PATCH 1/4] 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) { From 55fecff0848c3071b8c1039fc62ad40b447979bb Mon Sep 17 00:00:00 2001 From: Tom Jenkinson Date: Wed, 4 Dec 2024 22:15:07 +0000 Subject: [PATCH 2/4] Update marquee.js --- src/marquee.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/marquee.js b/src/marquee.js index f666b335..62688c2c 100644 --- a/src/marquee.js +++ b/src/marquee.js @@ -5,7 +5,6 @@ import { DIRECTION } from './direction.js'; 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; From e3b3dc3122296a4edf850ffbe220e59a0acc6ca9 Mon Sep 17 00:00:00 2001 From: Tom Jenkinson Date: Wed, 4 Dec 2024 22:15:59 +0000 Subject: [PATCH 3/4] Update main.ts --- demo/src/main.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/demo/src/main.ts b/demo/src/main.ts index d0a62950..878754a2 100644 --- a/demo/src/main.ts +++ b/demo/src/main.ts @@ -1,5 +1,5 @@ import './style.css'; -import { Marquee, loop, LoopReturn } from 'dynamic-marquee'; +import { Marquee, LoopReturn } from 'dynamic-marquee'; declare global { interface Window { From 9179c575e49c2a7a9104bc0ace8273c07b60f63b Mon Sep 17 00:00:00 2001 From: Tom Jenkinson Date: Wed, 4 Dec 2024 22:16:07 +0000 Subject: [PATCH 4/4] Update main.ts --- demo/src/main.ts | 21 --------------------- 1 file changed, 21 deletions(-) diff --git a/demo/src/main.ts b/demo/src/main.ts index 878754a2..fcfd4492 100644 --- a/demo/src/main.ts +++ b/demo/src/main.ts @@ -15,27 +15,6 @@ const marquee = (window.m = new Marquee($marquee, { // rate: -500, })); -// 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,