Moved is-web-kit to vi-scroller

2sky · Jul 22, 2016 · 09e1813 · 09e1813
1 parent 12aaa44
commit 09e1813
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 31 deletions.
diff --git a/src/WebComponents/App/app.ts b/src/WebComponents/App/app.ts
@@ -205,11 +205,6 @@ namespace Vidyano.WebComponents {
                 type: String,
                 reflectToAttribute: true,
                 observer: "_cookiePrefixChanged"
-            },
-            isWebKit: {
-                type: Boolean,
-                reflectToAttribute: true,
-                computed: "_computeIsWebKit(isAttached)"
             }
         },
         observers: [
@@ -256,7 +251,6 @@ namespace Vidyano.WebComponents {
         label: string;
         keys: string;
         isTracking: boolean;
-        isWebKit: boolean;
 
         private _setConfiguration: (config: AppConfig) => void;
         private _setInitializing: (init: boolean) => void;
@@ -270,11 +264,6 @@ namespace Vidyano.WebComponents {
         attached() {
             super.attached();
 
-            if (!this.isWebKit) {
-                this.customStyle["--theme-scrollbar-width"] = `${scrollbarWidth()}px`;
-                this.updateStyles();
-            }
-
             if (!this.label)
                 this.label = this.title;
 
@@ -722,10 +711,6 @@ namespace Vidyano.WebComponents {
             });
         }
 
-        private _computeIsWebKit(): boolean {
-            return "WebkitAppearance" in document.documentElement.style;
-        }
-
         private _resolveDependencies(hasManagement: boolean) {
             this.importComponent("PopupMenu");
         }

diff --git a/src/WebComponents/Scroller/scroller.scss b/src/WebComponents/Scroller/scroller.scss
@@ -233,24 +233,24 @@
     &[scroll-bottom-shadow] > .scroll-shadow.bottom {
         transform: translateY(var(--theme-h2));
     }
-}
 
-:host-context(vi-app[is-web-kit]) {
-    > #wrapper::-webkit-scrollbar {
-        display: none;
-    }
+    &[is-web-kit] {
+        > #wrapper::-webkit-scrollbar {
+            display: none;
+        }
 
-    // Edge also reports being webkit
-    > #wrapper {
-        -ms-overflow-style: none;
+        // Edge also reports being webkit
+        > #wrapper {
+            -ms-overflow-style: none;
+        }
     }
-}
 
-:host-context(vi-app:not([is-web-kit])) {
-    > #wrapper {
-        margin-right: calc(var(--theme-scrollbar-width) * -1);
-        margin-bottom: calc(var(--theme-scrollbar-width) * -1);
-        padding-right: var(--theme-scrollbar-width);
-        padding-bottom: var(--theme-scrollbar-width);
+    &not([is-web-kit]) {
+        > #wrapper {
+            margin-right: calc(var(--theme-scrollbar-width) * -1);
+            margin-bottom: calc(var(--theme-scrollbar-width) * -1);
+            padding-right: var(--theme-scrollbar-width);
+            padding-bottom: var(--theme-scrollbar-width);
+        }
     }
 }
diff --git a/src/WebComponents/Scroller/scroller.ts b/src/WebComponents/Scroller/scroller.ts
@@ -107,6 +107,11 @@
                 type: Boolean,
                 readOnly: true,
                 reflectToAttribute: true
+            },
+            isWebKit: {
+                type: Boolean,
+                reflectToAttribute: true,
+                computed: "_computeIsWebKit(isAttached)"
             }
         },
         forwardObservers: [
@@ -146,6 +151,7 @@
         verticalScrollOffset: number;
         forceScrollbars: boolean;
         noScrollShadow: boolean;
+        isWebKit: boolean;
 
         private _setAtTop: (atTop: boolean) => void;
         private _setOuterWidth: (width: number) => void;
@@ -158,6 +164,15 @@
         private _setScrollBottomShadow: (val: boolean) => void;
         private _setHiddenScrollbars: (val: boolean) => void;
 
+        attached() {
+            super.attached();
+
+            if (!this.isWebKit) {
+                this.customStyle["--theme-scrollbar-width"] = `${scrollbarWidth()}px`;
+                this.updateStyles();
+            }
+        }
+
         get scroller(): HTMLElement {
             // NOTE: This property is used by other components to determine the scrolling parent.
             return this.$["wrapper"];
@@ -195,7 +210,7 @@
         }
 
         private _outerSizeChanged(e: Event, detail: { width: number; height: number }) {
-            this._setHiddenScrollbars(!this.app.isWebKit && !parseInt(this.getComputedStyleValue("--theme-scrollbar-width")));
+            this._setHiddenScrollbars(!this.isWebKit && !parseInt(this.getComputedStyleValue("--theme-scrollbar-width")));
 
             this._setOuterWidth(detail.width);
             this._setOuterHeight(detail.height);
@@ -379,5 +394,9 @@
                 e.stopPropagation();
             }
         }
+
+        private _computeIsWebKit(): boolean {
+            return "WebkitAppearance" in document.documentElement.style;
+        }
     }
 }