remarqueeble 0.1.0

package/dist/remarqueeble.mjs

@@ -0,0 +1,303 @@
+/*! remarqueeble v0.1.0 | (c) 2026 Rémino Rem <https://remino.net/> | ISC Licence */
+//#region src/lib/remarqueeble.ts
+var DEFAULT_DIRECTION = "left";
+var DEFAULT_BEHAVIOR = "scroll";
+var DEFAULT_SCROLL_AMOUNT = 6;
+var DEFAULT_SCROLL_DELAY = 85;
+var MIN_SCROLL_DELAY = 60;
+var DEFAULT_VERTICAL_HEIGHT = "200px";
+var DEFAULT_HOST_WIDTH = "calc(100% - (var(--attr-hspace, 0px) * 2))";
+var ATTR_DIRECTION = "direction";
+var ATTR_BEHAVIOR = "behavior";
+var ATTR_SCROLL_AMOUNT = "scrollamount";
+var ATTR_SCROLL_DELAY = "scrolldelay";
+var ATTR_TRUE_SPEED = "truespeed";
+var ATTR_LOOP = "loop";
+var ATTR_BG_COLOR = "bgcolor";
+var ATTR_WIDTH = "width";
+var ATTR_HEIGHT = "height";
+var ATTR_HSPACE = "hspace";
+var ATTR_VSPACE = "vspace";
+var CSS_VAR_WIDTH = "--attr-width";
+var CSS_VAR_HEIGHT = "--attr-height";
+var CSS_VAR_HSPACE = "--attr-hspace";
+var CSS_VAR_VSPACE = "--attr-vspace";
+var CSS_VAR_BG_COLOR = "--attr-bgcolor";
+var HTMLElementBase = globalThis.HTMLElement ?? class {};
+var parsePresentationalDimension = (value) => {
+	if (value === null) return null;
+	const trimmed = value.trim();
+	if (trimmed === "") return null;
+	if (/^[+-]?(?:\d+|\d*\.\d+)$/.test(trimmed)) return `${trimmed}px`;
+	return globalThis.CSS?.supports("width", trimmed) ? trimmed : null;
+};
+var parseLegacyColor = (value) => {
+	if (value === null) return null;
+	const trimmed = value.trim();
+	if (trimmed === "") return null;
+	return globalThis.CSS?.supports("background-color", trimmed) ? trimmed : null;
+};
+var ATTRIBUTE_HINTS = [
+	{
+		attribute: ATTR_WIDTH,
+		cssVar: CSS_VAR_WIDTH,
+		parser: parsePresentationalDimension
+	},
+	{
+		attribute: ATTR_HEIGHT,
+		cssVar: CSS_VAR_HEIGHT,
+		parser: parsePresentationalDimension,
+		fallback(element) {
+			return element.isVerticalDirection && !element.hasAttribute(ATTR_HEIGHT) ? DEFAULT_VERTICAL_HEIGHT : null;
+		}
+	},
+	{
+		attribute: ATTR_HSPACE,
+		cssVar: CSS_VAR_HSPACE,
+		parser: parsePresentationalDimension
+	},
+	{
+		attribute: ATTR_VSPACE,
+		cssVar: CSS_VAR_VSPACE,
+		parser: parsePresentationalDimension
+	},
+	{
+		attribute: ATTR_BG_COLOR,
+		cssVar: CSS_VAR_BG_COLOR,
+		parser: parseLegacyColor
+	}
+];
+var RemarqueebleElement = class extends HTMLElementBase {
+	static observedAttributes = [
+		ATTR_DIRECTION,
+		ATTR_BEHAVIOR,
+		ATTR_SCROLL_AMOUNT,
+		ATTR_SCROLL_DELAY,
+		ATTR_TRUE_SPEED,
+		ATTR_LOOP,
+		ATTR_BG_COLOR,
+		ATTR_WIDTH,
+		ATTR_HEIGHT,
+		ATTR_HSPACE,
+		ATTR_VSPACE
+	];
+	track;
+	running = false;
+	position = 0;
+	lastTime = null;
+	loopsDone = 0;
+	forward = true;
+	rafId = null;
+	constructor() {
+		super();
+		const shadowRoot = this.attachShadow({ mode: "open" });
+		shadowRoot.innerHTML = `
+			<style>
+				:host {
+					display: inline-block;
+					text-align: initial;
+					overflow: hidden !important;
+					white-space: nowrap;
+					width: var(${CSS_VAR_WIDTH}, ${DEFAULT_HOST_WIDTH});
+					height: var(${CSS_VAR_HEIGHT}, auto);
+					margin-inline: var(${CSS_VAR_HSPACE}, 0px);
+					margin-block: var(${CSS_VAR_VSPACE}, 0px);
+					background-color: var(${CSS_VAR_BG_COLOR}, transparent);
+					box-sizing: border-box;
+				}
+
+				:host([direction="up"]),
+				:host([direction="down"]) {
+					white-space: normal;
+				}
+
+				.track {
+					display: inline-block;
+					will-change: transform;
+				}
+			</style>
+
+			<span class="track"><slot></slot></span>
+		`;
+		const track = shadowRoot.querySelector(".track");
+		if (!track) throw new Error("Remarqueeble track element was not created.");
+		this.track = track;
+	}
+	connectedCallback() {
+		this.running = true;
+		this.syncPresentationalHints();
+		requestAnimationFrame(() => {
+			if (!this.isConnected || !this.running) return;
+			this.reset();
+			this.tick();
+		});
+	}
+	disconnectedCallback() {
+		this.running = false;
+		this.lastTime = null;
+		if (this.rafId !== null) {
+			cancelAnimationFrame(this.rafId);
+			this.rafId = null;
+		}
+	}
+	attributeChangedCallback(_name, oldValue, newValue) {
+		if (oldValue === newValue) return;
+		this.syncPresentationalHints();
+		if (this.isConnected) this.reset();
+	}
+	get direction() {
+		return this.getAttribute(ATTR_DIRECTION) || DEFAULT_DIRECTION;
+	}
+	get behavior() {
+		return this.getAttribute(ATTR_BEHAVIOR) || DEFAULT_BEHAVIOR;
+	}
+	get scrollAmount() {
+		const raw = this.getAttribute(ATTR_SCROLL_AMOUNT);
+		const value = raw === null || raw.trim() === "" ? NaN : Number(raw);
+		return Number.isFinite(value) && value >= 0 ? value : DEFAULT_SCROLL_AMOUNT;
+	}
+	get scrollDelay() {
+		const raw = this.getAttribute(ATTR_SCROLL_DELAY);
+		const value = raw === null || raw.trim() === "" ? NaN : Number(raw);
+		const delay = Number.isFinite(value) && value >= 0 ? value : DEFAULT_SCROLL_DELAY;
+		if (this.hasAttribute(ATTR_TRUE_SPEED)) return delay;
+		return Math.max(delay, MIN_SCROLL_DELAY);
+	}
+	get loop() {
+		const value = this.getAttribute(ATTR_LOOP);
+		return value === null ? -1 : Number(value);
+	}
+	get directionSign() {
+		return this.direction === "right" || this.direction === "down" ? 1 : -1;
+	}
+	get isVerticalDirection() {
+		return this.direction === "up" || this.direction === "down";
+	}
+	start() {
+		if (this.running) return;
+		this.running = true;
+		this.lastTime = null;
+		this.tick();
+	}
+	stop() {
+		this.running = false;
+		if (this.rafId !== null) {
+			cancelAnimationFrame(this.rafId);
+			this.rafId = null;
+		}
+	}
+	syncPresentationalHints() {
+		for (const hint of ATTRIBUTE_HINTS) this.syncVar(hint);
+	}
+	syncVar(hint) {
+		const raw = this.getAttribute(hint.attribute);
+		const value = hint.parser(raw);
+		const fallback = hint.fallback ? hint.fallback(this) : null;
+		if (value == null) {
+			if (fallback == null) this.style.removeProperty(hint.cssVar);
+			else this.style.setProperty(hint.cssVar, fallback);
+			return;
+		}
+		this.style.setProperty(hint.cssVar, value);
+	}
+	reset() {
+		const hostSize = this.getHostSize();
+		const trackSize = this.getTrackSize();
+		this.loopsDone = 0;
+		this.forward = true;
+		this.position = this.behavior === "alternate" ? this.getAlternateStartPosition(hostSize, trackSize) : this.getStartPosition(hostSize, trackSize);
+		this.render();
+	}
+	getHostSize() {
+		return this.isVerticalDirection ? this.clientHeight : this.clientWidth;
+	}
+	getTrackSize() {
+		return this.isVerticalDirection ? this.track.offsetHeight : this.track.offsetWidth;
+	}
+	getStartPosition(hostSize, trackSize) {
+		return this.directionSign < 0 ? hostSize : -trackSize;
+	}
+	getFlushEndPosition(hostSize, trackSize) {
+		return this.directionSign < 0 ? 0 : hostSize - trackSize;
+	}
+	getOffEndPosition(hostSize, trackSize) {
+		return this.directionSign < 0 ? -trackSize : hostSize;
+	}
+	getSlideEndPosition(hostSize, trackSize) {
+		return this.directionSign < 0 ? 0 : hostSize - trackSize;
+	}
+	getAlternateStartPosition(hostSize, trackSize) {
+		return this.directionSign < 0 ? hostSize - trackSize : 0;
+	}
+	tick(time = performance.now()) {
+		if (!this.running) return;
+		if (this.lastTime === null) this.lastTime = time;
+		if (time - this.lastTime >= this.scrollDelay) {
+			this.step();
+			this.lastTime = time;
+		}
+		if (!this.running) return;
+		this.rafId = requestAnimationFrame((nextTime) => this.tick(nextTime));
+	}
+	step() {
+		const hostSize = this.getHostSize();
+		const trackSize = this.getTrackSize();
+		const startPosition = this.getStartPosition(hostSize, trackSize);
+		const flushEndPosition = this.getFlushEndPosition(hostSize, trackSize);
+		const offEndPosition = this.getOffEndPosition(hostSize, trackSize);
+		const slideEndPosition = this.getSlideEndPosition(hostSize, trackSize);
+		const alternateStartPosition = this.getAlternateStartPosition(hostSize, trackSize);
+		const amount = this.scrollAmount;
+		const delta = this.directionSign * amount;
+		if (this.behavior === "alternate") {
+			this.position += this.forward ? delta : -delta;
+			if (this.forward) {
+				if (this.directionSign < 0 && this.position <= flushEndPosition || this.directionSign > 0 && this.position >= flushEndPosition) {
+					this.position = flushEndPosition;
+					this.forward = false;
+					this.incrementLoopCount();
+					if (this.shouldStopAfterLoop()) this.stop();
+				}
+			} else if (this.directionSign < 0 && this.position >= alternateStartPosition || this.directionSign > 0 && this.position <= alternateStartPosition) {
+				this.position = alternateStartPosition;
+				this.forward = true;
+				this.incrementLoopCount();
+				if (this.shouldStopAfterLoop()) this.stop();
+			}
+		} else if (this.behavior === "slide") {
+			this.position += delta;
+			if (this.directionSign < 0 && this.position <= slideEndPosition || this.directionSign > 0 && this.position >= slideEndPosition) {
+				this.position = slideEndPosition;
+				this.incrementLoopCount();
+				if (!this.hasAttribute(ATTR_LOOP) || this.loop <= 0) this.stop();
+				else if (this.shouldStopAfterLoop()) this.stop();
+				else this.position = startPosition;
+			}
+		} else {
+			this.position += delta;
+			if (this.directionSign < 0 && this.position <= offEndPosition || this.directionSign > 0 && this.position >= offEndPosition) {
+				this.position = startPosition;
+				this.incrementLoopCount();
+				if (this.shouldStopAfterLoop()) this.stop();
+			}
+		}
+		this.render();
+	}
+	incrementLoopCount() {
+		this.loopsDone++;
+	}
+	shouldStopAfterLoop() {
+		return this.hasAttribute(ATTR_LOOP) && this.loop > 0 && this.loopsDone >= this.loop;
+	}
+	render() {
+		if (this.isVerticalDirection) this.track.style.transform = `translateY(${this.position}px)`;
+		else this.track.style.transform = `translateX(${this.position}px)`;
+	}
+};
+var defineRemarqueebleElements = () => {
+	if (typeof customElements === "undefined") return;
+	if (!customElements.get("re-marquee")) customElements.define("re-marquee", RemarqueebleElement);
+	if (!customElements.get("re-marquee-ble")) customElements.define("re-marquee-ble", RemarqueebleElement);
+};
+//#endregion
+export { RemarqueebleElement, defineRemarqueebleElements, parseLegacyColor, parsePresentationalDimension };

