├── .editorconfig ├── .ember-cli ├── .eslintignore ├── .eslintrc.js ├── .gitignore ├── .npmignore ├── .template-lintrc.js ├── .travis.yml ├── .watchmanconfig ├── CONTRIBUTING.md ├── LICENSE.md ├── README.md ├── addon ├── .gitkeep ├── components │ └── squishable-container.js ├── raf.js └── templates │ └── components │ └── squishable-container.hbs ├── app ├── .gitkeep └── components │ └── squishable-container.js ├── config ├── ember-try.js └── environment.js ├── ember-cli-build.js ├── index.js ├── package.json ├── testem.js ├── tests ├── acceptance │ └── squishable-container-test.js ├── dummy │ ├── app │ │ ├── app.js │ │ ├── components │ │ │ └── .gitkeep │ │ ├── controllers │ │ │ ├── .gitkeep │ │ │ └── index.js │ │ ├── helpers │ │ │ └── .gitkeep │ │ ├── index.html │ │ ├── models │ │ │ └── .gitkeep │ │ ├── resolver.js │ │ ├── router.js │ │ ├── routes │ │ │ └── .gitkeep │ │ ├── styles │ │ │ └── app.css │ │ └── templates │ │ │ ├── application.hbs │ │ │ ├── components │ │ │ ├── .gitkeep │ │ │ └── lorem-ipsum.hbs │ │ │ └── index.hbs │ ├── config │ │ ├── environment.js │ │ ├── optional-features.json │ │ └── targets.js │ └── public │ │ └── robots.txt ├── helpers │ └── .gitkeep ├── index.html ├── integration │ └── .gitkeep ├── test-helper.js └── unit │ └── .gitkeep ├── vendor ├── .gitkeep └── squishable-container.css └── yarn.lock /.editorconfig: -------------------------------------------------------------------------------- 1 | # EditorConfig helps developers define and maintain consistent 2 | # coding styles between different editors and IDEs 3 | # editorconfig.org 4 | 5 | root = true 6 | 7 | 8 | [*] 9 | end_of_line = lf 10 | charset = utf-8 11 | trim_trailing_whitespace = true 12 | insert_final_newline = true 13 | indent_style = space 14 | indent_size = 2 15 | 16 | [*.hbs] 17 | insert_final_newline = false 18 | 19 | [*.{diff,md}] 20 | trim_trailing_whitespace = false 21 | -------------------------------------------------------------------------------- /.ember-cli: -------------------------------------------------------------------------------- 1 | { 2 | /** 3 | Ember CLI sends analytics information by default. The data is completely 4 | anonymous, but there are times when you might want to disable this behavior. 5 | 6 | Setting `disableAnalytics` to true will prevent any data from being sent. 7 | */ 8 | "disableAnalytics": false 9 | } 10 | -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | # unconventional js 2 | /blueprints/*/files/ 3 | /vendor/ 4 | 5 | # compiled output 6 | /dist/ 7 | /tmp/ 8 | 9 | # dependencies 10 | /bower_components/ 11 | /node_modules/ 12 | 13 | # misc 14 | /coverage/ 15 | !.* 16 | 17 | # ember-try 18 | /.node_modules.ember-try/ 19 | /bower.json.ember-try 20 | /package.json.ember-try 21 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | parserOptions: { 4 | ecmaVersion: 2018, 5 | sourceType: 'module' 6 | }, 7 | plugins: [ 8 | 'ember' 9 | ], 10 | extends: [ 11 | 'eslint:recommended', 12 | 'plugin:ember/recommended' 13 | ], 14 | env: { 15 | browser: true 16 | }, 17 | rules: { 18 | }, 19 | overrides: [ 20 | // node files 21 | { 22 | files: [ 23 | '.eslintrc.js', 24 | '.template-lintrc.js', 25 | 'ember-cli-build.js', 26 | 'index.js', 27 | 'testem.js', 28 | 'blueprints/*/index.js', 29 | 'config/**/*.js', 30 | 'tests/dummy/config/**/*.js' 31 | ], 32 | excludedFiles: [ 33 | 'addon/**', 34 | 'addon-test-support/**', 35 | 'app/**', 36 | 'tests/dummy/app/**' 37 | ], 38 | parserOptions: { 39 | sourceType: 'script', 40 | ecmaVersion: 2015 41 | }, 42 | env: { 43 | browser: false, 44 | node: true 45 | }, 46 | plugins: ['node'], 47 | rules: Object.assign({}, require('eslint-plugin-node').configs.recommended.rules, { 48 | // add your custom rules and overrides for node files here 49 | }) 50 | } 51 | ] 52 | }; 53 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # compiled output 4 | /dist/ 5 | /tmp/ 6 | 7 | # dependencies 8 | /bower_components/ 9 | /node_modules/ 10 | 11 | # misc 12 | /.env* 13 | /.pnp* 14 | /.sass-cache 15 | /connect.lock 16 | /coverage/ 17 | /libpeerconnection.log 18 | /npm-debug.log* 19 | /testem.log 20 | /yarn-error.log 21 | 22 | # ember-try 23 | /.node_modules.ember-try/ 24 | /bower.json.ember-try 25 | /package.json.ember-try 26 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | # compiled output 2 | /dist/ 3 | /tmp/ 4 | 5 | # dependencies 6 | /bower_components/ 7 | 8 | # misc 9 | /.bowerrc 10 | /.editorconfig 11 | /.ember-cli 12 | /.env* 13 | /.eslintignore 14 | /.eslintrc.js 15 | /.gitignore 16 | /.template-lintrc.js 17 | /.travis.yml 18 | /.watchmanconfig 19 | /bower.json 20 | /config/ember-try.js 21 | /CONTRIBUTING.md 22 | /ember-cli-build.js 23 | /testem.js 24 | /tests/ 25 | /yarn.lock 26 | .gitkeep 27 | 28 | # ember-try 29 | /.node_modules.ember-try/ 30 | /bower.json.ember-try 31 | /package.json.ember-try 32 | -------------------------------------------------------------------------------- /.template-lintrc.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | module.exports = { 4 | extends: 'recommended' 5 | }; 6 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | --- 2 | language: node_js 3 | node_js: 4 | # we recommend testing addons with the same minimum supported node version as Ember CLI 5 | # so that your addon works for all apps 6 | - "8" 7 | 8 | sudo: false 9 | dist: trusty 10 | 11 | addons: 12 | chrome: stable 13 | 14 | cache: 15 | - yarn 16 | 17 | env: 18 | global: 19 | # See https://git.io/vdao3 for details. 20 | - JOBS=1 21 | 22 | branches: 23 | only: 24 | - master 25 | # npm version tags 26 | - /^v\d+\.\d+\.\d+/ 27 | 28 | jobs: 29 | fail_fast: true 30 | allow_failures: 31 | - env: EMBER_TRY_SCENARIO=ember-canary 32 | 33 | include: 34 | # runs linting and tests with current locked deps 35 | 36 | - stage: "Tests" 37 | name: "Tests" 38 | script: 39 | - npm run lint:hbs 40 | - npm run lint:js 41 | - npm test 42 | 43 | # we recommend new addons test the current and previous LTS 44 | # as well as latest stable release (bonus points to beta/canary) 45 | - stage: "Additional Tests" 46 | env: EMBER_TRY_SCENARIO=ember-lts-2.18 47 | - env: EMBER_TRY_SCENARIO=ember-lts-3.4 48 | - env: EMBER_TRY_SCENARIO=ember-release 49 | - env: EMBER_TRY_SCENARIO=ember-beta 50 | - env: EMBER_TRY_SCENARIO=ember-canary 51 | - env: EMBER_TRY_SCENARIO=ember-default-with-jquery 52 | 53 | script: 54 | - node_modules/.bin/ember try:one $EMBER_TRY_SCENARIO 55 | -------------------------------------------------------------------------------- /.watchmanconfig: -------------------------------------------------------------------------------- 1 | { 2 | "ignore_dirs": ["tmp", "dist"] 3 | } 4 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # How To Contribute 2 | 3 | ## Installation 4 | 5 | * `git clone ` 6 | * `cd my-addon` 7 | * `npm install` 8 | 9 | ## Linting 10 | 11 | * `npm run lint:hbs` 12 | * `npm run lint:js` 13 | * `npm run lint:js -- --fix` 14 | 15 | ## Running tests 16 | 17 | * `ember test` – Runs the test suite on the current Ember version 18 | * `ember test --server` – Runs the test suite in "watch mode" 19 | * `ember try:each` – Runs the test suite against multiple Ember versions 20 | 21 | ## Running the dummy application 22 | 23 | * `ember serve` 24 | * Visit the dummy application at [http://localhost:4200](http://localhost:4200). 25 | 26 | For more information on using ember-cli, visit [https://ember-cli.com/](https://ember-cli.com/). -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2019 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: 6 | 7 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 8 | 9 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 10 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # squishable-container 2 | 3 | This addon provides a container that scales itself to match the available amount of space. 4 | 5 | 6 | `ember install squishable-container` 7 | 8 | ## Usage 9 | 10 | Wrap your content in `squishable-container`: 11 | 12 | ```hbs 13 | {{#squishable-container}} 14 | Your content here. 15 | {{/squishable-container}} 16 | ``` 17 | 18 | Now if anything else changes the width available to squishable-container, it will scale its content up or down to match. 19 | 20 | `squishable-container` necessarily needs to decide at what width it should set the scale to 100%. By default, it uses the full viewport width. You can pick a different width by setting the `width` and `unit` properties: 21 | 22 | ```hbs 23 | {{#squishable-container width=800 unit="px"}} 24 | Your content here. 25 | {{/squishable-container}} 26 | ``` 27 | 28 | Supported units include em, vw, px, rem, and ex; 29 | -------------------------------------------------------------------------------- /addon/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cardstack/squishable-container/3a2051b91f7a96e86588ed664c9eb6d89e54312d/addon/.gitkeep -------------------------------------------------------------------------------- /addon/components/squishable-container.js: -------------------------------------------------------------------------------- 1 | import { htmlSafe } from '@ember/template'; 2 | import { computed } from '@ember/object'; 3 | import Component from '@ember/component'; 4 | import layout from '../templates/components/squishable-container'; 5 | import { requestAnimationFrame } from '../raf'; 6 | 7 | const allowedUnits = ['em', 'vw', 'px', 'rem', 'ex']; 8 | 9 | export default Component.extend({ 10 | layout, 11 | width: 100, 12 | unit: 'vw', 13 | classNames: ['squishable-container'], 14 | 15 | init() { 16 | this._super(); 17 | this._scale = 1; 18 | }, 19 | 20 | innerStyle: computed('width', 'unit', function() { 21 | let width = this.get('width'); 22 | let unit = this.get('unit'); 23 | if (typeof width !== 'number') { 24 | throw new Error(`squishable-container: width must be a number, not ${width}`); 25 | } 26 | if (allowedUnits.indexOf(unit) === -1) { 27 | throw new Error(`squishable-container: unit must be one of [${allowedUnits.join(', ')}], not ${unit}`); 28 | } 29 | return htmlSafe(`width: ${width}${unit}`); 30 | }), 31 | 32 | didInsertElement() { 33 | requestAnimationFrame(() => this.updateScale()); 34 | }, 35 | updateScale() { 36 | if (this.isDestroyed) { return; } 37 | let scale = this.element.getBoundingClientRect().width / this.element.children[0].getBoundingClientRect().width; 38 | if (Math.abs(this._scale - scale) > 0.0001) { 39 | this.element.style.transform = `scale(${scale})`; 40 | this._scale = scale; 41 | } 42 | requestAnimationFrame(() => this.updateScale()); 43 | } 44 | }); 45 | -------------------------------------------------------------------------------- /addon/raf.js: -------------------------------------------------------------------------------- 1 | export function requestAnimationFrame(callback) { 2 | if (window.requestAnimationFrame) { 3 | return window.requestAnimationFrame(callback); 4 | } 5 | return setTimeout(callback, 33); 6 | } 7 | 8 | export function cancelAnimationFrame(which) { 9 | if (window.cancelAnimationFrame) { 10 | return window.cancelAnimationFrame(which); 11 | } 12 | return clearTimeout(which); 13 | } 14 | -------------------------------------------------------------------------------- /addon/templates/components/squishable-container.hbs: -------------------------------------------------------------------------------- 1 | {{! template-lint-disable no-inline-styles }} 2 |
3 | {{yield}} 4 |
5 | -------------------------------------------------------------------------------- /app/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cardstack/squishable-container/3a2051b91f7a96e86588ed664c9eb6d89e54312d/app/.gitkeep -------------------------------------------------------------------------------- /app/components/squishable-container.js: -------------------------------------------------------------------------------- 1 | export { default } from 'squishable-container/components/squishable-container'; -------------------------------------------------------------------------------- /config/ember-try.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | const getChannelURL = require('ember-source-channel-url'); 4 | 5 | module.exports = function() { 6 | return Promise.all([ 7 | getChannelURL('release'), 8 | getChannelURL('beta'), 9 | getChannelURL('canary') 10 | ]).then((urls) => { 11 | return { 12 | scenarios: [ 13 | { 14 | name: 'ember-lts-2.18', 15 | env: { 16 | EMBER_OPTIONAL_FEATURES: JSON.stringify({ 'jquery-integration': true }) 17 | }, 18 | npm: { 19 | devDependencies: { 20 | '@ember/jquery': '^0.5.1', 21 | 'ember-source': '~2.18.0' 22 | } 23 | } 24 | }, 25 | { 26 | name: 'ember-lts-3.4', 27 | npm: { 28 | devDependencies: { 29 | 'ember-source': '~3.4.0' 30 | } 31 | } 32 | }, 33 | { 34 | name: 'ember-release', 35 | npm: { 36 | devDependencies: { 37 | 'ember-source': urls[0] 38 | } 39 | } 40 | }, 41 | { 42 | name: 'ember-beta', 43 | npm: { 44 | devDependencies: { 45 | 'ember-source': urls[1] 46 | } 47 | } 48 | }, 49 | { 50 | name: 'ember-canary', 51 | npm: { 52 | devDependencies: { 53 | 'ember-source': urls[2] 54 | } 55 | } 56 | }, 57 | // The default `.travis.yml` runs this scenario via `npm test`, 58 | // not via `ember try`. It's still included here so that running 59 | // `ember try:each` manually or from a customized CI config will run it 60 | // along with all the other scenarios. 61 | { 62 | name: 'ember-default', 63 | npm: { 64 | devDependencies: {} 65 | } 66 | }, 67 | { 68 | name: 'ember-default-with-jquery', 69 | env: { 70 | EMBER_OPTIONAL_FEATURES: JSON.stringify({ 71 | 'jquery-integration': true 72 | }) 73 | }, 74 | npm: { 75 | devDependencies: { 76 | '@ember/jquery': '^0.5.1' 77 | } 78 | } 79 | } 80 | ] 81 | }; 82 | }); 83 | }; 84 | -------------------------------------------------------------------------------- /config/environment.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | module.exports = function(/* environment, appConfig */) { 4 | return { }; 5 | }; 6 | -------------------------------------------------------------------------------- /ember-cli-build.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | const EmberAddon = require('ember-cli/lib/broccoli/ember-addon'); 4 | 5 | module.exports = function(defaults) { 6 | let app = new EmberAddon(defaults, { 7 | // Add options here 8 | }); 9 | 10 | /* 11 | This build file specifies the options for the dummy test app of this 12 | addon, located in `/tests/dummy` 13 | This build file does *not* influence how the addon or the app using it 14 | behave. You most likely want to be modifying `./index.js` or app's build file 15 | */ 16 | 17 | return app.toTree(); 18 | }; 19 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | module.exports = { 4 | name: require('./package').name, 5 | included: function(app){ 6 | app.import('vendor/squishable-container.css'); 7 | } 8 | }; 9 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "squishable-container", 3 | "version": "1.0.0", 4 | "description": "A component that scales itself to fill available space.", 5 | "keywords": [ 6 | "ember-addon", 7 | "scale", 8 | "scaling", 9 | "container", 10 | "zoom", 11 | "zooming" 12 | ], 13 | "repository": "https://github.com/cardstack/squishable-container", 14 | "license": "MIT", 15 | "author": "Edward Faulkner ", 16 | "directories": { 17 | "doc": "doc", 18 | "test": "tests" 19 | }, 20 | "scripts": { 21 | "build": "ember build", 22 | "lint:hbs": "ember-template-lint .", 23 | "lint:js": "eslint .", 24 | "start": "ember serve", 25 | "test": "ember test", 26 | "test:all": "ember try:each" 27 | }, 28 | "dependencies": { 29 | "ember-cli-babel": "^7.7.3", 30 | "ember-cli-htmlbars": "^3.0.1" 31 | }, 32 | "devDependencies": { 33 | "@ember/jquery": "^0.6.1", 34 | "@ember/optional-features": "^0.7.0", 35 | "broccoli-asset-rev": "^3.0.0", 36 | "ember-cli": "~3.10.1", 37 | "ember-cli-dependency-checker": "^3.1.0", 38 | "ember-cli-eslint": "^5.1.0", 39 | "ember-cli-htmlbars-inline-precompile": "^2.1.0", 40 | "ember-cli-inject-live-reload": "^1.8.2", 41 | "ember-cli-sri": "^2.1.1", 42 | "ember-cli-template-lint": "^1.0.0-beta.1", 43 | "ember-cli-uglify": "^2.1.0", 44 | "ember-disable-prototype-extensions": "^1.1.3", 45 | "ember-export-application-global": "^2.0.0", 46 | "ember-load-initializers": "^2.0.0", 47 | "ember-maybe-import-regenerator": "^0.1.6", 48 | "ember-qunit": "^4.4.1", 49 | "ember-resolver": "^5.0.1", 50 | "ember-source": "~3.10.0", 51 | "ember-source-channel-url": "^1.1.0", 52 | "ember-try": "^1.0.0", 53 | "eslint-plugin-ember": "^6.2.0", 54 | "eslint-plugin-node": "^9.0.1", 55 | "liquid-fire": "^0.30.0", 56 | "loader.js": "^4.7.0", 57 | "qunit-dom": "^0.8.4" 58 | }, 59 | "engines": { 60 | "node": "8.* || >= 10.*" 61 | }, 62 | "ember-addon": { 63 | "configPath": "tests/dummy/config" 64 | } 65 | } 66 | -------------------------------------------------------------------------------- /testem.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | test_page: 'tests/index.html?hidepassed', 3 | disable_watching: true, 4 | launch_in_ci: [ 5 | 'Chrome' 6 | ], 7 | launch_in_dev: [ 8 | 'Chrome' 9 | ], 10 | browser_args: { 11 | Chrome: { 12 | ci: [ 13 | // --no-sandbox is needed when running Chrome inside a container 14 | process.env.CI ? '--no-sandbox' : null, 15 | '--headless', 16 | '--disable-gpu', 17 | '--disable-dev-shm-usage', 18 | '--disable-software-rasterizer', 19 | '--mute-audio', 20 | '--remote-debugging-port=0', 21 | '--window-size=1440,900' 22 | ].filter(Boolean) 23 | } 24 | } 25 | }; 26 | -------------------------------------------------------------------------------- /tests/acceptance/squishable-container-test.js: -------------------------------------------------------------------------------- 1 | import { click, visit } from '@ember/test-helpers'; 2 | import { module, test } from 'qunit'; 3 | import { setupApplicationTest } from 'ember-qunit'; 4 | 5 | module('Acceptance | squishable container', function(hooks) { 6 | setupApplicationTest(hooks); 7 | 8 | test('visiting /squishable-container', async function(assert) { 9 | await visit('/'); 10 | let scale = getScale(document.querySelector('.squishable-container')); 11 | await click('button'); 12 | let newScale = getScale(document.querySelector('.squishable-container')); 13 | assert.ok(newScale < scale); 14 | }); 15 | 16 | function getScale(elt) { 17 | return parseFloat(/matrix\((.*?),/.exec(getComputedStyle(elt)['transform'])[1], 10); 18 | } 19 | }); 20 | -------------------------------------------------------------------------------- /tests/dummy/app/app.js: -------------------------------------------------------------------------------- 1 | import Application from '@ember/application'; 2 | import Resolver from './resolver'; 3 | import loadInitializers from 'ember-load-initializers'; 4 | import config from './config/environment'; 5 | 6 | const App = Application.extend({ 7 | modulePrefix: config.modulePrefix, 8 | podModulePrefix: config.podModulePrefix, 9 | Resolver 10 | }); 11 | 12 | loadInitializers(App, config.modulePrefix); 13 | 14 | export default App; 15 | -------------------------------------------------------------------------------- /tests/dummy/app/components/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cardstack/squishable-container/3a2051b91f7a96e86588ed664c9eb6d89e54312d/tests/dummy/app/components/.gitkeep -------------------------------------------------------------------------------- /tests/dummy/app/controllers/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cardstack/squishable-container/3a2051b91f7a96e86588ed664c9eb6d89e54312d/tests/dummy/app/controllers/.gitkeep -------------------------------------------------------------------------------- /tests/dummy/app/controllers/index.js: -------------------------------------------------------------------------------- 1 | import Controller from '@ember/controller'; 2 | import { animate, Promise } from 'liquid-fire'; 3 | 4 | export default Controller.extend({ 5 | actions: { 6 | toggleSidebar() { 7 | this.set('showSidebar', !this.get('showSidebar')); 8 | } 9 | }, 10 | animateWidth 11 | }); 12 | 13 | function animateWidth() { 14 | let promises = []; 15 | if (this.newElement) { 16 | let width = this.newElement.width(); 17 | this.newElement.css('display', 'none'); 18 | promises.push( 19 | animate(this.newElement, { display: '', width: [ width, 0] }).then(() => { 20 | this.newElement.css('width', ''); 21 | }) 22 | ); 23 | } 24 | if (this.oldElement) { 25 | promises.push(animate(this.oldElement, { width: 0 })); 26 | } 27 | return Promise.all(promises); 28 | } 29 | -------------------------------------------------------------------------------- /tests/dummy/app/helpers/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cardstack/squishable-container/3a2051b91f7a96e86588ed664c9eb6d89e54312d/tests/dummy/app/helpers/.gitkeep -------------------------------------------------------------------------------- /tests/dummy/app/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Dummy 7 | 8 | 9 | 10 | {{content-for "head"}} 11 | 12 | 13 | 14 | 15 | {{content-for "head-footer"}} 16 | 17 | 18 | {{content-for "body"}} 19 | 20 | 21 | 22 | 23 | {{content-for "body-footer"}} 24 | 25 | 26 | -------------------------------------------------------------------------------- /tests/dummy/app/models/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cardstack/squishable-container/3a2051b91f7a96e86588ed664c9eb6d89e54312d/tests/dummy/app/models/.gitkeep -------------------------------------------------------------------------------- /tests/dummy/app/resolver.js: -------------------------------------------------------------------------------- 1 | import Resolver from 'ember-resolver'; 2 | 3 | export default Resolver; 4 | -------------------------------------------------------------------------------- /tests/dummy/app/router.js: -------------------------------------------------------------------------------- 1 | import EmberRouter from '@ember/routing/router'; 2 | import config from './config/environment'; 3 | 4 | const Router = EmberRouter.extend({ 5 | location: config.locationType, 6 | rootURL: config.rootURL 7 | }); 8 | 9 | Router.map(function() { 10 | }); 11 | 12 | export default Router; 13 | -------------------------------------------------------------------------------- /tests/dummy/app/routes/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cardstack/squishable-container/3a2051b91f7a96e86588ed664c9eb6d89e54312d/tests/dummy/app/routes/.gitkeep -------------------------------------------------------------------------------- /tests/dummy/app/styles/app.css: -------------------------------------------------------------------------------- 1 | .demo-page { 2 | display: flex; 3 | } 4 | 5 | .demo-page > .liquid-child { 6 | width: 20em; 7 | background-color: blue; 8 | height: 100vh; 9 | } 10 | 11 | .squishable-container { 12 | flex: 1; 13 | } 14 | -------------------------------------------------------------------------------- /tests/dummy/app/templates/application.hbs: -------------------------------------------------------------------------------- 1 |

Welcome to Ember

2 | 3 | {{outlet}} -------------------------------------------------------------------------------- /tests/dummy/app/templates/components/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cardstack/squishable-container/3a2051b91f7a96e86588ed664c9eb6d89e54312d/tests/dummy/app/templates/components/.gitkeep -------------------------------------------------------------------------------- /tests/dummy/app/templates/components/lorem-ipsum.hbs: -------------------------------------------------------------------------------- 1 |

Hello world

2 | 3 |

Quae dolores voluptatum qui est est dolor. Vitae similique dolorum aperiam reiciendis iusto consequatur. Vel illum voluptatibus eos sapiente aut. Rerum repudiandae id error. Ut ut sapiente perspiciatis quaerat.

4 | 5 |

Nostrum aliquid eaque magnam saepe fugiat dolores libero eius. Quia alias sint nisi accusamus. Possimus voluptatem officiis perspiciatis omnis asperiores qui dolore minus. Et qui delectus alias at.

6 | 7 |

Mollitia deserunt maiores ipsam quo. Reprehenderit laborum assumenda sed quod. Similique corporis blanditiis vero magnam placeat earum. Iste sunt facere et quidem. Perferendis id aut alias. Quos velit sed qui vel maxime cupiditate dolor.

8 | 9 |

In iste dicta soluta perferendis distinctio qui. Ea quis qui voluptatibus delectus possimus voluptas. Eos qui sint quaerat. Explicabo fugit facere fugit.

10 | 11 |

Sunt ut vero ut sit voluptatem ut occaecati. Aspernatur quia magnam doloribus. Optio ipsam sed debitis cupiditate consectetur labore.

12 | 13 |

Quae dolores voluptatum qui est est dolor. Vitae similique dolorum aperiam reiciendis iusto consequatur. Vel illum voluptatibus eos sapiente aut. Rerum repudiandae id error. Ut ut sapiente perspiciatis quaerat.

14 | 15 |

Nostrum aliquid eaque magnam saepe fugiat dolores libero eius. Quia alias sint nisi accusamus. Possimus voluptatem officiis perspiciatis omnis asperiores qui dolore minus. Et qui delectus alias at.

16 | 17 |

Mollitia deserunt maiores ipsam quo. Reprehenderit laborum assumenda sed quod. Similique corporis blanditiis vero magnam placeat earum. Iste sunt facere et quidem. Perferendis id aut alias. Quos velit sed qui vel maxime cupiditate dolor.

18 | 19 |

In iste dicta soluta perferendis distinctio qui. Ea quis qui voluptatibus delectus possimus voluptas. Eos qui sint quaerat. Explicabo fugit facere fugit.

20 | 21 |

Sunt ut vero ut sit voluptatem ut occaecati. Aspernatur quia magnam doloribus. Optio ipsam sed debitis cupiditate consectetur labore.

22 | 23 |

Quae dolores voluptatum qui est est dolor. Vitae similique dolorum aperiam reiciendis iusto consequatur. Vel illum voluptatibus eos sapiente aut. Rerum repudiandae id error. Ut ut sapiente perspiciatis quaerat.

24 | 25 |

Nostrum aliquid eaque magnam saepe fugiat dolores libero eius. Quia alias sint nisi accusamus. Possimus voluptatem officiis perspiciatis omnis asperiores qui dolore minus. Et qui delectus alias at.

26 | 27 |

Mollitia deserunt maiores ipsam quo. Reprehenderit laborum assumenda sed quod. Similique corporis blanditiis vero magnam placeat earum. Iste sunt facere et quidem. Perferendis id aut alias. Quos velit sed qui vel maxime cupiditate dolor.

28 | 29 |

In iste dicta soluta perferendis distinctio qui. Ea quis qui voluptatibus delectus possimus voluptas. Eos qui sint quaerat. Explicabo fugit facere fugit.

30 | 31 |

Sunt ut vero ut sit voluptatem ut occaecati. Aspernatur quia magnam doloribus. Optio ipsam sed debitis cupiditate consectetur labore.

32 | 33 |

Quae dolores voluptatum qui est est dolor. Vitae similique dolorum aperiam reiciendis iusto consequatur. Vel illum voluptatibus eos sapiente aut. Rerum repudiandae id error. Ut ut sapiente perspiciatis quaerat.

34 | 35 |

Nostrum aliquid eaque magnam saepe fugiat dolores libero eius. Quia alias sint nisi accusamus. Possimus voluptatem officiis perspiciatis omnis asperiores qui dolore minus. Et qui delectus alias at.

36 | 37 |

Mollitia deserunt maiores ipsam quo. Reprehenderit laborum assumenda sed quod. Similique corporis blanditiis vero magnam placeat earum. Iste sunt facere et quidem. Perferendis id aut alias. Quos velit sed qui vel maxime cupiditate dolor.

38 | 39 |

In iste dicta soluta perferendis distinctio qui. Ea quis qui voluptatibus delectus possimus voluptas. Eos qui sint quaerat. Explicabo fugit facere fugit.

40 | 41 |

Sunt ut vero ut sit voluptatem ut occaecati. Aspernatur quia magnam doloribus. Optio ipsam sed debitis cupiditate consectetur labore.

42 | 43 |

Quae dolores voluptatum qui est est dolor. Vitae similique dolorum aperiam reiciendis iusto consequatur. Vel illum voluptatibus eos sapiente aut. Rerum repudiandae id error. Ut ut sapiente perspiciatis quaerat.

44 | 45 |

Nostrum aliquid eaque magnam saepe fugiat dolores libero eius. Quia alias sint nisi accusamus. Possimus voluptatem officiis perspiciatis omnis asperiores qui dolore minus. Et qui delectus alias at.

46 | 47 |

Mollitia deserunt maiores ipsam quo. Reprehenderit laborum assumenda sed quod. Similique corporis blanditiis vero magnam placeat earum. Iste sunt facere et quidem. Perferendis id aut alias. Quos velit sed qui vel maxime cupiditate dolor.

48 | 49 |

In iste dicta soluta perferendis distinctio qui. Ea quis qui voluptatibus delectus possimus voluptas. Eos qui sint quaerat. Explicabo fugit facere fugit.

50 | 51 |

Sunt ut vero ut sit voluptatem ut occaecati. Aspernatur quia magnam doloribus. Optio ipsam sed debitis cupiditate consectetur labore.

52 | 53 |

Quae dolores voluptatum qui est est dolor. Vitae similique dolorum aperiam reiciendis iusto consequatur. Vel illum voluptatibus eos sapiente aut. Rerum repudiandae id error. Ut ut sapiente perspiciatis quaerat.

54 | 55 |

Nostrum aliquid eaque magnam saepe fugiat dolores libero eius. Quia alias sint nisi accusamus. Possimus voluptatem officiis perspiciatis omnis asperiores qui dolore minus. Et qui delectus alias at.

56 | 57 |

Mollitia deserunt maiores ipsam quo. Reprehenderit laborum assumenda sed quod. Similique corporis blanditiis vero magnam placeat earum. Iste sunt facere et quidem. Perferendis id aut alias. Quos velit sed qui vel maxime cupiditate dolor.

58 | 59 |

In iste dicta soluta perferendis distinctio qui. Ea quis qui voluptatibus delectus possimus voluptas. Eos qui sint quaerat. Explicabo fugit facere fugit.

60 | 61 |

Sunt ut vero ut sit voluptatem ut occaecati. Aspernatur quia magnam doloribus. Optio ipsam sed debitis cupiditate consectetur labore.

62 | 63 |

Quae dolores voluptatum qui est est dolor. Vitae similique dolorum aperiam reiciendis iusto consequatur. Vel illum voluptatibus eos sapiente aut. Rerum repudiandae id error. Ut ut sapiente perspiciatis quaerat.

64 | 65 |

Nostrum aliquid eaque magnam saepe fugiat dolores libero eius. Quia alias sint nisi accusamus. Possimus voluptatem officiis perspiciatis omnis asperiores qui dolore minus. Et qui delectus alias at.

66 | 67 |

Mollitia deserunt maiores ipsam quo. Reprehenderit laborum assumenda sed quod. Similique corporis blanditiis vero magnam placeat earum. Iste sunt facere et quidem. Perferendis id aut alias. Quos velit sed qui vel maxime cupiditate dolor.

68 | 69 |

In iste dicta soluta perferendis distinctio qui. Ea quis qui voluptatibus delectus possimus voluptas. Eos qui sint quaerat. Explicabo fugit facere fugit.

70 | 71 |

Sunt ut vero ut sit voluptatem ut occaecati. Aspernatur quia magnam doloribus. Optio ipsam sed debitis cupiditate consectetur labore.

72 | 73 |

Quae dolores voluptatum qui est est dolor. Vitae similique dolorum aperiam reiciendis iusto consequatur. Vel illum voluptatibus eos sapiente aut. Rerum repudiandae id error. Ut ut sapiente perspiciatis quaerat.

74 | 75 |

Nostrum aliquid eaque magnam saepe fugiat dolores libero eius. Quia alias sint nisi accusamus. Possimus voluptatem officiis perspiciatis omnis asperiores qui dolore minus. Et qui delectus alias at.

76 | 77 |

Mollitia deserunt maiores ipsam quo. Reprehenderit laborum assumenda sed quod. Similique corporis blanditiis vero magnam placeat earum. Iste sunt facere et quidem. Perferendis id aut alias. Quos velit sed qui vel maxime cupiditate dolor.

78 | 79 |

In iste dicta soluta perferendis distinctio qui. Ea quis qui voluptatibus delectus possimus voluptas. Eos qui sint quaerat. Explicabo fugit facere fugit.

80 | 81 |

Sunt ut vero ut sit voluptatem ut occaecati. Aspernatur quia magnam doloribus. Optio ipsam sed debitis cupiditate consectetur labore.

82 | -------------------------------------------------------------------------------- /tests/dummy/app/templates/index.hbs: -------------------------------------------------------------------------------- 1 |
2 | 3 | {{#liquid-if showSidebar use=animateWidth containerless=true}} 4 |
5 |
6 | {{/liquid-if}} 7 | 8 | {{#squishable-container width=600 unit="px"}} 9 | 10 | {{lorem-ipsum}} 11 | {{/squishable-container}} 12 | 13 |
-------------------------------------------------------------------------------- /tests/dummy/config/environment.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | module.exports = function(environment) { 4 | let ENV = { 5 | modulePrefix: 'dummy', 6 | environment, 7 | rootURL: '/', 8 | locationType: 'auto', 9 | EmberENV: { 10 | FEATURES: { 11 | // Here you can enable experimental features on an ember canary build 12 | // e.g. EMBER_NATIVE_DECORATOR_SUPPORT: true 13 | }, 14 | EXTEND_PROTOTYPES: { 15 | // Prevent Ember Data from overriding Date.parse. 16 | Date: false 17 | } 18 | }, 19 | 20 | APP: { 21 | // Here you can pass flags/options to your application instance 22 | // when it is created 23 | } 24 | }; 25 | 26 | if (environment === 'development') { 27 | // ENV.APP.LOG_RESOLVER = true; 28 | // ENV.APP.LOG_ACTIVE_GENERATION = true; 29 | // ENV.APP.LOG_TRANSITIONS = true; 30 | // ENV.APP.LOG_TRANSITIONS_INTERNAL = true; 31 | // ENV.APP.LOG_VIEW_LOOKUPS = true; 32 | } 33 | 34 | if (environment === 'test') { 35 | // Testem prefers this... 36 | ENV.locationType = 'none'; 37 | 38 | // keep test console output quieter 39 | ENV.APP.LOG_ACTIVE_GENERATION = false; 40 | ENV.APP.LOG_VIEW_LOOKUPS = false; 41 | 42 | ENV.APP.rootElement = '#ember-testing'; 43 | ENV.APP.autoboot = false; 44 | } 45 | 46 | if (environment === 'production') { 47 | // here you can enable a production-specific feature 48 | } 49 | 50 | return ENV; 51 | }; 52 | -------------------------------------------------------------------------------- /tests/dummy/config/optional-features.json: -------------------------------------------------------------------------------- 1 | { 2 | "jquery-integration": true 3 | } 4 | -------------------------------------------------------------------------------- /tests/dummy/config/targets.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | const browsers = [ 4 | 'last 1 Chrome versions', 5 | 'last 1 Firefox versions', 6 | 'last 1 Safari versions' 7 | ]; 8 | 9 | const isCI = !!process.env.CI; 10 | const isProduction = process.env.EMBER_ENV === 'production'; 11 | 12 | if (isCI || isProduction) { 13 | browsers.push('ie 11'); 14 | } 15 | 16 | module.exports = { 17 | browsers 18 | }; 19 | -------------------------------------------------------------------------------- /tests/dummy/public/robots.txt: -------------------------------------------------------------------------------- 1 | # http://www.robotstxt.org 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /tests/helpers/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cardstack/squishable-container/3a2051b91f7a96e86588ed664c9eb6d89e54312d/tests/helpers/.gitkeep -------------------------------------------------------------------------------- /tests/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Dummy Tests 7 | 8 | 9 | 10 | {{content-for "head"}} 11 | {{content-for "test-head"}} 12 | 13 | 14 | 15 | 16 | 17 | {{content-for "head-footer"}} 18 | {{content-for "test-head-footer"}} 19 | 20 | 21 | {{content-for "body"}} 22 | {{content-for "test-body"}} 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | {{content-for "body-footer"}} 31 | {{content-for "test-body-footer"}} 32 | 33 | 34 | -------------------------------------------------------------------------------- /tests/integration/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cardstack/squishable-container/3a2051b91f7a96e86588ed664c9eb6d89e54312d/tests/integration/.gitkeep -------------------------------------------------------------------------------- /tests/test-helper.js: -------------------------------------------------------------------------------- 1 | import Application from '../app'; 2 | import config from '../config/environment'; 3 | import { setApplication } from '@ember/test-helpers'; 4 | import { start } from 'ember-qunit'; 5 | 6 | setApplication(Application.create(config.APP)); 7 | 8 | start(); 9 | -------------------------------------------------------------------------------- /tests/unit/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cardstack/squishable-container/3a2051b91f7a96e86588ed664c9eb6d89e54312d/tests/unit/.gitkeep -------------------------------------------------------------------------------- /vendor/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cardstack/squishable-container/3a2051b91f7a96e86588ed664c9eb6d89e54312d/vendor/.gitkeep -------------------------------------------------------------------------------- /vendor/squishable-container.css: -------------------------------------------------------------------------------- 1 | .squishable-container { 2 | position: relative; 3 | transform-origin: 0 0; 4 | will-change: transform; 5 | } 6 | 7 | .squishable-container > div { 8 | position: absolute; 9 | top: 0; 10 | left: 0; 11 | } 12 | --------------------------------------------------------------------------------