rcreasey.github.io/src/js/header.js at 08e54026313c3eaaffe843614a9a67693f43659b · 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
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
var header = (function() {

  var bind = {};

  bind.resize = function() {
    window.addEventListener("resize", function() {
      render.shade();
    }, false);
  };

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

  bind.fonts = function() {
    document.fonts.ready.then(function() {
      render.shade();
    });
  };

  var render = {};

  render.area = {
    width: function() {
      var html = helper.e("html");
      html.style.setProperty("--header-area-width", state.get.current().header.area.width + "%");
    }
  };

  render.shade = function() {
    var html = helper.e("html");
    var headerRect = helper.e(".header").getBoundingClientRect();
    var layoutRect = helper.e(".layout").getBoundingClientRect();
    var fontSize = parseInt(getComputedStyle(html).fontSize, 10);
    var scrollTop = document.documentElement.scrollTop;
    // var scrollHeight = document.documentElement.scrollHeight;
    var innerHeight = window.innerHeight;
    // if shade show
    if (state.get.current().header.shade.show) {
      // shade always
      if (state.get.current().header.shade.style == "always") {
        helper.removeClass(html, "is-header-shade-style-scroll");
        helper.addClass(html, "is-header-shade-style-always");
        // shade scroll
      } else if (state.get.current().header.shade.style == "scroll") {
        helper.removeClass(html, "is-header-shade-style-always");
        // check header position
        if (state.get.current().layout.order == "headerlink") {
          // check scroll position
          if (scrollTop > fontSize * 2 && headerRect.top == 0) {
            helper.addClass(html, "is-header-shade-style-scroll");
          } else {
            helper.removeClass(html, "is-header-shade-style-scroll");
          };
        } else if (state.get.current().layout.order == "linkheader") {
          // check scroll position
          if (headerRect.bottom == innerHeight && (scrollTop + innerHeight) < ((scrollTop + layoutRect.bottom) - (fontSize * 2))) {
            helper.addClass(html, "is-header-shade-style-scroll");
          } else {
            helper.removeClass(html, "is-header-shade-style-scroll");
          };
        };
      };
    } else {
      helper.removeClass(html, "is-header-shade-style-scroll");
      helper.removeClass(html, "is-header-shade-style-always");
    };
  };

  render.opacity = function() {
    var html = helper.e("html");
    if (state.get.current().header.shade.show) {
      html.style.setProperty("--header-shade-opacity", state.get.current().header.shade.opacity);
    };
  };

  render.border = function() {
    var html = helper.e("html");
    html.style.setProperty("--header-border-top", state.get.current().header.border.top);
    html.style.setProperty("--header-border-bottom", state.get.current().header.border.bottom);
  };

  render.search = {
    width: function() {
      var html = helper.e("html");
      html.style.setProperty("--header-search-width", state.get.current().header.search.width + "%");
    },
    size: function() {
      var html = helper.e("html");
      html.style.setProperty("--header-search-size", state.get.current().header.search.size + "em");
    }
  };

  render.greeting = {
    size: function() {
      var html = helper.e("html");
      html.style.setProperty("--header-greeting-size", state.get.current().header.greeting.size + "em");
    }
  };

  render.transitional = {
    size: function() {
      var html = helper.e("html");
      html.style.setProperty("--header-transitional-size", state.get.current().header.transitional.size + "em");
    }
  };

  render.clock = {
    size: function() {
      var html = helper.e("html");
      html.style.setProperty("--header-clock-size", state.get.current().header.clock.size + "em");
    }
  };

  render.date = {
    size: function() {
      var html = helper.e("html");
      html.style.setProperty("--header-date-size", state.get.current().header.date.size + "em");
    }
  };

  render.button = {
    size: function() {
      var html = helper.e("html");
      html.style.setProperty("--header-button-size", state.get.current().header.button.size + "em");
    },
    style: function() {
      var action = {
        box: function() {
          helper.removeClass(helper.getClosest(helper.e(".control-edit"), ".form-input-button"), "form-input-button-link");
          helper.removeClass(helper.e(".control-add-toggle"), "button-link");
          helper.removeClass(helper.getClosest(helper.e(".control-theme-color-rgb-quick"), ".form-input-button"), "form-input-button-link");
          helper.removeClass(helper.getClosest(helper.e(".control-theme-accent-rgb-quick"), ".form-input-button"), "form-input-button-link");
          helper.removeClass(helper.e(".control-menu-open"), "button-link");
        },
        clear: function() {
          helper.addClass(helper.getClosest(helper.e(".control-edit"), ".form-input-button"), "form-input-button-link");
          helper.addClass(helper.e(".control-add-toggle"), "button-link");
          helper.addClass(helper.getClosest(helper.e(".control-theme-color-rgb-quick"), ".form-input-button"), "form-input-button-link");
          helper.addClass(helper.getClosest(helper.e(".control-theme-accent-rgb-quick"), ".form-input-button"), "form-input-button-link");
          helper.addClass(helper.e(".control-menu-open"), "button-link");
        }
      };
      action[state.get.current().header.button.style]();
    },
    dot: function() {
      if (state.get.current().header.button.colorAccent.dot.show) {
        helper.addClass(helper.getClosest(helper.e(".control-theme-color-rgb-quick"), ".form-input-button"), "input-color-dot");
        helper.addClass(helper.getClosest(helper.e(".control-theme-color-rgb-quick"), ".form-input-button"), "input-color-dot-shade");
        helper.removeClass(helper.getClosest(helper.e(".control-theme-color-rgb-quick"), ".form-input-button"), "form-input-hide");
        helper.addClass(helper.getClosest(helper.e(".control-theme-accent-rgb-quick"), ".form-input-button"), "input-color-dot");
        helper.addClass(helper.getClosest(helper.e(".control-theme-accent-rgb-quick"), ".form-input-button"), "input-color-dot-accent");
        helper.removeClass(helper.getClosest(helper.e(".control-theme-accent-rgb-quick"), ".form-input-button"), "form-input-hide");
      } else {
        helper.removeClass(helper.getClosest(helper.e(".control-theme-color-rgb-quick"), ".form-input-button"), "input-color-dot");
        helper.removeClass(helper.getClosest(helper.e(".control-theme-color-rgb-quick"), ".form-input-button"), "input-color-dot-shade");
        helper.addClass(helper.getClosest(helper.e(".control-theme-color-rgb-quick"), ".form-input-button"), "form-input-hide");
        helper.removeClass(helper.getClosest(helper.e(".control-theme-accent-rgb-quick"), ".form-input-button"), "input-color-dot");
        helper.removeClass(helper.getClosest(helper.e(".control-theme-accent-rgb-quick"), ".form-input-button"), "input-color-dot-accent");
        helper.addClass(helper.getClosest(helper.e(".control-theme-accent-rgb-quick"), ".form-input-button"), "form-input-hide");
      };
    }
  };

  var init = function() {
    bind.resize();
    bind.scroll();
    bind.fonts();
    render.area.width();
    render.shade();
    render.opacity();
    render.border();
    render.greeting.size();
    render.transitional.size();
    render.clock.size();
    render.date.size();
    render.search.width();
    render.search.size();
    render.button.size();
    render.button.style();
    render.button.dot();
  };

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

})();