frosted-glass - npm Package Compare versions

Comparing version 0.0.6 to 0.0.7

dist/collection/collection-manifest.json

@@ -14,2 +14,15 @@ {
       },
+      "slot": "hasSlots"
+    },
+    {
+      "tag": "frosted-glass-container",
+      "componentClass": "FrostedGlassContainer",
+      "componentPath": "components/frosted-glass-container/frosted-glass-container.js",
+      "styles": {
+        "$": {
+          "stylePaths": [
+            "components/frosted-glass-container/frosted-glass-container.scss"
+          ]
+        }
+      },
       "props": [
@@ -19,6 +32,2 @@ {
           "type": "string"
-        },
-        {
-          "name": "glassSelector",
-          "type": "string"
         }
@@ -46,3 +55,4 @@ ],
       "components": [
-        "frosted-glass"
+        "frosted-glass",
+        "frosted-glass-container"
       ]
@@ -49,0 +59,0 @@ }

dist/collection/components.d.ts

@@ -9,2 +9,33 @@ /**
 import {
+  FrostedGlassContainer as FrostedGlassContainer
+} from './components/frosted-glass-container/frosted-glass-container';
+
+declare global {
+  interface HTMLFrostedGlassContainerElement extends FrostedGlassContainer, HTMLElement {
+  }
+  var HTMLFrostedGlassContainerElement: {
+    prototype: HTMLFrostedGlassContainerElement;
+    new (): HTMLFrostedGlassContainerElement;
+  };
+  interface HTMLElementTagNameMap {
+    "frosted-glass-container": HTMLFrostedGlassContainerElement;
+  }
+  interface ElementTagNameMap {
+    "frosted-glass-container": HTMLFrostedGlassContainerElement;
+  }
+  namespace JSX {
+    interface IntrinsicElements {
+      "frosted-glass-container": JSXElements.FrostedGlassContainerAttributes;
+    }
+  }
+  namespace JSXElements {
+    export interface FrostedGlassContainerAttributes extends HTMLAttributes {
+      
+        blurAmount?: string
+    }
+  }
+}
+
+
+import {
   FrostedGlass as FrostedGlass
@@ -34,4 +65,2 @@ } from './components/frosted-glass/frosted-glass';
       
-        glassSelector?: string,
-        blurAmount?: string
     }
@@ -38,0 +67,0 @@ }

dist/collection/components/frosted-glass/frosted-glass.d.ts

 export declare class FrostedGlass {
-    glassSelector: string;
-    blurAmount: string;
-    updateBackground(): void;
-    blurAmountChangeHandler(newValue: string): void;
-    el: HTMLElement;
-    private directions;
-    private topOffset;
-    private blurContainer;
-    private blurContent;
-    private ticking;
-    private latestKnownScrollY;
-    private glassElement;
-    componentDidLoad(): void;
-    componentDidUnload(): void;
-    onResize(): void;
-    onScroll(): void;
     render(): JSX.Element;
-    private createNewElements();
-    private removeElements();
-    private removeListeners();
-    private addBaseStyles();
-    private updateFilter(blurAmount);
-    private initListeners();
-    private resizeUpdate();
-    private scrollUpdate();
-    private requestTick(functionName);
-    private backgroundUpdate();
 }

dist/collection/components/frosted-glass/frosted-glass.js

 import { } from '@stencil/core';
 export class FrostedGlass {
-    constructor() {
-        this.blurAmount = '5px';
-        this.directions = ['top', 'left', 'right'];
-        this.topOffset = 0;
-        this.ticking = {};
-    }
-    updateBackground() {
-        this.requestTick('backgroundUpdate');
-    }
-    blurAmountChangeHandler(newValue) {
-        this.updateFilter(newValue);
-    }
-    componentDidLoad() {
-        this.glassElement = this.el.querySelector(this.glassSelector);
-        this.createNewElements();
-        this.addBaseStyles();
-        this.initListeners();
-    }
-    componentDidUnload() {
-        this.removeElements();
-        this.removeListeners();
-    }
-    onResize() {
-        this.requestTick('resizeUpdate');
-    }
-    onScroll() {
-        this.latestKnownScrollY = window.scrollY;
-        this.requestTick('scrollUpdate');
-    }
     render() {
         return (h("slot", null));
     }
-    createNewElements() {
-        this.blurContainer = document.createElement('div');
-        this.blurContent = document.createElement('div');
-        this.blurContainer.appendChild(this.blurContent);
-        document.querySelector('body').appendChild(this.blurContainer);
-        this.requestTick('backgroundUpdate');
-    }
-    removeElements() {
-        this.blurContainer.remove();
-    }
-    removeListeners() {
-        window.removeEventListener('scroll', this.onScroll);
-        window.removeEventListener('resize', this.onResize);
-    }
-    addBaseStyles() {
-        Object.assign(this.blurContainer.style, {
-            overflow: 'hidden',
-            transform: 'translate3d(0, 0, 0)'
-        });
-        this.blurContent.style.position = 'absolute';
-        this.updateFilter(this.blurAmount);
-    }
-    updateFilter(blurAmount) {
-        this.blurContent.style.filter = `blur(${blurAmount})`;
-    }
-    initListeners() {
-        if (this.glassSelector && this.glassElement && window.getComputedStyle(this.glassElement).position === 'fixed') {
-            this.onScroll = this.onScroll.bind(this);
-            window.addEventListener('scroll', this.onScroll);
-        }
-        this.onResize = this.onResize.bind(this);
-        window.addEventListener('resize', this.onResize);
-        this.onResize();
-        this.onScroll();
-    }
-    // @ts-ignore
-    resizeUpdate() {
-        const elementStyle = window.getComputedStyle(this.glassElement);
-        const appStyle = window.getComputedStyle(this.el.firstElementChild);
-        this.topOffset = parseInt(elementStyle.top, 10);
-        ['position', 'height', ...this.directions].forEach((item) => {
-            this.blurContainer.style[item] = elementStyle[item];
-        });
-        this.directions.forEach((item) => { this.blurContent.style[item] = `-${elementStyle[item]}`; });
-        this.blurContent.style.width = appStyle.width;
-        this.scrollUpdate();
-        this.ticking.resizeUpdate = false;
-    }
-    scrollUpdate() {
-        const scrollOffset = this.latestKnownScrollY + this.topOffset;
-        this.blurContent.style.top = `-${scrollOffset}px`;
-        this.ticking.scrollUpdate = false;
-    }
-    requestTick(functionName) {
-        if (!this.ticking[functionName]) {
-            requestAnimationFrame(this[functionName].bind(this));
-        }
-        this.ticking[functionName] = true;
-    }
-    // @ts-ignore
-    backgroundUpdate() {
-        if (!this.glassSelector) {
-            return;
-        }
-        this.blurContent.innerHTML = this.el.innerHTML;
-        const glassClone = this.blurContent.querySelector(this.glassSelector);
-        if (glassClone) {
-            glassClone.remove();
-        }
-        this.ticking.backgroundUpdate = false;
-    }
 }

dist/frostedglass.js

@@ -1,1 +0,34 @@
-!function(t,e,s,r,i,a,n,l,o,d){"use strict";for((t[s]=t[s]||{}).components=l=l||[],(d=l.filter(function(t){return t[2]}).map(function(t){return t[0]})).length&&((o=e.createElement("style")).innerHTML=d.join()+"{visibility:hidden}",o.setAttribute("data-visibility",""),e.head.insertBefore(o,e.head.firstChild)),s=s.toLowerCase(),d=(o=e.scripts).length-1;d>=0;d--)if(o[d].src&&o[d].src.split("/").pop()===s+".js"){r=o[d].src.replace(s+".js",s+"/");break}(o=e.createElement("script")).src=r+("noModule"in o&&t.customElements&&t.fetch?e.documentElement.hasAttribute("data-ssr")?"frostedglass.akk64pig.js":"frostedglass.stetvy8x.js":"frostedglass.yprc2qik.js"),o.setAttribute("data-path",r),o.setAttribute("data-namespace",s),e.head.appendChild(o)}(window,document,"frostedglass","/build/frostedglass/",0,0,0,[["frosted-glass",["gmcuuxrm","s95m5ksg"],1,[["blurAmount",1,1,2],["el",7],["glassSelector",1,1,2],["updateBackground",6]],0,1]]);
+/*! Built with http://stenciljs.com */
+(function (window, document, appNamespace, publicPath, appCore, appCoreSsr, appCorePolyfilled, components, x, i) {
+    'use strict';
+    // create global namespace if it doesn't already exist
+    (window[appNamespace] = window[appNamespace] || {}).components = components = components || [];
+    // auto hide components until they been fully hydrated
+    // reusing the "x" and "i" variables from the args for funzies
+    // note: filter and map must stay es5 and must not use arrow functions
+    i = components.filter(function (c) { return c[2]; }).map(function (c) { return c[0]; });
+    if (i.length) {
+        x = document.createElement('style');
+        x.innerHTML = i.join() + '{visibility:hidden}';
+        x.setAttribute('data-visibility', '');
+        document.head.insertBefore(x, document.head.firstChild);
+    }
+    // get this current script
+    appNamespace = appNamespace.toLowerCase();
+    x = document.scripts;
+    for (i = x.length - 1; i >= 0; i--) {
+        if (x[i].src && x[i].src.split('/').pop() === appNamespace + '.js') {
+            publicPath = x[i].src.replace(appNamespace + '.js', appNamespace + '/');
+            break;
+        }
+    }
+    // request the core this browser needs
+    // test for native support of custom elements and fetch
+    // if either of those are not supported, then use the core w/ polyfills
+    // also check if the page was build with ssr or not
+    x = document.createElement('script');
+    x.src = publicPath + (('noModule' in x && window.customElements && window.fetch) ? (document.documentElement.hasAttribute('data-ssr') ? appCoreSsr : appCore) : appCorePolyfilled);
+    x.setAttribute('data-path', publicPath);
+    x.setAttribute('data-namespace', appNamespace);
+    document.head.appendChild(x);
+})(window, document, "frostedglass","/build/frostedglass/","frostedglass.core.js","frostedglass.core.ssr.js","es5-build-disabled.js",[["frosted-glass",["frosted-glass",null],1,0,0,1],["frosted-glass-container",["frosted-glass",null],1,[["blurAmount",1,1,2],["el",7],["updateBackground",6]],0,1]]);

dist/frostedglass.registry.json

@@ -7,7 +7,18 @@ {
       [
-        "gmcuuxrm",
-        "s95m5ksg"
+        "frosted-glass",
+        null
       ],
       1,
+      0,
+      0,
+      1
+    ],
+    [
+      "frosted-glass-container",
       [
+        "frosted-glass",
+        null
+      ],
+      1,
+      [
         [
@@ -24,8 +35,2 @@ "blurAmount",
         [
-          "glassSelector",
-          1,
-          1,
-          2
-        ],
-        [
           "updateBackground",
@@ -39,5 +44,5 @@ 6
   ],
-  "core": "frostedglass.stetvy8x.js",
-  "coreSsr": "frostedglass.akk64pig.js",
-  "corePolyfilled": "frostedglass.yprc2qik.js"
+  "core": "frostedglass.core.js",
+  "coreSsr": "frostedglass.core.ssr.js",
+  "corePolyfilled": "es5-build-disabled.js"
 }

package.json

 {
   "name": "frosted-glass",
-  "version": "0.0.6",
+  "version": "0.0.7",
   "description": "Frosted Glass",
@@ -5,0 +5,0 @@ "main": "dist/collection/index.js",

readme.md

@@ -16,4 +16,16 @@ # Frosted Glass [![npm version](https://badge.fury.io/js/frosted-glass.svg)](https://badge.fury.io/js/frosted-glass)
 
+```html
+<frosted-glass-container>
+  <div id="app">
+    <h1>Welcome!</h1>
+    <frosted-glass>
+      <div class="nav-content">Nav content</div>
+    </frosted-glass>
+  </div>
+</frosted-glass-container>
+```
+
+
 ## License
 
 frosted-glass is licensed under the MIT Open Source license. For more information, see the [LICENSE](LICENSE) file in this repository.

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Uses eval

Supply chain risk

Package uses eval() which is a dangerous function. This prevents the code from running in certain environments and increases the risk that the code may contain exploits or malicious behavior.

Found 1 instance in 1 package

Dynamic require

Supply chain risk

Dynamic require can indicate the package is performing dangerous or unsafe dynamic code execution.

Found 1 instance in 1 package

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

159167

increased by72.93%

Number of package files

19

increased by11.76%

Lines of code

3546

increased by495.97%

Number of low quality alerts

1

decreased by-50%

Number of lines in readme file

30

increased by66.67%

Number of low supply chain risk alerts

0

decreased by-100%

Number of medium supply chain risk alerts

1

decreased by-50%

No dependency changes