|
|
@@ -1,70 +1,8 @@
|
|
|
-class StrandSelector extends HTMLElement{
|
|
|
- constructor(){
|
|
|
- super();
|
|
|
+let changeStrand = (name)=>{
|
|
|
+ for(let strand of document.querySelectorAll(".strand")){
|
|
|
+ strand.style.display = "none";
|
|
|
}
|
|
|
|
|
|
- connectedCallback(){
|
|
|
- setTimeout(()=>{
|
|
|
- let firstStrand = document.querySelector(".strand");
|
|
|
- this.setAttribute("strand", firstStrand.id.slice(0, firstStrand.id.indexOf("Strand")));
|
|
|
- window[`${firstStrand.id.slice(0, firstStrand.id.indexOf("Strand"))}Obj`].display();
|
|
|
-
|
|
|
- let strands = document.querySelectorAll(".strand");
|
|
|
- for(let strand of strands){
|
|
|
- let selector = document.createElement("button");
|
|
|
- selector.strandName = strand.id;
|
|
|
- selector.innerText = strand.id.slice(0, strand.id.indexOf("Strand")).toUpperCase();
|
|
|
- this.appendChild(selector);
|
|
|
- }
|
|
|
-
|
|
|
- for(let button of this.querySelectorAll("button")){
|
|
|
- button.onclick = ()=>{
|
|
|
- this.setAttribute("strand", button.strandName.slice(0, button.strandName.indexOf("Strand")));
|
|
|
-
|
|
|
- window[`${button.strandName.slice(0, button.strandName.indexOf("Strand"))}Obj`].display();
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- strands[0].style.display = "flex";
|
|
|
- })
|
|
|
- }
|
|
|
-
|
|
|
- static get observedAttributes(){
|
|
|
- return ["strand"];
|
|
|
- }
|
|
|
-
|
|
|
- attributeChangedCallback(){
|
|
|
- setTimeout(()=>{
|
|
|
- let buttons = this.querySelectorAll("button");
|
|
|
-
|
|
|
- for(let button of buttons){
|
|
|
- if(button.innerText.toLowerCase() === this.getAttribute("strand").toLowerCase()){
|
|
|
- button.style.borderBottom = "3px solid black";
|
|
|
- button.style.cursor = "pointer";
|
|
|
- }else{
|
|
|
- button.style.borderBottom = "none";
|
|
|
- button.style.cursor = "pointer";
|
|
|
- }
|
|
|
- }
|
|
|
- })
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-customElements.define("strand-selector", StrandSelector);
|
|
|
-
|
|
|
-let actions = document.querySelectorAll(".action");
|
|
|
-for(let action of actions){
|
|
|
- action.display = ()=>{window[`${action.id.slice(0, action.id.indexOf("Action"))}Obj`].display();};
|
|
|
-}
|
|
|
-
|
|
|
-let strands = document.querySelectorAll(".strand");
|
|
|
-for(let strand of strands){
|
|
|
- strand.display = ()=>{window[`${strand.id.slice(0, strand.id.indexOf("Strand"))}Obj`].display();};
|
|
|
-}
|
|
|
-
|
|
|
-window.clearScreen = ()=>{
|
|
|
- let subpages = document.querySelectorAll(".strand, .action");
|
|
|
- for(let subpage of subpages){
|
|
|
- subpage.style.display = "none";
|
|
|
- }
|
|
|
+ document.querySelector(`#${name}`).style.display = "flex";
|
|
|
+ window[`${name}Obj`].display();
|
|
|
}
|
Lee Morgan