@cocreate/position 1.0.0 → 1.0.1

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.
Files changed (9) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/CONTRIBUTING.md +1 -1
  3. package/CoCreate.config.js +2 -2
  4. package/README.md +10 -10
  5. package/demo/index.html +3 -12
  6. package/docs/index.html +36 -36
  7. package/package.json +1 -1
  8. package/src/index.css +2 -75
  9. package/webpack.config.js +1 -1
package/CHANGELOG.md CHANGED
@@ -1,3 +1,11 @@
1
+ ## [1.0.1](https://github.com/CoCreate-app/CoCreate-position/compare/v1.0.0...v1.0.1) (2022-06-27)
2
+
3
+
4
+ ### Bug Fixes
5
+
6
+ * removed unused css ([a173185](https://github.com/CoCreate-app/CoCreate-position/commit/a1731854fa4d2d2ef15c9055908dfec9e7c31291))
7
+ * typo's ([31fde94](https://github.com/CoCreate-app/CoCreate-position/commit/31fde94d0df15cb1dcb074da6e5040930c55bc02))
8
+
1
9
  # 1.0.0 (2022-06-27)
2
10
 
3
11
 
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 modal https://github.com/contributor/CoCreate-position.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/modal/index.html",
15
+ "path": "/docs/position/index.html",
16
16
  "domains": [
17
17
  "*",
18
18
  "general.cocreate.app"
19
19
  ],
20
- "directory": "/docs/modal",
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
- 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)
3
+ 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)
4
4
 
5
- ![minified](https://img.badgesize.io/https://cdn.cocreate.app/modal/latest/CoCreate-position.min.js?style=flat-square&label=minified&color=orange)
6
- ![gzip](https://img.badgesize.io/https://cdn.cocreate.app/modal/latest/CoCreate-position.min.js?compression=gzip&style=flat-square&label=gzip&color=yellow)
7
- ![brotli](https://img.badgesize.io/https://cdn.cocreate.app/modal/latest/CoCreate-position.min.js?compression=brotli&style=flat-square&label=brotli)
5
+ ![minified](https://img.badgesize.io/https://cdn.cocreate.app/position/latest/CoCreate-position.min.js?style=flat-square&label=minified&color=orange)
6
+ ![gzip](https://img.badgesize.io/https://cdn.cocreate.app/position/latest/CoCreate-position.min.js?compression=gzip&style=flat-square&label=gzip&color=yellow)
7
+ ![brotli](https://img.badgesize.io/https://cdn.cocreate.app/position/latest/CoCreate-position.min.js?compression=brotli&style=flat-square&label=brotli)
8
8
  ![GitHub latest release](https://img.shields.io/github/v/release/CoCreate-app/CoCreate-position?style=flat-square)
9
9
  ![License](https://img.shields.io/github/license/CoCreate-app/CoCreate-position?style=flat-square)
10
10
  ![Hiring](https://img.shields.io/static/v1?style=flat-square&label=&message=Hiring&color=blueviolet)
11
11
 
12
12
  ![CoCreate-position](https://cdn.cocreate.app/docs/CoCreate-position.gif)
13
13
 
14
- ## [Docs & Demo](https://cocreate.app/docs/modal)
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/modal)
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/modal/latest/CoCreate-position.min.js"></script>
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/modal/latest/CoCreate-position.min.css"></script>
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/modal
31
+ $ npm i @cocreate/position
32
32
  ```
33
33
 
34
34
  ## yarn
35
35
 
36
36
  ```shell
37
- $ yarn install @cocreate/modal
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 class="height:40px" drag-area></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 class="height:40px" drag-area></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/modal.png">
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/modal.png" hover="display:block!important" hover-target=".social-networks">
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="modal-usage" class="margin-top:80px border-bottom:1px_solid_lightgrey" scroll scroll-intersect="color:dodgerblue" scroll-target="#modal-usage-section">
50
- <span class="display:flex align-items:center width:fit-content" hover="display:block!important" hover-target='[href="#modal-usage"]'>
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="#modal-usage"><i class="fas fa-link"></i></a>
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 &lt;a&gt; tag.</p>
57
- <p class="padding-top:15px">When you click &lt;a&gt; tag, modal comes to the surface.</p>
57
+ <p class="padding-top:15px">When you click &lt;a&gt; 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
  &lt;button&gt;
63
- &lt;a target="modal" href="https://server.cocreate.app/CoCreate-adminUI/module_datatable.html"
64
- modal-ajax="false"
65
- modal-width="520px"
66
- modal-height="100%"
67
- modal-color="#229954"
68
- modal-header="false"
69
- modal-x="0px"
70
- modal-y="0px"
63
+ &lt;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"&gt;
72
- Show Modal On Page
72
+ Show position On Page
73
73
  &lt;/a&gt;
74
74
  &lt;/button&gt;
75
75
  </code>
76
76
  </pre>
77
77
  </div>
78
78
  </div>
79
- <div id="modal-attributes" class="margin-top:80px border-bottom:1px_solid_lightgrey" scroll scroll-intersect="color:dodgerblue" scroll-target="#modal-attributes-section">
80
- <span class="display:flex align-items:center width:fit-content" hover="display:block!important" hover-target='[href="#modal-attributes"]'>
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="#modal-attributes"><i class="fas fa-link"></i></a>
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 "modal".</p>
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 modal.</p>
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>modal-ajax</span> <span class="cocreate-badge success">boolean</span> <span class="cocreate-badge warning">optional</span></h4>
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>modal-width</span> <span class="cocreate-badge success">string</span> <span class="cocreate-badge warning">optional</span></h4>
100
- <p>Width of modal. Unit can be pixel or percent.</p>
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>modal-height</span> <span class="cocreate-badge success">string</span> <span class="cocreate-badge warning">optional</span></h4>
104
- <p>Height of modal. Unit can be pixel or percent.</p>
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>modal-color</span> <span class="cocreate-badge success">color</span> <span class="cocreate-badge warning">optional</span></h4>
108
- <p>Color of modal border.</p>
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>modal-header</span> <span class="cocreate-badge success">boolean</span> <span class="cocreate-badge warning">optional</span></h4>
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>modal-x</span> <span class="cocreate-badge success">string</span> <span class="cocreate-badge warning">optional</span></h4>
116
- <p>Position X of modal.</p>
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>modal-y</span> <span class="cocreate-badge success">string</span> <span class="cocreate-badge warning">optional</span></h4>
120
- <p>Position Y of modal.</p>
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 modal in. "page" for current page. "parent" for parent page. "root" for root page.</p>
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="modal-demo" class="border-bottom:1px_solid_lightgrey" scroll scroll-intersect="color:dodgerblue" scroll-target="#modal-demo-section">
132
- <span class="display:flex align-items:center width:fit-content" hover="display:block!important" hover-target='[href="#modal-demo"]'>
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="#modal-demo"><i class="fas fa-link"></i></a>
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.0",
3
+ "version": "1.0.1",
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",
package/src/index.css CHANGED
@@ -1,46 +1,10 @@
1
- #modal-viewport {
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
- .modal-drag-area {
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", "modal"],
16
+ library: ["CoCreate", "position"],
17
17
  globalObject: "this",
18
18
  // publicPath: 'https://server.cocreate.app/CoCreateJS/dist/'
19
19
  },