add stylesheet with media query to handle mobile devices

officert · Jul 16, 2018 · 7436f21 · 7436f21
1 parent 9ba1749
commit 7436f21
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 1 deletion.
diff --git a/src/components/SlideoutPanel/index.vue b/src/components/SlideoutPanel/index.vue
@@ -43,6 +43,8 @@ const vm = {
 
       const index = this.panels.indexOf(currentPanel);
 
+      this.removePanelStylesheet(currentPanel);
+
       this.panels.splice(index, 1);
 
       if (!this.panels || this.panels.length === 0) {
@@ -58,12 +60,50 @@ const vm = {
       else if (!panel.width.endsWith || !panel.width.endsWith('px')) panel.styles.width = `${panel.width}px`;
       else panel.styles.width = panel.width;
 
+      panel.cssId = `slide-out-panel-${panel.id}`;
+      panel.stylesheetId = `slide-out-panel-styles-${panel.id}`;
+
+      this.createPanelStylesheet(panel);
+
       this.panels.push(panel);
 
       if (!this.panels || this.panels.length === 1) {
         this.onFirstPanelCreated();
       }
     },
+    createPanelStylesheet(panel) {
+      const head = document.head || document.getElementsByTagName('head')[0];
+      const style = document.createElement('style');
+      style.type = 'text/css';
+
+      const css = `@media screen and (max-width:${panel.styles.width}) {
+        #${panel.cssId} {
+          width: 100% !important;
+        }
+      }`;
+
+      if (style.styleSheet) {
+        // This is required for IE8 and below.
+        style.styleSheet.cssText = css;
+      } else {
+        style.appendChild(document.createTextNode(css));
+      }
+
+      style.id = panel.stylesheetId;
+
+      head.appendChild(style);
+    },
+    removePanelStylesheet(panel) {
+      const stylesheetElements = document.querySelectorAll('link[rel=stylesheet]');
+
+      const stylesheet = document.getElementById(panel.stylesheetId);
+
+      stylesheetElements.forEach(sheet => {
+        try {
+          sheet.parentNode.removeChild(stylesheet);
+        } catch (err) {}
+      });
+    },
     onFirstPanelCreated() {
       this.visible = true;
 

diff --git a/src/components/SlideoutPanel/template.html b/src/components/SlideoutPanel/template.html
@@ -3,7 +3,7 @@
     <div class="slideout-panel-bg" v-on:click="onBgClicked">
     </div>
     <transition-group class="slideout-wrapper" tag="div" name="slideIn">
-      <div class="slideout" :style="panel.styles" :class="getPanelClasses(panel)" v-if="panelsVisible" v-for="panel in panels" @click.stop :key="panel.id">
+      <div v-bind:id="panel.cssId" class="slideout" :style="panel.styles" :class="getPanelClasses(panel)" v-if="panelsVisible" v-for="panel in panels" @click.stop :key="panel.id">
         <component :is="panel.component" v-bind="panel.props || {}" v-on:closePanel="onCloseComponent"></component>
       </div>
     </transition-group>