feat : add resizer active class for mobiles WIP

o-rango · Dec 29, 2017 · a28f8b2 · a28f8b2
1 parent 9b37e45
commit a28f8b2
Show file tree

Hide file tree

Showing 3 changed files with 81 additions and 40 deletions.
diff --git a/src/components.d.ts b/src/components.d.ts
@@ -6,32 +6,31 @@
 
 
 import {
-  DemoBarComponent as ODemoBar
-} from './components/o-demo-bar/o-demo-bar';
+  DemoResizerComponent as ODemoResizer
+} from './components/o-demo-resizer/o-demo-resizer';
 
 declare global {
-  interface HTMLODemoBarElement extends ODemoBar, HTMLElement {
+  interface HTMLODemoResizerElement extends ODemoResizer, HTMLElement {
   }
-  var HTMLODemoBarElement: {
-    prototype: HTMLODemoBarElement;
-    new (): HTMLODemoBarElement;
+  var HTMLODemoResizerElement: {
+    prototype: HTMLODemoResizerElement;
+    new (): HTMLODemoResizerElement;
   };
   interface HTMLElementTagNameMap {
-    "o-demo-bar": HTMLODemoBarElement;
+    "o-demo-resizer": HTMLODemoResizerElement;
   }
   interface ElementTagNameMap {
-    "o-demo-bar": HTMLODemoBarElement;
+    "o-demo-resizer": HTMLODemoResizerElement;
   }
   namespace JSX {
     interface IntrinsicElements {
-      "o-demo-bar": JSXElements.ODemoBarAttributes;
+      "o-demo-resizer": JSXElements.ODemoResizerAttributes;
     }
   }
   namespace JSXElements {
-    export interface ODemoBarAttributes extends HTMLAttributes {
-      events?: string[];
-      name?: string;
-      pattern?: boolean;
+    export interface ODemoResizerAttributes extends HTMLAttributes {
+      size?: string;
+      viewport?: string;
     }
   }
 }

diff --git a/src/components/o-demo-bar/o-demo-bar.tsx b/src/components/o-demo-bar/o-demo-bar.tsx
@@ -1,4 +1,11 @@
-import { Component, Prop, Element, Listen, CssClassMap } from '@stencil/core';
+import {
+  Component,
+  Prop,
+  Element,
+  Listen,
+  CssClassMap,
+  State
+} from '@stencil/core';
 
 @Component({
   tag: 'o-demo-bar',
@@ -7,15 +14,19 @@ import { Component, Prop, Element, Listen, CssClassMap } from '@stencil/core';
 })
 export class DemoBarComponent {
   private demoCases: any;
-  private frameWSize: string = '1024';
   private casesOptions: any;
   private caseOptionSelected: number = 0;
+
   @Element() el: HTMLElement;
+
   @Prop() name: string;
-  @Prop() pattern: boolean = true;
   @Prop() events: string[];
+  @Prop({ mutable: true }) pattern: boolean = true;
+  @Prop({ mutable: true }) device: string = 'desktop';
+  @Prop({ mutable: true }) deviceSize: string = '1024';
 
   componentWillLoad() {
+    document.body.style.margin = '0';
     this.demoCases = this.el.querySelectorAll('o-demo-case');
     this.casesOptions = this._setSelect();
   }
@@ -26,8 +37,16 @@ export class DemoBarComponent {
 
   @Listen('toolbarButtonClicked')
   toolbarButtonClickedHandler(event: CustomEvent) {
-    console.log('Click button : ', event.detail);
-    //TODO Handle click on toolbar buttons event.detail
+    switch (event.detail) {
+      case 'grid-pattern':
+        this.pattern = !this.pattern;
+        break;
+      default:
+        this.device = event.detail;
+        this.deviceSize = event.detail === 'mobile' ? '412' : '1024';
+        this._setIframe();
+        break;
+    }
   }
 
   @Listen('selectedCaseChanged')
@@ -38,8 +57,8 @@ export class DemoBarComponent {
 
   @Listen('resizeButtonClicked')
   resizeButtonClickedHandler(event: CustomEvent) {
-    this.frameWSize = event.detail;
-    this.el.shadowRoot.querySelector('iframe').width = this.frameWSize;
+    this.deviceSize =  event.detail;
+    this.el.shadowRoot.querySelector('iframe').width = this.deviceSize;
   }
 
   _setSelect() {
@@ -62,13 +81,13 @@ export class DemoBarComponent {
     );
     const iframe = document.createElement('iframe');
     const frameH = Math.max(document.documentElement.clientHeight);
-    const frameW = this.frameWSize;
+    const frameW = this.deviceSize;
     let html = this.demoCases[this.caseOptionSelected].innerHTML;
     // Optional Script Includes tags
     html = `<html><head></head><body ontouchstart id="frameBody">${html}</body></html>`
       .replace(/<!--includes/g, '')
       .replace(/includes-->/g, '');
-    iframe.height = `${(frameH - 150).toString()}px`;
+    iframe.height = `${(frameH - 85).toString()}px`;
     iframe.width = `${frameW.toString()}px`;
     iframeContainer.appendChild(iframe);
     iframe.contentWindow.document.open();
@@ -78,18 +97,23 @@ export class DemoBarComponent {
 
   render() {
     const bgClasses: CssClassMap = {
-      pattern: this.pattern
+      pattern: this.pattern,
+      bgcolor: !this.pattern
     };
     return (
       <div id="demo-bar">
         {this.events ? <o-demo-snackbar events={this.events} /> : ''}
         <o-demo-bar-toolbar name={this.name}>
           <o-demo-bar-select slot="center" options={this.casesOptions} />
           <o-demo-bar-buttons slot="right" />
-          <o-demo-resizer size={this.frameWSize} slot="base" />
+          <o-demo-resizer
+            size={this.deviceSize}
+            viewport={this.device}
+            slot="base"
+          />
         </o-demo-bar-toolbar>
-        <div id="frame-wrap" class={bgClasses}>
-          <div id="iframeContainer" />
+        <div id="frame-wrap">
+          <div id="iframeContainer" class={bgClasses} />
         </div>
       </div>
     );

diff --git a/src/components/o-demo-resizer/o-demo-resizer.tsx b/src/components/o-demo-resizer/o-demo-resizer.tsx
@@ -13,11 +13,7 @@ import {
   shadow: true
 })
 export class DemoResizerComponent {
-  @Event() resizeButtonClicked: EventEmitter;
-  @Element() el: HTMLElement;
-  @Prop() size: string = '1024';
-
-  private viewports: any[] = [
+  private desktop: any[] = [
     { size: '1600', name: 'Window xlarge' },
     { size: '1440', name: 'Window xlarge' },
     { size: '1280', name: 'Window large' },
@@ -28,20 +24,42 @@ export class DemoResizerComponent {
     { size: '480', name: 'Window xsmall' }
   ];
 
-  handleClick(event: any) {
-    let evt = event.currentTarget.getAttribute('data-size');
-    this.setResizeValue(evt);
-  }
+  private mobile: any[] = [
+    { size: '1024', name: 'Tablet' },
+    { size: '720', name: 'Phablet' },
+    { size: '600', name: 'Mobile Landscape' },
+    { size: '412', name: 'Mobile Portrait medium' },
+    { size: '360', name: 'Mobile Portrait' },
+    { size: '280', name: 'Mobile Portrait xsmall' },
+  ];
+
+  @Event() resizeButtonClicked: EventEmitter;
+  @Element() el: HTMLElement;
+
+  // Component Props
+  @Prop({mutable : true}) size: string;
+  @Prop({mutable : true}) viewport: string;
 
   @PropWillChange('size')
   sizeChangeHandler(newSize: string) {
-    this.setResizeValue(newSize);
+    this._setResizeValue(newSize);
+  }
+
+  @PropWillChange('viewport')
+  deviceChangeHandler(newDevice: string) {
+    this._setResizeValue();
   }
 
   componentDidLoad() {
-    this.setResizeValue();
+    this._setResizeValue();
   }
-  setResizeValue(size?: string) {
+
+  handleClick(event: any) {
+    let evt = event.currentTarget.getAttribute('data-size');
+    this._setResizeValue(evt);
+  }
+
+  _setResizeValue(size?: string) {
     const frameW = size || this.size;
     const sizeList = Array.from(
       this.el.shadowRoot.querySelectorAll('.item-resize-toolbar')
@@ -57,16 +75,16 @@ export class DemoResizerComponent {
         e.classList.add('active');
       }
     });
-
     // Send event when triggered from outside
     size ? this.resizeButtonClicked.emit(frameW) : '';
   }
 
   render() {
+    const viewports = this.viewport === 'desktop' ? this.desktop : this.mobile;
     return (
       <div class="resize-toolbar-container">
         <div class="resize-toolbar">
-          {this.viewports.map(option => {
+          {viewports.map(option => {
             var cssSize = { width: `${option.size}px` };
             return (
               <div