Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
@pelagiccreatures/sargasso
Advanced tools
@pelagiccreatures/sargasso - npm Package Compare versions
Comparing version 0.7.0 to 0.7.1
@@ -58,3 +58,3 @@ /** | ||
| !link.getAttribute('target') && | ||
| !link.getAttribute('data-no-hijax') && | ||
| !link.hasAttribute('data-no-hijax') && | ||
| !this.excludeRegex.exec(href) | ||
@@ -61,0 +61,0 @@ ) { |
@@ -26,2 +26,4 @@ /** | ||
| const elementMetaData = new WeakMap() | ||
| /* | ||
@@ -67,6 +69,6 @@ All subclasses of Sargasso must register the class so that | ||
| if (!this.element.registeredResponsiveControllers) { | ||
| this.element.registeredResponsiveControllers = [] | ||
| } | ||
| this.element.registeredResponsiveControllers.push(this) | ||
| const registeredResponsiveControllers = this.getMetaData('registeredResponsiveControllers') || [] | ||
| registeredResponsiveControllers.push(this) | ||
| this.setMetaData('registeredResponsiveControllers', registeredResponsiveControllers) | ||
| this.setMetaData(this.constructor.name, this) | ||
@@ -113,2 +115,17 @@ liveElements.push(this) | ||
| setMetaData (k, v) { | ||
| const data = elementMetaData.get(this.element) || {} | ||
| if (v) { | ||
| data[k] = v | ||
| } else { | ||
| delete data[k] | ||
| } | ||
| elementMetaData.set(this.element, data) | ||
| } | ||
| getMetaData (k) { | ||
| const data = elementMetaData.get(this.element) || {} | ||
| return data[k] | ||
| } | ||
| notifyAll (event, params) { | ||
@@ -130,6 +147,10 @@ if (eventNames.indexOf(event) === -1) { | ||
| } | ||
| for (let i = 0; i < this.element.registeredResponsiveControllers.length; i++) { | ||
| const peer = this.element.registeredResponsiveControllers[i] | ||
| if (peer !== this && peer[event]) { | ||
| peer[event].apply(peer, params) | ||
| const registeredResponsiveControllers = this.getMetaData('registeredResponsiveControllers') | ||
| if (registeredResponsiveControllers) { | ||
| for (let i = 0; i < registeredResponsiveControllers.length; i++) { | ||
| const peer = registeredResponsiveControllers[i] | ||
| if (peer !== this && peer[event]) { | ||
| peer[event].apply(peer, params) | ||
| } | ||
| } | ||
@@ -215,8 +236,12 @@ } | ||
| if (this.element.registeredResponsiveControllers) { | ||
| if (this.element.registeredResponsiveControllers.indexOf(this) !== -1) { | ||
| this.element.registeredResponsiveControllers.splice(this.element.registeredResponsiveControllers.indexOf(this), 1) | ||
| const registeredResponsiveControllers = this.getMetaData('registeredResponsiveControllers') | ||
| if (registeredResponsiveControllers) { | ||
| if (registeredResponsiveControllers.indexOf(this) !== -1) { | ||
| registeredResponsiveControllers.splice(registeredResponsiveControllers.indexOf(this), 1) | ||
| this.setMetaData('registeredResponsiveControllers', registeredResponsiveControllers) | ||
| } | ||
| } | ||
| this.setMetaData(this.constructor.name, null) | ||
| this.element = null | ||
@@ -223,0 +248,0 @@ |
| { | ||
| "name": "@pelagiccreatures/sargasso", | ||
| "version": "0.7.0", | ||
| "version": "0.7.1", | ||
| "description": "Simple, Fast, Reactive, supervised Javascript controllers for html elements.", | ||
@@ -5,0 +5,0 @@ "keywords": [ |
214
README.md
@@ -37,3 +37,3 @@ # @PelagicCreatures/Sargasso | ||
| <script defer> | ||
| ... your code here ... | ||
| ... your code here ... | ||
| </script> | ||
@@ -49,14 +49,14 @@ ``` | ||
| let options = { | ||
| hijax: { | ||
| onError: (level, message) => { alert('Something went wrong. ' + message) } | ||
| } | ||
| } | ||
| let options = { | ||
| hijax: { | ||
| onError: (level, message) => { alert('Something went wrong. ' + message) } | ||
| } | ||
| } | ||
| // boot supervisors and HIJAX loader | ||
| window.loadPageHandler = bootSargasso(options) | ||
| // boot supervisors and HIJAX loader | ||
| window.loadPageHandler = bootSargasso(options) | ||
| // define a custom class and register the classname. | ||
| class MyClass extends Sargasso {} // This won't do very much... | ||
| registerSargassoClass('MyClass',MyClass) | ||
| // define a custom class and register the classname. | ||
| class MyClass extends Sargasso {} // This won't do very much... | ||
| registerSargassoClass('MyClass',MyClass) | ||
@@ -87,20 +87,20 @@ </script> | ||
| <html> | ||
| <head> | ||
| </head> | ||
| <body> | ||
| static stuff | ||
| <head> | ||
| </head> | ||
| <body> | ||
| static stuff | ||
| <div id="page-body" data-hijax> | ||
| <p>this changes from page to page</p> | ||
| <div>lots of html here</div> | ||
| </div> | ||
| <div id="page-body" data-hijax> | ||
| <p>this changes from page to page</p> | ||
| <div>lots of html here</div> | ||
| </div> | ||
| more static stuff | ||
| more static stuff | ||
| <div id="some-element" data-hijax> | ||
| <p>this also changes from page to page</p> | ||
| </div> | ||
| <div id="some-element" data-hijax> | ||
| <p>this also changes from page to page</p> | ||
| </div> | ||
| more static stuff | ||
| </body> | ||
| more static stuff | ||
| </body> | ||
| <html> | ||
@@ -155,2 +155,4 @@ ``` | ||
| | ------ | ----------- | | ||
| | getMetaData | return sargasso metadata associated with element (weak map) | | ||
| | setMetaData(key,value) | set a sargasso metadata property | | ||
| | hasClass('cssclass') | returns true if this.element has cssclass | | ||
@@ -175,38 +177,38 @@ | addClass('cssclass') | add cssclass to this.element | | ||
| class MyButtonClass extends Sargasso { | ||
| constructor (element, options = {}) { | ||
| options.watchViewport = true // tell me when I am visible | ||
| super(element, options) // important! | ||
| } | ||
| 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) | ||
| } | ||
| // 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! | ||
| } | ||
| // 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 | ||
| } | ||
| // 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) | ||
| } | ||
| enterViewport () { | ||
| // do some stuff such as modify element html or classes | ||
| const frame = () => { | ||
| this.element.textContent = 'Hello viewport! Click me!' | ||
| } | ||
| this.queueFrame(frame) | ||
| } | ||
| } | ||
@@ -219,3 +221,3 @@ | ||
| <style> | ||
| .clicked { background-color:red; } | ||
| .clicked { background-color:red; } | ||
| </style> | ||
@@ -238,42 +240,42 @@ | ||
| ... | ||
| ... | ||
| someMethod() { | ||
| someMethod() { | ||
| /* | ||
| myWorker can be the url of a worker script or | ||
| inline code as in this example | ||
| */ | ||
| /* | ||
| myWorker can be the url of a worker script or | ||
| inline code as in this example | ||
| */ | ||
| let pointlessMath = `onmessage = function (e) { | ||
| const baseNumber = e.data.power | ||
| let result = 0 | ||
| for (var i = Math.pow(baseNumber, 7); i >= 0; i--) { | ||
| result += Math.atan(i) * Math.tan(i) | ||
| }; | ||
| postMessage({ | ||
| uid: e.data.uid, // Important! always pass this back in the message | ||
| result: 'Done doing pointless math: ' + result | ||
| }) | ||
| }` | ||
| let pointlessMath = `onmessage = function (e) { | ||
| const baseNumber = e.data.power | ||
| let result = 0 | ||
| for (var i = Math.pow(baseNumber, 7); i >= 0; i--) { | ||
| result += Math.atan(i) * Math.tan(i) | ||
| }; | ||
| postMessage({ | ||
| uid: e.data.uid, // Important! always pass this back in the message | ||
| result: 'Done doing pointless math: ' + result | ||
| }) | ||
| }` | ||
| // create the worker to be managed by sargasso and give it an id | ||
| // the id can be unique to your task or shared by many sargasso | ||
| // controller | ||
| this.workerStart('pointlessMath', pointlessMath) | ||
| // create the worker to be managed by sargasso and give it an id | ||
| // the id can be unique to your task or shared by many sargasso | ||
| // controller | ||
| this.workerStart('pointlessMath', pointlessMath) | ||
| let data = { power: 12 } | ||
| this.workerPostMessage('pointlessMath', data) // send message to the worker | ||
| } | ||
| let data = { power: 12 } | ||
| this.workerPostMessage('pointlessMath', data) // send message to the worker | ||
| } | ||
| // listen for worker result | ||
| workerOnMessage (id, data) { | ||
| if (id === 'pointlessMath') { | ||
| const frame = () => { | ||
| this.element.innerHTML = data.result | ||
| } | ||
| this.queueFrame(frame) | ||
| } | ||
| super.workerOnMessage(id, data) | ||
| } | ||
| // listen for worker result | ||
| workerOnMessage (id, data) { | ||
| if (id === 'pointlessMath') { | ||
| const frame = () => { | ||
| this.element.innerHTML = data.result | ||
| } | ||
| this.queueFrame(frame) | ||
| } | ||
| super.workerOnMessage(id, data) | ||
| } | ||
| } | ||
@@ -295,17 +297,17 @@ ``` | ||
| export default { | ||
| input: './example/app.js', // load the app root | ||
| output: [{ | ||
| format: 'es', | ||
| file: './example/app-bundle.es.js' // output the bundle | ||
| }], | ||
| input: './example/app.js', // load the app root | ||
| output: [{ | ||
| format: 'es', | ||
| file: './example/app-bundle.es.js' // output the bundle | ||
| }], | ||
| plugins: [ | ||
| json(), | ||
| nodeResolve({ | ||
| preferBuiltins: false | ||
| }), | ||
| commonjs({ | ||
| namedExports: {} | ||
| }) | ||
| ] | ||
| plugins: [ | ||
| json(), | ||
| nodeResolve({ | ||
| preferBuiltins: false | ||
| }), | ||
| commonjs({ | ||
| namedExports: {} | ||
| }) | ||
| ] | ||
| } | ||
@@ -312,0 +314,0 @@ |
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is too big to display
New alerts
License Policy Violation
LicenseThis 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
LicenseThis 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
- increased by0.9%
611639
- Lines of code
- increased by0.81%
9387
- Number of lines in readme file
- increased by0.65%
310
No dependency changes