From 43012d6e929bc17be753b85a7d6fec423bea382d Mon Sep 17 00:00:00 2001 From: Martin Date: Fri, 4 Aug 2017 17:07:55 +0200 Subject: [PATCH] move the sample usage code into the example folder --- build-tasks/compile-js.js | 10 +----- src/js/init.js => examples/basic/app.js | 17 +++++----- .../fonts}/breuertext-medium-webfont.ttf | Bin .../fonts}/breuertext-medium-webfont.woff | Bin .../fonts}/breuertext-regular-webfont.ttf | Bin .../fonts}/breuertext-regular-webfont.woff | Bin index.php => examples/basic/index.html | 5 ++- examples/basic/style.css | 31 ++++++++++++++++++ src/js/includes/config.js | 3 +- src/js/includes/config/screen-sizes.js | 20 ----------- 10 files changed, 44 insertions(+), 42 deletions(-) rename src/js/init.js => examples/basic/app.js (91%) rename {fonts => examples/basic/fonts}/breuertext-medium-webfont.ttf (100%) rename {fonts => examples/basic/fonts}/breuertext-medium-webfont.woff (100%) rename {fonts => examples/basic/fonts}/breuertext-regular-webfont.ttf (100%) rename {fonts => examples/basic/fonts}/breuertext-regular-webfont.woff (100%) rename index.php => examples/basic/index.html (93%) create mode 100644 examples/basic/style.css delete mode 100644 src/js/includes/config/screen-sizes.js diff --git a/build-tasks/compile-js.js b/build-tasks/compile-js.js index 9e5794b..8c9b455 100644 --- a/build-tasks/compile-js.js +++ b/build-tasks/compile-js.js @@ -39,13 +39,5 @@ module.exports = () => { .pipe(uglifyJs()) .pipe(gulp.dest(path.join('dist', 'js'))); - const init = browserify(path.join('src', 'js', 'init.js'), { - debug: false - }) - .bundle() - .pipe(source('init.js')) - .pipe(buffer()) - .pipe(gulp.dest(path.join('dist', 'js'))); - - return merge(debug, production, min, init); + return merge(debug, production, min); }; diff --git a/src/js/init.js b/examples/basic/app.js similarity index 91% rename from src/js/init.js rename to examples/basic/app.js index 96d8c25..0b7cadc 100644 --- a/src/js/init.js +++ b/examples/basic/app.js @@ -1,8 +1,5 @@ '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 @@ -33,6 +30,10 @@ var util = require('./includes/util'); 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); @@ -90,14 +91,14 @@ var util = require('./includes/util'); function handleResize() { 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}); } 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 isFullScreen = isFullscreen(); + var isMobile = $window.width() <= 767; var windowHeight = window.innerHeight ? window.innerHeight : $window.height(); var windowWidth = window.innerWidth ? window.innerWidth : $window.width(); @@ -154,7 +155,7 @@ var util = require('./includes/util'); function init() { editor = new ImageEditor('canvas-editor', { - type: 'canvas', + type: 'wallpaper', buttons: { showThreeD: '3d', hideThreeD: 'Flat', @@ -163,7 +164,7 @@ var util = require('./includes/util'); showRulers: 'show-rulers', hideRulers: 'hide-rulers', showFullscreen: 'show-fullscreen', - hideFullscreen: 'exit-fullscreen', + exitFullscreen: 'exit-fullscreen', }, dimensions: getWrapperData() }) diff --git a/fonts/breuertext-medium-webfont.ttf b/examples/basic/fonts/breuertext-medium-webfont.ttf similarity index 100% rename from fonts/breuertext-medium-webfont.ttf rename to examples/basic/fonts/breuertext-medium-webfont.ttf diff --git a/fonts/breuertext-medium-webfont.woff b/examples/basic/fonts/breuertext-medium-webfont.woff similarity index 100% rename from fonts/breuertext-medium-webfont.woff rename to examples/basic/fonts/breuertext-medium-webfont.woff diff --git a/fonts/breuertext-regular-webfont.ttf b/examples/basic/fonts/breuertext-regular-webfont.ttf similarity index 100% rename from fonts/breuertext-regular-webfont.ttf rename to examples/basic/fonts/breuertext-regular-webfont.ttf diff --git a/fonts/breuertext-regular-webfont.woff b/examples/basic/fonts/breuertext-regular-webfont.woff similarity index 100% rename from fonts/breuertext-regular-webfont.woff rename to examples/basic/fonts/breuertext-regular-webfont.woff diff --git a/index.php b/examples/basic/index.html similarity index 93% rename from index.php rename to examples/basic/index.html index b0528dd..60fe315 100644 --- a/index.php +++ b/examples/basic/index.html @@ -4,8 +4,7 @@ - - Crop - dev +
@@ -41,6 +40,6 @@ - + diff --git a/examples/basic/style.css b/examples/basic/style.css new file mode 100644 index 0000000..7b3261d --- /dev/null +++ b/examples/basic/style.css @@ -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; +} + diff --git a/src/js/includes/config.js b/src/js/includes/config.js index 772848b..63b4b73 100644 --- a/src/js/includes/config.js +++ b/src/js/includes/config.js @@ -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') }; diff --git a/src/js/includes/config/screen-sizes.js b/src/js/includes/config/screen-sizes.js deleted file mode 100644 index 1f6b024..0000000 --- a/src/js/includes/config/screen-sizes.js +++ /dev/null @@ -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 - } -};