New library to handle fullscreen : screenfull.js
authorrougeronj
Wed, 30 Sep 2015 16:32:21 +0200
changeset 555 49daeea94e88
parent 554 32c7378d1c28
child 556 2737bc21e6dd
New library to handle fullscreen : screenfull.js
client/bower.json
client/gruntfile.js
client/js/main-renderer.js
client/js/renderer/scene.js
--- a/client/bower.json	Tue Sep 29 18:47:11 2015 +0200
+++ b/client/bower.json	Wed Sep 30 16:32:21 2015 +0200
@@ -25,14 +25,15 @@
   ],
   "dependencies": {
     "backbone": "~1.2.3",
+    "backbone-relational": "a7634e7d9deac64e3da455a3fde13b96ae253612",
+    "ckeditor": "~4.4.7",
+    "FileSaver": "*",
     "jquery": "~2.1.4",
     "jquery-mousewheel": "~3.1.13",
+    "lodash": "~3.10.1",
     "paper": "~0.9.24",
-    "FileSaver": "*",
-    "backbone-relational": "a7634e7d9deac64e3da455a3fde13b96ae253612",
     "requirejs": null,
-    "lodash": "~3.10.1",
-    "ckeditor": "~4.4.7"
+    "screenfull": "~2.0.0"
   },
   "devDependencies": {
     "jquery-ui": "~1.11.4"
--- a/client/gruntfile.js	Tue Sep 29 18:47:11 2015 +0200
+++ b/client/gruntfile.js	Wed Sep 30 16:32:21 2015 +0200
@@ -41,7 +41,8 @@
                         underscore: "empty:",
                         filesaver: "empty:",
                         'ckeditor-core': "empty:",
-                        'ckeditor-jquery': "empty:"
+                        'ckeditor-jquery': "empty:",
+                        'screenfull': "empty:"
                     }
                 }
             }
@@ -255,7 +256,15 @@
                         'default': ['jquery', 'ckeditor'],
                     }
                 }
-            }
+            },
+            'screenfull': {
+                options: {
+                    src: 'dist/lib/screenfull/screenfull.js',
+                    dest: 'lib/screenfull/screenfull-umd.js',
+                    objectToExport: 'screenfull',
+                    amdModuleId: 'screenfull'
+                }
+            },
         },
         replace: {
             'version-bower-package': {
@@ -330,7 +339,8 @@
         'copy:renkan_css',
         'clean:renderer',
         'umd:ckeditor-core',
-        'umd:ckeditor-jquery'
+        'umd:ckeditor-jquery',
+        'umd:screenfull'
     ]);
     grunt.registerTask('default', ['base', 'clean:jst']);
     grunt.registerTask('copy-server', 'copy files to server part', function() {
--- a/client/js/main-renderer.js	Tue Sep 29 18:47:11 2015 +0200
+++ b/client/js/main-renderer.js	Wed Sep 30 16:32:21 2015 +0200
@@ -8,7 +8,8 @@
             'filesaver' :'../lib/FileSaver/FileSaver',
             'requtils':'require-utils',
             'ckeditor-core':'../lib/ckeditor/ckeditor',
-            'ckeditor-jquery':'../lib/ckeditor/adapters/jquery'
+            'ckeditor-jquery':'../lib/ckeditor/adapters/jquery',
+            'screenfull':'../lib/screenfull/screenfull-umd'
         },
         shim: {
             'ckeditor-jquery':{
--- a/client/js/renderer/scene.js	Tue Sep 29 18:47:11 2015 +0200
+++ b/client/js/renderer/scene.js	Wed Sep 30 16:32:21 2015 +0200
@@ -1,7 +1,7 @@
 
-define(['jquery', 'underscore', 'filesaver', 'requtils', 'renderer/miniframe'], function ($, _, filesaver, requtils, MiniFrame) {
+define(['jquery', 'underscore', 'filesaver', 'requtils', 'renderer/miniframe', 'screenfull'], function ($, _, filesaver, requtils, MiniFrame, Screenfull) {
     'use strict';
-
+    
     var Utils = requtils.getUtils();
 
     /* Scene Begin */
@@ -240,6 +240,14 @@
         this.$.find(".Rk-Users").mouseleave(
                 function() { _this.$.find(".Rk-UserList").slideUp(); }
         );
+        
+        if (Screenfull.enabled){
+            bindClick(".Rk-FullScreen-Button", "fullScreen");
+        } else {
+            this.$.find(".Rk-FullScreen-Button").addClass("disabled");
+            this.$.find(".Rk-FullScreen-Button .Rk-TopBar-Tooltip-Contents").html(this.renkan.translate("Fullscreen not supported by your browser"));
+        }
+        
         bindClick(".Rk-FullScreen-Button", "fullScreen");
         bindClick(".Rk-AddNode-Button", "addNodeBtn");
         bindClick(".Rk-AddEdge-Button", "addEdgeBtn");
@@ -1103,18 +1111,9 @@
             }
         },
         fullScreen: function() {
-            var _isFull = document.fullScreen || document.mozFullScreen || document.webkitIsFullScreen,
-                _el = this.renkan.$[0],
-                _requestMethods = ["requestFullScreen","mozRequestFullScreen","webkitRequestFullScreen"],
-                _cancelMethods = ["cancelFullScreen","mozCancelFullScreen","webkitCancelFullScreen"],
-                i;
-            if (_isFull) {
-                for (i = 0; i < _cancelMethods.length; i++) {
-                    if (typeof document[_cancelMethods[i]] === "function") {
-                        document[_cancelMethods[i]]();
-                        break;
-                    }
-                }
+            if (Screenfull.isFullscreen) {
+                Screenfull.exit();
+            
                 var widthAft = this.$.width();
                 var heightAft = this.$.height();
 
@@ -1128,12 +1127,8 @@
                 paper.view.viewSize = new paper.Size([widthAft, heightAft]);
 
             } else {
-                for (i = 0; i < _requestMethods.length; i++) {
-                    if (typeof _el[_requestMethods[i]] === "function") {
-                        _el[_requestMethods[i]]();
-                        break;
-                    }
-                }
+                Screenfull.request();
+                
                 this.redraw();
             }
         },