photowall/image-editor
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

P5-1922 fix jslint warnings

Browse Source
This commit is contained in:
Ruslan Getmansky
2017-11-03 15:53:11 +02:00
parent 3e04bc68d9
commit 8ff2614047
20 changed files with 193 additions and 157 deletions
Download Patch File Download Diff File Expand all files Collapse all files
dist/image-editor.js
Vendored
+97 -79
View File
@@ -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()) {
src/3dHandler.js
+2 -3
View File
@@ -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();
src/ApertureHandler.js
+3 -2
View File
@@ -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) {
src/ButtonMenu.js
-2
View File
@@ -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
src/Canvas.js
+1
View File
@@ -1,4 +1,5 @@
'use strict';
/* globals $, fabric */
var config = require('./config');
var util = require('./util');
src/DragHandle.js
+1
View File
@@ -1,4 +1,5 @@
'use strict';
/* globals $, fabric */
var config = require('./config');
var util = require('./util');
src/DragbarHandler.js
+1
View File
@@ -1,4 +1,5 @@
'use strict';
/* globals $, fabric */
var DragHandle = require('./DragHandle');
var config = require('./config');
src/Draggable.js
+1
View File
@@ -13,6 +13,7 @@ function Draggable(img, boundingRect) {
* Triggers when object is moved
*/
function onMove() {
/*jshint validthis: true */
this.__dragged = true;
this.canvas.disableScroll();
src/FrameHandler.js
+5 -4
View File
@@ -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();
/**
src/GoreHandler.js
+2 -1
View File
@@ -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();
src/ImageDataHandler.js
+1
View File
@@ -1,4 +1,5 @@
'use strict';
/* globals $ */
function ImageDataHandler(img) {
src/ImageEditor.js
+3 -2
View File
@@ -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);
src/RulerHandler.js
+10 -9
View File
@@ -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}
*/
src/TextButton.js
+14 -7
View File
@@ -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) {
src/Viewport.js
+47 -46
View File
@@ -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 () {
src/extend-fabric-functionality.js
+1
View File
@@ -1,4 +1,5 @@
'use strict';
/* globals $, fabric */
var Draggable = require('./Draggable');
var util = require('./util');
src/main.js
+1
View File
@@ -1,4 +1,5 @@
'use strict';
/* globals window */
(function() {
src/utils/is-mobile.js
+1
View File
@@ -1,4 +1,5 @@
'use strict';
/* globals $, window */
function isMobile() {
return $(window).width() < 768;
src/utils/toggle-fullscreen.js
+1 -1
View File
@@ -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()) {
test/unit/image-editor.js
+1 -1
View File
@@ -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();
});
});