{"id":21648545,"url":"https://github.com/kristw/slimfit","last_synced_at":"2025-04-11T19:33:56.551Z","repository":{"id":57363225,"uuid":"65457614","full_name":"kristw/slimfit","owner":"kristw","description":"Slim library for fitting things","archived":false,"fork":false,"pushed_at":"2016-11-02T19:11:53.000Z","size":106,"stargazers_count":2,"open_issues_count":0,"forks_count":2,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-05-02T07:06:36.656Z","etag":null,"topics":["dimensions","dom","javascript","size-calculation"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/kristw.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-08-11T09:37:31.000Z","updated_at":"2018-12-01T06:09:37.000Z","dependencies_parsed_at":"2022-08-30T21:31:18.007Z","dependency_job_id":null,"html_url":"https://github.com/kristw/slimfit","commit_stats":null,"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kristw%2Fslimfit","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kristw%2Fslimfit/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kristw%2Fslimfit/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kristw%2Fslimfit/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kristw","download_url":"https://codeload.github.com/kristw/slimfit/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248467393,"owners_count":21108633,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["dimensions","dom","javascript","size-calculation"],"created_at":"2024-11-25T06:58:14.545Z","updated_at":"2025-04-11T19:33:56.523Z","avatar_url":"https://github.com/kristw.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"**Introduction** |\n[API Reference](https://github.com/kristw/slimfit/blob/master/docs/api.md)\n\n# slimfit [![NPM version][npm-image]][npm-url] [![Build Status][travis-image]][travis-url] [![Dependency Status][daviddm-image]][daviddm-url]\n\nSlim library for fitting and resizing boxes.\n\n## Definition\n\nFor slimfit, a **box** is anything that has dimension:\n\n1. DOM Element\n2. Array `[width, height]`\n3. Any Object with fields `width` and `height`.\n4. Function that returns any of the above.\n\n## Features\n\n### 1. Fit one *box* into another *box* with `Fitter`\n\n#### const fitter = new Fitter(fitOptions)\n\n```javascript\nimport { Fitter } from 'slimfit';\n\n// For basic fitting\nconst fitter = new Fitter({\n  mode: 'basic', // if mode is not specified, use 'basic' by default\n  width: '100%', // (optional) 100% of container\n  height: 100    // (optional) 100 pixels\n});\n\n// To maintain aspect ratio of the content\nconst fitter2 = new Fitter({\n  mode: 'aspectRatio',\n  ratio: 16/9,\n  maxWidth: 1600, // (optional)\n  maxHeight: 900  // (optional)\n});\n```\n\nThe fields `width`, `height`, `maxWidth` and `maxHeight` in `fitOptions` can be:\n\n* `'10%'` =\u003e 10% of container\n* `10` =\u003e 10 pixels\n* `'10px'` =\u003e 10 pixels\n* `'10'` =\u003e 10 pixels\n* `null` =\u003e (default) will make sure content is not larger than container\n\n#### const result = fitter.fit(content, container)\n\nThen you can compute how to fit `content` box into a `container` box. This `fit()` function returns an `Object` with two fields: `changed` and `dimension`. **Note that this function DOES NOT RESIZE `content` for you**. It only tells you if you need to resize and if so, what new size should the `content` be.\n\n- **result.changed:***Boolean* is `true` if `content` need to be resized to the returned `dimension` in order to fit `container`. It is `false` if `content` is already fit. In the latter case, content's dimension is equal to the returned dimension.\n- **result.dimension:***Dimension* is a `Dimension` object, which has field `width` and `height`. This is the dimension that will make the *content* fit *container* based on the given options when constructing the `Fitter`.\n\n```javascript\n// 1) Box can be DOM element\nconst result = fitter.fit(\n  document.querySelector('.content'),\n  document.querySelector('.container')\n);\n// result = { changed: true/false, dimension }\n```\n\n```javascript\n// 2) Box can be any Object with field width and height\nconst result = fitter.fit(\n  { width: 100, height: 200},\n  { width: 400, height: 400}\n);\n// result = { changed: true/false, dimension }\n```\n\n```javascript\n// 3) Box can be a dimension array: [width, height]\nconst result = fitter.fit(\n  [100,200],\n  [400,400]\n);\n// result = { changed: true/false, dimension }\n```\n\n```javascript\n// 4) Also support getter function that returns any of the above\nconst result = fitter.fit(\n  () =\u003e [100,200],\n  () =\u003e [400,400]\n);\n// result = { changed: true/false, dimension }\n```\n\n### 2. Watch for *box* size change and gets notification with `Watcher`.\n\nOne repetitive task for making responsive component is to watch for size changes.\n\n#### const watcher = new Watcher(watchOptions)\n\n```javascript\nimport { Watcher } from 'slimfit';\n\nconst watcher = new Watcher({\n  mode: 'window',\n  target: null,\n  interval: 500\n})\n.on('change', dimension =\u003e {\n  // do something\n})\n.start();\n```\n\n##### watchOptions\n* **mode:***String* -- A watcher can operates in two modes: `'window'` and `'polling'`. For *window* mode, it will check every time the window is resized. For *polling* mode, it will create a timer and check every `interval`. The latter is useful if the target can be resized without the entire window being resized.\n* **target:***Box* -- Target *box* to check size. The watcher will dispatch event `'change'` if the size of the target has changed from last time. If not specified, will check window size.\n* **interval:***Number* -- time in ms. For *window* mode, it will ensure that the *Watcher* does not fire more often than once every `interval` ms (i.e. throttled). For *polling*, this value will be used as an interval for the timer to check.\n\n#### watcher.on(name, listener)\nAdd event listener\n\n#### watcher.off(name, listener)\nRemove event listener\n\n#### watcher.start()\nStart the watcher\n\n#### watcher.stop()\nStop the watcher\n\n### 3. Watch for box size change and only notifies if need to resize again to fit.\n\nNow if you want to fit one *box* into another *box* and also make sure to do again that if anything was resized, `FitWatcher` is your solution. **Again, note that it does not resize the box for you. It only notifies that you need to resize and what the new dimension should be.**\n\n#### new FitWatcher(content, container, fitOptions, watchOptions)\n\nThe arguments `fitOptions` uses the same specification explained in `Fitter` while `watchOptions` uses the specification from `Watcher`.\n\n```javascript\nimport { FitWatcher } from 'slimfit';\n\nconst fitWatcher = new FitWatcher(\n  document.querySelector('.content'),\n  document.querySelector('.container'),\n  fitOptions,\n  watchOptions\n)\n.on('change', dimension =\u003e {\n  // do something\n})\n.start();\n```\n\n#### fitWatcher.on(name, listener)\nAdd event listener\n\n#### fitWatcher.off(name, listener)\nRemove event listener\n\n#### fitWatcher.start()\nStart the watcher\n\n#### fitWatcher.stop()\nStop the watcher\n\n## Install\n\n```\nnpm install slimfit --save\n```\n\nor\n\n```\nbower install slimfit --save\n```\n\n### Import into your project\n\n##### Choice 1. Global\n\nAdding this library via ```\u003cscript\u003e``` tag is the simplest way. By doing this, ```slimfit``` is available in the global scope.\n\n```html\n\u003cscript src=\"bower_components/slimfit/dist/slimfit.min.js\"\u003e\u003c/script\u003e\n```\n\n##### Choice 2: ES6 Import\n\n```javascript\nimport { Fitter, Watcher, FitWatcher } from 'slimfit';\n```\n\n##### Choice 3: AMD\n\nIf you use requirejs, this library support AMD out of the box.\n\n```javascript\nrequire.config({\n  paths: {\n    'slimfit': 'path/to/slimfit'\n  }\n});\nrequire(['slimfit'], function(slimfit) {\n  // do something with slimfit\n});\n```\n\n##### Choice 4: node.js / browserify\n\nThis library also supports usage in commonjs style.\n\n```javascript\nvar slimfit = require('slimfit');\n// do something with slimfit\n```\n\n## License\n\n© 2016 [Krist Wongsuphasawat](http://kristw.yellowpigz.com)  ([@kristw](https://twitter.com/kristw)) Apache-2.0 License\n\n[npm-image]: https://badge.fury.io/js/slimfit.svg\n[npm-url]: https://npmjs.org/package/slimfit\n[travis-image]: https://travis-ci.org/kristw/slimfit.svg?branch=master\n[travis-url]: https://travis-ci.org/kristw/slimfit\n[daviddm-image]: https://david-dm.org/kristw/slimfit.svg?theme=shields.io\n[daviddm-url]: https://david-dm.org/kristw/slimfit","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkristw%2Fslimfit","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkristw%2Fslimfit","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkristw%2Fslimfit/lists"}