@cocreate/position 1.0.0

package/.github/FUNDING.yml

@@ -0,0 +1,3 @@
+# These are supported funding model platforms
+
+github: CoCreate-app

package/.github/workflows/automated.yml

@@ -0,0 +1,83 @@
+name: Automated
+"on":
+  push:
+    branches:
+      - master
+jobs:
+  about:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v2
+      - name: Jaid/action-sync-node-meta
+        uses: jaid/action-sync-node-meta@v1.4.0
+        with:
+          direction: overwrite-github
+          githubToken: "${{ secrets.GITHUB }}"
+  release:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v2
+      - name: Semantic Release
+        uses: cycjimmy/semantic-release-action@v2
+        id: semantic
+        with:
+          extra_plugins: |
+            @semantic-release/changelog
+            @semantic-release/git
+            @semantic-release/github
+        env:
+          GITHUB_TOKEN: "${{ secrets.GITHUB_TOKEN }}"
+          NPM_TOKEN: "${{ secrets.NPM_TOKEN }}"
+    outputs:
+      new_release_published: "${{ steps.semantic.outputs.new_release_published }}"
+      new_release_version: "${{ steps.semantic.outputs.new_release_version }}"
+  cdn:
+    runs-on: ubuntu-latest
+    needs: release
+    if: needs.release.outputs.new_release_published == 'true'
+    env:
+      VERSION: "${{ needs.release.outputs.new_release_version }}"
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v2
+      - name: setup nodejs
+        uses: actions/setup-node@v2
+        with:
+          node-version: 14.15.4
+      - name: yarn install
+        run: >
+          echo "//registry.npmjs.org/:_authToken=${{ secrets.NPM_TOKEN }}" >
+          .npmrc
+
+          yarn install
+      - name: yarn build
+        run: yarn build
+      - name: upload bundle as version
+        uses: CoCreate-app/CoCreate-s3@master
+        with:
+          aws-key-id: "${{ secrets.AWSACCESSKEYID }}"
+          aws-access-key: "${{ secrets.AWSSECERTACCESSKEY }}"
+          bucket: testcrudbucket
+          source: ./dist
+          destination: "/position/${{env.VERSION}}"
+          acl: public-read
+      - name: upload bundle as latest
+        uses: CoCreate-app/CoCreate-s3@master
+        with:
+          aws-key-id: "${{ secrets.AWSACCESSKEYID }}"
+          aws-access-key: "${{ secrets.AWSSECERTACCESSKEY }}"
+          bucket: testcrudbucket
+          source: ./dist
+          destination: /position/latest
+          acl: public-read
+          invalidations: true
+  docs:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v2
+
+      - name: update documentation
+        uses: CoCreate-app/CoCreate-docs@master

package/.github/workflows/manual.yml

@@ -0,0 +1,44 @@
+name: Manual Workflow
+on:
+  workflow_dispatch:
+    inputs:
+      invalidations:
+        description: |
+          If set to 'true', invalidates previous upload.
+        default: "true"
+        required: true
+
+jobs:
+  cdn:
+    runs-on: ubuntu-latest
+    env:
+      DRY_RUN: ${{ github.event.inputs.dry_run }}
+      GITHUB_TOKEN: "${{ secrets.GITHUB_TOKEN }}"
+      NPM_TOKEN: "${{ secrets.NPM_TOKEN }}"
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v2
+      - name: setup nodejs
+        uses: actions/setup-node@v2
+        with:
+          node-version: 14.15.4
+      - name: yarn install
+        run: >
+          echo "//registry.npmjs.org/:_authToken=${{ secrets.NPM_TOKEN }}" >
+          .npmrc
+
+          yarn install
+      - name: yarn build
+        run: yarn build
+      - name: upload latest bundle
+        uses: CoCreate-app/CoCreate-s3@master
+        with:
+          aws-key-id: "${{ secrets.AWSACCESSKEYID }}"
+          aws-access-key: "${{ secrets.AWSSECERTACCESSKEY }}"
+          distributionId: "${{ secrets.DISTRIBUTION_ID }}"
+          bucket: testcrudbucket
+          source: ./dist
+          destination: /position/latest
+          acl: public-read
+          invalidations: ${{ github.event.inputs.invalidations }}

package/CHANGELOG.md

