Merge pull request #36 from skylize/master

ejci · Jun 29, 2015 · 441d1d6 · 441d1d6
2 parents 2a93acb 554ebf2
commit 441d1d6
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 35 deletions.
diff --git a/extension/popup/popup.css b/extension/popup/popup.css
@@ -49,9 49,16 @@
  color: rgb(120,120,120);
  background: linear-gradient(to bottom, rgb(239,239,239) 70%,rgb(219,219,219) 100%);
 }
-.button.indicator.on {
 /* label changes checkbox value, so we can hide the input
  and style the label, sibling selector to change on checked */
 .invis {
  position: absolute;
  width: 1; height: 1;
  opacity: 0;
 }
 input[type=checkbox]:checked ~ .button.indicator{
  color: rgb(50,90,140);
- background: linear-gradient(to bottom, rgb(219,219,219) 0%,rgb(239,239,239) 30%);
  background: linear-gradient(to bottom, rgb(189,189,189) 0%,rgb(239,239,239) 40%);
  /*text-shadow:0px 0px 1px rgb(170,170,170);*/
 }
 .button:hover {
@@ -62,8 69,11 @@
 .button:focus {
  outline: none;
 }
 /* this extra selector needed to allow :active styling
  on checked label due to too much specificity */
 input[type=checkbox]:checked ~ .button:active,
 .button:active {
- background: linear-gradient(to bottom, rgb(229,229,229) 0%,rgb(249,249,249) 100%);
  background: linear-gradient(to bottom, rgb(199,199,199) 0%,rgb(249,249,249) 90%);
  border: 1px solid rgb(170,170,170);
  color: rgb(50,90,140);
 }
@@ -139,4 149,4 @@
  display: inline-block;
  padding-right: 5px;
  text-align: right;
-}
 }
diff --git a/extension/popup/popup.html b/extension/popup/popup.html
@@ -69,8 69,14 @@
  </div>
  <div class="controls-options">
  <div class="left">
- <a href="#" class="button indicator" id="channels">Mono</a>
- <a href="#" class="button indicator" id="snap">Snap</a>
  <span> <!--span is a hack to prevent shared siblings-->
  <input type="checkbox" id="channels" class="invis" />
  <label for="channels" class="button indicator">Mono</label>
  </span>
  <span>
  <input type="checkbox" id="snap" class="invis" />
  <label for="snap" class="button indicator">Snap</label>
  </span>
  </div>
  <div class="right">
  <a href="#" class="button presets" id="presets">Presets

diff --git a/extension/popup/popup.js b/extension/popup/popup.js
@@ -112,23 112,14 @@ var init = function(prs) {
  propagateData();
  };
 
- function toggleConfig(setting, id){
- setting = !setting;
- if (setting === true) {
- document.getElementById(id).classList.add('on')
- } else {
- document.getElementById(id).classList.remove('on')
- }
  document.getElementById('channels').onchange = function(ev) {
  config.mono = ev.target.checked;
  propagateData();
- return setting;
- }
-
- document.getElementById('channels').onclick = function(ev) {
- config.mono = toggleConfig(config.mono, 'channels');
  };
 
- document.getElementById('snap').onclick = function(ev) {
- config.snap = toggleConfig(config.snap, 'snap');
  document.getElementById('snap').onchange = function(ev) {
  config.snap = ev.target.checked;
  propagateData();
  };
 
  // TODO: Should only need to build this one time,
@@ -250,22 241,10 @@ var init = function(prs) {
  eq = response.eq;
  setAllEqSliders();
 
- // TODO make config buttons into checkbox inputs so they can keep
- // their own state (might take a few CSS tricks)
-
  config = response.config;
- // CUSTOM: make sure toggle is checked
- if (config.mono) {
- document.getElementById('channels').classList.add('on');
- } else {
- document.getElementById('channels').classList.remove('on');
- }
- if (config.snap) {
- document.getElementById('snap').classList.add('on');
- } else {
- document.getElementById('snap').classList.remove('on');
- }
- chart.prepareChart(eq);
  document.getElementById('channels').checked = config.mono;
  document.getElementById('snap').checked = config.snap;
  chart.prepareChart(eq);
  });
 };