nightTab/js/control.js

var control = (function() {

  var toggle = function(override) {
    var options = {
      path: null,
      value: null
    };
    if (override) {
      options = helper.applyOptions(options, override);
    };
    if (options.path != null) {
      helper.setObject({
        path: options.path,
        object: state.get(),
        newValue: options.value
      });
    };
  };

  var render = function() {
    var html = helper.e("html");
    var _edit = function() {
      if (state.get().edit.active) {
        helper.addClass(html, "is-edit");
      } else {
        helper.removeClass(html, "is-edit");
      };
    };
    var _date = function() {
      if (state.get().header.date.show.date || state.get().header.date.show.day || state.get().header.date.show.month || state.get().header.date.show.year) {
        helper.addClass(html, "is-date");
      } else {
        helper.removeClass(html, "is-date");
      };
    };
    var _clock = function() {
      if (state.get().header.clock.show.seconds || state.get().header.clock.show.minutes || state.get().header.clock.show.hours) {
        helper.addClass(html, "is-clock");
      } else {
        helper.removeClass(html, "is-clock");
      };
    };
    var _search = function() {
      if (state.get().header.search.active) {
        helper.addClass(html, "is-search");
      } else {
        helper.removeClass(html, "is-search");
      };
      if (state.get().header.search.grow) {
        helper.addClass(html, "is-search-grow");
      } else {
        helper.removeClass(html, "is-search-grow");
      };
      helper.e(".control-header-search-engine-custom-url").value = state.get().header.search.engine.custom.url;
    };
    var _alignment = function() {
      helper.removeClass(html, "is-alignment-horizontal-left");
      helper.removeClass(html, "is-alignment-horizontal-center");
      helper.removeClass(html, "is-alignment-horizontal-right");
      helper.removeClass(html, "is-alignment-vertical-top");
      helper.removeClass(html, "is-alignment-vertical-center");
      helper.removeClass(html, "is-alignment-vertical-bottom");
      helper.addClass(html, "is-alignment-horizontal-" + state.get().layout.alignment.horizontal);
      helper.addClass(html, "is-alignment-vertical-" + state.get().layout.alignment.vertical);
    };
    var _link = function() {
      var view = {
        block: function() {
          helper.addClass(html, "is-link-block");
          helper.removeClass(html, "is-link-list");
        },
        list: function() {
          helper.removeClass(html, "is-link-block");
          helper.addClass(html, "is-link-list");
        }
      };
      view[state.get().link.style]();
      if (state.get().link.show.active) {
        helper.addClass(html, "is-link");
      } else {
        helper.removeClass(html, "is-link");
      };
      if (state.get().link.show.name) {
        helper.addClass(html, "is-link-name");
      } else {
        helper.removeClass(html, "is-link-name");
      };
      if (state.get().link.show.url) {
        helper.addClass(html, "is-link-url");
      } else {
        helper.removeClass(html, "is-link-url");
      };
    };
    var _layout = function() {
      helper.removeClass(html, "is-layout-fluid");
      helper.removeClass(html, "is-layout-wide");
      helper.removeClass(html, "is-layout-thin");
      helper.addClass(html, "is-layout-" + state.get().layout.container);
      if (state.get().layout.scrollPastEnd) {
        helper.addClass(html, "is-scroll-past-end");
      } else {
        helper.removeClass(html, "is-scroll-past-end");
      };
    };
    var _editAdd = function() {
      if (state.get().header.editAdd.active) {
        helper.addClass(html, "is-search-edit-add");
      } else {
        helper.removeClass(html, "is-search-edit-add");
      };
    };
    var _accent = function() {
      if (state.get().header.accent.active) {
        helper.addClass(html, "is-search-accent");
      } else {
        helper.removeClass(html, "is-search-accent");
      };
    };
    _alignment();
    _edit();
    _date();
    _clock();
    _search();
    _editAdd();
    _accent();
    _link();
    _layout();
  };

  var dependents = function() {
    var _edit = function() {
      if (bookmarks.get().length > 0) {
        helper.e(".control-edit").disabled = false;
      } else {
        helper.e(".control-edit").disabled = true;
        helper.e(".control-edit").checked = false;
        state.change({
          path: "edit.active",
          value: false
        });
      };
    };
    var _date = function() {
      var activeCount = 0;
      var toCheck = [state.get().header.date.show.date, state.get().header.date.show.day, state.get().header.date.show.month, state.get().header.date.show.year];
      toCheck.forEach(function(arrayItem, index) {
        if (arrayItem == true) {
          activeCount++;
        };
      });
      if (activeCount >= 2 && (state.get().header.date.show.date || state.get().header.date.show.day || state.get().header.date.show.month || state.get().header.date.show.year)) {
        helper.e(".control-header-date-show-separator").disabled = false;
      } else {
        helper.e(".control-header-date-show-separator").disabled = true;
      };
      if (state.get().header.date.show.day || state.get().header.date.show.month) {
        helper.e(".control-header-date-character-length-short").disabled = false;
        helper.e(".control-header-date-character-length-long").disabled = false;
      } else {
        helper.e(".control-header-date-character-length-short").disabled = true;
        helper.e(".control-header-date-character-length-long").disabled = true;
      };
    };
    var _clock = function() {
      var activeCount = 0;
      var toCheck = [state.get().header.clock.show.seconds, state.get().header.clock.show.minutes, state.get().header.clock.show.hours];
      toCheck.forEach(function(arrayItem, index) {
        if (arrayItem == true) {
          activeCount++;
        };
      });
      if (activeCount >= 2 && (state.get().header.clock.show.seconds || state.get().header.clock.show.minutes || state.get().header.clock.show.hours)) {
        helper.e(".control-header-clock-show-separator").disabled = false;
      } else {
        helper.e(".control-header-clock-show-separator").disabled = true;
      };
      if (state.get().header.clock.show.seconds || state.get().header.clock.show.minutes || state.get().header.clock.show.hours) {
        helper.e(".control-header-clock-24").disabled = false;
        helper.e(".control-header-clock-show-meridiem").disabled = false;
      } else {
        helper.e(".control-header-clock-24").disabled = true;
        helper.e(".control-header-clock-show-meridiem").disabled = true;
      };
      if ((state.get().header.clock.show.seconds || state.get().header.clock.show.minutes || state.get().header.clock.show.hours) && !state.get().header.clock.hour24) {
        helper.e(".control-header-clock-show-meridiem").disabled = false;
      } else {
        helper.e(".control-header-clock-show-meridiem").disabled = true;
      };
    };
    var _search = function() {
      if (state.get().header.search.active) {
        helper.e(".control-header-search-grow").disabled = false;
        helper.e(".control-header-search-focus").disabled = false;
        helper.e(".control-header-search-engine-google").disabled = false;
        helper.e(".control-header-search-engine-duckduckgo").disabled = false;
        helper.e(".control-header-search-engine-giphy").disabled = false;
        helper.e(".control-header-search-engine-custom").disabled = false;
        helper.e(".control-header-search-engine-label").removeAttribute("disabled");
      } else {
        helper.e(".control-header-search-grow").disabled = true;
        helper.e(".control-header-search-focus").disabled = true;
        helper.e(".control-header-search-engine-google").disabled = true;
        helper.e(".control-header-search-engine-duckduckgo").disabled = true;
        helper.e(".control-header-search-engine-giphy").disabled = true;
        helper.e(".control-header-search-engine-custom").disabled = true;
        helper.e(".control-header-search-engine-label").setAttribute("disabled", "");
      };
      if (state.get().header.search.active && state.get().header.search.engine.selected === "custom") {
        helper.e("[for=control-header-search-engine-custom-url]").removeAttribute("disabled");
        helper.e(".control-header-search-engine-custom-url").disabled = false;
      } else {
        helper.e("[for=control-header-search-engine-custom-url]").setAttribute("disabled", "");
        helper.e(".control-header-search-engine-custom-url").disabled = true;
      };
    };
    var _theme = function() {
      if (state.get().layout.theme.random.active) {
        helper.eA("input[name='control-layout-theme-style']").forEach(function(arrayItem, index) {
          arrayItem.disabled = false;
        });
      } else {
        helper.eA("input[name='control-layout-theme-style']").forEach(function(arrayItem, index) {
          arrayItem.disabled = true;
        });
      };
    };
    var _link = function() {
      if (state.get().link.show.active) {
        helper.e(".control-link-show-name").disabled = false;
        helper.e(".control-link-show-url").disabled = false;
        helper.e(".control-link-style-block").disabled = false;
        helper.e(".control-link-style-list").disabled = false;
        helper.e(".control-link-new-tab").disabled = false;
        helper.e(".control-link-sort-none").disabled = false;
        helper.e(".control-link-sort-name").disabled = false;
        helper.e(".control-link-sort-letter").disabled = false;
        helper.e(".control-layout-alignment-vertical-top").disabled = true;
        helper.e(".control-layout-alignment-vertical-center").disabled = true;
        helper.e(".control-layout-alignment-vertical-bottom").disabled = true;
      } else {
        helper.e(".control-link-show-name").disabled = true;
        helper.e(".control-link-show-url").disabled = true;
        helper.e(".control-link-style-block").disabled = true;
        helper.e(".control-link-style-list").disabled = true;
        helper.e(".control-link-new-tab").disabled = true;
        helper.e(".control-link-sort-none").disabled = true;
        helper.e(".control-link-sort-name").disabled = true;
        helper.e(".control-link-sort-letter").disabled = true;
        helper.e(".control-layout-alignment-vertical-top").disabled = false;
        helper.e(".control-layout-alignment-vertical-center").disabled = false;
        helper.e(".control-layout-alignment-vertical-bottom").disabled = false;
      };
    };
    var _background = function() {
      if (state.get().background.image.active) {
        helper.e("[for=control-background-image-url]").removeAttribute("disabled");
        helper.e(".control-background-image-url").disabled = false;
        helper.e("[for=control-background-image-opacity]").removeAttribute("disabled");
        helper.e(".control-background-image-opacity").disabled = false;
        helper.e("[for=control-background-image-blur]").removeAttribute("disabled");
        helper.e(".control-background-image-blur").disabled = false;
        helper.e("[for=control-background-image-grayscale]").removeAttribute("disabled");
        helper.e(".control-background-image-grayscale").disabled = false;
        helper.e("[for=control-background-image-accent-opacity]").removeAttribute("disabled");
        helper.e(".control-background-image-accent-opacity").disabled = false;
      } else {
        helper.e("[for=control-background-image-url]").setAttribute("disabled", "");
        helper.e(".control-background-image-url").disabled = true;
        helper.e("[for=control-background-image-opacity]").setAttribute("disabled", "");
        helper.e(".control-background-image-opacity").disabled = true;
        helper.e("[for=control-background-image-blur]").setAttribute("disabled", "");
        helper.e(".control-background-image-blur").disabled = true;
        helper.e("[for=control-background-image-grayscale]").setAttribute("disabled", "");
        helper.e(".control-background-image-grayscale").disabled = true;
        helper.e("[for=control-background-image-accent-opacity]").setAttribute("disabled", "");
        helper.e(".control-background-image-accent-opacity").disabled = true;
      };
    };
    _edit();
    _date();
    _clock();
    _search();
    _theme();
    _link();
    _background();
  };

  var _bind = function() {
    helper.e(".control-menu").addEventListener("click", function() {
      menu.toggle();
    }, false);
    helper.e(".control-add").addEventListener("click", function() {
      link.add();
    }, false);
    helper.e(".control-edit").addEventListener("change", function() {
      state.change({
        path: "edit.active",
        value: this.checked
      });
      render();
      dependents();
      data.save();
    }, false);
    helper.e(".control-layout-theme").addEventListener("change", function() {
      state.change({
        path: "layout.theme.current",
        value: helper.hexToRgb(this.value)
      });
      theme.render();
      data.save();
    }, false);
    helper.e(".control-layout-theme-random").addEventListener("change", function() {
      state.change({
        path: "layout.theme.random.active",
        value: this.checked
      });
      theme.render();
      dependents();
      data.save();
    }, false);
    helper.eA("input[name='control-layout-theme-style']").forEach(function(arrayItem, index) {
      arrayItem.addEventListener("change", function() {
        state.change({
          path: "layout.theme.random.style",
          value: this.value
        });
        render();
        data.save();
      }, false);
    });
    helper.e(".control-link-new-tab").addEventListener("change", function() {
      state.change({
        path: "link.newTab",
        value: this.checked
      });
      link.clear();
      link.render();
      data.save();
    });
    helper.e(".control-link-show-active").addEventListener("change", function() {
      state.change({
        path: "link.show.active",
        value: this.checked
      });
      render();
      dependents();
      header.render();
      data.save();
    });
    helper.e(".control-link-show-name").addEventListener("change", function() {
      state.change({
        path: "link.show.name",
        value: this.checked
      });
      render();
      dependents();
      data.save();
    });
    helper.e(".control-link-show-url").addEventListener("change", function() {
      state.change({
        path: "link.show.url",
        value: this.checked
      });
      render();
      dependents();
      data.save();
    });
    helper.eA("input[name='control-link-style']").forEach(function(arrayItem, index) {
      arrayItem.addEventListener("change", function() {
        state.change({
          path: "link.style",
          value: this.value
        });
        render();
        data.save();
      }, false);
    });
    helper.eA("input[name='control-link-sort']").forEach(function(arrayItem, index) {
      arrayItem.addEventListener("change", function() {
        state.change({
          path: "link.sort",
          value: this.value
        });
        link.clear();
        link.render();
        data.save();
      }, false);
    });
    helper.e(".control-header-search-active").addEventListener("change", function() {
      state.change({
        path: "header.search.active",
        value: this.checked
      });
      render();
      dependents();
      header.render();
      data.save();
    }, false);
    helper.e(".control-header-search-grow").addEventListener("change", function() {
      state.change({
        path: "header.search.grow",
        value: this.checked
      });
      render();
      header.render();
      data.save();
    }, false);
    helper.e(".control-header-search-focus").addEventListener("change", function() {
      state.change({
        path: "header.search.focus",
        value: this.checked
      });
      data.save();
    }, false);
    helper.eA("input[name='control-header-search-engine']").forEach(function(arrayItem, index) {
      arrayItem.addEventListener("change", function() {
        state.change({
          path: "header.search.engine.selected",
          value: this.value
        });
        render();
        dependents();
        search.update();
        data.save();
      }, false);
    });
    helper.e(".control-header-search-engine-custom-url").addEventListener("input", function() {
      state.change({
        path: "header.search.engine.custom.url",
        value: this.value
      });
      search.update();
      data.save();
    }, false);
    helper.e(".control-header-date-show-date").addEventListener("change", function() {
      state.change({
        path: "header.date.show.date",
        value: this.checked
      });
      render();
      dependents();
      date.clear();
      date.render();
      header.render();
      data.save();
    }, false);
    helper.e(".control-header-date-show-day").addEventListener("change", function() {
      state.change({
        path: "header.date.show.day",
        value: this.checked
      });
      render();
      dependents();
      date.clear();
      date.render();
      header.render();
      data.save();
    }, false);
    helper.e(".control-header-date-show-month").addEventListener("change", function() {
      state.change({
        path: "header.date.show.month",
        value: this.checked
      });
      render();
      dependents();
      date.clear();
      date.render();
      header.render();
      data.save();
    }, false);
    helper.e(".control-header-date-show-year").addEventListener("change", function() {
      state.change({
        path: "header.date.show.year",
        value: this.checked
      });
      render();
      dependents();
      date.clear();
      date.render();
      header.render();
      data.save();
    }, false);
    helper.e(".control-header-date-show-separator").addEventListener("change", function() {
      state.change({
        path: "header.date.show.separator",
        value: this.checked
      });
      render();
      dependents();
      date.clear();
      date.render();
      header.render();
      data.save();
    }, false);
    helper.eA("input[name='control-header-date-character-length']").forEach(function(arrayItem, index) {
      arrayItem.addEventListener("change", function() {
        state.change({
          path: "header.date.characterLength",
          value: this.value
        });
        render();
        date.clear();
        date.render();
        header.render();
        data.save();
      }, false);
    });
    helper.e(".control-header-clock-show-seconds").addEventListener("change", function() {
      state.change({
        path: "header.clock.show.seconds",
        value: this.checked
      });
      render();
      dependents();
      clock.clear();
      clock.render();
      header.render();
      data.save();
    }, false);
    helper.e(".control-header-clock-show-minutes").addEventListener("change", function() {
      state.change({
        path: "header.clock.show.minutes",
        value: this.checked
      });
      render();
      dependents();
      clock.clear();
      clock.render();
      header.render();
      data.save();
    }, false);
    helper.e(".control-header-clock-show-hours").addEventListener("change", function() {
      state.change({
        path: "header.clock.show.hours",
        value: this.checked
      });
      render();
      dependents();
      clock.clear();
      clock.render();
      header.render();
      data.save();
    }, false);
    helper.e(".control-header-clock-show-separator").addEventListener("change", function() {
      state.change({
        path: "header.clock.show.separator",
        value: this.checked
      });
      clock.clear();
      clock.render();
      header.render();
      data.save();
    }, false);
    helper.e(".control-header-clock-24").addEventListener("change", function() {
      state.change({
        path: "header.clock.hour24",
        value: this.checked
      });
      dependents();
      clock.clear();
      clock.render();
      header.render();
      data.save();
    }, false);
    helper.e(".control-header-clock-show-meridiem").addEventListener("change", function() {
      state.change({
        path: "header.clock.show.meridiem",
        value: this.checked
      });
      clock.clear();
      clock.render();
      header.render();
      data.save();
    }, false);
    helper.e(".control-header-edit-add-active").addEventListener("change", function() {
      state.change({
        path: "header.editAdd.active",
        value: this.checked
      });
      render();
      header.render();
      data.save();
    }, false);
    helper.e(".control-header-accent-active").addEventListener("change", function() {
      state.change({
        path: "header.accent.active",
        value: this.checked
      });
      render();
      header.render();
      data.save();
    }, false);
    helper.eA("input[name='control-layout-alignment-horizontal']").forEach(function(arrayItem, index) {
      arrayItem.addEventListener("change", function() {
        state.change({
          path: "layout.alignment.horizontal",
          value: this.value
        });
        render();
        data.save();
      }, false);
    });
    helper.eA("input[name='control-layout-alignment-vertical']").forEach(function(arrayItem, index) {
      arrayItem.addEventListener("change", function() {
        state.change({
          path: "layout.alignment.vertical",
          value: this.value
        });
        render();
        data.save();
      }, false);
    });
    helper.eA("input[name='control-layout-container']").forEach(function(arrayItem, index) {
      arrayItem.addEventListener("change", function() {
        state.change({
          path: "layout.container",
          value: this.value
        });
        render();
        header.render();
        data.save();
      }, false);
    });
    helper.e(".control-layout-scroll-past-end").addEventListener("change", function() {
      state.change({
        path: "layout.scrollPastEnd",
        value: this.checked
      });
      render();
      data.save();
    }, false);
    helper.e(".control-background-image-active").addEventListener("change", function() {
      state.change({
        path: "background.image.active",
        value: this.checked
      });
      render();
      dependents();
      background.render();
      data.save();
    }, false);
    helper.e(".control-background-image-url").addEventListener("input", function() {
      state.change({
        path: "background.image.url",
        value: this.value
      });
      background.render();
      data.save();
    }, false);
    helper.e(".control-background-image-opacity").addEventListener("input", function() {
      state.change({
        path: "background.image.opacity",
        value: (100 - parseInt(this.value)) / 100
      });
      background.render();
      data.save();
    }, false);
    helper.e(".control-background-image-blur").addEventListener("input", function() {
      state.change({
        path: "background.image.blur",
        value: parseInt(this.value, 10)
      });
      background.render();
      data.save();
    }, false);
    helper.e(".control-background-image-grayscale").addEventListener("input", function() {
      state.change({
        path: "background.image.grayscale",
        value: parseInt(this.value, 10) / 100
      });
      background.render();
      data.save();
    }, false);
    helper.e(".control-background-image-accent-opacity").addEventListener("input", function() {
      state.change({
        path: "background.image.accentOpacity",
        value: parseInt(this.value, 10) / 100
      });
      background.render();
      data.save();
    }, false);
  };

  var update = function() {
    helper.e(".control-edit").checked = state.get().edit.active;
    helper.e(".control-layout-theme").value = helper.rgbToHex(state.get().layout.theme.current);
    helper.e(".control-layout-theme-random").checked = state.get().layout.theme.random.active;
    helper.e(".control-layout-theme-style-" + state.get().layout.theme.random.style).checked = true;
    helper.e(".control-link-new-tab").value = state.get().link.style.newTab;
    helper.e(".control-link-show-active").checked = state.get().link.show.active;
    helper.e(".control-link-show-name").checked = state.get().link.show.name;
    helper.e(".control-link-show-url").checked = state.get().link.show.url;
    helper.e(".control-link-style-" + state.get().link.style).checked = true;
    helper.e(".control-link-sort-" + state.get().link.sort).checked = true;
    helper.e(".control-header-search-active").checked = state.get().header.search.active;
    helper.e(".control-header-search-grow").checked = state.get().header.search.grow;
    helper.e(".control-header-search-focus").checked = state.get().header.search.focus;
    helper.e(".control-header-search-engine-" + state.get().header.search.engine.selected).checked = true;
    helper.e(".control-header-search-engine-custom-url").value = state.get().header.search.engine.custom.url;
    helper.e(".control-header-date-show-date").checked = state.get().header.date.show.date;
    helper.e(".control-header-date-show-day").checked = state.get().header.date.show.day;
    helper.e(".control-header-date-show-month").checked = state.get().header.date.show.month;
    helper.e(".control-header-date-show-year").checked = state.get().header.date.show.year;
    helper.e(".control-header-date-show-separator").checked = state.get().header.date.show.separator;
    helper.e(".control-header-clock-show-seconds").checked = state.get().header.clock.show.seconds;
    helper.e(".control-header-clock-show-minutes").checked = state.get().header.clock.show.minutes;
    helper.e(".control-header-clock-show-hours").checked = state.get().header.clock.show.hours;
    helper.e(".control-header-clock-show-separator").checked = state.get().header.clock.show.separator;
    helper.e(".control-header-clock-24").checked = state.get().header.clock.hour24;
    helper.e(".control-header-clock-show-meridiem").checked = state.get().header.clock.show.meridiem;
    helper.e(".control-header-edit-add-active").checked = state.get().header.editAdd.active;
    helper.e(".control-header-accent-active").checked = state.get().header.accent.active;
    helper.e(".control-header-date-character-length-" + state.get().header.date.characterLength).checked = true;
    helper.e(".control-layout-alignment-horizontal-" + state.get().layout.alignment.horizontal).checked = true;
    helper.e(".control-layout-alignment-vertical-" + state.get().layout.alignment.vertical).checked = true;
    helper.e(".control-layout-container-" + state.get().layout.container).checked = true;
    helper.e(".control-layout-scroll-past-end").checked = state.get().layout.scrollPastEnd;
    helper.e(".control-background-image-active").checked = state.get().background.image.active;
    helper.e(".control-background-image-url").value = state.get().background.image.url;
    helper.e(".control-background-image-opacity").value = 100 - (state.get().background.image.opacity * 100);
    helper.e(".control-background-image-blur").value = state.get().background.image.blur;
    helper.e(".control-background-image-grayscale").value = state.get().background.image.grayscale * 100;
    helper.e(".control-background-image-accent-opacity").value = (state.get().background.image.accentOpacity * 100);
  };

  var init = function() {
    _bind();
    update();
    dependents();
    render();
  };

  // exposed methods
  return {
    init: init,
    render: render,
    dependents: dependents,
    update: update
  };

})();