Merge pull request #8 from BOTOOM/develop

Develop

Author: BOTOOM

README.md

@@ -9,8 +9,14 @@ a module that enables resize for image/iframe/video.
 
 ## Demo
 
+### Playground
+
+[rezise module playground](https://botoom.github.io/quill-resize-module/)
+
 ![image](https://raw.githubusercontent.com/BOTOOM/quill-resize-module/master/demo/demo.gif)
 
+
+
 ## Usage
 
 ### Webpack/ES6
@@ -39,9 +45,21 @@ const quill = new Quill(editor, {
 });
 ```
 
+#### Default configuration
+
+```javascript
+const quill = new Quill(editor, {
+  modules: {
+    resize: {
+      locale: {},
+    },
+  },
+});
+```
+
 ### Latest versions of Quill
 
-Recent versions of Quill do not support the use of the style attribute, to fix this, make your configuration similar to the following
+Recent versions of Quill do not support the use of the `style` attribute, so element alignment methods are not allowed, to work around this, make your configuration similar to the following
 
 ```javascript
 import Quill from "quill";
@@ -52,8 +70,9 @@ Quill.register("modules/resize", ResizeModule);
 const quill = new Quill(editor, {
   modules: {
     resize: {
-      hiddenToobar: true,
-      noUseStyle: true,
+      toolbar: {
+        alingTools: false,
+      },
       locale: {
         // ...
       },
@@ -116,3 +135,80 @@ const quill = new Quill(editor, {
   </script>
 </html>
 ```
+
+<table>
+<thead>
+  <tr>
+    <th>Property</th>
+    <th>Description</th>
+    <th>Example</th>
+  </tr>
+</thead>
+<tbody>
+  <tr>
+    <td>locale</td>
+    <td>Change the language of the toolbar buttons. you can change one or more names, if any attribute is not entered the default language (english) will be taken.</td>
+    <td> <pre><code>const quill = new Quill(editor, {
+  modules: {
+    resize: {
+      locale: {
+        altTip: "Hold down the alt key to zoom",
+        floatLeft: "Left",
+        floatRight: "Right",
+        center: "Center",
+        restore: "Restore",
+      },
+    },
+  },
+});</code></pre> </td>
+  </tr>
+  <tr>
+    <td>showToolbar</td>
+    <td>Default is <code>true</code>, changing it to <code>false</code> will hide the toolbar.</td>
+    <td><pre><code>const quill = new Quill(editor, {
+  modules: {
+    resize: {
+      showToolbar: false,
+    },
+  },
+});</code></pre></td>
+  </tr>
+  <tr>
+    <td>showSize</td>
+    <td>Default is <code>false</code>, if changed to <code>true</code> the size of the image or video will be displayed.</td>
+    <td><pre><code>const quill = new Quill(editor, {
+  modules: {
+    resize: {
+      showSize: true,
+    },
+  },
+});</code></pre></td>
+  </tr>
+  <tr>
+    <td>alingTools</td>
+    <td>Default is <code>true</code>, changing it to <code>false</code> will hide the alignment toolbar.</td>
+    <td><pre><code>const quill = new Quill(editor, {
+  modules: {
+    resize: {
+      toolbar: {
+        alingTools: false
+      },
+    },
+  },
+});</code></pre></td>
+  </tr>
+  <tr>
+    <td>sizeTools</td>
+    <td>Default is <code>true</code>, changing it to <code>false</code> will hide the resizing toolbar.</td>
+    <td><pre><code>const quill = new Quill(editor, {
+  modules: {
+    resize: {
+      toolbar: {
+        sizeTools: false
+      },
+    },
+  },
+});</code></pre></td>
+  </tr>
+</tbody>
+</table>

demo/index.html

@@ -40,8 +40,11 @@
       modules: {
         toolbar: toolbarOptions,
         resize: {
-          // hiddenToobar: false,
-          // noUseStyle: true,
+          showSize: true,
+          // showToolbar: false,
+          toolbar: {
+            // alingTools: false
+          },
           locale: {}
         }
       }

dist/quill-resize-module.js

@@ -56,7 +56,7 @@
         return __assign.apply(this, arguments);
     };
 
-    __$styleInject("#editor-resizer {\n  position: absolute;\n  border: 1px dashed #fff;\n  background-color: rgba(0, 0, 0, 0.5);\n}\n#editor-resizer .handler {\n  position: absolute;\n  right: -5px;\n  bottom: -5px;\n  width: 10px;\n  height: 10px;\n  border: 1px solid #333;\n  background-color: rgba(255, 255, 255, 0.8);\n  cursor: nwse-resize;\n  user-select: none;\n}\n#editor-resizer .toolbar {\n  position: absolute;\n  top: -5em;\n  left: 50%;\n  padding: 0.5em;\n  border: 1px solid #fff;\n  border-radius: 3px;\n  background-color: #fff;\n  box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);\n  transform: translateX(-50%);\n}\n#editor-resizer .toolbar .group {\n  display: flex;\n  border: 1px solid #aaa;\n  border-radius: 6px;\n  overflow: hidden;\n  white-space: nowrap;\n  text-align: center;\n}\n#editor-resizer .toolbar .group:not(:first-child) {\n  margin-top: 0.5em;\n}\n#editor-resizer .toolbar .group .btn {\n  flex: 1 0 0;\n  text-align: center;\n  width: 25%;\n  padding: 0 0.5rem;\n  display: inline-block;\n  color: rgba(0, 0, 0, 0.65);\n  vertical-align: top;\n  line-height: 2;\n  user-select: none;\n}\n#editor-resizer .toolbar .group .btn.btn-group {\n  padding: 0;\n  display: inline-flex;\n  line-height: 2em;\n}\n#editor-resizer .toolbar .group .btn.btn-group .inner-btn {\n  flex: 1 0 0;\n  font-size: 2em;\n  width: 50%;\n  cursor: pointer;\n}\n#editor-resizer .toolbar .group .btn.btn-group .inner-btn:first-child {\n  border-right: 1px solid #ddd;\n}\n#editor-resizer .toolbar .group .btn.btn-group .inner-btn:active {\n  transform: scale(0.8);\n}\n#editor-resizer .toolbar .group .btn:not(:last-child) {\n  border-right: 1px solid #bbb;\n}\n#editor-resizer .toolbar .group .btn:not(.btn-group):active {\n  background-color: rgba(0, 0, 0, 0.1);\n}\n");
+    __$styleInject("#editor-resizer {\n  position: absolute;\n  border: 1px dashed #fff;\n  background-color: rgba(0, 0, 0, 0.5);\n}\n#editor-resizer .handler {\n  position: absolute;\n  right: -5px;\n  bottom: -5px;\n  width: 10px;\n  height: 10px;\n  border: 1px solid #333;\n  background-color: rgba(255, 255, 255, 0.8);\n  cursor: nwse-resize;\n  user-select: none;\n}\n#editor-resizer .toolbar {\n  position: absolute;\n  top: -3em;\n  left: 50%;\n  padding: 0.5em;\n  border: 1px solid #fff;\n  border-radius: 3px;\n  background-color: #fff;\n  box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);\n  transform: translateX(-50%);\n}\n#editor-resizer .toolbar .group {\n  display: flex;\n  border: 1px solid #aaa;\n  border-radius: 6px;\n  overflow: hidden;\n  white-space: nowrap;\n  text-align: center;\n}\n#editor-resizer .toolbar .group:not(:first-child) {\n  margin-top: 0.5em;\n}\n#editor-resizer .toolbar .group .btn {\n  flex: 1 0 0;\n  text-align: center;\n  width: 25%;\n  padding: 0 0.5rem;\n  display: inline-block;\n  color: rgba(0, 0, 0, 0.65);\n  vertical-align: top;\n  line-height: 2;\n  user-select: none;\n}\n#editor-resizer .toolbar .group .btn.btn-group {\n  padding: 0;\n  display: inline-flex;\n  line-height: 2em;\n}\n#editor-resizer .toolbar .group .btn.btn-group .inner-btn {\n  flex: 1 0 0;\n  font-size: 2em;\n  width: 50%;\n  cursor: pointer;\n}\n#editor-resizer .toolbar .group .btn.btn-group .inner-btn:first-child {\n  border-right: 1px solid #ddd;\n}\n#editor-resizer .toolbar .group .btn.btn-group .inner-btn:active {\n  transform: scale(0.8);\n}\n#editor-resizer .toolbar .group .btn:not(:last-child) {\n  border-right: 1px solid #bbb;\n}\n#editor-resizer .toolbar .group .btn:not(.btn-group):active {\n  background-color: rgba(0, 0, 0, 0.1);\n}\n#editor-resizer .last-item {\n  margin-right: 5px;\n}\n#editor-resizer .showSize {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  padding: 0.1em;\n  border: 1px solid rgba(255, 255, 255, 0.8);\n  border-radius: 2px;\n  background-color: rgba(255, 255, 255, 0.8);\n  box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);\n  transform: translateX(-50%);\n}\n");
 
     var I18n = /** @class */ (function () {
         function I18n(config) {
@@ -102,25 +102,22 @@
         }
         return ResizeElement;
     }(HTMLElement));
-    var templateWithoutToolbar = "\n<div class=\"handler\" title=\"{0}\"></div>\n";
-    var template = "\n<div class=\"handler\" title=\"{0}\"></div>\n<div class=\"toolbar\">\n  <div class=\"group\">\n    <a class=\"btn\" data-width=\"100%\">100%</a>\n    <a class=\"btn\" data-width=\"50%\">50%</a>\n    <a  class=\"btn btn-group\">\n      <span data-width=\"-5\" class=\"inner-btn\">\uFE63</span>\n      <span data-width=\"5\" class=\"inner-btn\">\uFE62</span>\n    </a>\n    <a data-width=\"auto\" class=\"btn\">{4}</a>\n  </div>\n  <div class=\"group\">\n    <a class=\"btn\" data-float=\"left\">{1}</a>\n    <a class=\"btn\" data-float=\"center\">{2}</a>\n    <a class=\"btn\" data-float=\"right\">{3}</a>\n    <a data-float=\"none\" class=\"btn\">{4}</a>\n  </div>\n</div>\n";
-    var hiddenToobar = false;
-    var noUseStyle = false;
+    var templateUsed;
+    var pluginOptions;
     var ResizePlugin = /** @class */ (function () {
         function ResizePlugin(resizeTarget, container, options) {
             this.resizer = null;
             this.startResizePosition = null;
             this.i18n = new I18n((options === null || options === void 0 ? void 0 : options.locale) || defaultLocale);
-            // options?.toolbar ? showToolbar = true: showToolbar = false
-            hiddenToobar = (options === null || options === void 0 ? void 0 : options.hiddenToobar) || false;
-            noUseStyle = (options === null || options === void 0 ? void 0 : options.noUseStyle) || false;
+            templateUsed = this.createToobar(options);
             this.resizeTarget = resizeTarget;
             if (!resizeTarget.originSize) {
                 resizeTarget.originSize = {
                     width: resizeTarget.clientWidth,
-                    height: resizeTarget.clientHeight
+                    height: resizeTarget.clientHeight,
                 };
             }
+            pluginOptions = options;
             this.container = container;
             this.initResizer();
             this.positionResizerToTarget(resizeTarget);
@@ -135,17 +132,32 @@
             if (!resizer) {
                 resizer = document.createElement("div");
                 resizer.setAttribute("id", "editor-resizer");
-                resizer.innerHTML = format(hiddenToobar ? templateWithoutToolbar : template, this.i18n.findLabel("altTip"), this.i18n.findLabel("floatLeft"), this.i18n.findLabel("center"), this.i18n.findLabel("floatRight"), this.i18n.findLabel("restore"));
+                resizer.innerHTML = format(templateUsed, this.i18n.findLabel("altTip"), this.i18n.findLabel("floatLeft"), this.i18n.findLabel("center"), this.i18n.findLabel("floatRight"), this.i18n.findLabel("restore"));
                 this.container.appendChild(resizer);
             }
             this.resizer = resizer;
         };
+        ResizePlugin.prototype.createToobar = function (options) {
+            var _a, _b;
+            var templateBasicToolbar = "<div class=\"handler\" title=\"{0}\"></div>";
+            var size = "<div class=\"showSize\" name=\"ql-size\" title=\"{0}\">{size}</div>";
+            var sizeTools = "<div class=\"group\">\n      <a class=\"btn\" data-width=\"100%\">100%</a>\n      <a class=\"btn\" data-width=\"50%\">50%</a>\n      <a  class=\"btn btn-group\">\n      <span data-width=\"-5\" class=\"inner-btn\">\uFE63</span>\n      <span data-width=\"5\" class=\"inner-btn\">\uFE62</span>\n      </a>\n      <a data-width=\"auto\" class=\"btn last-item\">{4}</a>\n      </div>";
+            var alingTools = "<div class=\"group\">\n      <a class=\"btn\" data-float=\"left\">{1}</a>\n      <a class=\"btn\" data-float=\"center\">{2}</a>\n      <a class=\"btn\" data-float=\"right\">{3}</a>\n      <a data-float=\"none\" class=\"btn last-item\">{4}</a>\n      </div>";
+            var toolBarTemplate = "<div class=\"toolbar\">\n    " + (((_a = options === null || options === void 0 ? void 0 : options.toolbar) === null || _a === void 0 ? void 0 : _a.sizeTools) !== false ? sizeTools : "") + "\n    " + (((_b = options === null || options === void 0 ? void 0 : options.toolbar) === null || _b === void 0 ? void 0 : _b.alingTools) !== false ? alingTools : "") + "\n  </div>";
+            return "" + templateBasicToolbar + ((options === null || options === void 0 ? void 0 : options.showSize) === true ? size : "") + ((options === null || options === void 0 ? void 0 : options.showToolbar) !== false ? toolBarTemplate : "");
+        };
         ResizePlugin.prototype.positionResizerToTarget = function (el) {
             if (this.resizer !== null) {
                 this.resizer.style.setProperty("left", el.offsetLeft + "px");
                 this.resizer.style.setProperty("top", el.offsetTop + "px");
                 this.resizer.style.setProperty("width", el.clientWidth + "px");
                 this.resizer.style.setProperty("height", el.clientHeight + "px");
+                // this.resizer.getElementsByTagName("ql-size").item(0)?.innerHTML = `450px, 500px`
+                (pluginOptions === null || pluginOptions === void 0 ? void 0 : pluginOptions.showSize) &&
+                    (document.getElementsByName("ql-size").item(0).innerHTML = (el.getAttribute("width") ? el.getAttribute("width") : el.clientWidth) + ", " + (el.getAttribute("height")
+                        ? el.getAttribute("height")
+                        : el.clientHeight));
+                // this.resizer.innerHTML = formatSize (templateUsed, "450px, 500px")
             }
         };
         ResizePlugin.prototype.bindEvents = function () {
@@ -165,16 +177,20 @@
                 var style = this.resizeTarget.style;
                 if (width) {
                     if (this.resizeTarget.tagName.toLowerCase() !== "iframe") {
-                        style.removeProperty("height");
+                        // style.removeProperty("height");
+                        this.resizeTarget.removeAttribute("height");
                     }
                     if (width === "auto") {
-                        style.removeProperty("width");
+                        // style.removeProperty("width");
+                        this.resizeTarget.removeAttribute("width");
                     }
                     else if (width.includes("%")) {
-                        style.setProperty("width", width);
+                        this.resizeTarget.setAttribute("width", width);
+                        // style.setProperty("width", width);
                     }
                     else {
-                        var styleWidth = style.getPropertyValue("width");
+                        var styleWidth = this.resizeTarget.getAttribute("width") || "";
+                        // let styleWidth = style.getPropertyValue("width");
                         width = parseInt(width);
                         if (styleWidth.includes("%")) {
                             styleWidth =
@@ -184,7 +200,8 @@
                             styleWidth =
                                 Math.max(this.resizeTarget.clientWidth + width, 10) + "px";
                         }
-                        style.setProperty("width", styleWidth);
+                        this.resizeTarget.setAttribute("width", styleWidth);
+                        // style.setProperty("width", styleWidth);
                     }
                 }
                 else {
@@ -209,7 +226,7 @@
                     left: e.clientX,
                     top: e.clientY,
                     width: this.resizeTarget.clientWidth,
-                    height: this.resizeTarget.clientHeight
+                    height: this.resizeTarget.clientHeight,
                 };
             }
         };
@@ -230,14 +247,8 @@
                 var rate = originSize.height / originSize.width;
                 height = rate * width;
             }
-            if (noUseStyle) {
-                this.resizeTarget.setAttribute("width", Math.max(width, 30) + "");
-                this.resizeTarget.setAttribute("height", Math.max(height, 30) + "");
-            }
-            else {
-                this.resizeTarget.style.setProperty("width", Math.max(width, 30) + "px");
-                this.resizeTarget.style.setProperty("height", Math.max(height, 30) + "px");
-            }
+            this.resizeTarget.setAttribute("width", Math.max(width, 30) + "");
+            this.resizeTarget.setAttribute("height", Math.max(height, 30) + "");
             this.positionResizerToTarget(this.resizeTarget);
         };
         ResizePlugin.prototype.destory = function () {