add fullscreen support to the wallpaper example

2017-08-04 15:42:40 +02:00
parent 66a6f828b0
commit ad351e7fe0
1 changed files with 14 additions and 3 deletions
@@ -1,7 +1,5 @@
 <!DOCTYPE html>
 <html lang="en">
-    <head>
-    </head>
    <body>
        <label>Width: <input type="text" id="width" name="width" value="500" /></label>
        <label>Height: <input type="text" id="height" name="height" value="400" /></label>
@@ -13,19 +11,32 @@
        <script type="text/javascript">
            var width = document.getElementById('width');
            var height = document.getElementById('height');
+            var dimensions = {width: 800, height: 600};
+
            var editor = new ImageEditor('image-editor', {
                type: 'photo-wallpaper',
-                dimensions: {width: 800, height: 600}
+                dimensions: dimensions
            });

            function cropImage() {
                editor.crop(width.value, height.value, 'cm');
            }

+            function resizeEditor() {
+                var isFullscreen = document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement || document.msFullscreenElement;
+                if(isFullscreen) {
+                    editor.canvas.resize({width: window.innerWidth, height:  window.innerHeight});
+                } else {
+                    editor.canvas.resize(dimensions);
+                }
+            }
+
            //add event listeners
            width.addEventListener('keyup', cropImage);
            height.addEventListener('keyup', cropImage);

+            window.addEventListener('resize', resizeEditor);
+
            //load the image
            var image_url = '//images-dev.photowall.com/products/45825.jpg?h=450';
            editor.loadImage(image_url, function() {