{"id":19468281,"url":"https://github.com/barrel/promobar","last_synced_at":"2025-04-25T11:32:21.223Z","repository":{"id":57331678,"uuid":"69601383","full_name":"barrel/promobar","owner":"barrel","description":"A lightweight and easily configurable promo bar in ES6.","archived":false,"fork":false,"pushed_at":"2018-01-18T23:16:58.000Z","size":61,"stargazers_count":9,"open_issues_count":0,"forks_count":2,"subscribers_count":9,"default_branch":"master","last_synced_at":"2025-04-13T20:20:40.884Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/barrel.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-09-29T19:38:40.000Z","updated_at":"2023-03-22T09:35:41.000Z","dependencies_parsed_at":"2022-09-05T10:10:32.535Z","dependency_job_id":null,"html_url":"https://github.com/barrel/promobar","commit_stats":null,"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/barrel%2Fpromobar","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/barrel%2Fpromobar/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/barrel%2Fpromobar/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/barrel%2Fpromobar/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/barrel","download_url":"https://codeload.github.com/barrel/promobar/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250808327,"owners_count":21490649,"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":[],"created_at":"2024-11-10T18:40:26.755Z","updated_at":"2025-04-25T11:32:20.897Z","avatar_url":"https://github.com/barrel.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# promobar\nA lightweight and easily configurable promo bar with support for expiration using `localStorage`.\n\n**~1.77kb gzipped**\n\n## Install\n```bash\nnpm i promobar --save\n```\n\n## Basic Usage\nThis library requires some markup and styles. By default, the promo bar is *not* shown. Once shown, it will continue to show until a user closes it. Once closed, the promo bar will not show for that user again until either the `content` has been updated, or the time interval specified in `lifespan` is reached.\n\n```javascript\nimport promobar from 'promobar'\n\nconst target = document.getElementById('promobar')\n\nconst promo = promobar(target, {\n  content: document.getElementById('promoContent').innerHTML,\n  lifespan: 1,\n  resize: true,\n  placeholder: () =\u003e /products|posts/.test(window.location.pathname),\n  offsets: [\n    [document.getElementById('header'), () =\u003e /\\//.test(window.location.pathname)],\n    document.getElementById('nav')\n  ],\n  close: [ document.getElementById('promoClose') ]\n})\n\npromo.show()\n```\n\n## Configuration\n### promobar(target[, {...configation}])\nThe constructor takes two params, and return an instance object with API methods attached. \n- `target` - the outer element of your promo bar \n- `configuration`\n  - `content` - the text and/or markup that is the content of your promo bar `type: string - default: document.getElementById('promoContent').innerHTML`\n  - `lifespan` - the number of days before the promo expires and is enabled again for the user `type: number - default: 1`\n  - `resize` - to watch the height of the bar on resize and adjust offsets to match `type: boolean - default: true`\n  - `placeholder` - inserts a placeholder element that displaces the site by the height of the promo bar. Pass a function that returns a boolean to conditionally use a placeholder `type: function|boolean - default: true` \n  - `close` - an array of elements that, when clicked, should trigger the hide sequence of the promo bar `type: array - default: Array.prototype.slice.call(document.querySelectorAll('.js-promobarClose'))`\n  - `offsets` - an array of elements that need to be displaced when the promo bar is active. These elements will receive an attribute that is styled with `transformY`. `type: array - default: []`\n\n## API: Methods\n#### .show()\nShow the promo bar. If expired, bar will not show.\n```javascript\npromobar.show()\n```\n\n#### .hide()\nHide the promo bar.\n```javascript\npromobar.hide()\n```\nHide and cache the data to prevent the bar from showing until it expires.\n```javascript\npromobar.hide(true)\n```\n\n#### .on()\nAttach event handlers\n```javascript\npromobar.on('show', state =\u003e /* do stuff */)\n```\n\n#### .reset()\nIf promo bar is expired, clear data and re-enable the promo bar. To show the bar after `.reset()`, call `.show()`.\n```javascript\npromobar.reset()\n```\n\n#### .getState()\nReturn the promo bar's state object.\n```javascript\npromobar.getState()\n\n/*\n{\n  active: true|false, // shown or not\n  enabled: true|false, // expired or not\n  height: 50px // height of `target` outer element\n}\n*/\n```\n\n#### .emit()\nYou can also run handlers by emitting events manually.\n```javascript\npromobar.emit('hide')\n```\n\n## Events\nPromobar emits a few lifecycle events. All callbacks receive a state object.\n- `show` - when shown\n- `hide` - when hidden \n- `update` - when updated \n- `disabled` - when a user closes the bar \n\n## Markup and Styles \nPlease see `lib/promobar.html` and `lib/promobar.scss` for **suggested** markup and styles. \n\nMIT License\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbarrel%2Fpromobar","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbarrel%2Fpromobar","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbarrel%2Fpromobar/lists"}