geico-design-kit 7.0.0

package/dist/components/TimelineFilter.js

@@ -0,0 +1,492 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _appState = _interopRequireDefault(require("../../src/appState"));
+var utils = _interopRequireWildcard(require("../../src/utils"));
+var _baseComponent = _interopRequireDefault(require("../../src/baseComponent"));
+var _UserAgentService = _interopRequireDefault(require("../../src/services/UserAgentService"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function"); }
+function _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, "value" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }
+function _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, "prototype", { writable: !1 }), e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+var validateSettings = [{
+  setting: "content",
+  isRequired: true,
+  validate: "type",
+  possibleValues: ["string", "object"],
+  errorMessage: ["GDK TimelineFilter : Content must be defined and set to a DOM selector or Node"]
+}, {
+  setting: "onFilterSubmit",
+  isRequired: false,
+  validate: "type",
+  possibleValues: ["function"],
+  errorMessage: ["GDK TimelineFilter : onFilterSubmit must be a function"]
+}, {
+  setting: "onClearFilter",
+  isRequired: false,
+  validate: "type",
+  possibleValues: ["function"],
+  errorMessage: ["GDK TimelineFilter : onClearFilter must be a function"]
+}, {
+  setting: "setInitialFilters",
+  isRequired: false,
+  validate: "type",
+  possibleValues: ["object"],
+  errorMessage: ["GDK TimelineFilter : setInitialFilters must be an object"]
+}];
+var TimelineFilter = /*#__PURE__*/function () {
+  /**
+   * Refer to the design kit section of this component for JS examples and setting details.
+   * @param {string, Object} content
+   *  A reference to the html timeline filter node
+   *
+   * @param {function} [onFilterSubmit]
+   * Callback function fired once a 'filter-submit' is clicked
+   *
+   * @param {function} [onClearFilter]
+   * Callback function fired once 'Clear Filters' is clicked
+   *
+   * @param {object} [setDefaultFilters]
+   * Accepts an array of objects containing checkbox IDs and an indicator to select or deselect them, selects or deselects them, and updates the count bubble
+   *
+   */
+  function TimelineFilter(options) {
+    _classCallCheck(this, TimelineFilter);
+    this._internalVars = {
+      node: null,
+      //used for content item
+      dropdownTrigger: null,
+      checkbox: null,
+      dropdown: null,
+      mobileOpen: null,
+      //mobileClose: null,
+      mobileBar: null,
+      mobileText: null,
+      clear: null,
+      search: null,
+      submit: null,
+      dropdownContainer: null
+    };
+
+    //options with defaults set
+    this._defaults = {};
+
+    // Create options by extending defaults with the passed in arugments
+    if (options && _typeof(options) === "object") {
+      this._options = _baseComponent["default"].extendDefaults(this._defaults, options);
+    }
+
+    //if the required options are valid set up the environment
+    if (_baseComponent["default"].validateSettings(this._options, validateSettings)) {
+      this._internalVars.contentType = _baseComponent["default"].getContentType(this);
+      setLocalVars.call(this);
+      setEvents.call(this);
+      if (_appState["default"].mode == "desktop") Array.prototype.forEach.call(this._internalVars.dropdownTrigger, function (el, i) {
+        el.setAttribute('aria-expanded', 'false');
+      });
+      if (this._options.setInitialFilters) {
+        this.setDefaultFilters.call(this, this._options.setInitialFilters);
+      }
+    }
+  }
+
+  //Public Methods
+
+  /**
+   * setDefaultFilters(obj)
+   * @param {object} [obj]
+   * Accepts an array of objects containing checkbox IDs and an indicator to select or deselect them, selects or deselects them, and updates the count bubble
+   */
+  return _createClass(TimelineFilter, [{
+    key: "setDefaultFilters",
+    value: function setDefaultFilters(obj) {
+      var _this = this;
+      Array.prototype.forEach.call(obj, function (el) {
+        if (el.id && el.action) {
+          var checkbox = document.querySelector('#' + el.id);
+          if (checkbox) {
+            if (el.action === 'select') {
+              checkbox.checked = true;
+              updateAllNotificationBubbles.call(_this, checkbox);
+            } else if (el.action === 'deselect') {
+              checkbox.checked = false;
+              updateAllNotificationBubbles.call(_this, checkbox);
+            }
+          }
+        }
+      });
+    }
+
+    /**
+     * destroy()
+     * removes the node from the dom and any events attached
+     */
+  }, {
+    key: "destroy",
+    value: function destroy() {
+      removeEvents.call(this);
+      this._internalVars.node.parentNode.removeChild(this._internalVars.node);
+
+      //a little garbage collection
+      for (var variableKey in this) {
+        if (this.hasOwnProperty(variableKey)) {
+          delete this[variableKey];
+        }
+      }
+    }
+  }]);
+}(); // Private Methods
+/**
+ * setLocalVars()
+ * set all the local vars to passed in options
+ */
+function setLocalVars() {
+  //determine the type of content passed in
+  if (this._internalVars.contentType === 'string') {
+    this._internalVars.node = document.querySelector(this._options.content);
+  } else if (this._internalVars.contentType === 'domNode') {
+    this._internalVars.node = this._options.content;
+  }
+  this._internalVars.dropdownTrigger = this._internalVars.node.querySelectorAll(".filter-dropdown-trigger");
+  this._internalVars.checkbox = this._internalVars.node.querySelectorAll(".filter-checkbox");
+  this._internalVars.dropdown = this._internalVars.node.querySelectorAll(".filter-dropdown");
+  this._internalVars.clear = this._internalVars.node.querySelector(".filter-clear");
+  this._internalVars.search = this._internalVars.node.querySelector(".filter-search");
+  this._internalVars.submit = this._internalVars.node.querySelector(".filter-submit");
+  this._internalVars.dropdownContainer = this._internalVars.node.querySelectorAll(".filter-container");
+  this._internalVars.mobileOpen = this._internalVars.node.querySelector(".filter-mobile-open");
+  //this._internalVars.mobileClose = this._internalVars.node.querySelector(".filter-mobile-close");
+  this._internalVars.mobileBar = this._internalVars.node.querySelector(".filter-mobile-bar");
+  this._internalVars.mobileText = this._internalVars.node.querySelector(".filter-mobile-bar-text");
+  this._internalVars.outsideHandler = outsideFieldClickHandler.bind(this);
+  this._internalVars.dropdownHandler = dropdownClickHandler.bind(this);
+  this._internalVars.checkTouchHandler = checkForTouch.bind(this);
+  this._internalVars.checkboxHandler = checkboxChangeHandler.bind(this);
+  this._internalVars.clearFilterHandler = clearFilter.bind(this);
+  this._internalVars.submitFilterHandler = submitFilter.bind(this);
+  this._internalVars.openDrawerHandler = openDrawer.bind(this);
+  this._internalVars.searchFocusHandler = searchFocus.bind(this);
+}
+
+/**
+ * setEvents()
+ * Sets all the events needed for the component
+ */
+function setEvents() {
+  var _this2 = this;
+  var eventName = _UserAgentService["default"]._clickEventName();
+
+  //set click events
+  Array.prototype.forEach.call(this._internalVars.dropdownTrigger, function (el, i) {
+    el.addEventListener(eventName, _this2._internalVars.dropdownHandler);
+    el.addEventListener("pointerdown", _this2._internalVars.checkTouchHandler);
+  });
+  Array.prototype.forEach.call(this._internalVars.dropdownContainer, function (el, i) {
+    el.addEventListener("mouseleave", _this2._internalVars.outsideHandler);
+  });
+  Array.prototype.forEach.call(this._internalVars.checkbox, function (el, i) {
+    el.addEventListener('change', _this2._internalVars.checkboxHandler);
+  });
+  this._internalVars.clear.addEventListener(eventName, this._internalVars.clearFilterHandler);
+  if (this._internalVars.search) {
+    this._internalVars.search.addEventListener('focus', this._internalVars.searchFocusHandler);
+  }
+  this._internalVars.submit.addEventListener(eventName, this._internalVars.submitFilterHandler);
+
+  // mobile
+  this._internalVars.mobileOpen.addEventListener(eventName, this._internalVars.openDrawerHandler);
+  //this._internalVars.mobileClose.addEventListener(eventName, closeDrawer.bind(this) );
+}
+
+/**
+ * removeEvents()
+ * removes all events from the component
+ */
+function removeEvents() {
+  var _this3 = this;
+  var eventName = _UserAgentService["default"]._clickEventName();
+
+  //remove click events
+  Array.prototype.forEach.call(this._internalVars.dropdownTrigger, function (el, i) {
+    el.removeEventListener(eventName, _this3._internalVars.dropdownHandler);
+    el.removeEventListener("pointerdown", _this3._internalVars.checkTouchHandler);
+  });
+  Array.prototype.forEach.call(this._internalVars.dropdownContainer, function (el, i) {
+    el.removeEventListener("mouseleave", _this3._internalVars.outsideHandler);
+  });
+  Array.prototype.forEach.call(this._internalVars.checkbox, function (el, i) {
+    el.removeEventListener('change', _this3._internalVars.checkboxHandler);
+  });
+  this._internalVars.clear.removeEventListener(eventName, this._internalVars.clearFilterHandler);
+  if (this._internalVars.search) {
+    this._internalVars.search.removeEventListener('focus', this._internalVars.searchFocusHandler);
+  }
+  this._internalVars.submit.removeEventListener(eventName, this._internalVars.submitFilterHandler);
+
+  // mobile
+  this._internalVars.mobileOpen.removeEventListener(eventName, this._internalVars.openDrawerHandler);
+  //this._internalVars.mobileClose.removeEventListener(eventName, closeDrawer.bind(this) );
+}
+function checkForTouch(el) {
+  var _this4 = this;
+  if (el.pointerType == 'touch') {
+    Array.prototype.forEach.call(this._internalVars.dropdownContainer, function (el, i) {
+      el.removeEventListener("mouseleave", _this4._internalVars.outsideHandler);
+    });
+  } else {
+    Array.prototype.forEach.call(this._internalVars.dropdownContainer, function (el, i) {
+      el.addEventListener("mouseleave", _this4._internalVars.outsideHandler);
+    });
+  }
+}
+
+/**
+ * openDrawer()
+ * opens the mobile filter drawer
+ */
+function openDrawer(el) {
+  if (utils.hasClass(this._internalVars.node, "-drawer-open")) {
+    closeDrawer.call(this);
+  } else {
+    this._internalVars.node.classList.add("-drawer-open");
+  }
+}
+
+/**
+ * closeDrawer()
+ * closes the mobile filter drawer
+ */
+function closeDrawer(el) {
+  this._internalVars.node.classList.remove("-drawer-open");
+}
+
+/**
+ * submitFilter()
+ * submits Filter form
+ */
+function submitFilter(el) {
+  var _this5 = this;
+  var data = serializeForm(this._internalVars.node);
+
+  // if mobile, close the drawer and update the filter text
+  if (_appState["default"].mode === "mobile") {
+    var fields = Object.keys(data).length;
+    if (data.keywords !== '' || fields > 1) {
+      this._internalVars.mobileText.innerHTML = 'Showing filtered activities & policies';
+    } else {
+      this._internalVars.mobileText.innerHTML = 'Showing all activities & policies';
+    }
+    this._internalVars.node.classList.remove("-drawer-open");
+  }
+
+  // fire onFilterSubmit Callback if there is one
+  setTimeout(function () {
+    if (_this5._options.onFilterSubmit) _this5._options.onFilterSubmit(data);
+  }, 10);
+  return false;
+}
+
+/**
+ * serializeForm()
+ * serialize form into object
+ */
+function serializeForm(form) {
+  if (!form || form.nodeName !== "FORM") {
+    return;
+  }
+  var i,
+    j,
+    obj = {};
+  for (i = form.elements.length - 1; i >= 0; i = i - 1) {
+    if (form.elements[i].name === "") {
+      continue;
+    }
+    switch (form.elements[i].nodeName) {
+      case 'INPUT':
+        switch (form.elements[i].type) {
+          case 'text':
+          case 'hidden':
+          case 'password':
+          case 'button':
+          case 'reset':
+          case 'submit':
+            obj[form.elements[i].name] = encodeURIComponent(form.elements[i].value);
+            break;
+          case 'checkbox':
+          case 'radio':
+            if (form.elements[i].checked) {
+              obj[form.elements[i].name] = encodeURIComponent(form.elements[i].value);
+            }
+            break;
+          case 'file':
+            break;
+        }
+        break;
+      case 'TEXTAREA':
+        obj[form.elements[i].name] = encodeURIComponent(form.elements[i].value);
+        break;
+      case 'SELECT':
+        switch (form.elements[i].type) {
+          case 'select-one':
+            obj[form.elements[i].name] = encodeURIComponent(form.elements[i].value);
+            break;
+          case 'select-multiple':
+            for (j = form.elements[i].options.length - 1; j >= 0; j = j - 1) {
+              if (form.elements[i].options[j].selected) {
+                obj[form.elements[i].name] = encodeURIComponent(form.elements[i].options[j].value);
+              }
+            }
+            break;
+        }
+        break;
+      case 'BUTTON':
+        switch (form.elements[i].type) {
+          case 'reset':
+          case 'submit':
+          case 'button':
+            obj[form.elements[i].name] = encodeURIComponent(form.elements[i].value);
+            break;
+        }
+        break;
+    }
+  }
+  return obj;
+}
+
+/**
+ * clearFilter()
+ * clears the timeline filters and unchecks all checkboxes
+ */
+function clearFilter(e) {
+  var _this6 = this;
+  e.preventDefault();
+  // unchecks all checkboxes
+  Array.prototype.forEach.call(this._internalVars.checkbox, function (el, i) {
+    el.checked = false;
+  });
+
+  // update notification bubble to 0
+  Array.prototype.forEach.call(this._internalVars.dropdownTrigger, function (el, i) {
+    updateNotificationBubble(el, 0);
+  });
+
+  // clears search field
+  if (this._internalVars.search) {
+    this._internalVars.search.value = '';
+  }
+
+  // fire onClearFilter Callback if there is one
+  setTimeout(function () {
+    if (_this6._options.onClearFilter) _this6._options.onClearFilter();
+  }, 10);
+}
+
+/**
+ * checkboxChangeHandler()
+ * updates the notification of how many checkboxes are selected per dropdown
+ */
+function checkboxChangeHandler(el) {
+  var currentNode = el.currentTarget;
+  var dropdownParent = findAncestor(currentNode, 'filter-dropdown');
+  var dropdownTrigger = dropdownParent.parentElement;
+  var total = dropdownParent.querySelectorAll('input[type="checkbox"]:checked').length;
+  updateNotificationBubble(dropdownTrigger, total);
+}
+
+/**
+ * findAncestor()
+ * Finds nearest ancestor with specified class
+ */
+function findAncestor(el, cls) {
+  while ((el = el.parentElement) && !el.classList.contains(cls));
+  return el;
+}
+
+/**
+ * updateNotificationBubble()
+ * updates the notification of how many checkboxes are selected per dropdown
+ */
+function updateNotificationBubble(el, value) {
+  var bubble = el.getElementsByClassName('dropdown-notify')[0];
+  bubble.innerHTML = value;
+  if (value > 0) {
+    bubble.classList.add("-visible");
+  } else {
+    bubble.classList.remove("-visible");
+  }
+}
+function updateAllNotificationBubbles(el) {
+  var dropdownParent = findAncestor(el, 'filter-dropdown');
+  var dropdownTrigger = dropdownParent.parentElement;
+  var total = dropdownParent.querySelectorAll('input[type="checkbox"]:checked').length;
+  updateNotificationBubble(dropdownTrigger, total);
+}
+
+/**
+ * dropdownClickHandler()
+ * Opens tab content for clicked tab and hides the rest
+ */
+function dropdownClickHandler(el) {
+  var currentNode = el.currentTarget;
+  currentNode.focus();
+  // add -active class 
+  Array.prototype.map.call(this._internalVars.dropdownTrigger, function (e, rank) {
+    if (e === currentNode && e === document.activeElement) {
+      // if already has active class, remove it
+      if (utils.hasClass(e, 'filter-dropdown-trigger--active')) {
+        e.classList.remove("filter-dropdown-trigger--active");
+        if (_appState["default"].mode == 'desktop') e.setAttribute('aria-expanded', 'false');
+      } else {
+        e.classList.add("filter-dropdown-trigger--active");
+        if (_appState["default"].mode == 'desktop') {
+          e.setAttribute('aria-expanded', 'true');
+        }
+      }
+    } else {
+      e.classList.remove("filter-dropdown-trigger--active");
+      if (_appState["default"].mode == 'desktop') e.setAttribute('aria-expanded', 'false');
+    }
+  });
+}
+
+/**
+ * dropdownClickHandler()
+ * Opens tab content for clicked tab and hides the rest
+ */
+function outsideFieldClickHandler(el) {
+  var currentNode = el.currentTarget;
+  // add -active class
+  Array.prototype.map.call(this._internalVars.dropdownTrigger, function (e, rank) {
+    if (e === currentNode) {
+      // if already has active class, remove it
+      if (utils.hasClass(e, 'filter-dropdown-trigger--active')) {
+        e.classList.remove("filter-dropdown-trigger--active");
+        if (_appState["default"].mode == 'desktop') e.setAttribute('aria-expanded', 'false');
+      }
+    } else {
+      e.classList.remove("filter-dropdown-trigger--active");
+      if (_appState["default"].mode == 'desktop') e.setAttribute('aria-expanded', 'false');
+    }
+  });
+}
+
+/**
+ * searchFocus()
+ * Closes all dropdowns on search focus
+ */
+function searchFocus(el) {
+  // add -active class 
+  Array.prototype.map.call(this._internalVars.dropdownTrigger, function (e, rank) {
+    e.classList.remove("filter-dropdown-trigger--active");
+    if (_appState["default"].mode == 'desktop') e.setAttribute('aria-expanded', 'false');
+  });
+}
+var _default = exports["default"] = TimelineFilter;

