Initial commit

nabeghe · May 17, 2023 · f5fcb31 · f5fcb31
commit f5fcb31
Show file tree

Hide file tree

Showing 12 changed files with 9,657 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,3 @@
+/.idea
+/node_modules
+yarn-error.log
diff --git a/LICENSE.md b/LICENSE.md
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 Hadi Akbarzadeh
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/README.md b/README.md
@@ -0,0 +1,78 @@
+> ✨ Support me: [wallet address](https://elatel.ir).
+
+# Alpine Portal
+
+Real-time relocation of an element to a different position in various sizes
+
+## About
+
+This plugin adds a new directive called x-portal to Alpine. x-portal is similar to x-teleport within 
+Alpine itself, but it has some differences.
+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.
+For example, if the screen size becomes larger or smaller than 1024, the teleportation takes place.  
+Therefore, it is a screen-size-based teleportation.
+Additionally, if the screen size changes continuously, the conditions are re-evaluated. For example, if the teleportation has already occurred but the conditions are not met after a screen size change (window resize), the element returns to its initial position.
+
+x-portal can be considered as a two-way portal that creates a pathway from one world (screen) to another 
+world (screen) in order to move elements between them. 😅
+
+## Installation
+
+### CDN
+
+Include the following `<script>` tag in the `<head>` of your document, just before Alpine.
+
+```html
+coming soon...
+```
+
+### NPM
+
+```bash
+npm i alpine-portal
+```
+
+Add the `x-portal` directive to your alproject by importing the package **before** Alpine.js.
+
+```js
+import Alpine from 'alpinejs';
+import Portal from 'alpine-portal';
+
+Alpine.plugin(Portal);
+
+window.Alpine = Alpine;
+window.Alpine.start();
+```
+
+## Usage
+
+The x-portal directive must be added to the desired element.  The value of the x-portal must be a selector 
+(target) where the element will be teleported to.
+Then, you can use the following options to set additional values:
+
+- x-portal:screen: Specifies the screen breakpoint (a number, e.g., 1024).
+- x-portal:is: Determines whether the comparison should be greater than or less than (a boolean, true 
+or false; default: true, meaning greater than).
+- x-portal:target: Instead of specifying the target within the x-portal directive, you can write it as 
+an expression here.
+
+### Example:
+
+```html
+<div x-data id="div1" style="background: #E91E63; padding: 5px;">
+    <h2>Div 1</h2>
+    <div x-portal="#div2" x-portal:screen="640" x-portal:is="true">
+        lorem ipsum dolor sit amet, consectetur adipisicing elit
+    </div>
+</div>
+
+<div x-data id="div2"  style="background: #8BC34A; padding: 5px;">
+    <h2>Div 2</h2>
+</div>
+```
+
+## License
+
+Copyright (c) 2023 Hadi Akbarzadeh
+
+Licensed under the MIT license, see [LICENSE.md](LICENSE.md) for details.
diff --git a/dist/alpine-portal.js b/dist/alpine-portal.js
diff --git a/dist/alpine-portal.js.map b/dist/alpine-portal.js.map
diff --git a/examples/index.html b/examples/index.html
@@ -0,0 +1,28 @@
+<!doctype html>
+<html lang="en" xmlns:x-portal="http://www.w3.org/1999/xhtml">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>Alpine Portal</title>
+    <script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js"></script>
+    <script src="../dist/alpine-portal.js"></script>
+    <style>
+        [x-cloak] { display: none !important; }
+    </style>
+</head>
+<body style="color: #212121; margin: 0; padding: 0;">
+
+    <div x-data id="div1" style="background: #E91E63; padding: 5px;">
+        <h2>Div 1</h2>
+        <div x-portal="#div2" x-portal:screen="640" x-portal:is="true">
+            lorem ipsum dolor sit amet, consectetur adipisicing elit
+        </div>
+    </div>
+
+    <div x-data id="div2"  style="background: #8BC34A; padding: 5px;">
+        <h2>Div 2</h2>
+    </div>
+
+</body>
+</html>