package/dist/remarqueeble.umd.js

@@ -0,0 +1,29 @@
+/*! remarqueeble v0.1.0 | (c) 2026 Rémino Rem <https://remino.net/> | ISC Licence */
+(function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports):typeof define==`function`&&define.amd?define([`exports`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e.remarqueeble={}))})(this,function(e){Object.defineProperty(e,Symbol.toStringTag,{value:`Module`});var t=`left`,n=`scroll`,r=6,i=85,a=60,o=`200px`,s=`calc(100% - (var(--attr-hspace, 0px) * 2))`,c=`direction`,l=`behavior`,u=`scrollamount`,d=`scrolldelay`,f=`truespeed`,p=`loop`,m=`bgcolor`,h=`width`,g=`height`,_=`hspace`,v=`vspace`,y=`--attr-width`,b=`--attr-height`,x=`--attr-hspace`,S=`--attr-vspace`,C=`--attr-bgcolor`,w=globalThis.HTMLElement??class{},T=e=>{if(e===null)return null;let t=e.trim();return t===``?null:/^[+-]?(?:\d+|\d*\.\d+)$/.test(t)?`${t}px`:globalThis.CSS?.supports(`width`,t)?t:null},E=[{attribute:h,cssVar:y,parser:T},{attribute:g,cssVar:b,parser:T,fallback(e){return e.isVerticalDirection&&!e.hasAttribute(g)?o:null}},{attribute:_,cssVar:x,parser:T},{attribute:v,cssVar:S,parser:T},{attribute:m,cssVar:C,parser:e=>{if(e===null)return null;let t=e.trim();return t===``?null:globalThis.CSS?.supports(`background-color`,t)?t:null}}],D=class extends w{static observedAttributes=[c,l,u,d,f,p,m,h,g,_,v];track;running=!1;position=0;lastTime=null;loopsDone=0;forward=!0;rafId=null;constructor(){super();let e=this.attachShadow({mode:`open`});e.innerHTML=`
+			<style>
+				:host {
+					display: inline-block;
+					text-align: initial;
+					overflow: hidden !important;
+					white-space: nowrap;
+					width: var(${y}, ${s});
+					height: var(${b}, auto);
+					margin-inline: var(${x}, 0px);
+					margin-block: var(${S}, 0px);
+					background-color: var(${C}, transparent);
+					box-sizing: border-box;
+				}
+
+				:host([direction="up"]),
+				:host([direction="down"]) {
+					white-space: normal;
+				}
+
+				.track {
+					display: inline-block;
+					will-change: transform;
+				}
+			</style>
+
+			<span class="track"><slot></slot></span>
+		`;let t=e.querySelector(`.track`);if(!t)throw Error(`Remarqueeble track element was not created.`);this.track=t}connectedCallback(){this.running=!0,this.syncPresentationalHints(),requestAnimationFrame(()=>{!this.isConnected||!this.running||(this.reset(),this.tick())})}disconnectedCallback(){this.running=!1,this.lastTime=null,this.rafId!==null&&(cancelAnimationFrame(this.rafId),this.rafId=null)}attributeChangedCallback(e,t,n){t!==n&&(this.syncPresentationalHints(),this.isConnected&&this.reset())}get direction(){return this.getAttribute(c)||t}get behavior(){return this.getAttribute(l)||n}get scrollAmount(){let e=this.getAttribute(u),t=e===null||e.trim()===``?NaN:Number(e);return Number.isFinite(t)&&t>=0?t:r}get scrollDelay(){let e=this.getAttribute(d),t=e===null||e.trim()===``?NaN:Number(e),n=Number.isFinite(t)&&t>=0?t:i;return this.hasAttribute(f)?n:Math.max(n,a)}get loop(){let e=this.getAttribute(p);return e===null?-1:Number(e)}get directionSign(){return this.direction===`right`||this.direction===`down`?1:-1}get isVerticalDirection(){return this.direction===`up`||this.direction===`down`}start(){this.running||(this.running=!0,this.lastTime=null,this.tick())}stop(){this.running=!1,this.rafId!==null&&(cancelAnimationFrame(this.rafId),this.rafId=null)}syncPresentationalHints(){for(let e of E)this.syncVar(e)}syncVar(e){let t=this.getAttribute(e.attribute),n=e.parser(t),r=e.fallback?e.fallback(this):null;if(n==null){r==null?this.style.removeProperty(e.cssVar):this.style.setProperty(e.cssVar,r);return}this.style.setProperty(e.cssVar,n)}reset(){let e=this.getHostSize(),t=this.getTrackSize();this.loopsDone=0,this.forward=!0,this.position=this.behavior===`alternate`?this.getAlternateStartPosition(e,t):this.getStartPosition(e,t),this.render()}getHostSize(){return this.isVerticalDirection?this.clientHeight:this.clientWidth}getTrackSize(){return this.isVerticalDirection?this.track.offsetHeight:this.track.offsetWidth}getStartPosition(e,t){return this.directionSign<0?e:-t}getFlushEndPosition(e,t){return this.directionSign<0?0:e-t}getOffEndPosition(e,t){return this.directionSign<0?-t:e}getSlideEndPosition(e,t){return this.directionSign<0?0:e-t}getAlternateStartPosition(e,t){return this.directionSign<0?e-t:0}tick(e=performance.now()){this.running&&(this.lastTime===null&&(this.lastTime=e),e-this.lastTime>=this.scrollDelay&&(this.step(),this.lastTime=e),this.running&&(this.rafId=requestAnimationFrame(e=>this.tick(e))))}step(){let e=this.getHostSize(),t=this.getTrackSize(),n=this.getStartPosition(e,t),r=this.getFlushEndPosition(e,t),i=this.getOffEndPosition(e,t),a=this.getSlideEndPosition(e,t),o=this.getAlternateStartPosition(e,t),s=this.scrollAmount,c=this.directionSign*s;this.behavior===`alternate`?(this.position+=this.forward?c:-c,this.forward?(this.directionSign<0&&this.position<=r||this.directionSign>0&&this.position>=r)&&(this.position=r,this.forward=!1,this.incrementLoopCount(),this.shouldStopAfterLoop()&&this.stop()):(this.directionSign<0&&this.position>=o||this.directionSign>0&&this.position<=o)&&(this.position=o,this.forward=!0,this.incrementLoopCount(),this.shouldStopAfterLoop()&&this.stop())):this.behavior===`slide`?(this.position+=c,(this.directionSign<0&&this.position<=a||this.directionSign>0&&this.position>=a)&&(this.position=a,this.incrementLoopCount(),!this.hasAttribute(p)||this.loop<=0||this.shouldStopAfterLoop()?this.stop():this.position=n)):(this.position+=c,(this.directionSign<0&&this.position<=i||this.directionSign>0&&this.position>=i)&&(this.position=n,this.incrementLoopCount(),this.shouldStopAfterLoop()&&this.stop())),this.render()}incrementLoopCount(){this.loopsDone++}shouldStopAfterLoop(){return this.hasAttribute(p)&&this.loop>0&&this.loopsDone>=this.loop}render(){this.isVerticalDirection?this.track.style.transform=`translateY(${this.position}px)`:this.track.style.transform=`translateX(${this.position}px)`}},O=()=>{typeof customElements>`u`||(customElements.get(`re-marquee`)||customElements.define(`re-marquee`,D),customElements.get(`re-marquee-ble`)||customElements.define(`re-marquee-ble`,D))};O(),e.defineRemarqueebleElements=O});

