fomantic-ui 2.10.0-beta.1 → 2.10.0-beta.10

package/dist/components/popup.js

@@ -1,5 +1,5 @@
 /*!
- * # Fomantic-UI 2.10.0-beta.1+bee406e - Popup
+ * # Fomantic-UI 2.10.0-beta.10+3ca268e - Popup
  * https://github.com/fomantic/Fomantic-UI/
  *
  *
@@ -20,74 +20,70 @@
         : globalThis;
 
     $.fn.popup = function (parameters) {
-        var
-            $allModules    = $(this),
-            $document      = $(document),
-            $window        = $(window),
-            $body          = $('body'),
-
-            clickEvent      = 'ontouchstart' in document.documentElement
-                ? 'touchstart'
-                : 'click',
-
-            time           = Date.now(),
-            performance    = [],
-
-            query          = arguments[0],
-            methodInvoked  = typeof query === 'string',
-            queryArguments = [].slice.call(arguments, 1),
-            contextCheck   = function (context, win) {
-                var $context;
-                if ([window, document].indexOf(context) >= 0) {
-                    $context = $(context);
-                } else {
-                    $context = $(win.document).find(context);
-                    if ($context.length === 0) {
-                        $context = win.frameElement ? contextCheck(context, win.parent) : $body;
-                    }
+        let $allModules = $(this);
+        let $document = $(document);
+        let $window = $(window);
+        let $body = $('body');
+
+        let clickEvent = 'ontouchstart' in document.documentElement
+            ? 'touchstart'
+            : 'click';
+
+        let time = Date.now();
+        let performance = [];
+
+        let query = arguments[0];
+        let methodInvoked = typeof query === 'string';
+        let queryArguments = [].slice.call(arguments, 1);
+        let contextCheck = function (context, win) {
+            let $context;
+            if ([window, document].indexOf(context) >= 0) {
+                $context = $(context);
+            } else {
+                $context = $(win.document).find(context);
+                if ($context.length === 0) {
+                    $context = win.frameElement ? contextCheck(context, win.parent) : $body;
                 }
+            }
 
-                return $context;
-            },
+            return $context;
+        };
 
-            returnedValue
-        ;
+        let returnedValue;
         $allModules.each(function () {
-            var
-                settings        = $.isPlainObject(parameters)
-                    ? $.extend(true, {}, $.fn.popup.settings, parameters)
-                    : $.extend({}, $.fn.popup.settings),
-
-                selector           = settings.selector,
-                className          = settings.className,
-                error              = settings.error,
-                metadata           = settings.metadata,
-                namespace          = settings.namespace,
-
-                eventNamespace     = '.' + settings.namespace,
-                moduleNamespace    = 'module-' + namespace,
-
-                $module            = $(this),
-                $context           = contextCheck(settings.context, window),
-                $scrollContext     = contextCheck(settings.scrollContext, window),
-                $boundary          = contextCheck(settings.boundary, window),
-                $target            = settings.target ? contextCheck(settings.target, window) : $module,
-
-                $popup,
-                $offsetParent,
-
-                searchDepth        = 0,
-                triedPositions     = false,
-                openedWithTouch    = false,
-
-                element            = this,
-                instance           = $module.data(moduleNamespace),
-
-                documentObserver,
-                elementNamespace,
-                id,
-                module
-            ;
+            let settings = $.isPlainObject(parameters)
+                ? $.extend(true, {}, $.fn.popup.settings, parameters)
+                : $.extend({}, $.fn.popup.settings);
+
+            let selector = settings.selector;
+            let className = settings.className;
+            let error = settings.error;
+            let metadata = settings.metadata;
+            let namespace = settings.namespace;
+
+            let eventNamespace = '.' + settings.namespace;
+            let moduleNamespace = 'module-' + namespace;
+
+            let $module = $(this);
+            let $context = contextCheck(settings.context, window);
+            let $scrollContext = contextCheck(settings.scrollContext, window);
+            let $boundary = contextCheck(settings.boundary, window);
+            let $target = settings.target ? contextCheck(settings.target, window) : $module;
+
+            let $popup;
+            let $offsetParent;
+
+            let searchDepth = 0;
+            let triedPositions = false;
+            let openedWithTouch = false;
+
+            let element = this;
+            let instance = $module.data(moduleNamespace);
+
+            let documentObserver;
+            let elementNamespace;
+            let id;
+            let module;
 
             module = {
 
@@ -109,19 +105,16 @@
                     module.verbose('Storing instance', module);
                     instance = module;
                     $module
-                        .data(moduleNamespace, instance)
-                    ;
+                        .data(moduleNamespace, instance);
                 },
 
                 observeChanges: function () {
-                    if ('MutationObserver' in window) {
-                        documentObserver = new MutationObserver(module.event.documentChanged);
-                        documentObserver.observe(document, {
-                            childList: true,
-                            subtree: true,
-                        });
-                        module.debug('Setting up mutation observer', documentObserver);
-                    }
+                    documentObserver = new MutationObserver(module.event.documentChanged);
+                    documentObserver.observe(document, {
+                        childList: true,
+                        subtree: true,
+                    });
+                    module.debug('Setting up mutation observer', documentObserver);
                 },
 
                 refresh: function () {
@@ -141,8 +134,7 @@
                             module.debug('Moving popup to the same offset parent as target');
                             $popup
                                 .detach()
-                                .appendTo($offsetParent)
-                            ;
+                                .appendTo($offsetParent);
                         }
                     } else {
                         $offsetParent = settings.inline
@@ -170,7 +162,7 @@
                     if (documentObserver) {
                         documentObserver.disconnect();
                     }
-                    // remove element only if was created dynamically
+                    // remove the element only if was created dynamically
                     if ($popup && !settings.preserve) {
                         module.removePopup();
                     }
@@ -181,17 +173,14 @@
                     module.unbind.close();
                     module.unbind.events();
                     $module
-                        .removeData(moduleNamespace)
-                    ;
+                        .removeData(moduleNamespace);
                 },
 
                 event: {
                     start: function (event) {
-                        var
-                            delay = $.isPlainObject(settings.delay)
-                                ? settings.delay.show
-                                : settings.delay
-                        ;
+                        let delay = $.isPlainObject(settings.delay)
+                            ? settings.delay.show
+                            : settings.delay;
                         clearTimeout(module.hideTimer);
                         if (!openedWithTouch || (openedWithTouch && settings.addTouchEvents)) {
                             module.showTimer = setTimeout(function () {
@@ -200,11 +189,9 @@
                         }
                     },
                     end: function () {
-                        var
-                            delay = $.isPlainObject(settings.delay)
-                                ? settings.delay.hide
-                                : settings.delay
-                        ;
+                        let delay = $.isPlainObject(settings.delay)
+                            ? settings.delay.hide
+                            : settings.delay;
                         clearTimeout(module.showTimer);
                         module.hideTimer = setTimeout(function () {
                             module.hide();
@@ -234,11 +221,9 @@
                         });
                     },
                     hideGracefully: function (event) {
-                        var
-                            $target = $(event.target),
-                            isInDOM = $.contains(document.documentElement, event.target),
-                            inPopup = $target.closest(selector.popup).length > 0
-                        ;
+                        let $target = $(event.target);
+                        let isInDOM = $.contains(document.documentElement, event.target);
+                        let inPopup = $target.closest(selector.popup).length > 0;
                         // don't close on clicks inside popup
                         if (event && !inPopup && isInDOM) {
                             module.debug('Click occurred outside popup hiding popup');
@@ -251,13 +236,11 @@
 
                 // generates popup html from metadata
                 create: function () {
-                    var
-                        targetSibling = $target.next(selector.popup),
-                        contentFallback = !settings.popup && targetSibling.length === 0 ? $module.attr('title') : false,
-                        html      = module.get.html(),
-                        title     = module.get.title(),
-                        content   = module.get.content(contentFallback)
-                    ;
+                    let targetSibling = $target.next(selector.popup);
+                    let contentFallback = !settings.popup && targetSibling.length === 0 ? $module.attr('title') : false;
+                    let html = module.get.html();
+                    let title = module.get.title();
+                    let content = module.get.content(contentFallback);
 
                     if (html || content || title) {
                         module.debug('Creating pop-up html');
@@ -270,18 +253,15 @@
                         $popup = $('<div/>')
                             .addClass(className.popup)
                             .data(metadata.activator, $module)
-                            .html(html)
-                        ;
+                            .html(html);
                         if (settings.inline) {
                             module.verbose('Inserting popup element inline', $popup);
                             $popup
-                                .insertAfter($module)
-                            ;
+                                .insertAfter($module);
                         } else {
                             module.verbose('Appending popup element to body', $popup);
                             $popup
-                                .appendTo($context)
-                            ;
+                                .appendTo($context);
                         }
                         module.refresh();
                         module.set.variation();
@@ -375,10 +355,8 @@
                         .each(function () {
                             $(this)
                                 .data(metadata.activator)
-                                .popup('hide')
-                            ;
-                        })
-                    ;
+                                .popup('hide');
+                        });
                 },
                 exists: function () {
                     if (!$popup) {
@@ -444,8 +422,7 @@
                                         callback.call($popup, element);
                                         settings.onVisible.call($popup, element);
                                     },
-                                })
-                            ;
+                                });
                         }
                     },
                     hide: function (callback) {
@@ -465,8 +442,7 @@
                                         callback.call($popup, element);
                                         settings.onHidden.call($popup, element);
                                     },
-                                })
-                            ;
+                                });
                         } else {
                             module.error(error.noTransition);
                         }
@@ -507,23 +483,21 @@
                         return $popup.offset();
                     },
                     calculations: function () {
-                        var
-                            $popupOffsetParent = module.get.offsetParent($popup),
-                            targetElement      = $target[0],
-                            isWindowEl         = $boundary[0] === window,
-                            targetOffset       = $target.offset(),
-                            parentOffset       = settings.inline || (settings.popup && settings.movePopup)
-                                ? $target.offsetParent().offset()
-                                : { top: 0, left: 0 },
-                            screenPosition = isWindowEl
-                                ? { top: 0, left: 0 }
-                                : $boundary.offset(),
-                            calculations   = {},
-                            scroll = isWindowEl
-                                ? { top: $window.scrollTop(), left: $window.scrollLeft() }
-                                : { top: 0, left: 0 },
-                            screen
-                        ;
+                        let $popupOffsetParent = module.get.offsetParent($popup);
+                        let targetElement = $target[0];
+                        let isWindowEl = $boundary[0] === window;
+                        let targetOffset = $target.offset();
+                        let parentOffset = settings.inline || (settings.popup && settings.movePopup)
+                            ? $target.offsetParent().offset()
+                            : { top: 0, left: 0 };
+                        let screenPosition = isWindowEl
+                            ? { top: 0, left: 0 }
+                            : $boundary.offset();
+                        let calculations = {};
+                        let scroll = isWindowEl
+                            ? { top: $window.scrollTop(), left: $window.scrollLeft() }
+                            : { top: 0, left: 0 };
+                        let screen;
                         calculations = {
                             // element which is launching popup
                             target: {
@@ -557,11 +531,9 @@
                             },
                         };
 
-                        // if popup offset context is not same as target, then adjust calculations
+                        // if popup offset context is different from target, then adjust calculations
                         if ($popupOffsetParent[0] !== $offsetParent[0]) {
-                            var
-                                popupOffset        = $popupOffsetParent.offset()
-                            ;
+                            let popupOffset = $popupOffsetParent.offset();
                             calculations.target.top -= popupOffset.top;
                             calculations.target.left -= popupOffset.left;
                             calculations.parent.width = $popupOffsetParent.outerWidth();
@@ -623,11 +595,9 @@
                         return false;
                     },
                     distanceFromBoundary: function (offset, calculations) {
-                        var
-                            distanceFromBoundary = {},
-                            popup,
-                            boundary
-                        ;
+                        let distanceFromBoundary = {};
+                        let popup;
+                        let boundary;
                         calculations = calculations || module.get.calculations();
 
                         // shorthand
@@ -647,19 +617,15 @@
                         return distanceFromBoundary;
                     },
                     offsetParent: function ($element) {
-                        var
-                            element = $element !== undefined
-                                ? $element[0]
-                                : $target[0],
-                            parentNode = element.parentNode,
-                            $node    = $(parentNode)
-                        ;
+                        let element = $element !== undefined
+                            ? $element[0]
+                            : $target[0];
+                        let parentNode = element.parentNode;
+                        let $node = $(parentNode);
                         if (parentNode) {
-                            var
-                                is2D     = $node.css('transform') === 'none',
-                                isStatic = $node.css('position') === 'static',
-                                isBody   = $node.is('body')
-                            ;
+                            let is2D = $node.css('transform') === 'none';
+                            let isStatic = $node.css('position') === 'static';
+                            let isBody = $node.is('body');
                             while (parentNode && !isBody && isStatic && is2D) {
                                 parentNode = parentNode.parentNode;
                                 $node = $(parentNode);
@@ -686,36 +652,34 @@
                         };
                     },
                     nextPosition: function (position) {
-                        var
-                            positions          = position.split(' '),
-                            verticalPosition   = positions[0],
-                            horizontalPosition = positions[1],
-                            opposite = {
-                                top: 'bottom',
-                                bottom: 'top',
-                                left: 'right',
-                                right: 'left',
-                            },
-                            adjacent = {
-                                left: 'center',
-                                center: 'right',
-                                right: 'left',
-                            },
-                            backup = {
-                                'top left': 'top center',
-                                'top center': 'top right',
-                                'top right': 'right center',
-                                'right center': 'bottom right',
-                                'bottom right': 'bottom center',
-                                'bottom center': 'bottom left',
-                                'bottom left': 'left center',
-                                'left center': 'top left',
-                            },
-                            adjacentsAvailable = verticalPosition === 'top' || verticalPosition === 'bottom',
-                            oppositeTried = false,
-                            adjacentTried = false,
-                            nextPosition  = false
-                        ;
+                        let positions = position.split(' ');
+                        let verticalPosition = positions[0];
+                        let horizontalPosition = positions[1];
+                        let opposite = {
+                            top: 'bottom',
+                            bottom: 'top',
+                            left: 'right',
+                            right: 'left',
+                        };
+                        let adjacent = {
+                            left: 'center',
+                            center: 'right',
+                            right: 'left',
+                        };
+                        let backup = {
+                            'top left': 'top center',
+                            'top center': 'top right',
+                            'top right': 'right center',
+                            'right center': 'bottom right',
+                            'bottom right': 'bottom center',
+                            'bottom center': 'bottom left',
+                            'bottom left': 'left center',
+                            'left center': 'top left',
+                        };
+                        let adjacentsAvailable = verticalPosition === 'top' || verticalPosition === 'bottom';
+                        let oppositeTried = false;
+                        let adjacentTried = false;
+                        let nextPosition = false;
                         if (!triedPositions) {
                             module.verbose('All available positions available');
                             triedPositions = module.get.positions();
@@ -753,16 +717,14 @@
 
                             return;
                         }
-                        var
-                            offset,
-                            distanceAway,
-                            target,
-                            popup,
-                            parent,
-                            positioning,
-                            popupOffset,
-                            distanceFromBoundary
-                        ;
+                        let offset;
+                        let distanceAway;
+                        let target;
+                        let popup;
+                        let parent;
+                        let positioning;
+                        let popupOffset;
+                        let distanceFromBoundary;
 
                         calculations = calculations || module.get.calculations();
                         position = position || $module.data(metadata.position) || settings.position;
@@ -818,7 +780,7 @@
                             module.debug('RTL: Popup position updated', position);
                         }
 
-                        // if last attempt use specified last resort position
+                        // if last attempt, use specified last resort position
                         if (searchDepth === settings.maxSearchDepth && typeof settings.lastResort === 'string') {
                             position = settings.lastResort;
                         }
@@ -915,8 +877,7 @@
                         $popup
                             .css(positioning)
                             .removeClass(className.position)
-                            .addClass(position)
-                        ;
+                            .addClass(position);
                         module.set.invisible();
 
                         popupOffset = module.get.popupOffset();
@@ -1014,19 +975,16 @@
                         module.debug('Binding popup events to module');
                         if (settings.on === 'click') {
                             $module
-                                .on(clickEvent + eventNamespace, module.toggle)
-                            ;
+                                .on(clickEvent + eventNamespace, module.toggle);
                         }
                         if (settings.on === 'hover') {
                             $module
-                                .on('touchstart' + eventNamespace, module.event.touchstart)
-                            ;
+                                .on('touchstart' + eventNamespace, module.event.touchstart);
                         }
                         if (module.get.startEvent()) {
                             $module
                                 .on(module.get.startEvent() + eventNamespace, module.event.start)
-                                .on(module.get.endEvent() + eventNamespace, module.event.end)
-                            ;
+                                .on(module.get.endEvent() + eventNamespace, module.event.end);
                         }
                         if (settings.target) {
                             module.debug('Target set to element', $target);
@@ -1038,8 +996,7 @@
                         if ($popup && module.has.popup()) {
                             $popup
                                 .on('mouseenter' + eventNamespace, module.event.start)
-                                .on('mouseleave' + eventNamespace, module.event.end)
-                            ;
+                                .on('mouseleave' + eventNamespace, module.event.end);
                         }
                     },
                     close: function () {
@@ -1055,8 +1012,7 @@
                     closeOnScroll: function () {
                         module.verbose('Binding scroll close event to document');
                         $scrollContext
-                            .one(module.get.scrollEvent() + elementNamespace, module.event.hideGracefully)
-                        ;
+                            .one(module.get.scrollEvent() + elementNamespace, module.event.hideGracefully);
                     },
                     touchClose: function () {
                         module.verbose('Binding popup touchclose event to document');
@@ -1064,8 +1020,7 @@
                             .on('touchstart' + elementNamespace, function (event) {
                                 module.verbose('Touched away from popup');
                                 module.event.hideGracefully.call(element, event);
-                            })
-                        ;
+                            });
                     },
                     clickaway: function () {
                         module.verbose('Binding popup close event to document');
@@ -1073,27 +1028,22 @@
                             .on(clickEvent + elementNamespace, function (event) {
                                 module.verbose('Clicked away from popup');
                                 module.event.hideGracefully.call(element, event);
-                            })
-                        ;
+                            });
                     },
                 },
 
                 unbind: {
                     events: function () {
                         $window
-                            .off(elementNamespace)
-                        ;
+                            .off(elementNamespace);
                         $module
-                            .off(eventNamespace)
-                        ;
+                            .off(eventNamespace);
                     },
                     close: function () {
                         $document
-                            .off(elementNamespace)
-                        ;
+                            .off(elementNamespace);
                         $scrollContext
-                            .off(elementNamespace)
-                        ;
+                            .off(elementNamespace);
                     },
                 },
 
@@ -1129,9 +1079,7 @@
                         return settings.closable;
                     },
                     offstage: function (distanceFromBoundary, position) {
-                        var
-                            offstage = []
-                        ;
+                        let offstage = [];
                         // return boundaries that have been surpassed
                         $.each(distanceFromBoundary, function (direction, distance) {
                             if (distance < -settings.jitter) {
@@ -1176,8 +1124,7 @@
                     if (settings.preserve) {
                         if ($.fn.transition !== undefined) {
                             $popup
-                                .transition('remove transition')
-                            ;
+                                .transition('remove transition');
                         }
                     } else {
                         module.removePopup();
@@ -1230,11 +1177,9 @@
                 },
                 performance: {
                     log: function (message) {
-                        var
-                            currentTime,
-                            executionTime,
-                            previousTime
-                        ;
+                        let currentTime;
+                        let executionTime;
+                        let previousTime;
                         if (settings.performance) {
                             currentTime = Date.now();
                             previousTime = time || currentTime;
@@ -1253,10 +1198,8 @@
                         }, 500);
                     },
                     display: function () {
-                        var
-                            title = settings.name + ':',
-                            totalTime = 0
-                        ;
+                        let title = settings.name + ':';
+                        let totalTime = 0;
                         time = false;
                         clearTimeout(module.performance.timer);
                         $.each(performance, function (index, data) {
@@ -1278,22 +1221,19 @@
                     },
                 },
                 invoke: function (query, passedArguments, context) {
-                    var
-                        object = instance,
-                        maxDepth,
-                        found,
-                        response
-                    ;
+                    let object = instance;
+                    let maxDepth;
+                    let found;
+                    let response;
                     passedArguments = passedArguments || queryArguments;
                     context = context || element;
                     if (typeof query === 'string' && object !== undefined) {
                         query = query.split(/[ .]/);
                         maxDepth = query.length - 1;
                         $.each(query, function (depth, value) {
-                            var camelCaseValue = depth !== maxDepth
+                            let camelCaseValue = depth !== maxDepth
                                 ? value + query[depth + 1].charAt(0).toUpperCase() + query[depth + 1].slice(1)
-                                : query
-                            ;
+                                : query;
                             if ($.isPlainObject(object[camelCaseValue]) && (depth !== maxDepth)) {
                                 object = object[camelCaseValue];
                             } else if (object[camelCaseValue] !== undefined) {
@@ -1362,7 +1302,7 @@
         // whether it should use dom mutation observers
         observeChanges: true,
 
-        // callback only when element added to dom
+        // callback only when the element was added to dom
         onCreate: function () {},
 
         // callback before element removed from dom
@@ -1407,7 +1347,7 @@
         // element which popup should be relative to
         target: false,
 
-        // jq selector or element that should be used as popup
+        // jQuery selector or element that should be used as a popup
         popup: false,
 
         // popup should remain inline next to activator
@@ -1422,7 +1362,7 @@
         // explicitly set content
         content: false,
 
-        // explicitly set html
+        // explicitly set HTML
         html: false,
 
         // explicitly set title
@@ -1465,7 +1405,7 @@
         duration: 200,
         transition: 'scale',
 
-        // distance away from activating element in px
+        // distance away from the activating element in px
         distanceAway: 0,
 
         // number of pixels an element is allowed to be "offstage" for a position to be chosen (allows for rounding)
@@ -1515,33 +1455,20 @@
 
         templates: {
             escape: function (string) {
-                var
-                    badChars     = /["'<>`]/g,
-                    shouldEscape = /["&'<>`]/,
-                    escape       = {
-                        '<': '&lt;',
-                        '>': '&gt;',
-                        '"': '&quot;',
-                        "'": '&#x27;',
-                        '`': '&#x60;',
-                    },
-                    escapedChar  = function (chr) {
-                        return escape[chr];
-                    }
-                ;
-                if (shouldEscape.test(string)) {
-                    string = string.replace(/&(?![\d#a-z]{1,12};)/gi, '&amp;');
-
-                    return string.replace(badChars, escapedChar);
-                }
-
-                return string;
+                const badChars = /["'<>]|&(?![\d#A-Za-z]{1,12};)/g;
+                const escape = {
+                    '"': '&quot;',
+                    '&': '&amp;',
+                    "'": '&apos;',
+                    '<': '&lt;',
+                    '>': '&gt;',
+                };
+
+                return String(string).replace(badChars, (chr) => escape[chr]);
             },
             popup: function (text) {
-                var
-                    html   = '',
-                    escape = $.fn.popup.settings.templates.escape
-                ;
+                let html = '';
+                let escape = $.fn.popup.settings.templates.escape;
                 if (text !== undefined) {
                     if (text.title) {
                         text.title = escape(text.title);