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.innerWidth <= 767;
    var windowHeight = window.innerHeight;
    var windowWidth = window.innerWidth;

    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();

}());