baseframe-js
Version:
A suite of useful Javascript plugins and functions to help with Front-end Development on websites
148 lines (147 loc) • 7.5 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = void 0;
var _cashDom = _interopRequireDefault(require("cash-dom"));
var _helpers = require("./util/helpers");
var _Store = _interopRequireDefault(require("./core/Store"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
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(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
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 VERSION = "2.0.0";
var DATA_NAME = 'NavDesktop';
var EVENT_NAME = 'navDesktop';
var DEFAULTS = {
stopWidth: 768,
delay: 800,
navLeavingDelay: 800,
outerElem: document.body,
cssPrefix: 'menu',
hoverCss: 'hover'
};
var NavDesktop = exports["default"] = /*#__PURE__*/function () {
function NavDesktop(element, options) {
_classCallCheck(this, NavDesktop);
_defineProperty(this, "element", void 0);
_defineProperty(this, "params", void 0);
_defineProperty(this, "cssList", void 0);
_defineProperty(this, "stayHover", void 0);
_defineProperty(this, "navLeaving", void 0);
var s = this;
s.stayHover;
s.navLeaving;
s.element = element;
var dataOptions = (0, _helpers.getDataOptions)(element, EVENT_NAME);
s.params = _cashDom["default"].extend({}, NavDesktop.defaults, options, dataOptions);
var cssPrefix = s.params.cssPrefix;
s.cssList = {
// menuOuterOpen: `${cssPrefix}--outer-open`,
menuHasUL: "".concat(cssPrefix, "__has-ul"),
menuNoUl: "".concat(cssPrefix, "__no-ul"),
menuElemEdge: "".concat(cssPrefix, "__elem-on-edge"),
menuHovered: "".concat(cssPrefix, "--hover"),
menuLeaving: "".concat(cssPrefix, "--leaving")
};
s.addCssToElems();
s.handleEvents();
return s;
}
return _createClass(NavDesktop, [{
key: "addCssToElems",
value: function addCssToElems() {
var s = this;
var css = s.cssList;
(0, _cashDom["default"])('li', s.element).addClass(css.menuNoUl).has('ul').each(function () {
(0, _cashDom["default"])(this).removeClass(css.menuNoUl);
if (!(0, _cashDom["default"])(this).hasClass(css.menuHasUL)) {
(0, _cashDom["default"])(this).addClass(css.menuHasUL);
}
});
}
}, {
key: "handleEvents",
value: function handleEvents() {
var s = this;
var prevEvent = null;
var evtTracker = function evtTracker(elem, e, cb) {
var currEvent = e.type;
var containsOrISElem = elem.isSameNode(e.target) ? true : !!(0, _cashDom["default"])(e.target).parents(elem).length;
if (!prevEvent || prevEvent !== currEvent && containsOrISElem) {
prevEvent = currEvent;
cb();
}
};
(0, _cashDom["default"])(s.element).find('ul').on("mouseover.".concat(EVENT_NAME, " focusin.").concat(EVENT_NAME), 'li, ul', function (e) {
var li = this;
var css = s.cssList;
var p = s.params;
evtTracker(li, e, function () {
s.edgeDetector(li);
var $liLiParents = (0, _cashDom["default"])(li).parents('li');
li.classList.add(p.hoverCss);
$liLiParents.addClass(p.hoverCss);
(0, _cashDom["default"])(li).find(".".concat(p.hoverCss)).removeClass(p.hoverCss);
(0, _cashDom["default"])(li).siblings('li').removeClass(p.hoverCss);
$liLiParents.length === 0 && (0, _cashDom["default"])(s.element).find(".".concat(p.hoverCss)).removeClass(p.hoverCss);
s.navLeaving && clearTimeout(s.navLeaving);
s.stayHover && clearTimeout(s.stayHover);
(0, _cashDom["default"])(p.outerElem).addClass(css.menuHovered).removeClass(css.menuLeaving);
});
}).on("mouseout.".concat(EVENT_NAME, " focusout.").concat(EVENT_NAME), 'li, ul', function (e) {
var liOrUl = this;
var p = s.params;
var css = s.cssList;
evtTracker(liOrUl, e, function () {
s.stayHover = setTimeout(function () {
(0, _cashDom["default"])(s.element).find(".".concat(p.hoverCss)).removeClass("".concat(p.hoverCss, " ").concat(css.menuElemEdge));
(0, _cashDom["default"])(s.element).find(".".concat(css.menuElemEdge)).removeClass(css.menuElemEdge);
(0, _cashDom["default"])(p.outerElem).removeClass(css.menuHovered).addClass(css.menuLeaving);
s.navLeaving = setTimeout(function () {
(0, _cashDom["default"])(p.outerElem).removeClass(css.menuLeaving);
}, p.navLeavingDelay);
}, p.delay);
});
});
}
}, {
key: "edgeDetector",
value: function edgeDetector(liOrUl) {
var s = this;
var stopWidth = s.params.stopWidth;
var css = s.cssList;
var dw = (0, _cashDom["default"])(window).width();
if (stopWidth < dw) {
var $uls = (0, _cashDom["default"])(liOrUl).find('ul');
if ($uls.length) {
var ul = $uls[0],
l = (0, _cashDom["default"])(ul).offset().left,
uw = ul.scrollWidth,
fullyVisible = l + uw <= dw;
if (!fullyVisible) {
liOrUl.classList.add(css.menuElemEdge);
}
}
}
}
}], [{
key: "remove",
value: function remove(element, plugin) {
(0, _cashDom["default"])(element).each(function () {
var s = plugin || (0, _Store["default"])(this, DATA_NAME);
var $el = (0, _cashDom["default"])(s.element);
$el.find('ul').off("mouseover.".concat(EVENT_NAME, " focusin.").concat(EVENT_NAME, " focusout.").concat(EVENT_NAME));
$el.off("mouseout.".concat(EVENT_NAME));
(0, _Store["default"])(this, DATA_NAME, null);
});
}
}]);
}();
_defineProperty(NavDesktop, "defaults", DEFAULTS);
_defineProperty(NavDesktop, "version", VERSION);
_defineProperty(NavDesktop, "pluginName", DATA_NAME);