Browse Source

Tabs working.

dev-bank
Bryan Miller 5 years ago
parent
commit
35b1cad2b8
4 changed files with 26 additions and 23 deletions
  1. +8
    -9
      app/js/ui/Tabs.js
  2. +2
    -1
      package.json
  3. +8
    -12
      views/docks.html
  4. +8
    -1
      views/index.html

+ 8
- 9
app/js/ui/Tabs.js View File



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]);
}
} }
} }
} }

+ 2
- 1
package.json View File

"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": {}
} }

+ 8
- 12
views/docks.html View File

<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>

+ 8
- 1
views/index.html View File

</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>



Loading…
Cancel
Save