awo-hamburg-intranet/module/shared_components/quill/quill_resize.js

(function () {
    'use strict';

    if (typeof Quill === 'undefined') return;

    function ImageResizeModule(quill, options) {
        this.quill = quill;
        this.overlay = null;
        this.activeImg = null;
        this._startX = 0;
        this._startW = 0;

        this._onImgClick = this._onImgClick.bind(this);
        this._onDocClick = this._onDocClick.bind(this);
        this._onMouseMove = this._onMouseMove.bind(this);
        this._onMouseUp = this._onMouseUp.bind(this);

        quill.root.addEventListener('click', this._onImgClick);
        document.addEventListener('click', this._onDocClick);
    }

    ImageResizeModule.prototype._onImgClick = function (e) {
        if (e.target && e.target.tagName === 'IMG') {
            e.stopPropagation();
            this._select(e.target);
        }
    };

    ImageResizeModule.prototype._onDocClick = function (e) {
        if (this.overlay && e.target !== this.activeImg && !this.overlay.contains(e.target)) {
            this._deselect();
        }
    };

    ImageResizeModule.prototype._select = function (img) {
        this._deselect();
        this.activeImg = img;

        var overlay = document.createElement('div');
        overlay.className = 'ql-img-resize-overlay';

        var handle = document.createElement('div');
        handle.className = 'ql-img-resize-handle';
        overlay.appendChild(handle);

        this.quill.root.style.position = 'relative';
        this.quill.root.appendChild(overlay);
        this.overlay = overlay;

        this._reposition();

        var self = this;
        handle.addEventListener('mousedown', function (e) {
            e.preventDefault();
            self._startX = e.clientX;
            self._startW = self.activeImg.offsetWidth || self.activeImg.getBoundingClientRect().width;
            document.addEventListener('mousemove', self._onMouseMove);
            document.addEventListener('mouseup', self._onMouseUp);
        });
    };

    ImageResizeModule.prototype._reposition = function () {
        if (!this.overlay || !this.activeImg) return;
        var r = this.activeImg.getBoundingClientRect();
        var er = this.quill.root.getBoundingClientRect();
        this.overlay.style.left   = (r.left - er.left + this.quill.root.scrollLeft) + 'px';
        this.overlay.style.top    = (r.top  - er.top  + this.quill.root.scrollTop)  + 'px';
        this.overlay.style.width  = r.width  + 'px';
        this.overlay.style.height = r.height + 'px';
    };

    ImageResizeModule.prototype._onMouseMove = function (e) {
        if (!this.activeImg) return;
        var dx = e.clientX - this._startX;
        var newW = Math.max(40, this._startW + dx);
        this.activeImg.style.width = newW + 'px';
        this.activeImg.setAttribute('width', newW);
        this._reposition();
    };

    ImageResizeModule.prototype._onMouseUp = function () {
        document.removeEventListener('mousemove', this._onMouseMove);
        document.removeEventListener('mouseup', this._onMouseUp);
        if (this.quill) this.quill.update();
    };

    ImageResizeModule.prototype._deselect = function () {
        if (this.overlay && this.overlay.parentNode) {
            this.overlay.parentNode.removeChild(this.overlay);
        }
        this.overlay = null;
        this.activeImg = null;
    };

    Quill.register('modules/imageResize', ImageResizeModule);
})();