JSFiddle - React, Tailwind, and code Playground
by Graham Dixon
HTML
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dottie.min.js"></script>
<script src="https://leeoniya.github.io/domvm/dist/micro/domvm.micro.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.1/jquery-ui.min.js"></script>CSS
/*!
* domvm Collapsible List Plugin
*
* Based on the Collapsible library by Stephen Morley
* http://code.stephenmorley.org/javascript/collapsible-lists/
*
*/
body {
margin: 0px;
}
.collapsibleList li {
list-style-image: url('http://localhost:8000/assets/images/button.png');
list-style-position: inside;
cursor: auto;
}
.collapsibleList li> a> span> a {
min-height: 24px;
display: inline-block;
}
li.collapsibleListOpen {
list-style-image: url('http://localhost:8000/assets/images/button-open.png');
cursor: pointer;
}
li.collapsibleListButton {
list-style-image: url('http://localhost:8000/assets/images/button.png');
cursor: pointer;
}
li.collapsibleListClosed {
list-style-image: url('http://localhost:8000/assets/images/button-closed.png');
cursor: pointer;
}
li.collapsibleListClosed.forcedClosed {
list-style-image: url('http://localhost:8000/assets/images/button-closed.png')!important;
background: none!important;
padding-left: 0px;
margin-left: 0px;
}
li:not(.collapsibleListClosed).forcedClosed {
list-style-image: url('http://localhost:8000/assets/images/button.png')!important;
background: none!important;
padding-left: 0px;
margin-left: 0px;
}
li.collapsibleListOpen.forcedOpen {
list-style-image: url('http://localhost:8000/assets/images/button-open.png')!important;
background: url('http://localhost:8000/assets/images/list-item-root.png') no-repeat top left!important;
padding-left: 0px;
margin-left: 0px;
}
.collapsibleList li.forcedClosed.lastChild {
background-image: url('http://localhost:8000/assets/images/list-item-last.png')!important;
background: no-repeat top left!important;
}
li.collapsibleListClosed ul {
display: none;
}
.collapsibleList ul {
padding-left: 20px;
}
.collapsibleList {
line-height: 1.5em;
}
.collapsibleList ul {
margin: 0 0 0 -20px;
padding: 0 0 0 20px;
}
.treeView ul ul {
background:...JavaScript
/*!
* Script: domvm.collapsibleList.js
* Description: domvm app which builds searchable, reusable, connected and infinitely nested collapsible lists from a defined structure with sensible callbacks and stylings (uses jquery-ui for sorting and dottie for discovering nested objects by scope)
* Copyright: Copyright (c) 2018 Graham Dixon - Money Marketplace LTD
* Author: GDixon
* Email: [email protected]
* Licensed: MIT
* Requires: [email protected], [email protected], [email protected], [email protected]
* Version: 0.0.1
*/
!function(e){if("function"!=typeof define||!define.amd)return e(domvm,Dottie,$,this);define(["domvm","dottie","jquery","jqueryui"],e)}(function(e,t,a,o){return o.collapsibleList=function(){function t(e,t,a,o,i,r,l,d,c,u,p,f,h,b,g,m,v,y,S,I,L){this.originalItems=e,this.referenceSet=void 0!==t&&JSON.stringify(e)!=JSON.stringify(t),this.items=t,this.showMarkers=r,this.initialTreeState=p,this.initialItemState=f,this.getMore=h,this.createRef=b,this.onCreateItem=g,this.onDeleteItem=m,this.onSingleClick=v,this.onDblClick=y,this.onUpdateItems=S,this.searchInput=new n(i),this.collapsibleList=new s(t,a,o,i,r,l,d,c,u,I,L,this.referenceSet,null,h,p,f)}function o(e,t){return!0===t.collapsibleList.top&&void 0===b[t.collapsibleList.trueScope]&&(b[t.collapsibleList.trueScope]=[]),b[t.collapsibleList.trueScope].push(e),e.config({hooks:{didInsert:function(){e.emit("filterChange")}},onemit:{filterChange:function(){var t=e.data.searchInput,a=0===e.data.collapsibleList.searchValue.length?e.data.collapsibleList.data:e.data.items;e.data.collapsibleList.searchValue=t.searchValue,e.data.collapsibleList.data=l.findObjByName(a,t.searchValue.toLowerCase()),e.redraw()}}}),function(){return c("div",{class:"filterableCollapsibleList"},[d(i,t.searchInput),d(r,t.collapsibleList)])}}function n(e){this.searchValue=e||""}function i(e,t){function...