{"id":18546778,"url":"https://github.com/nabeghe/alpine-portal","last_synced_at":"2025-08-23T03:41:23.167Z","repository":{"id":166228880,"uuid":"641690346","full_name":"nabeghe/alpine-portal","owner":"nabeghe","description":"x-portal directive for alpinejs to moving elements between different points based on the screen size.","archived":false,"fork":false,"pushed_at":"2023-10-14T14:23:22.000Z","size":107,"stargazers_count":7,"open_issues_count":2,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-24T11:12:40.871Z","etag":null,"topics":["alpine","alpine-js","alpinejs","alpinejs-directive","alpinejs-plugin"],"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/nabeghe.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","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":"2023-05-17T01:07:09.000Z","updated_at":"2025-03-18T18:01:53.000Z","dependencies_parsed_at":null,"dependency_job_id":"a80cde77-3147-4169-948b-294edeeb2934","html_url":"https://github.com/nabeghe/alpine-portal","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nabeghe%2Falpine-portal","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nabeghe%2Falpine-portal/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nabeghe%2Falpine-portal/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nabeghe%2Falpine-portal/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nabeghe","download_url":"https://codeload.github.com/nabeghe/alpine-portal/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248107247,"owners_count":21048884,"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":["alpine","alpine-js","alpinejs","alpinejs-directive","alpinejs-plugin"],"created_at":"2024-11-06T20:26:57.018Z","updated_at":"2025-08-23T03:41:23.141Z","avatar_url":"https://github.com/nabeghe.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Alpine Portal\n\n\u003cp align=\"center\"\u003e\n    \u003cimg src=\"https://github.com/user-attachments/assets/08dfdc8f-a529-4ffe-a486-eba6d21f22a7\" width=\"400\"/\u003e\n\u003c/p\u003e\n\nTeleports an element to another position based on the defined breakpoint for the screen size.\nDuring real-time screen size changes, the breakpoint is re-evaluated,\nand the element may be moved to the second position or returned to the initial position.\n\n![GitHub tag (latest by date)](https://img.shields.io/github/v/tag/nabeghe/alpine-portal?label=version\u0026style=for-the-badge)\n![Build size Brotli](https://img.badgesize.io/nabeghe/alpine-portal/master/dist/alpine-portal.min.js.svg?compression=gzip\u0026style=for-the-badge\u0026color=green)\n## About\n\nThis plugin adds a new directive called `x-portal` to Alpine.\n`x-portal` is similar to `x-teleport` within Alpine itself, but it has some differences.\n`x-portal` is used to teleport an element to another location, with the ability to specify the screen size at which the teleportation should occur.\nFor example, if the screen size becomes larger or smaller than 1024, the teleportation takes place.\nTherefore, it is a screen-size-based teleportation.\n\nAdditionally, if the screen size changes continuously, the conditions are re-evaluated.\nFor example, if the teleportation has already occurred but the conditions are not met after a screen size change (window resize),\nthe element returns to its initial position.\n\nso `x-portal` can be considered as a two-way portal that creates a pathway from one world (screen size) to another\nworld (screen size) in order to move elements between them. 😅\n\n## Installation\n\n### CDN\n\nInclude the following `\u003cscript\u003e` tag in the `\u003chead\u003e` of your document, just before Alpine.\n\n```html\n\u003cscript src=\"https://cdn.jsdelivr.net/gh/nabeghe/alpine-portal@v0.2.x/dist/alpine-portal.min.js\" defer\u003e\u003c/script\u003e\n```\n\n### NPM\n\n```bash\nnpm i alpine-portal\n```\n\nAdd the `x-portal` directive to your project by importing the package **before** Alpine.js.\n\n```js\nimport Alpine from 'alpinejs';\nimport Portal from 'alpine-portal';\n\nAlpine.plugin(Portal);\n\nwindow.Alpine = Alpine;\nwindow.Alpine.start();\n```\n\n## Usage\n\nThe `x-portal` directive must be added to the desired element.\nThe value of the x-portal must be a selector (target) where the element will be teleported to.\nThen, you can use the following options to set additional values:\n\n- `x-portal:screen`: Specifies the screen breakpoint based on pixels (a number, e.g. 1024. supports expression).\nIn positive size, the min-width media query is checked, and in negative size, the max-width media query is examined.\"\n- `x-portal:target`: Instead of specifying the target within the `x-portal` directive, you can write it as \nan expression here.\n\n### Example:\n\n```html\n\u003cdiv x-data id=\"div1\" style=\"background: #E91E63; padding: 5px;\"\u003e\n    \u003ch2\u003eDiv 1\u003c/h2\u003e\n    \u003cdiv x-portal=\"#div2\" x-portal:screen=\"640\" x-portal:is=\"true\"\u003e\n        lorem ipsum dolor sit amet, consectetur adipisicing elit\n    \u003c/div\u003e\n\u003c/div\u003e\n\n\u003cdiv x-data id=\"div2\"  style=\"background: #8BC34A; padding: 5px;\"\u003e\n    \u003ch2\u003eDiv 2\u003c/h2\u003e\n\u003c/div\u003e\n```\nNow, if the screen size is greater than or equal to 640, teleportation to the target occurs.\nThen, if the screen size goes below 640, the element is returned to its initial position.\n\nIf we were to use -640, it would mean that it should be smaller than or equal to that size for the movement to occur.\n\n## Changes\n\n- v0.2.x\n    - Instead of using the resize event in the window, matchMedia was used. Thanks to ekvoka [#1](https://github.com/nabeghe/alpine-portal/issues/1). \n    - `x-portal:is` has been removed, and from now on, it can be specified within `x-portal:screen` itself.\n- v0.1.x\n    - Initial release\n\n## License\n\nCopyright (c) Hadi Akbarzadeh\n\nLicensed under the MIT license, see [LICENSE.md](LICENSE.md) for details.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnabeghe%2Falpine-portal","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnabeghe%2Falpine-portal","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnabeghe%2Falpine-portal/lists"}