├── LICENSE ├── README.md ├── demo.html ├── package.json └── resizeasaurus.js /LICENSE: -------------------------------------------------------------------------------- 1 | Copyright (c) 2019 Filament Group 2 | 3 | Permission is hereby granted, free of charge, to any person 4 | obtaining a copy of this software and associated documentation 5 | files (the "Software"), to deal in the Software without 6 | restriction, including without limitation the rights to use, 7 | copy, modify, merge, publish, distribute, sublicense, and/or sell 8 | copies of the Software, and to permit persons to whom the 9 | Software is furnished to do so, subject to the following 10 | conditions: 11 | 12 | The above copyright notice and this permission notice shall be 13 | included in all copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 16 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES 17 | OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND 18 | NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT 19 | HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, 20 | WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING 21 | FROM, OUT OF OR IN CONNECTION WITH THE SOFT 22 | WARE OR THE USE OR 23 | OTHER DEALINGS IN THE SOFTWARE. 24 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # resizeasaurus 2 | 3 | A web component to add resizing behavior to test intrinsically sized responsive components. 4 | 5 | ## Install 6 | 7 | ``` 8 | npm install @zachleat/resizeasaurus --save 9 | ``` 10 | 11 | ## Demo 12 | 13 | * [https://resizeasaurus.zachleat.dev/demo.html](https://resizeasaurus.zachleat.dev/demo.html) 14 | 15 | ## Usage 16 | 17 | ``` 18 | 19 | My component goes here 20 | 21 | ``` 22 | 23 | Add the `disabled` attribute to disable the component behavior (and hide its styling). 24 | 25 | ``` 26 | 27 | My component goes here 28 | 29 | ``` 30 | 31 | Add the `label="disabled"` attribute to disable the live width text. 32 | 33 | ``` 34 | 35 | My component goes here 36 | 37 | ``` 38 | -------------------------------------------------------------------------------- /demo.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | resizeasaurus 7 | 8 | 9 | 41 | 42 | 43 |
44 |

resizeasaurus

45 |

Source code available at https://github.com/zachleat/resizeasaurus.

46 | 47 | 48 |
49 |
Cell 1
50 |
Cell 2
51 |
Cell 3
52 |
Cell 4
53 |
Cell 5
54 |
Cell 6
55 |
56 | 57 | 58 |

persist Width

59 | 60 |
61 |
Cell 1
62 |
Cell 2
63 |
Cell 3
64 |
Cell 4
65 |
Cell 5
66 |
Cell 6
67 |
68 | 69 | 70 |

position="static" persist (no overlay)

71 | 72 |
73 |
Cell 1
74 |
Cell 2
75 |
Cell 3
76 |
Cell 4
77 |
Cell 5
78 |
Cell 6
79 |
80 | 81 | 82 |

label="disabled" to Hide Width

83 | 84 |
85 |
Cell 1
86 |
Cell 2
87 |
Cell 3
88 |
Cell 4
89 |
Cell 5
90 |
Cell 6
91 |
92 | 93 | 94 |

disabled

