oddcamp / cocoon-vanilla-js Goto Github PK
View Code? Open in Web Editor NEWA vanilla JS replacement for (Rails) Cocoon's jQuery script
License: MIT License
A vanilla JS replacement for (Rails) Cocoon's jQuery script
License: MIT License
in the code we got:
if(typeof insertionNode === 'function') {
if(insertionTraversal) {
console.warn('association-insertion-traversal is ignored, because association-insertion-node is given as a function.');
}
return insertionNode(btn);
}
how exactly do you pass a function to this data attribute?
i've tried multiple times, it always stores function as a string.
I recently pulled this in to avoid using jQuery with cocoon. It's been great so far, but I'm starting to see this error in our Rollbar error tracker.
TypeError: Invalid attempt to spread non-iterable instance
1
File "webpack:///./node_modules/@kollegorna/cocoon-vanilla-js/index.js" line 3 col 39 in _nonIterableSpread
function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable insta...
2
File "webpack:///./node_modules/@kollegorna/cocoon-vanilla-js/index.js" line 1 col 95 in _toConsumableArray
function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _no...
3
File "webpack:///./node_modules/@kollegorna/cocoon-vanilla-js/index.js" line 178 col 3 in hideFields
_toConsumableArray(document.querySelectorAll('.remove_fields.existing.destroyed')).forEach(func...
I believe that's coming from this line:
[...document.querySelectorAll('.remove_fields.existing.destroyed')].forEach((btn) => {
I found a similar issue with a couple suggested fixes here. I think the one that would work best is changing that line to:
[...document.querySelectorAll('.remove_fields.existing.destroyed').values()].forEach((btn) => {
but I'm also curious why you're doing the spread into an array to begin with. It seems like you could just chain the .forEach
onto the querySelectorAll
.
Anyhow, I can probably create a PR for this at some point, but I'm going to test it first and see if that fixes the issue.
Current API Implementation
...
// node is HTML string.
insertionNodeElem.insertAdjacentHTML(insertionMethod, node);
insertionNodeElem.dispatchEvent(
new CustomEvent('cocoon:after-insert', {detail: node, bubbles: true, cancelable: true})
);
Proposed implementation
...
// node is HTML string.
var inserted = insertionNodeElem.insertAdjacentHTML(insertionMethod, node);
insertionNodeElem.dispatchEvent(
new CustomEvent('cocoon:after-insert', {detail: [node, inserted], bubbles: true, cancelable: true})
);
This would allow to interact with the inserted element. There is no way to get the generated ID either so it makes finding it harder. We currently need to get the container and check for last element before the add button.
Another fork example I havn't tested https://github.com/dabroz/cocoon-js-vanilla/blob/master/index.js#L118
Not sure why but this bug or something similar appears to be affecting this version. Appreciate this repo has no Jquery so unsure as to why.
Having had a look I think it might be that we don't listen for a turbo:load event, only the old turbolinks one.
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.