@pelagiccreatures/sargasso - npm Package Compare versions

Comparing version 0.6.0 to 0.6.1

example/app-bundle.es.js

@@ -2038,2 +2038,111 @@ var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 
+class Noisy extends Sargasso {
+	constructor (element, options = {}) {
+		super(element, {
+			watchDOM: true,
+			watchScroll: true,
+			watchResize: true,
+			watchViewport: true,
+			watchOrientation: true
+		});
+		this.logIt('constructor');
+	}
+
+	start () {
+		super.start();
+		this.logIt('start');
+
+		const task = `let counters= {}
+			onmessage = async (e) => {
+				if(!counters[e.data.uid]) { counters[e.data.uid] = e.data.count }
+
+				setInterval(()=>{
+					self.postMessage({ uid: e.data.uid, count: ++counters[e.data.uid] })
+				},4000)
+			}`;
+
+		this.workerStart('noisy', task);
+
+		this.workerPostMessage('noisy', {
+			count: 0
+		});
+	}
+
+	sleep () {
+		super.sleep();
+		this.logIt('sleep');
+	}
+
+	destroy () {
+		this.logIt('destroy');
+		super.destroy();
+	}
+
+	DOMChanged () {
+		super.DOMChanged();
+		this.logIt('DOMChanged');
+	}
+
+	didScroll () {
+		super.didScroll();
+		this.logIt('didScroll');
+	}
+
+	didResize () {
+		super.didResize();
+		this.logIt('didResize');
+	}
+
+	enterViewport () {
+		super.enterViewport();
+		this.logIt('enterViewport');
+	}
+
+	exitViewport () {
+		super.exitViewport();
+		this.logIt('exitViewport');
+	}
+
+	enterFullscreen () {
+		super.enterFullscreen();
+		this.logIt('enterFullscreen');
+	}
+
+	exitFullscreen () {
+		super.exitFullscreen();
+		this.logIt('exitFullscreen');
+	}
+
+	newPage (old, newPage) {
+		super.newPage();
+		this.logIt('newPage');
+	}
+
+	didBreakpoint () {
+		super.didBreakpoint();
+		this.logIt('didBreakpoint');
+	}
+
+	elementEvent (e) {
+		super.elementEvent();
+		this.logIt('elementEvent');
+	}
+
+	workerOnMessage (id, data) {
+		this.logIt('workerOnMessage ' + id + ' slowly counting... ' + data.count);
+		super.workerOnMessage(id, data);
+	}
+
+	stopWorker (id) {
+		this.logIt('stopWorker ' + id);
+		super.stopWorker(id);
+	}
+
+	logIt (message) {
+		console.log(this.constructor.name, this.element.id, this.uid, message);
+	}
+}
+
+registerSargassoClass('Noisy', Noisy);
+
 /*
@@ -2083,2 +2192,43 @@ example ES6 app entrypoint for bundling a site app
 
+class MyButtonClass extends Sargasso {
+	constructor (element, options = {}) {
+		options.watchViewport = true; // tell me when I am visible
+		super(element, options); // important!
+	}
+
+	// listen for click
+	start () {
+		super.start(); // important!
+		this.clicker = (e) => {
+			this.clicked();
+		};
+		this.element.addEventListener('click', this.clicker, false);
+	}
+
+	// cleanup listener
+	sleep () {
+		this.element.removeEventListener('click', this.clicker);
+		super.sleep(); // important!
+	}
+
+	// use an animation frame to mutate the DOM
+	clicked () {
+		const frame = () => { // set up a DOM mutation
+			this.addClass('clicked');
+			this.element.textContent = 'Clicked!';
+		};
+		this.queueFrame(frame); // schedule it
+	}
+
+	enterViewport () {
+		// do some stuff such as modify element html or classes
+		const frame = () => {
+			this.element.textContent = 'Hello viewport! Click me!';
+		};
+		this.queueFrame(frame);
+	}
+}
+
+registerSargassoClass('MyButtonClass', MyButtonClass);
+
 const loadPageHandler = bootSargasso({
@@ -2085,0 +2235,0 @@ hijax: {

example/app.js

@@ -10,2 +10,7 @@ /*
 
+import {
+	Noisy
+}
+	from './lib/Noisy.js'
+
 class myClass extends Sargasso {
@@ -51,2 +56,43 @@ constructor (element, options = {}) {
 
+class MyButtonClass extends Sargasso {
+	constructor (element, options = {}) {
+		options.watchViewport = true // tell me when I am visible
+		super(element, options) // important!
+	}
+
+	// listen for click
+	start () {
+		super.start() // important!
+		this.clicker = (e) => {
+			this.clicked()
+		}
+		this.element.addEventListener('click', this.clicker, false)
+	}
+
+	// cleanup listener
+	sleep () {
+		this.element.removeEventListener('click', this.clicker)
+		super.sleep() // important!
+	}
+
+	// use an animation frame to mutate the DOM
+	clicked () {
+		const frame = () => { // set up a DOM mutation
+			this.addClass('clicked')
+			this.element.textContent = 'Clicked!'
+		}
+		this.queueFrame(frame) // schedule it
+	}
+
+	enterViewport () {
+		// do some stuff such as modify element html or classes
+		const frame = () => {
+			this.element.textContent = 'Hello viewport! Click me!'
+		}
+		this.queueFrame(frame)
+	}
+}
+
+registerSargassoClass('MyButtonClass', MyButtonClass)
+
 const loadPageHandler = bootSargasso({
@@ -53,0 +99,0 @@ hijax: {

index.js

@@ -42,2 +42,7 @@ /*
 
+import {
+	elementTools
+}
+	from './lib/utils.js'
+
 let loadPage
@@ -72,6 +77,7 @@
 	window.bootSargasso = bootSargasso
+	window.elementTools = elementTools
 }
 
 export {
-	Sargasso, registerSargassoClass, bootSargasso
+	Sargasso, registerSargassoClass, bootSargasso, elementTools
 }

lib/utils.js

@@ -79,4 +79,4 @@ /**
 	isVisible: _isVisible,
-	inViewPort: _inViewPort
-	// setCSS: _css
+	inViewPort: _inViewPort,
+	setCSS: _css
 }
@@ -83,0 +83,0 @@

package.json

 {
 	"name": "@pelagiccreatures/sargasso",
-	"version": "0.6.0",
+	"version": "0.6.1",
 	"description": "Simple, Fast, Reactive, supervised Javascript controllers for html elements.",
@@ -5,0 +5,0 @@ "keywords": [

README.md

@@ -171,4 +171,3 @@ # @PelagicCreatures/Sargasso
 class MyButtonClass extends Sargasso {
-
-	constructor(element, options = {}) {
+	constructor (element, options = {}) {
 		options.watchViewport = true // tell me when I am visible
@@ -179,3 +178,3 @@ super(element, options) // important!
 	// listen for click
-	start() {
+	start () {
 		super.start() // important!
@@ -189,3 +188,3 @@ this.clicker = (e) => {
 	// cleanup listener
-	sleep() {
+	sleep () {
 		this.element.removeEventListener('click', this.clicker)
@@ -196,5 +195,6 @@ super.sleep() // important!
 	// use an animation frame to mutate the DOM
-	clicked() {
-		let frame = () { // set up a DOM mutation
+	clicked () {
+		const frame = () => { // set up a DOM mutation
 			this.addClass('clicked')
+			this.element.textContent = 'Clicked!'
 		}
@@ -204,6 +204,6 @@ this.queueFrame(frame) // schedule it
 
-	enterViewport() {
+	enterViewport () {
 		// do some stuff such as modify element html or classes
-		let frame = () => {
-			this.element.innerHTML = '<p>Hello viewport! Please click me!'
+		const frame = () => {
+			this.element.textContent = 'Hello viewport! Click me!'
 		}
@@ -214,2 +214,4 @@ this.queueFrame(frame)
 
+registerSargassoClass('MyButtonClass', MyButtonClass)
+
 Then in HTML:
@@ -216,0 +218,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Lines of code

9030

increased by10.51%

Number of lines in readme file

324

increased by0.62%

Worsened metrics

Total package byte prevSize

790948

decreased by-13.23%

No dependency changes