editorjs-image 1.0.3 → 1.0.5

package/src/image-tool-tune.js

@@ -1,896 +0,0 @@
-// Class for Editor.js
-// Adds Block Tunes for Image Tool (ImageTool)
-// Supports : Image Float Left, Image float right
-
-import './image-tool-tune.css';
-
-import Cropper from './cropper.js';
-import './cropper.css';
-
-export default class {
-
-
-    constructor( { api, data, config, block } ) {
-
-        this.settings = [
-            {
-                name: 'floatLeft',
-                icon: '<svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 1024 1024" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M952 792H72c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h880c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0-632H72c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h880c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM608 660c8.8 0 16-7.2 16-16V380c0-8.8-7.2-16-16-16H96c-8.8 0-16 7.2-16 16v264c0 8.8 7.2 16 16 16h512zM152 436h400v152H152V436zm552 210c0 4.4 3.6 8 8 8h224c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H712c-4.4 0-8 3.6-8 8v56zm8-204h224c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H712c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8z"></path></svg>',
-                label: '',
-                group: 'align',
-            }, {
-                name: 'center',
-                icon: '<svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 1024 1024" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M952 792H72c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h880c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0-632H72c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h880c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM848 660c8.8 0 16-7.2 16-16V380c0-8.8-7.2-16-16-16H176c-8.8 0-16 7.2-16 16v264c0 8.8 7.2 16 16 16h672zM232 436h560v152H232V436z"></path></svg>',
-                label: '',
-                group: 'align',
-            }, {
-                name: 'floatRight',
-                icon: '<svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 1024 1024" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M952 792H72c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h880c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0-632H72c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h880c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm-24 500c8.8 0 16-7.2 16-16V380c0-8.8-7.2-16-16-16H416c-8.8 0-16 7.2-16 16v264c0 8.8 7.2 16 16 16h512zM472 436h400v152H472V436zM80 646c0 4.4 3.6 8 8 8h224c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H88c-4.4 0-8 3.6-8 8v56zm8-204h224c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H88c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8z"></path></svg>',
-                label: '',
-                group: 'align',
-            },
-            {
-                name: 'sizeSmall',
-                icon: '<svg stroke="currentColor" fill="none" stroke-width="0" viewBox="0 0 24 24" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 6V4H20V20H12V18H8V16H4V8H8V6H12ZM14 6H18V18H14V6ZM12 8H10V16H12V8ZM8 10V14H6V10H8Z" fill="currentColor"></path></svg>',
-                label: '50%',
-                group: 'size',
-            }, {
-                name: 'sizeMiddle',
-                icon: '<svg stroke="currentColor" fill="none" stroke-width="0" viewBox="0 0 24 24" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 6V4H20V20H12V18H8V16H4V8H8V6H12ZM14 6H18V18H14V6ZM12 8H10V16H12V8ZM8 10V14H6V10H8Z" fill="currentColor"></path></svg>',
-                label: '70%',
-                group: 'size',
-            }, {
-                name: 'sizeLarge',
-                icon: '<svg stroke="currentColor" fill="none" stroke-width="0" viewBox="0 0 24 24" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 6V4H20V20H12V18H8V16H4V8H8V6H12ZM14 6H18V18H14V6ZM12 8H10V16H12V8ZM8 10V14H6V10H8Z" fill="currentColor"></path></svg>',
-                label: '100%',
-                group: 'size',
-            }, {
-                name: 'resize',
-                icon: '<svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M29 30l1 90h36V66h26V30H29zm99 0v36h72V30h-72zm108 0v36h72V30h-72zm108 0v36h72V30h-72zm102 0v78h36V30h-36zm-206 80v36h100.543l-118 118H30v218h218V289.457l118-118V272h36V110H240zm206 34v72h36v-72h-36zM30 156v72h36v-72H30zm416 96v72h36v-72h-36zm0 108v72h36v-72h-36zm-166 86v36h72v-36h-72zm108 0v36h72v-36h-72z"></path></svg>',
-                label: '',
-                group: 'size',
-            }, {
-                name: 'crop',
-                icon: '<svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M21 15h2v2h-2v-2zm0-4h2v2h-2v-2zm2 8h-2v2c1 0 2-1 2-2zM13 3h2v2h-2V3zm8 4h2v2h-2V7zm0-4v2h2c0-1-1-2-2-2zM1 7h2v2H1V7zm16-4h2v2h-2V3zm0 16h2v2h-2v-2zM3 3C2 3 1 4 1 5h2V3zm6 0h2v2H9V3zM5 3h2v2H5V3zm-4 8v8c0 1.1.9 2 2 2h12V11H1zm2 8l2.5-3.21 1.79 2.15 2.5-3.22L13 19H3z"></path></svg>',
-                label: '',
-                group: 'size',
-            }
-        ];
-
-        this.api = api;
-        this.block = block;
-        this.config = config;
-        this.data = {
-            floatLeft: data !== undefined && data.floatLeft !== undefined ? data.floatLeft : false,
-            floatRight: data !== undefined && data.floatRight !== undefined ? data.floatRight : false,
-            center: data !== undefined && data.center !== undefined ? data.center : false,
-            sizeSmall: data !== undefined && data.sizeSmall !== undefined ? data.sizeSmall : false,
-            sizeMiddle: data !== undefined && data.sizeMiddle !== undefined ? data.sizeMiddle : false,
-            sizeLarge: data !== undefined && data.sizeLarge !== undefined ? data.sizeLarge : false,
-            resize: data !== undefined && data.resize !== undefined ? data.resize : false,
-            resizeSize: data !== undefined && data.resizeSize !== undefined ? data.resizeSize : 0,
-            crop: data !== undefined && data.crop !== undefined ? data.crop : false,
-            cropperFrameHeight: data !== undefined && data.cropperFrameHeight !== undefined ? data.cropperFrameHeight : 0,
-            cropperFrameWidth: data !== undefined && data.cropperFrameWidth !== undefined ? data.cropperFrameWidth : 0,
-            cropperFrameLeft: data !== undefined && data.cropperFrameLeft !== undefined ? data.cropperFrameLeft : 0,
-            cropperFrameTop: data !== undefined && data.cropperFrameTop !== undefined ? data.cropperFrameTop : 0,
-            cropperImageHeight: data !== undefined && data.cropperImageHeight !== undefined ? data.cropperImageHeight : 0,
-            cropperImageWidth: data !== undefined && data.cropperImageWidth !== undefined ? data.cropperImageWidth : 0,
-            cropperInterface: undefined,
-        };
-        this.wrapper = undefined;
-
-        this.buttons = [];
-
-    }
-
-    static get isTune() {
-        return true;
-    }
-
-    static get sanitize() {
-        return {
-            floatLeft: {},
-            floatRight: {},
-            center: {},
-            sizeSmall: {},
-            sizeMiddle: {},
-            sizeLarge: {},
-            resize: {},
-            resizeSize: {},
-            crop: {},
-            cropperFrameHeight: {},
-            cropperFrameWidth: {},
-            cropperFrameLeft: {},
-            cropperFrameTop: {},
-            cropperImageHeight: {},
-            cropperImageWidth: {},
-            cropperInterface: {},
-        };
-    }
-
-    /**
-     * CSS classes
-     *  @return {object}
-     * @constructor
-     * @property {string} CSS.wrapper - wrapper for buttons
-     * @property {string} CSS.button - button
-     * @property {string} CSS.buttonActive - active button
-     * @property {string} CSS.buttonModifier - button with modifier
-     * @property {string} CSS.buttonModifierActive - active button with modifier
-     */
-    get CSS() {
-        return {
-            wrapper: 'cdx-image-tool-tune',
-            button: this.api.styles.settingsButton,
-            buttonActive: this.api.styles.settingsButtonActive,
-            buttonModifier: this.api.styles.settingsButtonModifier,
-            buttonModifierActive: this.api.styles.settingsButtonModifierActive,
-            isFloatLeft: 'cdx-image-tool-tune--floatLeft',
-            isFloatRight: 'cdx-image-tool-tune--floatRight',
-            isCenter: 'cdx-image-tool-tune--center',
-            isSizeSmall: 'cdx-image-tool-tune--sizeSmall',
-            isSizeMiddle: 'cdx-image-tool-tune--sizeMiddle',
-            isSizeLarge: 'cdx-image-tool-tune--sizeLarge',
-            isResize: 'cdx-image-tool-tune--resize',
-            isCrop: 'cdx-image-tool-tune--crop',
-        };
-    }
-
-    /**
-     *  
-     * @return {HTMLElement}
-     * @public
-     * @readonly
-     * @property {HTMLElement} wrapper - tune buttons wrapper
-        */
-    get view() {
-        if ( !this.wrapper ) {
-            this.wrapper = this.createView();
-        }
-
-        return this.wrapper;
-    }
-
-    /**
-     * Clicks to one of the tunes
-     * @param {MouseEvent} e - click
-     * @param {HTMLElement} tune - clicked tune button
-     * @private
-     * @return {void}
-     * */
-    tuneClicked( e, tune ) {
-        e.preventDefault();
-        e.stopPropagation();
-
-
-        let tuneName = tune.dataset.tune;
-
-        let tuneGroup = this.settings.find( tune => tune.name === tuneName ).group;
-
-
-        this.buttons.forEach( button => {
-
-            //if is the same group
-            if ( this.settings.find( tune => tune.name === button.dataset.tune ).group === tuneGroup ) {
-                if ( button !== tune ) {
-                    button.classList.remove( this.CSS.buttonActive );
-                }
-            }
-        } );
-
-        tune.classList.toggle( this.CSS.buttonActive );
-
-
-        this.setTune( tune.dataset.tune );
-    }
-
-    /**
-     * Styles the image with a tune
-     * @param {string} tune - tune name
-     * @private
-     * @return {void}
-     * */
-    setTune( tune ) {
-        switch ( tune ) {
-            case 'floatLeft':
-                this.data.floatLeft = !this.data.floatLeft;
-                this.data.floatRight = false;
-                this.data.center = false;
-                break;
-            case 'floatRight':
-                this.data.floatLeft = false;
-                this.data.floatRight = !this.data.floatRight;
-                this.data.center = false;
-                break;
-            case 'center':
-                this.data.center = !this.data.center;
-                this.data.floatLeft = false;
-                this.data.floatRight = false;
-                break;
-            case 'sizeSmall':
-                this.data.sizeSmall = !this.data.sizeSmall;
-                this.data.sizeMiddle = false;
-                this.data.sizeLarge = false;
-                this.data.resize = false;
-                this.data.crop = false;
-                break;
-            case 'sizeMiddle':
-                this.data.sizeSmall = false;
-                this.data.sizeMiddle = !this.data.sizeMiddle;
-                this.data.sizeLarge = false;
-                this.data.resize = false;
-                this.data.crop = false;
-                break;
-            case 'sizeLarge':
-                this.data.sizeSmall = false;
-                this.data.sizeMiddle = false;
-                this.data.sizeLarge = !this.data.sizeLarge;
-                this.data.resize = false;
-                this.data.crop = false;
-                break;
-            case 'resize':
-                this.data.sizeSmall = false;
-                this.data.sizeMiddle = false;
-                this.data.sizeLarge = false;
-                this.data.resize = !this.data.resize;
-                this.data.crop = false;
-                break;
-            case 'crop':
-                this.data.crop = !this.data.crop;
-                this.data.sizeSmall = false;
-                this.data.sizeMiddle = false;
-                this.data.sizeLarge = false;
-                this.data.resize = false;
-                this.data.resizeSize = 0;
-                break;
-            default:
-                this.data.floatLeft = false;
-                this.data.floatRight = false;
-                this.data.sizeSmall = false;
-                this.data.sizeMiddle = false;
-                this.data.sizeLarge = false;
-                this.data.resize = false;
-                this.data.crop = false;
-                break;
-        }
-
-        if ( !this.data.resize ) {
-            this.data.resizeSize = 0;
-        }
-
-        if ( !this.data.crop ) {
-            this.data.cropperFrameHeight = 0;
-            this.data.cropperFrameWidth = 0;
-            this.data.cropperFrameLeft = 0;
-            this.data.cropperFrameTop = 0;
-            this.data.cropperImageHeight = 0;
-            this.data.cropperImageWidth = 0;
-        }
-
-        const blockContent = this.block.holder.querySelector( '.ce-block__content' );
-
-        this.apply( blockContent );
-
-        this.block.dispatchChange();
-
-
-
-    }
-
-
-    /**
-     * Append class to block by tune data
-     * @param {HTMLElement} blockContent - wrapper for block content
-     * @public
-     * @return {void}
-     *  */
-    apply( blockContent ) {
-
-
-        if ( this.data.floatLeft ) {
-            blockContent.classList.add( this.CSS.isFloatLeft );
-        } else {
-            blockContent.classList.remove( this.CSS.isFloatLeft );
-        }
-
-        if ( this.data.floatRight ) {
-            blockContent.classList.add( this.CSS.isFloatRight );
-        } else {
-            blockContent.classList.remove( this.CSS.isFloatRight );
-        }
-
-        if ( this.data.center ) {
-            blockContent.classList.add( this.CSS.isCenter );
-        } else {
-            blockContent.classList.remove( this.CSS.isCenter );
-        }
-
-        if ( this.data.sizeSmall ) {
-            blockContent.classList.add( this.CSS.isSizeSmall );
-        } else {
-            blockContent.classList.remove( this.CSS.isSizeSmall );
-        }
-
-        if ( this.data.sizeMiddle ) {
-            blockContent.classList.add( this.CSS.isSizeMiddle );
-        } else {
-            blockContent.classList.remove( this.CSS.isSizeMiddle );
-        }
-
-        if ( this.data.sizeLarge ) {
-            blockContent.classList.add( this.CSS.isSizeLarge );
-        } else {
-            blockContent.classList.remove( this.CSS.isSizeLarge );
-        }
-
-        if ( this.data.resize ) {
-            blockContent.classList.add( this.CSS.isResize );
-
-            if ( this.data.resizeSize > 0 ) {
-                blockContent.getElementsByClassName( 'cdx-block' )[ 0 ].style.width = this.data.resizeSize + 'px';
-            }
-
-            this.resize( blockContent );
-        } else {
-            blockContent.classList.remove( this.CSS.isResize );
-            this.unresize( blockContent );
-        }
-
-        if ( this.data.crop ) {
-            blockContent.classList.add( this.CSS.isCrop );
-
-            this.crop( blockContent );
-            if ( this.data.cropperFrameHeight > 0 && this.data.cropperFrameWidth > 0 ) {
-                this.applyCrop( blockContent );
-            }
-
-
-        } else {
-            blockContent.classList.remove( this.CSS.isCrop );
-            this.uncrop( blockContent );
-        }
-
-
-
-
-    }
-
-
-
-
-    /**
-     * Add crop handles to image
-     * @param {HTMLCollection} images - images in block
-     * @public
-     * @return {void}
-     */
-    crop( blockContent ) {
-
-        //this.appendCrop( blockContent );
-
-
-
-        //add append crop button to image-tool__image
-        const image = blockContent.getElementsByClassName( 'image-tool__image' )[ 0 ];
-        const cropBtn = document.createElement( 'div' );
-        cropBtn.classList.add( 'crop-btn', 'btn-crop-action' );
-        cropBtn.innerHTML = 'Crop';
-
-        cropBtn.addEventListener( 'click', e => {
-            //remove crop button
-            image.removeChild( cropBtn );
-            this.appendCrop( blockContent );
-        }
-        );
-
-        image.appendChild( cropBtn );
-
-    }
-
-
-    appendCrop( blockContent ) {
-        this.uncrop( blockContent );
-        const image = blockContent.getElementsByClassName( 'cdx-block' )[ 0 ].getElementsByTagName( 'img' )[ 0 ];
-        blockContent.getElementsByClassName( 'cdx-block' )[ 0 ].classList.add( 'isCropping' );
-        this.cropperInterface = new Cropper( image, {
-            crop( event ) {
-                console.log( event.detail.x );
-                console.log( event.detail.y );
-                console.log( event.detail.width );
-                console.log( event.detail.height );
-                console.log( event.detail.scaleX );
-                console.log( event.detail.scaleY );
-
-
-            },
-        } );
-
-
-        //append save crop button
-        const cropSaveBtn = document.createElement( 'div' );
-        cropSaveBtn.classList.add( 'crop-save', 'btn-crop-action' );
-
-        cropSaveBtn.innerHTML = 'Apply';
-
-        cropSaveBtn.addEventListener( 'click', e => {
-
-            console.log( this.cropperInterface.getCropBoxData() );
-            console.log( this.cropperInterface.getImageData() );
-            console.log( this.cropperInterface.getCanvasData() );
-
-
-            this.data.cropperFrameHeight = this.cropperInterface.getCropBoxData().height;
-            this.data.cropperFrameWidth = this.cropperInterface.getCropBoxData().width;
-            this.data.cropperFrameLeft = this.cropperInterface.getCanvasData().left - this.cropperInterface.getCropBoxData().left;
-            this.data.cropperFrameTop = this.cropperInterface.getCanvasData().top - this.cropperInterface.getCropBoxData().top;
-            this.data.cropperImageHeight = this.cropperInterface.getImageData().height;
-            this.data.cropperImageWidth = this.cropperInterface.getImageData().width;
-
-            this.applyCrop( blockContent );
-
-        }
-        );
-
-        blockContent.getElementsByClassName( 'image-tool__image' )[ 0 ].appendChild( cropSaveBtn );
-
-        //add temporary style to block content so that it comes in front of every other block
-        blockContent.classList.add( 'isCropping' );
-
-    }
-
-
-    applyCrop( blockContent ) {
-
-        //apply data to image and remove cropper interface and save button, add crop button
-
-        const image = blockContent.getElementsByClassName( 'cdx-block' )[ 0 ].getElementsByTagName( 'img' )[ 0 ];
-
-
-
-
-        blockContent.getElementsByClassName( 'cdx-block' )[ 0 ].style.minWidth = this.data.cropperFrameWidth + 'px';
-        blockContent.getElementsByClassName( 'cdx-block' )[ 0 ].style.maxWidth = this.data.cropperFrameWidth + 'px';
-
-        blockContent.getElementsByClassName( 'image-tool__image' )[ 0 ].style.width = this.data.cropperFrameWidth + 'px';
-        blockContent.getElementsByClassName( 'image-tool__image' )[ 0 ].style.height = this.data.cropperFrameHeight + 'px';
-        blockContent.getElementsByClassName( 'image-tool__image' )[ 0 ].getElementsByTagName( 'img' )[ 0 ].style.left = this.data.cropperFrameLeft + 'px';
-        blockContent.getElementsByClassName( 'image-tool__image' )[ 0 ].getElementsByTagName( 'img' )[ 0 ].style.top = this.data.cropperFrameTop + 'px';
-
-        image.style.width = this.data.cropperImageWidth + 'px';
-        image.style.height = this.data.cropperImageHeight + 'px';
-
-
-        blockContent.getElementsByClassName( 'image-tool__image' )[ 0 ].getElementsByTagName( 'img' )[ 0 ].classList.add( 'isCropped' );
-        blockContent.getElementsByClassName( 'cdx-block' )[ 0 ].classList.remove( 'isCropping' );
-
-
-        const cropSaveBtn = blockContent.getElementsByClassName( 'btn-crop-action' )[ 0 ];
-        if ( cropSaveBtn ) {
-            blockContent.getElementsByClassName( 'image-tool__image' )[ 0 ].removeChild( cropSaveBtn );
-        }
-
-
-
-        //remove cropper interface
-        if ( this.cropperInterface ) {
-            this.cropperInterface.destroy();
-        }
-
-
-
-
-        //add crop button
-
-        const cropBtn = document.createElement( 'div' );
-        cropBtn.classList.add( 'crop-btn', 'btn-crop-action' );
-        cropBtn.innerHTML = 'Crop';
-
-        cropBtn.addEventListener( 'click', e => {
-            //remove crop button
-            blockContent.getElementsByClassName( 'image-tool__image' )[ 0 ].removeChild( cropBtn );
-            this.appendCrop( blockContent );
-        }
-        );
-
-        blockContent.getElementsByClassName( 'image-tool__image' )[ 0 ].appendChild( cropBtn );
-
-        blockContent.classList.remove( 'isCropping' );
-
-        this.block.dispatchChange();
-
-    }
-
-
-    uncrop( blockContent ) {
-
-        //remove crop and save button
-        const cropSaveBtn = blockContent.getElementsByClassName( 'btn-crop-action' )[ 0 ];
-        if ( cropSaveBtn ) {
-            blockContent.getElementsByClassName( 'image-tool__image' )[ 0 ].removeChild( cropSaveBtn );
-        }
-
-
-        //remove crop button
-        const cropBtn = blockContent.getElementsByClassName( 'btn-crop-action' )[ 0 ];
-        if ( cropBtn ) {
-            blockContent.getElementsByClassName( 'image-tool__image' )[ 0 ].removeChild( cropBtn );
-        }
-
-        //remove isCropped class
-
-        blockContent.getElementsByClassName( 'cdx-block' )[ 0 ].getElementsByTagName( 'img' )[ 0 ].classList.remove( 'isCropped' );
-
-        //remove isCropping class
-        blockContent.getElementsByClassName( 'cdx-block' )[ 0 ].classList.remove( 'isCropping' );
-
-        //remove min and max width
-        blockContent.getElementsByClassName( 'cdx-block' )[ 0 ].style.minWidth = '';
-        blockContent.getElementsByClassName( 'cdx-block' )[ 0 ].style.maxWidth = '';
-
-        //remove image width and height
-        blockContent.getElementsByClassName( 'image-tool__image' )[ 0 ].style.width = '';
-        blockContent.getElementsByClassName( 'image-tool__image' )[ 0 ].style.height = '';
-
-        //remove image left and top
-        blockContent.getElementsByClassName( 'image-tool__image' )[ 0 ].getElementsByTagName( 'img' )[ 0 ].style.left = '';
-        blockContent.getElementsByClassName( 'image-tool__image' )[ 0 ].getElementsByTagName( 'img' )[ 0 ].style.top = '';
-
-        //remove image width and height
-        blockContent.getElementsByClassName( 'image-tool__image' )[ 0 ].getElementsByTagName( 'img' )[ 0 ].style.width = '';
-        blockContent.getElementsByClassName( 'image-tool__image' )[ 0 ].getElementsByTagName( 'img' )[ 0 ].style.height = '';
-
-
-
-        blockContent.classList.remove( 'isCropping' );
-
-
-
-        //remove cropper interface
-        if ( this.cropperInterface ) {
-            this.cropperInterface.destroy();
-        }
-
-        //remove crop data
-        this.data.cropperFrameHeight = 0;
-        this.data.cropperFrameWidth = 0;
-        this.data.cropperFrameLeft = 0;
-        this.data.cropperFrameTop = 0;
-        this.data.cropperImageHeight = 0;
-        this.data.cropperImageWidth = 0;
-
-        this.block.dispatchChange();
-
-    }
-
-
-
-
-
-    /**
-     * Add resize handles to block
-     * @param {HTMLElement} blockContent - wrapper for block content
-     * @public
-     * @return {void}
-     * */
-    resize( blockContent ) {
-
-
-        const resizable = document.createElement( 'div' );
-        resizable.classList.add( 'resizable' );
-
-        console.log( resizable );
-
-
-        const resizers = document.createElement( 'div' );
-        resizers.classList.add( 'resizers' );
-
-        const resizerTopLeft = document.createElement( 'div' );
-        resizerTopLeft.classList.add( 'resizer', 'top-left' );
-        resizerTopLeft.addEventListener( 'mousedown', e => {
-            this.resizeClick( blockContent.getElementsByClassName( 'cdx-block' )[ 0 ], resizerTopLeft, e );
-        } );
-
-
-        const resizerTopRight = document.createElement( 'div' );
-        resizerTopRight.classList.add( 'resizer', 'top-right' );
-        resizerTopRight.addEventListener( 'mousedown', e => {
-            this.resizeClick( blockContent.getElementsByClassName( 'cdx-block' )[ 0 ], resizerTopRight, e );
-        } );
-
-
-        const resizerBottomLeft = document.createElement( 'div' );
-        resizerBottomLeft.classList.add( 'resizer', 'bottom-left' );
-        resizerBottomLeft.addEventListener( 'mousedown', e => {
-            this.resizeClick( blockContent.getElementsByClassName( 'cdx-block' )[ 0 ], resizerBottomLeft, e );
-        } );
-
-        const resizerBottomRight = document.createElement( 'div' );
-        resizerBottomRight.classList.add( 'resizer', 'bottom-right' );
-        resizerBottomRight.addEventListener( 'mousedown', e => {
-            this.resizeClick( blockContent.getElementsByClassName( 'cdx-block' )[ 0 ], resizerBottomRight, e );
-        } );
-
-        resizers.appendChild( resizerTopLeft );
-        resizers.appendChild( resizerTopRight );
-        resizers.appendChild( resizerBottomLeft );
-        resizers.appendChild( resizerBottomRight );
-        resizable.appendChild( resizers );
-        blockContent.getElementsByClassName( 'cdx-block' )[ 0 ].appendChild( resizable );
-    }
-
-
-
-    /**
-          * click event to resize handles
-     * preserve aspect ratio
-     * prevent block from moving when dragging resize handles
-     * max size = 100%
-     * min size = 50px
-     * @param {HTMLElement} blockContent - wrapper for block content
-     * @public
-     * @return {void}
-     * */
-    resizeClick( blockContent, handle, e ) {
-
-        let startX = 0;
-        let startY = 0;
-        let startWidth = 0;
-        let startHeight = 0;
-
-        const mouseMoveHandler = e => {
-
-            const dx = e.clientX - startX;
-            const dy = e.clientY - startY;
-
-            const newWidth = ( startWidth + dx );
-
-            if ( newWidth > 50 ) {
-                blockContent.style.width = newWidth + 'px';
-            }
-
-
-
-
-
-        };
-
-        const mouseUpHandler = () => {
-
-            let blockWidth = parseInt( document.defaultView.getComputedStyle( blockContent ).width, 10 );
-
-            if ( blockWidth > 0 ) {
-                this.data.resizeSize = blockWidth;
-            }
-
-            document.removeEventListener( 'mousemove', mouseMoveHandler );
-            document.removeEventListener( 'mouseup', mouseUpHandler );
-
-            this.block.dispatchChange();
-
-        };
-
-        document.addEventListener( 'mousemove', mouseMoveHandler );
-        document.addEventListener( 'mouseup', mouseUpHandler );
-
-        startX = e.clientX;
-        startY = e.clientY;
-
-        startWidth = parseInt( document.defaultView.getComputedStyle( blockContent ).width, 10 );
-
-        startHeight = parseInt( document.defaultView.getComputedStyle( blockContent ).height, 10 );
-
-
-    }
-
-
-    /**
-     * Remove resize handles from block
-     * @param {HTMLElement} blockContent - wrapper for block content
-     * @public
-     * @return {void}
-     */
-    unresize( blockContent ) {
-        const unresizable = blockContent.getElementsByClassName( 'resizable' )[ 0 ];
-        if ( unresizable ) {
-            blockContent.getElementsByClassName( 'cdx-block' )[ 0 ].removeChild( unresizable );
-        }
-
-        blockContent.getElementsByClassName( 'cdx-block' )[ 0 ].style.width = 'auto';
-
-
-    }
-
-
-
-
-    /**
-     * Remove tunes from block wrapper
-     * @param {HTMLElement} blockContent - wrapper for block content
-     * @public
-     * @return {HTMLElement}
-     */
-    unwrap( blockContent ) {
-        console.log( 'unwrap' );
-        //remove tunes from block
-        this.buttons.forEach( button => {
-            button.classList.remove( this.CSS.buttonActive );
-        } );
-
-        //remove isFloatLeft class
-        blockContent.classList.remove( this.CSS.isFloatLeft );
-
-        //remove isFloatRight class
-        blockContent.classList.remove( this.CSS.isFloatRight );
-
-        //remove isCenter class
-        blockContent.classList.remove( this.CSS.isCenter );
-
-        //remove isSizeSmall class
-        blockContent.classList.remove( this.CSS.isSizeSmall );
-
-        //remove isSizeMiddle class
-        blockContent.classList.remove( this.CSS.isSizeMiddle );
-
-        //remove isSizeLarge class
-        blockContent.classList.remove( this.CSS.isSizeLarge );
-
-        //remove isResize class
-        blockContent.classList.remove( this.CSS.isResize );
-
-        //remove isCrop class
-        blockContent.classList.remove( this.CSS.isCrop );
-
-        //remove isCropped class
-        blockContent.getElementsByClassName( 'cdx-block' )[ 0 ].getElementsByTagName( 'img' )[ 0 ].classList.remove( 'isCropped' );
-
-        //remove isCropping class
-        blockContent.getElementsByClassName( 'cdx-block' )[ 0 ].classList.remove( 'isCropping' );
-
-        //remove min and max width
-        blockContent.getElementsByClassName( 'cdx-block' )[ 0 ].style.minWidth = '';
-        blockContent.getElementsByClassName( 'cdx-block' )[ 0 ].style.maxWidth = '';
-
-        //remove image width and height
-        blockContent.getElementsByClassName( 'image-tool__image' )[ 0 ].style.width = '';
-        blockContent.getElementsByClassName( 'image-tool__image' )[ 0 ].style.height = '';
-
-        //remove image left and top
-        blockContent.getElementsByClassName( 'image-tool__image' )[ 0 ].getElementsByTagName( 'img' )[ 0 ].style.left = '';
-
-        blockContent.getElementsByClassName( 'image-tool__image' )[ 0 ].getElementsByTagName( 'img' )[ 0 ].style.top = '';
-
-        //remove image width and height
-        blockContent.getElementsByClassName( 'image-tool__image' )[ 0 ].getElementsByTagName( 'img' )[ 0 ].style.width = '';
-
-        blockContent.getElementsByClassName( 'image-tool__image' )[ 0 ].getElementsByTagName( 'img' )[ 0 ].style.height = '';
-
-        //remove resize handles
-        this.unresize( blockContent );
-
-        //remove crop handles
-        this.uncrop( blockContent );
-
-        //remove cropper interface
-        if ( this.cropperInterface ) {
-            this.cropperInterface.destroy();
-        }
-
-        //remove crop data
-        this.data.cropperFrameHeight = 0;
-        this.data.cropperFrameWidth = 0;
-        this.data.cropperFrameLeft = 0;
-        this.data.cropperFrameTop = 0;
-        this.data.cropperImageHeight = 0;
-        this.data.cropperImageWidth = 0;
-
-        return blockContent;
-    }
-
-
-
-    /**
-     * Add tune to block data
-     * @private
-     * @return {void}
-     * */
-    save() {
-        return this.data;
-    }
-
-    /**
-     * Append tunes to block wrapper
-     * @param {HTMLElement} blockContent - wrapper for block content
-     * @public
-     * @return {HTMLElement}
-     * */
-    wrap( blockContent ) {
-
-        //createview if not exists
-        if ( !this.wrapper ) {
-            this.wrapper = this.createView();
-        }
-
-
-        this.apply( blockContent );
-
-
-
-
-        return blockContent;
-    }
-
-
-    /**
-     * Creates a view for tunes
-     * @return {HTMLElement}
-     * @private
-     * */
-    createView() {
-        this.buttons = this.settings.map( tune => {
-            const el = document.createElement( 'div' );
-            const buttonIco = document.createElement( 'span' );
-            const buttonTxt = document.createElement( 'span' );
-            el.classList.add( this.CSS.button );
-            buttonTxt.style.fontSize = '8px';
-            buttonIco.innerHTML = tune.icon;
-            buttonTxt.innerHTML = tune.label;
-            el.appendChild( buttonIco );
-            el.appendChild( buttonTxt );
-            el.dataset.tune = tune.name;
-            el.title = tune.label;
-
-            el.addEventListener( 'click', e => this.tuneClicked( e, el ) );
-
-            return el;
-        } );
-        const wrapper = document.createElement( 'div' );
-        this.buttons.forEach( button => {
-            wrapper.appendChild
-                ( button );
-        } );
-        wrapper.classList.add( this.CSS.wrapper );
-        return wrapper;
-
-    }
-
-    /**
-     * Checks if tune is active
-     * @param {string} tune - tune name
-     * @return {boolean}
-     * @private
-     * */
-    isTuneActive( tune ) {
-        return !!this.data[ tune ];
-    }
-
-    /**
-     * Makes buttons with tunes
-     * @return {HTMLElement}
-     * @public
-     * */
-    render() {
-        //when editor is ready
-        this.buttons.forEach( button => {
-            button.classList.toggle( this.CSS.buttonActive, this.isTuneActive( button.dataset.tune ) );
-        }
-        );
-
-        return this.view;
-    }
-
-
-    /**
-     * Destroys the plugin
-     * @public
-     * @return {void}
-     * */
-    destroy() {
-        this.wrapper = null;
-        this.buttons = null;
-    }
-
-
-}
-
-