stag-popups - support for in-popup link traversal

config/app.php

@@ -65,7 +65,7 @@ return [
 
     'hrm2_url' => env('HRM2_URL'),
 
-    'asset_version' => 16,
+    'asset_version' => 17,
 
     'temp_dir' => env('TEMP_DIR'),
 

public/js/stag-popup.js

@@ -49,11 +49,15 @@ function closeStagPopup(_noEvent = false) {
                 refreshDynamicStagPopup();
             }
             else {
-                fastReload()
+                fastReload();
                 return;
             }
         }
     }
+
+    // remove from the DOM
+    popup.remove();
+
     // if all closed
     if(!stagPopupsQueue.length) {
         $('html, body').removeClass('no-scroll');
@@ -64,37 +68,74 @@ function closeStagPopup(_noEvent = false) {
     }
     return false;
 }
-function openDynamicStagPopup(url, initer, title, updateParent, style = '') {
-    url += (url.indexOf('?') !== -1 ? '&' : '?') + 'popupmode=1';
+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) {
+    if(url.indexOf('popupmode') === -1) {
+        url += (url.indexOf('?') !== -1 ? '&' : '?') + 'popupmode=1';
+    }
     showMask();
     window.noMc = true;
     $.get(url, (_data) => {
-        let 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 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>'
-            );
+
+        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 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').text(title);
         popup.find('.stag-popup-content-inner').html(_data);
-        if(updateParent) {
-            popup.attr('update-parent', 1);
-        }
-        else {
-            popup.removeAttr('update-parent');
+
+        convertContentLinksForInPopupNavigation(popup);
+
+        if(!replace) {
+            if(updateParent) {
+                popup.attr('update-parent', 1);
+            }
+            else {
+                popup.removeAttr('update-parent');
+            }
+            showStagPopup(url, true);
         }
-        showStagPopup(url, true);
+
         if(initer) runMCInitializer(initer);
-        runMCInitializer('pro-suggest');
+        runMCInitializer('pro-suggest'); // not the place for this! Move to better place.
         initMoes();
         hideMask();
     });
@@ -118,6 +159,7 @@ function refreshDynamicStagPopup(_url = false) {
             initer = popup.attr('mc-initer');
         $.get(url, (_data) => {
             popup.find('.stag-popup-content-inner').html(_data);
+            convertContentLinksForInPopupNavigation(popup);
             if(initer) runMCInitializer(initer);
             runMCInitializer('pro-suggest');
             initMoes();
@@ -173,6 +215,21 @@ function hasResponseError(_data) {
                 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
+                );
+                return false;
+            });
+
         $(document)
             .off('click.close-stag-popup', '.btn-close-stag-popup')
             .on('click.close-stag-popup', '.btn-close-stag-popup', function() {