{"id":13694959,"url":"https://github.com/vivaxy/impression","last_synced_at":"2025-05-03T04:31:21.430Z","repository":{"id":57273089,"uuid":"72172752","full_name":"vivaxy/impression","owner":"vivaxy","description":"👀Element view notifier","archived":true,"fork":false,"pushed_at":"2024-05-24T05:35:07.000Z","size":258,"stargazers_count":78,"open_issues_count":4,"forks_count":4,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-04-27T01:04:31.946Z","etag":null,"topics":["advertising","impression","intersection-observer","npm-package","onscreen","tracking","viewable"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/vivaxy.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":"CITATION.cff","codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"patreon":"vivaxy","open_collective":"vivaxy_personal","custom":["https://gist.github.com/vivaxy/58eed1803a2eddda05c90aed99430de2"]}},"created_at":"2016-10-28T04:16:11.000Z","updated_at":"2024-05-24T05:35:14.000Z","dependencies_parsed_at":"2024-11-12T21:43:36.742Z","dependency_job_id":null,"html_url":"https://github.com/vivaxy/impression","commit_stats":null,"previous_names":[],"tags_count":9,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vivaxy%2Fimpression","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vivaxy%2Fimpression/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vivaxy%2Fimpression/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vivaxy%2Fimpression/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/vivaxy","download_url":"https://codeload.github.com/vivaxy/impression/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252144560,"owners_count":21701434,"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":["advertising","impression","intersection-observer","npm-package","onscreen","tracking","viewable"],"created_at":"2024-08-02T17:01:52.789Z","updated_at":"2025-05-03T04:31:16.423Z","avatar_url":"https://github.com/vivaxy.png","language":"JavaScript","readme":"# impression\n\n*See [appear event](https://github.com/vivaxy/appear-event) instead.*\n*For React hook, see [useAppear](https://github.com/vivaxy/use-appear).*\n*For React components, see [react-lifecycle-appear](https://github.com/Broltes/react-lifecycle-appear).*\n\n![impression](./assets/images/impression.png)\n\n[![Build Status][travis-image]][travis-url]\n[![NPM Version][npm-version-image]][npm-url]\n[![NPM Downloads][npm-downloads-image]][npm-url]\n[![MIT License][license-image]][license-url]\n[![Codecov][codecov-image]][codecov-url]\n[![Codacy Badge][codacy-image]][codacy-url]\n\n[![DOI](https://zenodo.org/badge/72172752.svg)](https://zenodo.org/badge/latestdoi/72172752)\n\nElement [impression](https://en.wikipedia.org/wiki/Impression_(online_media)), for ads or user behaviour statistics.\n\nWritten in es6 javascript, published as npm package as es5 along with a browser standalone.\n\n## Browser support\n\nIE9+, chrome, safari, firefox, opera...\n\n## Installation\n\n### npm\n\n`npm install @vivaxy/impression`\n\n### browser\n\n`\u003cscript src=\"./bundle/impression.rollup.js\"\u003e\u003c/script\u003e`\n\n`\u003cscript src=\"./bundle/impression.webpack.js\"\u003e\u003c/script\u003e`\n\n## Usage\n\n```js\nimport Impression from '@vivaxy/impression';\nconst impression = new Impression();\nconst element = document.querySelector('#test');\nimpression.isViewable(element); // =\u003e true\nimpression.on('begin', '#test', (element) =\u003e {\n    console.log(`element shown into view`, element);\n});\nimpression.on('end', '#test', (element) =\u003e {\n    console.log(`element shown out of view`, element);\n});\nimpression.scan(); // flush current viewable element\n```\n\n## API\n\n### *constructor* `Impression` =\u003e `{Impression}`\n\nInitialize the instance.\n\n`const impression = new Impression(options)`\n\n### `isViewable` =\u003e `{Boolean}`\n\nTest if an element is viewable.\n\n`impression.isViewable(element)`\n\nOnly accepts a single element.\n\n### `on` =\u003e `{Impression}`\n\nListen when elements match selector enter or leave the view.\n\n`impression.on(event, selector, callback)`\n\n`callback(element, { type, direction })`\n\n### `off` =\u003e `{Impression}`\n\nRemove listeners.\n\n`impression.off(event, selector, callback)`\n\n`impression.off(event, selector)`\n\n`impression.off(event)`\n\n`impression.off()`\n\n### `scan` =\u003e `{Impression}`\n\nScan page to update element status.\n\n`impression.scan()`\n\n### `once` =\u003e `{Impression}`\n\n`impression.once(event, selector, callback)`\n\n### `attach` =\u003e `{Impression}`\n\n`impression.attach()`\n\n### `detach` =\u003e `{Impression}`\n\n`impression.detach()`\n\n### `onObservers` =\u003e `{Impression}`\n\n`impression.onObservers(type, callback)`\n\n### `onceObservers` =\u003e `{Impression}`\n\n`impression.onceObservers(type, callback)`\n\n### `offObservers` =\u003e `{Impression}`\n\n`impression.offObservers(type, callback)`\n\n`impression.offObservers(type)`\n\n`impression.offObservers()`\n\n## Options\n\n### tolerance\n\nThe number of pixels an element is allowed to enter its container boundaries before calling its callback.\n\ndefault `0`\n\n### debounce\n\nThe number of milliseconds to wait before calling an element's callback after the changes.\n \ndefault `100`\n\n### container\n\nThe container of the elements you want to track.\n \ndefault `window`\n\n## Events\n\n### begin\n\n```js\nimpression.on('begin', '[data-impression-uniqueid=\"1\"]', (element, { type }) =\u003e {\n    // =\u003e which element begins to impression\n    // =\u003e the cause of the change\n});\n```\n\n### end\n\n```js\nimpression.on('end', '[data-impression-uniqueid=\"1\"]', (element, { type }) =\u003e {\n    // =\u003e which element's impression ends\n    // =\u003e the cause of the change\n});\n```\n\n## Types\n\n- mutation\n- resize\n- scroll\n- unload\n- scan\n\n## Reference\n\n- [onScreen](https://github.com/silvestreh/onScreen)\n- [判断元素是否在屏幕中出现](https://vivaxyblog.github.io/2016/08/17/is-element-on-screen.html)\n- [Code Coverage of Mocha Tests using Istanbul and Karma](https://ariya.io/2013/12/code-coverage-of-mocha-tests-using-istanbul-and-karma)\n- [babel-plugin-istanbul](https://github.com/istanbuljs/babel-plugin-istanbul)\n- [Chai Assertion Library BDD](http://chaijs.com/api/bdd/)\n- [in-view.js](https://github.com/camwiegert/in-view)\n\n[travis-image]: https://img.shields.io/travis/vivaxy/impression.svg?style=flat-square\n[travis-url]: https://travis-ci.org/vivaxy/impression\n[npm-version-image]: http://img.shields.io/npm/v/@vivaxy/impression.svg?style=flat-square\n[npm-url]: https://www.npmjs.com/package/@vivaxy/impression\n[npm-downloads-image]: https://img.shields.io/npm/dt/@vivaxy/impression.svg?style=flat-square\n[license-image]: https://img.shields.io/npm/l/@vivaxy/impression.svg?style=flat-square\n[license-url]: LICENSE\n[codecov-image]: https://img.shields.io/codecov/c/github/vivaxy/impression.svg?style=flat-square\n[codecov-url]: https://codecov.io/gh/vivaxy/impression\n[codacy-image]: https://api.codacy.com/project/badge/Grade/d7b573db992a43acae3c7ef06c2cd312\n[codacy-url]: https://www.codacy.com/app/vivaxy2012/impression?utm_source=github.com\u0026amp;utm_medium=referral\u0026amp;utm_content=vivaxy/impression\u0026amp;utm_campaign=Badge_Grade\n","funding_links":["https://patreon.com/vivaxy","https://opencollective.com/vivaxy_personal","https://gist.github.com/vivaxy/58eed1803a2eddda05c90aed99430de2"],"categories":["JavaScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvivaxy%2Fimpression","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvivaxy%2Fimpression","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvivaxy%2Fimpression/lists"}