Create a stack of DOM elements. You can add/remove elements, reorder them, hide/show the elements, transit between them, or move them all together.
Create a stack of DOM elements. You can hide/show the elements, transit between them, or move them all together.
npm install dom-stack
##How to use
Require and initialize dom-stack:
var Stack = require"dom-stack"stack = ;
Let's say that we have five dom elements:
var sections = documentquerySelectorAll"section";var dom1 = sections0;var dom2 = sections1;var dom3 = sections2;var dom3 = sections3;var dom3 = sections4;
###Add dom elements
You can add the dom elements. They will be removed from their current position in the DOM and be added to the stack.
###Remove dom elements
You can remove dom elements from the stack:
###Place the stack
You can attach the stack to a parent element. All the elements from the stack will be appended to main, in the same order that they were added. You can call place again to attach the stack to another dom element.
###Reorder dom elements:
Then you can reorder the elements.
stackupdom2; // the order will be: dom2, dom1, dom3stackdowndom1; // the order will be: dom2, dom3, dom1
Or you can move a dom element directly to a new location:
stackmovedom3 0; // the order will be: dom3, dom2, dom1
###Insert new dom elements
Let's reinsert the dom elements that we previously removed:
stackinsertdom4 0; // the order will be: dom4, dom3, dom2, dom1;stackinsertdom5 3; // the order will be: dom4, dom3, dom2, dom5, dom1;
You can now where a dom element is at anytime, and how many dom elements you have:
stackgetPositiondom5; // 3stackcount; // 5
You can hide/show dom elements. The elements are not actually hidden, but totally removed from the DOM for performance reason.
stackhidedom4; // will hide dom4 by removing it from the dom.
When showing the element, it will be added back to the dom:
There's a short cut for hiding/showing them all:
##Transit to a dom element
If you hide all elements but then show just one of them:
You can then transit to another dom element, which will hide the previous one and show the new one:
stacktransitdom2; // will hide dom1 and show dom2