Source: side_navigation.es.js

  1. /**
  2.  * Copyright (c) 2000-present Liferay, Inc. All rights reserved.
  3.  *
  4.  * This library is free software; you can redistribute it and/or modify it under
  5.  * the terms of the GNU Lesser General Public License as published by the Free
  6.  * Software Foundation; either version 2.1 of the License, or (at your option)
  7.  * any later version.
  8.  *
  9.  * This library is distributed in the hope that it will be useful, but WITHOUT
  10.  * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS
  11.  * FOR A PARTICULAR PURPOSE. See the GNU Lesser General Public License for more
  12.  * details.
  13.  */
  15. import EventEmitter from './events/EventEmitter';
  17. /**
  18.  * Options
  19.  *
  20.  * @property {String|Number}  breakpoint   The window width that defines the desktop size.
  21.  * @property {String}         content      The class or ID of the content container.
  22.  * @property {String}         container    The class or ID of the sidenav container.
  23.  * @property {String|Number}  gutter       The space between the sidenav-slider and the sidenav-content.
  24.  * @property {String}         navigation   The class or ID of the navigation container.
  25.  * @property {String}         position     The position of the sidenav-slider. Possible values: left, right
  26.  * @property {String}         type         The type of sidenav in desktop. Possible values: relative, fixed, fixed-push
  27.  * @property {String}         typeMobile   The type of sidenav in mobile. Possible values: relative, fixed, fixed-push
  28.  * @property {String|Object}  url          The URL to fetch the content to inject into .sidebar-body
  29.  * @property {String|Number}  width        The width of the side navigation.
  30.  */
  31. const DEFAULTS = {
  32. 	breakpoint: 768,
  33. 	content: '.sidenav-content',
  34. 	gutter: '0px',
  35. 	loadingIndicatorTPL:
  36. 		'<div class="loading-animation loading-animation-md"></div>',
  37. 	navigation: '.sidenav-menu-slider',
  38. 	position: 'left',
  39. 	type: 'relative',
  40. 	typeMobile: 'relative',
  41. 	url: null,
  42. 	width: '225px',
  43. };
  45. /**
  46.  * Map from toggler DOM nodes to sidenav instances.
  47.  */
  48. const INSTANCE_MAP = new WeakMap();
  50. /**
  51.  * Utility function that strips off a possible jQuery and Metal
  52.  * component wrappers from a DOM element.
  53.  */
  54. function getElement(element) {
  56. 	// Remove jQuery wrapper, if any.
  58. 	if (element && element.jquery) {
  59. 		if (element.length > 1) {
  60. 			throw new Error(
  61. 				`getElement(): Expected at most one element, got ${element.length}`
  62. 			);
  63. 		}
  64. 		element = element.get(0);
  65. 	}
  67. 	// Remove Metal wrapper, if any.
  69. 	if (element && !(element instanceof HTMLElement)) {
  70. 		element = element.element;
  71. 	}
  73. 	return element;
  74. }
  76. function getInstance(element) {
  77. 	element = getElement(element);
  79. 	const instance = INSTANCE_MAP.get(element);
  81. 	return instance;
  82. }
  84. /**
  85.  * A list of attributes that can contribute to the "identity" of an element, for
  86.  * the purposes of delegated event handling.
  87.  */
  88. const IDENTITY_ATTRIBUTES = [/^aria-/, /^data-/, /^type$/];
  90. /**
  91.  * Returns a unique selector for the supplied element. Ideally we'd just use
  92.  * the "id" attribute (assigning one if necessary), but the use of Metal
  93.  * components means that any "id" we assign will be blown away on the next state
  94.  * change.
  95.  */
  96. function getUniqueSelector(element) {
  97. 	element = getElement(element);
  99. 	if (element.id) {
  100. 		return `#${element.id}`;
  101. 	}
  103. 	let ancestorWithId = element.parentNode;
  105. 	while (ancestorWithId) {
  106. 		if (ancestorWithId.id) {
  107. 			break;
  108. 		}
  110. 		ancestorWithId = ancestorWithId.parentNode;
  111. 	}
  113. 	const attributes = Array.from(element.attributes)
  114. 		.map(({name, value}) => {
  115. 			const isIdentifying = IDENTITY_ATTRIBUTES.some((regExp) => {
  116. 				return regExp.test(name);
  117. 			});
  119. 			return isIdentifying ? `[${name}=${JSON.stringify(value)}]` : null;
  120. 		})
  121. 		.filter(Boolean)
  122. 		.sort();
  124. 	return [
  125. 		ancestorWithId ? `#${ancestorWithId.id} ` : '',
  126. 		element.tagName.toLowerCase(),
  127. 		...attributes,
  128. 	].join('');
  129. }
  131. function addClass(element, className) {
  132. 	setClasses(element, {
  133. 		[className]: true,
  134. 	});
  135. }
  137. function removeClass(element, className) {
  138. 	setClasses(element, {
  139. 		[className]: false,
  140. 	});
  141. }
  143. function setClasses(element, classes) {
  144. 	element = getElement(element);
  146. 	if (element) {
  148. 		// One at a time because IE 11: https://caniuse.com/#feat=classlist
  150. 		Object.entries(classes).forEach(([className, present]) => {
  152. 			// Some callers use multiple space-separated classNames for
  153. 			// `openClass`/`data-open-class`. (Looking at you,
  154. 			// product-navigation-simulation-web...)
  156. 			className.split(/\s+/).forEach((name) => {
  157. 				if (present) {
  158. 					element.classList.add(name);
  159. 				}
  160. 				else {
  161. 					element.classList.remove(name);
  162. 				}
  163. 			});
  164. 		});
  165. 	}
  166. }
  168. function hasClass(element, className) {
  169. 	element = getElement(element);
  171. 	// Again, product-navigation-simulation-web passes multiple classNames.
  173. 	return className.split(/\s+/).every((name) => {
  174. 		return element.classList.contains(name);
  175. 	});
  176. }
  178. function setStyles(element, styles) {
  179. 	element = getElement(element);
  181. 	if (element) {
  182. 		Object.entries(styles).forEach(([property, value]) => {
  183. 			element.style[property] = value;
  184. 		});
  185. 	}
  186. }
  188. /**
  189.  * For compatibility with jQuery, which will treat "100" as "100px".
  190.  */
  191. function px(dimension) {
  192. 	if (typeof dimension === 'number') {
  193. 		return dimension + 'px';
  194. 	}
  195. 	else if (
  196. 		typeof dimension === 'string' &&
  197. 		dimension.match(/^\s*\d+\s*$/)
  198. 	) {
  199. 		return dimension.trim() + 'px';
  200. 	}
  201. 	else {
  202. 		return dimension;
  203. 	}
  204. }
  206. /**
  207.  * Replacement for jQuery's `offset().left`.
  208.  *
  209.  * @see: https://github.com/jquery/jquery/blob/438b1a3e8a52/src/offset.js#L94-L100
  210.  */
  211. function offsetLeft(element) {
  212. 	const elementLeft = element.getBoundingClientRect().left;
  214. 	const documentOffset = element.ownerDocument.defaultView.pageOffsetX || 0;
  216. 	return elementLeft + documentOffset;
  217. }
  219. /**
  220.  * Keys are event names (eg. "click").
  221.  * Values are objects mapping selectors to EventEmitters.
  222.  */
  223. const eventNamesToSelectors = {};
  225. function handleEvent(eventName, event) {
  226. 	Object.keys(eventNamesToSelectors[eventName]).forEach((selector) => {
  227. 		let matches = false;
  228. 		let target = event.target;
  230. 		while (target) {
  232. 			// In IE11 SVG elements have no `parentElement`, only a
  233. 			// `parentNode`, so we have to search up the DOM using
  234. 			// the latter. This in turn requires us to check for the
  235. 			// existence of `target.matches` before using it.
  236. 			//
  237. 			// See: https://stackoverflow.com/a/36270354/2103996
  239. 			matches = target.matches && target.matches(selector);
  241. 			if (matches) {
  242. 				break;
  243. 			}
  245. 			target = target.parentNode;
  246. 		}
  248. 		if (matches) {
  249. 			const emitter = eventNamesToSelectors[eventName][selector];
  250. 			emitter.emit('click', event);
  251. 		}
  252. 	});
  253. }
  255. /**
  256.  * Creates a delegated event listener for `eventName` events on
  257.  * `elementOrSelector`.
  258.  */
  259. function subscribe(elementOrSelector, eventName, handler) {
  260. 	if (elementOrSelector) {
  262. 		// Add only one listener per `eventName`.
  264. 		if (!eventNamesToSelectors[eventName]) {
  265. 			eventNamesToSelectors[eventName] = {};
  267. 			document.body.addEventListener(eventName, (event) =>
  268. 				handleEvent(eventName, event)
  269. 			);
  270. 		}
  272. 		const emitters = eventNamesToSelectors[eventName];
  273. 		const selector =
  274. 			typeof elementOrSelector === 'string'
  275. 				? elementOrSelector
  276. 				: getUniqueSelector(elementOrSelector);
  278. 		if (!emitters[selector]) {
  279. 			emitters[selector] = new EventEmitter();
  280. 		}
  282. 		const emitter = emitters[selector];
  283. 		const subscription = emitter.on(eventName, (event) => {
  284. 			if (!event.defaultPrevented) {
  285. 				handler(event);
  286. 			}
  287. 		});
  289. 		return {
  290. 			dispose() {
  291. 				subscription.dispose();
  292. 			},
  293. 		};
  294. 	}
  296. 	return null;
  297. }
  299. function toInt(str) {
  300. 	return parseInt(str, 10) || 0;
  301. }
  303. function SideNavigation(toggler, options) {
  304. 	toggler = getElement(toggler);
  305. 	this.init(toggler, options);
  306. }
  308. SideNavigation.TRANSITION_DURATION = 500;
  310. SideNavigation.prototype = {
  311. 	_bindUI() {
  312. 		const instance = this;
  314. 		instance._subscribeClickTrigger();
  316. 		instance._subscribeClickSidenavClose();
  317. 	},
  319. 	_emit(event) {
  320. 		this._emitter.emit(event, this);
  321. 	},
  323. 	_getSidenavWidth() {
  324. 		const instance = this;
  326. 		const options = instance.options;
  328. 		const widthOriginal = options.widthOriginal;
  330. 		let width = widthOriginal;
  331. 		const winWidth = window.innerWidth;
  333. 		if (winWidth < widthOriginal + 40) {
  334. 			width = winWidth - 40;
  335. 		}
  337. 		return width;
  338. 	},
  340. 	_getSimpleSidenavType() {
  341. 		const instance = this;
  343. 		const options = instance.options;
  345. 		const desktop = instance._isDesktop();
  346. 		const type = options.type;
  347. 		const typeMobile = options.typeMobile;
  349. 		if (desktop && type === 'fixed-push') {
  350. 			return 'desktop-fixed-push';
  351. 		}
  352. 		else if (!desktop && typeMobile === 'fixed-push') {
  353. 			return 'mobile-fixed-push';
  354. 		}
  356. 		return 'fixed';
  357. 	},
  359. 	_isDesktop() {
  360. 		return window.innerWidth >= this.options.breakpoint;
  361. 	},
  363. 	_isSidenavRight() {
  364. 		const instance = this;
  365. 		const options = instance.options;
  367. 		const container = document.querySelector(options.container);
  368. 		const isSidenavRight = hasClass(container, 'sidenav-right');
  370. 		return isSidenavRight;
  371. 	},
  373. 	_isSimpleSidenavClosed() {
  374. 		const instance = this;
  375. 		const options = instance.options;
  377. 		const openClass = options.openClass;
  379. 		const container = document.querySelector(options.container);
  381. 		return !hasClass(container, openClass);
  382. 	},
  384. 	_loadUrl(element, url) {
  385. 		const instance = this;
  387. 		const sidebar = element.querySelector('.sidebar-body');
  389. 		if (!instance._fetchPromise && sidebar) {
  390. 			while (sidebar.firstChild) {
  391. 				sidebar.removeChild(sidebar.firstChild);
  392. 			}
  394. 			const loading = document.createElement('div');
  395. 			addClass(loading, 'sidenav-loading');
  396. 			loading.innerHTML = instance.options.loadingIndicatorTPL;
  398. 			sidebar.appendChild(loading);
  399. 			instance._fetchPromise = Liferay.Util.fetch(url);
  401. 			instance._fetchPromise
  402. 				.then((response) => {
  403. 					if (!response.ok) {
  404. 						throw new Error(`Failed to fetch ${url}`);
  405. 					}
  407. 					return response.text();
  408. 				})
  409. 				.then((text) => {
  410. 					const range = document.createRange();
  412. 					range.selectNode(sidebar);
  414. 					// Unlike `.innerHTML`, this will eval scripts.
  416. 					const fragment = range.createContextualFragment(text);
  418. 					sidebar.removeChild(loading);
  420. 					sidebar.appendChild(fragment);
  422. 					instance.setHeight();
  423. 				})
  424. 				.catch((err) => {
  425. 					console.error(err);
  426. 				});
  427. 		}
  428. 	},
  430. 	_renderNav() {
  431. 		const instance = this;
  432. 		const options = instance.options;
  434. 		const container = document.querySelector(options.container);
  435. 		const navigation = container.querySelector(options.navigation);
  436. 		const menu = navigation.querySelector('.sidenav-menu');
  438. 		const closed = hasClass(container, 'closed');
  439. 		const sidenavRight = instance._isSidenavRight();
  440. 		const width = instance._getSidenavWidth();
  442. 		if (closed) {
  443. 			setStyles(menu, {
  444. 				width: px(width),
  445. 			});
  447. 			if (sidenavRight) {
  448. 				const positionDirection = options.rtl ? 'left' : 'right';
  450. 				setStyles(menu, {
  451. 					[positionDirection]: px(width),
  452. 				});
  453. 			}
  454. 		}
  455. 		else {
  456. 			instance.showSidenav();
  457. 			instance.setHeight();
  458. 		}
  459. 	},
  461. 	_renderUI() {
  462. 		const instance = this;
  463. 		const options = instance.options;
  465. 		const container = document.querySelector(options.container);
  466. 		const toggler = instance.toggler;
  468. 		const mobile = instance.mobile;
  469. 		const type = mobile ? options.typeMobile : options.type;
  471. 		if (!instance.useDataAttribute) {
  472. 			if (mobile) {
  473. 				setClasses(container, {
  474. 					closed: true,
  475. 					open: false,
  476. 				});
  478. 				setClasses(toggler, {
  479. 					active: false,
  480. 					open: false,
  481. 				});
  482. 			}
  484. 			if (options.position === 'right') {
  485. 				addClass(container, 'sidenav-right');
  486. 			}
  488. 			if (type !== 'relative') {
  489. 				addClass(container, 'sidenav-fixed');
  490. 			}
  492. 			instance._renderNav();
  493. 		}
  495. 		// Force Reflow for IE11 Browser Bug
  497. 		setStyles(container, {
  498. 			display: '',
  499. 		});
  500. 	},
  502. 	_subscribeClickSidenavClose() {
  503. 		const instance = this;
  505. 		const options = instance.options;
  507. 		const containerSelector = options.container;
  509. 		if (!instance._sidenavCloseSubscription) {
  510. 			const closeButtonSelector = `${containerSelector} .sidenav-close`;
  511. 			instance._sidenavCloseSubscription = subscribe(
  512. 				closeButtonSelector,
  513. 				'click',
  514. 				function handleSidenavClose(event) {
  515. 					event.preventDefault();
  516. 					instance.toggle();
  517. 				}
  518. 			);
  519. 		}
  520. 	},
  522. 	_subscribeClickTrigger() {
  523. 		const instance = this;
  525. 		if (!instance._togglerSubscription) {
  526. 			const toggler = instance.toggler;
  528. 			instance._togglerSubscription = subscribe(
  529. 				toggler,
  530. 				'click',
  531. 				function handleTogglerClick(event) {
  532. 					instance.toggle();
  534. 					event.preventDefault();
  535. 				}
  536. 			);
  537. 		}
  538. 	},
  540. 	_subscribeSidenavTransitionEnd(element, fn) {
  541. 		setTimeout(() => {
  542. 			removeClass(element, 'sidenav-transition');
  544. 			fn();
  545. 		}, SideNavigation.TRANSITION_DURATION);
  546. 	},
  548. 	clearHeight() {
  549. 		const instance = this;
  551. 		const options = instance.options;
  552. 		const container = document.querySelector(options.container);
  554. 		if (container) {
  555. 			const content = container.querySelector(options.content);
  556. 			const navigation = container.querySelector(options.navigation);
  557. 			const menu = container.querySelector('.sidenav-menu');
  559. 			[content, navigation, menu].forEach((element) => {
  560. 				setStyles(element, {
  561. 					height: '',
  562. 					'min-height': '',
  563. 				});
  564. 			});
  565. 		}
  566. 	},
  568. 	destroy() {
  569. 		const instance = this;
  571. 		if (instance._sidenavCloseSubscription) {
  572. 			instance._sidenavCloseSubscription.dispose();
  573. 			instance._sidenavCloseSubscription = null;
  574. 		}
  576. 		if (instance._togglerSubscription) {
  577. 			instance._togglerSubscription.dispose();
  578. 			instance._togglerSubscription = null;
  579. 		}
  581. 		INSTANCE_MAP.delete(instance.toggler);
  582. 	},
  584. 	hide() {
  585. 		const instance = this;
  587. 		if (instance.useDataAttribute) {
  588. 			instance.hideSimpleSidenav();
  589. 		}
  590. 		else {
  591. 			instance.toggleNavigation(false);
  592. 		}
  593. 	},
  595. 	hideSidenav() {
  596. 		const instance = this;
  597. 		const options = instance.options;
  599. 		const container = document.querySelector(options.container);
  601. 		if (container) {
  602. 			const content = container.querySelector(options.content);
  603. 			const navigation = container.querySelector(options.navigation);
  604. 			const menu = navigation.querySelector('.sidenav-menu');
  606. 			const sidenavRight = instance._isSidenavRight();
  608. 			let positionDirection = options.rtl ? 'right' : 'left';
  610. 			if (sidenavRight) {
  611. 				positionDirection = options.rtl ? 'left' : 'right';
  612. 			}
  614. 			const paddingDirection = 'padding-' + positionDirection;
  616. 			setStyles(content, {
  617. 				[paddingDirection]: '',
  618. 				[positionDirection]: '',
  619. 			});
  621. 			setStyles(navigation, {
  622. 				width: '',
  623. 			});
  625. 			if (sidenavRight) {
  626. 				setStyles(menu, {
  627. 					[positionDirection]: px(instance._getSidenavWidth()),
  628. 				});
  629. 			}
  630. 		}
  631. 	},
  633. 	hideSimpleSidenav() {
  634. 		const instance = this;
  636. 		const options = instance.options;
  638. 		const simpleSidenavClosed = instance._isSimpleSidenavClosed();
  640. 		if (!simpleSidenavClosed) {
  641. 			const content = document.querySelector(options.content);
  642. 			const container = document.querySelector(options.container);
  644. 			const closedClass = options.closedClass;
  645. 			const openClass = options.openClass;
  647. 			const toggler = instance.toggler;
  649. 			const target =
  650. 				toggler.dataset.target || toggler.getAttribute('href');
  652. 			instance._emit('closedStart.lexicon.sidenav');
  654. 			instance._subscribeSidenavTransitionEnd(content, () => {
  655. 				removeClass(container, 'sidenav-transition');
  656. 				removeClass(toggler, 'sidenav-transition');
  658. 				instance._emit('closed.lexicon.sidenav');
  659. 			});
  661. 			if (hasClass(content, openClass)) {
  662. 				setClasses(content, {
  663. 					[closedClass]: true,
  664. 					[openClass]: false,
  665. 					'sidenav-transition': true,
  666. 				});
  667. 			}
  669. 			addClass(container, 'sidenav-transition');
  670. 			addClass(toggler, 'sidenav-transition');
  672. 			setClasses(container, {
  673. 				[closedClass]: true,
  674. 				[openClass]: false,
  675. 			});
  677. 			const nodes = document.querySelectorAll(
  678. 				`[data-target="${target}"], [href="${target}"]`
  679. 			);
  681. 			Array.from(nodes).forEach((node) => {
  682. 				setClasses(node, {
  683. 					active: false,
  684. 					[openClass]: false,
  685. 				});
  686. 				setClasses(node, {
  687. 					active: false,
  688. 					[openClass]: false,
  689. 				});
  690. 			});
  691. 		}
  692. 	},
  694. 	init(toggler, options) {
  695. 		const instance = this;
  697. 		/**
  698. 		 * For compatibility, we use a data-toggle attribute of
  699. 		 * "liferay-sidenav" to distinguish our internal uses from
  700. 		 * possible external uses of the old jQuery plugin (which used
  701. 		 * "sidenav').
  702. 		 */
  703. 		const useDataAttribute = toggler.dataset.toggle === 'liferay-sidenav';
  705. 		options = {...DEFAULTS, ...options};
  707. 		options.breakpoint = toInt(options.breakpoint);
  708. 		options.container =
  709. 			options.container ||
  710. 			toggler.dataset.target ||
  711. 			toggler.getAttribute('href');
  712. 		options.gutter = toInt(options.gutter);
  713. 		options.rtl = document.dir === 'rtl';
  714. 		options.width = toInt(options.width);
  715. 		options.widthOriginal = options.width;
  717. 		// instantiate using data attribute
  719. 		if (useDataAttribute) {
  720. 			options.closedClass = toggler.dataset.closedClass || 'closed';
  721. 			options.content = toggler.dataset.content;
  722. 			options.loadingIndicatorTPL =
  723. 				toggler.dataset.loadingIndicatorTpl ||
  724. 				options.loadingIndicatorTPL;
  725. 			options.openClass = toggler.dataset.openClass || 'open';
  726. 			options.type = toggler.dataset.type;
  727. 			options.typeMobile = toggler.dataset.typeMobile;
  728. 			options.url = toggler.dataset.url;
  729. 			options.width = '';
  730. 		}
  732. 		instance.toggler = toggler;
  733. 		instance.options = options;
  734. 		instance.useDataAttribute = useDataAttribute;
  736. 		instance._emitter = new EventEmitter();
  738. 		instance._bindUI();
  739. 		instance._renderUI();
  740. 	},
  742. 	on(event, listener) {
  743. 		return this._emitter.on(event, listener);
  744. 	},
  746. 	setHeight() {
  747. 		const instance = this;
  749. 		const options = instance.options;
  751. 		const container = document.querySelector(options.container);
  753. 		const type = instance.mobile ? options.typeMobile : options.type;
  755. 		if (type !== 'fixed' && type !== 'fixed-push') {
  756. 			const content = container.querySelector(options.content);
  757. 			const navigation = container.querySelector(options.navigation);
  758. 			const menu = container.querySelector('.sidenav-menu');
  760. 			const contentHeight = content.getBoundingClientRect().height;
  761. 			const navigationHeight = navigation.getBoundingClientRect().height;
  763. 			const tallest = px(Math.max(contentHeight, navigationHeight));
  765. 			setStyles(content, {
  766. 				'min-height': tallest,
  767. 			});
  769. 			setStyles(navigation, {
  770. 				height: '100%',
  771. 				'min-height': tallest,
  772. 			});
  774. 			setStyles(menu, {
  775. 				height: '100%',
  776. 				'min-height': tallest,
  777. 			});
  778. 		}
  779. 	},
  781. 	show() {
  782. 		const instance = this;
  784. 		if (instance.useDataAttribute) {
  785. 			instance.showSimpleSidenav();
  786. 		}
  787. 		else {
  788. 			instance.toggleNavigation(true);
  789. 		}
  790. 	},
  792. 	showSidenav() {
  793. 		const instance = this;
  794. 		const mobile = instance.mobile;
  795. 		const options = instance.options;
  797. 		const container = document.querySelector(options.container);
  798. 		const content = container.querySelector(options.content);
  799. 		const navigation = container.querySelector(options.navigation);
  800. 		const menu = navigation.querySelector('.sidenav-menu');
  802. 		const sidenavRight = instance._isSidenavRight();
  803. 		const width = instance._getSidenavWidth();
  805. 		const offset = width + options.gutter;
  807. 		const url = options.url;
  809. 		if (url) {
  810. 			instance._loadUrl(menu, url);
  811. 		}
  813. 		setStyles(navigation, {
  814. 			width: px(width),
  815. 		});
  817. 		setStyles(menu, {
  818. 			width: px(width),
  819. 		});
  821. 		let positionDirection = options.rtl ? 'right' : 'left';
  823. 		if (sidenavRight) {
  824. 			positionDirection = options.rtl ? 'left' : 'right';
  825. 		}
  827. 		const paddingDirection = 'padding-' + positionDirection;
  829. 		const pushContentCssProperty = mobile
  830. 			? positionDirection
  831. 			: paddingDirection;
  832. 		const type = mobile ? options.typeMobile : options.type;
  834. 		if (type !== 'fixed') {
  835. 			let navigationStartX = hasClass(container, 'open')
  836. 				? offsetLeft(navigation) - options.gutter
  837. 				: offsetLeft(navigation) - offset;
  839. 			const contentStartX = offsetLeft(content);
  840. 			const contentWidth = toInt(getComputedStyle(content).width);
  842. 			let padding = '';
  844. 			if (
  845. 				(options.rtl && sidenavRight) ||
  846. 				(!options.rtl && options.position === 'left')
  847. 			) {
  848. 				navigationStartX = offsetLeft(navigation) + offset;
  850. 				if (navigationStartX > contentStartX) {
  851. 					padding = navigationStartX - contentStartX;
  852. 				}
  853. 			}
  854. 			else if (
  855. 				(options.rtl && options.position === 'left') ||
  856. 				(!options.rtl && sidenavRight)
  857. 			) {
  858. 				if (navigationStartX < contentStartX + contentWidth) {
  859. 					padding = contentStartX + contentWidth - navigationStartX;
  861. 					if (padding >= offset) {
  862. 						padding = offset;
  863. 					}
  864. 				}
  865. 			}
  867. 			setStyles(content, {
  868. 				[pushContentCssProperty]: px(padding),
  869. 			});
  870. 		}
  871. 	},
  873. 	showSimpleSidenav() {
  874. 		const instance = this;
  876. 		const options = instance.options;
  878. 		const simpleSidenavClosed = instance._isSimpleSidenavClosed();
  880. 		if (simpleSidenavClosed) {
  881. 			const content = document.querySelector(options.content);
  882. 			const container = document.querySelector(options.container);
  884. 			const closedClass = options.closedClass;
  885. 			const openClass = options.openClass;
  887. 			const toggler = instance.toggler;
  889. 			const url = toggler.dataset.url;
  891. 			if (url) {
  892. 				instance._loadUrl(container, url);
  893. 			}
  895. 			instance._emit('openStart.lexicon.sidenav');
  897. 			instance._subscribeSidenavTransitionEnd(content, () => {
  898. 				removeClass(container, 'sidenav-transition');
  899. 				removeClass(toggler, 'sidenav-transition');
  901. 				instance._emit('open.lexicon.sidenav');
  902. 			});
  904. 			setClasses(content, {
  905. 				[closedClass]: false,
  906. 				[openClass]: true,
  907. 				'sidenav-transition': true,
  908. 			});
  909. 			setClasses(container, {
  910. 				[closedClass]: false,
  911. 				[openClass]: true,
  912. 				'sidenav-transition': true,
  913. 			});
  914. 			setClasses(toggler, {
  915. 				active: true,
  916. 				[openClass]: true,
  917. 				'sidenav-transition': true,
  918. 			});
  919. 		}
  920. 	},
  922. 	toggle() {
  923. 		const instance = this;
  925. 		if (instance.useDataAttribute) {
  926. 			instance.toggleSimpleSidenav();
  927. 		}
  928. 		else {
  929. 			instance.toggleNavigation();
  930. 		}
  931. 	},
  933. 	toggleNavigation(force) {
  934. 		const instance = this;
  935. 		const options = instance.options;
  937. 		const container = document.querySelector(options.container);
  938. 		const menu = container.querySelector('.sidenav-menu');
  939. 		const toggler = instance.toggler;
  941. 		const width = options.width;
  943. 		const closed =
  944. 			typeof force === 'boolean' ? force : hasClass(container, 'closed');
  945. 		const sidenavRight = instance._isSidenavRight();
  947. 		if (closed) {
  948. 			instance._emit('openStart.lexicon.sidenav');
  949. 		}
  950. 		else {
  951. 			instance._emit('closedStart.lexicon.sidenav');
  952. 		}
  954. 		instance._subscribeSidenavTransitionEnd(container, () => {
  955. 			const menu = container.querySelector('.sidenav-menu');
  957. 			if (hasClass(container, 'closed')) {
  958. 				instance.clearHeight();
  960. 				setClasses(toggler, {
  961. 					open: false,
  962. 					'sidenav-transition': false,
  963. 				});
  965. 				instance._emit('closed.lexicon.sidenav');
  966. 			}
  967. 			else {
  968. 				setClasses(toggler, {
  969. 					open: true,
  970. 					'sidenav-transition': false,
  971. 				});
  973. 				instance._emit('open.lexicon.sidenav');
  974. 			}
  976. 			if (instance.mobile) {
  978. 				// ios 8 fixed element disappears when trying to scroll
  980. 				menu.focus();
  981. 			}
  982. 		});
  984. 		if (closed) {
  985. 			instance.setHeight();
  987. 			setStyles(menu, {
  988. 				width: px(width),
  989. 			});
  991. 			const positionDirection = options.rtl ? 'left' : 'right';
  993. 			if (sidenavRight) {
  994. 				setStyles(menu, {
  995. 					[positionDirection]: '',
  996. 				});
  997. 			}
  998. 		}
  1000. 		addClass(container, 'sidenav-transition');
  1001. 		addClass(toggler, 'sidenav-transition');
  1003. 		if (closed) {
  1004. 			instance.showSidenav();
  1005. 		}
  1006. 		else {
  1007. 			instance.hideSidenav();
  1008. 		}
  1010. 		setClasses(container, {
  1011. 			closed: !closed,
  1012. 			open: closed,
  1013. 		});
  1015. 		setClasses(toggler, {
  1016. 			active: closed,
  1017. 			open: closed,
  1018. 		});
  1019. 	},
  1021. 	toggleSimpleSidenav() {
  1022. 		const instance = this;
  1024. 		const simpleSidenavClosed = instance._isSimpleSidenavClosed();
  1026. 		if (simpleSidenavClosed) {
  1027. 			instance.showSimpleSidenav();
  1028. 		}
  1029. 		else {
  1030. 			instance.hideSimpleSidenav();
  1031. 		}
  1032. 	},
  1034. 	visible() {
  1035. 		const instance = this;
  1037. 		let closed;
  1039. 		if (instance.useDataAttribute) {
  1040. 			closed = instance._isSimpleSidenavClosed();
  1041. 		}
  1042. 		else {
  1043. 			const container = document.querySelector(
  1044. 				instance.options.container
  1045. 			);
  1047. 			closed = hasClass(container, 'sidenav-transition')
  1048. 				? !hasClass(container, 'closed')
  1049. 				: hasClass(container, 'closed');
  1050. 		}
  1052. 		return !closed;
  1053. 	},
  1054. };
  1056. SideNavigation.destroy = function destroy(element) {
  1057. 	const instance = getInstance(element);
  1059. 	if (instance) {
  1060. 		instance.destroy();
  1061. 	}
  1062. };
  1064. SideNavigation.hide = function hide(element) {
  1065. 	const instance = getInstance(element);
  1067. 	if (instance) {
  1068. 		instance.hide();
  1069. 	}
  1070. };
  1072. SideNavigation.initialize = function initialize(toggler, options = {}) {
  1073. 	toggler = getElement(toggler);
  1075. 	let instance = INSTANCE_MAP.get(toggler);
  1077. 	if (!instance) {
  1078. 		instance = new SideNavigation(toggler, options);
  1080. 		INSTANCE_MAP.set(toggler, instance);
  1081. 	}
  1083. 	return instance;
  1084. };
  1086. SideNavigation.instance = getInstance;
  1088. function onReady() {
  1089. 	const togglers = document.querySelectorAll(
  1090. 		'[data-toggle="liferay-sidenav"]'
  1091. 	);
  1093. 	Array.from(togglers).forEach(SideNavigation.initialize);
  1094. }
  1096. if (document.readyState !== 'loading') {
  1098. 	// readyState is "interactive" or "complete".
  1100. 	onReady();
  1101. }
  1102. else {
  1103. 	document.addEventListener('DOMContentLoaded', () => {
  1104. 		onReady();
  1105. 	});
  1106. }
  1108. export default SideNavigation;