tokimon / vanillajs-browser-helpers Goto Github PK
View Code? Open in Web Editor NEWVanilla JS helper methods for in browser usage
License: MIT License
Vanilla JS helper methods for in browser usage
License: MIT License
According to this article there might be a problem with the toDOM
method.
Additional tests for the elements is needed and possibly an improvement to the script.
to wrap an element in given HTML:
function findEmptyElm (elm) {
const child = elm && elm.firstElementChild
return child ? findEmptyElm(next) : elm
}
export default (elm, html) => {
elm.insertAdjacentHTML('afterend', html)
const insertElm = findEmptyElm(elm.nextElementSibling)
insertElm && insertElm.appendChild(elm)
}
Right now the found delegation target is give via this
but this is impractical if arrow functions are used. One way could to override currentTarget
fx.
Either by using form.elements
or maybe by utilizing the FormData
object
Should create a new element of the desired tag, but should also create it from given CSS selector string (like jQuery)
Appveyor: https://ci.appveyor.com/
Example: https://ci.appveyor.com/project/bcoe/yargs-ljwvf
I am having issues getting the module to work. I ran the install code and it installed correctly; however, I can't seem to get the code to work in my browser.
Notification.js
`
import inView from 'vanillajs-browser-helpers/es5/inView.js'; //I tried these classes and the es6 varient
import addClass from 'vanillajs-browser-helpers/es5/addClass.js';
import removeClass from 'vanillajs-browser-helpers/es5/removeClass.js';
let notification = document.getElementById('notification');
let notificationTrigger = document.getElementById('notification-trigger');
if (notification != null && notificationTrigger != null) {
if (inView(notificationTrigger) != true) {
removeClass(notification, "visible",);
} else {
addClass(notification, "visible",);
}
}
But when I have
<Script src="notification.js" type="module"> </script>` I get an error in the console about relative paths. Maybe it's my limited exposure to javascript or limited understanding of node. But could you build a short sample website to help clarify how to get it running beyond just NPM install?
Store data associated with the element, that is not compatible with the 'data-' attribute.
Like jQuery.
(could be used by eventPlus
)
Enables to replace a given class name with another (remove class a -> add class b)
Add a visibility change event and a method to detect document visibility.
With fallback to focus/blur if the other event is not supported
Once a CJS file is transpiled all references of vanillajs-helpers
will still use the es6 version, thus not avoiding the need for transpilation.
eg for isString
the compiled output is:
var _isString = require('vanillajs-helpers/isString');
But optimally it should be
var _isString = require('vanillajs-helpers/cjs/isString').default;
A simpler way to avoid this problem needs to be found.
When I tried to import addClass(import addClass from 'vanillajs-browser-helpers/addClass';
), I get this error: ParseError: 'import' and 'export' may appear only with 'sourceType: module
with browserify/babel.
Tools to look into these tools
Function to add data linked to dom element (like jQuery.data()
):
const _cache = new WeakMap()
function elmData (elm, key, data) {
let elmCache = _cache.get(elm)
if (!key) { return elmCache }
if (data) {
if (!elmCache) {
elmCache = {}
_cache.set(elm, elmCache)
}
elmCache[key] = data
}
return elmCache && elmCache[key]
}
export default elmData
Use requestAnimationFrame
to optimize the resize reaction time and with a idle timer (cancelling the polling)
Like in jQuery
Optimize by using requestAnimationFrame and by taking idle time into account (cancelling the polling after a certain time)
Run npm run missing
to see list of missing unit tests
"siblings" should include methods to fetch all preceding and succeeding elements
in a usage I had to hack the type a bit to make TS accept e.delegateTarget
:
const onClick = delegateHandler(`.${fileTileContainer}`, (e: Event) => {
const { delegateTarget: thumb } = e as Event & { delegateTarget: Element };
dispatch('thumbclick', { thumb });
});
The 'defaults' Babel helper is used more than once in your code. It's strongly recommended that you use the "external-helpers" plugin or the "es2015-rollup" preset. See https://github.com/rollup/rollup-plugin-babel#configuring-babel for more information
La fonction inView vérifie si l'élément est dans le viewport. Il serais intéressant d'avoir une option pour savoir si l’élément est dans la vue et est visible (exemple dans un div avec overflow:hidden, inView renvoi true car l'élément est dans le viewport mais il n'est pas visible)
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.