Merge pull request #8 from bustinbung/lines

Update expansion function, fix styling
bustinbung · Dec 3, 2019 · be99446 · be99446
2 parents cd97cab + 9dd7211
commit be99446
Show file tree

Hide file tree

Showing 5 changed files with 47 additions and 54 deletions.
diff --git a/index.css b/index.css
@@ -23,6 +23,14 @@
   opacity: 0;
 }
 
+.tableWrap, .linesWrap {
+  display: none;
+}
+
+.open {
+  display: block;
+}
+
 table {
   margin-left: auto;
   margin-right: auto;

diff --git a/index.html b/index.html
@@ -10,31 +10,31 @@
 </head>
 <body>
   <h1>polyrhythm generator</h1>
+  <div class='content'>
+    <div class='form'>
+      <br>
+      <span class='uinput'>
+        <label for='pulse'>pulse:</label>
+        <input type='number' class='pulse form' min='2' maxlength='2' oninput='javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);'>
+      </span><br><br>
+      <span class='uinput'>
+        <label for='cpulse'>counterpulse:</label>
+        <input type='number' class='cpulse form' min='2' maxlength='2' oninput='javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);'><br><br>
+      </span>
+    </div>
 
-  <div class='form'>
     <br>
-    <span class='uinput'>
-      <label for='pulse'>pulse:</label>
-      <input type='number' class='pulse form' min='2' maxlength='2' oninput='javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);'>
-    </span><br><br>
-    <span class='uinput'>
-      <label for='cpulse'>counterpulse:</label>
-      <input type='number' class='cpulse form' min='2' maxlength='2' oninput='javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);'><br><br>
-    </span>
-    <button class='submit'>generate</button>
-  </div>
+    <div class='results'>
 
-  <br>
-  <div class='results'>
-
-    <h3 class='octable'>table <span class='tm oc'>+</span><span class='tp oc'>-</span></h3>
-    <div class='tableWrap'>
-      <p class='resolve'></p>
-    </div>
+      <h3 class='octable'>table <span class='tm oc'>+</span><span class='tp oc'>-</span></h3>
+      <div class='tableWrap'>
+        <p class='resolve'></p>
+      </div>
 
-    <h3 class='oclines'>line diagram <span class='lp oc'>+</span><span class='lm oc'>-</span></h3>
-    <div class='linesWrap'>
-      <canvas class='lines' width=500px></canvas>
+      <h3 class='oclines'>line diagram <span class='lp oc'>+</span><span class='lm oc'>-</span></h3>
+      <div class='linesWrap'>
+        <canvas class='lines' width=500px></canvas>
+      </div>
     </div>
   </div>
 

diff --git a/scripts/expand.js b/scripts/expand.js
@@ -9,40 +9,36 @@ var lwrap = document.querySelector('.linesWrap');
 
 thead.onclick = function() {
   if (hasRun) {
-    if (tableOpen) {
-      twrap.style = 'display: none;';
-      tableOpen = false;
-
-      thead.children[0].style = 'display: inline; opacity: 1;';
-      thead.children[1].style = 'display: none; opacity: 0;';
-    } else {
-      twrap.style = 'display: block;';
+    if (!tableOpen) {
+      twrap.classList.add('open');
       tableOpen = true;
 
       thead.children[0].style = 'display: none; opacity: 0;';
       thead.children[1].style = 'display: inline; opacity: 1;';
+    } else {
+      twrap.classList.remove('open');
+      tableOpen = false;
+
+      thead.children[0].style = 'display: inline; opacity: 1;';
+      thead.children[1].style = 'display: none; opacity: 0;';
     }
-  } else {
-    return;
   }
 }
 
 lhead.onclick = function() {
   if (hasRun) {
-    if (linesOpen) {
-    lwrap.style = 'display: none;';
-    linesOpen = false;
+    if (!linesOpen) {
+      lwrap.classList.add('open');
+      linesOpen = true;
 
-    lhead.children[0].style = 'display: inline; opacity: 1;';
-    lhead.children[1].style = 'display: none; opacity: 0;';
+      lhead.children[0].style = 'display: none; opacity: 0;';
+      lhead.children[1].style = 'display: inline; opacity: 1;';
     } else {
-    lwrap.style = 'display: block;';
-    linesOpen = true;
+      lwrap.classList.remove('open');
+      linesOpen = false;
 
-    lhead.children[0].style = 'display: none; opacity: 0;';
-    lhead.children[1].style = 'display: inline; opacity: 1;';
-  }
-  } else {
-  return;
+      lhead.children[0].style = 'display: inline; opacity: 1;';
+      lhead.children[1].style = 'display: none; opacity: 0;';
+    }
   }
 }
diff --git a/scripts/main.js b/scripts/main.js
@@ -15,13 +15,6 @@ function globalCall() {
   draw(60, 25, 75, c.width, pulse, cpulse);
   generateTable();
 
-  if (!hasRun) {
-    document.querySelector('.tableWrap').style = 'display: none;';
-    document.querySelector('.linesWrap').style = 'display: none;';
-  } else {
-    return;
-  }
-
   hasRun = true;
 }
 

diff --git a/todo.md b/todo.md