@cocreate/resize 1.20.0 → 2.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 (10) hide show
  1. package/.github/FUNDING.yml +1 -1
  2. package/.github/workflows/automated.yml +18 -7
  3. package/CHANGELOG.md +538 -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.js +148 -47
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://gitlab.com/cocreatejs/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.20.0",
3
+ "version": "2.0.1",
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://gitlab.com/cocreatejs/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.9.0",
39
+ "@cocreate/webpack": "^2.0.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.23.0"
49
+ "@cocreate/observer": "^2.0.0"
50
50
  },
51
51
  "allowScripts": {
52
52
  "@cocreate/observer@1.19.0": true,
package/src/index.js CHANGED
@@ -15,10 +15,35 @@ document.head.appendChild(styleEl);
15
15
  const styleSheet = styleEl.sheet;
16
16
 
17
17
  const coCreateResize = {
18
+ /**
19
+ * CSS selector used by init() to find resizable elements.
20
+ * @public
21
+ * @environment client
22
+ * @type {string}
23
+ */
18
24
  selector: "", //'.resize',
25
+ /**
26
+ * Elements matched by the current selector.
27
+ * @public
28
+ * @environment client
29
+ * @type {NodeList<Element>}
30
+ */
19
31
  resizers: [],
32
+ /**
33
+ * Resize controller instances created for matching elements.
34
+ * @public
35
+ * @environment client
36
+ * @type {CoCreateResize[]}
37
+ */
20
38
  resizeWidgets: [],
21
39
 
40
+ /**
41
+ * Initializes resize controllers for elements matching handleObj.selector.
42
+ *
43
+ * @public
44
+ * @environment client
45
+ * @param {Object} handleObj - Selector and resize-handle selectors.
46
+ */
22
47
  init: function (handleObj) {
23
48
  for (var handleKey in handleObj)
24
49
  if (handleObj.hasOwnProperty(handleKey) && handleKey == "selector")
@@ -32,6 +57,13 @@ const coCreateResize = {
32
57
  });
33
58
  },
34
59
 
60
+ /**
61
+ * Initializes a resize controller for one element using the default handle selectors.
62
+ *
63
+ * @public
64
+ * @environment client
65
+ * @param {Element} target - Element to make resizable.
66
+ */
35
67
  initElement: function (target) {
36
68
  let resizeWidget = new CoCreateResize(target, {
37
69
  dragLeft: "[resize='left']",
@@ -361,6 +393,8 @@ CoCreateResize.prototype = {
361
393
  " grid-row-end:span_" +
362
394
  this.heightSpan
363
395
  );
396
+
397
+ this.collaborate({});
364
398
  }
365
399
 
366
400
  DIRECTIONS.map((d) => {
@@ -547,53 +581,27 @@ CoCreateResize.prototype = {
547
581
  },
548
582
 
549
583
  collaborate: function ({ left, top, width, height, rowEnd, columnEnd }) {
550
- if (window.CoCreate && window.CoCreate.text) {
551
- let domTextEditor = this.resizeWidget.closest("[contenteditable]");
552
- if (domTextEditor) {
553
- if (left)
554
- CoCreate.text.setStyle({
555
- domTextEditor,
556
- target: this.resizeWidget,
557
- property: "left",
558
- value: left + "px"
559
- });
560
- if (top)
561
- CoCreate.text.setStyle({
562
- domTextEditor,
563
- target: this.resizeWidget,
564
- property: "top",
565
- value: top + "px"
566
- });
567
- if (width)
568
- CoCreate.text.setStyle({
569
- domTextEditor,
570
- target: this.resizeWidget,
571
- property: "width",
572
- value: width + "px"
573
- });
574
- if (height)
575
- CoCreate.text.setStyle({
576
- domTextEditor,
577
- target: this.resizeWidget,
578
- property: "height",
579
- value: height + "px"
580
- });
581
- if (rowEnd)
582
- CoCreate.text.setStyle({
583
- domTextEditor,
584
- target: this.resizeWidget,
585
- property: "grid-row-end",
586
- value: "span " + rowEnd
587
- });
588
- if (columnEnd)
589
- CoCreate.text.setStyle({
590
- domTextEditor,
591
- target: this.resizeWidget,
592
- property: "grid-column-end",
593
- value: "span " + columnEnd
594
- });
595
- }
596
- }
584
+ const details = typeof this.resizeWidget.editor?.getStart === "function"
585
+ ? this.resizeWidget.editor : this.resizeWidget.editorDetails;
586
+ const editorElement = details?.element || details?.editorElement;
587
+ if (typeof details?.setAttribute !== "function" && !editorElement?.editor?.setAttribute) return;
588
+
589
+ const style = this.resizeWidget.ownerDocument.createElement("span").style;
590
+ style.cssText = this.resizeWidget.getAttribute("style") || "";
591
+ if (left !== undefined) style.left = left + "px";
592
+ if (top !== undefined) style.top = top + "px";
593
+ if (width !== undefined) style.width = width + "px";
594
+ if (height !== undefined) style.height = height + "px";
595
+ if (rowEnd !== undefined) style.setProperty("grid-row-end", "span " + rowEnd);
596
+ if (columnEnd !== undefined) style.setProperty("grid-column-end", "span " + columnEnd);
597
+
598
+ const result = typeof details.setAttribute === "function"
599
+ ? details.setAttribute("style", style.cssText)
600
+ : editorElement.editor.setAttribute({ target: this.resizeWidget, name: "style", value: style.cssText });
601
+ result?.catch(error => this.resizeWidget.dispatchEvent(new CustomEvent("editor-error", {
602
+ bubbles: true,
603
+ detail: { error }
604
+ })));
597
605
  }
598
606
  };
599
607
 
@@ -696,3 +704,96 @@ coCreateResize.init({
696
704
  dragBottom: "[resize='bottom']"
697
705
  });
698
706
  export default coCreateResize;
707
+
708
+ /**
709
+ * Preserves the element's original class value while resize updates grid sizing.
710
+ * @name class
711
+ * @kind attribute
712
+ * @environment client
713
+ * @type {string}
714
+ */
715
+
716
+ /**
717
+ * Internal marker applied to this module's injected style element.
718
+ * @name component
719
+ * @kind attribute
720
+ * @environment client
721
+ * @type {string}
722
+ * @private
723
+ */
724
+
725
+ /**
726
+ * Enables automatic content-based resizing when set to "auto". This applies to textareas and multiple selects.
727
+ * @name height
728
+ * @kind attribute
729
+ * @environment client
730
+ * @type {string}
731
+ * @acceptedValues auto
732
+ * @example
733
+ * <textarea height="auto"></textarea>
734
+ */
735
+
736
+ /**
737
+ * Runtime state marker added while a resize gesture is active.
738
+ * @name resizing
739
+ * @kind attribute
740
+ * @environment client
741
+ * @type {boolean}
742
+ */
743
+
744
+ /**
745
+ * Inline styles updated with the element's resized dimensions and grid span.
746
+ * @name style
747
+ * @kind attribute
748
+ * @environment client
749
+ * @type {string}
750
+ */
751
+
752
+ /**
753
+ * Enables interactive resizing unless explicitly set to "false".
754
+ *
755
+ * @name resizable
756
+ * @kind attribute
757
+ * @environment client
758
+ * @type {boolean}
759
+ * @acceptedValues false
760
+ * @example
761
+ * <div resizable><span resize="right"></span></div>
762
+ */
763
+
764
+ /**
765
+ * Marks a child element as a resize handle and selects its drag direction.
766
+ *
767
+ * @name resize
768
+ * @kind attribute
769
+ * @environment client
770
+ * @type {string}
771
+ * @acceptedValues left, right, top, bottom
772
+ * @example
773
+ * <span resize="right"></span>
774
+ */
775
+
776
+ /**
777
+ * 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.
778
+ *
779
+ * @module resize
780
+ * @environment client
781
+ */
782
+
783
+ /**
784
+ * Declarative selectors recognized by this module.
785
+ *
786
+ * @name declarative-selectors
787
+ * @kind member
788
+ * @selectors
789
+ * @environment client
790
+ * @example
791
+ * ```json
792
+ * [
793
+ * "",
794
+ * "[resizable]:not([resizable='false'])",
795
+ * "[height='auto']",
796
+ * "[height='auto'] option"
797
+ * ]
798
+ * ```
799
+ */