@cocreate/resize 1.20.0 → 2.0.0

package/CONTRIBUTING.md

@@ -1,19 +1,19 @@
 # Contributing to CoCreate-resize
 
-This project is work of [many contributors](https://github.com/CoCreate-app/CoCreate-resize/graphs/contributors).
-You're encouraged to submit [pull requests](https://github.com/CoCreate-app/CoCreate-resize/pulls),
-[propose features and discuss issues](https://github.com/CoCreate-app/CoCreate-resize/issues).
+This project is work of [many contributors](https://github.com/CoCreateJS/resize/graphs/contributors).
+You're encouraged to submit [pull requests](https://github.com/CoCreateJS/resize/pulls),
+[propose features and discuss issues](https://github.com/CoCreateJS/resize/issues).
 
 In the examples below, substitute your Github username for `contributor` in URLs.
 
 ## Fork the Project
 
-Fork the [project on Github](https://github.com/CoCreate-app/CoCreate-resize) and check out your copy.
+Fork the [project on Github](https://github.com/CoCreateJS/resize) and check out your copy.
 
 ```
 git clone https://github.com/contributor/CoCreate-resize.git
 cd CoCreate-resize
-git remote add upstream https://gitlab.com/cocreatejs/CoCreate-resize.git
+git remote add upstream https://github.com/CoCreateJS/resize.git
 ```
 
 ## Create a Topic Branch
@@ -75,7 +75,7 @@ git push origin my-feature-branch
 
 ## Make a Pull Request
 
-Go to [https://github.com/CoCreate-app/CoCreate-resize](https://github.com/CoCreate-app/CoCreate-resize) and select your feature branch.
+Go to [https://github.com/CoCreateJS/resize](https://github.com/CoCreateJS/resize) and select your feature branch.
 Click the 'Pull Request' button and fill out the form. Pull requests are usually reviewed within a few days.
 
 ## Rebase

package/README.md

@@ -1,28 +1,28 @@
 # CoCreate-resize
 
-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)
+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)
 
-![minified](https://img.badgesize.io/https://cdn.cocreate.app/resize/latest/CoCreate-resize.min.js?style=flat-square&label=minified&color=orange)
-![gzip](https://img.badgesize.io/https://cdn.cocreate.app/resize/latest/CoCreate-resize.min.js?compression=gzip&style=flat-square&label=gzip&color=yellow)
-![brotli](https://img.badgesize.io/https://cdn.cocreate.app/resize/latest/CoCreate-resize.min.js?compression=brotli&style=flat-square&label=brotli)
-![GitHub latest release](https://img.shields.io/github/v/release/CoCreate-app/CoCreate-resize?style=flat-square)
-![License](https://img.shields.io/github/license/CoCreate-app/CoCreate-resize?style=flat-square)
+![minified](https://img.badgesize.io/https://cdn.CoCreateJS.com/resize/latest/CoCreate-resize.min.js?style=flat-square&label=minified&color=orange)
+![gzip](https://img.badgesize.io/https://cdn.CoCreateJS.com/resize/latest/CoCreate-resize.min.js?compression=gzip&style=flat-square&label=gzip&color=yellow)
+![brotli](https://img.badgesize.io/https://cdn.CoCreateJS.com/resize/latest/CoCreate-resize.min.js?compression=brotli&style=flat-square&label=brotli)
+![GitHub latest release](https://img.shields.io/github/v/release/CoCreateJS/resize?style=flat-square)
+![License](https://img.shields.io/github/license/CoCreateJS/resize?style=flat-square)
 ![Hiring](https://img.shields.io/static/v1?style=flat-square&label=&message=Hiring&color=blueviolet)
 
-![CoCreate-resize](https://cdn.cocreate.app/docs/CoCreate-resize.gif)
+![CoCreate-resize](https://cdn.CoCreateJS.com/docs/CoCreate-resize.gif)
 
-## [Docs & Demo](https://cocreate.app/docs/resize)
+## [Docs & Demo](https://CoCreateJS.com/docs/resize)
 
-For a complete guide and working demo refer to the [doumentation](https://cocreate.app/docs/resize)
+For a complete guide and working demo refer to the [doumentation](https://CoCreateJS.com/docs/resize)
 
 ## CDN
 
 ```html
-<script src="https://cdn.cocreate.app/resize/latest/CoCreate-resize.min.js"></script>
+<script src="https://cdn.CoCreateJS.com/resize/latest/CoCreate-resize.min.js"></script>
 ```
 
 ```html
-<script src="https://cdn.cocreate.app/resize/latest/CoCreate-resize.min.css"></script>
+<script src="https://cdn.CoCreateJS.com/resize/latest/CoCreate-resize.min.css"></script>
 ```
 
 ## NPM
@@ -50,13 +50,13 @@ $ yarn install @cocreate/resize
 
 # Announcements
 
-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.
+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.
 
 <a name="roadmap"></a>
 
 # Roadmap
 
-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.
+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.
 
 <a name="about"></a>
 
@@ -64,7 +64,7 @@ If you are interested in the future direction of this project, please take a loo
 
 CoCreate-resize is guided and supported by the CoCreate Developer Experience Team.
 
-Please Email the Developer Experience Team [here](mailto:develop@cocreate.app) in case of any queries.
+Please Email the Developer Experience Team [here](mailto:develop@CoCreateJS.com) in case of any queries.
 
 CoCreate-resize is maintained and funded by CoCreate. The names and logos for CoCreate are trademarks of CoCreate, LLC.
 
@@ -72,9 +72,9 @@ CoCreate-resize is maintained and funded by CoCreate. The names and logos for Co
 
 # How to Contribute
 
-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.
+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.
 
-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.
+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.
 
 We appreciate your continued support, thank you!
 
@@ -82,4 +82,4 @@ We appreciate your continued support, thank you!
 <a name="license"></a>
 # License
 
-[The MIT License (MIT)](https://github.com/CoCreate-app/CoCreate-resize/blob/master/LICENSE)
+[The MIT License (MIT)](https://github.com/CoCreateJS/resize/blob/master/LICENSE)

package/demo/dashboard.html

@@ -465,7 +465,7 @@
 			</button>
 		</main>
 
-		<script src="https://CoCreate.app/dist/CoCreate.js"></script>
-		<!-- <script src="https://CoCreate.app/dist/CoCreate.js"></script> -->
+		<script src="https://CoCreateJS.com/dist/CoCreate.js"></script>
+		<!-- <script src="https://CoCreateJS.com/dist/CoCreate.js"></script> -->
 	</body>
 </html>

package/demo/index.html

@@ -10,7 +10,7 @@
             sizes="32x32"
             href="../assets/favicon.ico" />
         <!-- CoCreate CSS CDN -->
-        <!--<link rel="stylesheet" href="https://cdn.cocreate.app/resize/latest/CoCreate-resize.min.css" type="text/css" />-->
+        <!--<link rel="stylesheet" href="https://cdn.CoCreateJS.com/resize/latest/CoCreate-resize.min.css" type="text/css" />-->
         <!-- Custom CSS -->
         <style>
             body {
@@ -59,6 +59,6 @@
         <!--</div>-->
 
         <!-- <script src="../dist/CoCreate-resize.js"></script> -->
-        <script src="https://CoCreate.app/dist/CoCreate.js"></script>
+        <script src="https://CoCreateJS.com/dist/CoCreate.js"></script>
     </body>
 </html>

package/docs/index.html

@@ -9,7 +9,7 @@
 			rel="icon"
 			type="image/png"
 			sizes="32x32"
-			href="https://cocreate.app/images/favicon.ico" />
+			href="https://CoCreateJS.com/images/favicon.ico" />
 		<meta
 			name="description"
 			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 @@
 		<meta name="robots" content="index,follow" />
 		<meta
 			property="og:image"
-			content="https://cdn.cocreate.app/docs/resize.png" />
+			content="https://cdn.CoCreateJS.com/docs/resize.png" />
 
 		<link
 			rel="stylesheet"
@@ -73,7 +73,7 @@
 						share-title="CoCreate-resize"
 						share-height="600"
 						share-width="700"
-						share-media="https://cdn.cocreate.app/docs/resize.png"
+						share-media="https://cdn.CoCreateJS.com/docs/resize.png"
 						hover="display:block!important"
 						hover-query=".social-networks">
 						<div class="display:none social-networks">
@@ -104,7 +104,7 @@
 						></a>
 					</div>
 					<a
-						href="https://github.com/CoCreate-app/CoCreate-resize"
+						href="https://github.com/CoCreateJS/CoCreate-resize"
 						target="_blank"
 						class="margin-right:15px"
 						><i src="/assets/svg/github.svg"></i
@@ -143,7 +143,7 @@
 					<p class="padding:10px_0px line-height:1.5">
 						Or you can use cdn link:
 					</p>
-					<pre><code class="language-html">&lt;script&gt;https://cdn.cocreate.app/resize/latest/CoCreate-resize.min.js&lt;/script&gt;</code></pre>
+					<pre><code class="language-html">&lt;script&gt;https://cdn.CoCreateJS.com/resize/latest/CoCreate-resize.min.js&lt;/script&gt;</code></pre>
 
 					<p class="padding:10px_0px line-height:1.5">
 						resize usage content
@@ -329,13 +329,13 @@
 				</div>
 			</div>
 			<button
-				href="https://github.com/CoCreate-app/CoCreate-resize/tree/master/docs/index.html?message=docs%3A%20describe%20your%20change..."
+				href="https://github.com/CoCreateJS/CoCreate-resize/tree/master/docs/index.html?message=docs%3A%20describe%20your%20change..."
 				target="_blank"
 				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)">
 				<i src="../assets/svg/pencil-alt.svg"></i>
 			</button>
 		</main>
 
-		<script src="https://CoCreate.app/dist/CoCreate.js"></script>
+		<script src="https://CoCreateJS.com/dist/CoCreate.js"></script>
 	</body>
 </html>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cocreate/resize",
-  "version": "1.20.0",
+  "version": "2.0.0",
   "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.",
   "keywords": [
     "resize",
@@ -22,17 +22,17 @@
   },
   "repository": {
     "type": "git",
-    "url": "git+https://gitlab.com/cocreatejs/CoCreate-resize.git"
+    "url": "git+https://github.com/CoCreateJS/resize.git"
   },
   "author": "CoCreate LLC",
   "license": "MIT",
   "bugs": {
-    "url": "https://github.com/CoCreate-app/CoCreate-resize/issues"
+    "url": "https://github.com/CoCreateJS/resize/issues"
   },
-  "homepage": "https://cocreate.app/docs/resize",
+  "homepage": "https://CoCreateJS.com/docs/resize",
   "funding": {
     "type": "GitHub Sponsors ❤",
-    "url": "https://github.com/sponsors/CoCreate-app"
+    "url": "https://github.com/sponsors/CoCreateJS"
   },
   "main": "src/index.js",
   "devDependencies": {

package/src/index.js

@@ -15,10 +15,35 @@ document.head.appendChild(styleEl);
 const styleSheet = styleEl.sheet;
 
 const coCreateResize = {
+    /**
+     * CSS selector used by init() to find resizable elements.
+ * @public
+ * @environment client
+     * @type {string}
+ */
     selector: "", //'.resize',
+    /**
+     * Elements matched by the current selector.
+ * @public
+ * @environment client
+     * @type {NodeList<Element>}
+ */
     resizers: [],
+    /**
+     * Resize controller instances created for matching elements.
+ * @public
+ * @environment client
+     * @type {CoCreateResize[]}
+ */
     resizeWidgets: [],
 
+    /**
+     * Initializes resize controllers for elements matching handleObj.selector.
+     *
+ * @public
+ * @environment client
+     * @param {Object} handleObj - Selector and resize-handle selectors.
+ */
     init: function (handleObj) {
         for (var handleKey in handleObj)
             if (handleObj.hasOwnProperty(handleKey) && handleKey == "selector")
@@ -32,6 +57,13 @@ const coCreateResize = {
         });
     },
 
+    /**
+     * Initializes a resize controller for one element using the default handle selectors.
+     *
+ * @public
+ * @environment client
+     * @param {Element} target - Element to make resizable.
+ */
     initElement: function (target) {
         let resizeWidget = new CoCreateResize(target, {
             dragLeft: "[resize='left']",
@@ -361,6 +393,8 @@ CoCreateResize.prototype = {
                     " grid-row-end:span_" +
                     this.heightSpan
                 );
+
+            this.collaborate({});
         }
 
         DIRECTIONS.map((d) => {
@@ -547,53 +581,27 @@ CoCreateResize.prototype = {
     },
 
     collaborate: function ({ left, top, width, height, rowEnd, columnEnd }) {
-        if (window.CoCreate && window.CoCreate.text) {
-            let domTextEditor = this.resizeWidget.closest("[contenteditable]");
-            if (domTextEditor) {
-                if (left)
-                    CoCreate.text.setStyle({
-                        domTextEditor,
-                        target: this.resizeWidget,
-                        property: "left",
-                        value: left + "px"
-                    });
-                if (top)
-                    CoCreate.text.setStyle({
-                        domTextEditor,
-                        target: this.resizeWidget,
-                        property: "top",
-                        value: top + "px"
-                    });
-                if (width)
-                    CoCreate.text.setStyle({
-                        domTextEditor,
-                        target: this.resizeWidget,
-                        property: "width",
-                        value: width + "px"
-                    });
-                if (height)
-                    CoCreate.text.setStyle({
-                        domTextEditor,
-                        target: this.resizeWidget,
-                        property: "height",
-                        value: height + "px"
-                    });
-                if (rowEnd)
-                    CoCreate.text.setStyle({
-                        domTextEditor,
-                        target: this.resizeWidget,
-                        property: "grid-row-end",
-                        value: "span " + rowEnd
-                    });
-                if (columnEnd)
-                    CoCreate.text.setStyle({
-                        domTextEditor,
-                        target: this.resizeWidget,
-                        property: "grid-column-end",
-                        value: "span " + columnEnd
-                    });
-            }
-        }
+        const details = typeof this.resizeWidget.editor?.getStart === "function"
+            ? this.resizeWidget.editor : this.resizeWidget.editorDetails;
+        const editorElement = details?.element || details?.editorElement;
+        if (typeof details?.setAttribute !== "function" && !editorElement?.editor?.setAttribute) return;
+
+        const style = this.resizeWidget.ownerDocument.createElement("span").style;
+        style.cssText = this.resizeWidget.getAttribute("style") || "";
+        if (left !== undefined) style.left = left + "px";
+        if (top !== undefined) style.top = top + "px";
+        if (width !== undefined) style.width = width + "px";
+        if (height !== undefined) style.height = height + "px";
+        if (rowEnd !== undefined) style.setProperty("grid-row-end", "span " + rowEnd);
+        if (columnEnd !== undefined) style.setProperty("grid-column-end", "span " + columnEnd);
+
+        const result = typeof details.setAttribute === "function"
+            ? details.setAttribute("style", style.cssText)
+            : editorElement.editor.setAttribute({ target: this.resizeWidget, name: "style", value: style.cssText });
+        result?.catch(error => this.resizeWidget.dispatchEvent(new CustomEvent("editor-error", {
+            bubbles: true,
+            detail: { error }
+        })));
     }
 };
 
@@ -696,3 +704,103 @@ coCreateResize.init({
     dragBottom: "[resize='bottom']"
 });
 export default coCreateResize;
+
+/**
+ * Preserves the element's original class value while resize updates grid sizing.
+ * @name class
+ * @kind member
+ * @attribute
+ * @environment client
+ * @type {string}
+ */
+
+/**
+ * Internal marker applied to this module's injected style element.
+ * @name component
+ * @kind member
+ * @attribute
+ * @environment client
+ * @type {string}
+ * @private
+ */
+
+/**
+ * Enables automatic content-based resizing when set to "auto". This applies to textareas and multiple selects.
+ * @name height
+ * @kind member
+ * @attribute
+ * @environment client
+ * @type {string}
+ * @acceptedValues auto
+ * @example
+ * <textarea height="auto"></textarea>
+ */
+
+/**
+ * Runtime state marker added while a resize gesture is active.
+ * @name resizing
+ * @kind member
+ * @attribute
+ * @environment client
+ * @type {boolean}
+ */
+
+/**
+ * Inline styles updated with the element's resized dimensions and grid span.
+ * @name style
+ * @kind member
+ * @attribute
+ * @environment client
+ * @type {string}
+ */
+
+/**
+ * Enables interactive resizing unless explicitly set to "false".
+ *
+ * @name resizable
+ * @kind member
+ * @attribute
+ * @environment client
+ * @type {boolean}
+ * @acceptedValues false
+ * @example
+ * <div resizable><span resize="right"></span></div>
+ */
+
+/**
+ * Marks a child element as a resize handle and selects its drag direction.
+ *
+ * @name resize
+ * @kind member
+ * @attribute
+ * @environment client
+ * @type {string}
+ * @acceptedValues left, right, top, bottom
+ * @example
+ * <span resize="right"></span>
+ */
+
+/**
+ * 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.
+ *
+ * @module resize
+ * @environment client
+ */
+
+/**
+ * Declarative selectors recognized by this module.
+ *
+ * @name declarative-selectors
+ * @kind member
+ * @selectors
+ * @environment client
+ * @example
+ * ```json
+ * [
+ *   "",
+ *   "[resizable]:not([resizable='false'])",
+ *   "[height='auto']",
+ *   "[height='auto'] option"
+ * ]
+ * ```
+ */