image-editor/examples/basic/app.js

'use strict';

/**
 * This is just an example usage of the image editor. Also this is used for testing.
 * This code can be pretty messy, but that is fine because nothing of this will come to
 * production.
 */

(function() {

    var $document = $(document);
    var $window = $(window);
    var $wrapper = $('#wrapper');
    var $formControl = $('#form-control');
    var editor = null;
    var widthInCm, heightInCm;

    // Inputs for the editor
    var $input = {
        w: $formControl.find('input[name="w"]'),
        h: $formControl.find('input[name="h"]'),
        units: $formControl.find('select[name="units"]'),
        image_id: $formControl.find('input[name="image_id"]'),
        mirror: $formControl.find('input[name="mirror"]'),
        noCrop: $formControl.find('input[name="no-crop"]'),
        border: $formControl.find('select[name="canvas-border"]'),
    };
    var imageUrl = '//images.photowall.com/products/' + $input.image_id.val() + '.jpg?h=450';

    widthInCm = $input.w.val();
    heightInCm = $input.h.val();

    function isFullscreen() {
        return document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement || document.msFullscreenElement;
    }

    function getOptimalDimension(values, currentDimension, ratio) {
        if (currentDimension === 'h') {
            values.width = Math.round(values.height * ratio);
        } else {
            values.height = Math.round(values.width / ratio);
        }

        return values;
    }

    function handleDimensionChange() {
        var noCropIsChecked = $input.noCrop.is(':checked');
        var data = editor.canvas.getViewport().getData();
        var values = {
            width: $input.w.val(),
            height: $input.h.val(),
        };

        if (noCropIsChecked) {
            var currentDimension = $(this).attr('name') === 'h' ? 'h' : 'w';
            values = getOptimalDimension(values, currentDimension, data.objectRatio);
        }

        $input.w.val(values.width);
        $input.h.val(values.height);

        if ($input.units.val() == 'inch') {
            widthInCm = Math.round(values.width * 2.54);
            heightInCm = Math.round(values.height * 2.54);
        }
        else {
            widthInCm = values.width;
            heightInCm = values.height;
        }

        editor.crop(values.width, values.height, $input.units.val());
    }

    function handleMirrorChange() {
        editor.canvas.getMirror().set(this.checked);
    }

    function handleNoCropChange() {
        $input.w.trigger('input');
    }

    function handleFrameChange() {

        if ($(this).val() === 'none') {
            editor.canvas.toggle3D(false);
        }

        editor.canvas.getViewport().setFrame($(this).val());
    }

    function handleResize() {
        var width = $wrapper.width();
        var height = isFullscreen() ? $window.height() : $wrapper.height();
        editor.canvas.resize({width: width, height: height});
    }

    function getWrapperData() {
        var $navbar = $('.image-editor__navbar');
        var isFullScreen = isFullscreen();
        var isMobile = $window.width() <= 767;
        var windowHeight = window.innerHeight ? window.innerHeight : $window.height();
        var windowWidth = window.innerWidth ? window.innerWidth : $window.width();

        return {
            width: isFullScreen ? windowWidth : (isMobile ? windowWidth : $wrapper.width()),
            height: isFullScreen ? windowHeight : (isMobile ? windowHeight - $navbar.height() : $wrapper.height())
        };
    }

    function handleUnitsChange() {
        switch ($input.units.val()) {
            case 'inch':
                $input.w.val(Math.round(widthInCm / 2.54 * 100) / 100);
                $input.h.val(Math.round(heightInCm / 2.54 * 100) / 100);
                break;

            case 'cm':
            default:
                $input.w.val(widthInCm);
                $input.h.val(heightInCm);
                break;
        }
        handleDimensionChange();
    }

    function eventHandlers() {
        $input.w.on('input', handleDimensionChange);
        $input.h.on('input', handleDimensionChange);
        $input.mirror.on('change', handleMirrorChange);
        $input.noCrop.on('change', handleNoCropChange);
        $input.border.on('change', handleFrameChange);
        $input.units.on('change', handleUnitsChange);

        $document
            .on('PIE:dragged', function() {
                console.log('Dragged the image/dragbar!');
            })
            .on('PIE:needs-dragging', function(e, data) {
                console.log('Image needs dragging on: ' + data.axis);
            })
            .on('PIE:dragbar-click', function(e, data) {
                console.log('Clicked on a dragbar! Axis: ' + data.axis);
            })
            .on('PIE:image-start-load', function() {
                console.log('Start loading image');
            })
            .on('PIE:image-end-load', function() {
                console.log('Image loaded');
            });

        $window.on('resize', handleResize);
    }

    function init() {

        editor = new ImageEditor('canvas-editor', {
                type: 'wallpaper',
                buttons: {
                    showThreeD: '3d',
                    hideThreeD: 'Flat',
                    showMurals: 'show-murals',
                    hideMurals: 'hide-murals',
                    showRulers: 'show-rulers',
                    hideRulers: 'hide-rulers',
                    showFullscreen: 'show-fullscreen',
                    exitFullscreen: 'exit-fullscreen',
                },
                dimensions: getWrapperData()
            })
            .loadImage(imageUrl, function() {
                $input.w.trigger('input');
                handleResize();
            });

        eventHandlers();
    }

    init();

}());