package/dist/components/ToTopArrow.js

@@ -0,0 +1,153 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _baseComponent = _interopRequireDefault(require("../../src/baseComponent"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function"); }
+function _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, "value" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }
+function _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, "prototype", { writable: !1 }), e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+var validateSettings = [{
+  setting: "content",
+  isRequired: true,
+  validate: "type",
+  possibleValues: ["string", "object"],
+  errorMessage: ["GDK ToTopArrow : Content must be defined and set to a DOM selector or Node"]
+}, {
+  setting: "toTopArrowClicked",
+  isRequired: false,
+  validate: "type",
+  possibleValues: ["function"],
+  errorMessage: ["GDK ToTopArrow : toTopArrowClicked must be defined and set function"]
+}];
+var ToTopArrow = /*#__PURE__*/function () {
+  /**
+   * Refer to the design kit section of this component for JS examples and setting details.
+   * @param {string, Object} content
+   *  A reference to the component node to toggle
+   *
+   * @param {function} [toTopArrowClicked]
+   * A callback function that gets fired when the To Top arrow is clicked
+   *
+   */
+  function ToTopArrow(options) {
+    _classCallCheck(this, ToTopArrow);
+    console.log('ToTopArrow has been initialized');
+    this._internalVars = {
+      node: null //used for current node
+    };
+
+    //options with defaults set
+    this._defaults = {
+      "getDuration": function getDuration() {
+        return pageYOffset <= 2000 ? 300 : 1200;
+      }
+    };
+
+    // Create options by extending defaults with the passed in arguments
+    if (options && _typeof(options) === "object") {
+      this._options = _baseComponent["default"].extendDefaults(this._defaults, options);
+    }
+
+    //if the required options are valid set up the environment
+    if (_baseComponent["default"].validateSettings(this._options, validateSettings)) {
+      this._internalVars.contentType = _baseComponent["default"].getContentType(this);
+      setLocalVars.call(this);
+      setEvents.call(this);
+    }
+  }
+
+  //Public Methods
+
+  /**
+   * removes the node from the dom and any events attached
+   */
+  return _createClass(ToTopArrow, [{
+    key: "destroy",
+    value: function destroy() {
+      removeEvents.call(this);
+      this._internalVars.node.parentNode.removeChild(this._internalVars.node);
+
+      //a little garbage collection
+      for (var variableKey in this) {
+        if (this.hasOwnProperty(variableKey)) {
+          delete this[variableKey];
+        }
+      }
+    }
+  }]);
+}(); // Private Methods
+/**
+ * setEvents()
+ * Sets all the events needed for the component
+ */
+function setEvents() {
+  this._internalVars.button.addEventListener("click", this._internalVars.handler);
+  window.addEventListener("scroll", toggleScrollBtnView.bind(this));
+}
+
+/**
+ * removeEvents()
+ * removes all events from the component
+ */
+function removeEvents() {
+  this._internalVars.button.removeEventListener("click", this._internalVars.handler);
+}
+
+/**
+ * toggleScrollBtnView()
+ * @param e
+ */
+function toggleScrollBtnView(e) {
+  if ((window.scrollY || screen.scrollY) > 200 && !this._internalVars.isDisplayed || (window.pageYOffset || screen.pageYOffset) > 200 && !this._internalVars.isDisplayed) {
+    this._internalVars.button.classList.add('displayed');
+    this._internalVars.isDisplayed = true;
+  } else if (window.scrollY <= 100 && this._internalVars.isDisplayed || window.pageYOffset <= 100 && this._internalVars.isDisplayed) {
+    this._internalVars.button.classList.remove('displayed');
+    this._internalVars.isDisplayed = false;
+  }
+}
+
+/**
+ * toggleView()
+ * instantiate To Top Arrow
+ */
+
+function toggleScroll(e) {
+  //TODO: set correct Duration speed!
+  var duration = this._defaults.getDuration();
+  e.preventDefault();
+  var scrollStep = -window.scrollY / (duration / 15) || -window.pageYOffset / (duration / 15),
+    scrollInterval = setInterval(function () {
+      if (window.scrollY !== 0 && window.scrollY !== undefined || window.pageYOffset !== 0 && window.pageYOffset !== undefined) {
+        window.scrollBy(0, scrollStep);
+      } else clearInterval(scrollInterval);
+    }, 15);
+  if (this._options.toTopArrowClicked) {
+    this._options.toTopArrowClicked();
+  }
+}
+
+/**
+ * setLocalVars()
+ * set local vars to the ones passed in options
+ */
+function setLocalVars() {
+  if (this._internalVars.contentType === 'string') {
+    this._internalVars.node = document.querySelector(this._options.content);
+  } else if (this._internalVars.contentType === 'domNode') {
+    this._internalVars.node = this._options.content;
+  }
+
+  //add icon dom
+  this._internalVars.node.insertAdjacentHTML('beforeend', "<div class=\"icon-to-top-arrow\"></div>");
+  this._internalVars.button = this._internalVars.node;
+  this._internalVars.isDisplayed = false;
+  this._internalVars.handler = toggleScroll.bind(this);
+}
+var _default = exports["default"] = ToTopArrow;