From 8ff2614047b468f06425bdd3a583703ffb8a70b3 Mon Sep 17 00:00:00 2001
From: Ruslan Getmansky <ruslan.getmansky@gmail.com>
Date: Fri, 3 Nov 2017 15:53:11 +0200
Subject: [PATCH] P5-1922 fix jslint warnings

---
 dist/image-editor.js               | 176 ++++++++++++++++-------------
 src/3dHandler.js                   |   5 +-
 src/ApertureHandler.js             |   5 +-
 src/ButtonMenu.js                  |   2 -
 src/Canvas.js                      |   1 +
 src/DragHandle.js                  |   1 +
 src/DragbarHandler.js              |   1 +
 src/Draggable.js                   |   1 +
 src/FrameHandler.js                |   9 +-
 src/GoreHandler.js                 |   3 +-
 src/ImageDataHandler.js            |   1 +
 src/ImageEditor.js                 |   5 +-
 src/RulerHandler.js                |  19 ++--
 src/TextButton.js                  |  21 ++--
 src/Viewport.js                    |  93 +++++++--------
 src/extend-fabric-functionality.js |   1 +
 src/main.js                        |   1 +
 src/utils/is-mobile.js             |   1 +
 src/utils/toggle-fullscreen.js     |   2 +-
 test/unit/image-editor.js          |   2 +-
 20 files changed, 193 insertions(+), 157 deletions(-)

