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

move the sample usage code into the example folder

Browse Source
This commit is contained in:
Martin
2017-08-04 17:07:55 +02:00
parent 8f744e06f5
commit 43012d6e92
10 changed files with 44 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/js/includes/config.js
+1 -2
View File
@@ -6,6 +6,5 @@ module.exports = {
buttonMenu: require('./config/button-menu'),
rulerHandle: require('./config/ruler-handle'),
dragHandle: require('./config/drag-handle'),
dragBar: require('./config/drag-bar'),
screenSizes: require('./config/screen-sizes'),
dragBar: require('./config/drag-bar')
};
src/js/includes/config/screen-sizes.js
-20
View File
@@ -1,20 +0,0 @@
'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
-180
View File
@@ -1,180 +0,0 @@
'use strict';
var config = require('./includes/config');
var util = require('./includes/util');
/**
* 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;
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"]'),
};
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);
} 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);
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() {
editor.canvas.getMirror().set(this.checked);
}
function handleNoCropChange() {
$input.w.trigger('input');
}
function handleFrameChange() {
if ($(this).val() === 'none') {
editor.canvas.toggle3D(false);
}
editor.canvas.getViewport().setFrame($(this).val());
}
function handleResize() {
var width = $wrapper.width();
var height = util.isFullscreen() ? $window.height() : $wrapper.height();
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() {
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: 'canvas',
buttons: {
showThreeD: '3d',
hideThreeD: 'Flat',
showMurals: 'show-murals',
hideMurals: 'hide-murals',
showRulers: 'show-rulers',
hideRulers: 'hide-rulers',
showFullscreen: 'show-fullscreen',
hideFullscreen: 'exit-fullscreen',
},
dimensions: getWrapperData()
})
.loadImage(imageUrl, function() {
$input.w.trigger('input');
handleResize();
});
eventHandlers();
}
init();
}());