@@ -0,0 +1,6 @@
+# 1.0.0 (2022-06-27)
+
+
+### Features
+
+* Initial Release ([bd4e59c](https://github.com/CoCreate-app/CoCreate-position/commit/bd4e59ccfe071d660641d0848414ea8c40f52036))

package/CONTRIBUTING.md

@@ -0,0 +1,97 @@
+# Contributing to CoCreate-position
+
+This project is work of [many contributors](https://github.com/CoCreate-app/CoCreate-position/graphs/contributors).
+You're encouraged to submit [pull requests](https://github.com/CoCreate-app/CoCreate-position/pulls),
+[propose features and discuss issues](https://github.com/CoCreate-app/CoCreate-position/issues).
+
+In the examples below, substitute your Github username for `contributor` in URLs.
+
+## Fork the Project
+
+Fork the [project on Github](https://github.com/CoCreate-app/CoCreate-position) and check out your copy.
+
+```
+git modal https://github.com/contributor/CoCreate-position.git
+cd CoCreate-position
+git remote add upstream https://github.com/CoCreate-app/CoCreate-position.git
+```
+
+## Create a Topic Branch
+
+Make sure your fork is up-to-date and create a topic branch for your feature or bug fix on dev branch.
+
+```
+git checkout dev
+git pull upstream dev
+git checkout -b my-feature-branch
+```
+
+## Write Tests
+
+Try to write a test that reproduces the problem you're trying to fix or describes a feature that you want to build.
+
+We definitely appreciate pull requests that highlight or reproduce a problem, even without a fix.
+
+## Write Code
+
+Implement your feature or bug fix.
+
+## Write Documentation
+
+Document any external behavior in the [README](README.md).
+
+## Commit Changes
+
+Make sure git knows your name and email address:
+
+```
+git config --global user.name "Your Name"
+git config --global user.email "contributor@example.com"
+```
+
+We use [semantic-release](https://github.com/semantic-release/semantic-release) as process to generate changelog
+and to release. Write meaningful commits according to 
+[Commit Message Formats](https://github.com/semantic-release/semantic-release#commit-message-format) is important.
+
+```
+git add ...
+git commit -am "commit-type(optional topic): a meaningful message"
+```
+
+Here is an example of the release type that should be done based on a [semantic-release](https://github.com/semantic-release/semantic-release):
+
+| Commit message                                                                                                                                                                                   | Release type               |
+| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------- |
+| `fix(pencil): stop graphite breaking when too much pressure applied`                                                                                                                             | Patch Release              |
+| `feat(pencil): add 'graphiteWidth' option`                                                                                                                                                       | ~~Minor~~ Feature Release  |
+| `perf(pencil): remove graphiteWidth option`<br><br>`BREAKING CHANGE: The graphiteWidth option has been removed.`<br>`The default graphite width of 10mm is always used for performance reasons.` | ~~Major~~ Breaking Release |
+
+
+## Push
+
+```
+git push origin my-feature-branch
+```
+
+## Make a Pull Request
+
+Go to [https://github.com/CoCreate-app/CoCreate-position](https://github.com/CoCreate-app/CoCreate-position) and select your feature branch.
+Click the 'Pull Request' button and fill out the form. Pull requests are usually reviewed within a few days.
+
+## Rebase
+
+If you've been working on a change for a while, rebase with upstream/dev.
+
+```
+git fetch upstream
+git rebase upstream/dev
+git push origin my-feature-branch -f
+```
+
+## Be Patient
+
+It's likely that your change will not be merged and that the nitpicky maintainers will ask you to do more, or fix seemingly benign problems. Hang in there!
+
+## Thank You
+
+Please do know that we really appreciate and value your time and work. We love you, really.

package/CoCreate.config.js

@@ -0,0 +1,43 @@
+module.exports = {
+    "config": {
+        "apiKey": "2061acef-0451-4545-f754-60cf8160",
+        "organization_id": "5ff747727005da1c272740ab",
+        "host": "general.cocreate.app"
+    },
+    
+    "sources": [{
+            "entry": "./docs/index.html",
+            "collection": "files",
+            "document_id": "60206d5b3c260207bf49cab4",
+            "key": "src",
+            "data":{
+                "name": "index.html",
+                "path": "/docs/modal/index.html",
+                "domains": [
+                    "*",
+                    "general.cocreate.app"
+                ],
+                "directory": "/docs/modal",
+                "content-type": "text/html",
+                "public": "true",
+                "website_id": "5ffbceb7f11d2d00103c4535"
+            }
+        }
+    ],
+
+	"extract": {
+		"directory": "./src/",
+		"extensions": [
+			"js",
+			"css",
+			"html"
+		],
+		"ignores": [
+			"node_modules",
+			"vendor",
+			"bower_components",
+			"archive"
+		]
+	}
+}
+

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021 CoCreate LLC
+
+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.

package/README.md

@@ -0,0 +1,85 @@
+# CoCreate-position
+
+A draggable, movable and resizable modal. customizable via attributes, great for popups, alerts, multitasking and displaying multiple views. Take it for a spin in our [playground!](https://cocreate.app/docs/modal)
+
+![minified](https://img.badgesize.io/https://cdn.cocreate.app/modal/latest/CoCreate-position.min.js?style=flat-square&label=minified&color=orange)
+![gzip](https://img.badgesize.io/https://cdn.cocreate.app/modal/latest/CoCreate-position.min.js?compression=gzip&style=flat-square&label=gzip&color=yellow)
+![brotli](https://img.badgesize.io/https://cdn.cocreate.app/modal/latest/CoCreate-position.min.js?compression=brotli&style=flat-square&label=brotli)
+![GitHub latest release](https://img.shields.io/github/v/release/CoCreate-app/CoCreate-position?style=flat-square)
+![License](https://img.shields.io/github/license/CoCreate-app/CoCreate-position?style=flat-square)
+![Hiring](https://img.shields.io/static/v1?style=flat-square&label=&message=Hiring&color=blueviolet)
+
+![CoCreate-position](https://cdn.cocreate.app/docs/CoCreate-position.gif)
+
+## [Docs & Demo](https://cocreate.app/docs/modal)
+
+For a complete guide and working demo refer to the [doumentation](https://cocreate.app/docs/modal)
+
+## CDN
+
+```html
+<script src="https://cdn.cocreate.app/modal/latest/CoCreate-position.min.js"></script>
+```
+
+```html
+<script src="https://cdn.cocreate.app/modal/latest/CoCreate-position.min.css"></script>
+```
+
+## NPM
+
+```shell
+$ npm i @cocreate/modal
+```
+
+## yarn
+
+```shell
+$ yarn install @cocreate/modal
+```
+
+# Table of Contents
+
+- [Table of Contents](#table-of-contents)
+- [Announcements](#announcements)
+- [Roadmap](#roadmap)
+- [How to Contribute](#how-to-contribute)
+- [About](#about)
+- [License](#license)
+
+<a name="announcements"></a>
+
+# Announcements
+
+All updates to this library are documented in our [CHANGELOG](https://github.com/CoCreate-app/CoCreate-position/blob/master/CHANGELOG.md) and [releases](https://github.com/CoCreate-app/CoCreate-position/releases). You may also subscribe to email for releases and breaking changes.
+
+<a name="roadmap"></a>
+
+# Roadmap
+
+If you are interested in the future direction of this project, please take a look at our open [issues](https://github.com/CoCreate-app/CoCreate-position/issues) and [pull requests](https://github.com/CoCreate-app/CoCreate-position/pulls). We would love to hear your feedback.
+
+<a name="about"></a>
+
+# About
+
+CoCreate-position is guided and supported by the CoCreate Developer Experience Team.
+
+Please Email the Developer Experience Team [here](mailto:develop@cocreate.app) in case of any queries.
+
+CoCreate-position is maintained and funded by CoCreate. The names and logos for CoCreate are trademarks of CoCreate, LLC.
+
+<a name="contribute"></a>
+
+# How to Contribute
+
+We encourage contribution to our libraries (you might even score some nifty swag), please see our [CONTRIBUTING](https://github.com/CoCreate-app/CoCreate-position/blob/master/CONTRIBUTING.md) guide for details.
+
+We want this library to be community-driven, and CoCreate led. We need your help to realize this goal. To help make sure we are building the right things in the right order, we ask that you create [issues](https://github.com/CoCreate-app/CoCreate-position/issues) and [pull requests](https://github.com/CoCreate-app/CoCreate-position/pulls) or merely upvote or comment on existing issues or pull requests.
+
+We appreciate your continued support, thank you!
+
+
+<a name="license"></a>
+# License
+
+[The MIT License (MIT)](https://github.com/CoCreate-app/CoCreate-position/blob/master/LICENSE)

package/demo/index.html

@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>Position | CoCreateJS</title>
+    <link rel="icon" href="https://cdn.cocreate.app/favicon.ico" type="image/ico" sizes="16x16">
+    <style>
+        body {
+            height: 100vh;
+            margin: 0px;
+        }
+
+        [drag-area] {
+            top: 0px;
+            left: 0px;
+            width: 100%;
+            height: 50px;
+            padding: 0.5em;
+            position: absolute;
+            background: gainsboro;
+            cursor: move;
+        }
+
+    </style>
+</head>
+
+<body>
+
+    <!--<div class="">-->
+        <div class="position:fixed height:300px width:300px background:whitesmoke" positionable>
+            <div class="height:40px" drag-area></div>
+        </div>
+
+        <div class="position:fixed height:300px width:300px background:brown" positionable>
+            <div class="height:40px" drag-area></div>
+        </div>
+        
+        <!-- <div class="resize resize3" resizable>
+            <div resize="left"></div>
+            <div resize="right"></div>
+            <div resize="top"></div>
+            <div resize="bottom"></div>
+        </div> -->
+    <!--</div>-->
+
+
+        <script src="../dist/CoCreate-position.js"></script>
+	    <script src="../../../CoCreateJS/dist/CoCreate.js" ></script>
+</body>
+
+</html>

package/docs/index.html

@@ -0,0 +1,176 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>CoCreate-position Documentation | CoCreateJS</title>
+    <link rel="icon" type="image/png" sizes="32x32" href="https://cocreate.app/images/favicon.ico">
+    <meta name="description" content="A draggable, customizable Pop up that toggle hiddent content  via attributes. Great for multitasking and showing multiple views." />
+    <meta name="keywords" content="helper classes, utility classes, css framework, css library, inline style classes" />
+    <meta name="robots" content="index,follow" />
+    <meta property="og:image" content="https://cdn.cocreate.app/docs/modal.png">
+
+    <link rel="stylesheet" href="/docs/index.css" collection="files" document_id="60888216117c640e7596303f" name="src" type="text/css" save="true" />
+</head>
+
+<body>
+
+    <nav class="nav display:flex align-items:center left:0px background:whitesmoke padding-top:10px padding-bottom:10px" content_id="content" scroll="sticky-nav,hide-nav" scroll-up="10" scroll-down="10" collection="files" document_id="60395ef42b3ac232657040fd" name="src">
+    </nav>
+    <sidenav id="menuL" class="position:fixed top:0px left:0px overflow:hidden background:whitesmoke height:100vh width:0px width:300px@xl" resizable resize-target="[content_id='content']" resize-property="margin-left" resize-value="width">
+        <menu collection="files" document_id="603717b07de7fb350ae9fec8" name="src"></menu>
+        <div resize="right"></div>
+    </sidenav>
+    <main class="padding-top:15px padding:15px@lg@xl" content_id="content" id="CoCreate-position">
+        <div class="display:flex flex-wrap:wrap justify-content:space-between position:relative margin:10px">
+            <div class="display:flex align-items:center">
+                <h2>CoCreate-position</h2>
+            </div>
+            <div class="display:flex align-items:center font-size:20px position:absolute right:0 padding:5px background:white">
+                <div class="display:flex align-items:center transition:0.3s padding-left:10px" share-network="true" share-text="A draggable, customizable Pop up that toggle hiddent content  via attributes. Great for multitasking and showing multiple views."
+                    share-title="CoCreate-position" share-height="600" share-width="700" share-media="https://cdn.cocreate.app/docs/modal.png" hover="display:block!important" hover-target=".social-networks">
+                    <div class="display:none social-networks">
+                        <a class="margin-right:15px" share-network='twitter' title="Share on twitter"><i class="fab fa-twitter"></i></a>
+                        <a class="margin-right:15px" share-network='facebook' title="Share on Facebook"><i class="fab fa-facebook"></i></a>
+                        <a class="margin-right:15px" share-network='instagram' title="Share on instagram"><i class="fab fa-instagram"></i></a>
+                    </div>
+                    <a class="margin-right:15px" share-network='share' title="Share on share"><i class="fas fa-share-alt"></i></a>
+                </div>
+                <a href="https://github.com/CoCreate-app/CoCreate-position" target="_blank" class="margin-right:15px"><i class="fab fa-github"></i></a>
+            </div>
+        </div>
+        <h1 class="max-width:500px margin:20px_10px line-height:1.5 font-size:16px font-weight:100">A draggable, customizable Pop up that toggle hiddent content via attributes. Great for multitasking and showing multiple views.
+        </h1>
+        <div id="xxxxx-section" class="display:flex flex-wrap:wrap">
+            <div class="flex-grow:1 width:400px width:300px@xs padding:0px_10px margin-top:60px">
+
+                <div id="modal-usage" class="margin-top:80px border-bottom:1px_solid_lightgrey" scroll scroll-intersect="color:dodgerblue" scroll-target="#modal-usage-section">
+                    <span class="display:flex align-items:center width:fit-content" hover="display:block!important" hover-target='[href="#modal-usage"]'>
+                            <h2 class="padding:5px_0px">Usage</h2>
+                            <a class="margin-left:10px display:none" href="#modal-usage"><i class="fas fa-link"></i></a>
+                        </span>
+                </div>
+                <div class="">
+                    <p class="padding-top:15px">CoCreate-position uses &lt;a&gt; tag.</p>
+                    <p class="padding-top:15px">When you click &lt;a&gt; tag, modal comes to the surface.</p>
+
+                    <div class="flex-grow:1 min-width:300px width:100%">
+                        <pre>
+                        <code class="language-html">
+                            &lt;button&gt;
+                              &lt;a target="modal" href="https://server.cocreate.app/CoCreate-adminUI/module_datatable.html"
+                                modal-ajax="false"
+                                modal-width="520px"
+                                modal-height="100%"
+                                modal-color="#229954"
+                                modal-header="false"
+                                modal-x="0px"
+                                modal-y="0px"
+                                data-open_in="page"&gt;
+                                Show Modal On Page
+                              &lt;/a&gt;
+                            &lt;/button&gt;
+                        </code>
+                            </pre>
+                    </div>
+                </div>
+                <div id="modal-attributes" class="margin-top:80px border-bottom:1px_solid_lightgrey" scroll scroll-intersect="color:dodgerblue" scroll-target="#modal-attributes-section">
+                    <span class="display:flex align-items:center width:fit-content" hover="display:block!important" hover-target='[href="#modal-attributes"]'>
+                            <h2 class="padding:5px_0px">Attributes</h2>
+                            <a class="margin-left:10px display:none" href="#modal-attributes"><i class="fas fa-link"></i></a>
+                        </span>
+                </div>
+                <ul class="list-style-type:none ">
+                    <li class="padding:15px_0px border-bottom:1px_solid_lightgrey">
+                        <h4><span>target</span> <span class="cocreate-badge success">string</span> <span class="cocreate-badge danger">required</span></h4>
+                        <p>Target must be "modal".</p>
+                    </li>
+                    <li class="padding:15px_0px border-bottom:1px_solid_lightgrey">
+                        <h4><span>href</span> <span class="cocreate-badge success">string</span> <span class="cocreate-badge danger">required</span></h4>
+                        <p>Href attribute indicates html file to set in modal.</p>
+                    </li>
+                    <li class="padding:15px_0px border-bottom:1px_solid_lightgrey">
+                        <h4><span>modal-ajax</span> <span class="cocreate-badge success">boolean</span> <span class="cocreate-badge warning">optional</span></h4>
+                        <p>Attribute whether to use ajax or not.</p>
+                    </li>
+                    <li class="padding:15px_0px border-bottom:1px_solid_lightgrey">
+                        <h4><span>modal-width</span> <span class="cocreate-badge success">string</span> <span class="cocreate-badge warning">optional</span></h4>
+                        <p>Width of modal. Unit can be pixel or percent.</p>
+                    </li>
+                    <li class="padding:15px_0px border-bottom:1px_solid_lightgrey">
+                        <h4><span>modal-height</span> <span class="cocreate-badge success">string</span> <span class="cocreate-badge warning">optional</span></h4>
+                        <p>Height of modal. Unit can be pixel or percent.</p>
+                    </li>
+                    <li class="padding:15px_0px border-bottom:1px_solid_lightgrey">
+                        <h4><span>modal-color</span> <span class="cocreate-badge success">color</span> <span class="cocreate-badge warning">optional</span></h4>
+                        <p>Color of modal border.</p>
+                    </li>
+                    <li class="padding:15px_0px border-bottom:1px_solid_lightgrey">
+                        <h4><span>modal-header</span> <span class="cocreate-badge success">boolean</span> <span class="cocreate-badge warning">optional</span></h4>
+                        <p>Attribute whether to show header or not.</p>
+                    </li>
+                    <li class="padding:15px_0px border-bottom:1px_solid_lightgrey">
+                        <h4><span>modal-x</span> <span class="cocreate-badge success">string</span> <span class="cocreate-badge warning">optional</span></h4>
+                        <p>Position X of modal.</p>
+                    </li>
+                    <li class="padding:15px_0px border-bottom:1px_solid_lightgrey">
+                        <h4><span>modal-y</span> <span class="cocreate-badge success">string</span> <span class="cocreate-badge warning">optional</span></h4>
+                        <p>Position Y of modal.</p>
+                    </li>
+                    <li class="padding:15px_0px border-bottom:1px_solid_lightgrey">
+                        <h4><span>open_in</span> <span class="cocreate-badge success">string</span> <span class="cocreate-badge warning">optional</span></h4>
+                        <p>Attribute where to show modal in. "page" for current page. "parent" for parent page. "root" for root page.</p>
+                    </li>
+                </ul>
+            </div>
+
+            <div class="flex-grow:1 width:300px padding:0px_10px margin-top:60px border-bottom:1px_solid_lightgrey">
+                <!-- SandBox -->
+                <div id="modal-demo" class="border-bottom:1px_solid_lightgrey" scroll scroll-intersect="color:dodgerblue" scroll-target="#modal-demo-section">
+                    <span class="display:flex align-items:center width:fit-content" hover="display:block!important" hover-target='[href="#modal-demo"]'>
+                            <h2 class="padding:5px_0px">Demo</h2>
+                            <a class="margin-left:10px display:none" href="#modal-demo"><i class="fas fa-link"></i></a>
+                        </span>
+                </div>
+                <div class="position:sticky top:0 padding:15px_0px height:100vh">
+						<!-- SandBox -->
+						<div class="container svColumn overflow:hidden card position:relative border-radius:2px width:auto height:100%" id="sandbox">
+							<div class="font-size:20px position:absolute top:10px right:10px opacity:0.6">
+								<a class="margin-right:10px" id="code" show="#preview" hide="#code, #view"><i class="far fa-eye"></i></a>
+								<a class="margin-right:10px" id="preview" show="#code, #view" hide="#preview" hidden><i class="fas fa-code"></i></a>
+								<a class="margin-right:5px" fullscreen target="#playground"><i class="fas fa-expand"></i></a>
+							</div>
+							<div class="svRow">
+	
+								<div class="svColumn">
+	
+									<div class="svPanel" id="view">
+										<textarea collection="demos" document_id="" name="demo" save="false" id="demo" class="height:100% width:100% border:none resize:none padding:5px"></textarea>
+									</div>
+									<div class="svSplitter svHorizontal"> </div>
+	
+									<div class="svPanel">
+										<iframe get-value="#demo" frameBorder="0" height="100%" width="100%" class="min-width:300px"></iframe>
+									</div>
+	
+								</div>
+							</div>
+						</div>
+						<!-- End SandBox -->
+                </div>
+            </div>
+
+        </div>
+        <button href="https://github.com/CoCreate-app/CoCreate-position/tree/master/docs/index.html?message=docs%3A%20describe%20your%20change..." target="_blank" class="position:fixed bottom:15px right:15px padding:15px background:dodgerblue grow-hover border-radius:50%">
+				<i class="fas fa-pencil-alt"></i>
+			</button>
+		</main>
+		
+ 		<script src="./apikey.js"></script>
+        <script src="https://cdn.cocreate.app/latest/CoCreate.min.js"></script>
+        
+</body>
+
+</html>

package/package.json

@@ -0,0 +1,67 @@
+{
+  "name": "@cocreate/position",
+  "version": "1.0.0",
+  "description": "Make any element draggable and movable. Customizable via attributes, great for popups, alerts, multitasking and displaying multiple views.",
+  "keywords": [
+    "position",
+    "cocreate",
+    "low-code-framework",
+    "no-code-framework",
+    "cocreatejs",
+    "cocreatejs-component",
+    "cocreate-framework",
+    "no-code",
+    "low-code",
+    "collaborative-framework",
+    "realtime",
+    "realtime-framework",
+    "collaboration",
+    "shared-editing",
+    "html5-framework",
+    "javascript-framework"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "start": "npx webpack --config webpack.config.js",
+    "build": "NODE_ENV=production npx webpack --config webpack.config.js",
+    "dev": "npx webpack --config webpack.config.js --watch",
+    "docs": "node ./node_modules/@cocreate/docs/src/index.js",
+    "hosting": "node ./node_modules/@cocreate/hosting/src/index.js"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/CoCreate-app/CoCreate-position.git"
+  },
+  "author": "CoCreate LLC",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/CoCreate-app/CoCreate-position/issues"
+  },
+  "homepage": "https://cocreate.app/docs/position",
+  "funding": {
+    "type": "GitHub Sponsors ❤",
+    "url": "https://github.com/sponsors/CoCreate-app"
+  },
+  "main": "./src/index.js",
+  "devDependencies": {
+    "@babel/core": "^7.9.6",
+    "@babel/preset-env": "^7.9.6",
+    "babel-loader": "^8.1.0",
+    "clean-webpack-plugin": "^3.0.0",
+    "file-loader": "^6.2.0",
+    "html-webpack-plugin": "^4.5.0",
+    "mini-css-extract-plugin": "^1.5.0",
+    "style-loader": "^2.0.0",
+    "terser-webpack-plugin": "^5.1.1",
+    "uglifyjs-webpack-plugin": "^2.2.0",
+    "webpack": "^5.24.4",
+    "webpack-cli": "^4.5.0",
+    "webpack-log": "^3.0.1"
+  },
+  "dependencies": {
+    "@cocreate/docs": "^1.3.1",
+    "@cocreate/observer": "^1.5.1"
+  }
+}

package/release.config.js

@@ -0,0 +1,22 @@
+module.exports = {
+  dryRun: false,
+  branches: ["master"],
+  plugins: [
+    "@semantic-release/commit-analyzer",
+    "@semantic-release/release-notes-generator",
+    [
+      "@semantic-release/changelog",
+      {
+        changelogFile: "CHANGELOG.md",
+      },
+    ],
+    "@semantic-release/npm",
+    "@semantic-release/github",
+    [
+      "@semantic-release/git",
+      {
+        assets: ["CHANGELOG.md", "package.json"],
+      },
+    ],
+  ],
+};

package/src/index.css

@@ -0,0 +1,95 @@
+#modal-viewport {
+	/*position: relative;*/
+	z-index: 8;
+	height: -moz-available;   
+	height: calc(100vh - 50px);   
+  height: -webkit-fill-available;  
+  height: fill-available;
+  width: -moz-available;   
+  width: -webkit-fill-available;  
+  width: fill-available;
+	pointer-events: none;
+	top: 0;
+}
+
+.hide-nav + #modal-viewport{
+	margin-top:0px;
+	height: 100vh;   
+	max-height: -moz-available;   
+  max-height: -webkit-fill-available;  
+  max-height: fill-available;
+
+}
+
+.modal.selected {
+    z-index: 10;
+    border-color: purple;
+    pointer-events: auto;
+
+}
+
+/** modal title **/
+.modal-ghost {
+	display: none;
+	background: #999;
+	opacity: 0;
+  /*pointer-events: none;*/
+ /* width: 300px;*/
+	/*height: 200px;*/
+	top: 0px;
+	left: 0px;
+	z-index: 20;
+	
+
+	position: absolute;
+	margin: 0;
+	padding: 0;
+
+	-webkit-transition: all 0.25s ease-in-out;
+	-moz-transition: all 0.25s ease-in-out;
+	-ms-transition: all 0.25s ease-in-out;
+	-o-transition: all 0.25s ease-in-out;
+	transition: all 0.25s ease-in-out;
+}
+
+
+.modal-drag-area {
+  position: absolute;
+  background-color: transparent;
+  min-height: 10px;
+  z-index: 10;
+  left: 0;
+  top: 0;
+  right: 0;
+  height: 20px;
+  cursor: move;
+}
+
+.modal-parked {
+  width: 50px !important;
+  height: 50px !important;
+  border-radius: 50px;
+  z-index: 100 !important;
+}
+
+.modal-parked * {
+  display: none;
+}
+
+.parked-closeBtn {
+  width: 20px;
+  height: 20px;
+  border-radius: 20px;
+  position: absolute;
+  background-color: #ddd;
+  right: -3px;
+  top: -3px;
+  
+  display: none;
+}
+.modal-parked:hover > .parked-closeBtn{
+  display: flex!important;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+}

package/src/index.js

@@ -0,0 +1,30 @@
+import observer from '@cocreate/observer';
+import position from './position'
+import './index.css'
+
+function init(){
+    let elements = document.querySelectorAll('[moveable], [positionable]');
+    initElements(elements)
+}
+
+function initElements(elements) {
+    for (let element of elements)
+        initElement(element)
+}
+  
+function initElement(element){
+    new position(element, element.parentElement);
+}
+
+observer.init({
+	name: "positionAddedNodes",
+	observe: ['addedNodes'],
+	target: '[moveable], [positionable]',
+	callback: mutation => {
+		initElement(mutation.target);
+	}
+});
+
+init()
+
+export default position;

package/src/position.js

@@ -0,0 +1,359 @@
+function position(el, container) {
+  if (!(el && el.nodeType && el.nodeType === 1)) {
+		return;
+	}
+  
+  /** define constant **/	
+  this.dragAreaHeight = 50;
+	this.MARGIN = 5;
+	this.FULLSCREEN_MARGIN = -60;
+	this.NO_SNAP = -100;
+	this.SNAP_MARGIN = -10;
+  this.SELECT_ZINDEX = 10;
+  this.UNSELECT_ZINDEX = 2;
+
+	this.RIGHT_SCROL = 5;
+		
+	this.container = container;
+	this.el = el;
+	this.boundStatus = {};
+	
+  this.selectedElement;
+	/**
+	 * x: mouse x in element
+	 * y: mouse y in element
+	 * cx: x in document
+	 * cy: y in document
+	 * */
+	this.point = {};
+	this.rect = {};
+	this.clickedInfo = null;
+	this.preSnapped = null;
+	this.isSnap = false;
+	this.isHeader = true;
+	
+  this._createGhost(this.container.getAttribute("data-ghost-class"));
+  this._initEvent();
+  this._selectElement()
+}
+
+position.prototype = {
+  constructor: position,
+  
+  _initEvent : function() {
+    let self = this;
+    this.iframe = this.el.querySelector('iframe')
+    if (this.iframe) {
+      this.iframe.addEventListener('load', function() {
+        const iframeContent = self.iframe.contentDocument;        
+        iframeContent.addEventListener('click', function() {
+          self.createEvent('elementSelected');
+        })
+      });
+    }
+
+    this.el.addEventListener("click", function(e) {
+      self.createEvent('elementSelected');
+    }, true)
+        
+    this.el.addEventListener('touchstart', function(e) {
+      self.createEvent('elementSelected');
+      self._onDown(e.touches[0]);
+    })
+        
+    this.el.addEventListener('mousedown', function(e) { 
+      self.createEvent('elementSelected');
+      self._onDown(e);
+    })
+
+    // events from container
+    this.el.addEventListener('mousemove', function(e) {
+      e.preventDefault();
+        self._onMove(e);
+    });
+    
+    this.el.addEventListener('mouseup', function(e) {
+      self._onUp(e);
+      e.preventDefault();
+    }, true);
+
+    this.el.addEventListener('touchmove', function(e) {
+      self._onMove(e.touches[0]);
+    }, { passive: false });
+    
+    this.el.addEventListener('touchend', function(e) {
+      self._onUp(e.touches[0]);
+    }, { passive: false });
+
+    this.el.addEventListener('elementSelected', function(e) {
+        self._selectElement(e.detail.element);
+    })
+
+  },
+      
+  _onMove : function(e) {
+    this.__getBoundStatus(e)
+    this.__animate();
+  },
+  
+  _onDown : function(e) {
+    this.__getBoundStatus(e);
+    
+    this.clickedInfo = {
+      x: this.point.x,
+      y: this.point.y,
+      cx: this.point.cx,
+      cy: this.point.cy,
+      w: this.rect.width,
+      h: this.rect.height,
+      isMoving: this._isMovable(),
+      boundStatus : this.boundStatus,
+      isChangeStart: true
+    }
+  },
+  
+  _onUp: function(e) {
+    if (e) {
+      this.__getBoundStatus(e);
+    }
+    if (!this.clickedInfo) {
+      return;
+    }
+    if (this.clickedInfo.isMoving && !this.isParked) {
+      let p_w = this.el.parentNode.offsetWidth, p_h = this.el.parentNode.offsetHeight;
+      let snap_info = null;
+      
+      if (this.__between(this.rect.top, this.NO_SNAP, this.FULLSCREEN_MARGIN) ||
+          this.__between(this.rect.left, this.NO_SNAP, this.FULLSCREEN_MARGIN) ||
+          this.__between(p_w - this.rect.right, this.NO_SNAP, this.FULLSCREEN_MARGIN) ||
+          this.__between(p_h - this.rect.bottom, this.NO_SNAP, this.FULLSCREEN_MARGIN)) {
+          snap_info = {x: 0, y: 0, w:'100%', h:'100%'}
+      } else if (this.__between(this.rect.top, this.NO_SNAP, this.SNAP_MARGIN)) {
+          snap_info = {x: 0, y: 0, w:'100%', h:'50%'}
+      } else if (this.__between(this.rect.left, this.NO_SNAP, this.SNAP_MARGIN)) {
+          snap_info = {x: 0, y: 0, w:'50%', h:'100%'} 
+      } else if (this.__between(p_w - this.rect.right, this.NO_SNAP, this.SNAP_MARGIN)) {
+          snap_info = {x: '50%', y: 0, w: '50%', h:'100%'}
+      } else if (this.__between(p_h - this.rect.bottom, this.NO_SNAP, this.SNAP_MARGIN)) {
+          snap_info = {x: 0, y: '50%', w: '100%', h: '50%'}
+      }
+
+      if (snap_info && !this.isSnap) {
+        this.__setBound(this.el, snap_info.x, snap_info.y, snap_info.w, snap_info.h);
+        this.preSnapped = {x: this.rect.x, y: this.rect.y, width: this.rect.width, height: this.rect.height};
+        this.isSnap = true;
+      } 
+      
+      var ghost_info = {
+        x: this.rect.x,
+        y: this.rect.y,
+        w: this.rect.width,
+        h: this.rect.height
+      }
+      // this.el.parentNode.dispatchEvent(new CustomEvent("cocreate-modalghost", {detail: ghost_info}));
+      this._ghostProcess(ghost_info)
+    }
+
+    if (this.clickedInfo.isMoving) {
+      this.createEvent('element-moveend');
+    }
+    
+    
+    this.clickedInfo = null;
+  },
+  
+  __setBound : function(el, x, y, w, h) {
+    el.style.left = x;
+    el.style.top = y;
+    el.style.width = w;
+    el.style.height = h;
+  },
+  
+  __setRectInfo: function() {
+    let bound = this.el.getBoundingClientRect();
+    let parentRect = this.el.parentNode.getBoundingClientRect();
+    this.rect = {};
+    this.rect.x = bound.x - parentRect.x;
+    this.rect.y = bound.y - parentRect.y;
+    this.rect.width = bound.width;
+    this.rect.height = bound.height;
+    this.rect.top = bound.top - parentRect.top;
+    this.rect.bottom = bound.bottom - parentRect.top;
+    this.rect.left = bound.left - parentRect.left;
+    this.rect.right = bound.right - parentRect.left;
+  },
+  
+  __getBoundStatus : function(e) {
+    let bound = this.el.getBoundingClientRect();
+    let parentRect = this.el.parentNode.getBoundingClientRect();
+    let x = e.clientX - bound.left;// - parentRect.left;
+    let y = e.clientY - bound.top;// - parentRect.top;
+
+    this.__setRectInfo();
+
+    this.point.x = x;
+    this.point.y = y;
+    this.point.cx = e.clientX - parentRect.left;
+    this.point.cy = e.clientY - parentRect.top;
+
+    this.boundStatus = {
+      isTop : y < this.MARGIN && y > -this.MARGIN,
+      isLeft : x < this.MARGIN && x > -this.MARGIN,
+      isRight : x >= bound.width - this.RIGHT_SCROL && x <= bound.width + this.MARGIN + (this.MARGIN - this.RIGHT_SCROL),
+      isBottom: y >= bound.height - this.MARGIN && y <= bound.height + this.MARGIN
+    }
+    
+    return this.boundStatus;
+  },
+  
+  __between: function(x, min, max) {
+    return x >= min && x <= max;
+  },
+  
+  __animate : function() {    
+    let c_info = this.clickedInfo;
+    
+    var eventName = null;
+    
+    if (c_info && c_info.isMoving) {
+      /** 
+       * Ghost Process
+       **/
+       
+      let p_w = this.el.parentNode.offsetWidth, p_h = this.el.parentNode.offsetHeight;
+      let ghost_info = null;
+
+      if (this.__between(this.rect.top, this.NO_SNAP, this.FULLSCREEN_MARGIN) ||
+          this.__between(this.rect.left, this.NO_SNAP, this.FULLSCREEN_MARGIN) ||
+          this.__between(p_w - this.rect.right, this.NO_SNAP, this.FULLSCREEN_MARGIN) ||
+          this.__between(p_h - this.rect.bottom, this.NO_SNAP, this.FULLSCREEN_MARGIN)) {
+          ghost_info = {x: 0, y: 0, w:p_w, h:p_h, type: "show"}
+      } else if (this.__between(this.rect.top, this.NO_SNAP, this.SNAP_MARGIN)) {
+          ghost_info = {x: 0, y: 0, w:p_w, h:p_h / 2, type: "show"}
+      } else if (this.__between(this.rect.left, this.NO_SNAP, this.SNAP_MARGIN)) {
+          ghost_info = {x: 0, y: 0, w:p_w / 2, h: p_h, type: "show"}
+      } else if (this.__between(p_w - this.rect.right, this.NO_SNAP, this.SNAP_MARGIN)) {
+          ghost_info = {x: p_w / 2, y: 0, w: p_w / 2, h: p_h, type: "show"}
+      } else if (this.__between(p_h - this.rect.bottom, this.NO_SNAP, this.SNAP_MARGIN)) {
+          ghost_info = {x: 0, y: p_h / 2, w:p_w, h:p_h / 2, type: "show"}
+      } else {
+          ghost_info = {x: this.rect.left, y: this.rect.top, w: this.rect.width, h: this.rect.height, type: "hide"}
+      }
+
+      if (ghost_info && !this.isParked && !this.isSnap) {
+        // this.container.dispatchEvent(new CustomEvent("cocreate-modalghost", {detail: ghost_info}));
+        this._ghostProcess(ghost_info)
+      }
+
+      if (this.isSnap) {
+        this.el.style.left = this.point.cx + 'px';
+        this.el.style.top = this.point.cy + 'px';
+        this.el.style.width = this.preSnapped.width + 'px';
+        this.el.style.height =  this.preSnapped.height + 'px';
+        this.isSnap = false;
+      } else {
+        this.el.style.top = (this.point.cy - c_info.y) + 'px';
+        this.el.style.left = (this.point.cx - c_info.x) + 'px';
+      }
+      
+      eventName = "element-moving";
+      if (c_info.isChangeStart) {
+        this.clickedInfo.isChangeStart = false;
+        eventName = "element-movestart";
+      }
+      
+      this.createEvent(eventName)
+      return;
+    }
+  },
+  
+  minMax() {
+    if (!this.isSnap) {
+      this.isSnap = true;
+      this.preSnapped = {x: this.rect.x, y: this.rect.y, width: this.rect.width, height: this.rect.height};
+      this.__setBound(this.el, 0, 0, "100%", "100%");
+    } else {
+      this.isSnap = false;
+      this.el.style.left = this.preSnapped.x + 'px';
+      this.el.style.top = this.preSnapped.y + 'px';
+      this.el.style.width = this.preSnapped.width + 'px';
+      this.el.style.height =  this.preSnapped.height + 'px';
+    }
+  },
+    
+  _isMovable() {
+    var width = this.rect.width;
+    // if (this.isHeader) {
+    //   width -= 120;
+    // }
+    return this.point.x > 0 && this.point.x < width && this.point.y > 0 && this.point.y < this.dragAreaHeight;
+  },
+  
+  /**
+   * Position Events
+   * move: element-moving, element-moveend, element-movestart
+   **/
+  createEvent(eventName) {
+    var event = new CustomEvent(eventName, {detail: {element: this.el, instance: this}});
+    this.el.dispatchEvent(event);
+  },
+
+  _createGhost: function(ghostClass) {
+    var node = document.createElement("div");
+    if (!ghostClass) {
+      ghostClass = "snap-ghost";
+    }
+    
+    node.classList.add(ghostClass);
+    this.container.appendChild(node);
+    this.ghostEl = node;
+  },
+
+  // this.el.addEventListener('cocreate-modalghost', function(e) {
+  //   if (_this.selectedModal) {
+  //     _this._ghostProcess(e.detail)
+  //   }
+  // })
+
+  _ghostProcess: function(info) {
+    this.ghostEl.style.left = info.x + 'px';
+    this.ghostEl.style.top = info.y + 'px';
+    this.ghostEl.style.width = info.w + 'px';
+    this.ghostEl.style.height = info.h + 'px';
+    
+    if (info.type === "show") {
+      if (this.ghostEl.style.display === 'none') {
+        this.ghostEl.style.display = 'block'
+      }
+      this.ghostEl.style.opacity = 0.2;  
+    } else {
+      this.ghostEl.style.opacity = 0;
+      if (this.ghostEl.style.display !== 'none') {
+        this.ghostEl.style.display = 'none'
+      }
+    }
+    return;
+  },
+
+  _selectElement: function(el) {
+    this._releaseSelect();
+    this.container['selectedPositionElement'] = this.el
+    if (this.el) {
+      this.el.style.zIndex = this.SELECT_ZINDEX;
+      this.el.classList.add('modal_selected');
+      // this.ghostEl.style.width = 0;
+      // this.ghostEl.style.height = 0;
+    }
+  },
+
+  _releaseSelect: function() {
+    let el = this.container['selectedPositionElement']
+    if (!el) {
+      return;
+    }
+    el.style.zIndex = this.UNSELECT_ZINDEX;
+    el.classList.remove("modal_selected");
+  },
+}
+
+export default position;

package/webpack.config.js

@@ -0,0 +1,85 @@
+const path = require("path")
+const TerserPlugin = require("terser-webpack-plugin")
+const MiniCssExtractPlugin = require("mini-css-extract-plugin")
+let isProduction = process.env.NODE_ENV === "production"
+const { CleanWebpackPlugin } = require("clean-webpack-plugin")
+
+module.exports = {
+  entry: {
+    "CoCreate-position": "./src/index.js",
+  },
+  output: {
+    path: path.resolve(__dirname, "dist"),
+    filename: isProduction ? "[name].min.js" : "[name].js",
+    libraryTarget: "umd",
+    libraryExport: "default",
+    library: ["CoCreate", "modal"],
+    globalObject: "this",
+    // publicPath: 'https://server.cocreate.app/CoCreateJS/dist/'
+  },
+
+  plugins: [
+    new CleanWebpackPlugin(),
+    new MiniCssExtractPlugin({
+      filename: "[name].css",
+    }),
+  ],
+  // Default mode for Webpack is production.
+  // Depending on mode Webpack will apply different things
+  // on final bundle. For now we don't need production's JavaScript
+  // minifying and other thing so let's set mode to development
+  mode: isProduction ? "production" : "development",
+  module: {
+    rules: [
+      {
+        test: /.js$/,
+        exclude: /(node_modules)/,
+        use: {
+          loader: "babel-loader",
+          options: {
+            plugins: ["@babel/plugin-transform-modules-commonjs"],
+          },
+        },
+      },
+      {
+        test: /.css$/i,
+        use: [
+          { loader: "style-loader", options: { injectType: "linkTag" } },
+          "file-loader",
+        ],
+      },
+    ],
+  },
+
+  // add source map
+  ...(isProduction ? {} : { devtool: "eval-source-map" }),
+
+  optimization: {
+    minimize: true,
+    minimizer: [
+      new TerserPlugin({
+        extractComments: true,
+        // cache: true,
+        parallel: true,
+        // sourceMap: true, // Must be set to true if using source-maps in production
+        terserOptions: {
+          // https://github.com/webpack-contrib/terser-webpack-plugin#terseroptions
+          // extractComments: 'all',
+          compress: {
+            drop_console: true,
+          },
+        },
+      }),
+    ],
+    splitChunks: {
+      chunks: "all",
+      minSize: 200,
+      // maxSize: 99999,
+      //minChunks: 1,
+
+      cacheGroups: {
+        defaultVendors: false,
+      },
+    },
+  },
+}