Squashed commit of the following:

commit fc83576
Author: e2tha-e <ee@electric-eloquence.io>
Date:   Thu Jan 23 13:45:17 2020 -0500

    updated tests

commit 1b510e0
Author: e2tha-e <ee@electric-eloquence.io>
Date:   Thu Jan 23 13:18:59 2020 -0500

    updated tests

commit a4bf65d
Author: e2tha-e <ee@electric-eloquence.io>
Date:   Thu Jan 23 07:22:38 2020 -0500

    passing tests

commit 9cf8a86
Author: e2tha-e <ee@electric-eloquence.io>
Date:   Wed Jan 22 17:26:01 2020 -0500

    deleted unused var

commit adb74e4
Author: e2tha-e <ee@electric-eloquence.io>
Date:   Wed Jan 22 17:22:16 2020 -0500

    deleted whitespace

commit 6ad03c9
Author: e2tha-e <ee@electric-eloquence.io>
Date:   Wed Jan 22 15:07:02 2020 -0500

    able to scroll to end of page when annotations or code viewer is open

commit e092d23
Author: e2tha-e <ee@electric-eloquence.io>
Date:   Mon Dec 30 16:43:58 2019 -0500

    conditional checks for querySelectorAll

scripts/classes/annotations-viewer.js

@@ -109,12 +109,22 @@ export default function (fepperUiInst, root) {
       const obj = {annotationsToggle: 'off'};
       this.annotationsActive = false;
 
+      /* istanbul ignore if */
+      if (typeof getComputedStyle === 'function') {
+        this.$orgs['#sg-annotations-container'].dispatchAction('addClass', 'close');
+      }
+
       this.$orgs['#sg-viewport'][0].contentWindow.postMessage(obj, this.uiProps.targetOrigin);
       this.slideAnnotations(
         Number(this.$orgs['#sg-annotations-container'].getState().innerHeight)
       );
       this.$orgs['#sg-t-annotations'].dispatchAction('removeClass', 'active');
 
+      // Remove padding from bottom of viewport if appropriate.
+      if (!this.codeViewer.codeActive) {
+        this.$orgs['#sg-vp-wrap'].dispatchAction('css', {paddingBottom: '0px'});
+      }
+
       /* istanbul ignore if */
       if (typeof getComputedStyle === 'function') {
         const transitionDurationStr =
@@ -129,7 +139,9 @@ export default function (fepperUiInst, root) {
         }
 
         setTimeout(() => {
-          this.$orgs['#sg-annotations-container'].dispatchAction('removeClass', 'anim-ready');
+          this.$orgs['#sg-annotations-container']
+            .dispatchAction('removeClass', 'close')
+            .dispatchAction('removeClass', 'anim-ready');
         }, transitionDurationNum);
       }
     }
@@ -158,9 +170,16 @@ export default function (fepperUiInst, root) {
         return;
       }
 
-      this.$orgs['#sg-annotations-container'] // Has class sg-view-container.
-        .dispatchAction('css', {bottom: -this.uiProps.sh + 'px'})
-        .dispatchAction('addClass', 'anim-ready');
+      // Flag that viewer is active.
+      this.annotationsActive = true;
+
+      this.$orgs['#sg-t-annotations'].dispatchAction('addClass', 'active');
+      this.$orgs['#sg-annotations-container'].dispatchAction('css', {bottom: -this.uiProps.sh + 'px'});
+
+      /* istanbul ignore if */
+      if (typeof getComputedStyle === 'function') {
+        this.$orgs['#sg-annotations-container'].dispatchAction('addClass', 'anim-ready');
+      }
 
       // Make sure the code viewer is off before showing annotations.
       this.codeViewer.closeCode();
@@ -170,14 +189,12 @@ export default function (fepperUiInst, root) {
 
       this.$orgs['#sg-viewport'][0].contentWindow.postMessage(objAnnotationsToggle, this.uiProps.targetOrigin);
 
-      // Flag that viewer is active.
-      this.annotationsActive = true;
-
-      this.$orgs['#sg-t-annotations'].dispatchAction('addClass', 'active');
-
       // Slide the annotation section into view.
       this.slideAnnotations(0);
 
+      // Add padding to bottom of viewport.
+      this.$orgs['#sg-vp-wrap'].dispatchAction('css', {paddingBottom: (this.uiProps.sh / 2) + 'px'});
+
       if (this.moveToNumber !== 0) {
         this.moveTo(this.moveToNumber);
 

scripts/classes/code-viewer.js

@@ -291,12 +291,22 @@ export default function (fepperUiInst, root_) {
       const obj = {codeToggle: 'off'};
       this.codeActive = false;
 
+      /* istanbul ignore if */
+      if (typeof getComputedStyle === 'function') {
+        this.$orgs['#sg-code-container'].dispatchAction('addClass', 'close');
+      }
+
       this.$orgs['#sg-viewport'][0].contentWindow.postMessage(obj, this.uiProps.targetOrigin);
       this.slideCode(
         Number(this.$orgs['#sg-code-container'].getState().innerHeight)
       );
       this.$orgs['#sg-t-code'].dispatchAction('removeClass', 'active');
 
+      // Remove padding from bottom of viewport if appropriate.
+      if (!this.annotationsViewer.annotationsActive) {
+        this.$orgs['#sg-vp-wrap'].dispatchAction('css', {paddingBottom: '0px'});
+      }
+
       /* istanbul ignore if */
       if (typeof getComputedStyle === 'function') {
         const transitionDurationStr =
@@ -311,7 +321,9 @@ export default function (fepperUiInst, root_) {
         }
 
         setTimeout(() => {
-          this.$orgs['#sg-code-container'].dispatchAction('removeClass', 'anim-ready');
+          this.$orgs['#sg-code-container']
+            .dispatchAction('removeClass', 'close')
+            .dispatchAction('removeClass', 'anim-ready');
         }, transitionDurationNum);
       }
     }
@@ -322,9 +334,16 @@ export default function (fepperUiInst, root_) {
         return;
       }
 
-      this.$orgs['#sg-code-container'] // Has class sg-view-container.
-        .dispatchAction('css', {bottom: -this.uiProps.sh + 'px'})
-        .dispatchAction('addClass', 'anim-ready');
+      // Flag that viewer is active.
+      this.codeActive = true;
+
+      this.$orgs['#sg-t-code'].dispatchAction('addClass', 'active');
+      this.$orgs['#sg-code-container'].dispatchAction('css', {bottom: -this.uiProps.sh + 'px'});
+
+      /* istanbul ignore if */
+      if (typeof getComputedStyle === 'function') {
+        this.$orgs['#sg-code-container'].dispatchAction('addClass', 'anim-ready');
+      }
 
       // Make sure the annotations viewer is off before showing code.
       this.annotationsViewer.closeAnnotations();
@@ -334,13 +353,11 @@ export default function (fepperUiInst, root_) {
 
       this.$orgs['#sg-viewport'][0].contentWindow.postMessage(objCodeToggle, this.uiProps.targetOrigin);
 
-      // Flag that viewer is active.
-      this.codeActive = true;
-
-      this.$orgs['#sg-t-code'].dispatchAction('addClass', 'active');
-
       // Move the code into view.
       this.slideCode(0);
+
+      // Add padding to bottom of viewport.
+      this.$orgs['#sg-vp-wrap'].dispatchAction('css', {paddingBottom: (this.uiProps.sh / 2) + 'px'});
     }
 
     scrollViewall() {

scripts/classes/patternlab-viewer.js

@@ -233,7 +233,6 @@ export default function (fepperUiInst, root) {
         );
         this.$orgs['#sg-nav-target'].dispatchAction('html', templateRenderedNav);
         this.$orgs['#sg-nav-target'].dispatchAction('removeClass', 'is-vishidden');
-        this.$orgs['.sg-acc-handle'].getState();
 
         // Render UI controls. "Ish" is apparently the pre-patternlab name for the viewport resizer.
         // http://bradfrost.com/blog/post/ish/

scripts/listeners/index.js

@@ -48,6 +48,16 @@ export default function (fepperUiInst) {
           fepperUiInst.uiFns.updateViewportWidth(Number(vpWidth));
         }
 
+        this.$orgs.window.on('resize', () => {
+          // Adjust viewport padding if annotations or code viewer is active.
+          if (fepperUiInst.annotationsViewer.annotationsActive || fepperUiInst.codeViewer.codeActive) {
+            this.$orgs['#sg-vp-wrap']
+              .dispatchAction('removeClass', 'anim-ready')
+              .dispatchAction('css', {paddingBottom: (fepperUiInst.uiProps.sh / 2) + 'px'})
+              .dispatchAction('addClass', 'anim-ready');
+          }
+        });
+
         this.$orgs.window.on('resize', fepperUiInst.uiFns.debounce(() => {
           // Update iframe width if in wholeMode.
           if (

scripts/pattern/annotations-viewer.js

@@ -90,6 +90,12 @@ function scrollViewall() {
     focusedEl.scrollIntoView({behavior: 'smooth', block: 'start', inline: 'nearest'});
   }
   else {
+    if (!sgPatternFirst) {
+      parent.postMessage({annotationsViewall: false, codeViewall: false, targetOrigin});
+
+      return;
+    }
+
     sgPatternFirst.querySelector('.sg-pattern-toggle-annotations').classList.add('focused');
     window.scrollTo({top: 0, behavior: 'smooth'});
   }
@@ -148,7 +154,7 @@ function receiveIframeMessage(event) {
             }
           }
 
-          if (!els) {
+          if (!els && sgPatternFirst) {
             els = sgPatternFirst.querySelectorAll(annotation.el);
           }
         }
@@ -262,7 +268,7 @@ window.addEventListener('resize', () => {
 
         if (viewall) {
           const sgPattern = d.getElementById(viewallFocus);
-          els = sgPattern.querySelectorAll(annotation.el);
+          els = sgPattern ? sgPattern.querySelectorAll(annotation.el) : [];
         }
 
         // Pattern.

scripts/pattern/code-viewer.js

@@ -86,7 +86,7 @@ function receiveIframeMessage(event) {
         });
 
         // If none of the toggles are focused, get the data from the first one.
-        if (!patternData) {
+        if (!patternData && sgPatterns[0]) {
           const patternDataEl = sgPatterns[0].querySelector('.sg-pattern-data');
 
           if (patternDataEl) {

scripts/pattern/html-scraper-ajax.js

@@ -187,7 +187,7 @@
             // Parse xhr.responseText as DOM. Create an object consumable by the html2json library.
             const parser = new DOMParser();
             const doc = parser.parseFromString(xhr.responseText, 'text/html');
-            const selection = doc.querySelectorAll(selectorName);
+            const selection = doc ? doc.querySelectorAll(selectorName) : [];
             const html2json = {node: 'root', child: []};
 
             for (let i = 0, l = selection.length; i < l; i++) {

scripts/requerio/organisms.js

@@ -48,6 +48,7 @@ export default {
   '#sg-tools-toggle': null,
   '#sg-view': null,
   '#sg-viewport': null,
+  '#sg-vp-wrap': null,
   '#typeahead': null,
   '.sg-acc-handle': null,
   '.sg-acc-panel': null,

test/e2e/listeners.js

@@ -10,9 +10,11 @@ describe('Listeners end-to-end tests', function () {
         browser.pause(100);
         $('#sg-t-annotations').click();
         browser.pause(700);
+        expect($('#sg-vp-wrap').getCSSProperty('padding-bottom').value).to.equal('258.5px');
         expect($('#sg-annotations-container').getCSSProperty('bottom').value).to.equal('0px');
         $('#sg-annotations-close-btn').click();
         browser.pause(700);
+        expect($('#sg-vp-wrap').getCSSProperty('padding-bottom').value).to.equal('0px');
         expect($('#sg-annotations-container').getCSSProperty('bottom').value).to.equal('-258.5px');
       });
     });
@@ -25,6 +27,7 @@ describe('Listeners end-to-end tests', function () {
       it('"ctrl+shift+a" toggles annotations viewer', function () {
         browser.keys(['Control', 'Shift', 'a']);
         browser.pause(700);
+        expect($('#sg-vp-wrap').getCSSProperty('padding-bottom').value).to.equal('258.5px');
         expect($('#sg-annotations-container').getCSSProperty('bottom').value).to.equal('0px');
         expect($('#sg-annotations').getHTML(false)).to.equal(`<div id="annotation-1">
 <h2>1. Navigation</h2>
@@ -38,6 +41,7 @@ menu anchor.</p>
 </div>`);
         browser.keys(['Control', 'Shift', 'a']);
         browser.pause(700);
+        expect($('#sg-vp-wrap').getCSSProperty('padding-bottom').value).to.equal('0px');
         expect($('#sg-annotations-container').getCSSProperty('bottom').value).to.equal('-258.5px');
       });
     });
@@ -54,9 +58,11 @@ menu anchor.</p>
         browser.pause(100);
         $('#sg-t-code').click();
         browser.pause(700);
+        expect($('#sg-vp-wrap').getCSSProperty('padding-bottom').value).to.equal('258.5px');
         expect($('#sg-code-container').getCSSProperty('bottom').value).to.equal('0px');
         $('#sg-code-close-btn').click();
         browser.pause(700);
+        expect($('#sg-vp-wrap').getCSSProperty('padding-bottom').value).to.equal('0px');
         expect($('#sg-code-container').getCSSProperty('bottom').value).to.equal('-258.5px');
       });
 
@@ -94,10 +100,12 @@ menu anchor.</p>
       it('"ctrl+shift+c" toggles code viewer', function () {
         browser.keys(['Control', 'Shift', 'c']);
         browser.pause(700);
+        expect($('#sg-vp-wrap').getCSSProperty('padding-bottom').value).to.equal('258.5px');
         expect($('#sg-code-container').getCSSProperty('bottom').value).to.equal('0px');
         expect($('#sg-code-fill').getText()).to.equal('{{> 03-templates/page }}');
         browser.keys(['Control', 'Shift', 'c']);
         browser.pause(700);
+        expect($('#sg-vp-wrap').getCSSProperty('padding-bottom').value).to.equal('0px');
         expect($('#sg-code-container').getCSSProperty('bottom').value).to.equal('-258.5px');
       });
 

test/e2e/pattern.js

@@ -11,6 +11,7 @@ describe('Pattern end-to-end tests', function () {
         $('#sg-pattern-toggle-annotations-components-region').click();
         browser.pause(700);
         browser.switchToParentFrame();
+        expect($('#sg-vp-wrap').getCSSProperty('padding-bottom').value).to.equal('258.5px');
         expect($('#sg-annotations-container').getCSSProperty('bottom').value).to.equal('0px');
         expect($('#sg-annotations').getHTML(false)).to.equal(`<div id="annotation-1">
 <h2>1. Navigation</h2>
@@ -26,6 +27,7 @@ menu anchor.</p>
         $('#sg-pattern-toggle-annotations-components-region').click();
         browser.pause(700);
         browser.switchToParentFrame();
+        expect($('#sg-vp-wrap').getCSSProperty('padding-bottom').value).to.equal('0px');
         expect($('#sg-annotations-container').getCSSProperty('bottom').value).to.equal('-258.5px');
       });
     });
@@ -40,6 +42,7 @@ menu anchor.</p>
         browser.keys(['Control', 'Shift', 'a']);
         browser.pause(700);
         browser.switchToParentFrame();
+        expect($('#sg-vp-wrap').getCSSProperty('padding-bottom').value).to.equal('258.5px');
         expect($('#sg-annotations-container').getCSSProperty('bottom').value).to.equal('0px');
         expect($('#sg-annotations').getHTML(false)).to.equal(`<div id="annotation-1">
 <h2>1. Navigation</h2>
@@ -55,6 +58,7 @@ menu anchor.</p>
         browser.keys(['Control', 'Shift', 'a']);
         browser.pause(700);
         browser.switchToParentFrame();
+        expect($('#sg-vp-wrap').getCSSProperty('padding-bottom').value).to.equal('0px');
         expect($('#sg-annotations-container').getCSSProperty('bottom').value).to.equal('-258.5px');
       });
     });
@@ -72,12 +76,14 @@ menu anchor.</p>
         $('#sg-pattern-toggle-code-components-region').click();
         browser.pause(700);
         browser.switchToParentFrame();
+        expect($('#sg-vp-wrap').getCSSProperty('padding-bottom').value).to.equal('258.5px');
         expect($('#sg-code-container').getCSSProperty('bottom').value).to.equal('0px');
         expect($('#sg-code-fill').getText()).to.equal('{{> 01-compounds/block }}');
         browser.switchToFrame($('#sg-viewport'));
         $('#sg-pattern-toggle-code-components-region').click();
         browser.pause(700);
         browser.switchToParentFrame();
+        expect($('#sg-vp-wrap').getCSSProperty('padding-bottom').value).to.equal('0px');
         expect($('#sg-code-container').getCSSProperty('bottom').value).to.equal('-258.5px');
       });
     });
@@ -92,12 +98,14 @@ menu anchor.</p>
         browser.keys(['Control', 'Shift', 'c']);
         browser.pause(700);
         browser.switchToParentFrame();
+        expect($('#sg-vp-wrap').getCSSProperty('padding-bottom').value).to.equal('258.5px');
         expect($('#sg-code-container').getCSSProperty('bottom').value).to.equal('0px');
         expect($('#sg-code-fill').getText()).to.equal('{{> 03-templates/page }}');
         browser.switchToFrame($('#sg-viewport'));
         browser.keys(['Control', 'Shift', 'c']);
         browser.pause(700);
         browser.switchToParentFrame();
+        expect($('#sg-vp-wrap').getCSSProperty('padding-bottom').value).to.equal('0px');
         expect($('#sg-code-container').getCSSProperty('bottom').value).to.equal('-258.5px');
       });
 

test/e2e/ui-compilation.js

@@ -338,6 +338,7 @@ describe('UI compilation of index page js', function () {
         $('#sg-t-annotations').click();
         browser.pause(700);
         expect($('#sg-t-code').getAttribute('class')).to.not.have.string('active');
+        expect($('#sg-vp-wrap').getCSSProperty('padding-bottom').value).to.equal('258.5px');
         expect($('#sg-code-container').getCSSProperty('bottom').value).to.equal('-258.5px');
         expect($('#sg-t-annotations').getAttribute('class')).to.have.string('active');
         expect($('#sg-annotations-container').getCSSProperty('bottom').value).to.equal('0px');
@@ -347,6 +348,7 @@ describe('UI compilation of index page js', function () {
         browser.pause(100);
         $('#sg-t-annotations').click();
         browser.pause(700);
+        expect($('#sg-vp-wrap').getCSSProperty('padding-bottom').value).to.equal('0px');
         expect($('#sg-annotations-container').getCSSProperty('bottom').value).to.equal('-258.5px');
         expect($('#sg-t-annotations').getAttribute('class')).to.not.have.string('active');
         expect($('#sg-view').getAttribute('class')).to.not.have.string('active');
@@ -370,6 +372,7 @@ describe('UI compilation of index page js', function () {
         $('#sg-t-code').click();
         browser.pause(700);
         expect($('#sg-t-annotations').getAttribute('class')).to.not.have.string('active');
+        expect($('#sg-vp-wrap').getCSSProperty('padding-bottom').value).to.equal('258.5px');
         expect($('#sg-annotations-container').getCSSProperty('bottom').value).to.equal('-258.5px');
         expect($('#sg-t-code').getAttribute('class')).to.have.string('active');
         expect($('#sg-code-container').getCSSProperty('bottom').value).to.equal('0px');
@@ -379,6 +382,7 @@ describe('UI compilation of index page js', function () {
         browser.pause(100);
         $('#sg-t-code').click();
         browser.pause(700);
+        expect($('#sg-vp-wrap').getCSSProperty('padding-bottom').value).to.equal('0px');
         expect($('#sg-code-container').getCSSProperty('bottom').value).to.equal('-258.5px');
         expect($('#sg-t-code').getAttribute('class')).to.not.have.string('active');
         expect($('#sg-view').getAttribute('class')).to.not.have.string('active');