Merge pull request #1075 from pattern-lab/fix/restore-lineage-links

Fix: Restore Lineage Link “Click Functionality”

Author: bmuenzenmeyer

.github/FUNDING.yml

@@ -1,4 +1,3 @@
 # These are supported funding model platforms
 
 patreon: patternlab
-

packages/uikit-workshop/dist/styleguide/css/pattern-lab.css

@@ -12,11 +12,11 @@
 }
 
 /**
- * Lineage link 
+ * Lineage link
  */
 .pl-c-lineage__link {
   font-style: italic;
-  color: $pl-color-gray-50;
+  color: inherit;
   text-decoration: underline;
   display: inline-flex;
   align-items: center;

packages/uikit-workshop/dist/styleguide/js/patternlab-viewer.js

@@ -14,6 +14,7 @@ export const modalViewer = {
   // set up some defaults
   delayCheckingModalViewer: false,
   iframeElement: document.querySelector('.pl-js-iframe'),
+  iframeCustomElement: document.querySelector('pl-iframe'),
   active: false,
   switchText: true,
   template: 'info',
@@ -170,9 +171,23 @@ export const modalViewer = {
       }
 
       contentContainer.appendChild(templateRendered);
+      modalViewer.addClickEvents(contentContainer);
     }
   },
 
+  addClickEvents(contentContainer = document) {
+    contentContainer.querySelectorAll('.pl-js-lineage-link').forEach(link => {
+      link.addEventListener('click', e => {
+        const patternPartial = e.target.getAttribute('data-patternpartial');
+
+        if (patternPartial && modalViewer.iframeCustomElement) {
+          e.preventDefault();
+          modalViewer.iframeCustomElement.navigateTo(patternPartial);
+        }
+      });
+    });
+  },
+
   /**
    * refresh the modal if a new pattern is loaded and the modal is active
    * @param  {Object}       the patternData sent back from the query

packages/uikit-workshop/dist/styleguide/js/pl-modal-viewer-chunk-28e3e937adece2e20a1d.js

@@ -332,19 +332,6 @@ export const panelsViewer = {
       }
     }
 
-    // find lineage links in the rendered content and add postmessage handlers in case it's in the modal
-    // @todo: refactor and re-enable
-    // $('.pl-js-lineage-link', templateRendered).on('click', function(e) {
-    //   e.preventDefault();
-    //   const obj = JSON.stringify({
-    //     event: 'patternLab.updatePath',
-    //     path: urlHandler.getFileName($(this).attr('data-patternpartial')),
-    //   });
-    //   document
-    //     .querySelector('.pl-js-iframe')
-    //     .contentWindow.postMessage(obj, panelsViewer.targetOrigin);
-    // });
-
     // gather panels from plugins
     Dispatcher.trigger('insertPanels', [
       templateRendered,