{"_id":"plastic-resize-aware","_rev":"2-3ea69b17277285c1dbea80bb1e838342","name":"plastic-resize-aware","dist-tags":{"latest":"1.0.1"},"versions":{"1.0.0":{"name":"plastic-resize-aware","description":"On Resize and Element Queries for Polymer 3","version":"1.0.0","flat":true,"keywords":["polymer","polymer 3.0","resize","element queries","ResizeObserver","3.0","responsive","custom-element","web-components"],"main":"plastic-resize-aware.js","repository":{"type":"git","url":"git+https://github.com/mlisook/plastic-resize-aware.git"},"license":"MIT","dependencies":{"@polymer/polymer":"^3.0.0"},"devDependencies":{"@polymer/iron-demo-helpers":"^3.0.0-pre.19","@webcomponents/webcomponentsjs":"^2.0.0","wct-browser-legacy":"^1.0.0"},"gitHead":"5e716079e56022b8277ca6c0a44c6e4053afcf94","bugs":{"url":"https://github.com/mlisook/plastic-resize-aware/issues"},"homepage":"https://github.com/mlisook/plastic-resize-aware#readme","_id":"plastic-resize-aware@1.0.0","_npmVersion":"6.0.1","_nodeVersion":"8.9.4","_npmUser":{"name":"mlisook","email":"murray@lisook.net"},"dist":{"integrity":"sha512-erZOwQqPGoOzBbC5H2H+HzUcGn0P1ZReyc23hnKQnbHpAUd6b2gGFtXXuF5BzEEsSZtcecQFolKpQbbkyfG80A==","shasum":"81b1877f3f048070912c97d80f4c07a666d6d7ae","tarball":"https://registry.npmjs.org/plastic-resize-aware/-/plastic-resize-aware-1.0.0.tgz","fileCount":11,"unpackedSize":77081,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbGfJSCRA9TVsSAnZWagAAmqgP/38O0LTpLpPFl3tFE1hr\nbl5/D0TPvbZ4b66J3L4iBaroRkF5ZlJjHhtvO+ZvToQaYQ6ZD7vBX506z1Kz\nHGWHw/Z4Rx2E3LATPQXJQQdixAKiOc62s6oY2KVY36vwR4GkzNMchXrchuN6\nKlMRLCqfL+DEWn2v6PeIXfNf4IxutDeUXtaJaBnNdkxFeHw3HBO6i0Qn+IdF\nsYpv1QZ5mYh08TIA5e5i1qicV3It8RejpvLaDG99r/t8UH2GReS0Vitsp+oe\n24IWCRkEii9p1+X4rSYyCyNsp5NPIsZs2USl9r/rPO9vUp4qFoLrQYyQWKAR\nDs0F+UmHABtSiDe6Wr++IYJzpxV0zWZoH/ba3WhzzXYuAMgY+SSzy4qiU6qA\nTr4Niz+zBV78y/la5+dT3+PM40zPNEZYoT6A3OzaKz9Nu4fk+1hB3sxwQJGS\nVpCddrCEpDWZLmd4dbt/mi/1ZOt8PrrUV+g3coLWduWSooZbjergfgqvDx7l\nuxqsSolwyDdyzh3PE72vvycXk45n/ugca/yetnkNVVv2dbmtslGPzrqXKEAL\ncNHH9WmXY6FhMKLYQVMahTIGUXN7y7cOJW+66fOv5M0F6qj8VMFxDkszJwKv\nDdwPnr0A3gRepwYWqsRICt+hGjnxG16spqb/jXn9qX0imE1uhjTP5NCqx2Md\nK0r6\r\n=oms5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDn1V7BxvUBB0s7sLSAf/UPU7rC3rBTB/Zfx2KWJiCQAgIgJx0T+9e1mCh3sV5+QGS28zZGrJctiNYQ+/MeSCnta98="}]},"maintainers":[{"name":"mlisook","email":"murray@lisook.net"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plastic-resize-aware_1.0.0_1528427088806_0.572371118664271"},"_hasShrinkwrap":false},"1.0.1":{"name":"plastic-resize-aware","description":"On Resize and Element Queries for Polymer 3","version":"1.0.1","flat":true,"keywords":["polymer","polymer 3.0","resize","element queries","ResizeObserver","3.0","responsive","custom-element","web-components"],"main":"plastic-resize-aware.js","repository":{"type":"git","url":"git+https://github.com/mlisook/plastic-resize-aware.git"},"license":"MIT","dependencies":{"@polymer/polymer":"^3.0.0"},"devDependencies":{"@polymer/iron-demo-helpers":"^3.0.0-pre.19","@webcomponents/webcomponentsjs":"^2.0.0","wct-browser-legacy":"^1.0.0"},"gitHead":"75cfd2818c5b64c5b1385c30ca3ba57a5f1578e2","bugs":{"url":"https://github.com/mlisook/plastic-resize-aware/issues"},"homepage":"https://github.com/mlisook/plastic-resize-aware#readme","_id":"plastic-resize-aware@1.0.1","_npmVersion":"6.0.1","_nodeVersion":"8.9.4","_npmUser":{"name":"mlisook","email":"murray@lisook.net"},"dist":{"integrity":"sha512-x1VkrkaFuTr4E1rdjBpiyD8eGvTItbSyxh1a78bJVr5ZpRZeA0uOZe8v41Yo48qEhdOqVzODVkY6UB5yrxiq8w==","shasum":"d5cf8fbb4cc566b57f1efcb784c18c538b76578c","tarball":"https://registry.npmjs.org/plastic-resize-aware/-/plastic-resize-aware-1.0.1.tgz","fileCount":11,"unpackedSize":78174,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbGpbbCRA9TVsSAnZWagAAvPsP/10E7j3pReOMRIH/K/3y\nnA6J2t98MfzfvOTzSeSL8Or1u879aQ/JKZXj7Mvevplq0fPId6hTrwWS9Wel\nlWg0smsvy8+nacF9Dr5WNWVJ35wMj6x9BCIHrsNZ+n99trIXuGugHoRwsJTA\nLw0I1LgT+I/lbKm8AV/B38tQdIhycxxuywVxhlJQnfyETVQRgpCEitGG4/1s\n2B/I4lJ6DVnWOfwwN4RBIcRdErW5R2o7/+cdnErUS4CwX+thXyWK/WrldIQ0\nAHlw8nQqZyhNx+ENq/2BjGy5XHmM5exLo3JUfdZTzw7j5I/swF8KuKDsho/b\n3X2biEv2yvgEsSX8AUxphJqN800htS0Ml8wFpZ4OvmcdsEWv6X6SqFFL2dzo\nu9JQOI7EhI3wt0ICy2wvcuATQG0JUU8xXFeyNdgPkgGLn5od3eZfkxcK08ra\nfp6jtD+NFbUi/d74xljki+vmyDTKHAs80b46eeRCslx72rg+xZ7BPyRDso4y\nml9lfs0npeokU1fHmCFEJyETbEyom5rY0uInZq+NN1Ox4HcxkECgzT9AKIF2\nT8rfeQwUWynj8RCI548hblR903ynlAF1icLO031sR6ezBYE8qDDz8Q9EOEQ6\nbOKe54wphPXCRaeLJney9KpqDpDtbfXvn3xh9t0oOUow4Tu/Z/VxGQftfPYc\nQ6ww\r\n=QJy/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCTihmwvOALlIlZwGhhlLBAQr14jccggmpc6R0XSwEypQIhALXckxu3japlKRC+AhAsQfuP6O5ur5jlM0QM93LkVTNh"}]},"maintainers":[{"name":"mlisook","email":"murray@lisook.net"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plastic-resize-aware_1.0.1_1528469202334_0.8410865539418761"},"_hasShrinkwrap":false}},"time":{"created":"2018-06-08T03:04:48.806Z","1.0.0":"2018-06-08T03:04:48.986Z","modified":"2022-05-13T01:18:32.266Z","1.0.1":"2018-06-08T14:46:42.404Z"},"maintainers":[{"name":"mlisook","email":"murray@lisook.net"}],"description":"On Resize and Element Queries for Polymer 3","homepage":"https://github.com/mlisook/plastic-resize-aware#readme","keywords":["polymer","polymer 3.0","resize","element queries","ResizeObserver","3.0","responsive","custom-element","web-components"],"repository":{"type":"git","url":"git+https://github.com/mlisook/plastic-resize-aware.git"},"bugs":{"url":"https://github.com/mlisook/plastic-resize-aware/issues"},"license":"MIT","readme":"# plastic-resize-aware\r\n\r\nThis package contains two Polymer 3.0 elements:\r\n\r\n`plastic-resize-aware` is a container element that fires an event when its size changes.\r\n\r\n`plastic-element-query` is a non visual element that allows you to use CSS media query style\r\nexpressions as **element queries** to apply and remove CSS classes on a target element.\r\n<!-- TOC -->\r\n\r\n- [plastic-resize-aware](#plastic-resize-aware)\r\n    - [Prior Versions](#prior-versions)\r\n    - [Why and How](#why-and-how)\r\n    - [Install](#install)\r\n    - [How to Use](#how-to-use)\r\n        - [plastic-resize-aware](#plastic-resize-aware-1)\r\n        - [plastic-element-query](#plastic-element-query)\r\n\r\n<!-- /TOC -->\r\n## Prior Versions\r\n\r\nPlease see the element [resize-aware](https://www.webcomponents.org/element/mlisook/resize-aware) for a version that works with Polymer 1.0 or 2.0. The prior version does not\r\ninclude element queries.\r\n\r\n## Why and How\r\n\r\nSometimes you may need to take some action when the rendered size of an element changes. This element provides the \r\nsomething like the window resize event but for an individual element.\r\n\r\nThere are many reasons an element's size could change - CSS or class changes, content changes, content of other elements affecting\r\nthe flow, viewport changes, etc.\r\n\r\nThe `plastic-resize-aware` element uses a `ResizeObserver` which is polyfilled if necessary (so no polling).\r\n\r\nThe `plastic-element-query` element depends on a `plastic-resize-aware` element for size detection. As the reference element changes size the element query gets compared to the new size. \r\n\r\n## Install\r\n\r\n`npm install --save plastic-resize-aware`\r\n\r\n## How to Use\r\n\r\n### plastic-resize-aware\r\n\r\n\r\n```html\r\n<plastic-resize-aware on-element-size-changed=\"handleChange\">\r\n    <p>\r\n      [[theReview]]\r\n    </p>\r\n    <img src=\"[[thePic]]\">\r\n</plastic-resize-aware>\r\n ```\r\n or\r\n ```html\r\n<plastic-resize-aware id=\"pra1\">\r\n  any content that could have been in a div\r\n</plastic-resize-aware>\r\n```\r\n```javascript\r\nthis.$.pra1.addEventListener('element-resize', this.someHandlerName);\r\n```\r\n\r\n### plastic-element-query\r\n\r\nThe idea with this element is that there is a _reference element_ which must be a \r\n`plastic-resize-aware` element, who's size is monitored.  There is also a _target element_\r\nwhich can be the same as the reference element or a different element.  The target element\r\nis changed by modifying its `classList` depending on the `queryExpression` matching or\r\nnot matching the reference element's size.\r\n\r\n```html\r\n<plastic-resize-aware class=\"refoo-area right-pin\">\r\n    <plastic-element-query query-expression=\"(min-width: 50em) and (min-height: 40px)\" \r\n       assign-classes=\"bigfiz  bin baz\"></plastic-element-query>\r\n    <plastic-element-query query-expression=\"(max-width: 225px),(max-height: 20px)\" \r\n       assign-classes=\"tinytext\"></plastic-element-query>\r\n    <p>\r\n      [[theReview]]\r\n    </p>\r\n    <img src=\"[[thePic]]\">\r\n</plastic-resize-aware>\r\n ```\r\n **Explanation:**\r\n\r\nIn this example, the _reference element_ and _target element_ were not specified so both\r\ndefault to the parent `plastic-resize-aware`.\r\n\r\nWhen the width of the plastic-resize-aware element is at least 50em _and_ the height is \r\nat least 40px, the classes bigfiz, bin and baz will be added to the  plastic-resize-aware element. When \r\nthat is no longer true, those classes will be removed.\r\n\r\nWhen the width of the plastic-resize-aware element is at most 225px _or_ the height is \r\nat most 20px, the class tinytext will be added to the  plastic-resize-aware element. When \r\nthat is no longer true, that class will be removed.\r\n\r\nIt is not necessary to locate the `plastic-element-query` inside `plastic-resize-aware` nor is it\r\nrequired to apply the CSS modification to the `plastic-resize-aware` element.  The `ref-element`\r\nattribute can be used to point to an instance of `plastic-resize-aware` by id (string).  In code\r\nyou can set `refElement` to an id string or an element reference to a `plastic-resize-aware`.\r\n\r\nSimilarly the target for applying CSS classes does not have to be a parent `plastic-resize-aware` or even\r\na `plastic-resize-aware` at all.  Use the `target-element` attribute to specify an id or set in code to\r\nan element reference.\r\n\r\n```html\r\n<plastic-resize-aware id=\"intheflow\" class=\"badabing\">\r\n    <some-sorta-content>...</some-sorta-content>\r\n</plastic-resize-aware>\r\n<div id=\"searcher\">...</div>\r\n<plastic-element-query query-expression=\"(min-width: 50em) and (min-height: 40px)\" \r\n    ref-element=\"intheflow\" target-element=\"searcher\"\r\n    assign-classes=\"bigfiz bin baz\"></plastic-element-query>\r\n<plastic-element-query query-expression=\"(max-width: 225px),(max-height: 20px)\" \r\n    ref-element=\"intheflow\" target-element=\"searcher\"\r\n    assign-classes=\"tinytext\"></plastic-element-query>\r\n ```\r\n\r\n #### Event\r\n\r\n `plastic-element-query` fires a `element-query-match` event when the matching status\r\n of its `queryExpression` changes.  The event detail includes:\r\n ```js\r\n{\r\n    queryExpression: // the query expression \r\n    matches: // boolean - new matching status\r\n    targetElement: // reference to the target element\r\n    classList: // the list of class names\r\n    width: // width of the ref-element\r\n    height: // height of the ref-element\r\n}\r\n```\r\n\r\n## Issues\r\n\r\nPlease submit issues via the github repository.\r\n\r\n## Contributions\r\n\r\nContributions via a PR are welcome. \r\n\r\n## License\r\n\r\nMIT\r\n","readmeFilename":"README.md"}