@lrnwebcomponents/responsive-utility - npm Package Compare versions

Comparing version 0.0.28 to 0.0.29

build/es5-amd/responsive-utility.js

 define([
-  "exports",
-  "./node_modules/@polymer/polymer/polymer-element.js",
-  "./node_modules/@lrnwebcomponents/hax-body-behaviors/lib/HAXWiring.js"
-], function(_exports, _polymerElement, _HAXWiring) {
+  "./node_modules/@polymer/polymer/polymer-legacy.js",
+  "./node_modules/@polymer/polymer/lib/utils/async.js",
+  "./node_modules/@polymer/iron-resizable-behavior/iron-resizable-behavior.js"
+], function(_polymerLegacy, async, _ironResizableBehavior) {
   "use strict";
-  Object.defineProperty(_exports, "__esModule", { value: !0 });
-  _exports.ResponsiveUtility = void 0;
-  function _templateObject_35eb8a70d70411e8903ea9d50c019e1f() {
+  async = babelHelpers.interopRequireWildcard(async);
+  function _templateObject_e8927440db3211e89b7beb139eb0bb46() {
     var data = babelHelpers.taggedTemplateLiteral([
-      "\n<style>:host {\n  display: block;\n}\n\n:host([hidden]) {\n  display: none;\n}\n</style>\n<slot></slot>"
+      "\n    <style>\n      :host {\n        display: inline;\n      }\n    </style>\n    <slot></slot>\n"
     ]);
-    _templateObject_35eb8a70d70411e8903ea9d50c019e1f = function() {
+    _templateObject_e8927440db3211e89b7beb139eb0bb46 = function() {
       return data;
@@ -18,87 +17,105 @@ };
   }
-  var ResponsiveUtility = (function(_PolymerElement) {
-    babelHelpers.inherits(ResponsiveUtility, _PolymerElement);
-    function ResponsiveUtility() {
-      babelHelpers.classCallCheck(this, ResponsiveUtility);
-      return babelHelpers.possibleConstructorReturn(
-        this,
-        (
-          ResponsiveUtility.__proto__ ||
-          Object.getPrototypeOf(ResponsiveUtility)
-        ).apply(this, arguments)
+  window.ResponsiveUtility = {};
+  window.ResponsiveUtility.instance = null;
+  (0, _polymerLegacy.Polymer)({
+    _template: (0, _polymerLegacy.html)(
+      _templateObject_e8927440db3211e89b7beb139eb0bb46()
+    ),
+    is: "responsive-utility",
+    behaviors: [_ironResizableBehavior.IronResizableBehavior],
+    listeners: { "iron-resize": "_onIronResize" },
+    properties: { targets: { type: Array, value: [] } },
+    created: function created() {
+      var root = this;
+      if (null == window.ResponsiveUtility.instance) {
+        window.ResponsiveUtility.instance = root;
+      }
+      document.body.addEventListener("responsive-element", function(e) {
+        var relative =
+          e.detail.relativeToParent !== void 0 &&
+          null !== e.detail.relativeToParent
+            ? e.detail.relativeToParent
+            : !0;
+        if ("ResizeObserver" in window && !0 === relative.relativeToParent) {
+          var parent = e.detail.element.parentNode,
+            resize = new ResizeObserver(function() {
+              window.ResponsiveUtility.setSize(e.detail);
+            });
+          if (parent.nodeType === Node.DOCUMENT_FRAGMENT_NODE) {
+            parent = parent.host;
+          }
+          resize.observe(parent);
+        }
+        root.push("targets", e.detail);
+        window.ResponsiveUtility.setSize(e.detail);
+      });
+      document.body.addEventListener("delete-responsive-element", function(e) {
+        for (var i = 0; i < this.targets.length; i++) {
+          if (e.detail === target[i]) root.splice("targets", i, 1);
+        }
+      });
+    },
+    _onIronResize: function _onIronResize() {
+      for (var i = 0; i < this.targets.length; i++) {
+        window.ResponsiveUtility.setSize(this.targets[i]);
+      }
+    }
+  });
+  window.ResponsiveUtility.requestAvailability = function() {
+    if (null == window.ResponsiveUtility.instance) {
+      window.ResponsiveUtility.instance = document.createElement(
+        "responsive-utility"
       );
     }
-    babelHelpers.createClass(
-      ResponsiveUtility,
-      [
-        {
-          key: "connectedCallback",
-          value: function connectedCallback() {
-            babelHelpers
-              .get(
-                ResponsiveUtility.prototype.__proto__ ||
-                  Object.getPrototypeOf(ResponsiveUtility.prototype),
-                "connectedCallback",
-                this
-              )
-              .call(this);
-            this.HAXWiring = new _HAXWiring.HAXWiring();
-            this.HAXWiring.setHaxProperties(
-              ResponsiveUtility.haxProperties,
-              ResponsiveUtility.tag,
-              this
-            );
+    document.body.appendChild(window.ResponsiveUtility.instance);
+  };
+  window.ResponsiveUtility.setSize = function(target) {
+    var element = target.element,
+      attribute =
+        target.attribute !== void 0 && null !== target.attribute
+          ? target.attribute
+          : "responsive-size",
+      size = window.ResponsiveUtility.getSize(target);
+    if (
+      element.getAttribute(attribute) === void 0 ||
+      size !== element.getAttribute(attribute)
+    ) {
+      element.setAttribute(attribute, size);
+    }
+  };
+  window.ResponsiveUtility.getSize = function(target) {
+    var relative =
+        target.relativeToParent !== void 0 && null !== target.relativeToParent
+          ? target.relativeToParent
+          : !0,
+      testBreakpoint = function(width, breakpoint, def) {
+        var val =
+          breakpoint !== void 0 && null !== breakpoint ? breakpoint : def;
+        return width < val;
+      },
+      size,
+      width = (function getWidth() {
+        if (null !== target.element.parentNode && !0 === relative) {
+          if (
+            target.element.parentNode.nodeType === Node.DOCUMENT_FRAGMENT_NODE
+          ) {
+            return target.element.parentNode.host.offsetWidth;
           }
+          return target.element.parentNode.offsetWidth;
         }
-      ],
-      [
-        {
-          key: "template",
-          get: function get() {
-            return (0, _polymerElement.html)(
-              _templateObject_35eb8a70d70411e8903ea9d50c019e1f()
-            );
-          }
-        },
-        {
-          key: "haxProperties",
-          get: function get() {
-            return {
-              canScale: !0,
-              canPosition: !0,
-              canEditSource: !1,
-              gizmo: {
-                title: "Responsive utility",
-                description: "Automated conversion of responsive-utility/",
-                icon: "icons:android",
-                color: "green",
-                groups: ["Utility"],
-                handles: [{ type: "todo:read-the-docs-for-usage" }],
-                meta: {
-                  author: "btopro",
-                  owner: "The Pennsylvania State University"
-                }
-              },
-              settings: { quick: [], configure: [], advanced: [] }
-            };
-          }
-        },
-        {
-          key: "properties",
-          get: function get() {
-            return {};
-          }
-        },
-        {
-          key: "tag",
-          get: function get() {
-            return "responsive-utility";
-          }
-        }
-      ]
-    );
-    return ResponsiveUtility;
-  })(_polymerElement.PolymerElement);
-  _exports.ResponsiveUtility = ResponsiveUtility;
-  window.customElements.define(ResponsiveUtility.tag, ResponsiveUtility);
+        return window.outerWidth;
+      })();
+    if (testBreakpoint(width, target.sm, 600)) {
+      size = "xs";
+    } else if (testBreakpoint(width, target.md, 900)) {
+      size = "sm";
+    } else if (testBreakpoint(width, target.lg, 1200)) {
+      size = "md";
+    } else if (testBreakpoint(width, target.xl, 1200)) {
+      size = "lg";
+    } else {
+      size = "xl";
+    }
+    return size;
+  };
 });

build/es6/responsive-utility.js

 import {
   html,
-  PolymerElement
-} from "./node_modules/@polymer/polymer/polymer-element.js";
-import { HAXWiring } from "./node_modules/@lrnwebcomponents/hax-body-behaviors/lib/HAXWiring.js";
-export { ResponsiveUtility };
-class ResponsiveUtility extends PolymerElement {
-  static get template() {
-    return html`
-<style>:host {
-  display: block;
-}
-
-:host([hidden]) {
-  display: none;
-}
-</style>
-<slot></slot>`;
+  Polymer
+} from "./node_modules/@polymer/polymer/polymer-legacy.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";
+window.ResponsiveUtility = {};
+window.ResponsiveUtility.instance = null;
+Polymer({
+  _template: html`
+    <style>
+      :host {
+        display: inline;
+      }
+    </style>
+    <slot></slot>
+`,
+  is: "responsive-utility",
+  behaviors: [IronResizableBehavior],
+  listeners: { "iron-resize": "_onIronResize" },
+  properties: { targets: { type: Array, value: [] } },
+  created: function() {
+    let root = this;
+    if (null == window.ResponsiveUtility.instance) {
+      window.ResponsiveUtility.instance = root;
+    }
+    document.body.addEventListener("responsive-element", function(e) {
+      let relative =
+        e.detail.relativeToParent !== void 0 &&
+        null !== e.detail.relativeToParent
+          ? e.detail.relativeToParent
+          : !0;
+      if ("ResizeObserver" in window && !0 === relative.relativeToParent) {
+        let parent = e.detail.element.parentNode,
+          resize = new ResizeObserver(function() {
+            window.ResponsiveUtility.setSize(e.detail);
+          });
+        if (parent.nodeType === Node.DOCUMENT_FRAGMENT_NODE) {
+          parent = parent.host;
+        }
+        resize.observe(parent);
+      }
+      root.push("targets", e.detail);
+      window.ResponsiveUtility.setSize(e.detail);
+    });
+    document.body.addEventListener("delete-responsive-element", function(e) {
+      for (let i = 0; i < this.targets.length; i++) {
+        if (e.detail === target[i]) root.splice("targets", i, 1);
+      }
+    });
+  },
+  _onIronResize: function() {
+    for (let i = 0; i < this.targets.length; i++) {
+      window.ResponsiveUtility.setSize(this.targets[i]);
+    }
   }
-  static get haxProperties() {
-    return {
-      canScale: !0,
-      canPosition: !0,
-      canEditSource: !1,
-      gizmo: {
-        title: "Responsive utility",
-        description: "Automated conversion of responsive-utility/",
-        icon: "icons:android",
-        color: "green",
-        groups: ["Utility"],
-        handles: [{ type: "todo:read-the-docs-for-usage" }],
-        meta: { author: "btopro", owner: "The Pennsylvania State University" }
-      },
-      settings: { quick: [], configure: [], advanced: [] }
-    };
+});
+window.ResponsiveUtility.requestAvailability = function() {
+  if (null == window.ResponsiveUtility.instance) {
+    window.ResponsiveUtility.instance = document.createElement(
+      "responsive-utility"
+    );
   }
-  static get properties() {
-    return {};
+  document.body.appendChild(window.ResponsiveUtility.instance);
+};
+window.ResponsiveUtility.setSize = function(target) {
+  let element = target.element,
+    attribute =
+      target.attribute !== void 0 && null !== target.attribute
+        ? target.attribute
+        : "responsive-size",
+    size = window.ResponsiveUtility.getSize(target);
+  if (
+    element.getAttribute(attribute) === void 0 ||
+    size !== element.getAttribute(attribute)
+  ) {
+    element.setAttribute(attribute, size);
   }
-  static get tag() {
-    return "responsive-utility";
+};
+window.ResponsiveUtility.getSize = function(target) {
+  let relative =
+      target.relativeToParent !== void 0 && null !== target.relativeToParent
+        ? target.relativeToParent
+        : !0,
+    testBreakpoint = function(width, breakpoint, def) {
+      let val = breakpoint !== void 0 && null !== breakpoint ? breakpoint : def;
+      return width < val;
+    },
+    size,
+    width = (function() {
+      if (null !== target.element.parentNode && !0 === relative) {
+        if (
+          target.element.parentNode.nodeType === Node.DOCUMENT_FRAGMENT_NODE
+        ) {
+          return target.element.parentNode.host.offsetWidth;
+        }
+        return target.element.parentNode.offsetWidth;
+      }
+      return window.outerWidth;
+    })();
+  if (testBreakpoint(width, target.sm, 600)) {
+    size = "xs";
+  } else if (testBreakpoint(width, target.md, 900)) {
+    size = "sm";
+  } else if (testBreakpoint(width, target.lg, 1200)) {
+    size = "md";
+  } else if (testBreakpoint(width, target.xl, 1200)) {
+    size = "lg";
+  } else {
+    size = "xl";
   }
-  connectedCallback() {
-    super.connectedCallback();
-    this.HAXWiring = new HAXWiring();
-    this.HAXWiring.setHaxProperties(
-      ResponsiveUtility.haxProperties,
-      ResponsiveUtility.tag,
-      this
-    );
-  }
-}
-window.customElements.define(ResponsiveUtility.tag, ResponsiveUtility);
+  return size;
+};

package.json

@@ -8,14 +8,9 @@ {
     "generator-wcfactory-version": "0.3.2",
-    "useHAX": true,
+    "useHAX": false,
     "useSass": false,
     "files": {
-      "css": "src/responsive-utility.css",
-      "scss": "src/responsive-utility.scss",
-      "html": "src/responsive-utility.html",
-      "js": "src/responsive-utility.js",
-      "properties": "src/responsive-utility-properties.json",
-      "hax": "src/responsive-utility-hax.json"
+      "js": "src/responsive-utility.js"
     }
   },
-  "version": "0.0.28",
+  "version": "0.0.29",
   "description": "Automated conversion of responsive-utility/",
@@ -44,3 +39,3 @@ "repository": {
   "dependencies": {
-    "@lrnwebcomponents/hax-body-behaviors": "^0.0.20",
+    "@polymer/iron-resizable-behavior": "^3.0.1",
     "@polymer/polymer": "^3.0.5"
@@ -56,5 +51,5 @@ },
     "lodash": "4.17.11",
-    "polymer-build": "3.0.4",
-    "polymer-cli": "1.8.0",
-    "wct-browser-legacy": "1.0.1"
+    "polymer-build": "3.1.0",
+    "polymer-cli": "1.8.1",
+    "wct-browser-legacy": "1.0.2"
   },
@@ -69,3 +64,3 @@ "private": false,
   ],
-  "gitHead": "67f5e266e92a62dd4f359dae42b86159fc10f54e"
+  "gitHead": "9a19006247e8f5523b63bdc4adb4e358fcf59090"
 }

responsive-utility.amd.js

@@ -1,1 +0,1 @@
-define(["exports","./node_modules/@polymer/polymer/polymer-element.js","./node_modules/@lrnwebcomponents/hax-body-behaviors/lib/HAXWiring.js"],function(_exports,_polymerElement,_HAXWiring){"use strict";Object.defineProperty(_exports,"__esModule",{value:!0});_exports.ResponsiveUtility=void 0;function _templateObject_35eb8a70d70411e8903ea9d50c019e1f(){var data=babelHelpers.taggedTemplateLiteral(["\n<style>:host {\n  display: block;\n}\n\n:host([hidden]) {\n  display: none;\n}\n</style>\n<slot></slot>"]);_templateObject_35eb8a70d70411e8903ea9d50c019e1f=function(){return data};return data}var ResponsiveUtility=function(_PolymerElement){babelHelpers.inherits(ResponsiveUtility,_PolymerElement);function ResponsiveUtility(){babelHelpers.classCallCheck(this,ResponsiveUtility);return babelHelpers.possibleConstructorReturn(this,(ResponsiveUtility.__proto__||Object.getPrototypeOf(ResponsiveUtility)).apply(this,arguments))}babelHelpers.createClass(ResponsiveUtility,[{key:"connectedCallback",value:function connectedCallback(){babelHelpers.get(ResponsiveUtility.prototype.__proto__||Object.getPrototypeOf(ResponsiveUtility.prototype),"connectedCallback",this).call(this);this.HAXWiring=new _HAXWiring.HAXWiring;this.HAXWiring.setHaxProperties(ResponsiveUtility.haxProperties,ResponsiveUtility.tag,this)}}],[{key:"template",get:function get(){return(0,_polymerElement.html)(_templateObject_35eb8a70d70411e8903ea9d50c019e1f())}},{key:"haxProperties",get:function get(){return{canScale:!0,canPosition:!0,canEditSource:!1,gizmo:{title:"Responsive utility",description:"Automated conversion of responsive-utility/",icon:"icons:android",color:"green",groups:["Utility"],handles:[{type:"todo:read-the-docs-for-usage"}],meta:{author:"btopro",owner:"The Pennsylvania State University"}},settings:{quick:[],configure:[],advanced:[]}}}},{key:"properties",get:function get(){return{}}},{key:"tag",get:function get(){return"responsive-utility"}}]);return ResponsiveUtility}(_polymerElement.PolymerElement);_exports.ResponsiveUtility=ResponsiveUtility;window.customElements.define(ResponsiveUtility.tag,ResponsiveUtility)});
+define(["./node_modules/@polymer/polymer/polymer-legacy.js","./node_modules/@polymer/polymer/lib/utils/async.js","./node_modules/@polymer/iron-resizable-behavior/iron-resizable-behavior.js"],function(_polymerLegacy,async,_ironResizableBehavior){"use strict";async=babelHelpers.interopRequireWildcard(async);function _templateObject_e8927440db3211e89b7beb139eb0bb46(){var data=babelHelpers.taggedTemplateLiteral(["\n    <style>\n      :host {\n        display: inline;\n      }\n    </style>\n    <slot></slot>\n"]);_templateObject_e8927440db3211e89b7beb139eb0bb46=function(){return data};return data}window.ResponsiveUtility={};window.ResponsiveUtility.instance=null;(0,_polymerLegacy.Polymer)({_template:(0,_polymerLegacy.html)(_templateObject_e8927440db3211e89b7beb139eb0bb46()),is:"responsive-utility",behaviors:[_ironResizableBehavior.IronResizableBehavior],listeners:{"iron-resize":"_onIronResize"},properties:{targets:{type:Array,value:[]}},created:function created(){var root=this;if(null==window.ResponsiveUtility.instance){window.ResponsiveUtility.instance=root}document.body.addEventListener("responsive-element",function(e){var relative=e.detail.relativeToParent!==void 0&&null!==e.detail.relativeToParent?e.detail.relativeToParent:!0;if("ResizeObserver"in window&&!0===relative.relativeToParent){var parent=e.detail.element.parentNode,resize=new ResizeObserver(function(){window.ResponsiveUtility.setSize(e.detail)});if(parent.nodeType===Node.DOCUMENT_FRAGMENT_NODE){parent=parent.host}resize.observe(parent)}root.push("targets",e.detail);window.ResponsiveUtility.setSize(e.detail)});document.body.addEventListener("delete-responsive-element",function(e){for(var i=0;i<this.targets.length;i++){if(e.detail===target[i])root.splice("targets",i,1)}})},_onIronResize:function _onIronResize(){for(var i=0;i<this.targets.length;i++){window.ResponsiveUtility.setSize(this.targets[i])}}});window.ResponsiveUtility.requestAvailability=function(){if(null==window.ResponsiveUtility.instance){window.ResponsiveUtility.instance=document.createElement("responsive-utility")}document.body.appendChild(window.ResponsiveUtility.instance)};window.ResponsiveUtility.setSize=function(target){var element=target.element,attribute=target.attribute!==void 0&&null!==target.attribute?target.attribute:"responsive-size",size=window.ResponsiveUtility.getSize(target);if(element.getAttribute(attribute)===void 0||size!==element.getAttribute(attribute)){element.setAttribute(attribute,size)}};window.ResponsiveUtility.getSize=function(target){var relative=target.relativeToParent!==void 0&&null!==target.relativeToParent?target.relativeToParent:!0,testBreakpoint=function(width,breakpoint,def){var val=breakpoint!==void 0&&null!==breakpoint?breakpoint:def;return width<val},size,width=function getWidth(){if(null!==target.element.parentNode&&!0===relative){if(target.element.parentNode.nodeType===Node.DOCUMENT_FRAGMENT_NODE){return target.element.parentNode.host.offsetWidth}return target.element.parentNode.offsetWidth}return window.outerWidth}();if(testBreakpoint(width,target.sm,600)){size="xs"}else if(testBreakpoint(width,target.md,900)){size="sm"}else if(testBreakpoint(width,target.lg,1200)){size="md"}else if(testBreakpoint(width,target.xl,1200)){size="lg"}else{size="xl"}return size}});

responsive-utility.es6.js

@@ -1,10 +0,8 @@
-import{html,PolymerElement}from"./node_modules/@polymer/polymer/polymer-element.js";import{HAXWiring}from"./node_modules/@lrnwebcomponents/hax-body-behaviors/lib/HAXWiring.js";export{ResponsiveUtility};class ResponsiveUtility extends PolymerElement{static get template(){return html`
-<style>:host {
-  display: block;
-}
-
-:host([hidden]) {
-  display: none;
-}
-</style>
-<slot></slot>`}static get haxProperties(){return{canScale:!0,canPosition:!0,canEditSource:!1,gizmo:{title:"Responsive utility",description:"Automated conversion of responsive-utility/",icon:"icons:android",color:"green",groups:["Utility"],handles:[{type:"todo:read-the-docs-for-usage"}],meta:{author:"btopro",owner:"The Pennsylvania State University"}},settings:{quick:[],configure:[],advanced:[]}}}static get properties(){return{}}static get tag(){return"responsive-utility"}connectedCallback(){super.connectedCallback();this.HAXWiring=new HAXWiring;this.HAXWiring.setHaxProperties(ResponsiveUtility.haxProperties,ResponsiveUtility.tag,this)}}window.customElements.define(ResponsiveUtility.tag,ResponsiveUtility);
+import{html,Polymer}from"./node_modules/@polymer/polymer/polymer-legacy.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";window.ResponsiveUtility={};window.ResponsiveUtility.instance=null;Polymer({_template:html`
+    <style>
+      :host {
+        display: inline;
+      }
+    </style>
+    <slot></slot>
+`,is:"responsive-utility",behaviors:[IronResizableBehavior],listeners:{"iron-resize":"_onIronResize"},properties:{targets:{type:Array,value:[]}},created:function(){let root=this;if(null==window.ResponsiveUtility.instance){window.ResponsiveUtility.instance=root}document.body.addEventListener("responsive-element",function(e){let relative=e.detail.relativeToParent!==void 0&&null!==e.detail.relativeToParent?e.detail.relativeToParent:!0;if("ResizeObserver"in window&&!0===relative.relativeToParent){let parent=e.detail.element.parentNode,resize=new ResizeObserver(function(){window.ResponsiveUtility.setSize(e.detail)});if(parent.nodeType===Node.DOCUMENT_FRAGMENT_NODE){parent=parent.host}resize.observe(parent)}root.push("targets",e.detail);window.ResponsiveUtility.setSize(e.detail)});document.body.addEventListener("delete-responsive-element",function(e){for(let i=0;i<this.targets.length;i++){if(e.detail===target[i])root.splice("targets",i,1)}})},_onIronResize:function(){for(let i=0;i<this.targets.length;i++){window.ResponsiveUtility.setSize(this.targets[i])}}});window.ResponsiveUtility.requestAvailability=function(){if(null==window.ResponsiveUtility.instance){window.ResponsiveUtility.instance=document.createElement("responsive-utility")}document.body.appendChild(window.ResponsiveUtility.instance)};window.ResponsiveUtility.setSize=function(target){let element=target.element,attribute=target.attribute!==void 0&&null!==target.attribute?target.attribute:"responsive-size",size=window.ResponsiveUtility.getSize(target);if(element.getAttribute(attribute)===void 0||size!==element.getAttribute(attribute)){element.setAttribute(attribute,size)}};window.ResponsiveUtility.getSize=function(target){let relative=target.relativeToParent!==void 0&&null!==target.relativeToParent?target.relativeToParent:!0,testBreakpoint=function(width,breakpoint,def){let val=breakpoint!==void 0&&null!==breakpoint?breakpoint:def;return width<val},size,width=function(){if(null!==target.element.parentNode&&!0===relative){if(target.element.parentNode.nodeType===Node.DOCUMENT_FRAGMENT_NODE){return target.element.parentNode.host.offsetWidth}return target.element.parentNode.offsetWidth}return window.outerWidth}();if(testBreakpoint(width,target.sm,600)){size="xs"}else if(testBreakpoint(width,target.md,900)){size="sm"}else if(testBreakpoint(width,target.lg,1200)){size="md"}else if(testBreakpoint(width,target.xl,1200)){size="lg"}else{size="xl"}return size};

responsive-utility.js

@@ -1,92 +0,165 @@
-/**
- * Copyright 2018 The Pennsylvania State University
- * @license Apache-2.0, see License.md for full text.
- */
-import { html, PolymerElement } from "@polymer/polymer/polymer-element.js";
-import { HAXWiring } from "@lrnwebcomponents/hax-body-behaviors/lib/HAXWiring.js";
-export { ResponsiveUtility };
-/**
- * `responsive-utility`
- * `Automated conversion of responsive-utility/`
- *
- * @microcopy - language worth noting:
- *  -
- *
- * @customElement
- * @polymer
- * @demo demo/index.html
- */
-class ResponsiveUtility extends PolymerElement {
-  // render function
-  static get template() {
-    return html`
-<style>:host {
-  display: block;
-}
+import { html, Polymer } from "@polymer/polymer/polymer-legacy.js";
+import * as async from "@polymer/polymer/lib/utils/async.js";
+import { IronResizableBehavior } from "@polymer/iron-resizable-behavior/iron-resizable-behavior.js";
 
-:host([hidden]) {
-  display: none;
-}
-</style>
-<slot></slot>`;
-  }
+window.ResponsiveUtility = {};
+window.ResponsiveUtility.instance = null;
+Polymer({
+  _template: html`
+    <style>
+      :host {
+        display: inline;
+      }
+    </style>
+    <slot></slot>
+`,
 
-  // haxProperty definition
-  static get haxProperties() {
-    return {
-      canScale: true,
-      canPosition: true,
-      canEditSource: false,
-      gizmo: {
-        title: "Responsive utility",
-        description: "Automated conversion of responsive-utility/",
-        icon: "icons:android",
-        color: "green",
-        groups: ["Utility"],
-        handles: [
-          {
-            type: "todo:read-the-docs-for-usage"
-          }
-        ],
-        meta: {
-          author: "btopro",
-          owner: "The Pennsylvania State University"
+  is: "responsive-utility",
+
+  behaviors: [IronResizableBehavior],
+
+  listeners: {
+    "iron-resize": "_onIronResize"
+  },
+
+  properties: {
+    /**
+     * Stores
+     */
+    targets: {
+      type: Array,
+      value: []
+    }
+  },
+
+  /**
+   * An array of objects. Each object is contains data about an element
+   * that will be updated with responsive values.
+   *
+   * To add an element to this array, fire a 'responsive-element' event
+   * with the following data:
+   *
+   * {
+   *   "element": (the element itself),
+   *   "attribute": (the attribute that will be set with the size),
+   *   "relativeToParent": (true for @element query instead of @media query),
+   *   "sm": (optional custom sm breakpoint, default is 600),
+   *   "md": (optional custom md breakpoint, default is 900),
+   *   "lg": (optional custom lg breakpoint, default is 1200),
+   *   "xl": (optional custom xl breakpoint, default is 1500),
+   * }
+   *
+   */
+  /**
+   * Makes sure there is a utility ready and listening for elements.
+   */
+  created: function() {
+    let root = this;
+    if (window.ResponsiveUtility.instance == null) {
+      window.ResponsiveUtility.instance = root;
+    }
+    /* handle element registration */
+    document.body.addEventListener("responsive-element", function(e) {
+      let relative =
+        e.detail.relativeToParent !== undefined &&
+        e.detail.relativeToParent !== null
+          ? e.detail.relativeToParent
+          : true;
+      if ("ResizeObserver" in window && relative.relativeToParent === true) {
+        let parent = e.detail.element.parentNode,
+          resize = new ResizeObserver(function() {
+            window.ResponsiveUtility.setSize(e.detail);
+          });
+        if (parent.nodeType === Node.DOCUMENT_FRAGMENT_NODE) {
+          parent = parent.host;
         }
-      },
-      settings: {
-        quick: [],
-        configure: [],
-        advanced: []
+        resize.observe(parent);
       }
-    };
-  }
-  // properties available to the custom element for data binding
-  static get properties() {
-    return {};
-  }
+      root.push("targets", e.detail);
+      window.ResponsiveUtility.setSize(e.detail);
+    });
+    /* handle element deregistration */
+    document.body.addEventListener("delete-responsive-element", function(e) {
+      for (let i = 0; i < this.targets.length; i++) {
+        if (e.detail === target[i]) root.splice("targets", i, 1);
+      }
+    });
+  },
 
   /**
-   * Store the tag name to make it easier to obtain directly.
-   * @notice function name must be here for tooling to operate correctly
+   * On resize, sets sizes of any target element that has changed.
    */
-  static get tag() {
-    return "responsive-utility";
+  _onIronResize: function() {
+    for (let i = 0; i < this.targets.length; i++) {
+      window.ResponsiveUtility.setSize(this.targets[i]);
+    }
   }
-  /**
-   * life cycle, element is afixed to the DOM
-   */
-  connectedCallback() {
-    super.connectedCallback();
-    this.HAXWiring = new HAXWiring();
-    this.HAXWiring.setHaxProperties(
-      ResponsiveUtility.haxProperties,
-      ResponsiveUtility.tag,
-      this
+});
+
+/**
+ * Checks to see if there is an instance available, and if not appends one
+ */
+window.ResponsiveUtility.requestAvailability = function() {
+  if (window.ResponsiveUtility.instance == null) {
+    window.ResponsiveUtility.instance = document.createElement(
+      "responsive-utility"
     );
   }
-  /**
-   * life cycle, element is removed from the DOM
-   */
-  //disconnectedCallback() {}
-}
-window.customElements.define(ResponsiveUtility.tag, ResponsiveUtility);
+  document.body.appendChild(window.ResponsiveUtility.instance);
+};
+/**
+ * Sets responsive size of target.
+ */
+window.ResponsiveUtility.setSize = function(target) {
+  let element = target.element;
+  let attribute =
+    target.attribute !== undefined && target.attribute !== null
+      ? target.attribute
+      : "responsive-size";
+  let size = window.ResponsiveUtility.getSize(target);
+  if (
+    element.getAttribute(attribute) === undefined ||
+    size !== element.getAttribute(attribute)
+  ) {
+    element.setAttribute(attribute, size);
+  }
+};
+/**
+ * Returns responsive size of target.
+ */
+window.ResponsiveUtility.getSize = function(target) {
+  let relative =
+    target.relativeToParent !== undefined && target.relativeToParent !== null
+      ? target.relativeToParent
+      : true;
+  let getWidth = function() {
+      if (target.element.parentNode !== null && relative === true) {
+        if (
+          target.element.parentNode.nodeType === Node.DOCUMENT_FRAGMENT_NODE
+        ) {
+          return target.element.parentNode.host.offsetWidth;
+        }
+        return target.element.parentNode.offsetWidth;
+      }
+      return window.outerWidth;
+    },
+    testBreakpoint = function(width, breakpoint, def) {
+      let val =
+        breakpoint !== undefined && breakpoint !== null ? breakpoint : def;
+      return width < val;
+    },
+    size,
+    width = getWidth();
+  if (testBreakpoint(width, target.sm, 600)) {
+    size = "xs";
+  } else if (testBreakpoint(width, target.md, 900)) {
+    size = "sm";
+  } else if (testBreakpoint(width, target.lg, 1200)) {
+    size = "md";
+  } else if (testBreakpoint(width, target.xl, 1200)) {
+    size = "lg";
+  } else {
+    size = "xl";
+  }
+  return size;
+};

responsive-utility.umd.js

@@ -1,2 +0,2 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@polymer/polymer/polymer-element.js"),require("@lrnwebcomponents/hax-body-behaviors/lib/HAXWiring.js")):"function"==typeof define&&define.amd?define(["exports","@polymer/polymer/polymer-element.js","@lrnwebcomponents/hax-body-behaviors/lib/HAXWiring.js"],t):t(e.ResponsiveUtility={},e.polymerElement_js,e.HAXWiring_js)}(this,function(e,t,n){"use strict";function o(e,t){for(var n=0;n<t.length;n++){var o=t[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}function r(e){return(r=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)})(e)}function i(e,t){return(i=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}function c(e,t){return!t||"object"!=typeof t&&"function"!=typeof t?function(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}(e):t}function s(e,t,n){return(s="undefined"!=typeof Reflect&&Reflect.get?Reflect.get:function(e,t,n){var o=function(e,t){for(;!Object.prototype.hasOwnProperty.call(e,t)&&null!==(e=r(e)););return e}(e,t);if(o){var i=Object.getOwnPropertyDescriptor(o,t);return i.get?i.get.call(n):i.value}})(e,t,n||e)}function u(){var e,t,n=(e=["\n<style>:host {\n  display: block;\n}\n\n:host([hidden]) {\n  display: none;\n}\n</style>\n<slot></slot>"],t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}})));return u=function(){return n},n}var l=function(e){function l(){return function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,l),c(this,r(l).apply(this,arguments))}var a,f,p;return function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),t&&i(e,t)}(l,t.PolymerElement),a=l,p=[{key:"template",get:function(){return t.html(u())}},{key:"haxProperties",get:function(){return{canScale:!0,canPosition:!0,canEditSource:!1,gizmo:{title:"Responsive utility",description:"Automated conversion of responsive-utility/",icon:"icons:android",color:"green",groups:["Utility"],handles:[{type:"todo:read-the-docs-for-usage"}],meta:{author:"btopro",owner:"The Pennsylvania State University"}},settings:{quick:[],configure:[],advanced:[]}}}},{key:"properties",get:function(){return{}}},{key:"tag",get:function(){return"responsive-utility"}}],(f=[{key:"connectedCallback",value:function(){s(r(l.prototype),"connectedCallback",this).call(this),this.HAXWiring=new n.HAXWiring,this.HAXWiring.setHaxProperties(l.haxProperties,l.tag,this)}}])&&o(a.prototype,f),p&&o(a,p),l}();window.customElements.define(l.tag,l),e.ResponsiveUtility=l,Object.defineProperty(e,"__esModule",{value:!0})});
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(require("@polymer/polymer/polymer-legacy.js"),require("@polymer/polymer/lib/utils/async.js"),require("@polymer/iron-resizable-behavior/iron-resizable-behavior.js")):"function"==typeof define&&define.amd?define(["@polymer/polymer/polymer-legacy.js","@polymer/polymer/lib/utils/async.js","@polymer/iron-resizable-behavior/iron-resizable-behavior.js"],t):t(e.polymerLegacy_js,e.async_js,e.ironResizableBehavior_js)}(this,function(e,t,i){"use strict";function n(){var e,t,i=(e=["\n    <style>\n      :host {\n        display: inline;\n      }\n    </style>\n    <slot></slot>\n"],t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}})));return n=function(){return i},i}window.ResponsiveUtility={},window.ResponsiveUtility.instance=null,e.Polymer({_template:e.html(n()),is:"responsive-utility",behaviors:[i.IronResizableBehavior],listeners:{"iron-resize":"_onIronResize"},properties:{targets:{type:Array,value:[]}},created:function(){var e=this;null==window.ResponsiveUtility.instance&&(window.ResponsiveUtility.instance=e),document.body.addEventListener("responsive-element",function(t){var i=void 0===t.detail.relativeToParent||null===t.detail.relativeToParent||t.detail.relativeToParent;if("ResizeObserver"in window&&!0===i.relativeToParent){var n=t.detail.element.parentNode,o=new ResizeObserver(function(){window.ResponsiveUtility.setSize(t.detail)});n.nodeType===Node.DOCUMENT_FRAGMENT_NODE&&(n=n.host),o.observe(n)}e.push("targets",t.detail),window.ResponsiveUtility.setSize(t.detail)}),document.body.addEventListener("delete-responsive-element",function(t){for(var i=0;i<this.targets.length;i++)t.detail===target[i]&&e.splice("targets",i,1)})},_onIronResize:function(){for(var e=0;e<this.targets.length;e++)window.ResponsiveUtility.setSize(this.targets[e])}}),window.ResponsiveUtility.requestAvailability=function(){null==window.ResponsiveUtility.instance&&(window.ResponsiveUtility.instance=document.createElement("responsive-utility")),document.body.appendChild(window.ResponsiveUtility.instance)},window.ResponsiveUtility.setSize=function(e){var t=e.element,i=void 0!==e.attribute&&null!==e.attribute?e.attribute:"responsive-size",n=window.ResponsiveUtility.getSize(e);void 0!==t.getAttribute(i)&&n===t.getAttribute(i)||t.setAttribute(i,n)},window.ResponsiveUtility.getSize=function(e){var t=void 0===e.relativeToParent||null===e.relativeToParent||e.relativeToParent,i=function(e,t,i){return e<(null!=t?t:i)},n=null!==e.element.parentNode&&!0===t?e.element.parentNode.nodeType===Node.DOCUMENT_FRAGMENT_NODE?e.element.parentNode.host.offsetWidth:e.element.parentNode.offsetWidth:window.outerWidth;return i(n,e.sm,600)?"xs":i(n,e.md,900)?"sm":i(n,e.lg,1200)?"md":i(n,e.xl,1200)?"lg":"xl"}});
 //# sourceMappingURL=responsive-utility.umd.js.map

src/responsive-utility.js

@@ -1,46 +0,165 @@
-/**
- * Copyright 2018 The Pennsylvania State University
- * @license Apache-2.0, see License.md for full text.
- */
-import { html, PolymerElement } from "@polymer/polymer/polymer-element.js";
-import { HAXWiring } from "@lrnwebcomponents/hax-body-behaviors/lib/HAXWiring.js";
-export { ResponsiveUtility };
-/**
- * `responsive-utility`
- * `Automated conversion of responsive-utility/`
- *
- * @microcopy - language worth noting:
- *  -
- *
- * @customElement
- * @polymer
- * @demo demo/index.html
- */
-class ResponsiveUtility extends PolymerElement {
-  /* REQUIRED FOR TOOLING DO NOT TOUCH */
+import { html, Polymer } from "@polymer/polymer/polymer-legacy.js";
+import * as async from "@polymer/polymer/lib/utils/async.js";
+import { IronResizableBehavior } from "@polymer/iron-resizable-behavior/iron-resizable-behavior.js";
 
+window.ResponsiveUtility = {};
+window.ResponsiveUtility.instance = null;
+Polymer({
+  _template: html`
+    <style>
+      :host {
+        display: inline;
+      }
+    </style>
+    <slot></slot>
+`,
+
+  is: "responsive-utility",
+
+  behaviors: [IronResizableBehavior],
+
+  listeners: {
+    "iron-resize": "_onIronResize"
+  },
+
+  properties: {
+    /**
+     * Stores
+     */
+    targets: {
+      type: Array,
+      value: []
+    }
+  },
+
   /**
-   * Store the tag name to make it easier to obtain directly.
-   * @notice function name must be here for tooling to operate correctly
+   * An array of objects. Each object is contains data about an element
+   * that will be updated with responsive values.
+   *
+   * To add an element to this array, fire a 'responsive-element' event
+   * with the following data:
+   *
+   * {
+   *   "element": (the element itself),
+   *   "attribute": (the attribute that will be set with the size),
+   *   "relativeToParent": (true for @element query instead of @media query),
+   *   "sm": (optional custom sm breakpoint, default is 600),
+   *   "md": (optional custom md breakpoint, default is 900),
+   *   "lg": (optional custom lg breakpoint, default is 1200),
+   *   "xl": (optional custom xl breakpoint, default is 1500),
+   * }
+   *
    */
-  static get tag() {
-    return "responsive-utility";
-  }
   /**
-   * life cycle, element is afixed to the DOM
+   * Makes sure there is a utility ready and listening for elements.
    */
-  connectedCallback() {
-    super.connectedCallback();
-    this.HAXWiring = new HAXWiring();
-    this.HAXWiring.setHaxProperties(
-      ResponsiveUtility.haxProperties,
-      ResponsiveUtility.tag,
-      this
+  created: function() {
+    let root = this;
+    if (window.ResponsiveUtility.instance == null) {
+      window.ResponsiveUtility.instance = root;
+    }
+    /* handle element registration */
+    document.body.addEventListener("responsive-element", function(e) {
+      let relative =
+        e.detail.relativeToParent !== undefined &&
+        e.detail.relativeToParent !== null
+          ? e.detail.relativeToParent
+          : true;
+      if ("ResizeObserver" in window && relative.relativeToParent === true) {
+        let parent = e.detail.element.parentNode,
+          resize = new ResizeObserver(function() {
+            window.ResponsiveUtility.setSize(e.detail);
+          });
+        if (parent.nodeType === Node.DOCUMENT_FRAGMENT_NODE) {
+          parent = parent.host;
+        }
+        resize.observe(parent);
+      }
+      root.push("targets", e.detail);
+      window.ResponsiveUtility.setSize(e.detail);
+    });
+    /* handle element deregistration */
+    document.body.addEventListener("delete-responsive-element", function(e) {
+      for (let i = 0; i < this.targets.length; i++) {
+        if (e.detail === target[i]) root.splice("targets", i, 1);
+      }
+    });
+  },
+
+  /**
+   * On resize, sets sizes of any target element that has changed.
+   */
+  _onIronResize: function() {
+    for (let i = 0; i < this.targets.length; i++) {
+      window.ResponsiveUtility.setSize(this.targets[i]);
+    }
+  }
+});
+
+/**
+ * Checks to see if there is an instance available, and if not appends one
+ */
+window.ResponsiveUtility.requestAvailability = function() {
+  if (window.ResponsiveUtility.instance == null) {
+    window.ResponsiveUtility.instance = document.createElement(
+      "responsive-utility"
     );
   }
-  /**
-   * life cycle, element is removed from the DOM
-   */
-  //disconnectedCallback() {}
-}
-window.customElements.define(ResponsiveUtility.tag, ResponsiveUtility);
+  document.body.appendChild(window.ResponsiveUtility.instance);
+};
+/**
+ * Sets responsive size of target.
+ */
+window.ResponsiveUtility.setSize = function(target) {
+  let element = target.element;
+  let attribute =
+    target.attribute !== undefined && target.attribute !== null
+      ? target.attribute
+      : "responsive-size";
+  let size = window.ResponsiveUtility.getSize(target);
+  if (
+    element.getAttribute(attribute) === undefined ||
+    size !== element.getAttribute(attribute)
+  ) {
+    element.setAttribute(attribute, size);
+  }
+};
+/**
+ * Returns responsive size of target.
+ */
+window.ResponsiveUtility.getSize = function(target) {
+  let relative =
+    target.relativeToParent !== undefined && target.relativeToParent !== null
+      ? target.relativeToParent
+      : true;
+  let getWidth = function() {
+      if (target.element.parentNode !== null && relative === true) {
+        if (
+          target.element.parentNode.nodeType === Node.DOCUMENT_FRAGMENT_NODE
+        ) {
+          return target.element.parentNode.host.offsetWidth;
+        }
+        return target.element.parentNode.offsetWidth;
+      }
+      return window.outerWidth;
+    },
+    testBreakpoint = function(width, breakpoint, def) {
+      let val =
+        breakpoint !== undefined && breakpoint !== null ? breakpoint : def;
+      return width < val;
+    },
+    size,
+    width = getWidth();
+  if (testBreakpoint(width, target.sm, 600)) {
+    size = "xs";
+  } else if (testBreakpoint(width, target.md, 900)) {
+    size = "sm";
+  } else if (testBreakpoint(width, target.lg, 1200)) {
+    size = "md";
+  } else if (testBreakpoint(width, target.xl, 1200)) {
+    size = "lg";
+  } else {
+    size = "xl";
+  }
+  return size;
+};

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

Worsened metrics

Total package byte prevSize

115932

decreased by-46.31%

Number of package files

27

decreased by-32.5%

Lines of code

1402

decreased by-69.65%

Number of medium supply chain risk alerts

3

increased by50%

Dependency changes

• + Added@polymer/iron-resizable-behavior@^3.0.1

• + Added@polymer/iron-resizable-behavior@3.0.1(transitive)

• - Removed@lrnwebcomponents/hax-body-behaviors@^0.0.20

• - Removed@lrnwebcomponents/hax-body-behaviors@0.0.20(transitive)