rcreasey.github.io/js/background.js at 64887ec7fb117e492ea83b89391a35d13f2ea027 · rcreasey/rcreasey.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
var background = (function() {

  var render = function() {
    var html = helper.e("html");
    var background = helper.e(".background");
    var backgroundImage = helper.e(".background-image");
    if (state.get().background.image.show) {
      helper.removeClass(background, "is-hidden");
      html.style.setProperty("--background-image", "url(\"" + state.get().background.image.url + "\")");
      html.style.setProperty("--background-blur", state.get().background.image.blur + "px");
      html.style.setProperty("--background-grayscale", state.get().background.image.grayscale);
      html.style.setProperty("--background-opacity", state.get().background.image.opacity);
      html.style.setProperty("--background-accent-opacity", state.get().background.image.accent);
      if (state.get().background.image.blur > 0 && state.get().background.image.grayscale > 0) {
        backgroundImage.style.setProperty("filter", "blur(var(--background-blur)) grayscale(var(--background-grayscale))");
      } else if (state.get().background.image.blur > 0 && state.get().background.image.grayscale == 0) {
        backgroundImage.style.setProperty("filter", "blur(var(--background-blur))");
      } else if (state.get().background.image.blur == 0 && state.get().background.image.grayscale > 0) {
        backgroundImage.style.setProperty("filter", "grayscale(var(--background-grayscale))");
      };
    } else {
      helper.addClass(background, "is-hidden");
      html.style.setProperty("--background-image", "none");
      html.style.setProperty("--background-blur", "none");
      html.style.setProperty("--background-grayscale", "none");
      html.style.setProperty("--background-opacity", "none");
      html.style.setProperty("--background-accent-opacity", "none");
      backgroundImage.style.setProperty("filter", "none");
    };
  };

  var init = function() {
    render();
  };

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

})();