oddcamp / cocoon-vanilla-js Goto Github PK

View Code? Open in Web Editor NEW

34.0 34.0 12.0 38 KB

A vanilla JS replacement for (Rails) Cocoon's jQuery script

License: MIT License

JavaScript 100.00%

cocoon-vanilla-js's People

Contributors

Stargazers

Watchers

Forkers

karlis-dreizis pedrofurtado ukkomx bbonamin spacesquirrelapps belibaste brocktimus entretechno tranquangvu stiig larskanis

cocoon-vanilla-js's Issues

function of finding a node

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.

TypeError: Invalid attempt to spread non-iterable instance

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.

Getting the actual inserted element

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

Depreciation Issue

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.

nathanvda/cocoon#615

Having had a look I think it might be that we don't listen for a turbo:load event, only the old turbolinks one.

oddcamp / cocoon-vanilla-js Goto Github PK

cocoon-vanilla-js's People

Contributors

Stargazers

Watchers

Forkers

cocoon-vanilla-js's Issues

Publish the package on npmjs

function of finding a node

TypeError: Invalid attempt to spread non-iterable instance

Getting the actual inserted element

Depreciation Issue

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent