#1167: Add em value edit

- Revertet overflow-x value previously setted because it causes an error for the resize bar

Author: JosefBredereck

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

@@ -21,7 +21,7 @@ class ViewportSize extends BaseLitComponent {
 
   constructor() {
     super();
-    this.state = { inputPixelValue: '' };
+    this.state = { inputPixelValue: 0, inputEmValue: 0 };
   }
 
   connectedCallback() {
@@ -44,11 +44,12 @@ class ViewportSize extends BaseLitComponent {
   setPxEm(state) {
     if (state.app.viewportPx !== this.px) {
       this.px = round(state.app.viewportPx, 0);
-      this.setState({ inputPixelValue: this.px });
+      this.setState({ inputPixelValue: this.px }, () => {});
     }
 
     if (round(state.app.viewportEm, 1) !== this.em) {
       this.em = round(state.app.viewportEm, 1);
+      this.setState({ inputEmValue: this.em }, () => {});
     }
   }
 
@@ -62,39 +63,140 @@ class ViewportSize extends BaseLitComponent {
     }
   }
 
-  handlePixelUpdate(e) {
-    // Prevent inserting letters or symbols
-    if (e.key.match(/\D+/g) && !(e.charCode === 13 || e.keyCode === 13)) {
+  handlePixelUpdatePress(e) {
+    const nRegex = /\D+/g;
+
+    if (e.key.match(nRegex)) {
+      console.log(e);
+
+      // Prevent inserting letters or symbols
       e.preventDefault();
     } else {
-      this.setState({ inputPixelValue: e.target.value.replace(/\D+/g, '') });
+      this.setState(
+        { inputPixelValue: e.target.value.replace(nRegex, '') },
+        () => {}
+      );
     }
   }
 
-  handleSubmit(event) {
-    event.preventDefault();
-    this.iframe.sizeiframe(this.state.inputPixelValue, true);
+  handlePixelUpdateUp(e) {
+    const nRegex = /\D+/g;
+
+    if (e.key === 'Enter') {
+      event.preventDefault();
+      this.iframe.sizeiframe(this.state.inputPixelValue, true);
+    } else if (e.key === 'ArrowUp') {
+      this.setState(
+        {
+          inputPixelValue:
+            Number(e.target.value.replace(nRegex, '')) + (e.shiftKey ? 10 : 1),
+        },
+        () => {}
+      );
+      this.iframe.sizeiframe(this.state.inputPixelValue, true);
+    } else if (e.key === 'ArrowDown') {
+      this.setState(
+        {
+          inputPixelValue:
+            Number(e.target.value.replace(nRegex, '')) - (e.shiftKey ? 10 : 1),
+        },
+        () => {}
+      );
+      this.iframe.sizeiframe(this.state.inputPixelValue, true);
+    }
   }
 
   handlePixelBlur(e) {
-    this.setState({ inputPixelValue: this.px });
+    this.setState({ inputPixelValue: this.px }, () => {});
     e.target.value = this.state.inputPixelValue;
   }
 
+  handleEmUpdatePress(e) {
+    const fpRegex = /[^0-9\.]+/g;
+
+    if (e.key.match(fpRegex)) {
+      console.log(e);
+
+      // Prevent inserting letters or symbols
+      e.preventDefault();
+    } else {
+      this.setState(
+        { inputEmValue: e.target.value.replace(fpRegex, '') },
+        () => {}
+      );
+    }
+  }
+
+  handleEmUpdateUp(e) {
+    const fpRegex = /[^0-9\.]+/g;
+
+    if (e.key === 'Enter') {
+      event.preventDefault();
+      this.iframe.sizeiframe(this.toPixelValue(), true);
+    } else if (e.key === 'ArrowUp') {
+      this.setState(
+        {
+          inputEmValue: round(
+            Number(e.target.value.replace(fpRegex, '')) +
+              (e.shiftKey ? 0.5 : 0.1),
+            1
+          ),
+        },
+        () => {}
+      );
+      this.iframe.sizeiframe(this.toPixelValue(), true);
+    } else if (e.key === 'ArrowDown') {
+      this.setState(
+        {
+          inputEmValue: round(
+            Number(e.target.value.replace(fpRegex, '')) -
+              (e.shiftKey ? 0.5 : 0.1),
+            1
+          ),
+        },
+        () => {}
+      );
+      this.iframe.sizeiframe(this.toPixelValue(), true);
+    }
+  }
+
+  handleEmBlur(e) {
+    this.setState({ inputEmValue: this.em }, () => {});
+    e.target.value = this.state.inputEmValue;
+  }
+
+  toPixelValue() {
+    return Math.floor(this.state.inputEmValue * this.iframe.bodySize);
+  }
+
   render() {
     if (!window.__PRERENDER_INJECTED) {
       return html`
         <form class="pl-c-viewport-size" @submit=${this.handleSubmit}>
-          <label for="pl-viewport-width" class="pl-c-viewport-size__label">
+          <label
+            for="pl-viewport-pixel-width"
+            class="pl-c-viewport-size__label"
+          >
             <input
               class="pl-c-viewport-size__input pl-c-viewport-size__input-action"
-              id="pl-viewport-width"
+              id="pl-viewport-pixel-width"
               .value="${this.state.inputPixelValue}"
-              @keypress=${this.handlePixelUpdate}
+              @keypress=${this.handlePixelUpdatePress}
+              @keydown=${this.handlePixelUpdateUp}
               @blur=${this.handlePixelBlur}
-            />px&nbsp;/&nbsp;<span class="pl-c-viewport-size__input"
-              >${this.em}em</span
-            >
+            />px</label
+          >&nbsp;/&nbsp;<label
+            for="pl-viewport-em-width"
+            class="pl-c-viewport-size__label"
+          >
+            <input
+              class="pl-c-viewport-size__input pl-c-viewport-size__input-action"
+              id="pl-viewport-em-width"
+              .value="${this.state.inputEmValue}"
+              @keypress=${this.handleEmUpdatePress}
+              @keydown=${this.handleEmUpdateUp}
+              @blur=${this.handleEmBlur}
+            />em
           </label>
         </form>
       `;

packages/uikit-workshop/src/scripts/lit-components/pl-viewport-size/pl-viewport-size.scss

@@ -45,7 +45,7 @@ pl-viewport-size {
 }
 
 .pl-c-viewport-size__input-action {
-  max-width: 35px;
+  max-width: 40px;
   font-size: inherit;
   pointer-events: auto;
 

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

@@ -458,16 +458,22 @@ class IFrame extends BaseLitComponent {
     // add the mouse move event and capture data. also update the viewport width
     this.iframeCover.addEventListener('mousemove', handleIframeCoverResize);
 
-    document.body.addEventListener('mouseup', function() {
-      self.iframeCover.removeEventListener(
-        'mousemove',
-        handleIframeCoverResize
-      );
-      self.iframeCover.style.display = 'none';
-      self
-        .querySelector('.pl-js-resize-handle')
-        .classList.remove('is-resizing');
-    });
+    document.body.addEventListener(
+      'mouseup',
+      function() {
+        self.iframeCover.removeEventListener(
+          'mousemove',
+          handleIframeCoverResize
+        );
+        self.iframeCover.style.display = 'none';
+        self
+          .querySelector('.pl-js-resize-handle')
+          .classList.remove('is-resizing');
+      },
+      {
+        once: true,
+      }
+    );
 
     return false;
   }

packages/uikit-workshop/src/scripts/lit-components/pl-viewport/pl-viewport.scss

@@ -39,8 +39,6 @@ pl-iframe {
   z-index: 0;
   flex-grow: 1;
   transition: height 0.3s ease;
-  // Prevent mobile overflow of pl-c-viewport__resizer-handle
-  overflow-x: hidden;
 
   // @supports (position: sticky) {
   //   top: 0;
@@ -237,7 +235,7 @@ pl-iframe {
   flex-direction: column;
   max-width: 100vw;
   position: relative; // used for absolute positioning if position sticky isn't supported
-
+  
   .pl-c-body--theme-sidebar & {
     @media all and (min-width: $pl-bp-med) {
       max-width: calc(100vw - #{$pl-sidebar-width});