package/package.json

@@ -0,0 +1,81 @@
+{
+	"author": {
+		"name": "Rémino Rem",
+		"url": "https://remino.net/"
+	},
+	"browser": "dist/remarqueeble.umd.js",
+	"description": "Custom element tribute to the cursed glory of marquee.",
+	"dependencies": {
+		"@remino/astro-middleware": "^0.1.0",
+		"@remino/astro-site-nav": "^0.4.2",
+		"@remino/directive": "^5.3.4"
+	},
+	"devDependencies": {
+		"@astrojs/check": "^0.9.4",
+		"@eslint/js": "^10.0.1",
+		"astro": "^7.0.0",
+		"astro-compressor": "^1.3.0",
+		"astro-eslint-parser": "^1.4.0",
+		"astro-minify-html": "^0.1.1",
+		"eslint": "^10.6.0",
+		"eslint-config-prettier": "^10.1.8",
+		"eslint-plugin-astro": "^1.7.0",
+		"globals": "^17.7.0",
+		"jasmine": "^6.3.0",
+		"prettier": "^3.7.4",
+		"prettier-plugin-astro": "^0.14.1",
+		"tsx": "^4.22.4",
+		"typescript": "^5.9.3",
+		"typescript-eslint": "^8.62.0",
+		"vite": "^8.1.0"
+	},
+	"exports": {
+		".": {
+			"types": "./dist/remarqueeble.d.ts",
+			"import": "./dist/remarqueeble.mjs",
+			"require": "./dist/remarqueeble.cjs"
+		},
+		"./auto": {
+			"types": "./dist/auto.d.ts",
+			"import": "./dist/remarqueeble-auto.mjs",
+			"require": "./dist/remarqueeble-auto.cjs"
+		}
+	},
+	"files": [
+		"dist/*"
+	],
+	"homepage": "https://remino.net/remarqueeble/",
+	"keywords": [
+		"custom-element",
+		"marquee",
+		"web-components"
+	],
+	"license": "ISC",
+	"main": "dist/remarqueeble.cjs",
+	"module": "dist/remarqueeble.mjs",
+	"name": "remarqueeble",
+	"scripts": {
+		"build": "npm run js:build && npm run site:assets && astro build",
+		"dev": "astro dev",
+		"deploy": "rsdeploy -w",
+		"deploy:dryrun": "rsdeploy",
+		"docs:commit": "export COMMIT=\"$(git rev-parse HEAD)\" && cd deploy && git add . && git commit -m \"Add build for $COMMIT\"; true",
+		"docs:publish": "npm run build && npm run docs:commit && npm run deploy && npm run docs:push",
+		"docs:push": "cd deploy && git push origin",
+		"format": "prettier --write .",
+		"format:check": "prettier --check .",
+		"js:build": "node bin/build-js.mjs && tsc --emitDeclarationOnly",
+		"lib:build": "npm run js:build",
+		"lint": "eslint --fix .",
+		"lint:check": "eslint .",
+		"preview": "astro preview",
+		"site:assets": "true",
+		"start": "npm run dev",
+		"test": "tsx ./node_modules/jasmine/bin/jasmine.js",
+		"typecheck": "astro check && tsc --noEmit",
+		"version": "npm run build && git add dist"
+	},
+	"type": "module",
+	"types": "dist/remarqueeble.d.ts",
+	"version": "0.1.0"
+}