95 | 96 |
97 |
Cell 1
98 |
Cell 2
99 |
Cell 3
100 |
Cell 4
101 |
Cell 5
102 |
Cell 6
103 |
104 | 105 |
106 | 107 | 108 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@zachleat/resizeasaurus", 3 | "version": "4.0.3", 4 | "description": "A web component to add resizing behavior to test intrinsically sized responsive components.", 5 | "main": "resizeasaurus.js", 6 | "publishConfig": { 7 | "access": "public" 8 | }, 9 | "scripts": { 10 | "start": "npx http-server ." 11 | }, 12 | "repository": { 13 | "type": "git", 14 | "url": "git+https://github.com/zachleat/resizeasaurus.git" 15 | }, 16 | "author": { 17 | "name": "Zach Leatherman", 18 | "email": "zachleatherman@gmail.com", 19 | "url": "https://zachleat.com/" 20 | }, 21 | "license": "MIT", 22 | "bugs": { 23 | "url": "https://github.com/zachleat/resizeasaurus/issues" 24 | }, 25 | "homepage": "https://github.com/zachleat/resizeasaurus#readme" 26 | } 27 | -------------------------------------------------------------------------------- /resizeasaurus.js: -------------------------------------------------------------------------------- 1 | class ResizeASaurus extends HTMLElement { 2 | static delay = 1000; 3 | 4 | static attr = { 5 | disabled: "disabled", 6 | label: "label", 7 | persist: "persist", 8 | position: "position", // "static" 9 | }; 10 | 11 | static classes = { 12 | sizer: "sizer", 13 | active: "active", 14 | }; 15 | 16 | static css = ` 17 | @supports (resize: horizontal) { 18 | :host { 19 | --resizeasaurus-color: #000; 20 | --resizeasaurus-background: rgba(255,255,255,.7); 21 | } 22 | @media (prefers-color-scheme: dark) { 23 | :host { 24 | --resizeasaurus-color: #ccc; 25 | --resizeasaurus-background: rgba(0,0,0,.7); 26 | } 27 | } 28 | :host(:not([${ResizeASaurus.attr.disabled}]):defined) { 29 | display: grid; 30 | resize: horizontal; 31 | overflow: auto; 32 | } 33 | 34 | .sizer { 35 | align-self: end; 36 | justify-self: end; 37 | color: var(--resizeasaurus-color); 38 | background-color: var(--resizeasaurus-background); 39 | font-family: system-ui, sans-serif; 40 | font-variant-numeric: tabular-nums; 41 | padding: .25em 1.5em .25em 1em; 42 | font-size: 0.8125em; /* 13px /16 */ 43 | border-radius: .5em 0 0 0; 44 | pointer-events: none; 45 | opacity: 0; 46 | transition: .3s opacity; 47 | } 48 | .sizer.active, 49 | :host([${ResizeASaurus.attr.persist}]) .sizer { 50 | opacity: 1; 51 | } 52 | :host(:not([${ResizeASaurus.attr.position}="static"]):defined) .sizer { 53 | margin-top: -100%; 54 | } 55 | } 56 | `; 57 | 58 | connectedCallback() { 59 | // https://caniuse.com/mdn-api_cssstylesheet_replacesync 60 | if(this.shadowRoot || !CSS.supports("resize", "horizontal") || !("replaceSync" in CSSStyleSheet.prototype) || this.hasAttribute(ResizeASaurus.attr.disabled)) { 61 | return; 62 | } 63 | 64 | let shadowroot = this.attachShadow({ mode: "open" }); 65 | 66 | let sheet = new CSSStyleSheet(); 67 | sheet.replaceSync(ResizeASaurus.css); 68 | shadowroot.adoptedStyleSheets = [sheet]; 69 | 70 | let slot = document.createElement("slot"); 71 | shadowroot.appendChild(slot); 72 | 73 | if(this.getAttribute(ResizeASaurus.attr.label) === "disabled") { 74 | return; 75 | } 76 | 77 | let sizer = document.createElement("output"); 78 | sizer.classList.add(ResizeASaurus.classes.sizer); 79 | sizer.textContent = "Drag to resize"; 80 | shadowroot.appendChild(sizer); 81 | this.sizer = sizer; 82 | 83 | if("ResizeObserver" in window) { 84 | let timer; 85 | this.resizer = new ResizeObserver(() => { 86 | clearTimeout(timer); 87 | timer = setTimeout(() => { 88 | sizer.classList.remove(ResizeASaurus.classes.active); 89 | }, ResizeASaurus.delay); 90 | sizer.classList.add(ResizeASaurus.classes.active); 91 | 92 | let width = this.clientWidth + "px"; 93 | sizer.innerHTML = `${parseInt(width, 10) / 16}em (${width})`; 94 | }); 95 | this.resizer.observe(this); 96 | } 97 | } 98 | 99 | resize() { 100 | this.sizer.innerHTML = this.outerWidth; 101 | } 102 | } 103 | 104 | if("customElements" in window) { 105 | customElements.define("resize-asaurus", ResizeASaurus); 106 | } --------------------------------------------------------------------------------