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
build-tasks/compile-js.js
+1 -9
View File
@@ -39,13 +39,5 @@ module.exports = () => {
.pipe(uglifyJs()) .pipe(uglifyJs())
.pipe(gulp.dest(path.join('dist', 'js'))); .pipe(gulp.dest(path.join('dist', 'js')));
const init = browserify(path.join('src', 'js', 'init.js'), { return merge(debug, production, min);
debug: false
})
.bundle()
.pipe(source('init.js'))
.pipe(buffer())
.pipe(gulp.dest(path.join('dist', 'js')));
return merge(debug, production, min, init);
}; };
src/js/init.js → examples/basic/app.js
+9 -8
View File
@@ -1,8 +1,5 @@
'use strict'; '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 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 * This code can be pretty messy, but that is fine because nothing of this will come to
@@ -33,6 +30,10 @@ var util = require('./includes/util');
widthInCm = $input.w.val(); widthInCm = $input.w.val();
heightInCm = $input.h.val(); heightInCm = $input.h.val();
function isFullscreen() {
return document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement || document.msFullscreenElement;
}
function getOptimalDimension(values, currentDimension, ratio) { function getOptimalDimension(values, currentDimension, ratio) {
if (currentDimension === 'h') { if (currentDimension === 'h') {
values.width = Math.round(values.height * ratio); values.width = Math.round(values.height * ratio);
@@ -90,14 +91,14 @@ var util = require('./includes/util');
function handleResize() { function handleResize() {
var width = $wrapper.width(); var width = $wrapper.width();
var height = util.isFullscreen() ? $window.height() : $wrapper.height(); var height = isFullscreen() ? $window.height() : $wrapper.height();
editor.canvas.resize({width: width, height: height}); editor.canvas.resize({width: width, height: height});
} }
function getWrapperData() { function getWrapperData() {
var $navbar = $('.image-editor__navbar'); var $navbar = $('.image-editor__navbar');
var isFullScreen = document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement || document.msFullscreenElement; var isFullScreen = isFullscreen();
var isMobile = $window.width() <= config.screenSizes.mobile.max; var isMobile = $window.width() <= 767;
var windowHeight = window.innerHeight ? window.innerHeight : $window.height(); var windowHeight = window.innerHeight ? window.innerHeight : $window.height();
var windowWidth = window.innerWidth ? window.innerWidth : $window.width(); var windowWidth = window.innerWidth ? window.innerWidth : $window.width();
@@ -154,7 +155,7 @@ var util = require('./includes/util');
function init() { function init() {
editor = new ImageEditor('canvas-editor', { editor = new ImageEditor('canvas-editor', {
type: 'canvas', type: 'wallpaper',
buttons: { buttons: {
showThreeD: '3d', showThreeD: '3d',
hideThreeD: 'Flat', hideThreeD: 'Flat',
@@ -163,7 +164,7 @@ var util = require('./includes/util');
showRulers: 'show-rulers', showRulers: 'show-rulers',
hideRulers: 'hide-rulers', hideRulers: 'hide-rulers',
showFullscreen: 'show-fullscreen', showFullscreen: 'show-fullscreen',
hideFullscreen: 'exit-fullscreen', exitFullscreen: 'exit-fullscreen',
}, },
dimensions: getWrapperData() dimensions: getWrapperData()
}) })
fonts/breuertext-medium-webfont.ttf → examples/basic/fonts/breuertext-medium-webfont.ttf
View File
fonts/breuertext-medium-webfont.woff → examples/basic/fonts/breuertext-medium-webfont.woff
View File
fonts/breuertext-regular-webfont.ttf → examples/basic/fonts/breuertext-regular-webfont.ttf
View File
fonts/breuertext-regular-webfont.woff → examples/basic/fonts/breuertext-regular-webfont.woff
View File
index.php → examples/basic/index.html
+2 -3
View File
@@ -4,8 +4,7 @@
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="/main.css?123" /> <link rel="stylesheet" href="/examples/basic/style.css" />
<title>Crop - dev</title>
</head> </head>
<body> <body>
<div id="container"> <div id="container">
@@ -41,6 +40,6 @@
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <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="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.11/fabric.js"></script>
<script src="/dist/js/main.js"></script> <script src="/dist/js/main.js"></script>
<script src="/dist/js/init.js"></script> <script src="/examples/basic/app.js"></script>
</body> </body>
</html> </html>
examples/basic/style.css
+31
View File
@@ -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;
}
src/js/includes/config.js
+1 -2
View File
@@ -6,6 +6,5 @@ module.exports = {
buttonMenu: require('./config/button-menu'), buttonMenu: require('./config/button-menu'),
rulerHandle: require('./config/ruler-handle'), rulerHandle: require('./config/ruler-handle'),
dragHandle: require('./config/drag-handle'), dragHandle: require('./config/drag-handle'),
dragBar: require('./config/drag-bar'), dragBar: require('./config/drag-bar')
screenSizes: require('./config/screen-sizes'),
}; };
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
}
};