Skip to content

Commit

Permalink
fix: typo's
Browse files Browse the repository at this point in the history
  • Loading branch information
@frankpagan
frankpagan committed Jun 27, 2022
1 parent a76f12a commit 31fde94
Show file tree
Hide file tree
Showing 7 changed files with 53 additions and 127 deletions.
2 changes: 1 addition & 1 deletion CONTRIBUTING.md
View file
Expand Up @@ -11,7 +11,7 @@ In the examples below, substitute your Github username for `contributor` in URLs
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
git position https://github.com/contributor/CoCreate-position.git
cd CoCreate-position
git remote add upstream https://github.com/CoCreate-app/CoCreate-position.git
```
Expand Down
4 changes: 2 additions & 2 deletions CoCreate.config.js
View file
Expand Up @@ -12,12 +12,12 @@ module.exports = {
"key": "src",
"data":{
"name": "index.html",
"path": "/docs/modal/index.html",
"path": "/docs/position/index.html",
"domains": [
"*",
"general.cocreate.app"
],
"directory": "/docs/modal",
"directory": "/docs/position",
"content-type": "text/html",
"public": "true",
"website_id": "5ffbceb7f11d2d00103c4535"
Expand Down
20 changes: 10 additions & 10 deletions README.md
View file
@@ -1,40 +1,40 @@
# 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)
A draggable, movable and resizable position. customizable via attributes, great for popups, alerts, multitasking and displaying multiple views. Take it for a spin in our [playground!](https://cocreate.app/docs/position)

![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)
![minified](https://img.badgesize.io/https://cdn.cocreate.app/position/latest/CoCreate-position.min.js?style=flat-square&label=minified&color=orange)
![gzip](https://img.badgesize.io/https://cdn.cocreate.app/position/latest/CoCreate-position.min.js?compression=gzip&style=flat-square&label=gzip&color=yellow)
![brotli](https://img.badgesize.io/https://cdn.cocreate.app/position/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)
## [Docs & Demo](https://cocreate.app/docs/position)

For a complete guide and working demo refer to the [doumentation](https://cocreate.app/docs/modal)
For a complete guide and working demo refer to the [doumentation](https://cocreate.app/docs/position)

## CDN

```html
<script src="https://cdn.cocreate.app/modal/latest/CoCreate-position.min.js"></script>
<script src="https://cdn.cocreate.app/position/latest/CoCreate-position.min.js"></script>
```

```html
<script src="https://cdn.cocreate.app/modal/latest/CoCreate-position.min.css"></script>
<script src="https://cdn.cocreate.app/position/latest/CoCreate-position.min.css"></script>
```

## NPM

```shell
$ npm i @cocreate/modal
$ npm i @cocreate/position
```

## yarn

```shell
$ yarn install @cocreate/modal
$ yarn install @cocreate/position
```

# Table of Contents
Expand Down
11 changes: 1 addition & 10 deletions demo/index.html
View file
Expand Up @@ -26,23 +26,14 @@

<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>
Expand Down
72 changes: 36 additions & 36 deletions docs/index.html
View file
Expand Up @@ -10,7 +10,7 @@
<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">
<meta property="og:image" content="https://cdn.cocreate.app/docs/position.png">

<link rel="stylesheet" href="/docs/index.css" collection="files" document_id="60888216117c640e7596303f" name="src" type="text/css" save="true" />
</head>
Expand All @@ -30,7 +30,7 @@ <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">
share-title="CoCreate-position" share-height="600" share-width="700" share-media="https://cdn.cocreate.app/docs/position.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>
Expand All @@ -46,92 +46,92 @@ <h1 class="max-width:500px margin:20px_10px line-height:1.5 font-size:16px font-
<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"]'>
<div id="position-usage" class="margin-top:80px border-bottom:1px_solid_lightgrey" scroll scroll-intersect="color:dodgerblue" scroll-target="#position-usage-section">
<span class="display:flex align-items:center width:fit-content" hover="display:block!important" hover-target='[href="#position-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>
<a class="margin-left:10px display:none" href="#position-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>
<p class="padding-top:15px">When you click &lt;a&gt; tag, position 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"
&lt;a target="position" href="https://server.cocreate.app/CoCreate-adminUI/module_datatable.html"
position-ajax="false"
position-width="520px"
position-height="100%"
position-color="#229954"
position-header="false"
position-x="0px"
position-y="0px"
data-open_in="page"&gt;
Show Modal On Page
Show position 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"]'>
<div id="position-attributes" class="margin-top:80px border-bottom:1px_solid_lightgrey" scroll scroll-intersect="color:dodgerblue" scroll-target="#position-attributes-section">
<span class="display:flex align-items:center width:fit-content" hover="display:block!important" hover-target='[href="#position-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>
<a class="margin-left:10px display:none" href="#position-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>
<p>Target must be "position".</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>
<p>Href attribute indicates html file to set in position.</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>
<h4><span>position-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>
<h4><span>position-width</span> <span class="cocreate-badge success">string</span> <span class="cocreate-badge warning">optional</span></h4>
<p>Width of position. 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>
<h4><span>position-height</span> <span class="cocreate-badge success">string</span> <span class="cocreate-badge warning">optional</span></h4>
<p>Height of position. 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>
<h4><span>position-color</span> <span class="cocreate-badge success">color</span> <span class="cocreate-badge warning">optional</span></h4>
<p>Color of position 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>
<h4><span>position-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>
<h4><span>position-x</span> <span class="cocreate-badge success">string</span> <span class="cocreate-badge warning">optional</span></h4>
<p>Position X of position.</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>
<h4><span>position-y</span> <span class="cocreate-badge success">string</span> <span class="cocreate-badge warning">optional</span></h4>
<p>Position Y of position.</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>
<p>Attribute where to show position 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"]'>
<div id="position-demo" class="border-bottom:1px_solid_lightgrey" scroll scroll-intersect="color:dodgerblue" scroll-target="#position-demo-section">
<span class="display:flex align-items:center width:fit-content" hover="display:block!important" hover-target='[href="#position-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>
<a class="margin-left:10px display:none" href="#position-demo"><i class="fas fa-link"></i></a>
</span>
</div>
<div class="position:sticky top:0 padding:15px_0px height:100vh">
Expand Down
69 changes: 2 additions & 67 deletions src/index.css
View file
@@ -1,46 +1,10 @@
#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 {
.snap-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;
Expand All @@ -53,7 +17,7 @@
}


.modal-drag-area {
[drag-area] {
position: absolute;
background-color: transparent;
min-height: 10px;
Expand All @@ -64,32 +28,3 @@
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;
}
2 changes: 1 addition & 1 deletion webpack.config.js
View file
Expand Up @@ -13,7 +13,7 @@ module.exports = {
filename: isProduction ? "[name].min.js" : "[name].js",
libraryTarget: "umd",
libraryExport: "default",
library: ["CoCreate", "modal"],
library: ["CoCreate", "position"],
globalObject: "this",
// publicPath: 'https://server.cocreate.app/CoCreateJS/dist/'
},
Expand Down

0 comments on commit 31fde94

Please sign in to comment.