Add size info while resizing

mailmojo · Apr 11, 2018 · f594281 · f594281
1 parent 6a6bc79
commit f594281
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 1 deletion.
diff --git a/croppie.css b/croppie.css
@@ -41,6 +41,17 @@
   pointer-events: none;
 }
 
+.croppie-container .cr-resizer-info {
+    position: absolute;
+    bottom: 5px;
+    right: 5px;
+    padding: 2px;
+    background: #fff;
+    color: #000;
+    font-size: 12px;
+    font-family: Helvetica, sans-serif;
+}
+
 .croppie-container .cr-resizer-vertical,
 .croppie-container .cr-resizer-horisontal {
   position: absolute;

diff --git a/croppie.js b/croppie.js
@@ -462,6 +462,7 @@
         var minSize = 50;
         var maxWidth;
         var maxHeight;
+        var sizeInfo;
         var vr;
         var hr;
 
@@ -471,6 +472,15 @@
             height: this.options.viewport.height + 'px'
         });
 
+        if (this.options.resizeControls.sizeInfo) {
+            sizeInfo = document.createElement('span');
+            addClass(sizeInfo, 'cr-resizer-info');
+            css(sizeInfo, {
+                display: 'none',
+            });
+            wrap.appendChild(sizeInfo);
+        }
+
         if (this.options.resizeControls.height) {
             vr = document.createElement('div');
             addClass(vr, 'cr-resizer-vertical');
@@ -506,6 +516,17 @@
                 originalY = touches.pageY;
             }
 
+            if (sizeInfo) {
+                sizeInfo.innerHTML = (
+                    fix(self.options.viewport.width) +
+                    '&times;' +
+                    fix(self.options.viewport.height)
+                );
+                css(sizeInfo, {
+                    display: 'block',
+                });
+            }
+
             window.addEventListener('mousemove', mouseMove);
             window.addEventListener('touchmove', mouseMove);
             window.addEventListener('mouseup', mouseUp);
@@ -561,6 +582,14 @@
                 });
             }
 
+            if (sizeInfo) {
+                sizeInfo.innerHTML = (
+                    fix(self.options.viewport.width) +
+                    '&times;' +
+                    fix(self.options.viewport.height)
+                );
+            }
+
             _updateOverlay.call(self);
             _updateZoomLimits.call(self);
             _updateCenterPoint.call(self);
@@ -571,6 +600,13 @@
 
         function mouseUp() {
             isDragging = false;
+
+            if (sizeInfo) {
+                css(sizeInfo, {
+                    display: 'none',
+                });
+            }
+
             window.removeEventListener('mousemove', mouseMove);
             window.removeEventListener('touchmove', mouseMove);
             window.removeEventListener('mouseup', mouseUp);
@@ -1520,7 +1556,8 @@
         },
         resizeControls: {
             width: true,
-            height: true
+            height: true,
+            sizeInfo: false,
         },
         customClass: '',
         showZoomer: true,