117 lines
3.7 KiB
JavaScript
117 lines
3.7 KiB
JavaScript
'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;
|
|
|
|
// Inputs for the editor
|
|
var $input = {
|
|
w: $formControl.find('input[name="w"]'),
|
|
h: $formControl.find('input[name="h"]'),
|
|
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';
|
|
|
|
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);
|
|
|
|
editor.crop(values.width, values.height);
|
|
}
|
|
|
|
function handleMirrorChange() {
|
|
editor.canvas.getImage().transformation.set('mirror', this.checked);
|
|
}
|
|
|
|
function handleNoCropChange() {
|
|
$input.w.trigger('input');
|
|
}
|
|
|
|
function handleFrameChange() {
|
|
editor.canvas.getViewport().setFrame($(this).val());
|
|
}
|
|
|
|
function handleResize() {
|
|
var isFullScreen = document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement || document.msFullscreenElement;
|
|
var width = $wrapper.width();
|
|
var height = isFullScreen ? $window.height() : $wrapper.height();
|
|
editor.canvas.resize({width: width, height: height});
|
|
}
|
|
|
|
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);
|
|
|
|
$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',
|
|
})
|
|
.loadImage(imageUrl, function() {
|
|
$input.w.trigger('input');
|
|
handleResize();
|
|
});
|
|
|
|
eventHandlers();
|
|
}
|
|
|
|
init();
|
|
|
|
}());
|