diff --git a/dist/image-editor.js b/dist/image-editor.js
index 53fac13..a1f8c3b 100644
--- a/dist/image-editor.js
+++ b/dist/image-editor.js
@@ -1,11 +1,10 @@
 (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
 'use strict';
-
-var util = require('./util');
+/* globals fabric */
 
 /**
  * Handles 3d image of canvas products.
- * @param {canvas}
+ * @param {canvas} canvas
  */
 function ThreeDHandler(canvas) {
     var _overlay = new fabric.Group();
@@ -109,12 +108,13 @@ function ThreeDHandler(canvas) {
 
 module.exports = ThreeDHandler;
 
-},{"./util":25}],2:[function(require,module,exports){
+},{}],2:[function(require,module,exports){
 'use strict';
+/* globals fabric */
 
 /**
  * ApertureHandler takes care of the bars around the image to show what area has been/will be cropped.
- * @param {canvas}
+ * @param {canvas} canvas
  */
 function ApertureHandler(canvas) {
     var _items = {x: [], y: []};
@@ -146,7 +146,7 @@ function ApertureHandler(canvas) {
     /**
      * Applies configuration to the apertures apertures on the viewport
      * @param {string} axis
-     * @param {viewport}
+     * @param {viewport} viewport
      */
     this.apply = function (axis, viewport) {
         this.getApertures(axis).forEach(function (o) {
@@ -207,8 +207,6 @@ module.exports = ApertureHandler;
 'use strict';
 
 var TextButton = require('./TextButton');
-var config = require('./config');
-var util = require('./util');
 
 /**
  * Creates the menu with text-buttons settings provided. Settings will override
@@ -358,8 +356,9 @@ function ButtonMenu(canvas, settings) {
 
 module.exports = ButtonMenu;
 
-},{"./TextButton":14,"./config":16,"./util":25}],4:[function(require,module,exports){
+},{"./TextButton":14}],4:[function(require,module,exports){
 'use strict';
+/* globals $, fabric */
 
 var config = require('./config');
 var util = require('./util');
@@ -612,6 +611,7 @@ module.exports = Canvas;
 
 },{"./3dHandler":1,"./ApertureHandler":2,"./ButtonMenu":3,"./DragbarHandler":6,"./ImageDataHandler":10,"./MirrorHandler":12,"./Viewport":15,"./config":16,"./util":25}],5:[function(require,module,exports){
 'use strict';
+/* globals $, fabric */
 
 var config = require('./config');
 var util = require('./util');
@@ -732,6 +732,7 @@ module.exports = DragHandle;
 
 },{"./config":16,"./util":25}],6:[function(require,module,exports){
 'use strict';
+/* globals $, fabric */
 
 var DragHandle = require('./DragHandle');
 var config = require('./config');
@@ -873,6 +874,7 @@ function Draggable(img, boundingRect) {
      * Triggers when object is moved
      */
     function onMove() {
+        /*jshint validthis: true */
         this.__dragged = true;
 
         this.canvas.disableScroll();
@@ -910,6 +912,7 @@ module.exports = Draggable;
 
 },{"./util":25}],8:[function(require,module,exports){
 'use strict';
+/* globals fabric */
 
 var config = require('./config');
 
@@ -917,10 +920,6 @@ function FrameHandler(viewport) {
     var _frames;
     var _frameType = 'image';
 
-    function init() {
-        initFrames();
-    }
-
     function getFramesAsArray() {
         return [
             _frames.top, _frames.right, _frames.bottom, _frames.left
@@ -945,6 +944,10 @@ function FrameHandler(viewport) {
         });
     }
 
+    function init() {
+        initFrames();
+    }
+
     init();
 
     /**
@@ -1054,6 +1057,7 @@ module.exports = FrameHandler;
 
 },{"./config":16}],9:[function(require,module,exports){
 'use strict';
+/* globals fabric */
 
 function GoreHandler(viewport) {
     var _enabled = false;
@@ -1094,7 +1098,7 @@ function GoreHandler(viewport) {
 
         if (!_enabled) {
             viewport.canvas.renderAll();
-            return;
+            return this;
         }
 
         var bounds = viewport.getBounds();
@@ -1126,6 +1130,7 @@ module.exports = GoreHandler;
 
 },{}],10:[function(require,module,exports){
 'use strict';
+/* globals $ */
 
 function ImageDataHandler(img) {
 
@@ -1185,6 +1190,7 @@ module.exports = ImageDataHandler;
 
 },{}],11:[function(require,module,exports){
 'use strict';
+/* globals $, fabric */
 
 var Canvas = require('./Canvas');
 var util = require('./util');
@@ -1254,7 +1260,7 @@ function ImageEditor(canvasId, args) {
     _canvas.getButtonMenu().render();
 
     // Binding fullscreen change event to the image-editor wrapper. This way we can set the correct button active.
-    $(_canvas.getSelectionElement().parentNode).bind('webkitfullscreenchange mozfullscreenchange fullscreenchange', function(e) {
+    $(_canvas.getSelectionElement().parentNode).bind('webkitfullscreenchange mozfullscreenchange fullscreenchange', function() {
         var isFullscreen = document.fullScreen || document.mozFullScreen || document.webkitIsFullScreen;
 
         if (isFullscreen) {
@@ -1315,7 +1321,7 @@ function ImageEditor(canvasId, args) {
     this.loadImage = function (url, callback) {
         callback = typeof callback === 'function' ? callback : function () {};
         fabric.util.loadImage(this._url = url, function (obj) {
-            if(obj == null) {
+            if(obj === null) {
                 throw new Error('Error loading ' + url);
             }
             var img = new fabric.Image(obj);
@@ -1377,6 +1383,7 @@ module.exports = MirrorHandler;
 
 },{}],13:[function(require,module,exports){
 'use strict';
+/* globals fabric */
 
 var util = require('./util');
 var TextButton = require('./TextButton');
@@ -1387,15 +1394,6 @@ function RulerHandler(viewport) {
     var _lines = { x: null, y: null };
     var _rect = { x: null, y: null };
 
-    var Event = {
-        /**
-         * Triggers when handlebar is moved
-         */
-        onMove: function () {
-            updateRulerText(this);
-        }
-    };
-
     function updateRulerText(ruler) {
         var axis = ruler.axis;
         var bounds = viewport.getBounds();
@@ -1410,6 +1408,15 @@ function RulerHandler(viewport) {
         ruler.setText(Math.round(dim * 100) / 100 + ' ' + viewport.getData().dim.units);
     }
 
+    var Event = {
+        /**
+         * Triggers when handlebar is moved
+         */
+        onMove: function () {
+            updateRulerText(this);
+        }
+    };
+
     /**
      * @return {fabric.Line}
      */
@@ -1501,15 +1508,20 @@ module.exports = RulerHandler;
 
 },{"./TextButton":14,"./config":16,"./util":25}],14:[function(require,module,exports){
 'use strict';
+/* globals $, fabric */
 
 var config = require('./config');
 
 /**
  * Creates a text-button with text/settings provided.
- * @param {String} text - text to be shown inside the button
+ * @param {string} id
+ * @param {string} text - text to be shown inside the button
  * @param {Object} settings
+ * @param {bool} isActive
  */
 function TextButton(id, text, settings, isActive) {
+    /* jshint unused:false */
+
     fabric.Group.call(this);
 
     var __active = isActive || false;
@@ -1567,7 +1579,15 @@ function TextButton(id, text, settings, isActive) {
         return this.__active;
     };
 
+    function toggleActiveStyle() {
+        /*jshint validthis: true */
+        _rect.setFill(_rectSettings[this.isActive() ? 'activeFill' : 'fill']);
+        _text.setFill(_textSettings[this.isActive() ? 'activeFill' : 'fill']);
+        this.setText(_textSettings[this.isActive() ? 'textActive' : 'text']);
+    }
+
     function handleMouseDown(e) {
+        /*jshint validthis: true */
         toggleActiveStyle.call(this);
         _callback.call(this, e);
 
@@ -1576,12 +1596,6 @@ function TextButton(id, text, settings, isActive) {
         }
     }
 
-    function toggleActiveStyle() {
-        _rect.setFill(_rectSettings[this.isActive() ? 'activeFill' : 'fill']);
-        _text.setFill(_textSettings[this.isActive() ? 'activeFill' : 'fill']);
-        this.setText(_textSettings[this.isActive() ? 'textActive' : 'text']);
-    }
-
     this.onClick = function(callback) {
         _callback = callback || function() {};
         this.on('mousedown', function (e) {
@@ -1620,6 +1634,7 @@ module.exports = TextButton;
 
 },{"./config":16}],15:[function(require,module,exports){
 'use strict';
+/* globals $, fabric */
 
 var FrameHandler = require('./FrameHandler');
 var GoreHandler = require('./GoreHandler');
@@ -1633,52 +1648,6 @@ function Viewport(canvas) {
     var _rect;
     var self = this;
 
-    /**
-     * Applies viewport to page
-     */
-    function apply() {
-        var cropData = canvas.getImageData().getCropData();
-        canvas.remove(_rect);
-
-        _rect = new fabric.Rect({
-            evented: false,
-            fill: 'transparent',
-            width: _data.width,
-            height: _data.height,
-            stroke: '#fff',
-            strokeWidth: canvas.__type === 'canvas' ? 0 : _borderWidth
-        });
-
-        _rect.width += _borderWidth;
-        _rect.height += _borderWidth;
-        _rect.addTo(canvas).center().setCoords();
-
-        if (cropData) {
-            // Calculate the new position after screenresize and when the
-            // image already has been cropped to a certain position.
-            var left = _rect.left + _rect.strokeWidth - (canvas.getImage().width * canvas.getImage().scaleX * cropData.x);
-            var top = _rect.top + _rect.strokeWidth - (canvas.getImage().height * canvas.getImage().scaleY * cropData.y);
-
-            canvas.getImage().set({ left: left, top: top }).setCoords();
-        } else {
-            canvas.getImage().center().setCoords();
-        }
-
-        canvas.getImage().drag.enable(calcMinMaxBoundsForRect(_rect.getInsideBoundingRect(), canvas.getImage()));
-        canvas.getApertures().apply(_data.axis, _rect.getBoundingRect());
-
-        if (canvas.__type !== 'canvas') {
-            drawBeams();
-        } else {
-            self.setFrame(self.getFrameHandler().getFrameType());
-        }
-
-        canvas.getDragbars().apply();
-        // Apertures sometimes overlaps the viewports bounding rect.
-        // Solve this by bringing it to the front after apertures are applied.
-        _rect.bringToFront();
-    }
-
     /**
      * Render the diagonal lines from viewport to edge of the canvas
      */
@@ -1729,6 +1698,52 @@ function Viewport(canvas) {
         };
     }
 
+    /**
+     * Applies viewport to page
+     */
+    function apply() {
+        var cropData = canvas.getImageData().getCropData();
+        canvas.remove(_rect);
+
+        _rect = new fabric.Rect({
+            evented: false,
+            fill: 'transparent',
+            width: _data.width,
+            height: _data.height,
+            stroke: '#fff',
+            strokeWidth: canvas.__type === 'canvas' ? 0 : _borderWidth
+        });
+
+        _rect.width += _borderWidth;
+        _rect.height += _borderWidth;
+        _rect.addTo(canvas).center().setCoords();
+
+        if (cropData) {
+            // Calculate the new position after screenresize and when the
+            // image already has been cropped to a certain position.
+            var left = _rect.left + _rect.strokeWidth - (canvas.getImage().width * canvas.getImage().scaleX * cropData.x);
+            var top = _rect.top + _rect.strokeWidth - (canvas.getImage().height * canvas.getImage().scaleY * cropData.y);
+
+            canvas.getImage().set({ left: left, top: top }).setCoords();
+        } else {
+            canvas.getImage().center().setCoords();
+        }
+
+        canvas.getImage().drag.enable(calcMinMaxBoundsForRect(_rect.getInsideBoundingRect(), canvas.getImage()));
+        canvas.getApertures().apply(_data.axis, _rect.getBoundingRect());
+
+        if (canvas.__type !== 'canvas') {
+            drawBeams();
+        } else {
+            self.setFrame(self.getFrameHandler().getFrameType());
+        }
+
+        canvas.getDragbars().apply();
+        // Apertures sometimes overlaps the viewports bounding rect.
+        // Solve this by bringing it to the front after apertures are applied.
+        _rect.bringToFront();
+    }
+
     this.canvas = canvas;
 
     this.getBounds = function () {
@@ -2013,6 +2028,7 @@ module.exports = {
 
 },{}],23:[function(require,module,exports){
 'use strict';
+/* globals $, fabric */
 
 var Draggable = require('./Draggable');
 var util = require('./util');
@@ -2078,6 +2094,7 @@ module.exports = ExtendFabricFunctionality;
 
 },{"./Draggable":7,"./util":25}],24:[function(require,module,exports){
 'use strict';
+/* globals window */
 
 (function() {
 
@@ -2212,6 +2229,7 @@ module.exports = isFullscreen;
 
 },{}],31:[function(require,module,exports){
 'use strict';
+/* globals $, window */
 
 function isMobile() {
     return $(window).width() < 768;
@@ -2302,7 +2320,7 @@ module.exports = supportsFullscreen;
 var isFullscreen = require('./is-fullscreen');
 /**
  * Toggles the full screen state for passed DOM object
- * @param {HTMLElement} elm
+ * @param {HTMLElement} elem
  */
 function toggleFullscreen(elem) {
     if (isFullscreen()) {
diff --git a/src/3dHandler.js b/src/3dHandler.js
index 68eb597..24bf526 100644
--- a/src/3dHandler.js
+++ b/src/3dHandler.js
@@ -1,10 +1,9 @@
 'use strict';
-
-var util = require('./util');
+/* globals fabric */
 
 /**
  * Handles 3d image of canvas products.
- * @param {canvas}
+ * @param {canvas} canvas
  */
 function ThreeDHandler(canvas) {
     var _overlay = new fabric.Group();
diff --git a/src/ApertureHandler.js b/src/ApertureHandler.js
index 2095b87..aed2762 100644
--- a/src/ApertureHandler.js
+++ b/src/ApertureHandler.js
@@ -1,8 +1,9 @@
 'use strict';
+/* globals fabric */
 
 /**
  * ApertureHandler takes care of the bars around the image to show what area has been/will be cropped.
- * @param {canvas}
+ * @param {canvas} canvas
  */
 function ApertureHandler(canvas) {
     var _items = {x: [], y: []};
@@ -34,7 +35,7 @@ function ApertureHandler(canvas) {
     /**
      * Applies configuration to the apertures apertures on the viewport
      * @param {string} axis
-     * @param {viewport}
+     * @param {viewport} viewport
      */
     this.apply = function (axis, viewport) {
         this.getApertures(axis).forEach(function (o) {
diff --git a/src/ButtonMenu.js b/src/ButtonMenu.js
index bb1d97f..3714b7c 100644
--- a/src/ButtonMenu.js
+++ b/src/ButtonMenu.js
@@ -1,8 +1,6 @@
 'use strict';
 
 var TextButton = require('./TextButton');
-var config = require('./config');
-var util = require('./util');
 
 /**
  * Creates the menu with text-buttons settings provided. Settings will override
diff --git a/src/Canvas.js b/src/Canvas.js
index 0309cc9..9b441a9 100644
--- a/src/Canvas.js
+++ b/src/Canvas.js
@@ -1,4 +1,5 @@
 'use strict';
+/* globals $, fabric */
 
 var config = require('./config');
 var util = require('./util');
diff --git a/src/DragHandle.js b/src/DragHandle.js
index 35e8e5e..8df2e47 100644
--- a/src/DragHandle.js
+++ b/src/DragHandle.js
@@ -1,4 +1,5 @@
 'use strict';
+/* globals $, fabric */
 
 var config = require('./config');
 var util = require('./util');
diff --git a/src/DragbarHandler.js b/src/DragbarHandler.js
index cf299fe..dd187d7 100644
--- a/src/DragbarHandler.js
+++ b/src/DragbarHandler.js
@@ -1,4 +1,5 @@
 'use strict';
+/* globals $, fabric */
 
 var DragHandle = require('./DragHandle');
 var config = require('./config');
diff --git a/src/Draggable.js b/src/Draggable.js
index f78ac90..62daf53 100644
--- a/src/Draggable.js
+++ b/src/Draggable.js
@@ -13,6 +13,7 @@ function Draggable(img, boundingRect) {
      * Triggers when object is moved
      */
     function onMove() {
+        /*jshint validthis: true */
         this.__dragged = true;
 
         this.canvas.disableScroll();
diff --git a/src/FrameHandler.js b/src/FrameHandler.js
index 2da76f6..ea8c330 100644
--- a/src/FrameHandler.js
+++ b/src/FrameHandler.js
@@ -1,4 +1,5 @@
 'use strict';
+/* globals fabric */
 
 var config = require('./config');
 
@@ -6,10 +7,6 @@ function FrameHandler(viewport) {
     var _frames;
     var _frameType = 'image';
 
-    function init() {
-        initFrames();
-    }
-
     function getFramesAsArray() {
         return [
             _frames.top, _frames.right, _frames.bottom, _frames.left
@@ -34,6 +31,10 @@ function FrameHandler(viewport) {
         });
     }
 
+    function init() {
+        initFrames();
+    }
+
     init();
 
     /**
diff --git a/src/GoreHandler.js b/src/GoreHandler.js
index bc1d91b..3d6e996 100644
--- a/src/GoreHandler.js
+++ b/src/GoreHandler.js
@@ -1,4 +1,5 @@
 'use strict';
+/* globals fabric */
 
 function GoreHandler(viewport) {
     var _enabled = false;
@@ -39,7 +40,7 @@ function GoreHandler(viewport) {
 
         if (!_enabled) {
             viewport.canvas.renderAll();
-            return;
+            return this;
         }
 
         var bounds = viewport.getBounds();
diff --git a/src/ImageDataHandler.js b/src/ImageDataHandler.js
index f1613f1..477df22 100644
--- a/src/ImageDataHandler.js
+++ b/src/ImageDataHandler.js
@@ -1,4 +1,5 @@
 'use strict';
+/* globals $ */
 
 function ImageDataHandler(img) {
 
diff --git a/src/ImageEditor.js b/src/ImageEditor.js
index a3c3d0f..17920ed 100644
--- a/src/ImageEditor.js
+++ b/src/ImageEditor.js
@@ -1,4 +1,5 @@
 'use strict';
+/* globals $, fabric */
 
 var Canvas = require('./Canvas');
 var util = require('./util');
@@ -68,7 +69,7 @@ function ImageEditor(canvasId, args) {
     _canvas.getButtonMenu().render();
 
     // Binding fullscreen change event to the image-editor wrapper. This way we can set the correct button active.
-    $(_canvas.getSelectionElement().parentNode).bind('webkitfullscreenchange mozfullscreenchange fullscreenchange', function(e) {
+    $(_canvas.getSelectionElement().parentNode).bind('webkitfullscreenchange mozfullscreenchange fullscreenchange', function() {
         var isFullscreen = document.fullScreen || document.mozFullScreen || document.webkitIsFullScreen;
 
         if (isFullscreen) {
@@ -129,7 +130,7 @@ function ImageEditor(canvasId, args) {
     this.loadImage = function (url, callback) {
         callback = typeof callback === 'function' ? callback : function () {};
         fabric.util.loadImage(this._url = url, function (obj) {
-            if(obj == null) {
+            if(obj === null) {
                 throw new Error('Error loading ' + url);
             }
             var img = new fabric.Image(obj);
diff --git a/src/RulerHandler.js b/src/RulerHandler.js
index 748a2e3..35640a9 100644
--- a/src/RulerHandler.js
+++ b/src/RulerHandler.js
@@ -1,4 +1,5 @@
 'use strict';
+/* globals fabric */
 
 var util = require('./util');
 var TextButton = require('./TextButton');
@@ -9,15 +10,6 @@ function RulerHandler(viewport) {
     var _lines = { x: null, y: null };
     var _rect = { x: null, y: null };
 
-    var Event = {
-        /**
-         * Triggers when handlebar is moved
-         */
-        onMove: function () {
-            updateRulerText(this);
-        }
-    };
-
     function updateRulerText(ruler) {
         var axis = ruler.axis;
         var bounds = viewport.getBounds();
@@ -32,6 +24,15 @@ function RulerHandler(viewport) {
         ruler.setText(Math.round(dim * 100) / 100 + ' ' + viewport.getData().dim.units);
     }
 
+    var Event = {
+        /**
+         * Triggers when handlebar is moved
+         */
+        onMove: function () {
+            updateRulerText(this);
+        }
+    };
+
     /**
      * @return {fabric.Line}
      */
diff --git a/src/TextButton.js b/src/TextButton.js
index 17ff527..f8737c0 100644
--- a/src/TextButton.js
+++ b/src/TextButton.js
@@ -1,13 +1,18 @@
 'use strict';
+/* globals $, fabric */
 
 var config = require('./config');
 
 /**
  * Creates a text-button with text/settings provided.
- * @param {String} text - text to be shown inside the button
+ * @param {string} id
+ * @param {string} text - text to be shown inside the button
  * @param {Object} settings
+ * @param {bool} isActive
  */
 function TextButton(id, text, settings, isActive) {
+    /* jshint unused:false */
+
     fabric.Group.call(this);
 
     var __active = isActive || false;
@@ -65,7 +70,15 @@ function TextButton(id, text, settings, isActive) {
         return this.__active;
     };
 
+    function toggleActiveStyle() {
+        /*jshint validthis: true */
+        _rect.setFill(_rectSettings[this.isActive() ? 'activeFill' : 'fill']);
+        _text.setFill(_textSettings[this.isActive() ? 'activeFill' : 'fill']);
+        this.setText(_textSettings[this.isActive() ? 'textActive' : 'text']);
+    }
+
     function handleMouseDown(e) {
+        /*jshint validthis: true */
         toggleActiveStyle.call(this);
         _callback.call(this, e);
 
@@ -74,12 +87,6 @@ function TextButton(id, text, settings, isActive) {
         }
     }
 
-    function toggleActiveStyle() {
-        _rect.setFill(_rectSettings[this.isActive() ? 'activeFill' : 'fill']);
-        _text.setFill(_textSettings[this.isActive() ? 'activeFill' : 'fill']);
-        this.setText(_textSettings[this.isActive() ? 'textActive' : 'text']);
-    }
-
     this.onClick = function(callback) {
         _callback = callback || function() {};
         this.on('mousedown', function (e) {
diff --git a/src/Viewport.js b/src/Viewport.js
index e209ebc..7222cf1 100644
--- a/src/Viewport.js
+++ b/src/Viewport.js
@@ -1,4 +1,5 @@
 'use strict';
+/* globals $, fabric */
 
 var FrameHandler = require('./FrameHandler');
 var GoreHandler = require('./GoreHandler');
@@ -12,52 +13,6 @@ function Viewport(canvas) {
     var _rect;
     var self = this;
 
-    /**
-     * Applies viewport to page
-     */
-    function apply() {
-        var cropData = canvas.getImageData().getCropData();
-        canvas.remove(_rect);
-
-        _rect = new fabric.Rect({
-            evented: false,
-            fill: 'transparent',
-            width: _data.width,
-            height: _data.height,
-            stroke: '#fff',
-            strokeWidth: canvas.__type === 'canvas' ? 0 : _borderWidth
-        });
-
-        _rect.width += _borderWidth;
-        _rect.height += _borderWidth;
-        _rect.addTo(canvas).center().setCoords();
-
-        if (cropData) {
-            // Calculate the new position after screenresize and when the
-            // image already has been cropped to a certain position.
-            var left = _rect.left + _rect.strokeWidth - (canvas.getImage().width * canvas.getImage().scaleX * cropData.x);
-            var top = _rect.top + _rect.strokeWidth - (canvas.getImage().height * canvas.getImage().scaleY * cropData.y);
-
-            canvas.getImage().set({ left: left, top: top }).setCoords();
-        } else {
-            canvas.getImage().center().setCoords();
-        }
-
-        canvas.getImage().drag.enable(calcMinMaxBoundsForRect(_rect.getInsideBoundingRect(), canvas.getImage()));
-        canvas.getApertures().apply(_data.axis, _rect.getBoundingRect());
-
-        if (canvas.__type !== 'canvas') {
-            drawBeams();
-        } else {
-            self.setFrame(self.getFrameHandler().getFrameType());
-        }
-
-        canvas.getDragbars().apply();
-        // Apertures sometimes overlaps the viewports bounding rect.
-        // Solve this by bringing it to the front after apertures are applied.
-        _rect.bringToFront();
-    }
-
     /**
      * Render the diagonal lines from viewport to edge of the canvas
      */
@@ -108,6 +63,52 @@ function Viewport(canvas) {
         };
     }
 
+    /**
+     * Applies viewport to page
+     */
+    function apply() {
+        var cropData = canvas.getImageData().getCropData();
+        canvas.remove(_rect);
+
+        _rect = new fabric.Rect({
+            evented: false,
+            fill: 'transparent',
+            width: _data.width,
+            height: _data.height,
+            stroke: '#fff',
+            strokeWidth: canvas.__type === 'canvas' ? 0 : _borderWidth
+        });
+
+        _rect.width += _borderWidth;
+        _rect.height += _borderWidth;
+        _rect.addTo(canvas).center().setCoords();
+
+        if (cropData) {
+            // Calculate the new position after screenresize and when the
+            // image already has been cropped to a certain position.
+            var left = _rect.left + _rect.strokeWidth - (canvas.getImage().width * canvas.getImage().scaleX * cropData.x);
+            var top = _rect.top + _rect.strokeWidth - (canvas.getImage().height * canvas.getImage().scaleY * cropData.y);
+
+            canvas.getImage().set({ left: left, top: top }).setCoords();
+        } else {
+            canvas.getImage().center().setCoords();
+        }
+
+        canvas.getImage().drag.enable(calcMinMaxBoundsForRect(_rect.getInsideBoundingRect(), canvas.getImage()));
+        canvas.getApertures().apply(_data.axis, _rect.getBoundingRect());
+
+        if (canvas.__type !== 'canvas') {
+            drawBeams();
+        } else {
+            self.setFrame(self.getFrameHandler().getFrameType());
+        }
+
+        canvas.getDragbars().apply();
+        // Apertures sometimes overlaps the viewports bounding rect.
+        // Solve this by bringing it to the front after apertures are applied.
+        _rect.bringToFront();
+    }
+
     this.canvas = canvas;
 
     this.getBounds = function () {
diff --git a/src/extend-fabric-functionality.js b/src/extend-fabric-functionality.js
index 8a16a80..b5bc513 100644
--- a/src/extend-fabric-functionality.js
+++ b/src/extend-fabric-functionality.js
@@ -1,4 +1,5 @@
 'use strict';
+/* globals $, fabric */
 
 var Draggable = require('./Draggable');
 var util = require('./util');
diff --git a/src/main.js b/src/main.js
index fe5fc27..02c79d4 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,4 +1,5 @@
 'use strict';
+/* globals window */
 
 (function() {
 
diff --git a/src/utils/is-mobile.js b/src/utils/is-mobile.js
index e2dfca5..4b0a9ce 100644
--- a/src/utils/is-mobile.js
+++ b/src/utils/is-mobile.js
@@ -1,4 +1,5 @@
 'use strict';
+/* globals $, window */
 
 function isMobile() {
     return $(window).width() < 768;
diff --git a/src/utils/toggle-fullscreen.js b/src/utils/toggle-fullscreen.js
index 0f2e77c..f97df1e 100644
--- a/src/utils/toggle-fullscreen.js
+++ b/src/utils/toggle-fullscreen.js
@@ -3,7 +3,7 @@
 var isFullscreen = require('./is-fullscreen');
 /**
  * Toggles the full screen state for passed DOM object
- * @param {HTMLElement} elm
+ * @param {HTMLElement} elem
  */
 function toggleFullscreen(elem) {
     if (isFullscreen()) {
diff --git a/test/unit/image-editor.js b/test/unit/image-editor.js
index fd0ee05..4699a6a 100644
--- a/test/unit/image-editor.js
+++ b/test/unit/image-editor.js
@@ -20,7 +20,7 @@
             assert.strictEqual(data.width, 400, 'sets image width');
             assert.strictEqual(data.height, 200, 'sets image height');
             assert.strictEqual(data.x, 0, 'sets crop x');
-            assert.strictEqual(data.y.toFixed(7), 0.12482117310443483.toFixed(7), 'sets crop y');
+            assert.strictEqual(data.y.toFixed(7), (0.12482117310443483).toFixed(7), 'sets crop y');
             done();
         });
     });