Browse Source

worked on website

master
root 5 years ago
parent
commit
f8361cfd18

+ 1
- 1
src/commands.txt View File

cd /opt/autodoc/www/js/ cd /opt/autodoc/www/js/
npm install popper.js --save npm install popper.js --save
npm install tooltip.js --save npm install tooltip.js --save
for i in `find node_modules -maxdepth 3 -mindepth 3 -type f`; do cp $i .; done
for i in `find node_modules -maxdepth 4 -mindepth 4 -type f | grep umd`; do cp $i .; done
rm -rf node_modules rm -rf node_modules

+ 7
- 0
www/css/autodoc.css View File

html body {
background: #CCCCCC;
}

#autodoc_tab {
margin-top: 60px;
}

+ 49
- 13
www/index.html View File

<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="css/bootstrap.min.css"> <link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/autodoc.css">


<title>AutoDoc</title> <title>AutoDoc</title>
</head> </head>
<body> <body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
<a class="navbar-brand" href="#">AutoDoc</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span> <span class="navbar-toggler-icon"></span>
</button> </button>


<div class="collapse navbar-collapse" id="navbarSupportedContent"> <div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<ul class="navbar-nav mr-auto" id="autodoc_navbar">
<li class="nav-item active"> <li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
<a class="nav-link" href="#home">Home</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" href="#">Link</a>
<a class="nav-link" href="#upload">Upload</a>
</li> </li>
<li class="nav-item">
<a class="nav-link" href="#tags">Tags</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#search">Search</a>
</li>
<!--
<li class="nav-item dropdown"> <li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown Dropdown
<a class="dropdown-item" href="#">Something else here</a> <a class="dropdown-item" href="#">Something else here</a>
</div> </div>
</li> </li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
-->
</ul> </ul>
<form class="form-inline my-2 my-lg-0"> <form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
<input class="form-control mr-sm-2" type="search" placeholder="Quick Search" aria-label="Search">
</form> </form>
</div> </div>
</nav> </nav>


<div class="container" id="autodoc_tab">

<!-- Home -->
<div class="container d-none" id="autodoc_tab_home">
<h1>home</h1>
</div>

<!-- Upload -->
<div class="container d-none" id="autodoc_tab_upload">
<h1>upload</h1>
</div>

<!-- Tags -->
<div class="container d-none" id="autodoc_tab_tags">
<h1>tags</h1>
</div>

<!-- Search -->
<div class="container d-none" id="autodoc_tab_search">
<h1>search</h1>
</div>

</div>

<footer class="fixed-bottom page-footer font-small bg-dark">
<div class="container footer-copyright text-center text-muted py-3">
AutoDoc v1.0 &copy; Pascal Gloor 2019
</div>
</footer>



<script src="js/jquery.js"></script>
<script src="js/popper.js"></script>
<script src="js/tooltip.js"></script>
<script src="js/jquery.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/tooltip.min.js"></script>
<script src="js/bootstrap.min.js"></script> <script src="js/bootstrap.min.js"></script>
<script src="js/autodoc.js"></script>
</body> </body>
</html> </html>

+ 37
- 0
www/js/autodoc.js View File

/* AutoDoc Javascript */

var conf = {
"default_hash": "home"
};


$(document).ready(function() {
change_page();
});

$(window).bind('hashchange', function() {
change_page();
});

function change_page() {
var hash = document.location.hash.substr(1) || conf.default_hash;

if ( ! $("#autodoc_tab_"+hash).length ) {
hash = conf.default_hash;
}

/* change menu highlights and content visibility */
$('#autodoc_navbar').find("a").each(function(id, obj) {
var curhash = $(obj).attr('href').substr(1);
if ( curhash == hash ) {
console.log("add " + curhash);
$(obj).parent().addClass('active');
$('#autodoc_tab_'+curhash).removeClass('d-none');
}
else {
console.log("remove " + curhash);
$(obj).parent().removeClass('active');
$('#autodoc_tab_'+curhash).addClass('d-none');
}
});
}

+ 261
- 172
www/js/popper-utils.js View File

* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
* SOFTWARE. * SOFTWARE.
*/ */
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
typeof define === 'function' && define.amd ? define(['exports'], factory) :
(factory((global.PopperUtils = {})));
}(this, (function (exports) { 'use strict';

/** /**
* Get CSS computed property of the given element * Get CSS computed property of the given element
* @method * @method
return []; return [];
} }
// NOTE: 1 DOM access here // NOTE: 1 DOM access here
const window = element.ownerDocument.defaultView;
const css = window.getComputedStyle(element, null);
var window = element.ownerDocument.defaultView;
var css = window.getComputedStyle(element, null);
return property ? css[property] : css; return property ? css[property] : css;
} }


} }


// Firefox want us to check `-x` and `-y` variations as well // Firefox want us to check `-x` and `-y` variations as well
const { overflow, overflowX, overflowY } = getStyleComputedProperty(element);

var _getStyleComputedProp = getStyleComputedProperty(element),
overflow = _getStyleComputedProp.overflow,
overflowX = _getStyleComputedProp.overflowX,
overflowY = _getStyleComputedProp.overflowY;

if (/(auto|scroll|overlay)/.test(overflow + overflowY + overflowX)) { if (/(auto|scroll|overlay)/.test(overflow + overflowY + overflowX)) {
return element; return element;
} }


var isBrowser = typeof window !== 'undefined' && typeof document !== 'undefined'; var isBrowser = typeof window !== 'undefined' && typeof document !== 'undefined';


const isIE11 = isBrowser && !!(window.MSInputMethodContext && document.documentMode);
const isIE10 = isBrowser && /MSIE 10/.test(navigator.userAgent);
var isIE11 = isBrowser && !!(window.MSInputMethodContext && document.documentMode);
var isIE10 = isBrowser && /MSIE 10/.test(navigator.userAgent);


/** /**
* Determines if the browser is Internet Explorer * Determines if the browser is Internet Explorer
return document.documentElement; return document.documentElement;
} }


const noOffsetParent = isIE(10) ? document.body : null;
var noOffsetParent = isIE(10) ? document.body : null;


// NOTE: 1 DOM access here // NOTE: 1 DOM access here
let offsetParent = element.offsetParent || null;
var offsetParent = element.offsetParent || null;
// Skip hidden elements which don't have an offsetParent // Skip hidden elements which don't have an offsetParent
while (offsetParent === noOffsetParent && element.nextElementSibling) { while (offsetParent === noOffsetParent && element.nextElementSibling) {
offsetParent = (element = element.nextElementSibling).offsetParent; offsetParent = (element = element.nextElementSibling).offsetParent;
} }


const nodeName = offsetParent && offsetParent.nodeName;
var nodeName = offsetParent && offsetParent.nodeName;


if (!nodeName || nodeName === 'BODY' || nodeName === 'HTML') { if (!nodeName || nodeName === 'BODY' || nodeName === 'HTML') {
return element ? element.ownerDocument.documentElement : document.documentElement; return element ? element.ownerDocument.documentElement : document.documentElement;
} }


function isOffsetContainer(element) { function isOffsetContainer(element) {
const { nodeName } = element;
var nodeName = element.nodeName;

if (nodeName === 'BODY') { if (nodeName === 'BODY') {
return false; return false;
} }
} }


// Here we make sure to give as "start" the element that comes first in the DOM // Here we make sure to give as "start" the element that comes first in the DOM
const order = element1.compareDocumentPosition(element2) & Node.DOCUMENT_POSITION_FOLLOWING;
const start = order ? element1 : element2;
const end = order ? element2 : element1;
var order = element1.compareDocumentPosition(element2) & Node.DOCUMENT_POSITION_FOLLOWING;
var start = order ? element1 : element2;
var end = order ? element2 : element1;


// Get common ancestor container // Get common ancestor container
const range = document.createRange();
var range = document.createRange();
range.setStart(start, 0); range.setStart(start, 0);
range.setEnd(end, 0); range.setEnd(end, 0);
const { commonAncestorContainer } = range;
var commonAncestorContainer = range.commonAncestorContainer;


// Both nodes are inside #document // Both nodes are inside #document

if (element1 !== commonAncestorContainer && element2 !== commonAncestorContainer || start.contains(end)) { if (element1 !== commonAncestorContainer && element2 !== commonAncestorContainer || start.contains(end)) {
if (isOffsetContainer(commonAncestorContainer)) { if (isOffsetContainer(commonAncestorContainer)) {
return commonAncestorContainer; return commonAncestorContainer;
} }


// one of the nodes is inside shadowDOM, find which one // one of the nodes is inside shadowDOM, find which one
const element1root = getRoot(element1);
var element1root = getRoot(element1);
if (element1root.host) { if (element1root.host) {
return findCommonOffsetParent(element1root.host, element2); return findCommonOffsetParent(element1root.host, element2);
} else { } else {
* @argument {String} side `top` or `left` * @argument {String} side `top` or `left`
* @returns {number} amount of scrolled pixels * @returns {number} amount of scrolled pixels
*/ */
function getScroll(element, side = 'top') {
const upperSide = side === 'top' ? 'scrollTop' : 'scrollLeft';
const nodeName = element.nodeName;
function getScroll(element) {
var side = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'top';

var upperSide = side === 'top' ? 'scrollTop' : 'scrollLeft';
var nodeName = element.nodeName;


if (nodeName === 'BODY' || nodeName === 'HTML') { if (nodeName === 'BODY' || nodeName === 'HTML') {
const html = element.ownerDocument.documentElement;
const scrollingElement = element.ownerDocument.scrollingElement || html;
var html = element.ownerDocument.documentElement;
var scrollingElement = element.ownerDocument.scrollingElement || html;
return scrollingElement[upperSide]; return scrollingElement[upperSide];
} }


* @param {Boolean} subtract - set to true if you want to subtract the scroll values * @param {Boolean} subtract - set to true if you want to subtract the scroll values
* @return {Object} rect - The modifier rect object * @return {Object} rect - The modifier rect object
*/ */
function includeScroll(rect, element, subtract = false) {
const scrollTop = getScroll(element, 'top');
const scrollLeft = getScroll(element, 'left');
const modifier = subtract ? -1 : 1;
function includeScroll(rect, element) {
var subtract = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;

var scrollTop = getScroll(element, 'top');
var scrollLeft = getScroll(element, 'left');
var modifier = subtract ? -1 : 1;
rect.top += scrollTop * modifier; rect.top += scrollTop * modifier;
rect.bottom += scrollTop * modifier; rect.bottom += scrollTop * modifier;
rect.left += scrollLeft * modifier; rect.left += scrollLeft * modifier;
*/ */


function getBordersSize(styles, axis) { function getBordersSize(styles, axis) {
const sideA = axis === 'x' ? 'Left' : 'Top';
const sideB = sideA === 'Left' ? 'Right' : 'Bottom';
var sideA = axis === 'x' ? 'Left' : 'Top';
var sideB = sideA === 'Left' ? 'Right' : 'Bottom';


return parseFloat(styles[`border${sideA}Width`], 10) + parseFloat(styles[`border${sideB}Width`], 10);
return parseFloat(styles['border' + sideA + 'Width'], 10) + parseFloat(styles['border' + sideB + 'Width'], 10);
} }


function getSize(axis, body, html, computedStyle) { function getSize(axis, body, html, computedStyle) {
return Math.max(body[`offset${axis}`], body[`scroll${axis}`], html[`client${axis}`], html[`offset${axis}`], html[`scroll${axis}`], isIE(10) ? parseInt(html[`offset${axis}`]) + parseInt(computedStyle[`margin${axis === 'Height' ? 'Top' : 'Left'}`]) + parseInt(computedStyle[`margin${axis === 'Height' ? 'Bottom' : 'Right'}`]) : 0);
return Math.max(body['offset' + axis], body['scroll' + axis], html['client' + axis], html['offset' + axis], html['scroll' + axis], isIE(10) ? parseInt(html['offset' + axis]) + parseInt(computedStyle['margin' + (axis === 'Height' ? 'Top' : 'Left')]) + parseInt(computedStyle['margin' + (axis === 'Height' ? 'Bottom' : 'Right')]) : 0);
} }


function getWindowSizes(document) { function getWindowSizes(document) {
const body = document.body;
const html = document.documentElement;
const computedStyle = isIE(10) && getComputedStyle(html);
var body = document.body;
var html = document.documentElement;
var computedStyle = isIE(10) && getComputedStyle(html);


return { return {
height: getSize('Height', body, html, computedStyle), height: getSize('Height', body, html, computedStyle),
* @return {Object} client rect * @return {Object} client rect
*/ */
function getBoundingClientRect(element) { function getBoundingClientRect(element) {
let rect = {};
var rect = {};


// IE10 10 FIX: Please, don't ask, the element isn't // IE10 10 FIX: Please, don't ask, the element isn't
// considered in DOM in some circumstances... // considered in DOM in some circumstances...
try { try {
if (isIE(10)) { if (isIE(10)) {
rect = element.getBoundingClientRect(); rect = element.getBoundingClientRect();
const scrollTop = getScroll(element, 'top');
const scrollLeft = getScroll(element, 'left');
var scrollTop = getScroll(element, 'top');
var scrollLeft = getScroll(element, 'left');
rect.top += scrollTop; rect.top += scrollTop;
rect.left += scrollLeft; rect.left += scrollLeft;
rect.bottom += scrollTop; rect.bottom += scrollTop;
} }
} catch (e) {} } catch (e) {}


const result = {
var result = {
left: rect.left, left: rect.left,
top: rect.top, top: rect.top,
width: rect.right - rect.left, width: rect.right - rect.left,
}; };


// subtract scrollbar size from sizes // subtract scrollbar size from sizes
const sizes = element.nodeName === 'HTML' ? getWindowSizes(element.ownerDocument) : {};
const width = sizes.width || element.clientWidth || result.right - result.left;
const height = sizes.height || element.clientHeight || result.bottom - result.top;
var sizes = element.nodeName === 'HTML' ? getWindowSizes(element.ownerDocument) : {};
var width = sizes.width || element.clientWidth || result.right - result.left;
var height = sizes.height || element.clientHeight || result.bottom - result.top;


let horizScrollbar = element.offsetWidth - width;
let vertScrollbar = element.offsetHeight - height;
var horizScrollbar = element.offsetWidth - width;
var vertScrollbar = element.offsetHeight - height;


// if an hypothetical scrollbar is detected, we must be sure it's not a `border` // if an hypothetical scrollbar is detected, we must be sure it's not a `border`
// we make this check conditional for performance reasons // we make this check conditional for performance reasons
if (horizScrollbar || vertScrollbar) { if (horizScrollbar || vertScrollbar) {
const styles = getStyleComputedProperty(element);
var styles = getStyleComputedProperty(element);
horizScrollbar -= getBordersSize(styles, 'x'); horizScrollbar -= getBordersSize(styles, 'x');
vertScrollbar -= getBordersSize(styles, 'y'); vertScrollbar -= getBordersSize(styles, 'y');


return getClientRect(result); return getClientRect(result);
} }


function getOffsetRectRelativeToArbitraryNode(children, parent, fixedPosition = false) {
const isIE10 = isIE(10);
const isHTML = parent.nodeName === 'HTML';
const childrenRect = getBoundingClientRect(children);
const parentRect = getBoundingClientRect(parent);
const scrollParent = getScrollParent(children);
function getOffsetRectRelativeToArbitraryNode(children, parent) {
var fixedPosition = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;

var isIE10 = isIE(10);
var isHTML = parent.nodeName === 'HTML';
var childrenRect = getBoundingClientRect(children);
var parentRect = getBoundingClientRect(parent);
var scrollParent = getScrollParent(children);


const styles = getStyleComputedProperty(parent);
const borderTopWidth = parseFloat(styles.borderTopWidth, 10);
const borderLeftWidth = parseFloat(styles.borderLeftWidth, 10);
var styles = getStyleComputedProperty(parent);
var borderTopWidth = parseFloat(styles.borderTopWidth, 10);
var borderLeftWidth = parseFloat(styles.borderLeftWidth, 10);


// In cases where the parent is fixed, we must ignore negative scroll in offset calc // In cases where the parent is fixed, we must ignore negative scroll in offset calc
if (fixedPosition && isHTML) { if (fixedPosition && isHTML) {
parentRect.top = Math.max(parentRect.top, 0); parentRect.top = Math.max(parentRect.top, 0);
parentRect.left = Math.max(parentRect.left, 0); parentRect.left = Math.max(parentRect.left, 0);
} }
let offsets = getClientRect({
var offsets = getClientRect({
top: childrenRect.top - parentRect.top - borderTopWidth, top: childrenRect.top - parentRect.top - borderTopWidth,
left: childrenRect.left - parentRect.left - borderLeftWidth, left: childrenRect.left - parentRect.left - borderLeftWidth,
width: childrenRect.width, width: childrenRect.width,
// differently when margins are applied to it. The margins are included in // differently when margins are applied to it. The margins are included in
// the box of the documentElement, in the other cases not. // the box of the documentElement, in the other cases not.
if (!isIE10 && isHTML) { if (!isIE10 && isHTML) {
const marginTop = parseFloat(styles.marginTop, 10);
const marginLeft = parseFloat(styles.marginLeft, 10);
var marginTop = parseFloat(styles.marginTop, 10);
var marginLeft = parseFloat(styles.marginLeft, 10);


offsets.top -= borderTopWidth - marginTop; offsets.top -= borderTopWidth - marginTop;
offsets.bottom -= borderTopWidth - marginTop; offsets.bottom -= borderTopWidth - marginTop;
return offsets; return offsets;
} }


function getViewportOffsetRectRelativeToArtbitraryNode(element, excludeScroll = false) {
const html = element.ownerDocument.documentElement;
const relativeOffset = getOffsetRectRelativeToArbitraryNode(element, html);
const width = Math.max(html.clientWidth, window.innerWidth || 0);
const height = Math.max(html.clientHeight, window.innerHeight || 0);
function getViewportOffsetRectRelativeToArtbitraryNode(element) {
var excludeScroll = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;

var html = element.ownerDocument.documentElement;
var relativeOffset = getOffsetRectRelativeToArbitraryNode(element, html);
var width = Math.max(html.clientWidth, window.innerWidth || 0);
var height = Math.max(html.clientHeight, window.innerHeight || 0);


const scrollTop = !excludeScroll ? getScroll(html) : 0;
const scrollLeft = !excludeScroll ? getScroll(html, 'left') : 0;
var scrollTop = !excludeScroll ? getScroll(html) : 0;
var scrollLeft = !excludeScroll ? getScroll(html, 'left') : 0;


const offset = {
var offset = {
top: scrollTop - relativeOffset.top + relativeOffset.marginTop, top: scrollTop - relativeOffset.top + relativeOffset.marginTop,
left: scrollLeft - relativeOffset.left + relativeOffset.marginLeft, left: scrollLeft - relativeOffset.left + relativeOffset.marginLeft,
width,
height
width: width,
height: height
}; };


return getClientRect(offset); return getClientRect(offset);
* @returns {Boolean} answer to "isFixed?" * @returns {Boolean} answer to "isFixed?"
*/ */
function isFixed(element) { function isFixed(element) {
const nodeName = element.nodeName;
var nodeName = element.nodeName;
if (nodeName === 'BODY' || nodeName === 'HTML') { if (nodeName === 'BODY' || nodeName === 'HTML') {
return false; return false;
} }
if (getStyleComputedProperty(element, 'position') === 'fixed') { if (getStyleComputedProperty(element, 'position') === 'fixed') {
return true; return true;
} }
const parentNode = getParentNode(element);
var parentNode = getParentNode(element);
if (!parentNode) { if (!parentNode) {
return false; return false;
} }
if (!element || !element.parentElement || isIE()) { if (!element || !element.parentElement || isIE()) {
return document.documentElement; return document.documentElement;
} }
let el = element.parentElement;
var el = element.parentElement;
while (el && getStyleComputedProperty(el, 'transform') === 'none') { while (el && getStyleComputedProperty(el, 'transform') === 'none') {
el = el.parentElement; el = el.parentElement;
} }
* @param {Boolean} fixedPosition - Is in fixed position mode * @param {Boolean} fixedPosition - Is in fixed position mode
* @returns {Object} Coordinates of the boundaries * @returns {Object} Coordinates of the boundaries
*/ */
function getBoundaries(popper, reference, padding, boundariesElement, fixedPosition = false) {
function getBoundaries(popper, reference, padding, boundariesElement) {
var fixedPosition = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;

// NOTE: 1 DOM access here // NOTE: 1 DOM access here


let boundaries = { top: 0, left: 0 };
const offsetParent = fixedPosition ? getFixedPositionOffsetParent(popper) : findCommonOffsetParent(popper, reference);
var boundaries = { top: 0, left: 0 };
var offsetParent = fixedPosition ? getFixedPositionOffsetParent(popper) : findCommonOffsetParent(popper, reference);


// Handle viewport case // Handle viewport case
if (boundariesElement === 'viewport') { if (boundariesElement === 'viewport') {
boundaries = getViewportOffsetRectRelativeToArtbitraryNode(offsetParent, fixedPosition); boundaries = getViewportOffsetRectRelativeToArtbitraryNode(offsetParent, fixedPosition);
} else { } else {
// Handle other cases based on DOM element used as boundaries // Handle other cases based on DOM element used as boundaries
let boundariesNode;
var boundariesNode = void 0;
if (boundariesElement === 'scrollParent') { if (boundariesElement === 'scrollParent') {
boundariesNode = getScrollParent(getParentNode(reference)); boundariesNode = getScrollParent(getParentNode(reference));
if (boundariesNode.nodeName === 'BODY') { if (boundariesNode.nodeName === 'BODY') {
boundariesNode = boundariesElement; boundariesNode = boundariesElement;
} }


const offsets = getOffsetRectRelativeToArbitraryNode(boundariesNode, offsetParent, fixedPosition);
var offsets = getOffsetRectRelativeToArbitraryNode(boundariesNode, offsetParent, fixedPosition);


// In case of HTML, we need a different computation // In case of HTML, we need a different computation
if (boundariesNode.nodeName === 'HTML' && !isFixed(offsetParent)) { if (boundariesNode.nodeName === 'HTML' && !isFixed(offsetParent)) {
const { height, width } = getWindowSizes(popper.ownerDocument);
var _getWindowSizes = getWindowSizes(popper.ownerDocument),
height = _getWindowSizes.height,
width = _getWindowSizes.width;

boundaries.top += offsets.top - offsets.marginTop; boundaries.top += offsets.top - offsets.marginTop;
boundaries.bottom = height + offsets.top; boundaries.bottom = height + offsets.top;
boundaries.left += offsets.left - offsets.marginLeft; boundaries.left += offsets.left - offsets.marginLeft;


// Add paddings // Add paddings
padding = padding || 0; padding = padding || 0;
const isPaddingNumber = typeof padding === 'number';
var isPaddingNumber = typeof padding === 'number';
boundaries.left += isPaddingNumber ? padding : padding.left || 0; boundaries.left += isPaddingNumber ? padding : padding.left || 0;
boundaries.top += isPaddingNumber ? padding : padding.top || 0; boundaries.top += isPaddingNumber ? padding : padding.top || 0;
boundaries.right -= isPaddingNumber ? padding : padding.right || 0; boundaries.right -= isPaddingNumber ? padding : padding.right || 0;
return boundaries; return boundaries;
} }


function getArea({ width, height }) {
function getArea(_ref) {
var width = _ref.width,
height = _ref.height;

return width * height; return width * height;
} }


* @argument {Object} options - Modifiers configuration and options * @argument {Object} options - Modifiers configuration and options
* @returns {Object} The data object, properly modified * @returns {Object} The data object, properly modified
*/ */
function computeAutoPlacement(placement, refRect, popper, reference, boundariesElement, padding = 0) {
function computeAutoPlacement(placement, refRect, popper, reference, boundariesElement) {
var padding = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : 0;

if (placement.indexOf('auto') === -1) { if (placement.indexOf('auto') === -1) {
return placement; return placement;
} }


const boundaries = getBoundaries(popper, reference, padding, boundariesElement);
var boundaries = getBoundaries(popper, reference, padding, boundariesElement);


const rects = {
var rects = {
top: { top: {
width: boundaries.width, width: boundaries.width,
height: refRect.top - boundaries.top height: refRect.top - boundaries.top
} }
}; };


const sortedAreas = Object.keys(rects).map(key => _extends({
key
}, rects[key], {
area: getArea(rects[key])
})).sort((a, b) => b.area - a.area);
var sortedAreas = Object.keys(rects).map(function (key) {
return _extends({
key: key
}, rects[key], {
area: getArea(rects[key])
});
}).sort(function (a, b) {
return b.area - a.area;
});


const filteredAreas = sortedAreas.filter(({ width, height }) => width >= popper.clientWidth && height >= popper.clientHeight);
var filteredAreas = sortedAreas.filter(function (_ref2) {
var width = _ref2.width,
height = _ref2.height;
return width >= popper.clientWidth && height >= popper.clientHeight;
});


const computedPlacement = filteredAreas.length > 0 ? filteredAreas[0].key : sortedAreas[0].key;
var computedPlacement = filteredAreas.length > 0 ? filteredAreas[0].key : sortedAreas[0].key;


const variation = placement.split('-')[1];
var variation = placement.split('-')[1];


return computedPlacement + (variation ? `-${variation}` : '');
return computedPlacement + (variation ? '-' + variation : '');
} }


const longerTimeoutBrowsers = ['Edge', 'Trident', 'Firefox'];
let timeoutDuration = 0;
for (let i = 0; i < longerTimeoutBrowsers.length; i += 1) {
var longerTimeoutBrowsers = ['Edge', 'Trident', 'Firefox'];
var timeoutDuration = 0;
for (var i = 0; i < longerTimeoutBrowsers.length; i += 1) {
if (isBrowser && navigator.userAgent.indexOf(longerTimeoutBrowsers[i]) >= 0) { if (isBrowser && navigator.userAgent.indexOf(longerTimeoutBrowsers[i]) >= 0) {
timeoutDuration = 1; timeoutDuration = 1;
break; break;
} }


function microtaskDebounce(fn) { function microtaskDebounce(fn) {
let called = false;
return () => {
var called = false;
return function () {
if (called) { if (called) {
return; return;
} }
called = true; called = true;
window.Promise.resolve().then(() => {
window.Promise.resolve().then(function () {
called = false; called = false;
fn(); fn();
}); });
} }


function taskDebounce(fn) { function taskDebounce(fn) {
let scheduled = false;
return () => {
var scheduled = false;
return function () {
if (!scheduled) { if (!scheduled) {
scheduled = true; scheduled = true;
setTimeout(() => {
setTimeout(function () {
scheduled = false; scheduled = false;
fn(); fn();
}, timeoutDuration); }, timeoutDuration);
}; };
} }


const supportsMicroTasks = isBrowser && window.Promise;
var supportsMicroTasks = isBrowser && window.Promise;


/** /**
* Create a debounced version of a method, that's asynchronously deferred * Create a debounced version of a method, that's asynchronously deferred
function findIndex(arr, prop, value) { function findIndex(arr, prop, value) {
// use native findIndex if supported // use native findIndex if supported
if (Array.prototype.findIndex) { if (Array.prototype.findIndex) {
return arr.findIndex(cur => cur[prop] === value);
return arr.findIndex(function (cur) {
return cur[prop] === value;
});
} }


// use `find` + `indexOf` if `findIndex` isn't supported // use `find` + `indexOf` if `findIndex` isn't supported
const match = find(arr, obj => obj[prop] === value);
var match = find(arr, function (obj) {
return obj[prop] === value;
});
return arr.indexOf(match); return arr.indexOf(match);
} }


* @return {Object} position - Coordinates of the element and its `scrollTop` * @return {Object} position - Coordinates of the element and its `scrollTop`
*/ */
function getOffsetRect(element) { function getOffsetRect(element) {
let elementRect;
var elementRect = void 0;
if (element.nodeName === 'HTML') { if (element.nodeName === 'HTML') {
const { width, height } = getWindowSizes(element.ownerDocument);
var _getWindowSizes = getWindowSizes(element.ownerDocument),
width = _getWindowSizes.width,
height = _getWindowSizes.height;

elementRect = { elementRect = {
width,
height,
width: width,
height: height,
left: 0, left: 0,
top: 0 top: 0
}; };
* @returns {Object} object containing width and height properties * @returns {Object} object containing width and height properties
*/ */
function getOuterSizes(element) { function getOuterSizes(element) {
const window = element.ownerDocument.defaultView;
const styles = window.getComputedStyle(element);
const x = parseFloat(styles.marginTop || 0) + parseFloat(styles.marginBottom || 0);
const y = parseFloat(styles.marginLeft || 0) + parseFloat(styles.marginRight || 0);
const result = {
var window = element.ownerDocument.defaultView;
var styles = window.getComputedStyle(element);
var x = parseFloat(styles.marginTop || 0) + parseFloat(styles.marginBottom || 0);
var y = parseFloat(styles.marginLeft || 0) + parseFloat(styles.marginRight || 0);
var result = {
width: element.offsetWidth + y, width: element.offsetWidth + y,
height: element.offsetHeight + x height: element.offsetHeight + x
}; };
* @returns {String} flipped placement * @returns {String} flipped placement
*/ */
function getOppositePlacement(placement) { function getOppositePlacement(placement) {
const hash = { left: 'right', right: 'left', bottom: 'top', top: 'bottom' };
return placement.replace(/left|right|bottom|top/g, matched => hash[matched]);
var hash = { left: 'right', right: 'left', bottom: 'top', top: 'bottom' };
return placement.replace(/left|right|bottom|top/g, function (matched) {
return hash[matched];
});
} }


/** /**
placement = placement.split('-')[0]; placement = placement.split('-')[0];


// Get popper node sizes // Get popper node sizes
const popperRect = getOuterSizes(popper);
var popperRect = getOuterSizes(popper);


// Add position, width and height to our offsets object // Add position, width and height to our offsets object
const popperOffsets = {
var popperOffsets = {
width: popperRect.width, width: popperRect.width,
height: popperRect.height height: popperRect.height
}; };


// depending by the popper placement we have to compute its offsets slightly differently // depending by the popper placement we have to compute its offsets slightly differently
const isHoriz = ['right', 'left'].indexOf(placement) !== -1;
const mainSide = isHoriz ? 'top' : 'left';
const secondarySide = isHoriz ? 'left' : 'top';
const measurement = isHoriz ? 'height' : 'width';
const secondaryMeasurement = !isHoriz ? 'height' : 'width';
var isHoriz = ['right', 'left'].indexOf(placement) !== -1;
var mainSide = isHoriz ? 'top' : 'left';
var secondarySide = isHoriz ? 'left' : 'top';
var measurement = isHoriz ? 'height' : 'width';
var secondaryMeasurement = !isHoriz ? 'height' : 'width';


popperOffsets[mainSide] = referenceOffsets[mainSide] + referenceOffsets[measurement] / 2 - popperRect[measurement] / 2; popperOffsets[mainSide] = referenceOffsets[mainSide] + referenceOffsets[measurement] / 2 - popperRect[measurement] / 2;
if (placement === secondarySide) { if (placement === secondarySide) {
* @param {Element} fixedPosition - is in fixed position mode * @param {Element} fixedPosition - is in fixed position mode
* @returns {Object} An object containing the offsets which will be applied to the popper * @returns {Object} An object containing the offsets which will be applied to the popper
*/ */
function getReferenceOffsets(state, popper, reference, fixedPosition = null) {
const commonOffsetParent = fixedPosition ? getFixedPositionOffsetParent(popper) : findCommonOffsetParent(popper, reference);
function getReferenceOffsets(state, popper, reference) {
var fixedPosition = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : null;

var commonOffsetParent = fixedPosition ? getFixedPositionOffsetParent(popper) : findCommonOffsetParent(popper, reference);
return getOffsetRectRelativeToArbitraryNode(reference, commonOffsetParent, fixedPosition); return getOffsetRectRelativeToArbitraryNode(reference, commonOffsetParent, fixedPosition);
} }


* @returns {String} prefixed property (camelCase or PascalCase, depending on the vendor prefix) * @returns {String} prefixed property (camelCase or PascalCase, depending on the vendor prefix)
*/ */
function getSupportedPropertyName(property) { function getSupportedPropertyName(property) {
const prefixes = [false, 'ms', 'Webkit', 'Moz', 'O'];
const upperProp = property.charAt(0).toUpperCase() + property.slice(1);
var prefixes = [false, 'ms', 'Webkit', 'Moz', 'O'];
var upperProp = property.charAt(0).toUpperCase() + property.slice(1);


for (let i = 0; i < prefixes.length; i++) {
const prefix = prefixes[i];
const toCheck = prefix ? `${prefix}${upperProp}` : property;
for (var i = 0; i < prefixes.length; i++) {
var prefix = prefixes[i];
var toCheck = prefix ? '' + prefix + upperProp : property;
if (typeof document.body.style[toCheck] !== 'undefined') { if (typeof document.body.style[toCheck] !== 'undefined') {
return toCheck; return toCheck;
} }
* @returns {Boolean} answer to: is a function? * @returns {Boolean} answer to: is a function?
*/ */
function isFunction(functionToCheck) { function isFunction(functionToCheck) {
const getType = {};
var getType = {};
return functionToCheck && getType.toString.call(functionToCheck) === '[object Function]'; return functionToCheck && getType.toString.call(functionToCheck) === '[object Function]';
} }


* @returns {Boolean} * @returns {Boolean}
*/ */
function isModifierEnabled(modifiers, modifierName) { function isModifierEnabled(modifiers, modifierName) {
return modifiers.some(({ name, enabled }) => enabled && name === modifierName);
return modifiers.some(function (_ref) {
var name = _ref.name,
enabled = _ref.enabled;
return enabled && name === modifierName;
});
} }


/** /**
* @returns {Boolean} * @returns {Boolean}
*/ */
function isModifierRequired(modifiers, requestingName, requestedName) { function isModifierRequired(modifiers, requestingName, requestedName) {
const requesting = find(modifiers, ({ name }) => name === requestingName);
var requesting = find(modifiers, function (_ref) {
var name = _ref.name;
return name === requestingName;
});


const isRequired = !!requesting && modifiers.some(modifier => {
var isRequired = !!requesting && modifiers.some(function (modifier) {
return modifier.name === requestedName && modifier.enabled && modifier.order < requesting.order; return modifier.name === requestedName && modifier.enabled && modifier.order < requesting.order;
}); });


if (!isRequired) { if (!isRequired) {
const requesting = `\`${requestingName}\``;
const requested = `\`${requestedName}\``;
console.warn(`${requested} modifier is required by ${requesting} modifier in order to work, be sure to include it before ${requesting}!`);
var _requesting = '`' + requestingName + '`';
var requested = '`' + requestedName + '`';
console.warn(requested + ' modifier is required by ' + _requesting + ' modifier in order to work, be sure to include it before ' + _requesting + '!');
} }
return isRequired; return isRequired;
} }
* @returns {Window} * @returns {Window}
*/ */
function getWindow(element) { function getWindow(element) {
const ownerDocument = element.ownerDocument;
var ownerDocument = element.ownerDocument;
return ownerDocument ? ownerDocument.defaultView : window; return ownerDocument ? ownerDocument.defaultView : window;
} }


getWindow(reference).removeEventListener('resize', state.updateBound); getWindow(reference).removeEventListener('resize', state.updateBound);


// Remove scroll event listener on scroll parents // Remove scroll event listener on scroll parents
state.scrollParents.forEach(target => {
state.scrollParents.forEach(function (target) {
target.removeEventListener('scroll', state.updateBound); target.removeEventListener('scroll', state.updateBound);
}); });


* @returns {dataObject} * @returns {dataObject}
*/ */
function runModifiers(modifiers, data, ends) { function runModifiers(modifiers, data, ends) {
const modifiersToRun = ends === undefined ? modifiers : modifiers.slice(0, findIndex(modifiers, 'name', ends));
var modifiersToRun = ends === undefined ? modifiers : modifiers.slice(0, findIndex(modifiers, 'name', ends));


modifiersToRun.forEach(modifier => {
modifiersToRun.forEach(function (modifier) {
if (modifier['function']) { if (modifier['function']) {
// eslint-disable-line dot-notation // eslint-disable-line dot-notation
console.warn('`modifier.function` is deprecated, use `modifier.fn`!'); console.warn('`modifier.function` is deprecated, use `modifier.fn`!');
} }
const fn = modifier['function'] || modifier.fn; // eslint-disable-line dot-notation
var fn = modifier['function'] || modifier.fn; // eslint-disable-line dot-notation
if (modifier.enabled && isFunction(fn)) { if (modifier.enabled && isFunction(fn)) {
// Add properties to offsets to make them a complete clientRect object // Add properties to offsets to make them a complete clientRect object
// we do this before each modifier to make sure the previous one doesn't // we do this before each modifier to make sure the previous one doesn't
*/ */
function setAttributes(element, attributes) { function setAttributes(element, attributes) {
Object.keys(attributes).forEach(function (prop) { Object.keys(attributes).forEach(function (prop) {
const value = attributes[prop];
var value = attributes[prop];
if (value !== false) { if (value !== false) {
element.setAttribute(prop, attributes[prop]); element.setAttribute(prop, attributes[prop]);
} else { } else {
* Object with a list of properties and values which will be applied to the element * Object with a list of properties and values which will be applied to the element
*/ */
function setStyles(element, styles) { function setStyles(element, styles) {
Object.keys(styles).forEach(prop => {
let unit = '';
Object.keys(styles).forEach(function (prop) {
var unit = '';
// add unit if the value is numeric and is one of the following // add unit if the value is numeric and is one of the following
if (['width', 'height', 'top', 'right', 'bottom', 'left'].indexOf(prop) !== -1 && isNumeric(styles[prop])) { if (['width', 'height', 'top', 'right', 'bottom', 'left'].indexOf(prop) !== -1 && isNumeric(styles[prop])) {
unit = 'px'; unit = 'px';
} }


function attachToScrollParents(scrollParent, event, callback, scrollParents) { function attachToScrollParents(scrollParent, event, callback, scrollParents) {
const isBody = scrollParent.nodeName === 'BODY';
const target = isBody ? scrollParent.ownerDocument.defaultView : scrollParent;
var isBody = scrollParent.nodeName === 'BODY';
var target = isBody ? scrollParent.ownerDocument.defaultView : scrollParent;
target.addEventListener(event, callback, { passive: true }); target.addEventListener(event, callback, { passive: true });


if (!isBody) { if (!isBody) {
getWindow(reference).addEventListener('resize', state.updateBound, { passive: true }); getWindow(reference).addEventListener('resize', state.updateBound, { passive: true });


// Scroll event listener on scroll parents // Scroll event listener on scroll parents
const scrollElement = getScrollParent(reference);
var scrollElement = getScrollParent(reference);
attachToScrollParents(scrollElement, 'scroll', state.updateBound, state.scrollParents); attachToScrollParents(scrollElement, 'scroll', state.updateBound, state.scrollParents);
state.scrollElement = scrollElement; state.scrollElement = scrollElement;
state.eventsEnabled = true; state.eventsEnabled = true;
// ``` // ```
// The default export will be removed in the next major version. // The default export will be removed in the next major version.
var index = { var index = {
computeAutoPlacement,
debounce,
findIndex,
getBordersSize,
getBoundaries,
getBoundingClientRect,
getClientRect,
getOffsetParent,
getOffsetRect,
getOffsetRectRelativeToArbitraryNode,
getOuterSizes,
getParentNode,
getPopperOffsets,
getReferenceOffsets,
getScroll,
getScrollParent,
getStyleComputedProperty,
getSupportedPropertyName,
getWindowSizes,
isFixed,
isFunction,
isModifierEnabled,
isModifierRequired,
isNumeric,
removeEventListeners,
runModifiers,
setAttributes,
setStyles,
setupEventListeners
computeAutoPlacement: computeAutoPlacement,
debounce: debounce,
findIndex: findIndex,
getBordersSize: getBordersSize,
getBoundaries: getBoundaries,
getBoundingClientRect: getBoundingClientRect,
getClientRect: getClientRect,
getOffsetParent: getOffsetParent,
getOffsetRect: getOffsetRect,
getOffsetRectRelativeToArbitraryNode: getOffsetRectRelativeToArbitraryNode,
getOuterSizes: getOuterSizes,
getParentNode: getParentNode,
getPopperOffsets: getPopperOffsets,
getReferenceOffsets: getReferenceOffsets,
getScroll: getScroll,
getScrollParent: getScrollParent,
getStyleComputedProperty: getStyleComputedProperty,
getSupportedPropertyName: getSupportedPropertyName,
getWindowSizes: getWindowSizes,
isFixed: isFixed,
isFunction: isFunction,
isModifierEnabled: isModifierEnabled,
isModifierRequired: isModifierRequired,
isNumeric: isNumeric,
removeEventListeners: removeEventListeners,
runModifiers: runModifiers,
setAttributes: setAttributes,
setStyles: setStyles,
setupEventListeners: setupEventListeners
}; };


export { computeAutoPlacement, debounce, findIndex, getBordersSize, getBoundaries, getBoundingClientRect, getClientRect, getOffsetParent, getOffsetRect, getOffsetRectRelativeToArbitraryNode, getOuterSizes, getParentNode, getPopperOffsets, getReferenceOffsets, getScroll, getScrollParent, getStyleComputedProperty, getSupportedPropertyName, getWindowSizes, isFixed, isFunction, isModifierEnabled, isModifierRequired, isNumeric, removeEventListeners, runModifiers, setAttributes, setStyles, setupEventListeners };
export default index;
exports.computeAutoPlacement = computeAutoPlacement;
exports.debounce = debounce;
exports.findIndex = findIndex;
exports.getBordersSize = getBordersSize;
exports.getBoundaries = getBoundaries;
exports.getBoundingClientRect = getBoundingClientRect;
exports.getClientRect = getClientRect;
exports.getOffsetParent = getOffsetParent;
exports.getOffsetRect = getOffsetRect;
exports.getOffsetRectRelativeToArbitraryNode = getOffsetRectRelativeToArbitraryNode;
exports.getOuterSizes = getOuterSizes;
exports.getParentNode = getParentNode;
exports.getPopperOffsets = getPopperOffsets;
exports.getReferenceOffsets = getReferenceOffsets;
exports.getScroll = getScroll;
exports.getScrollParent = getScrollParent;
exports.getStyleComputedProperty = getStyleComputedProperty;
exports.getSupportedPropertyName = getSupportedPropertyName;
exports.getWindowSizes = getWindowSizes;
exports.isFixed = isFixed;
exports.isFunction = isFunction;
exports.isModifierEnabled = isModifierEnabled;
exports.isModifierRequired = isModifierRequired;
exports.isNumeric = isNumeric;
exports.removeEventListeners = removeEventListeners;
exports.runModifiers = runModifiers;
exports.setAttributes = setAttributes;
exports.setStyles = setStyles;
exports.setupEventListeners = setupEventListeners;
exports['default'] = index;

Object.defineProperty(exports, '__esModule', { value: true });

})));
//# sourceMappingURL=popper-utils.js.map //# sourceMappingURL=popper-utils.js.map

+ 1
- 1
www/js/popper-utils.js.map
File diff suppressed because it is too large
View File


+ 1
- 1
www/js/popper-utils.min.js
File diff suppressed because it is too large
View File


+ 1
- 1
www/js/popper-utils.min.js.map
File diff suppressed because it is too large
View File


+ 491
- 329
www/js/popper.js
File diff suppressed because it is too large
View File


+ 1
- 1
www/js/popper.js.map
File diff suppressed because it is too large
View File


+ 1
- 1
www/js/popper.min.js
File diff suppressed because it is too large
View File


+ 1
- 1
www/js/popper.min.js.map
File diff suppressed because it is too large
View File


+ 156
- 0
www/js/poppper.js.flow View File

declare module 'popper.js' {
declare type Position = 'top' | 'right' | 'bottom' | 'left';
declare type Placement =
| 'auto-start'
| 'auto'
| 'auto-end'
| 'top-start'
| 'top'
| 'top-end'
| 'right-start'
| 'right'
| 'right-end'
| 'bottom-end'
| 'bottom'
| 'bottom-start'
| 'left-end'
| 'left'
| 'left-start';

declare type Offset = {
top: number,
left: number,
width: number,
height: number,
position: Position,
};

declare type Boundary = 'scrollParent' | 'viewport' | 'window';

declare type Behavior = 'flip' | 'clockwise' | 'counterclockwise';

declare type Data = {
instance: Popper,
placement: Placement,
originalPlacement: Placement,
flipped: boolean,
hide: boolean,
arrowElement: Element,
styles: CSSStyleDeclaration,
arrowStyles: CSSStyleDeclaration,
boundaries: Object,
offsets: {
popper: Offset,
reference: Offset,
arrow: {
top: number,
left: number,
},
},
};

declare type ModifierFn = (data: Data, options: Object) => Data;

declare type Padding = {
top?: number,
bottom?: number,
left?: number,
right?: number,
}

declare type BaseModifier = {
order?: number,
enabled?: boolean,
fn?: ModifierFn,
};

declare type Modifiers = {
shift?: BaseModifier,
offset?: BaseModifier & {
offset?: number | string,
},
preventOverflow?: BaseModifier & {
priority?: Position[],
padding?: number | Padding,
boundariesElement?: Boundary | Element,
escapeWithReference?: boolean,
},
keepTogether?: BaseModifier,
arrow?: BaseModifier & {
element?: string | Element | null,
},
flip?: BaseModifier & {
behavior?: Behavior | Position[],
padding?: number | Padding,
boundariesElement?: Boundary | Element,
flipVariations?: boolean,
flipVariationsByContent?: boolean,
},
inner?: BaseModifier,
hide?: BaseModifier,
applyStyle?: BaseModifier & {
onLoad?: Function,
gpuAcceleration?: boolean,
},
computeStyle?: BaseModifier & {
gpuAcceleration?: boolean,
x?: 'bottom' | 'top',
y?: 'left' | 'right',
},

[name: string]: (BaseModifier & { [string]: * }) | null,
};

declare type Options = {
placement?: Placement,
positionFixed?: boolean,
eventsEnabled?: boolean,
modifiers?: Modifiers,
removeOnDestroy?: boolean,

onCreate?: (data: Data) => void,

onUpdate?: (data: Data) => void,
};

declare var placements: Placement;

declare type ReferenceObject = {
+clientHeight: number,
+clientWidth: number,

getBoundingClientRect():
| ClientRect
| {
width: number,
height: number,
top: number,
right: number,
bottom: number,
left: number,
},
};

declare type Instance = {
destroy: () => void,
scheduleUpdate: () => void,
update: () => void,
enableEventListeners: () => void,
disableEventListeners: () => void,
};

declare class Popper {
static placements: Placement;

popper: Element;
reference: Element | ReferenceObject;

constructor(
reference: Element | ReferenceObject,
popper: Element,
options?: Options
): Instance;
}

declare module.exports: Class<Popper>;
}

+ 355
- 271
www/js/tooltip.js View File

* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
* SOFTWARE. * SOFTWARE.
*/ */
import Popper from 'popper.js';
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('popper.js')) :
typeof define === 'function' && define.amd ? define(['popper.js'], factory) :
(global.Tooltip = factory(global.Popper));
}(this, (function (Popper) { 'use strict';

Popper = Popper && Popper.hasOwnProperty('default') ? Popper['default'] : Popper;


/** /**
* Check if the given variable is a function * Check if the given variable is a function
* @returns {Boolean} answer to: is a function? * @returns {Boolean} answer to: is a function?
*/ */
function isFunction(functionToCheck) { function isFunction(functionToCheck) {
const getType = {};
var getType = {};
return functionToCheck && getType.toString.call(functionToCheck) === '[object Function]'; return functionToCheck && getType.toString.call(functionToCheck) === '[object Function]';
} }


var classCallCheck = function (instance, Constructor) {
if (!(instance instanceof Constructor)) {
throw new TypeError("Cannot call a class as a function");
}
};

var createClass = 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, descriptor.key, descriptor);
}
}

return function (Constructor, protoProps, staticProps) {
if (protoProps) defineProperties(Constructor.prototype, protoProps);
if (staticProps) defineProperties(Constructor, staticProps);
return Constructor;
};
}();







var _extends = Object.assign || function (target) { var _extends = Object.assign || function (target) {
for (var i = 1; i < arguments.length; i++) { for (var i = 1; i < arguments.length; i++) {
var source = arguments[i]; var source = arguments[i];
return target; return target;
}; };


const DEFAULT_OPTIONS = {
var DEFAULT_OPTIONS = {
container: false, container: false,
delay: 0, delay: 0,
html: false, html: false,
innerSelector: '.tooltip-inner, .tooltip__inner' innerSelector: '.tooltip-inner, .tooltip__inner'
}; };


class Tooltip {
var Tooltip = function () {
/** /**
* Create a new Tooltip.js instance * Create a new Tooltip.js instance
* @class Tooltip * @class Tooltip
* [options docs](https://popper.js.org/popper-documentation.html) * [options docs](https://popper.js.org/popper-documentation.html)
* @return {Object} instance - The generated tooltip instance * @return {Object} instance - The generated tooltip instance
*/ */
constructor(reference, options) {
function Tooltip(reference, options) {
classCallCheck(this, Tooltip);

_initialiseProps.call(this); _initialiseProps.call(this);


// apply user options over default ones // apply user options over default ones
this.options = options; this.options = options;


// get events list // get events list
const events = typeof options.trigger === 'string' ? options.trigger.split(' ').filter(trigger => ['click', 'hover', 'focus'].indexOf(trigger) !== -1) : [];
var events = typeof options.trigger === 'string' ? options.trigger.split(' ').filter(function (trigger) {
return ['click', 'hover', 'focus'].indexOf(trigger) !== -1;
}) : [];


// set initial state // set initial state
this._isOpen = false; this._isOpen = false;
// Private methods // Private methods
// //


/**
* Creates a new tooltip node
* @memberof Tooltip
* @private
* @param {HTMLElement} reference
* @param {String} template
* @param {String|HTMLElement|TitleFunction} title
* @param {Boolean} allowHtml
* @return {HTMLElement} tooltipNode
*/
_create(reference, template, title, allowHtml) {
// create tooltip element
const tooltipGenerator = window.document.createElement('div');
tooltipGenerator.innerHTML = template.trim();
const tooltipNode = tooltipGenerator.childNodes[0];

// add unique ID to our tooltip (needed for accessibility reasons)
tooltipNode.id = `tooltip_${Math.random().toString(36).substr(2, 10)}`;

// set initial `aria-hidden` state to `false` (it's visible!)
tooltipNode.setAttribute('aria-hidden', 'false');

// add title to tooltip
const titleNode = tooltipGenerator.querySelector(this.options.innerSelector);
this._addTitleContent(reference, title, allowHtml, titleNode);

// return the generated tooltip node
return tooltipNode;
}

_addTitleContent(reference, title, allowHtml, titleNode) {
if (title.nodeType === 1 || title.nodeType === 11) {
// if title is a element node or document fragment, append it only if allowHtml is true
allowHtml && titleNode.appendChild(title);
} else if (isFunction(title)) {
// if title is a function, call it and set textContent or innerHtml depending by `allowHtml` value
const titleText = title.call(reference);
allowHtml ? titleNode.innerHTML = titleText : titleNode.textContent = titleText;
} else {
// if it's just a simple text, set textContent or innerHtml depending by `allowHtml` value
allowHtml ? titleNode.innerHTML = title : titleNode.textContent = title;
createClass(Tooltip, [{
key: '_create',


/**
* Creates a new tooltip node
* @memberof Tooltip
* @private
* @param {HTMLElement} reference
* @param {String} template
* @param {String|HTMLElement|TitleFunction} title
* @param {Boolean} allowHtml
* @return {HTMLElement} tooltipNode
*/
value: function _create(reference, template, title, allowHtml) {
// create tooltip element
var tooltipGenerator = window.document.createElement('div');
tooltipGenerator.innerHTML = template.trim();
var tooltipNode = tooltipGenerator.childNodes[0];

// add unique ID to our tooltip (needed for accessibility reasons)
tooltipNode.id = 'tooltip_' + Math.random().toString(36).substr(2, 10);

// set initial `aria-hidden` state to `false` (it's visible!)
tooltipNode.setAttribute('aria-hidden', 'false');

// add title to tooltip
var titleNode = tooltipGenerator.querySelector(this.options.innerSelector);
this._addTitleContent(reference, title, allowHtml, titleNode);

// return the generated tooltip node
return tooltipNode;
} }
}

_show(reference, options) {
// don't show if it's already visible
// or if it's not being showed
if (this._isOpen && !this._isOpening) {
return this;
}
this._isOpen = true;

// if the tooltipNode already exists, just show it
if (this._tooltipNode) {
this._tooltipNode.style.visibility = 'visible';
this._tooltipNode.setAttribute('aria-hidden', 'false');
this.popperInstance.update();
return this;
}, {
key: '_addTitleContent',
value: function _addTitleContent(reference, title, allowHtml, titleNode) {
if (title.nodeType === 1 || title.nodeType === 11) {
// if title is a element node or document fragment, append it only if allowHtml is true
allowHtml && titleNode.appendChild(title);
} else if (isFunction(title)) {
// if title is a function, call it and set textContent or innerHtml depending by `allowHtml` value
var titleText = title.call(reference);
allowHtml ? titleNode.innerHTML = titleText : titleNode.textContent = titleText;
} else {
// if it's just a simple text, set textContent or innerHtml depending by `allowHtml` value
allowHtml ? titleNode.innerHTML = title : titleNode.textContent = title;
}
} }
}, {
key: '_show',
value: function _show(reference, options) {
// don't show if it's already visible
// or if it's not being showed
if (this._isOpen && !this._isOpening) {
return this;
}
this._isOpen = true;

// if the tooltipNode already exists, just show it
if (this._tooltipNode) {
this._tooltipNode.style.visibility = 'visible';
this._tooltipNode.setAttribute('aria-hidden', 'false');
this.popperInstance.update();
return this;
}


// get title
const title = reference.getAttribute('title') || options.title;
// get title
var title = reference.getAttribute('title') || options.title;


// don't show tooltip if no title is defined
if (!title) {
return this;
}
// don't show tooltip if no title is defined
if (!title) {
return this;
}


// create tooltip node
const tooltipNode = this._create(reference, options.template, title, options.html);
// create tooltip node
var tooltipNode = this._create(reference, options.template, title, options.html);


// Add `aria-describedby` to our reference element for accessibility reasons
reference.setAttribute('aria-describedby', tooltipNode.id);
// Add `aria-describedby` to our reference element for accessibility reasons
reference.setAttribute('aria-describedby', tooltipNode.id);


// append tooltip to container
const container = this._findContainer(options.container, reference);
// append tooltip to container
var container = this._findContainer(options.container, reference);


this._append(tooltipNode, container);
this._append(tooltipNode, container);


this._popperOptions = _extends({}, options.popperOptions, {
placement: options.placement
});
this._popperOptions = _extends({}, options.popperOptions, {
placement: options.placement
});


this._popperOptions.modifiers = _extends({}, this._popperOptions.modifiers, {
arrow: _extends({}, this._popperOptions.modifiers && this._popperOptions.modifiers.arrow, {
element: options.arrowSelector
}),
offset: _extends({}, this._popperOptions.modifiers && this._popperOptions.modifiers.offset, {
offset: options.offset
})
});
this._popperOptions.modifiers = _extends({}, this._popperOptions.modifiers, {
arrow: _extends({}, this._popperOptions.modifiers && this._popperOptions.modifiers.arrow, {
element: options.arrowSelector
}),
offset: _extends({}, this._popperOptions.modifiers && this._popperOptions.modifiers.offset, {
offset: options.offset
})
});


if (options.boundariesElement) {
this._popperOptions.modifiers.preventOverflow = {
boundariesElement: options.boundariesElement
};
}
if (options.boundariesElement) {
this._popperOptions.modifiers.preventOverflow = {
boundariesElement: options.boundariesElement
};
}


this.popperInstance = new Popper(reference, tooltipNode, this._popperOptions);
this.popperInstance = new Popper(reference, tooltipNode, this._popperOptions);


this._tooltipNode = tooltipNode;
this._tooltipNode = tooltipNode;


return this;
}

_hide() /*reference, options*/{
// don't hide if it's already hidden
if (!this._isOpen) {
return this; return this;
} }
}, {
key: '_hide',
value: function _hide() /*reference, options*/{
// don't hide if it's already hidden
if (!this._isOpen) {
return this;
}


this._isOpen = false;

// hide tooltipNode
this._tooltipNode.style.visibility = 'hidden';
this._tooltipNode.setAttribute('aria-hidden', 'true');

return this;
}

_dispose() {
// remove event listeners first to prevent any unexpected behaviour
this._events.forEach(({ func, event }) => {
this.reference.removeEventListener(event, func);
});
this._events = [];

if (this._tooltipNode) {
this._hide();
this._isOpen = false;


// destroy instance
this.popperInstance.destroy();
// hide tooltipNode
this._tooltipNode.style.visibility = 'hidden';
this._tooltipNode.setAttribute('aria-hidden', 'true');


// destroy tooltipNode if removeOnDestroy is not set, as popperInstance.destroy() already removes the element
if (!this.popperInstance.options.removeOnDestroy) {
this._tooltipNode.parentNode.removeChild(this._tooltipNode);
this._tooltipNode = null;
}
return this;
} }
return this;
}

_findContainer(container, reference) {
// if container is a query, get the relative element
if (typeof container === 'string') {
container = window.document.querySelector(container);
} else if (container === false) {
// if container is `false`, set it to reference parent
container = reference.parentNode;
}, {
key: '_dispose',
value: function _dispose() {
var _this = this;

// remove event listeners first to prevent any unexpected behaviour
this._events.forEach(function (_ref) {
var func = _ref.func,
event = _ref.event;

_this.reference.removeEventListener(event, func);
});
this._events = [];

if (this._tooltipNode) {
this._hide();

// destroy instance
this.popperInstance.destroy();

// destroy tooltipNode if removeOnDestroy is not set, as popperInstance.destroy() already removes the element
if (!this.popperInstance.options.removeOnDestroy) {
this._tooltipNode.parentNode.removeChild(this._tooltipNode);
this._tooltipNode = null;
}
}
return this;
} }
return container;
}

/**
* Append tooltip to container
* @memberof Tooltip
* @private
* @param {HTMLElement} tooltipNode
* @param {HTMLElement|String|false} container
*/
_append(tooltipNode, container) {
container.appendChild(tooltipNode);
}

_setEventListeners(reference, events, options) {
const directEvents = [];
const oppositeEvents = [];

events.forEach(event => {
switch (event) {
case 'hover':
directEvents.push('mouseenter');
oppositeEvents.push('mouseleave');
break;
case 'focus':
directEvents.push('focus');
oppositeEvents.push('blur');
break;
case 'click':
directEvents.push('click');
oppositeEvents.push('click');
break;
}, {
key: '_findContainer',
value: function _findContainer(container, reference) {
// if container is a query, get the relative element
if (typeof container === 'string') {
container = window.document.querySelector(container);
} else if (container === false) {
// if container is `false`, set it to reference parent
container = reference.parentNode;
} }
});
return container;
}


// schedule show tooltip
directEvents.forEach(event => {
const func = evt => {
if (this._isOpening === true) {
return;
}
evt.usedByTooltip = true;
this._scheduleShow(reference, options.delay, options, evt);
};
this._events.push({ event, func });
reference.addEventListener(event, func);
});

// schedule hide tooltip
oppositeEvents.forEach(event => {
const func = evt => {
if (evt.usedByTooltip === true) {
return;
/**
* Append tooltip to container
* @memberof Tooltip
* @private
* @param {HTMLElement} tooltipNode
* @param {HTMLElement|String|false} container
*/

}, {
key: '_append',
value: function _append(tooltipNode, container) {
container.appendChild(tooltipNode);
}
}, {
key: '_setEventListeners',
value: function _setEventListeners(reference, events, options) {
var _this2 = this;

var directEvents = [];
var oppositeEvents = [];

events.forEach(function (event) {
switch (event) {
case 'hover':
directEvents.push('mouseenter');
oppositeEvents.push('mouseleave');
break;
case 'focus':
directEvents.push('focus');
oppositeEvents.push('blur');
break;
case 'click':
directEvents.push('click');
oppositeEvents.push('click');
break;
} }
this._scheduleHide(reference, options.delay, options, evt);
};
this._events.push({ event, func });
reference.addEventListener(event, func);
if (event === 'click' && options.closeOnClickOutside) {
document.addEventListener('mousedown', e => {
if (!this._isOpening) {
});

// schedule show tooltip
directEvents.forEach(function (event) {
var func = function func(evt) {
if (_this2._isOpening === true) {
return; return;
} }
const popper = this.popperInstance.popper;
if (reference.contains(e.target) || popper.contains(e.target)) {
evt.usedByTooltip = true;
_this2._scheduleShow(reference, options.delay, options, evt);
};
_this2._events.push({ event: event, func: func });
reference.addEventListener(event, func);
});

// schedule hide tooltip
oppositeEvents.forEach(function (event) {
var func = function func(evt) {
if (evt.usedByTooltip === true) {
return; return;
} }
func(e);
}, true);
}
});
}

_scheduleShow(reference, delay, options /*, evt */) {
this._isOpening = true;
// defaults to 0
const computedDelay = delay && delay.show || delay || 0;
this._showTimeout = window.setTimeout(() => this._show(reference, options), computedDelay);
}

_scheduleHide(reference, delay, options, evt) {
this._isOpening = false;
// defaults to 0
const computedDelay = delay && delay.hide || delay || 0;
window.clearTimeout(this._showTimeout);
window.setTimeout(() => {
if (this._isOpen === false) {
return;
}
if (!document.body.contains(this._tooltipNode)) {
return;
}

// if we are hiding because of a mouseleave, we must check that the new
// reference isn't the tooltip, because in this case we don't want to hide it
if (evt.type === 'mouseleave') {
const isSet = this._setTooltipNodeEvent(evt, reference, delay, options);

// if we set the new event, don't hide the tooltip yet
// the new event will take care to hide it if necessary
if (isSet) {
_this2._scheduleHide(reference, options.delay, options, evt);
};
_this2._events.push({ event: event, func: func });
reference.addEventListener(event, func);
if (event === 'click' && options.closeOnClickOutside) {
document.addEventListener('mousedown', function (e) {
if (!_this2._isOpening) {
return;
}
var popper = _this2.popperInstance.popper;
if (reference.contains(e.target) || popper.contains(e.target)) {
return;
}
func(e);
}, true);
}
});
}
}, {
key: '_scheduleShow',
value: function _scheduleShow(reference, delay, options /*, evt */) {
var _this3 = this;

this._isOpening = true;
// defaults to 0
var computedDelay = delay && delay.show || delay || 0;
this._showTimeout = window.setTimeout(function () {
return _this3._show(reference, options);
}, computedDelay);
}
}, {
key: '_scheduleHide',
value: function _scheduleHide(reference, delay, options, evt) {
var _this4 = this;

this._isOpening = false;
// defaults to 0
var computedDelay = delay && delay.hide || delay || 0;
window.clearTimeout(this._showTimeout);
window.setTimeout(function () {
if (_this4._isOpen === false) {
return;
}
if (!document.body.contains(_this4._tooltipNode)) {
return; return;
} }
}


this._hide(reference, options);
}, computedDelay);
}
// if we are hiding because of a mouseleave, we must check that the new
// reference isn't the tooltip, because in this case we don't want to hide it
if (evt.type === 'mouseleave') {
var isSet = _this4._setTooltipNodeEvent(evt, reference, delay, options);

// if we set the new event, don't hide the tooltip yet
// the new event will take care to hide it if necessary
if (isSet) {
return;
}
}


_updateTitleContent(title) {
if (typeof this._tooltipNode === 'undefined') {
if (typeof this.options.title !== 'undefined') {
this.options.title = title;
_this4._hide(reference, options);
}, computedDelay);
}
}, {
key: '_updateTitleContent',
value: function _updateTitleContent(title) {
if (typeof this._tooltipNode === 'undefined') {
if (typeof this.options.title !== 'undefined') {
this.options.title = title;
}
return;
} }
return;
var titleNode = this._tooltipNode.querySelector(this.options.innerSelector);
this._clearTitleContent(titleNode, this.options.html, this.reference.getAttribute('title') || this.options.title);
this._addTitleContent(this.reference, title, this.options.html, titleNode);
this.options.title = title;
this.popperInstance.update();
} }
const titleNode = this._tooltipNode.querySelector(this.options.innerSelector);
this._clearTitleContent(titleNode, this.options.html, this.reference.getAttribute('title') || this.options.title);
this._addTitleContent(this.reference, title, this.options.html, titleNode);
this.options.title = title;
this.popperInstance.update();
}

_clearTitleContent(titleNode, allowHtml, lastTitle) {
if (lastTitle.nodeType === 1 || lastTitle.nodeType === 11) {
allowHtml && titleNode.removeChild(lastTitle);
} else {
allowHtml ? titleNode.innerHTML = '' : titleNode.textContent = '';
}, {
key: '_clearTitleContent',
value: function _clearTitleContent(titleNode, allowHtml, lastTitle) {
if (lastTitle.nodeType === 1 || lastTitle.nodeType === 11) {
allowHtml && titleNode.removeChild(lastTitle);
} else {
allowHtml ? titleNode.innerHTML = '' : titleNode.textContent = '';
}
} }
}
}
}]);
return Tooltip;
}();


/** /**
* Title function, its context is the Tooltip instance. * Title function, its context is the Tooltip instance.
* @return {String} placement - The desired title. * @return {String} placement - The desired title.
*/ */


var _initialiseProps = function () {
this.show = () => this._show(this.reference, this.options);


this.hide = () => this._hide();
var _initialiseProps = function _initialiseProps() {
var _this5 = this;


this.dispose = () => this._dispose();
this.show = function () {
return _this5._show(_this5.reference, _this5.options);
};


this.toggle = () => {
if (this._isOpen) {
return this.hide();
this.hide = function () {
return _this5._hide();
};

this.dispose = function () {
return _this5._dispose();
};

this.toggle = function () {
if (_this5._isOpen) {
return _this5.hide();
} else { } else {
return this.show();
return _this5.show();
} }
}; };


this.updateTitleContent = title => this._updateTitleContent(title);
this.updateTitleContent = function (title) {
return _this5._updateTitleContent(title);
};


this._events = []; this._events = [];


this._setTooltipNodeEvent = (evt, reference, delay, options) => {
const relatedreference = evt.relatedreference || evt.toElement || evt.relatedTarget;
this._setTooltipNodeEvent = function (evt, reference, delay, options) {
var relatedreference = evt.relatedreference || evt.toElement || evt.relatedTarget;


const callback = evt2 => {
const relatedreference2 = evt2.relatedreference || evt2.toElement || evt2.relatedTarget;
var callback = function callback(evt2) {
var relatedreference2 = evt2.relatedreference || evt2.toElement || evt2.relatedTarget;


// Remove event listener after call // Remove event listener after call
this._tooltipNode.removeEventListener(evt.type, callback);
_this5._tooltipNode.removeEventListener(evt.type, callback);


// If the new reference is not the reference element // If the new reference is not the reference element
if (!reference.contains(relatedreference2)) { if (!reference.contains(relatedreference2)) {
// Schedule to hide tooltip // Schedule to hide tooltip
this._scheduleHide(reference, options.delay, options, evt2);
_this5._scheduleHide(reference, options.delay, options, evt2);
} }
}; };


if (this._tooltipNode.contains(relatedreference)) {
if (_this5._tooltipNode.contains(relatedreference)) {
// listen to mouseleave on the tooltip element to be able to hide the tooltip // listen to mouseleave on the tooltip element to be able to hide the tooltip
this._tooltipNode.addEventListener(evt.type, callback);
_this5._tooltipNode.addEventListener(evt.type, callback);
return true; return true;
} }


}; };
}; };


export default Tooltip;
return Tooltip;

})));
//# sourceMappingURL=tooltip.js.map //# sourceMappingURL=tooltip.js.map

+ 1
- 1
www/js/tooltip.js.map
File diff suppressed because it is too large
View File


+ 1
- 1
www/js/tooltip.min.js
File diff suppressed because it is too large
View File


+ 1
- 1
www/js/tooltip.min.js.map
File diff suppressed because it is too large
View File


Loading…
Cancel
Save