stagfe2/js-dev/stag-popup.js

window.stagPopupsQueue = [];
function showStagPopup(_key, _noAutoFocus) {
    /*$('html, body').addClass('no-scroll');
    $(window.top.document.body).find('#stag_mcp_lhs').addClass('no-scroll');*/
    let stagPopup = $('[stag-popup-key="' + _key + '"]');
    if(stagPopup.is('.show')) return false;
    else {
        let zIndex = $('.stag-popup.show[stag-popup-key]').last().css('z-index');
        if(zIndex) zIndex++; else zIndex = 100;
        stagPopup.css('z-index', zIndex);
    }
    stagPopup.addClass('show');
    stagPopup.find('[moe][initialized]').removeAttr('initialized');
    initMoes();
    initFileInputs();
    if(!_noAutoFocus) {
        window.setTimeout(function() {
            stagPopup.find('input[type="text"]:not([readonly]):visible,select:visible').first().focus();
        }, 150);
    }
    stagPopupsQueue.push(stagPopup);
    return false;
}
function submitStagPopup(_form) {
    if(!_form[0].checkValidity()) {
        _form[0].reportValidity();
        return false;
    }
    showMask();
    $.post(_form.attr('action'), _form.serialize(), function(_data) {
        stagPopupsQueue = [];
        fastReload();
    });
    return false;
}
function closeStagPopup(_noEvent = false) {
    hideMoeFormMask();
    if(!stagPopupsQueue.length) return false;
    let popup = stagPopupsQueue[stagPopupsQueue.length - 1];
    let closeAll = !!popup.attr('close-all-with-self');
    popup.removeClass('show');
    stagPopupsQueue.splice(stagPopupsQueue.length - 1, 1);
    if(closeAll) {
        while(stagPopupsQueue.length) {
            closeStagPopup(true);
        }
    }
    else {
        if(popup.is('[update-parent]') && !_noEvent) {
            let hook = popup.attr('update-parent');
            if(!!$.trim(hook) && hasMCHook(hook)) {
                runMCHook(hook)
            }
            else {
                if(stagPopupsQueue.length) {
                    refreshDynamicStagPopup();
                }
                else {
                    fastReload(popup.is('[update-target]') ? popup.attr('update-target') : '');
                    return false;
                }
            }
        }
    }

    // remove from the DOM
    if(popup.is('.dynamic-popup')) popup.remove();

    // if all closed
    if(!stagPopupsQueue.length) {
        $('html, body').removeClass('no-scroll');
        $(window.top.document.body).find('#stag_mcp_lhs').removeClass('no-scroll');
        if(!_noEvent) {
            $('body').trigger('stag-popup-closed');
        }
    }
    return false;
}
function convertContentLinksForInPopupNavigation(popup) {
    popup.find('.stag-popup-content-inner').find('a').each(function() {
        let a = $(this);
        if(!(!a.attr('href') ||
            a.is('[open-in-stag-popup]') ||
            a.is('[native]') ||
            a.attr('href') === '#' ||
            a[0].onclick)) {
            a.attr('replace-in-stag-popup', 1);
        }
    });
}
function openDynamicStagPopup(_url, initer, title, updateParent, style = '', replace = false, updateTarget = null) {
    let url = _url;
    if(url.indexOf('popupmode') === -1) {
        url += (url.indexOf('?') !== -1 ? '&' : '?') + 'popupmode=1';
    }
    // close out any open inline visit-segment
    $('.note-section.visit-segment.edit').removeClass('edit');
    showMask();
    window.noMc = true;
    $.get(url, (_data) => {

        let popup = null;
        if(replace) {
            if(!stagPopupsQueue.length) {
                console.error('No stag-popup currently visible!');
                return false;
            }
            popup = stagPopupsQueue[stagPopupsQueue.length - 1];
            if(!popup.is('.dynamic-popup')) {
                console.error('Topmost stag-popup is not dynamic!');
                return false;
            }
            popup.attr('stag-popup-key', url);
        }
        else {
            popup = $('.dynamic-popup[stag-popup-key="' + url + '"]');
            if(!popup.length) {
                $('main.stag-content').append(
                    '<div class="stag-popup ' + (style ? style : 'stag-popup-lg') + ' dynamic-popup draggable resizable mcp-theme-1" stag-popup-key="' + url + '">' +
                    '<div class="stag-popup-content p-0">' +
                    '<h3 class="stag-popup-title mb-0 mt-3 mx-3 pb-0 border-bottom-0"><span></span>' +
                    '<a href="#" class="ml-auto text-secondary" onclick="return closeStagPopup()"><i class="fa fa-times-circle"></i></a>\n' +
                    '</h3>' +
                    '<div class="stag-popup-content-inner"></div>' +
                    '</div>' +
                    '</div>'
                );
                popup = $('.dynamic-popup[stag-popup-key="' + url + '"]');
            }
        }

        popup.attr('mc-initer', initer);
        popup.find('.stag-popup-title>span').html(title);
        popup.find('.stag-popup-content-inner').html(_data);

        convertContentLinksForInPopupNavigation(popup);

        if(!replace) {
            if(updateParent) {
                popup.attr('update-parent', updateParent);
            }
            else {
                popup.removeAttr('update-parent');
            }
            showStagPopup(url, true);

            if(updateTarget) {
                popup.attr('update-target', updateTarget);
            }
        }

        if(initer) runMCInitializer(initer);
        runMCInitializer('pro-suggest'); // not the place for this! Move to better place.
        initMoes();
        hideMask();
        initFileInputs();
    }).fail(() => {
        toastr.error('Unable to open ' + _url);
        hideMask();
    });
}
function isDynamicStagPopupPresent() {
    if(!stagPopupsQueue.length) return false;
    let popup = stagPopupsQueue[stagPopupsQueue.length - 1];
    if(popup.is('.dynamic-popup')) return true;
    return false;
}
function refreshDynamicStagPopup(_url = false, _target = null) {
    if(!stagPopupsQueue.length) return false;
    let popup = stagPopupsQueue[stagPopupsQueue.length - 1];
    if(popup.is('.dynamic-popup')) {
        showMask();
        window.noMc = true;
        if(_url) {
            popup.attr('stag-popup-key', _url);
        }
        let url = popup.attr('stag-popup-key'),
            initer = popup.attr('mc-initer');
        $.get(url, (_data) => {
            if(_target) {
                _data = '<div>' + _data + '</div>';
                _target = _target.split(',').map(_x => $.trim(_x));
                for (let i = 0; i < _target.length; i++) {
                    let t = _target[i];
                    let targetElement = $(t).first();
                    if(targetElement.length) {
                        let sourceElement = $(_data).find(t).first();
                        if (sourceElement && sourceElement.length) {
                            targetElement.html(sourceElement.html());
                            initFastLoad(targetElement);
                            console.log('Replaced ' + t);
                        }
                        else {
                            console.warn(t + ' not found in returned content');
                        }
                    }
                    else {
                        console.warn(t + ' not found in existing content');
                    }
                }
            }
            else {
                popup.find('.stag-popup-content-inner').html(_data);
            }
            convertContentLinksForInPopupNavigation(popup);
            if(initer) runMCInitializer(initer);
            runMCInitializer('pro-suggest');
            initMoes();
            hideMask();
            initFileInputs();
        });
    }
    return false;
}
function hasResponseError(_data) {
    let msg = 'Unknown error!';
    if (_data) {
        if (_data.success) return false;
        else if (_data.message) msg = _data.message;
    }
    toastr.error(msg);
    return true;
}
(function() {
    window.initStagPopupEvents = function () {
        $(document)
            .off('mousedown.stag-popup-discard', '.stag-popup')
            .on('mousedown.stag-popup-discard', '.stag-popup', function(_e) {
                if($(_e.target).is('.stag-popup') && !isEventConsumed(_e)) {
                    closeStagPopup();
                    return false;
                }
            });
        // catch ESC and discard any visible popups
        $(document)
            .off('keydown.stag-popup-escape')
            .on('keydown.stag-popup-escape', function (e) {
                if(e.which === 27) {
                    if(!isEventConsumed(e)) {
                        if(stagPopupsQueue.length) {
                            if($('.stag-popup.show [moe] [url]:not([show]):visible').length || $('.stag-popup.show [visit-moe] [url]:not([show]):visible').length) {
                                return;
                            }
                            closeStagPopup();
                            markEventAsConsumed(e);
                            return false;
                        }
                    }
                }
            });

        $(document)
            .off('click.open-in-stag-popup', '[open-in-stag-popup]')
            .on('click.open-in-stag-popup', '[open-in-stag-popup]', function() {
                let trig = $(this);
                let updateParent = trig.is('[update-parent]');
                if(updateParent) {
                    if(!!$.trim(trig.attr('update-parent'))) {
                        updateParent = trig.attr('update-parent');
                    }
                    else {
                        updateParent = true;
                    }
                }
                openDynamicStagPopup(
                    trig.attr('href'),
                    trig.attr('mc-initer'),
                    trig.attr('title'),
                    updateParent,
                    trig.attr('popup-style'),
                    false,
                    trig.is('[update-target]') ? trig.attr('update-target') : null
                );
                return false;
            });

        $(document)
            .off('click.replace-in-stag-popup', '[replace-in-stag-popup]')
            .on('click.replace-in-stag-popup', '[replace-in-stag-popup]', function() {
                let trig = $(this);
                openDynamicStagPopup(
                    trig.attr('href'),
                    trig.attr('mc-initer'),
                    trig.attr('title'),
                    null, // will be inherited when replacing
                    null, // will be inherited when replacing
                    true,
                    null
                );
                return false;
            });

        $(document)
            .off('click.close-stag-popup', '.btn-close-stag-popup')
            .on('click.close-stag-popup', '.btn-close-stag-popup', function() {
                closeStagPopup();
                return false;
            });

        // draggable
        let dragging = false, dragX, dragY;
        $(document)
            .off('mousedown.start-drag', '.stag-popup.dynamic-popup.draggable .stag-popup-title')
            .on('mousedown.start-drag', '.stag-popup.dynamic-popup.draggable .stag-popup-title', function(_e) {
                if(dragging && dragging.length) {
                    dragging = false;
                }
                dragging = $(this).closest('.stag-popup-content');
                dragX = _e.screenX;
                dragY = _e.screenY;
            });
        $(document)
            .off('mousemove.drag')
            .on('mousemove.drag', function(_e) {
                if(dragging && dragging.length) {
                    let targetX = dragging.position().left + (_e.screenX - dragX),
                        targetY = dragging.position().top + (_e.screenY - dragY);
                    if(targetX >= 0) dragX = _e.screenX;
                    if(targetY >= 0) dragY = _e.screenY;
                    if(targetX < 0) targetX = 0;
                    if(targetY < 0) targetY = 0;
                    dragging[0].style.left = targetX + 'px';
                    dragging[0].style.top = targetY + 'px';
                    dragging[0].style.transform = 'none';
                    return false;
                }
            });

        // resizable
        let resizeHighlighting = false, resizeDirection = false, resizeAnchor = false, resizing = false, resizeGutter = 8, resizeX, resizeY;
        $(document)
            .off('mousemove.highlight-resize', '.stag-popup.dynamic-popup.resizable .stag-popup-content')
            .on('mousemove.highlight-resize', '.stag-popup.dynamic-popup.resizable .stag-popup-content', function(_e) {
                if(dragging && dragging.length) return;
                if(resizing && resizing.length) return;
                let mouseX = _e.pageX - $(this).offset().left,
                    mouseY = _e.pageY - $(this).offset().top;
                if((mouseX >= 0 && mouseX <= resizeGutter) || (mouseX >= $(this).outerWidth() - resizeGutter && mouseX <= $(this).outerWidth())) {
                    $(this).addClass('resizing-x');
                    resizeHighlighting = $(this);
                    resizeDirection = 'x';
                    resizeAnchor = (mouseX >= 0 && mouseX <= resizeGutter) ? 'left' : 'right';
                }
                else if((mouseY >= 0 && mouseY <= resizeGutter) || (mouseY >= $(this).outerHeight() - resizeGutter && mouseY <= $(this).outerHeight())) {
                    $(this).addClass('resizing-y');
                    resizeHighlighting = $(this);
                    resizeDirection = 'y';
                    resizeAnchor = (mouseY >= 0 && mouseY <= resizeGutter) ? 'top' : 'bottom';
                }
                else {
                    $(this).removeClass('resizing-x');
                    $(this).removeClass('resizing-y');
                    resizeHighlighting = false;
                }
            });
        $(document)
            .off('mousedown.start-resize', '.stag-popup.dynamic-popup.resizable .stag-popup-content')
            .on('mousedown.start-resize', '.stag-popup.dynamic-popup.resizable .stag-popup-content', function(_e) {
                if(resizeHighlighting && resizeHighlighting.length) {
                    if(resizing && resizing.length) {
                        resizing.removeClass('resizing-x resizing-y');
                        resizing = false;
                    }
                    resizing = $(this);
                    resizeX = _e.screenX;
                    resizeY = _e.screenY;
                }
            });
        $(document)
            .off('mousemove.resize')
            .on('mousemove.resize', function(_e) {
                if(resizing && resizing.length) {

                    console.log(resizeDirection);
                    console.log(resizeAnchor);

                    // x
                    if(resizeDirection === 'x') {

                        let deltaX = _e.screenX - resizeX;

                        // anchor: left => update left and width of the popup
                        if(resizeAnchor === 'left') {
                            resizing[0].style.left = resizing.position().left + deltaX + 'px';
                            resizing[0].style.width = resizing.outerWidth() - deltaX + 'px';
                            resizing[0].style.transform = 'none';
                        }

                        // anchor: right => update width of the popup
                        else if(resizeAnchor === 'right') {
                            resizing[0].style.left = resizing.position().left + 'px'
                            resizing[0].style.width = resizing.outerWidth() + deltaX + 'px';
                            resizing[0].style.transform = 'none';
                        }
                    }

                    // x
                    if(resizeDirection === 'y') {

                        let deltaY = _e.screenY - resizeY;

                        // anchor: top => update top and height of the popup
                        if(resizeAnchor === 'top') {
                            resizing[0].style.top = resizing.position().top + deltaY + 'px';
                            resizing[0].style.height = resizing.outerHeight() - deltaY + 'px';
                        }

                        // anchor: bottom => update height of the popup
                        else if(resizeAnchor === 'bottom') {
                            resizing[0].style.height = resizing.outerHeight() + deltaY + 'px';
                        }
                    }

                    resizeX = _e.screenX;
                    resizeY = _e.screenY;
                    return false;
                }
            });
        $(document)
            .off('mouseleave.stop-resize', '.stag-popup.dynamic-popup.resizable .stag-popup-content')
            .on('mouseleave.stop-resize', '.stag-popup.dynamic-popup.resizable .stag-popup-content', function(_e) {
                if(resizing && resizing.length) return;
                if(resizeHighlighting && resizeHighlighting.length) {
                    resizeHighlighting.removeClass('resizing-x resizing-y');
                    resizeHighlighting = false;
                    return false;
                }
            });

        // common
        $(document)
            .off('mouseleave.stop-drag-resize')
            .on('mouseleave.stop-drag-resize', function() {
                if(dragging && dragging.length) {
                    dragging = false;
                }
                if(resizeHighlighting && resizeHighlighting.length) {
                    resizeHighlighting.removeClass('resizing-x resizing-y');
                    resizeHighlighting = false;
                }
                if(resizing && resizing.length) {
                    resizing.removeClass('resizing-x resizing-y');
                    resizing = false;
                }
            });
        $(document)
            .off('mouseup.stop-drag-resize')
            .on('mouseup.stop-drag-resize', function() {
                if(dragging && dragging.length) {
                    dragging = false;
                }
                if(resizeHighlighting && resizeHighlighting.length) {
                    resizeHighlighting.removeClass('resizing-x resizing-y');
                    resizeHighlighting = false;
                }
                if(resizing && resizing.length) {
                    resizing.removeClass('resizing-x resizing-y');
                    resizing = false;
                }
            });

    }
    addMCInitializer('stag-popups', window.initStagPopupEvents);
})();