{"id":24126566,"url":"https://github.com/web-packages/web_overlay","last_synced_at":"2026-05-14T03:35:46.831Z","repository":{"id":245678255,"uuid":"816367927","full_name":"web-packages/web_overlay","owner":"web-packages","description":"This package provides the foundation to implement overlay elements that take overflow-considered.","archived":false,"fork":false,"pushed_at":"2024-09-17T07:40:35.000Z","size":156,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-11T16:40:17.395Z","etag":null,"topics":["client-side","front-end","overflow-detection","overlay","web"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/web-overlay-layout","language":"TypeScript","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/web-packages.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","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-06-17T15:46:53.000Z","updated_at":"2024-09-17T07:40:38.000Z","dependencies_parsed_at":"2024-08-03T10:27:08.398Z","dependency_job_id":"10e6655d-7354-46d3-80fe-ae2bf65d4ae6","html_url":"https://github.com/web-packages/web_overlay","commit_stats":null,"previous_names":["mttankkeo/web_overlay","web-packages/web_overlay"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/web-packages%2Fweb_overlay","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/web-packages%2Fweb_overlay/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/web-packages%2Fweb_overlay/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/web-packages%2Fweb_overlay/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/web-packages","download_url":"https://codeload.github.com/web-packages/web_overlay/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241299106,"owners_count":19940477,"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":["client-side","front-end","overflow-detection","overlay","web"],"created_at":"2025-01-11T16:34:31.715Z","updated_at":"2026-05-14T03:35:41.811Z","avatar_url":"https://github.com/web-packages.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n    \u003cimg src=\"https://github.com/user-attachments/assets/ae6c1d98-5754-4c2e-9c4f-685a7d45000e\"\u003e\n    \u003ch1\u003eWeb Overlay Layout\u003c/h1\u003e\n    \u003ctable\u003e\n        \u003cthead\u003e\n          \u003ctr\u003e\n            \u003cth\u003eVersion\u003c/th\u003e\n            \u003cth\u003ev1.0.30\u003c/th\u003e\n          \u003c/tr\u003e\n        \u003c/tbody\u003e\n    \u003c/table\u003e\n\u003c/div\u003e\n\n# Introduction\nThis package provides the foundation to implement overlay elements that take overflow-considered.\n\n\u003e See Also, If you want the change-log by version for this package. refer to [Change Log](CHANGELOG.md) for details.\n\n\u003e __Details__\u003cbr\u003e\n\u003e This package provides offers a comprehensive solution for managing content that extends beyond the boundaries of its container, ensuring seamless integration and optimal user experience across various display contexts.\n\n## Preview\n![preview](https://github.com/MTtankkeo/web_overlay/assets/122026021/c98ea6fb-8802-4497-b3a3-a81606f04ece)\n\n## How to add overlay to target element.\nThis when you want to attach an overlay element to a specific element rather than a specific static position by calling to `Overlay.attach` function.\n\n### When only required properties.\nThe example below define only required values to adding the overlay element to the target element.\n\n```ts\nconst overlay = ...;\nconst overlayTarget = ...;\n\nOverlay.attach({\n    element: overlay,\n    target: overlayTarget,\n    parent: overlayTarget.parentElement, // default is body\n});\n```\n\n### When adding options about overlay.\nThe example below define behaviors in the `behavior` that is properties key.\n\n```ts\nOverlay.attach({\n    ...,\n    behavior: {\n        viewportPadding: 15,\n        targetGap: 10,\n        direction: OverlayDirection.BOTTOM_CENTER,\n        animation: {...},\n\n        // Define how to correct overflowed.\n        alignment: OverlayAlignment.ALL,\n        \n        // Define how to correct overflowed by direction.\n        alignment: {\n            horizontal: OverlayAlignment.ALL,\n            vertical: OverlayAlignment.SIZE\n        },\n    }\n});\n```\n\n## The Properties of OverlayDirection\nThis constants values that defines overlay layout objects that defines alignment directions of an overlay element.\n\n```ts\nexport const OverlayDirection = {\n    BOTTOM_CENTER: new BottomCenterOverlayLayout(),\n    BOTTOM_RIGHT: new BottomRightOverlayLayout(),\n    BOTTOM_LEFT: new BottomLeftOverlayLayout(),\n    TOP_CENTER: new TopCenterOverlayLayout(),\n    TOP_RIGHT: new TopRightOverlayLayout(),\n    TOP_LEFT: new TopLeftOverlayLayout(),\n    LEFT: new LeftOverlayLayout(),\n    RIGHT: new RightOverlayLayout()\n}\n```\n\n## The Properties of OverlayAlignment\nSignature for the types about the overlay alignment behavior.\n\n```ts\nexport const OverlayAlignment = {\n    ALL: new PositionedOverlayLayoutModifier(new SizedOverlayLayoutModifier()),\n    NONE: new AbsoluateOverlayLayoutModifier(),\n    SIZE: new SizedOverlayLayoutModifier(),\n    POSITION: new PositionedOverlayLayoutModifier()\n}\n```\n\n## The Properties of OverlayBehavior\\\u003cT\\\u003e\nSignature for the interface that defines overlay behaviors about measure position of an overlay element and post-processing or other tasks.\n\n| Name | Description | Type |\n| ---- | ----------- | ---- |\n| direction | The property that defines an instance that defines where the overlay element is placed in the viewport. | OverlayLayout\u003cT\u003e\n| alignment? | The property that defines an instance for post-processing when an overlay element overflows the viewport. | OverlayLayoutModifier \\| OverlayLayoutModifierByDirection\n| animation? | The property that defines a CSS Keyframes for an overlay element about fade-in and fade-out animation. | OverlayAnimation\n| targetGap? | The pixel value for how far the overlay element should be relative to the particular element(target) that should be placed. | number\n| viewportPadding? | The pixel value representing the padding around the viewport to ensure that the overlay element does not overlap the edges of the viewport or to provide additional spacing. | number\n| onLayoutBehind? | The callback function that is invoked after the layout calculation has been completed. And this function receives the overlay element and the final layout result, allowing for additional processing or adjustments once the layout has been finalized. | OverlayLayoutBehindCallback\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fweb-packages%2Fweb_overlay","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fweb-packages%2Fweb_overlay","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fweb-packages%2Fweb_overlay/lists"}