@lrnwebcomponents/responsive-utility - npm Package Compare versions

Comparing version 2.1.1 to 2.1.2

gulpfile.js

@@ -79,10 +79,3 @@ const gulp = require("gulp");
 });
-// run polymer build to generate everything fully
-gulp.task("build", () => {
-  const spawn = require("child_process").spawn;
-  let child = spawn("polymer", ["build"]);
-  return child.on("close", function(code) {
-    console.log("child process exited with code " + code);
-  });
-});
+
 // run polymer analyze to generate documentation
@@ -104,3 +97,3 @@ gulp.task("analyze", () => {
   gulp
-    .src("./build/es6/" + packageJson.wcfactory.elementName + ".js")
+    .src("./" + packageJson.wcfactory.elementName + ".js")
     .pipe(
@@ -112,10 +105,3 @@ rename({
     .pipe(gulp.dest("./"));
-  gulp
-    .src("./build/es5-amd/" + packageJson.wcfactory.elementName + ".js")
-    .pipe(
-      rename({
-        suffix: ".amd"
-      })
-    )
-    .pipe(gulp.dest("./"));
+
   return gulp
@@ -151,5 +137,2 @@ .src("./" + packageJson.wcfactory.elementName + ".js")
 
-gulp.task(
-  "default",
-  gulp.series("merge", "analyze", "build", "compile", "sourcemaps")
-);
+gulp.task("default", gulp.series("merge", "analyze", "compile", "sourcemaps"));

package.json

@@ -14,3 +14,3 @@ {
   },
-  "version": "2.1.1",
+  "version": "2.1.2",
   "description": "Automated conversion of responsive-utility/",
@@ -24,3 +24,2 @@ "repository": {
   "umd": "responsive-utility.umd.js",
-  "amd": "responsive-utility.amd.js",
   "scripts": {
@@ -45,3 +44,3 @@ "test": "../../node_modules/.bin/wct --configFile ../../wct.conf.json node_modules/@lrnwebcomponents/responsive-utility/test/",
     "@lrnwebcomponents/deduping-fix": "^2.1.1",
-    "@lrnwebcomponents/storybook-utilities": "^2.1.1",
+    "@lrnwebcomponents/storybook-utilities": "^2.1.2",
     "@polymer/iron-component-page": "github:PolymerElements/iron-component-page",
@@ -65,3 +64,3 @@ "@polymer/iron-demo-helpers": "^3.1.0",
   ],
-  "gitHead": "377805ee041d6205232182b01f8e05a177ef3bf7"
+  "gitHead": "d857f1d834ec0bd10fee57ad11f60eb37416db07"
 }

responsive-utility.es6.js

@@ -1,2 +0,14 @@
-import{html,PolymerElement}from"./node_modules/@polymer/polymer/polymer-element.js";import{afterNextRender}from"./node_modules/@polymer/polymer/lib/utils/render-status.js";import*as async from"./node_modules/@polymer/polymer/lib/utils/async.js";import{IronResizableBehavior}from"./node_modules/@polymer/iron-resizable-behavior/iron-resizable-behavior.js";import{mixinBehaviors}from"./node_modules/@polymer/polymer/lib/legacy/class.js";window.ResponsiveUtility={};window.ResponsiveUtility.instance=null;class ResponsiveUtility extends mixinBehaviors([IronResizableBehavior],PolymerElement){static get template(){return html`
+import { html, PolymerElement } from "@polymer/polymer/polymer-element.js";
+import { afterNextRender } from "@polymer/polymer/lib/utils/render-status.js";
+import * as async from "@polymer/polymer/lib/utils/async.js";
+import { IronResizableBehavior } from "@polymer/iron-resizable-behavior/iron-resizable-behavior.js";
+import { mixinBehaviors } from "@polymer/polymer/lib/legacy/class.js";
+window.ResponsiveUtility = {};
+window.ResponsiveUtility.instance = null;
+class ResponsiveUtility extends mixinBehaviors(
+  [IronResizableBehavior],
+  PolymerElement
+) {
+  static get template() {
+    return html`
       <style>
@@ -8,5 +20,81 @@ :host {
       <slot></slot>
-    `}static get tag(){return"responsive-utility"}static get properties(){let props={/**
+    `;
+  }
+  static get tag() {
+    return "responsive-utility";
+  }
+
+  static get properties() {
+    let props = {
+      /**
        * Stores
-       */details:{type:Array,value:[]}};if(super.properties){props=Object.assign(props,super.properties)}return props}connectedCallback(){super.connectedCallback();afterNextRender(this,function(){this.addEventListener("iron-resize",this._onIronResize.bind(this))})}disconnectedCallback(){let root=this;this.removeEventListener("iron-resize",this._onIronResize.bind(this));window.removeEventListener("responsive-element",e=>{let detail={element:e.detail.element,attribute:e.detail.attribute!==void 0&&null!==e.detail.attribute?e.detail.attribute:"responsive-size",relativeToParent:e.detail.relativeToParent!==void 0&&null!==e.detail.relativeToParent?e.detail.relativeToParent:!0,sm:e.detail.sm!==void 0&&null!==e.detail.sm?e.detail.sm:900,md:e.detail.md!==void 0&&null!==e.detail.md?e.detail.md:1200,lg:e.detail.lg!==void 0&&null!==e.detail.lg?e.detail.lg:1500,xl:e.detail.xl!==void 0&&null!==e.detail.xl?e.detail.lg:1800};if("ResizeObserver"in window&&!0===detail.relativeToParent){let resize=new ResizeObserver(function(){window.ResponsiveUtility.setSize(detail)}),observable=e.detail.parentNode!==void 0&&null!==e.detail.parentNode?e.detail.parentNode.nodeType===Node.DOCUMENT_FRAGMENT_NODE?e.detail.element.parentNode.host:e.detail.element.parentNode:e.detail.element;resize.observe(observable)}root.push("details",detail);window.ResponsiveUtility.setSize(detail)});/* handle element deregistration */window.removeEventListener("delete-responsive-element",e=>{for(let i=0;i<this.details.length;i++){if(e.detail===detail[i])root.splice("details",i,1)}});super.disconnectedCallback()}/**
+       */
+      details: {
+        type: Array,
+        value: []
+      }
+    };
+    if (super.properties) {
+      props = Object.assign(props, super.properties);
+    }
+    return props;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    afterNextRender(this, function() {
+      this.addEventListener("iron-resize", this._onIronResize.bind(this));
+    });
+  }
+  disconnectedCallback() {
+    let root = this;
+    this.removeEventListener("iron-resize", this._onIronResize.bind(this));
+    window.removeEventListener("responsive-element", e => {
+      let detail = {
+        element: e.detail.element,
+        attribute:
+          e.detail.attribute !== undefined && e.detail.attribute !== null
+            ? e.detail.attribute
+            : "responsive-size",
+        relativeToParent:
+          e.detail.relativeToParent !== undefined &&
+          e.detail.relativeToParent !== null
+            ? e.detail.relativeToParent
+            : true,
+        sm:
+          e.detail.sm !== undefined && e.detail.sm !== null ? e.detail.sm : 900,
+        md:
+          e.detail.md !== undefined && e.detail.md !== null
+            ? e.detail.md
+            : 1200,
+        lg:
+          e.detail.lg !== undefined && e.detail.lg !== null
+            ? e.detail.lg
+            : 1500,
+        xl:
+          e.detail.xl !== undefined && e.detail.xl !== null ? e.detail.lg : 1800
+      };
+      if ("ResizeObserver" in window && detail.relativeToParent === true) {
+        let resize = new ResizeObserver(function() {
+            window.ResponsiveUtility.setSize(detail);
+          }),
+          observable =
+            e.detail.parentNode !== undefined && e.detail.parentNode !== null
+              ? e.detail.parentNode.nodeType === Node.DOCUMENT_FRAGMENT_NODE
+                ? e.detail.element.parentNode.host
+                : e.detail.element.parentNode
+              : e.detail.element;
+        resize.observe(observable);
+      }
+      root.push("details", detail);
+      window.ResponsiveUtility.setSize(detail);
+    });
+    /* handle element deregistration */
+    window.removeEventListener("delete-responsive-element", e => {
+      for (let i = 0; i < this.details.length; i++) {
+        if (e.detail === detail[i]) root.splice("details", i, 1);
+      }
+    });
+    super.disconnectedCallback();
+  }
+  /**
    * An array of objects. Each object is contains data about an element
@@ -28,11 +116,109 @@ * that will be updated with responsive values.
    *
-   */ /**
+   */
+  /**
    * Makes sure there is a utility ready and listening for elements.
-   */constructor(){super();let root=this;if(null==window.ResponsiveUtility.instance){window.ResponsiveUtility.instance=root}/* handle element registration */window.addEventListener("responsive-element",e=>{let detail={element:e.detail.element,attribute:e.detail.attribute!==void 0&&null!==e.detail.attribute?e.detail.attribute:"responsive-size",relativeToParent:e.detail.relativeToParent!==void 0&&null!==e.detail.relativeToParent?e.detail.relativeToParent:!0,sm:e.detail.sm!==void 0&&null!==e.detail.sm?e.detail.sm:900,md:e.detail.md!==void 0&&null!==e.detail.md?e.detail.md:1200,lg:e.detail.lg!==void 0&&null!==e.detail.lg?e.detail.lg:1500,xl:e.detail.xl!==void 0&&null!==e.detail.xl?e.detail.lg:1800};if("ResizeObserver"in window&&!0===detail.relativeToParent){let resize=new ResizeObserver(function(){window.ResponsiveUtility.setSize(detail)}),observable=e.detail.parentNode!==void 0&&null!==e.detail.parentNode?e.detail.parentNode.nodeType===Node.DOCUMENT_FRAGMENT_NODE?e.detail.element.parentNode.host:e.detail.element.parentNode:e.detail.element;resize.observe(observable)}root.push("details",detail);window.ResponsiveUtility.setSize(detail)});/* handle element deregistration */window.addEventListener("delete-responsive-element",e=>{for(let i=0;i<this.details.length;i++){if(e.detail===detail[i])root.splice("details",i,1)}})}/**
+   */
+  constructor() {
+    super();
+    let root = this;
+    if (window.ResponsiveUtility.instance == null) {
+      window.ResponsiveUtility.instance = root;
+    }
+    /* handle element registration */
+    window.addEventListener("responsive-element", e => {
+      let detail = {
+        element: e.detail.element,
+        attribute:
+          e.detail.attribute !== undefined && e.detail.attribute !== null
+            ? e.detail.attribute
+            : "responsive-size",
+        relativeToParent:
+          e.detail.relativeToParent !== undefined &&
+          e.detail.relativeToParent !== null
+            ? e.detail.relativeToParent
+            : true,
+        sm:
+          e.detail.sm !== undefined && e.detail.sm !== null ? e.detail.sm : 900,
+        md:
+          e.detail.md !== undefined && e.detail.md !== null
+            ? e.detail.md
+            : 1200,
+        lg:
+          e.detail.lg !== undefined && e.detail.lg !== null
+            ? e.detail.lg
+            : 1500,
+        xl:
+          e.detail.xl !== undefined && e.detail.xl !== null ? e.detail.lg : 1800
+      };
+      if ("ResizeObserver" in window && detail.relativeToParent === true) {
+        let resize = new ResizeObserver(function() {
+            window.ResponsiveUtility.setSize(detail);
+          }),
+          observable =
+            e.detail.parentNode !== undefined && e.detail.parentNode !== null
+              ? e.detail.parentNode.nodeType === Node.DOCUMENT_FRAGMENT_NODE
+                ? e.detail.element.parentNode.host
+                : e.detail.element.parentNode
+              : e.detail.element;
+        resize.observe(observable);
+      }
+      root.push("details", detail);
+      window.ResponsiveUtility.setSize(detail);
+    });
+    /* handle element deregistration */
+    window.addEventListener("delete-responsive-element", e => {
+      for (let i = 0; i < this.details.length; i++) {
+        if (e.detail === detail[i]) root.splice("details", i, 1);
+      }
+    });
+  }
+
+  /**
    * On resize, sets sizes of any detail element that has changed.
-   */_onIronResize(){for(let i=0;i<this.details.length;i++){window.ResponsiveUtility.setSize(this.details[i])}}}window.customElements.define(ResponsiveUtility.tag,ResponsiveUtility);export{ResponsiveUtility};/**
+   */
+  _onIronResize() {
+    for (let i = 0; i < this.details.length; i++) {
+      window.ResponsiveUtility.setSize(this.details[i]);
+    }
+  }
+}
+window.customElements.define(ResponsiveUtility.tag, ResponsiveUtility);
+export { ResponsiveUtility };
+
+/**
  * Checks to see if there is an instance available, and if not appends one
- */window.ResponsiveUtility.requestAvailability=function(){if(null==window.ResponsiveUtility.instance){window.ResponsiveUtility.instance=document.createElement("responsive-utility")}document.body.appendChild(window.ResponsiveUtility.instance)};/**
+ */
+window.ResponsiveUtility.requestAvailability = function() {
+  if (window.ResponsiveUtility.instance == null) {
+    window.ResponsiveUtility.instance = document.createElement(
+      "responsive-utility"
+    );
+  }
+  document.body.appendChild(window.ResponsiveUtility.instance);
+};
+/**
  * Sets responsive size of detail.
- */window.ResponsiveUtility.setSize=function(detail){let size,width=window.ResponsiveUtility._getWidth(detail);if(width<detail.sm){size="xs"}else if(width<detail.md){size="sm"}else if(width<detail.lg){size="md"}else if(width<detail.xl){size="lg"}else{size="xl"}if(detail.element.getAttribute(detail.attribute)===void 0||size!==detail.element.getAttribute(detail.attribute)){detail.element.setAttribute(detail.attribute,size)}};/**
+ */
+window.ResponsiveUtility.setSize = function(detail) {
+  let size,
+    width = window.ResponsiveUtility._getWidth(detail);
+  if (width < detail.sm) {
+    size = "xs";
+  } else if (width < detail.md) {
+    size = "sm";
+  } else if (width < detail.lg) {
+    size = "md";
+  } else if (width < detail.xl) {
+    size = "lg";
+  } else {
+    size = "xl";
+  }
+  if (
+    detail.element.getAttribute(detail.attribute) === undefined ||
+    size !== detail.element.getAttribute(detail.attribute)
+  ) {
+    detail.element.setAttribute(detail.attribute, size);
+  }
+};
+/**
  * Returns width of detail.
@@ -42,2 +228,19 @@ *
  * @returns {number} the width of the element or its parent node
- */window.ResponsiveUtility._getWidth=function(detail){let el=detail.element;if(!0===detail.relativeToParent){if(el.offsetWidth!==void 0&&null!==el.offsetWidth&&0<el.offsetWidth){return el.offsetWidth}else if(null!==el.parentNode){return el.parentNode.nodeType===Node.DOCUMENT_FRAGMENT_NODE?el.parentNode.host.offsetWidth:el.parentNode.offsetWidth}}return window.outerWidth};
+ */
+window.ResponsiveUtility._getWidth = function(detail) {
+  let el = detail.element;
+  if (detail.relativeToParent === true) {
+    if (
+      el.offsetWidth !== undefined &&
+      el.offsetWidth !== null &&
+      el.offsetWidth > 0
+    ) {
+      return el.offsetWidth;
+    } else if (el.parentNode !== null) {
+      return el.parentNode.nodeType === Node.DOCUMENT_FRAGMENT_NODE
+        ? el.parentNode.host.offsetWidth
+        : el.parentNode.offsetWidth;
+    }
+  }
+  return window.outerWidth;
+};

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Lines of code

1139

increased by11.34%

Number of medium supply chain risk alerts

4

decreased by-20%

Worsened metrics

Total package byte prevSize

97233

decreased by-6.16%

Number of package files

24

decreased by-4%

No dependency changes