feat: added optional resizable attribute for preview

exadel-inc · Dec 20, 2022 · de49cf0 · de49cf0
1 parent 49d07b1
commit de49cf0
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 3 deletions.
diff --git a/pages/views/examples/example/form.njk b/pages/views/examples/example/form.njk
@@ -21,7 +21,7 @@ title: Example with form
       <input type="submit" value="Send">
     </form>
   </script>
-  <uip-preview class="centered-content"></uip-preview>
+  <uip-preview class="centered-content" resizable></uip-preview>
   <uip-settings target=".demo-form">
     <uip-bool-setting label="Email validation" target="#email" mode="append" attribute="class" value="validation-input"></uip-bool-setting>
   </uip-settings>

diff --git a/pages/views/examples/example/playground.njk b/pages/views/examples/example/playground.njk
@@ -44,7 +44,7 @@ title: Example with playground
       <div class="user-card aqua-user">Marina</div>
     </div>
   </script>
-  <uip-preview></uip-preview>
+  <uip-preview resizable></uip-preview>
   <uip-settings target=".user-list">
   </uip-settings>
   <uip-editor></uip-editor>

diff --git a/src/core/preview/preview.less b/src/core/preview/preview.less
@@ -7,7 +7,10 @@
     max-width: 100%;
     max-height: 100%;
     overflow: auto;
-    resize: both;
+
+    &.resizable {
+      resize: both;
+    }
   }
 
   &.centered-content {

diff --git a/src/core/preview/preview.ts b/src/core/preview/preview.ts
@@ -7,6 +7,7 @@ import {UIPPlugin} from '../base/plugin';
  */
 export class UIPPreview extends UIPPlugin {
   static is = 'uip-preview';
+  static observedAttributes: string[] = ['resizable'];
 
   @bind
   protected _onRootStateChange(): void {
@@ -19,4 +20,18 @@ export class UIPPreview extends UIPPlugin {
     if (this.$inner.parentElement === this) this.removeChild(this.$inner);
     super.disconnectedCallback();
   }
+
+  protected attributeChangedCallback(attrName: string, oldVal: string, newVal: string): void {
+    if (attrName === 'resizable' && newVal === null) {
+      this.clearInlineSize();
+      this.$inner.classList.remove('resizable');
+    } else {
+      this.$inner.classList.add('resizable');
+    }
+  }
+
+  protected clearInlineSize() {
+    this.$inner.style.removeProperty('height');
+    this.$inner.style.removeProperty('width');
+  }
 }