P5-3564 - Add eslint and run with --fix
This commit is contained in:
Anders Gustafsson
+151
-151
@@ -8,174 +8,174 @@
|
||||
|
||||
(function() {
|
||||
|
||||
var $document = $(document);
|
||||
var $window = $(window);
|
||||
var $wrapper = $('#wrapper');
|
||||
var $formControl = $('#form-control');
|
||||
var editor = null;
|
||||
var widthInCm, heightInCm;
|
||||
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"]'),
|
||||
// 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(),
|
||||
};
|
||||
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;
|
||||
if (noCropIsChecked) {
|
||||
var currentDimension = $(this).attr('name') === 'h' ? 'h' : 'w';
|
||||
values = getOptimalDimension(values, currentDimension, data.objectRatio);
|
||||
}
|
||||
|
||||
function getOptimalDimension(values, currentDimension, ratio) {
|
||||
if (currentDimension === 'h') {
|
||||
values.width = Math.round(values.height * ratio);
|
||||
} else {
|
||||
values.height = Math.round(values.width / ratio);
|
||||
}
|
||||
$input.w.val(values.width);
|
||||
$input.h.val(values.height);
|
||||
|
||||
return values;
|
||||
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;
|
||||
}
|
||||
|
||||
function handleDimensionChange() {
|
||||
var noCropIsChecked = $input.noCrop.is(':checked');
|
||||
var data = editor.canvas.getViewport().getData();
|
||||
var values = {
|
||||
width: $input.w.val(),
|
||||
height: $input.h.val(),
|
||||
};
|
||||
editor.crop(values.width, values.height, $input.units.val());
|
||||
}
|
||||
|
||||
if (noCropIsChecked) {
|
||||
var currentDimension = $(this).attr('name') === 'h' ? 'h' : 'w';
|
||||
values = getOptimalDimension(values, currentDimension, data.objectRatio);
|
||||
}
|
||||
function handleMirrorChange() {
|
||||
editor.canvas.getMirror().set(this.checked);
|
||||
}
|
||||
|
||||
$input.w.val(values.width);
|
||||
$input.h.val(values.height);
|
||||
function handleNoCropChange() {
|
||||
$input.w.trigger('input');
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
function handleFrameChange() {
|
||||
|
||||
editor.crop(values.width, values.height, $input.units.val());
|
||||
if ($(this).val() === 'none') {
|
||||
editor.canvas.toggle3D(false);
|
||||
}
|
||||
|
||||
function handleMirrorChange() {
|
||||
editor.canvas.getMirror().set(this.checked);
|
||||
}
|
||||
editor.canvas.getViewport().setFrame($(this).val());
|
||||
}
|
||||
|
||||
function handleNoCropChange() {
|
||||
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();
|
||||
});
|
||||
|
||||
function handleFrameChange() {
|
||||
eventHandlers();
|
||||
}
|
||||
|
||||
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();
|
||||
init();
|
||||
|
||||
}());
|
||||
|
||||
Reference in New Issue
Block a user