UIKit Code Panel + View All / Clean Public Fixes!

packages/core/src/lib/buildPatterns.js

@@ -40,7 +40,7 @@ module.exports = async (deletePatternDir, patternlab, additionalData) => {
   //
   const graph = (patternlab.graph = loadPatternGraph(
     patternlab,
-    deletePatternDir
+    patternlab.config.cleanPublic
   ));
   const graphNeedsUpgrade = !PatternGraph.checkVersion(graph);
   if (graphNeedsUpgrade) {
@@ -55,7 +55,7 @@ module.exports = async (deletePatternDir, patternlab, additionalData) => {
 
   // Flags
   patternlab.incrementalBuildsEnabled = !(
-    deletePatternDir || graphNeedsUpgrade
+    patternlab.config.cleanPublic || graphNeedsUpgrade
   );
 
   //

packages/edition-twig/patternlab-config.json

@@ -56,7 +56,7 @@
     }
   },
   "cacheBust": true,
-  "cleanPublic": true,
+  "cleanPublic": false,
   "defaultPattern": "all",
   "defaultShowPatternInfo": false,
   "ishControlsHide": {

packages/uikit-workshop/src/sass/scss/04-components/_pattern-info.scss

@@ -24,7 +24,6 @@
 
     @media all and (min-width: $pl-bp-large) {
       max-height: none;
-      height: 18rem;
       flex-direction: row;
       overflow: visible;
     }
@@ -53,7 +52,6 @@
  */
 .pl-c-pattern-info__panel {
   padding: 1rem;
-  width: 100%;
   flex-shrink: 0;
   display: flex;
   flex-direction: column;

packages/uikit-workshop/src/scripts/components/modal-styleguide.js

@@ -19,13 +19,14 @@ export const modalStyleguide = {
    */
   onReady() {
     // go through the panel toggles and add click event to the pattern extra toggle button
-    const els = document.querySelectorAll('.pl-js-pattern-extra-toggle');
-    for (let i = 0; i < els.length; ++i) {
-      els[i].onclick = function(e) {
-        const patternPartial = this.getAttribute('data-patternpartial');
+    const toggles = document.querySelectorAll('.pl-js-pattern-extra-toggle');
+
+    toggles.forEach(toggle => {
+      toggle.addEventListener('click', e => {
+        const patternPartial = toggle.getAttribute('data-patternpartial');
         modalStyleguide.toggle(patternPartial);
-      };
-    }
+      });
+    });
   },
 
   /**
@@ -63,15 +64,17 @@ export const modalStyleguide = {
     content = panelsUtil.addClickEvents(content, patternPartial);
 
     // make sure the modal viewer and other options are off just in case
-    modalStyleguide.close(patternPartial);
+    // modalStyleguide.close(patternPartial);
 
     // note it's turned on in the viewer
     modalStyleguide.active[patternPartial] = true;
 
     // make sure there's no content
     div = document.getElementById('pl-pattern-extra-' + patternPartial);
-    if (div.childNodes.length > 0) {
-      div.removeChild(div.childNodes[0]);
+    if (div && div.childNodes) {
+      if (div.childNodes.length > 0) {
+        div.removeChild(div.childNodes[0]);
+      }
     }
 
     // add the content
@@ -108,9 +111,11 @@ export const modalStyleguide = {
       toggle.classList.remove('pl-is-active');
     }
 
-    document
-      .getElementById('pl-pattern-extra-' + patternPartial)
-      .classList.remove('pl-is-active');
+    if (document.getElementById('pl-pattern-extra-' + patternPartial)) {
+      document
+        .getElementById('pl-pattern-extra-' + patternPartial)
+        .classList.remove('pl-is-active');
+    }
   },
 
   /**

packages/uikit-workshop/src/scripts/components/modal-viewer.js

@@ -196,9 +196,6 @@ export const modalViewer = {
    */
   refresh(patternData, iframePassback, switchText) {
     // if this is a styleguide view close the modal
-    if (iframePassback) {
-      modalViewer.close();
-    }
 
     modalViewer.patternData = patternData;
 
@@ -348,9 +345,6 @@ export const modalViewer = {
           data.iframePassback,
           data.switchText
         );
-
-        modalViewer.panelRendered = true;
-        modalViewer.previouslyRenderedPattern = data.patternData.patternPartial;
       }
     } else if (
       data.event !== undefined &&
@@ -382,9 +376,11 @@ export const modalViewer = {
   },
 
   _stateChanged(state) {
-    modalViewer.active = state.app.drawerOpened;
-    if (modalViewer.iframeElement) {
-      modalViewer._handleInitialModalViewerState();
+    if (modalViewer.active !== state.app.drawerOpened) {
+      modalViewer.active = state.app.drawerOpened;
+      if (modalViewer.iframeElement) {
+        modalViewer._handleInitialModalViewerState();
+      }
     }
   },
 };

packages/uikit-workshop/src/scripts/components/pl-viewport/pl-viewport.js

@@ -40,7 +40,6 @@ class IFrame extends BaseComponent {
     // self.receiveIframeMessage = self.receiveIframeMessage.bind(self);
     self.handleResize = self.handleResize.bind(self);
     self.handleMouseDown = self.handleMouseDown.bind(self);
-    self.handleIframeLoaded = self.handleIframeLoaded.bind(self);
     //set up the default for the
     self.baseIframePath =
       window.location.protocol +
@@ -53,9 +52,7 @@ class IFrame extends BaseComponent {
 
   // update the currently active nav + add / update the page's query string
   handlePageLoad(e) {
-    const queryString = window.location.search;
-    const urlParams = new URLSearchParams(queryString);
-    const patternParam = urlParams.get('p');
+    const patternParam = this.getPatternFromParam();
 
     const currentPattern =
       e.detail.pattern || window.config.defaultPattern || 'all';
@@ -104,9 +101,7 @@ class IFrame extends BaseComponent {
 
   // navigate to the new PL page (based on the query string) when the page's pop state changes
   handlePageChange(e) {
-    var queryString = window.location.search;
-    const urlParams = new URLSearchParams(queryString);
-    let patternParam = urlParams.get('p');
+    const patternParam = this.getPatternFromParam();
 
     if (patternParam) {
       this.navigateTo(patternParam);
@@ -327,25 +322,33 @@ class IFrame extends BaseComponent {
   }
 
   rendered() {
-    super.rendered && super.rendered();
     this.iframe = this.querySelector('.pl-js-iframe');
     this.iframeContainer = this.querySelector('.pl-js-vp-iframe-container');
     this.iframeCover = this.querySelector('.pl-js-viewport-cover');
+
+    if (!this.hasUpdatedSrcset && this.iframe.src) {
+      this.hasUpdatedSrcset = true;
+      this.iframe.setAttribute('src', this.iframe.src);
+      this.iframe.removeAttribute('srcdoc');
+    }
+
+    super.rendered && super.rendered();
   }
 
-  handleIframeLoaded() {
-    const self = this;
-    if (!this._hasInitiallyRendered) {
-      this._hasInitiallyRendered = true;
-      this.navigateTo(patternName, true);
+  getPatternFromParam() {
+    const queryString = window.location.search;
+    const urlParams = new URLSearchParams(queryString);
+    let patternParam = urlParams.get('p');
+
+    if (patternParam && patternParam.includes('viewall')) {
+      patternParam = patternParam.replace(/-[0-9][0-9]/g, '');
     }
+    return patternParam;
   }
 
   render() {
     // use either the page's query string or the patternPartial data to auto-update the URL
-    var queryString = window.location.search;
-    const urlParams = new URLSearchParams(queryString);
-    let patternParam = urlParams.get('p');
+    let patternParam = this.getPatternFromParam();
 
     if (!patternParam) {
       if (window.patternData) {
@@ -412,6 +415,7 @@ class IFrame extends BaseComponent {
             className={`pl-c-viewport__iframe pl-js-iframe pl-c-body--theme-${this.themeMode}`}
             sandbox="allow-same-origin allow-scripts allow-popups allow-forms allow-modals"
             // srcdoc={render(<IframeInner />)}
+            srcdoc={render(<IframeInner />)}
             src={url}
           />
           {