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) && $.trim(hook) !== 'true') { let hooks = hook.split(','); for (let i = 0; i < hooks.length; i++) { hooks[i] = $.trim(hooks[i]); if(hasMCHook(hooks[i])) { runMCHook(hooks[i]); } } } 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( '
' + '
' + '

' + '\n' + '

' + '
' + '
' + '
' ); 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 = '
' + _data + '
'; _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(_e.which !== 1) return; 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(_e.which !== 1) return; 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); })();