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

Fix: Restore Lineage Link “Click Functionality”
pattern-lab · Oct 14, 2019 · ef3f35c · ef3f35c
2 parents 58830ec + a1d5e97
commit ef3f35c
Show file tree

Hide file tree

Showing 7 changed files with 19 additions and 19 deletions.
diff --git a/.github/FUNDING.yml b/.github/FUNDING.yml
@@ -1,4 +1,3 @@
 # These are supported funding model platforms
 
 patreon: patternlab
-
diff --git a/packages/uikit-workshop/dist/styleguide/css/pattern-lab.css b/packages/uikit-workshop/dist/styleguide/css/pattern-lab.css
diff --git a/packages/uikit-workshop/dist/styleguide/js/patternlab-viewer.js b/packages/uikit-workshop/dist/styleguide/js/patternlab-viewer.js
diff --git a/packages/uikit-workshop/dist/styleguide/js/pl-modal-viewer-chunk-28e3e937adece2e20a1d.js b/packages/uikit-workshop/dist/styleguide/js/pl-modal-viewer-chunk-28e3e937adece2e20a1d.js
diff --git a/packages/uikit-workshop/src/sass/scss/04-components/_pattern-lineage.scss b/packages/uikit-workshop/src/sass/scss/04-components/_pattern-lineage.scss
@@ -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;

diff --git a/packages/uikit-workshop/src/scripts/components/modal-viewer.js b/packages/uikit-workshop/src/scripts/components/modal-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

diff --git a/packages/uikit-workshop/src/scripts/components/panels-viewer.js b/packages/uikit-workshop/src/scripts/components/panels-viewer.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,