rcreasey.github.io/js/header.js at 50ebd3fad408dc3334ebb6b2203beeee77091d44 · 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
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
var header = (function() {

  var _bind = function() {
    window.addEventListener("resize", function() {
      render();
    }, false);
    window.addEventListener("scroll", function() {
      render();
    }, false);
    helper.eA(".container").forEach(function(arrayItem, index) {
      arrayItem.addEventListener("transitionend", function() {
        render();
      }, false);
    });
  };

  var edge = function(action) {
    var header = helper.e(".header");
    var container = helper.makeNode({
      tag: "div",
      attr: [{
        key: "class",
        value: "header-edge"
      }]
    });
    var state = {
      show: function() {
        header.appendChild(container);
      },
      hide: function() {
        header.removeChild(helper.e(".header-edge"));
      }
    };
    state[action]();
  };

  var render = function() {
    var html = helper.e("html");
    var header = helper.e(".header");
    var link = helper.e(".link");
    var fontSize = parseInt(getComputedStyle(html).fontSize, 10);
    var scrollPosition = document.documentElement.scrollTop;
    var _margin = function() {
      var height = parseInt(getComputedStyle(header).height, 10);
      var marginValue;
      if (state.get().background.image.show && (state.get().header.shade.show && state.get().header.shade.style == "always") || state.get().header.shade.style == "always" || state.get().header.shade.border.bottom.show) {
        marginValue = (height + fontSize);
      } else {
        marginValue = height;
      };
      html.style.setProperty("--header-height", marginValue + "px");
    };
    var _color = function() {
      if (state.get().header.shade.show) {
        if (state.get().header.shade.style == "always") {
          html.style.setProperty("--header-shade-color", "var(--gray-01)");
        } else if (state.get().header.shade.style == "scroll") {
          if (scrollPosition > (fontSize * 2)) {
            html.style.setProperty("--header-shade-color", "var(--gray-01)");
          } else {
            html.style.setProperty("--header-shade-color", "transparent");
          };
        } else {
          html.style.setProperty("--header-shade-color", "transparent");
        };
      } else {
        html.style.setProperty("--header-shade-color", "transparent");
      };
    };
    var _opacity = function() {
      if (state.get().header.shade.show) {
        html.style.setProperty("--header-shade-opacity", state.get().header.shade.opacity);
      };
    };
    var _padding = function() {
      html.style.setProperty("--header-shade-padding-multiplier-top", state.get().header.shade.padding.top);
      html.style.setProperty("--header-shade-padding-multiplier-bottom", state.get().header.shade.padding.bottom);
    };
    var _border = function() {
      html.style.setProperty("--header-border-width-multiplier-top", state.get().header.shade.border.top.width);
      html.style.setProperty("--header-border-width-multiplier-bottom", state.get().header.shade.border.bottom.width);
    };
    _color();
    _opacity();
    _padding();
    _border();
    _margin();
  };

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

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

})();