function GenTABListener(tabname, tabid, lil){ | function GenTABListener(tabname, tabid, lil){ | ||||
return function(e){ | return function(e){ | ||||
// TODO: FIX ME!! | |||||
var sel = lil.querySelector("li.tab-selected"); | |||||
if (sel){ | |||||
var oldtabid = sel.getAttribute("tabid"); | |||||
UnselectTab(tabname, oldtabid, sel); | |||||
} | |||||
sel = lil.querySelector("li[tabid='" + tabid + "']"); | |||||
if (sel){ | |||||
SelectTab(tabname, tabid, sel); | |||||
for (let i=0; i < lil.length; i++){ | |||||
if (lil[i].classList.contains("tab-selected")){ | |||||
if (lil[i].getAttribute("tabid") !== tabid){ | |||||
UnselectTab(tabname, lil[i].getAttribute("tabid"), lil[i]); | |||||
} else {break; /* The same tab is being selected. */} | |||||
} else if (lil[i].getAttribute("tabid") === tabid){ | |||||
SelectTab(tabname, tabid, lil[i]); | |||||
} | |||||
} | } | ||||
} | } | ||||
} | } |
"ejs": "^2.6.1", | "ejs": "^2.6.1", | ||||
"express": "^4.16.4", | "express": "^4.16.4", | ||||
"sass": "^1.17.2" | "sass": "^1.17.2" | ||||
} | |||||
}, | |||||
"devDependencies": {} | |||||
} | } |
<div class="tabnav"> | <div class="tabnav"> | ||||
<ul tabs="assetlists"> | |||||
<li class="tab-selected" tabid="palettes"><a href="#">Palettes</a></li> | |||||
<li tabid="banks"><a href="#">Banks</a></li> | |||||
<li tabid="attrtables"><a href="#">Attib. Tables</a></li> | |||||
<ul tabs="<%= tabsetname %>"> | |||||
<% tabs.forEach(function(item){ %> | |||||
<li tabid="<%= item.id %>"><a href="#"><%= item.name %></a></li> | |||||
<% }); %> | |||||
</ul> | </ul> | ||||
<div class="tab-content" fortabs="assetlists" tabid="palettes"> | |||||
Palettes Content! | |||||
</div> | |||||
<div class="tab-content" fortabs="assetlists" tabid="banks"> | |||||
Bank Content! | |||||
</div> | |||||
<div class="tab-content" fortabs="assetlists" tabid="attrtables"> | |||||
Attribute Table Content! | |||||
<% tabs.forEach(function(item){ %> | |||||
<div class="tab-content" fortabs="<%= tabsetname %>" tabid="<%= item.id %>"> | |||||
<div class="list-container"></div> | |||||
</div> | </div> | ||||
<% }); %> | |||||
</div> | </div> |
</div> | </div> | ||||
<div class="pure-u-6-24 simple-padding"> | <div class="pure-u-6-24 simple-padding"> | ||||
<%- include('docks.html'); %> | |||||
<%- include('docks.html', { | |||||
tabsetname:"assetlists", | |||||
tabs:[ | |||||
{name:"Palettes", id:"palettes", selected:true}, | |||||
{name:"Banks", id:"banks", selected:false}, | |||||
{name:"Attrib. Tables", id:"attrtbls", selected:false} | |||||
] | |||||
}); %> | |||||
</div> | </div> | ||||
</div> | </div> | ||||