move the sample usage code into the example folder
This commit is contained in:
Martin
@@ -0,0 +1,181 @@
|
||||
'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;
|
||||
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 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(),
|
||||
};
|
||||
|
||||
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 = 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();
|
||||
|
||||
}());
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
@@ -0,0 +1,45 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
|
||||
<link rel="stylesheet" href="/examples/basic/style.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="container">
|
||||
<h1>Test</h1>
|
||||
<form id="form-control">
|
||||
<div>
|
||||
<input type="text" name="image_id" value="45810" />
|
||||
<input type="text" name="w" value="100" />
|
||||
<input type="text" name="h" value="100" />
|
||||
Dimensions:
|
||||
<select class="image-control" name="units">
|
||||
<option value="cm">cm</option>
|
||||
<option value="inch">inch</option>
|
||||
</select>
|
||||
Mirror: <input type="checkbox" class="image-control" name="mirror" />
|
||||
No crop: <input type="checkbox" class="image-control" name="no-crop" />
|
||||
Canvas Frame:
|
||||
<select class="image-control" name="canvas-border">
|
||||
<option value="noop">Choose</option>
|
||||
<option value="none">None</option>
|
||||
<option value="white">White</option>
|
||||
<option value="black">Black</option>
|
||||
<option value="image">Image</option>
|
||||
</select>
|
||||
</div>
|
||||
</form>
|
||||
<br /><br />
|
||||
<div id="wrapper">
|
||||
<canvas id="canvas-editor" data-image-id="45810"></canvas>
|
||||
</div>
|
||||
<br /><br /><br />
|
||||
</div>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.11/fabric.js"></script>
|
||||
<script src="/dist/js/main.js"></script>
|
||||
<script src="/examples/basic/app.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,31 @@
|
||||
@font-face {
|
||||
font-family: breuer;
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
src: url('fonts/breuertext-regular-webfont.woff') format('woff'),
|
||||
url('fonts/breuertext-regular-webfont.ttf') format('truetype');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: breuerMedium;
|
||||
src: url('fonts/breuertext-medium-webfont.woff') format('woff'),
|
||||
url('fonts/breuertext-medium-webfont.ttf') format('truetype');
|
||||
}
|
||||
|
||||
* {
|
||||
font-family: breuer;
|
||||
}
|
||||
|
||||
#container {
|
||||
background: #fff;
|
||||
text-align:center;
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#wrapper {
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
height: 600px;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user