@cocreate/resize 1.18.0 → 2.0.0

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 (12) hide show
  1. package/.github/FUNDING.yml +1 -1
  2. package/.github/workflows/automated.yml +18 -7
  3. package/CHANGELOG.md +531 -498
  4. package/CONTRIBUTING.md +6 -6
  5. package/README.md +17 -17
  6. package/demo/dashboard.html +2 -2
  7. package/demo/index.html +2 -2
  8. package/docs/index.html +7 -7
  9. package/package.json +7 -7
  10. package/src/index.css +102 -39
  11. package/src/index.js +757 -667
  12. package/webpack.config.js +1 -1
package/CONTRIBUTING.md CHANGED
@@ -1,19 +1,19 @@
1
1
  # Contributing to CoCreate-resize
2
2
 
3
- This project is work of [many contributors](https://github.com/CoCreate-app/CoCreate-resize/graphs/contributors).
4
- You're encouraged to submit [pull requests](https://github.com/CoCreate-app/CoCreate-resize/pulls),
5
- [propose features and discuss issues](https://github.com/CoCreate-app/CoCreate-resize/issues).
3
+ This project is work of [many contributors](https://github.com/CoCreateJS/resize/graphs/contributors).
4
+ You're encouraged to submit [pull requests](https://github.com/CoCreateJS/resize/pulls),
5
+ [propose features and discuss issues](https://github.com/CoCreateJS/resize/issues).
6
6
 
7
7
  In the examples below, substitute your Github username for `contributor` in URLs.
8
8
 
9
9
  ## Fork the Project
10
10
 
11
- Fork the [project on Github](https://github.com/CoCreate-app/CoCreate-resize) and check out your copy.
11
+ Fork the [project on Github](https://github.com/CoCreateJS/resize) and check out your copy.
12
12
 
13
13
  ```
14
14
  git clone https://github.com/contributor/CoCreate-resize.git
15
15
  cd CoCreate-resize
16
- git remote add upstream https://github.com/CoCreate-app/CoCreate-resize.git
16
+ git remote add upstream https://github.com/CoCreateJS/resize.git
17
17
  ```
18
18
 
19
19
  ## Create a Topic Branch
@@ -75,7 +75,7 @@ git push origin my-feature-branch
75
75
 
76
76
  ## Make a Pull Request
77
77
 
78
- Go to [https://github.com/CoCreate-app/CoCreate-resize](https://github.com/CoCreate-app/CoCreate-resize) and select your feature branch.
78
+ Go to [https://github.com/CoCreateJS/resize](https://github.com/CoCreateJS/resize) and select your feature branch.
79
79
  Click the 'Pull Request' button and fill out the form. Pull requests are usually reviewed within a few days.
80
80
 
81
81
  ## Rebase
package/README.md CHANGED
@@ -1,28 +1,28 @@
1
1
  # CoCreate-resize
2
2
 
3
- A light weight resize handler make any element resizable by adding data attributes or usinng init object. Great for Customized text box or text area. Take it for a spin in our [playground!](https://cocreate.app/docs/resize)
3
+ A light weight resize handler make any element resizable by adding data attributes or usinng init object. Great for Customized text box or text area. Take it for a spin in our [playground!](https://CoCreateJS.com/docs/resize)
4
4
 
5
- ![minified](https://img.badgesize.io/https://cdn.cocreate.app/resize/latest/CoCreate-resize.min.js?style=flat-square&label=minified&color=orange)
6
- ![gzip](https://img.badgesize.io/https://cdn.cocreate.app/resize/latest/CoCreate-resize.min.js?compression=gzip&style=flat-square&label=gzip&color=yellow)
7
- ![brotli](https://img.badgesize.io/https://cdn.cocreate.app/resize/latest/CoCreate-resize.min.js?compression=brotli&style=flat-square&label=brotli)
8
- ![GitHub latest release](https://img.shields.io/github/v/release/CoCreate-app/CoCreate-resize?style=flat-square)
9
- ![License](https://img.shields.io/github/license/CoCreate-app/CoCreate-resize?style=flat-square)
5
+ ![minified](https://img.badgesize.io/https://cdn.CoCreateJS.com/resize/latest/CoCreate-resize.min.js?style=flat-square&label=minified&color=orange)
6
+ ![gzip](https://img.badgesize.io/https://cdn.CoCreateJS.com/resize/latest/CoCreate-resize.min.js?compression=gzip&style=flat-square&label=gzip&color=yellow)
7
+ ![brotli](https://img.badgesize.io/https://cdn.CoCreateJS.com/resize/latest/CoCreate-resize.min.js?compression=brotli&style=flat-square&label=brotli)
8
+ ![GitHub latest release](https://img.shields.io/github/v/release/CoCreateJS/resize?style=flat-square)
9
+ ![License](https://img.shields.io/github/license/CoCreateJS/resize?style=flat-square)
10
10
  ![Hiring](https://img.shields.io/static/v1?style=flat-square&label=&message=Hiring&color=blueviolet)
11
11
 
12
- ![CoCreate-resize](https://cdn.cocreate.app/docs/CoCreate-resize.gif)
12
+ ![CoCreate-resize](https://cdn.CoCreateJS.com/docs/CoCreate-resize.gif)
13
13
 
14
- ## [Docs & Demo](https://cocreate.app/docs/resize)
14
+ ## [Docs & Demo](https://CoCreateJS.com/docs/resize)
15
15
 
16
- For a complete guide and working demo refer to the [doumentation](https://cocreate.app/docs/resize)
16
+ For a complete guide and working demo refer to the [doumentation](https://CoCreateJS.com/docs/resize)
17
17
 
18
18
  ## CDN
19
19
 
20
20
  ```html
21
- <script src="https://cdn.cocreate.app/resize/latest/CoCreate-resize.min.js"></script>
21
+ <script src="https://cdn.CoCreateJS.com/resize/latest/CoCreate-resize.min.js"></script>
22
22
  ```
23
23
 
24
24
  ```html
25
- <script src="https://cdn.cocreate.app/resize/latest/CoCreate-resize.min.css"></script>
25
+ <script src="https://cdn.CoCreateJS.com/resize/latest/CoCreate-resize.min.css"></script>
26
26
  ```
27
27
 
28
28
  ## NPM
@@ -50,13 +50,13 @@ $ yarn install @cocreate/resize
50
50
 
51
51
  # Announcements
52
52
 
53
- All updates to this library are documented in our [CHANGELOG](https://github.com/CoCreate-app/CoCreate-resize/blob/master/CHANGELOG.md) and [releases](https://github.com/CoCreate-app/CoCreate-resize/releases). You may also subscribe to email for releases and breaking changes.
53
+ All updates to this library are documented in our [CHANGELOG](https://github.com/CoCreateJS/resize/blob/master/CHANGELOG.md) and [releases](https://github.com/CoCreateJS/resize/releases). You may also subscribe to email for releases and breaking changes.
54
54
 
55
55
  <a name="roadmap"></a>
56
56
 
57
57
  # Roadmap
58
58
 
59
- 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-resize/issues) and [pull requests](https://github.com/CoCreate-app/CoCreate-resize/pulls). We would love to hear your feedback.
59
+ If you are interested in the future direction of this project, please take a look at our open [issues](https://github.com/CoCreateJS/resize/issues) and [pull requests](https://github.com/CoCreateJS/resize/pulls). We would love to hear your feedback.
60
60
 
61
61
  <a name="about"></a>
62
62
 
@@ -64,7 +64,7 @@ If you are interested in the future direction of this project, please take a loo
64
64
 
65
65
  CoCreate-resize is guided and supported by the CoCreate Developer Experience Team.
66
66
 
67
- Please Email the Developer Experience Team [here](mailto:develop@cocreate.app) in case of any queries.
67
+ Please Email the Developer Experience Team [here](mailto:develop@CoCreateJS.com) in case of any queries.
68
68
 
69
69
  CoCreate-resize is maintained and funded by CoCreate. The names and logos for CoCreate are trademarks of CoCreate, LLC.
70
70
 
@@ -72,9 +72,9 @@ CoCreate-resize is maintained and funded by CoCreate. The names and logos for Co
72
72
 
73
73
  # How to Contribute
74
74
 
75
- We encourage contribution to our libraries (you might even score some nifty swag), please see our [CONTRIBUTING](https://github.com/CoCreate-app/CoCreate-resize/blob/master/CONTRIBUTING.md) guide for details.
75
+ We encourage contribution to our libraries (you might even score some nifty swag), please see our [CONTRIBUTING](https://github.com/CoCreateJS/resize/blob/master/CONTRIBUTING.md) guide for details.
76
76
 
77
- 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-resize/issues) and [pull requests](https://github.com/CoCreate-app/CoCreate-resize/pulls) or merely upvote or comment on existing issues or pull requests.
77
+ 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/CoCreateJS/resize/issues) and [pull requests](https://github.com/CoCreateJS/resize/pulls) or merely upvote or comment on existing issues or pull requests.
78
78
 
79
79
  We appreciate your continued support, thank you!
80
80
 
@@ -82,4 +82,4 @@ We appreciate your continued support, thank you!
82
82
  <a name="license"></a>
83
83
  # License
84
84
 
85
- [The MIT License (MIT)](https://github.com/CoCreate-app/CoCreate-resize/blob/master/LICENSE)
85
+ [The MIT License (MIT)](https://github.com/CoCreateJS/resize/blob/master/LICENSE)
package/demo/dashboard.html CHANGED
@@ -465,7 +465,7 @@
465
465
  </button>
466
466
  </main>
467
467
 
468
- <script src="https://CoCreate.app/dist/CoCreate.js"></script>
469
- <!-- <script src="https://CoCreate.app/dist/CoCreate.js"></script> -->
468
+ <script src="https://CoCreateJS.com/dist/CoCreate.js"></script>
469
+ <!-- <script src="https://CoCreateJS.com/dist/CoCreate.js"></script> -->
470
470
  </body>
471
471
  </html>
package/demo/index.html CHANGED
@@ -10,7 +10,7 @@
10
10
  sizes="32x32"
11
11
  href="../assets/favicon.ico" />
12
12
  <!-- CoCreate CSS CDN -->
13
- <!--<link rel="stylesheet" href="https://cdn.cocreate.app/resize/latest/CoCreate-resize.min.css" type="text/css" />-->
13
+ <!--<link rel="stylesheet" href="https://cdn.CoCreateJS.com/resize/latest/CoCreate-resize.min.css" type="text/css" />-->
14
14
  <!-- Custom CSS -->
15
15
  <style>
16
16
  body {
@@ -59,6 +59,6 @@
59
59
  <!--</div>-->
60
60
 
61
61
  <!-- <script src="../dist/CoCreate-resize.js"></script> -->
62
- <script src="https://CoCreate.app/dist/CoCreate.js"></script>
62
+ <script src="https://CoCreateJS.com/dist/CoCreate.js"></script>
63
63
  </body>
64
64
  </html>
package/docs/index.html CHANGED
@@ -9,7 +9,7 @@
9
9
  rel="icon"
10
10
  type="image/png"
11
11
  sizes="32x32"
12
- href="https://cocreate.app/images/favicon.ico" />
12
+ href="https://CoCreateJS.com/images/favicon.ico" />
13
13
  <meta
14
14
  name="description"
15
15
  content="A light weight resize handler make any element resizable by adding data attributes or usinng init object. Great for Customized text box or text area." />
@@ -19,7 +19,7 @@
19
19
  <meta name="robots" content="index,follow" />
20
20
  <meta
21
21
  property="og:image"
22
- content="https://cdn.cocreate.app/docs/resize.png" />
22
+ content="https://cdn.CoCreateJS.com/docs/resize.png" />
23
23
 
24
24
  <link
25
25
  rel="stylesheet"
@@ -73,7 +73,7 @@
73
73
  share-title="CoCreate-resize"
74
74
  share-height="600"
75
75
  share-width="700"
76
- share-media="https://cdn.cocreate.app/docs/resize.png"
76
+ share-media="https://cdn.CoCreateJS.com/docs/resize.png"
77
77
  hover="display:block!important"
78
78
  hover-query=".social-networks">
79
79
  <div class="display:none social-networks">
@@ -104,7 +104,7 @@
104
104
  ></a>
105
105
  </div>
106
106
  <a
107
- href="https://github.com/CoCreate-app/CoCreate-resize"
107
+ href="https://github.com/CoCreateJS/CoCreate-resize"
108
108
  target="_blank"
109
109
  class="margin-right:15px"
110
110
  ><i src="/assets/svg/github.svg"></i
@@ -143,7 +143,7 @@
143
143
  <p class="padding:10px_0px line-height:1.5">
144
144
  Or you can use cdn link:
145
145
  </p>
146
- <pre><code class="language-html">&lt;script&gt;https://cdn.cocreate.app/resize/latest/CoCreate-resize.min.js&lt;/script&gt;</code></pre>
146
+ <pre><code class="language-html">&lt;script&gt;https://cdn.CoCreateJS.com/resize/latest/CoCreate-resize.min.js&lt;/script&gt;</code></pre>
147
147
 
148
148
  <p class="padding:10px_0px line-height:1.5">
149
149
  resize usage content
@@ -329,13 +329,13 @@
329
329
  </div>
330
330
  </div>
331
331
  <button
332
- href="https://github.com/CoCreate-app/CoCreate-resize/tree/master/docs/index.html?message=docs%3A%20describe%20your%20change..."
332
+ href="https://github.com/CoCreateJS/CoCreate-resize/tree/master/docs/index.html?message=docs%3A%20describe%20your%20change..."
333
333
  target="_blank"
334
334
  class="display:flex justify-content:center align-items:center position:fixed bottom:15px right:15px height:50px width:50px border-radius:50% box-shadow:0px_2px_10px_0px_rgba(0,_0,_0,_0.4)">
335
335
  <i src="../assets/svg/pencil-alt.svg"></i>
336
336
  </button>
337
337
  </main>
338
338
 
339
- <script src="https://CoCreate.app/dist/CoCreate.js"></script>
339
+ <script src="https://CoCreateJS.com/dist/CoCreate.js"></script>
340
340
  </body>
341
341
  </html>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@cocreate/resize",
3
- "version": "1.18.0",
3
+ "version": "2.0.0",
4
4
  "description": "A light weight resize handler make any element resizable by adding data attributes or usinng init object. Great for Customized text box or text area.",
5
5
  "keywords": [
6
6
  "resize",
@@ -22,21 +22,21 @@
22
22
  },
23
23
  "repository": {
24
24
  "type": "git",
25
- "url": "git+https://github.com/CoCreate-app/CoCreate-resize.git"
25
+ "url": "git+https://github.com/CoCreateJS/resize.git"
26
26
  },
27
27
  "author": "CoCreate LLC",
28
28
  "license": "MIT",
29
29
  "bugs": {
30
- "url": "https://github.com/CoCreate-app/CoCreate-resize/issues"
30
+ "url": "https://github.com/CoCreateJS/resize/issues"
31
31
  },
32
- "homepage": "https://cocreate.app/docs/resize",
32
+ "homepage": "https://CoCreateJS.com/docs/resize",
33
33
  "funding": {
34
34
  "type": "GitHub Sponsors ❤",
35
- "url": "https://github.com/sponsors/CoCreate-app"
35
+ "url": "https://github.com/sponsors/CoCreateJS"
36
36
  },
37
37
  "main": "src/index.js",
38
38
  "devDependencies": {
39
- "@cocreate/webpack": "^1.8.0",
39
+ "@cocreate/webpack": "^1.9.0",
40
40
  "css-loader": "^5.1.3",
41
41
  "esbuild": "^0.25.2",
42
42
  "esbuild-loader": "^4.3.0",
@@ -46,7 +46,7 @@
46
46
  "webpack-log": "^3.0.1"
47
47
  },
48
48
  "dependencies": {
49
- "@cocreate/observer": "^1.22.0"
49
+ "@cocreate/observer": "^1.23.0"
50
50
  },
51
51
  "allowScripts": {
52
52
  "@cocreate/observer@1.19.0": true,
package/src/index.css CHANGED
@@ -1,39 +1,102 @@
1
- div[resize] {
2
- position: absolute;
3
- display: block;
4
- }
5
- div[resize]:hover {
6
- background-color: rgba(0, 0, 0, 0.1);
7
- }
8
- div[resize='left'] {
9
- cursor: e-resize;
10
- width: 4px;
11
- left: 0px;
12
- top: 0;
13
- height: 100%;
14
- }
15
-
16
- div[resize='right'] {
17
- cursor: e-resize;
18
- width: 4px;
19
- right: 0px;
20
- top: 0;
21
- height: 100%;
22
- }
23
-
24
- div[resize='top'] {
25
- cursor: s-resize;
26
- height: 4px;
27
- width: 100%;
28
- top: 0px;
29
- left: 0;
30
- touch-action: auto;
31
- }
32
-
33
- div[resize='bottom'] {
34
- cursor: s-resize;
35
- height: 4px;
36
- width: 100%;
37
- bottom: 0px;
38
- left: 0;
39
- }
1
+ [resize="left"],
2
+ [resize="right"],
3
+ [resize="top"],
4
+ [resize="bottom"] {
5
+ --resize-handle-size: 8px;
6
+ --resize-handle-width: 1px;
7
+ --resize-handle-active-width: 3px;
8
+ --resize-handle-color: var(--coc-border-color, rgba(0, 0, 0, 0.175));
9
+ --resize-handle-active-color: var(--coc-primary, #405189);
10
+ position: absolute;
11
+ display: block;
12
+ z-index: 3;
13
+ touch-action: none;
14
+ }
15
+
16
+ [resize="left"]::after,
17
+ [resize="right"]::after,
18
+ [resize="top"]::after,
19
+ [resize="bottom"]::after {
20
+ position: absolute;
21
+ content: "";
22
+ background-color: var(--resize-handle-color);
23
+ transition:
24
+ background-color 0.15s ease,
25
+ width 0.15s ease,
26
+ height 0.15s ease;
27
+ }
28
+
29
+ [resize="left"]:hover::after,
30
+ [resize="left"]:active::after,
31
+ [resize="right"]:hover::after,
32
+ [resize="right"]:active::after,
33
+ [resize="top"]:hover::after,
34
+ [resize="top"]:active::after,
35
+ [resize="bottom"]:hover::after,
36
+ [resize="bottom"]:active::after {
37
+ background-color: var(--resize-handle-active-color);
38
+ }
39
+
40
+ [resize="left"],
41
+ [resize="right"] {
42
+ top: 0;
43
+ width: var(--resize-handle-size);
44
+ height: 100%;
45
+ cursor: ew-resize;
46
+ }
47
+
48
+ [resize="left"] {
49
+ left: calc(var(--resize-handle-size) / -2);
50
+ }
51
+
52
+ [resize="right"] {
53
+ right: calc(var(--resize-handle-size) / -2);
54
+ }
55
+
56
+ [resize="left"]::after,
57
+ [resize="right"]::after {
58
+ top: 0;
59
+ left: 50%;
60
+ width: var(--resize-handle-width);
61
+ height: 100%;
62
+ transform: translateX(-50%);
63
+ }
64
+
65
+ [resize="left"]:hover::after,
66
+ [resize="left"]:active::after,
67
+ [resize="right"]:hover::after,
68
+ [resize="right"]:active::after {
69
+ width: var(--resize-handle-active-width);
70
+ }
71
+
72
+ [resize="top"],
73
+ [resize="bottom"] {
74
+ left: 0;
75
+ width: 100%;
76
+ height: var(--resize-handle-size);
77
+ cursor: ns-resize;
78
+ }
79
+
80
+ [resize="top"] {
81
+ top: calc(var(--resize-handle-size) / -2);
82
+ }
83
+
84
+ [resize="bottom"] {
85
+ bottom: calc(var(--resize-handle-size) / -2);
86
+ }
87
+
88
+ [resize="top"]::after,
89
+ [resize="bottom"]::after {
90
+ top: 50%;
91
+ left: 0;
92
+ width: 100%;
93
+ height: var(--resize-handle-width);
94
+ transform: translateY(-50%);
95
+ }
96
+
97
+ [resize="top"]:hover::after,
98
+ [resize="top"]:active::after,
99
+ [resize="bottom"]:hover::after,
100
+ [resize="bottom"]:active::after {
101
+ height: var(--resize-handle-active-width);
102
+ }