@cocreate/position 1.0.0 → 1.0.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +22 -0
- package/CONTRIBUTING.md +1 -1
- package/CoCreate.config.js +2 -2
- package/README.md +10 -10
- package/demo/index.html +3 -12
- package/docs/index.html +36 -36
- package/package.json +3 -3
- package/src/index.css +2 -75
- package/webpack.config.js +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,25 @@
|
|
|
1
|
+
## [1.0.3](https://github.com/CoCreate-app/CoCreate-position/compare/v1.0.2...v1.0.3) (2022-09-01)
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
### Bug Fixes
|
|
5
|
+
|
|
6
|
+
* bump all of [@cocreate](https://github.com/cocreate) dependencies ([0c29a94](https://github.com/CoCreate-app/CoCreate-position/commit/0c29a940052427e3efadbc82490793f122fd5d59))
|
|
7
|
+
|
|
8
|
+
## [1.0.2](https://github.com/CoCreate-app/CoCreate-position/compare/v1.0.1...v1.0.2) (2022-06-27)
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
### Bug Fixes
|
|
12
|
+
|
|
13
|
+
* readme description ([38590e7](https://github.com/CoCreate-app/CoCreate-position/commit/38590e7a343f0ff928b621d8e24e0d0dbcf0e144))
|
|
14
|
+
|
|
15
|
+
## [1.0.1](https://github.com/CoCreate-app/CoCreate-position/compare/v1.0.0...v1.0.1) (2022-06-27)
|
|
16
|
+
|
|
17
|
+
|
|
18
|
+
### Bug Fixes
|
|
19
|
+
|
|
20
|
+
* removed unused css ([a173185](https://github.com/CoCreate-app/CoCreate-position/commit/a1731854fa4d2d2ef15c9055908dfec9e7c31291))
|
|
21
|
+
* typo's ([31fde94](https://github.com/CoCreate-app/CoCreate-position/commit/31fde94d0df15cb1dcb074da6e5040930c55bc02))
|
|
22
|
+
|
|
1
23
|
# 1.0.0 (2022-06-27)
|
|
2
24
|
|
|
3
25
|
|
package/CONTRIBUTING.md
CHANGED
|
@@ -11,7 +11,7 @@ In the examples below, substitute your Github username for `contributor` in URLs
|
|
|
11
11
|
Fork the [project on Github](https://github.com/CoCreate-app/CoCreate-position) and check out your copy.
|
|
12
12
|
|
|
13
13
|
```
|
|
14
|
-
git
|
|
14
|
+
git position https://github.com/contributor/CoCreate-position.git
|
|
15
15
|
cd CoCreate-position
|
|
16
16
|
git remote add upstream https://github.com/CoCreate-app/CoCreate-position.git
|
|
17
17
|
```
|
package/CoCreate.config.js
CHANGED
|
@@ -12,12 +12,12 @@ module.exports = {
|
|
|
12
12
|
"key": "src",
|
|
13
13
|
"data":{
|
|
14
14
|
"name": "index.html",
|
|
15
|
-
"path": "/docs/
|
|
15
|
+
"path": "/docs/position/index.html",
|
|
16
16
|
"domains": [
|
|
17
17
|
"*",
|
|
18
18
|
"general.cocreate.app"
|
|
19
19
|
],
|
|
20
|
-
"directory": "/docs/
|
|
20
|
+
"directory": "/docs/position",
|
|
21
21
|
"content-type": "text/html",
|
|
22
22
|
"public": "true",
|
|
23
23
|
"website_id": "5ffbceb7f11d2d00103c4535"
|
package/README.md
CHANGED
|
@@ -1,40 +1,40 @@
|
|
|
1
1
|
# CoCreate-position
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
Make any element draggable and movable. Customizable via HTML5 attributes or Javascript, great for creating moveable popups, alerts, etc. Take it for a spin in our [playground!](https://cocreate.app/docs/position)
|
|
4
4
|
|
|
5
|
-
|
|
6
|
+
|
|
7
|
+
|
|
8
8
|
|
|
9
9
|
|
|
10
10
|
|
|
11
11
|
|
|
12
12
|
|
|
13
13
|
|
|
14
|
-
## [Docs & Demo](https://cocreate.app/docs/
|
|
14
|
+
## [Docs & Demo](https://cocreate.app/docs/position)
|
|
15
15
|
|
|
16
|
-
For a complete guide and working demo refer to the [doumentation](https://cocreate.app/docs/
|
|
16
|
+
For a complete guide and working demo refer to the [doumentation](https://cocreate.app/docs/position)
|
|
17
17
|
|
|
18
18
|
## CDN
|
|
19
19
|
|
|
20
20
|
```html
|
|
21
|
-
<script src="https://cdn.cocreate.app/
|
|
21
|
+
<script src="https://cdn.cocreate.app/position/latest/CoCreate-position.min.js"></script>
|
|
22
22
|
```
|
|
23
23
|
|
|
24
24
|
```html
|
|
25
|
-
<script src="https://cdn.cocreate.app/
|
|
25
|
+
<script src="https://cdn.cocreate.app/position/latest/CoCreate-position.min.css"></script>
|
|
26
26
|
```
|
|
27
27
|
|
|
28
28
|
## NPM
|
|
29
29
|
|
|
30
30
|
```shell
|
|
31
|
-
$ npm i @cocreate/
|
|
31
|
+
$ npm i @cocreate/position
|
|
32
32
|
```
|
|
33
33
|
|
|
34
34
|
## yarn
|
|
35
35
|
|
|
36
36
|
```shell
|
|
37
|
-
$ yarn install @cocreate/
|
|
37
|
+
$ yarn install @cocreate/position
|
|
38
38
|
```
|
|
39
39
|
|
|
40
40
|
# Table of Contents
|
package/demo/index.html
CHANGED
|
@@ -26,23 +26,14 @@
|
|
|
26
26
|
|
|
27
27
|
<body>
|
|
28
28
|
|
|
29
|
-
<!--<div class="">-->
|
|
30
29
|
<div class="position:fixed height:300px width:300px background:whitesmoke" positionable>
|
|
31
|
-
<div
|
|
30
|
+
<div drag-area></div>
|
|
32
31
|
</div>
|
|
33
32
|
|
|
34
33
|
<div class="position:fixed height:300px width:300px background:brown" positionable>
|
|
35
|
-
<div
|
|
34
|
+
<div drag-area></div>
|
|
36
35
|
</div>
|
|
37
|
-
|
|
38
|
-
<!-- <div class="resize resize3" resizable>
|
|
39
|
-
<div resize="left"></div>
|
|
40
|
-
<div resize="right"></div>
|
|
41
|
-
<div resize="top"></div>
|
|
42
|
-
<div resize="bottom"></div>
|
|
43
|
-
</div> -->
|
|
44
|
-
<!--</div>-->
|
|
45
|
-
|
|
36
|
+
|
|
46
37
|
|
|
47
38
|
<script src="../dist/CoCreate-position.js"></script>
|
|
48
39
|
<script src="../../../CoCreateJS/dist/CoCreate.js" ></script>
|
package/docs/index.html
CHANGED
|
@@ -10,7 +10,7 @@
|
|
|
10
10
|
<meta name="description" content="A draggable, customizable Pop up that toggle hiddent content via attributes. Great for multitasking and showing multiple views." />
|
|
11
11
|
<meta name="keywords" content="helper classes, utility classes, css framework, css library, inline style classes" />
|
|
12
12
|
<meta name="robots" content="index,follow" />
|
|
13
|
-
<meta property="og:image" content="https://cdn.cocreate.app/docs/
|
|
13
|
+
<meta property="og:image" content="https://cdn.cocreate.app/docs/position.png">
|
|
14
14
|
|
|
15
15
|
<link rel="stylesheet" href="/docs/index.css" collection="files" document_id="60888216117c640e7596303f" name="src" type="text/css" save="true" />
|
|
16
16
|
</head>
|
|
@@ -30,7 +30,7 @@
|
|
|
30
30
|
</div>
|
|
31
31
|
<div class="display:flex align-items:center font-size:20px position:absolute right:0 padding:5px background:white">
|
|
32
32
|
<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."
|
|
33
|
-
share-title="CoCreate-position" share-height="600" share-width="700" share-media="https://cdn.cocreate.app/docs/
|
|
33
|
+
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">
|
|
34
34
|
<div class="display:none social-networks">
|
|
35
35
|
<a class="margin-right:15px" share-network='twitter' title="Share on twitter"><i class="fab fa-twitter"></i></a>
|
|
36
36
|
<a class="margin-right:15px" share-network='facebook' title="Share on Facebook"><i class="fab fa-facebook"></i></a>
|
|
@@ -46,92 +46,92 @@
|
|
|
46
46
|
<div id="xxxxx-section" class="display:flex flex-wrap:wrap">
|
|
47
47
|
<div class="flex-grow:1 width:400px width:300px@xs padding:0px_10px margin-top:60px">
|
|
48
48
|
|
|
49
|
-
<div id="
|
|
50
|
-
<span class="display:flex align-items:center width:fit-content" hover="display:block!important" hover-target='[href="#
|
|
49
|
+
<div id="position-usage" class="margin-top:80px border-bottom:1px_solid_lightgrey" scroll scroll-intersect="color:dodgerblue" scroll-target="#position-usage-section">
|
|
50
|
+
<span class="display:flex align-items:center width:fit-content" hover="display:block!important" hover-target='[href="#position-usage"]'>
|
|
51
51
|
<h2 class="padding:5px_0px">Usage</h2>
|
|
52
|
-
<a class="margin-left:10px display:none" href="#
|
|
52
|
+
<a class="margin-left:10px display:none" href="#position-usage"><i class="fas fa-link"></i></a>
|
|
53
53
|
</span>
|
|
54
54
|
</div>
|
|
55
55
|
<div class="">
|
|
56
56
|
<p class="padding-top:15px">CoCreate-position uses <a> tag.</p>
|
|
57
|
-
<p class="padding-top:15px">When you click <a> tag,
|
|
57
|
+
<p class="padding-top:15px">When you click <a> tag, position comes to the surface.</p>
|
|
58
58
|
|
|
59
59
|
<div class="flex-grow:1 min-width:300px width:100%">
|
|
60
60
|
<pre>
|
|
61
61
|
<code class="language-html">
|
|
62
62
|
<button>
|
|
63
|
-
<a target="
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
63
|
+
<a target="position" href="https://server.cocreate.app/CoCreate-adminUI/module_datatable.html"
|
|
64
|
+
position-ajax="false"
|
|
65
|
+
position-width="520px"
|
|
66
|
+
position-height="100%"
|
|
67
|
+
position-color="#229954"
|
|
68
|
+
position-header="false"
|
|
69
|
+
position-x="0px"
|
|
70
|
+
position-y="0px"
|
|
71
71
|
data-open_in="page">
|
|
72
|
-
Show
|
|
72
|
+
Show position On Page
|
|
73
73
|
</a>
|
|
74
74
|
</button>
|
|
75
75
|
</code>
|
|
76
76
|
</pre>
|
|
77
77
|
</div>
|
|
78
78
|
</div>
|
|
79
|
-
<div id="
|
|
80
|
-
<span class="display:flex align-items:center width:fit-content" hover="display:block!important" hover-target='[href="#
|
|
79
|
+
<div id="position-attributes" class="margin-top:80px border-bottom:1px_solid_lightgrey" scroll scroll-intersect="color:dodgerblue" scroll-target="#position-attributes-section">
|
|
80
|
+
<span class="display:flex align-items:center width:fit-content" hover="display:block!important" hover-target='[href="#position-attributes"]'>
|
|
81
81
|
<h2 class="padding:5px_0px">Attributes</h2>
|
|
82
|
-
<a class="margin-left:10px display:none" href="#
|
|
82
|
+
<a class="margin-left:10px display:none" href="#position-attributes"><i class="fas fa-link"></i></a>
|
|
83
83
|
</span>
|
|
84
84
|
</div>
|
|
85
85
|
<ul class="list-style-type:none ">
|
|
86
86
|
<li class="padding:15px_0px border-bottom:1px_solid_lightgrey">
|
|
87
87
|
<h4><span>target</span> <span class="cocreate-badge success">string</span> <span class="cocreate-badge danger">required</span></h4>
|
|
88
|
-
<p>Target must be "
|
|
88
|
+
<p>Target must be "position".</p>
|
|
89
89
|
</li>
|
|
90
90
|
<li class="padding:15px_0px border-bottom:1px_solid_lightgrey">
|
|
91
91
|
<h4><span>href</span> <span class="cocreate-badge success">string</span> <span class="cocreate-badge danger">required</span></h4>
|
|
92
|
-
<p>Href attribute indicates html file to set in
|
|
92
|
+
<p>Href attribute indicates html file to set in position.</p>
|
|
93
93
|
</li>
|
|
94
94
|
<li class="padding:15px_0px border-bottom:1px_solid_lightgrey">
|
|
95
|
-
<h4><span>
|
|
95
|
+
<h4><span>position-ajax</span> <span class="cocreate-badge success">boolean</span> <span class="cocreate-badge warning">optional</span></h4>
|
|
96
96
|
<p>Attribute whether to use ajax or not.</p>
|
|
97
97
|
</li>
|
|
98
98
|
<li class="padding:15px_0px border-bottom:1px_solid_lightgrey">
|
|
99
|
-
<h4><span>
|
|
100
|
-
<p>Width of
|
|
99
|
+
<h4><span>position-width</span> <span class="cocreate-badge success">string</span> <span class="cocreate-badge warning">optional</span></h4>
|
|
100
|
+
<p>Width of position. Unit can be pixel or percent.</p>
|
|
101
101
|
</li>
|
|
102
102
|
<li class="padding:15px_0px border-bottom:1px_solid_lightgrey">
|
|
103
|
-
<h4><span>
|
|
104
|
-
<p>Height of
|
|
103
|
+
<h4><span>position-height</span> <span class="cocreate-badge success">string</span> <span class="cocreate-badge warning">optional</span></h4>
|
|
104
|
+
<p>Height of position. Unit can be pixel or percent.</p>
|
|
105
105
|
</li>
|
|
106
106
|
<li class="padding:15px_0px border-bottom:1px_solid_lightgrey">
|
|
107
|
-
<h4><span>
|
|
108
|
-
<p>Color of
|
|
107
|
+
<h4><span>position-color</span> <span class="cocreate-badge success">color</span> <span class="cocreate-badge warning">optional</span></h4>
|
|
108
|
+
<p>Color of position border.</p>
|
|
109
109
|
</li>
|
|
110
110
|
<li class="padding:15px_0px border-bottom:1px_solid_lightgrey">
|
|
111
|
-
<h4><span>
|
|
111
|
+
<h4><span>position-header</span> <span class="cocreate-badge success">boolean</span> <span class="cocreate-badge warning">optional</span></h4>
|
|
112
112
|
<p>Attribute whether to show header or not.</p>
|
|
113
113
|
</li>
|
|
114
114
|
<li class="padding:15px_0px border-bottom:1px_solid_lightgrey">
|
|
115
|
-
<h4><span>
|
|
116
|
-
<p>Position X of
|
|
115
|
+
<h4><span>position-x</span> <span class="cocreate-badge success">string</span> <span class="cocreate-badge warning">optional</span></h4>
|
|
116
|
+
<p>Position X of position.</p>
|
|
117
117
|
</li>
|
|
118
118
|
<li class="padding:15px_0px border-bottom:1px_solid_lightgrey">
|
|
119
|
-
<h4><span>
|
|
120
|
-
<p>Position Y of
|
|
119
|
+
<h4><span>position-y</span> <span class="cocreate-badge success">string</span> <span class="cocreate-badge warning">optional</span></h4>
|
|
120
|
+
<p>Position Y of position.</p>
|
|
121
121
|
</li>
|
|
122
122
|
<li class="padding:15px_0px border-bottom:1px_solid_lightgrey">
|
|
123
123
|
<h4><span>open_in</span> <span class="cocreate-badge success">string</span> <span class="cocreate-badge warning">optional</span></h4>
|
|
124
|
-
<p>Attribute where to show
|
|
124
|
+
<p>Attribute where to show position in. "page" for current page. "parent" for parent page. "root" for root page.</p>
|
|
125
125
|
</li>
|
|
126
126
|
</ul>
|
|
127
127
|
</div>
|
|
128
128
|
|
|
129
129
|
<div class="flex-grow:1 width:300px padding:0px_10px margin-top:60px border-bottom:1px_solid_lightgrey">
|
|
130
130
|
<!-- SandBox -->
|
|
131
|
-
<div id="
|
|
132
|
-
<span class="display:flex align-items:center width:fit-content" hover="display:block!important" hover-target='[href="#
|
|
131
|
+
<div id="position-demo" class="border-bottom:1px_solid_lightgrey" scroll scroll-intersect="color:dodgerblue" scroll-target="#position-demo-section">
|
|
132
|
+
<span class="display:flex align-items:center width:fit-content" hover="display:block!important" hover-target='[href="#position-demo"]'>
|
|
133
133
|
<h2 class="padding:5px_0px">Demo</h2>
|
|
134
|
-
<a class="margin-left:10px display:none" href="#
|
|
134
|
+
<a class="margin-left:10px display:none" href="#position-demo"><i class="fas fa-link"></i></a>
|
|
135
135
|
</span>
|
|
136
136
|
</div>
|
|
137
137
|
<div class="position:sticky top:0 padding:15px_0px height:100vh">
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@cocreate/position",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.3",
|
|
4
4
|
"description": "Make any element draggable and movable. Customizable via attributes, great for popups, alerts, multitasking and displaying multiple views.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"position",
|
|
@@ -61,7 +61,7 @@
|
|
|
61
61
|
"webpack-log": "^3.0.1"
|
|
62
62
|
},
|
|
63
63
|
"dependencies": {
|
|
64
|
-
"@cocreate/docs": "^1.3.
|
|
65
|
-
"@cocreate/observer": "^1.5.
|
|
64
|
+
"@cocreate/docs": "^1.3.5",
|
|
65
|
+
"@cocreate/observer": "^1.5.4"
|
|
66
66
|
}
|
|
67
67
|
}
|
package/src/index.css
CHANGED
|
@@ -1,46 +1,10 @@
|
|
|
1
|
-
|
|
2
|
-
/*position: relative;*/
|
|
3
|
-
z-index: 8;
|
|
4
|
-
height: -moz-available;
|
|
5
|
-
height: calc(100vh - 50px);
|
|
6
|
-
height: -webkit-fill-available;
|
|
7
|
-
height: fill-available;
|
|
8
|
-
width: -moz-available;
|
|
9
|
-
width: -webkit-fill-available;
|
|
10
|
-
width: fill-available;
|
|
11
|
-
pointer-events: none;
|
|
12
|
-
top: 0;
|
|
13
|
-
}
|
|
14
|
-
|
|
15
|
-
.hide-nav + #modal-viewport{
|
|
16
|
-
margin-top:0px;
|
|
17
|
-
height: 100vh;
|
|
18
|
-
max-height: -moz-available;
|
|
19
|
-
max-height: -webkit-fill-available;
|
|
20
|
-
max-height: fill-available;
|
|
21
|
-
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
.modal.selected {
|
|
25
|
-
z-index: 10;
|
|
26
|
-
border-color: purple;
|
|
27
|
-
pointer-events: auto;
|
|
28
|
-
|
|
29
|
-
}
|
|
30
|
-
|
|
31
|
-
/** modal title **/
|
|
32
|
-
.modal-ghost {
|
|
1
|
+
.snap-ghost {
|
|
33
2
|
display: none;
|
|
34
3
|
background: #999;
|
|
35
4
|
opacity: 0;
|
|
36
|
-
/*pointer-events: none;*/
|
|
37
|
-
/* width: 300px;*/
|
|
38
|
-
/*height: 200px;*/
|
|
39
5
|
top: 0px;
|
|
40
6
|
left: 0px;
|
|
41
7
|
z-index: 20;
|
|
42
|
-
|
|
43
|
-
|
|
44
8
|
position: absolute;
|
|
45
9
|
margin: 0;
|
|
46
10
|
padding: 0;
|
|
@@ -53,43 +17,6 @@
|
|
|
53
17
|
}
|
|
54
18
|
|
|
55
19
|
|
|
56
|
-
|
|
57
|
-
position: absolute;
|
|
58
|
-
background-color: transparent;
|
|
59
|
-
min-height: 10px;
|
|
60
|
-
z-index: 10;
|
|
61
|
-
left: 0;
|
|
62
|
-
top: 0;
|
|
63
|
-
right: 0;
|
|
64
|
-
height: 20px;
|
|
20
|
+
[drag-area] {
|
|
65
21
|
cursor: move;
|
|
66
22
|
}
|
|
67
|
-
|
|
68
|
-
.modal-parked {
|
|
69
|
-
width: 50px !important;
|
|
70
|
-
height: 50px !important;
|
|
71
|
-
border-radius: 50px;
|
|
72
|
-
z-index: 100 !important;
|
|
73
|
-
}
|
|
74
|
-
|
|
75
|
-
.modal-parked * {
|
|
76
|
-
display: none;
|
|
77
|
-
}
|
|
78
|
-
|
|
79
|
-
.parked-closeBtn {
|
|
80
|
-
width: 20px;
|
|
81
|
-
height: 20px;
|
|
82
|
-
border-radius: 20px;
|
|
83
|
-
position: absolute;
|
|
84
|
-
background-color: #ddd;
|
|
85
|
-
right: -3px;
|
|
86
|
-
top: -3px;
|
|
87
|
-
|
|
88
|
-
display: none;
|
|
89
|
-
}
|
|
90
|
-
.modal-parked:hover > .parked-closeBtn{
|
|
91
|
-
display: flex!important;
|
|
92
|
-
align-items: center;
|
|
93
|
-
justify-content: center;
|
|
94
|
-
cursor: pointer;
|
|
95
|
-
}
|
package/webpack.config.js
CHANGED
|
@@ -13,7 +13,7 @@ module.exports = {
|
|
|
13
13
|
filename: isProduction ? "[name].min.js" : "[name].js",
|
|
14
14
|
libraryTarget: "umd",
|
|
15
15
|
libraryExport: "default",
|
|
16
|
-
library: ["CoCreate", "
|
|
16
|
+
library: ["CoCreate", "position"],
|
|
17
17
|
globalObject: "this",
|
|
18
18
|
// publicPath: 'https://server.cocreate.app/CoCreateJS/dist/'
|
|
19
19
|
},
|