├── LICENSE ├── README.md ├── demo.html ├── package.json ├── resizeasaurus.css └── 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 | :warning: This project is archived and the repository is no longer maintained. 2 | 3 | # resizeasaurus 4 | 5 | A little utility to add resizing behavior to test intrinsically sized responsive components. 6 | 7 | ## Install 8 | 9 | ``` 10 | npm install resizeasaurus --save 11 | ``` 12 | 13 | ## Demo 14 | 15 | * [https://filamentgroup.github.io/resizeasaurus/demo.html](https://filamentgroup.github.io/resizeasaurus/demo.html) 16 | 17 | ## Usage 18 | 19 | ``` 20 | 21 | My component goes here 22 | 23 | ``` 24 | 25 | Add the `disabled` attribute to disable the component behavior (and hide its styling). 26 | 27 | ``` 28 | 29 | My component goes here 30 | 31 | ``` 32 | -------------------------------------------------------------------------------- /demo.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | resizeasaurus 7 | 8 | 9 | 10 | 24 | 25 | 26 |
27 |

resizeasaurus

28 |

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

29 | 30 | 31 |
32 |
Cell 1
33 |
Cell 2
34 |
Cell 3
35 |
Cell 4
36 |
Cell 5
37 |
Cell 6
38 |
39 | 40 |
41 | 42 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "resizeasaurus", 3 | "version": "1.0.2", 4 | "description": "A little utility to add resizing behavior to test intrinsically sized responsive components.", 5 | "scripts": { 6 | }, 7 | "repository": { 8 | "type": "git", 9 | "url": "git+https://github.com/filamentgroup/resizeasaurus.git" 10 | }, 11 | "author": { 12 | "name": "Zach Leatherman", 13 | "company": "Filament Group", 14 | "email": "zach@filamentgroup.com", 15 | "url": "http://filamentgroup.com/" 16 | }, 17 | "license": "MIT", 18 | "bugs": { 19 | "url": "https://github.com/filamentgroup/resizeasaurus/issues" 20 | }, 21 | "homepage": "https://github.com/filamentgroup/resizeasaurus#readme" 22 | } 23 | -------------------------------------------------------------------------------- /resizeasaurus.css: -------------------------------------------------------------------------------- 1 | .resizeasaurus-size { 2 | display: none; 3 | } 4 | @supports (resize: horizontal) { 5 | .resizeasaurus { 6 | display: block; 7 | padding: 0; 8 | resize: horizontal; 9 | overflow: auto; 10 | border-bottom: 3px solid #ccc; 11 | margin: 0 0 6em; 12 | background-color: #f9f9f9; 13 | } 14 | /* Workaround for Safari refusing to go below initial content width */ 15 | .resizeasaurus:active { 16 | width: var(--resizeasaurus-initial-width, 1px); 17 | } 18 | .resizeasaurus-size { 19 | display: block; 20 | text-align: right; 21 | bottom: 0; 22 | padding-right: 1.5em; 23 | font-size: 0.8125em; /* 13px /16 */ 24 | color: #666; 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /resizeasaurus.js: -------------------------------------------------------------------------------- 1 | if( "customElements" in window) { 2 | class ResizeASaurus extends HTMLElement { 3 | connectedCallback() { 4 | if(!CSS.supports("resize", "horizontal") || this.getAttribute("disabled") === "") { 5 | return; 6 | } 7 | 8 | this.classList.add("resizeasaurus"); 9 | 10 | this.size = this.querySelector(".resizeasaurus-size"); 11 | if(!this.size) { 12 | this.size = document.createElement("div"); 13 | this.size.classList.add("resizeasaurus-size"); 14 | this.size.textContent = "Drag to resize"; 15 | this.appendChild(this.size); 16 | } 17 | 18 | if("ResizeObserver" in window) { 19 | let isSet = false; 20 | this.resizer = new ResizeObserver(entries => { 21 | let width = this.clientWidth + "px"; 22 | this.size.innerHTML = width; 23 | if(!window.safari && !isSet) { 24 | isSet = true; 25 | this.style.setProperty("--resizeasaurus-initial-width", width); 26 | } 27 | }); 28 | this.resizer.observe(this); 29 | } 30 | } 31 | 32 | resize() { 33 | this.size.innerHTML = this.outerWidth; 34 | } 35 | } 36 | 37 | customElements.define("resize-asaurus", ResizeASaurus); 38 | } --------------------------------------------------------------------------------