@pelagiccreatures/sargasso - npm Package Compare versions

Comparing version 0.8.1 to 0.8.2

example/app.js

@@ -102,3 +102,5 @@ /*
 		onLoading: function () {},
-		onExitPage: () => {},
+		onExitPage: () => {
+			utils.elementTools.off(document.body, 'click', '.event-target')
+		},
 		onEnterPage: () => {}
@@ -110,2 +112,6 @@ },
 
+utils.elementTools.on(document.body, 'click', '.event-target', (e) => {
+	console.log(e)
+})
+
 window.loadPageHandler = loadPageHandler

lib/boot.js

@@ -17,3 +17,3 @@ import {
 import {
-	startServices
+	theScrollWatcher
 }
@@ -25,3 +25,5 @@ from './Services.js'
 const bootSargasso = (options = {}) => {
-	startServices(options)
+	if (options.scrollElement) {
+		theScrollWatcher.setOptions(options)
+	}
 	const supervisor = new SargassoSupervisor(document.body, options)
@@ -28,0 +30,0 @@ supervisor.start(options)

lib/dependencies.js

@@ -5,6 +5,8 @@ import camelCase from 'lodash/camelCase'
 
+import kebabCase from 'lodash/kebabCase'
+
 import Cookies from 'js-cookie'
 
 export {
-	camelCase, debounce, Cookies
+	camelCase, debounce, kebabCase, Cookies
 }

lib/Noisy.js

@@ -19,5 +19,4 @@ import {
 	start () {
+		this.logIt('start')
 		super.start()
-		this.logIt('start')
-
 		const task = `let counters= {}
@@ -29,3 +28,3 @@ onmessage = async (e) => {
 					self.postMessage({ uid: e.data.uid, count: ++counters[e.data.uid] })
-				},4000)
+				},30000)
 			}`
@@ -46,3 +45,3 @@
 	destroy () {
-		this.logIt('destroy')
+		this.logIt('will destroy')
 		super.destroy()
@@ -52,49 +51,49 @@ }
 	DOMChanged () {
+		this.logIt('DOMChanged')
 		super.DOMChanged()
-		this.logIt('DOMChanged')
 	}
 
 	didScroll () {
+		this.logIt('didScroll')
 		super.didScroll()
-		this.logIt('didScroll')
 	}
 
 	didResize () {
+		this.logIt('didResize')
 		super.didResize()
-		this.logIt('didResize')
 	}
 
 	enterViewport () {
+		this.logIt('enterViewport')
 		super.enterViewport()
-		this.logIt('enterViewport')
 	}
 
 	exitViewport () {
+		this.logIt('exitViewport')
 		super.exitViewport()
-		this.logIt('exitViewport')
 	}
 
 	enterFullscreen () {
+		this.logIt('enterFullscreen')
 		super.enterFullscreen()
-		this.logIt('enterFullscreen')
 	}
 
 	exitFullscreen () {
+		this.logIt('exitFullscreen')
 		super.exitFullscreen()
-		this.logIt('exitFullscreen')
 	}
 
 	newPage (old, newPage) {
+		this.logIt('newPage')
 		super.newPage()
-		this.logIt('newPage')
 	}
 
 	didBreakpoint () {
+		this.logIt('didBreakpoint')
 		super.didBreakpoint()
-		this.logIt('didBreakpoint')
 	}
 
 	elementEvent (e) {
+		this.logIt('elementEvent')
 		super.elementEvent()
-		this.logIt('elementEvent')
 	}
@@ -101,0 +100,0 @@

lib/Sargasso.js

@@ -23,5 +23,12 @@ /**
 
+import {
+	kebabCase
+}
+	from './dependencies'
+
 let unique = 0
 const liveElements = []
 
+const supportsCustomElements = ('registerElement' in document)
+
 /*
@@ -45,2 +52,5 @@ All subclasses of Sargasso must register the class so that
 	registeredClasses[className] = object
+	if (supportsCustomElements) {
+		customElements.define('sargasso-' + kebabCase(className), object)
+	}
 }
@@ -57,6 +67,8 @@
 
-class Sargasso {
+class Sargasso extends HTMLElement {
 	constructor (element, options = {}) {
+		super()
 		this.uid = ++unique
-		this.element = element
+		this.element = element || this
+		this.isCustomElement = (this.element.tagName.toLowerCase() === 'sargasso-' + kebabCase(this.constructor.name))
 		this.options = options
@@ -68,3 +80,7 @@ this.pendingAnimationFrame = undefined
 		this.workers = {}
+		this.started = false
+		if (tracing) trace(this, 'constructor isCustomElement', this.isCustomElement)
+	}
 
+	start () {
 		const registeredResponsiveControllers = this.getMetaData('registeredResponsiveControllers') || []
@@ -76,7 +92,3 @@ registeredResponsiveControllers.push(this)
 		liveElements.push(this)
-	}
 
-	start () {
-		if (tracing) trace(this, 'start')
-
 		// subscribe to desired event services
@@ -114,2 +126,6 @@
 		this.element.addEventListener('sargasso', this.elementListener)
+
+		this.started = true
+
+		if (tracing) trace(this, 'start')
 	}
@@ -125,2 +141,10 @@
 
+	on (evt, selector, fn) {
+		elementTools.on(this.element, evt, selector, fn)
+	}
+
+	off (evt, selector, fn) {
+		elementTools.off(this.element, evt, selector, fn)
+	}
+
 	notifyAll (event, params) {
@@ -217,2 +241,6 @@ if (eventNames.indexOf(event) === -1) {
 		this.element.removeEventListener('sargasso', this.elementListener)
+
+		this.started = false
+
+		if (tracing) trace(this, 'sleep')
 	}
@@ -223,10 +251,10 @@
 	destroy () {
-		if (tracing) trace(this, 'destroy')
+		this.stopAllWorkers()
 
 		this.flushQueue()
 
-		this.sleep()
+		if (this.started) {
+			this.sleep()
+		}
 
-		this.stopAllWorkers()
-
 		const registeredResponsiveControllers = this.getMetaData('registeredResponsiveControllers')
@@ -247,2 +275,4 @@ if (registeredResponsiveControllers) {
 		}
+
+		if (tracing) trace(this, 'destroy')
 	}
@@ -450,2 +480,21 @@
 	}
+
+	// playing with web components / custom elements
+	connectedCallback () {
+		if (tracing) trace(this, 'Custom Element connectedCallback')
+		this.start()
+	}
+
+	disconnectedCallback () {
+		if (tracing) trace(this, 'Custom Element disconnectedCallback')
+		this.destroy()
+	}
+
+	adoptedCallback () {
+		if (tracing) trace(this, 'Custom Element adoptedCallback')
+	}
+
+	attributeChangedCallback (name, oldValue, newValue) {
+		if (tracing) trace(this, 'Custom Element attributeChangedCallback', name)
+	}
 }
@@ -452,0 +501,0 @@

lib/SargassoSupervisor.js

@@ -24,2 +24,7 @@ /**
 
+const tracing = false
+const trace = (obj, message, blob) => {
+	console.log(obj.constructor.name, obj.uid, message, blob || null)
+}
+
 class SargassoSupervisor extends Sargasso {
@@ -70,3 +75,3 @@ constructor (element, options = {}) {
 		for (let i = 0; i < liveElements.length; i++) {
-			if (liveElements[i].mortal && !document.body.contains(liveElements[i].element)) {
+			if (liveElements[i].mortal && !liveElements[i].isCustomElement && !document.body.contains(liveElements[i].element)) {
 				toCleanup.push(liveElements[i])
@@ -76,2 +81,3 @@ }
 		for (let i = 0; i < toCleanup.length; i++) {
+			if (tracing) trace(this, 'destroying', toCleanup[i])
 			toCleanup[i].destroy()
@@ -78,0 +84,0 @@ }

lib/Services.js

@@ -139,3 +139,3 @@ /**
 class ScrollWatcher extends ObserverSubscriptionManager {
-	constructor (options) {
+	constructor (options = {}) {
 		super(options)
@@ -169,2 +169,8 @@
 
+	setOptions (options = {}) {
+		this.sleep()
+		this.scrollElement = options.scrollElement || window
+		this.wakeup()
+	}
+
 	subscribe (observer) {
@@ -362,12 +368,10 @@ super.subscribe(observer)
 
-const startServices = (options) => {
-	theDOMWatcher = new DOMWatcher(options)
-	theScrollWatcher = new ScrollWatcher(options)
-	theResizeWatcher = new ResizeWatcher(options)
-	theOrientationWatcher = new OrientationWatcher(options)
-	theWorkerWatcher = new WorkerWatcher(options)
-}
+theDOMWatcher = new DOMWatcher()
+theScrollWatcher = new ScrollWatcher()
+theResizeWatcher = new ResizeWatcher()
+theOrientationWatcher = new OrientationWatcher()
+theWorkerWatcher = new WorkerWatcher()
 
 export {
-	startServices, theDOMWatcher, theScrollWatcher, theResizeWatcher, theOrientationWatcher, theWorkerWatcher
+	theDOMWatcher, theScrollWatcher, theResizeWatcher, theOrientationWatcher, theWorkerWatcher
 }

lib/utils.js

@@ -91,2 +91,39 @@ /**
 
+function isFunction (fn) {
+	return fn && {}.toString.call(fn) === '[object Function]'
+}
+
+const on = function (container, events, selector, fn) {
+	const k = 'on:' + events + '-' + selector
+	const handler = (e) => {
+		if (isFunction(selector)) { // no selector, 3rd param is function
+			fn = selector
+			if (e.target === container) {
+				fn(e)
+			}
+		} else {
+			Array.from(container.querySelectorAll(selector)).forEach((el) => {
+				if (e.target === el) {
+					fn(e)
+				}
+			})
+		}
+	}
+	_setMetaData(container, k, handler)
+	events.split(/[\s,]+/).forEach((evt) => {
+		container.addEventListener(evt, handler)
+	})
+}
+
+const off = function (container, events, selector) {
+	const k = 'on:' + events + '-' + selector
+	const handler = _getMetaData(container, k)
+	if (handler) {
+		events.split(/[\s,]+/).forEach((evt) => {
+			container.removeEventListener(evt, handler)
+		})
+		_setMetaData(container, k)
+	}
+}
+
 const elementTools = {
@@ -100,3 +137,5 @@ hasClass: _hasClass,
 	setMetaData: _setMetaData,
-	getMetaData: _getMetaData
+	getMetaData: _getMetaData,
+	on: on,
+	off: off
 }
@@ -103,0 +142,0 @@

package.json

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

README.md

@@ -41,3 +41,3 @@ # @PelagicCreatures/Sargasso
 
-In production you probably won't use the prepackaged bundles but should build own bundles including your subclasses using rollup or something. See rollup section below. In this example we use the bundles for expediency. The prepackaged bundles expose the exports from the module as globals scoped under `PelagicCreatures`
+In production you probably won't use the prepackaged bundles. You should build own bundles including your subclasses using rollup or something. See rollup section below. In this example we use the bundles for expediency. The prepackaged bundles expose the exports from the module as globals scoped under `PelagicCreatures`
 
@@ -87,2 +87,9 @@ ```javascript
 
+### Custom Elements ([Bleeding Edge-ish](https://caniuse.com/#feat=custom-elementsv1))
+Many browsers support custom elements so the (faster and cleaner) syntax for sargasso elements is to use a custom element tag. The class name is the kebabCase of your subclass so MyClass becomes sargasso-my-class:
+
+```html
+<sargasso-my-class>This also works for MyClass in most browsers</sargasso-myclass>
+```
+
 ### HIJAX
@@ -89,0 +96,0 @@ Sargasso automatically captures `<a href="..">` tags and calls the LoadPageHandler instead of letting the browser load pages. You can make a link be ignored by hijax by setting the `<a href=".." data-no-hijax>`. Offsite links and links with targets are automatically ignored. bootSargasso also returns the function `LoadPageHandler(href)`. You must call this to load a new page programatically.

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

Total package byte prevSize

537606

increased by4.17%

Lines of code

6548

increased by4.52%

Number of lines in readme file

331

increased by2.16%

No dependency changes