{"id":21730681,"url":"https://github.com/codions/ad-shuffle","last_synced_at":"2025-03-20T23:24:41.157Z","repository":{"id":261747762,"uuid":"866389576","full_name":"codions/ad-shuffle","owner":"codions","description":"This JavaScript package allows for random rotation of banners on a webpage based on configured frequency, start, and end dates, with optional automatic rotation.","archived":false,"fork":false,"pushed_at":"2024-11-08T22:49:34.000Z","size":214,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-25T20:11:18.655Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://ad-shuffle.codions.dev","language":"HTML","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/codions.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-10-02T07:07:13.000Z","updated_at":"2024-11-08T22:49:37.000Z","dependencies_parsed_at":"2024-11-08T08:24:13.089Z","dependency_job_id":"5f14c2b1-0586-45b8-a0e1-922a440e9ae0","html_url":"https://github.com/codions/ad-shuffle","commit_stats":null,"previous_names":["codions/ad-shuffle"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codions%2Fad-shuffle","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codions%2Fad-shuffle/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codions%2Fad-shuffle/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codions%2Fad-shuffle/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/codions","download_url":"https://codeload.github.com/codions/ad-shuffle/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244707675,"owners_count":20496778,"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-26T04:16:34.028Z","updated_at":"2025-03-20T23:24:41.141Z","avatar_url":"https://github.com/codions.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# AdShuffle\n\nThis JavaScript package allows for both random and sequential rotation of banners on a webpage based on configured frequency, start, and end dates, with optional automatic rotation.\n\n## Features\n\n- Randomly rotates banners based on frequency.\n- Sequential banner rotation when specified.\n- Control display with start and end dates.\n- Manage multiple banner containers on the same page.\n- Easily integrates into HTML via the generated library.\n- Automatically applies default styles when using the `ads-styled` class.\n- Option to automatically rotate banners at a set interval.\n\n### Usage of Compiled Version\n\nIf you just want to use the compiled package, add the generated file `https://ad-shuffle.codions.dev/dist/ad-shuffle.es.js` to your HTML page:\n\n```html\n\u003cscript src=\"https://ad-shuffle.codions.dev/dist/ad-shuffle.es.js\"\u003e\u003c/script\u003e\n```\n\n## How to Use\n\nAfter including the script, add the following HTML structure to include banners on your page.\n\n### HTML Implementation Example\n\nAdd the `ads-styled` class to your banner to apply the default styles provided by the package:\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en\"\u003e\n\u003chead\u003e\n    \u003cmeta charset=\"UTF-8\"\u003e\n    \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"\u003e\n    \u003ctitle\u003eAdShuffle - Demo\u003c/title\u003e\n    \u003cscript src=\"https://ad-shuffle.codions.dev/dist/ad-shuffle.es.js\"\u003e\u003c/script\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n    \u003c!-- Container with auto-rotation every 5 seconds --\u003e\n    \u003cdiv class=\"rb-ads\" data-auto-rotate=\"true\" data-interval=\"5\"\u003e\n        \u003cdiv class=\"rb-random-ads ads-styled\" data-frequency=\"50\" data-start-date=\"2024-09-09 09:31:00\" data-end-date=\"2024-10-10 12:35:00\"\u003e\n            \u003cdiv class=\"ads-info\"\u003eAdvertisement\u003c/div\u003e\n            Banner 1 - Frequency 50%\n        \u003c/div\u003e\n        \u003cdiv class=\"rb-random-ads ads-styled\" data-frequency=\"25\" data-end-date=\"2024-09-09 13:00:00\"\u003e\n            \u003cdiv class=\"ads-info\"\u003eAdvertisement\u003c/div\u003e\n            Banner 2 - Frequency 25%\n        \u003c/div\u003e\n        \u003cdiv class=\"rb-random-ads ads-styled\" data-frequency=\"25\" data-start-date=\"2024-09-01 00:00:00\"\u003e\n            \u003cdiv class=\"ads-info\"\u003eAdvertisement\u003c/div\u003e\n            Banner 3 - Frequency 25%\n        \u003c/div\u003e\n    \u003c/div\u003e\n\n    \u003c!-- Container without auto-rotation (default behavior) --\u003e\n    \u003cdiv class=\"rb-ads\"\u003e\n        \u003cdiv class=\"rb-random-ads ads-styled\" data-frequency=\"75\"\u003e\n            \u003cdiv class=\"ads-info\"\u003eAdvertisement\u003c/div\u003e\n            Banner 1 - Frequency 75%\n        \u003c/div\u003e\n        \u003cdiv class=\"rb-random-ads ads-styled\" data-frequency=\"25\" data-start-date=\"2024-09-10 00:00:00\"\u003e\n            \u003cdiv class=\"ads-info\"\u003eAdvertisement\u003c/div\u003e\n            Banner 2 - Frequency 25%\n        \u003c/div\u003e\n    \u003c/div\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\n### Attributes\n\n- `data-frequency`: Defines the probability of a banner being shown. The value is relative to the other banners in the same container.\n- `data-start-date` (optional): Defines the start date when the banner will be eligible for display.\n- `data-end-date` (optional): Defines the end date after which the banner will no longer be displayed.\n- `class=\"ads-styled\"`: Applies the default style provided by the package.\n\n### Auto-Rotation Parameters\n\nYou can enable auto-rotation of banners by adding the following attributes to the `.rb-ads` container:\n\n- `data-auto-rotate=\"true\"`: Enables automatic banner rotation.\n- `data-interval=\"X\"`: Defines the interval in seconds between banner switches.\n\nExample usage:\n\n```html\n\u003cdiv class=\"rb-ads\" data-auto-rotate=\"true\" data-interval=\"5\"\u003e\n    \u003cdiv class=\"rb-random-ads ads-styled\" data-frequency=\"50\"\u003e\n        \u003cdiv class=\"ads-info\"\u003eAdvertisement\u003c/div\u003e\n        Banner 1 - Frequency 50%\n    \u003c/div\u003e\n    \u003cdiv class=\"rb-random-ads ads-styled\" data-frequency=\"25\"\u003e\n        \u003cdiv class=\"ads-info\"\u003eAdvertisement\u003c/div\u003e\n        Banner 2 - Frequency 25%\n    \u003c/div\u003e\n\u003c/div\u003e\n```\n\nIn this example, banners will rotate automatically every 5 seconds.\n\n### Sequential Rotation\n\nIf you prefer to rotate banners in sequential order (rather than randomly), add the `data-sequential=\"true\"` attribute to the `.rb-ads` container:\n\n```html\n\u003cdiv class=\"rb-ads\" data-auto-rotate=\"true\" data-interval=\"3\" data-sequential=\"true\"\u003e\n    \u003cdiv class=\"rb-random-ads ads-styled\"\u003e\n        \u003cdiv class=\"ads-info\"\u003eAdvertisement\u003c/div\u003e\n        Banner 1\n    \u003c/div\u003e\n    \u003cdiv class=\"rb-random-ads ads-styled\"\u003e\n        \u003cdiv class=\"ads-info\"\u003eAdvertisement\u003c/div\u003e\n        Banner 2\n    \u003c/div\u003e\n    \u003cdiv class=\"rb-random-ads ads-styled\"\u003e\n        \u003cdiv class=\"ads-info\"\u003eAdvertisement\u003c/div\u003e\n        Banner 3\n    \u003c/div\u003e\n\u003c/div\u003e\n```\n\nIn this example, banners will rotate sequentially every 3 seconds.\n\n\n### Installation via NPM (for development)\n\nIf you want to develop or customize the package:\n\n1. Clone the repository.\n2. Install dependencies with `npm install`.\n3. Build the package with `npm run build`.\n\n## License\n\nThis project is licensed under the MIT License.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodions%2Fad-shuffle","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcodions%2Fad-shuffle","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodions%2Fad-shuffle/lists"}