P5-1593. Units added to an image editor initialization.

src/js/includes/config.js

@@ -7,4 +7,5 @@ module.exports = {
     rulerHandle: require('./config/ruler-handle'),
     dragHandle: require('./config/drag-handle'),
     dragBar: require('./config/drag-bar'),
+    screenSizes: require('./config/screen-sizes'),
 };

src/js/includes/config/screen-sizes.js

@@ -0,0 +1,20 @@
+'use strict';
+
+module.exports = {
+    mobile: {
+        min: 0,
+        max: 767
+    },
+    tablet: {
+        min: 768,
+        max: 983
+    },
+    desktop: {
+        min: 984,
+        max: 1311
+    },
+    hd: {
+        min: 1312,
+        max: 99999
+    }
+};

src/js/init.js

@@ -1,5 +1,6 @@
 'use strict';
 
+var config = require('./includes/config');
 var util = require('./includes/util');
 
 /**
@@ -9,16 +10,19 @@ var util = require('./includes/util');
  */
 
 (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"]'),
@@ -26,6 +30,9 @@ var util = require('./includes/util');
     };
     var imageUrl = '//images.photowall.com/products/' + $input.image_id.val() + '.jpg?h=450';
 
+    widthInCm = $input.w.val();
+    heightInCm = $input.h.val();
+
     function getOptimalDimension(values, currentDimension, ratio) {
         if (currentDimension === 'h') {
             values.width = Math.round(values.height * ratio);
@@ -52,7 +59,16 @@ var util = require('./includes/util');
         $input.w.val(values.width);
         $input.h.val(values.height);
 
-        editor.crop(values.width, 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() {
@@ -64,6 +80,11 @@ var util = require('./includes/util');
     }
 
     function handleFrameChange() {
+
+        if ($(this).val() === 'none') {
+            editor.canvas.toggle3D(false);
+        }
+
         editor.canvas.getViewport().setFrame($(this).val());
     }
 
@@ -73,12 +94,42 @@ var util = require('./includes/util');
         editor.canvas.resize({width: width, height: height});
     }
 
+    function getWrapperData() {
+        var $navbar = $('.image-editor__navbar');
+        var isFullScreen = document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement || document.msFullscreenElement;
+        var isMobile = $window.width() <= config.screenSizes.mobile.max;
+        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() {
@@ -101,6 +152,7 @@ var util = require('./includes/util');
     }
 
     function init() {
+
         editor = new ImageEditor('canvas-editor', {
                 type: 'canvas',
                 buttons: {
@@ -113,7 +165,7 @@ var util = require('./includes/util');
                     showFullscreen: 'show-fullscreen',
                     hideFullscreen: 'exit-fullscreen',
                 },
-                dimensions: {width: 100, height: 100}
+                dimensions: getWrapperData()
             })
             .loadImage(imageUrl, function() {
                 $input.w.trigger('input');