move the sample usage code into the example folder

2017-08-04 17:07:55 +02:00
parent 8f744e06f5
commit 43012d6e92
10 changed files with 44 additions and 42 deletions
@@ -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);
 };
@@ -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()
            })
@@ -4,8 +4,7 @@
    <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="/main.css?123" />
-    <title>Crop - dev</title>
+    <link rel="stylesheet" href="/examples/basic/style.css" />
 </head>
 <body>
    <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/fabric.js/1.7.11/fabric.js"></script>
    <script src="/dist/js/main.js"></script>
-    <script src="/dist/js/init.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;
+}
+
@@ -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')
 };
@@ -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
-    }
-};