A lot of cleaning

Avoid main.js of 500 lines, and factor what can be factored between
interactive, replay and tutorial

controllers/prototype/views/prototype.jade

@@ -26,8 +26,6 @@ block content
 
         nav.navbar.navbar-default.navbar-fixed-bottom
             .container
-                block fullscreen
-                    button#full.btn.btn-primary.navbar-btn(style={'margin-right': '10px', 'margin-bottom': '10px'}) Fullscreen
                 button#reset.btn.btn-primary.navbar-btn(style={'margin-right': '10px', 'margin-bottom':'10px'}) Reset camera
 
                 button#undo.btn.btn-default.navbar-btn(style={'margin-right': '10px', 'margin-bottom': '10px'})

controllers/prototype/views/prototype_replays.jade

@@ -7,6 +7,7 @@ block extrajs
     script Recommendation = L3D.ArrowRecommendation;
     script var params = params || {}; params.get = params.get || {}; params.get.id = #{id};
     script initMainScene = #{initjs}
+    script(src="/static/js/l3dp.min.js")
     script(src="/static/js/replay.min.js")
 
 block extrahead

js/Makefile

@@ -45,6 +45,7 @@ L3DP:
 	$(CLOSURE) $(OPT) \
 		--js l3d/apps/prototype/ButtonManager.js \
 		--js l3d/apps/prototype/Coin.js \
+		--js l3d/apps/prototype/GlobalFunctions.js \
 		--js_output_file ../static/js/l3dp.min.js
 
 Socket:

js/l3d/apps/prototype/ButtonManager.js

@@ -6,7 +6,6 @@ var ButtonManager = function(camera, cameras, previewer) {
     this.showArrows = true;
     this.beenFullscreen = false;
 
-    this.fullscreenElement = document.getElementById('full');
     this.fullElement = document.getElementById('fullarrow');
     this.resetElement = document.getElementById('reset');
     this.undoElement = document.getElementById('undo');
@@ -17,8 +16,6 @@ var ButtonManager = function(camera, cameras, previewer) {
 
     this.recommendationElement = document.getElementById('recommendation');
 
-    this.fullscreenElement.onclick = function() {fullscreen();};
-
     (function(self) {
         self.undoElement.onclick = function() {self.camera.undo(); self.updateElements();};
         self.redoElement.onclick = function() {self.camera.redo(); self.updateElements();};

js/l3d/apps/prototype/GlobalFunctions.js

@@ -0,0 +1,175 @@
+// Auto-resize case
+// var main_section = document.getElementById('main-section');
+//
+// var container_size = {
+//     width: function() { if (!isFullscreen) return main_section.clientWidth; else return screen.width;},
+//     height: function() {
+//         if (!isFullscreen)
+//             return main_section.clientHeight
+//                 - document.getElementById('nav').offsetHeight
+//                 - document.getElementById('main-div').offsetHeight;
+//         else
+//             return screen.height;
+//     }
+// };
+
+var container_size = {
+
+    width: function() { return 1134; },
+    height: function() { return 768; }
+
+};
+
+function logfps(fps) {
+    var event = new L3D.BD.Event.Fps();
+    event.fps = fps;
+    event.send();
+}
+
+function objectClickerOnHover(camera1, previewer, recommendations, container) {
+
+    var hoveredCamera = null;
+
+    return function(obj, x, y) {
+
+        // Check if the object is clickable
+        var ok = obj instanceof Coin || obj instanceof L3D.BaseRecommendation;
+
+        // Little graphic stuff so the user knows that it's clickable
+        container.style.cursor = ok ? "pointer" : "auto";
+        if (camera1.pointerLocked)
+            camera1.mousePointer.render(ok ? L3D.MousePointer.RED : L3D.MousePointer.BLACK);
+
+        // Set previewer for preview
+        previewer.setCamera(obj instanceof L3D.BaseRecommendation ? obj.camera : null);
+        previewer.setPosition(x,y);
+
+        // Manage the hover camera event
+        if (hoveredCamera !== obj) {
+
+            var event = new L3D.BD.Event.Hovered();
+
+            if (obj instanceof L3D.BaseRecommendation) {
+                // The newly hovered object is different and is a recommendation
+
+                event.arrow_id = recommendations.indexOf(obj);
+                event.start = true;
+                event.send();
+
+                hoveredCamera = obj;
+
+            } else if (hoveredCamera instanceof L3D.BaseRecommendation) {
+
+                // The newly hovered object is not a recommendation,
+                // but the previous one is : we must log
+
+                // Unhovered
+                event.arrow_id = 0;
+                event.start = false;
+                event.send();
+
+                hoveredCamera = null;
+
+            }
+
+        }
+
+    };
+
+}
+
+function objectClickerOnClick(camera1, buttonManager, recommendations, coins) {
+
+    return function(obj, x, y) {
+
+        var event;
+
+        // Do stuff for click
+        if (obj instanceof Coin) {
+
+            obj.get();
+
+            // Send event to DB
+            event = new L3D.BD.Event.CoinClicked();
+            event.coin_id = coins.indexOf(obj);
+            event.send();
+
+        } else if (obj instanceof L3D.BaseRecommendation) {
+
+            camera1.moveHermite(obj);
+
+            // Send event to DB
+            event = new L3D.BD.Event.ArrowClicked();
+            event.arrow_id = recommendations.indexOf(obj);
+            event.send();
+        }
+
+        // Update the button manager
+        buttonManager.updateElements();
+
+    };
+
+}
+
+function createVisibilityFunction(value) {
+    return function(object) {
+        object.traverse(function(object) {
+            object.visible = value;
+        });
+    };
+}
+
+function resetCameraAspect(camera, width, height) {
+    camera.aspect = width / height;
+    camera.updateProjectionMatrix();
+}
+
+var show = createVisibilityFunction(true);
+var hide = createVisibilityFunction(false);
+
+function resizeElements() {
+
+    var width = container_size.width(), height = container_size.height();
+
+    for (var i = 0; i < arguments.length; i++) {
+
+        var obj = arguments[i];
+
+        if (obj instanceof Element) {
+
+            obj.style.width = width + 'px';
+            obj.style.height = height + 'px';
+            continue;
+        }
+
+        if (obj instanceof THREE.WebGLRenderer) {
+
+            obj.setSize(width, height);
+
+        }
+
+        if (obj.domElement) {
+
+            obj.domElement.width = width;
+            obj.domElement.height = height;
+            continue;
+
+        }
+
+    }
+
+}
+
+function appendTo(container) {
+
+    return function() {
+
+        for (var i = 0; i < arguments.length; i++) {
+
+            container.appendChild(arguments[i].domElement);
+
+        }
+
+    };
+
+}

js/l3d/apps/prototype/interactive/main.js

@@ -1,48 +1,21 @@
-var isFullscreen = false;
-var beenFullscreen = false;
-
-var main_section = document.getElementById('main-section');
-
-// var container_size = {
-//     width: function() { if (!isFullscreen) return main_section.clientWidth; else return screen.width;},
-//     height: function() {
-//         if (!isFullscreen)
-//             return main_section.clientHeight
-//                 - document.getElementById('nav').offsetHeight
-//                 - document.getElementById('main-div').offsetHeight;
-//         else
-//             return screen.height;
-//     }
-// };
-var container_size = {
-    width: function() { return 1134; },
-    height: function() { return 768; }
-};
-
-var stats;
-
 // Let's be sure we avoid using global variables
 var onWindowResize = (function() {
 
 // Disable scrolling
 window.onscroll = function () { window.scrollTo(0, 0); };
 
-var mesh_number = 25;
+window.onload = main;
-var renderer, scene, controls, cube, container, plane, mouse= {x:0, y:0};
+
-var bigmesh;
+var stats;
-var raycaster;
+var renderer, scene, container;
-var objects = [];
 var clickableObjects = [];
 var recommendations, objectClicker;
-var spheres = new Array(mesh_number);
-var visible = 0;
-// stats;
 var previewer;
 var camera1;
-var loader;
 var coins = [];
 var previousTime;
-var hoveredCamera = null;
+var pointer;
+var startCanvas;
 
 window.onbeforeunload = function() {
 
@@ -54,55 +27,58 @@ window.onbeforeunload = function() {
 
 };
 
+function main() {
 
-init();
+    // Main container that holds everything
+    container = document.getElementById('container');
+
+    // Initialization
+    initThreeElements();
+    initCanvases();
+    initModels();
+    initListeners();
+
+    appendTo(container)(stats, Coin, startCanvas, pointer, previewer, renderer);
+
+    // Set the good size of cameras
+    onWindowResize();
+
+    // Some config
     if (initMainScene !== L3D.initPeach && initMainScene !== L3D.initSponza)
-    logfps();
+        setInterval(function() {logfps(stats.getFps());}, 500);
     else
         L3D.BD.disable();
 
-animate();
+    Coin.update();
+    startCanvas.render(L3D.StartCanvas.Black);
 
-function logfps() {
+    // Start rendering
-
+    setInterval(render, 20);
-    // Log fps
-    if (stats !== undefined) {
-
-        var event = new L3D.BD.Event.Fps();
-        event.fps = stats.getFps();
-        event.send();
 
 }
 
-    setTimeout(logfps, 1000);
+function initThreeElements() {
 
-}
-
-function init() {
     // Initialize scene
     scene = new THREE.Scene();
     renderer = new THREE.WebGLRenderer({alpha:true, antialias:true});
-
-    // Collidable objects to prevent camera from traversing objects
-    var collidableObjects = [];
-
-    // Initialize renderer
-    container = document.getElementById('container');
-    container.style.height = container_size.height() + 'px';
-    container.style.width = container_size.width() + 'px';
-    renderer.setSize(container_size.width(), container_size.height());
-    // renderer.setSize(container_size.width(), container_size.height());
     renderer.setClearColor(0x87ceeb);
 
     // Initialize pointer camera
-    camera1 = new L3D.PointerCamera(50, container_size.width() / container_size.height(), 0.01, 100000, renderer, container);
+    camera1 = new L3D.PointerCamera(
+        50,
+        container_size.width() / container_size.height(),
+        0.01, 100000, renderer, container
+    );
+
+}
+
+function initCanvases() {
 
     // Initialize previewer
     previewer = new L3D.Previewer(renderer, scene);
     previewer.domElement.style.position ="absolute";
     previewer.domElement.style.cssFloat = 'top-left';
-    previewer.domElement.width = container_size.width();
-    previewer.domElement.height = container_size.height();
 
     // Initialize stats counter
     stats = new Stats();
@@ -111,31 +87,17 @@ function init() {
     stats.domElement.style.cssFloat = "top-left";
 
     // Initialize pointer for pointer lock
-    var pointer = new L3D.MousePointer(camera1);
+    pointer = new L3D.MousePointer(camera1);
-    pointer.domElement.width = container_size.width();
-    pointer.domElement.height = container_size.height();
 
-    //
+    // Init start canvas
-    var startCanvas = new L3D.StartCanvas(camera1);
+    startCanvas = new L3D.StartCanvas(camera1);
-    startCanvas.domElement.width = container_size.width();
-    startCanvas.domElement.height = container_size.height();
 
-    // Add elements to page
+}
-    container.appendChild( stats.domElement );
-    container.appendChild(Coin.domElement);
-    container.appendChild(startCanvas.domElement);
-    container.appendChild(pointer.domElement);
-    container.appendChild(previewer.domElement);
-    container.appendChild(renderer.domElement);
 
-    startCanvas.render();
+function initModels() {
 
+    // Init recommendations
     recommendations = initMainScene(camera1, scene, coins, clickableObjects);
-    // recommendations = L3D.initPeach(camera1, scene, coins, clickableObjects);
-    // recommendations = L3D.initBobomb(camera1, scene, coins, clickableObjects);
-    // recommendations = L3D.initWhomp(camera1, scene, , coins, clickableObjects);
-    // recommendations = L3D.initMountain(camera1, scene, coins, clickableObjects);
-    // recommendations = L3D.initSponza(camera1, scene, coins, clickableObjects);
 
     // init clickable objects
     var i;
@@ -145,101 +107,33 @@ function init() {
     for (i =0; i < recommendations.length; i++)
         clickableObjects.push(recommendations[i]);
 
-    // Add listeners
-    initListeners();
-
-    // Set interval on animate
-    setInterval(animate, 20);
 }
 
 function initListeners() {
-    window.addEventListener('resize', onWindowResize, false);
 
-    // Escape key to exit fullscreen mode
+    // Add listeners
-    document.addEventListener('keydown', function(event) { if (event.keyCode == 27) { stopFullscreen();} }, false);
+    window.addEventListener('resize', onWindowResize, false);
 
     // HTML Bootstrap buttons
     buttonManager = new ButtonManager(camera1, recommendations, previewer);
 
     // Object clicker for hover and clicking recommendations
-    objectClicker = new L3D.ObjectClicker(renderer, camera1, clickableObjects,
+    objectClicker = new L3D.ObjectClicker(
-        function onHover(obj,x,y) {
+        renderer,
-
+        camera1,
-            // Check if the object is clickable
+        clickableObjects,
-            var ok = obj instanceof Coin || obj instanceof L3D.BaseRecommendation;
+        objectClickerOnHover(camera1, previewer, recommendations, container), // Create onHover function
-
+        objectClickerOnClick(camera1, buttonManager, recommendations, coins), // Create onClick function
-            // Little graphic stuff so the user knows that it's clickable
-            container.style.cursor = ok ? "pointer" : "auto";
-            if (camera1.pointerLocked)
-                camera1.mousePointer.render(ok ? L3D.MousePointer.RED : L3D.MousePointer.BLACK);
-
-            // Set previewer for preview
-            previewer.setCamera(obj instanceof L3D.BaseRecommendation ? obj.camera : null)
-            previewer.setPosition(x,y);
-
-            // Manage the hover camera event
-            if (hoveredCamera !== obj) {
-
-                var event = new L3D.BD.Event.Hovered();
-
-                if (obj instanceof L3D.BaseRecommendation) {
-                    // The newly hovered object is different and is a recommendation
-
-                    event.arrow_id = recommendations.indexOf(obj);
-                    event.start = true;
-                    event.send();
-
-                    hoveredCamera = obj
-
-                } else if (hoveredCamera instanceof L3D.BaseRecommendation) {
-                    // The newly hovered object is not a recommendation,
-                    // but the previous one is : we must log
-
-                    // Unhovered
-                    event.arrow_id = 0;
-                    event.start = false;
-                    event.send();
-
-                    hoveredCamera = null;
-
-                }
-
-            }
-
-        },
-
-        function onClick(obj) {
-
-            var event;
-
-            // Do stuff for click
-            if (obj instanceof Coin) {
-
-                obj.get();
-
-                // Send event to DB
-                event = new L3D.BD.Event.CoinClicked();
-                event.coin_id = coins.indexOf(obj);
-                event.send();
-
-            } else if (obj instanceof L3D.BaseRecommendation) {
-                camera1.moveHermite(obj);
-
-                // Send event to DB
-                event = new L3D.BD.Event.ArrowClicked();
-                event.arrow_id = recommendations.indexOf(obj);
-                event.send();
-            }
-
-            // Update the button manager
-            buttonManager.updateElements();
-
-        },
         container
     );
+
 }
 
 function render() {
+
+    // Stats for render
+    stats.begin();
+
     objectClicker.update();
 
     // Update recommendations (set raycastable if shown)
@@ -285,82 +179,25 @@ function render() {
 
     // Render preview
     previewer.render(container_size.width(), container_size.height());
-}
 
-function animate() {
+    // Finish stats
-    // Render each frame
-    // requestAnimationFrame(animate);
-
-    // stats count the number of frames per second
-    stats.begin();
-    render();
     stats.end();
+
 }
 
 function onWindowResize() {
 
-    container.style.width = container_size.width() + "px";
+    resizeElements(renderer, container, previewer, Coin, pointer, startCanvas);
-    container.style.height = container_size.height() + "px";
 
-    previewer.domElement.width = container_size.width();
+    recommendations.forEach(function(reco) {
-    previewer.domElement.height = container_size.height();
+        resetCameraAspect(reco.camera, container_size.width(), container_size.height());
+    });
 
-    renderer.setSize(container_size.width(), container_size.height());
-    recommendations.forEach(function(reco) {reco.camera.aspect = container_size.width() / container_size.height();});
-    recommendations.forEach(function(reco) {reco.camera.updateProjectionMatrix();});
     render();
-}
 
-function hide(object) {
-    object.traverse(function(object) {object.visible = false;});
-}
-
-function show(object) {
-    object.traverse(function(object) {object.visible = true;});
 }
 
 // onWindowResize will be the only global function
 return onWindowResize;
 
 })();
-
-function fullscreen() {
-    var container = document.getElementById('container');
-    isFullscreen = true;
-
-    if (!beenFullscreen) {
-        beenFullscreen = true;
-        alert('To quit fullscren mode, type ESC key');
-    }
-
-    container.style.position = "absolute";
-    container.style.cssFloat = "top-left";
-    container.style.top = "50px";
-    container.style.bottom = "0px";
-    container.style.left = "0px";
-    container.style.right = "0px";
-    container.style.width="";
-    container.style.height="";
-    container.style.overflow = "hidden";
-
-    onWindowResize();
-}
-
-function stopFullscreen() {
-    isFullscreen = false;
-
-    var container = document.getElementById('container');
-
-    container.style.position = "";
-    container.style.cssFloat = "";
-    container.style.top = "";
-    container.style.bottom = "";
-    container.style.left = "";
-    container.style.right = "";
-    container.style.width = container_size.width() + "px";
-    container.style.height = container_size.height() + "px";
-
-    onWindowResize();
-}
-
-

js/l3d/apps/prototype/replay/main.js

@@ -1,65 +1,40 @@
-var isFullscreen = false;
-var beenFullscreen = false;
-
-var main_section = document.getElementById('main-section');
-// var container_size = {
-//     width: function() { if (!isFullscreen) return main_section.clientWidth; else return screen.width;},
-//     height: function() {
-//         if (!isFullscreen)
-//             return main_section.clientHeight
-//                 - document.getElementById('nav').offsetHeight
-//                 - document.getElementById('main-div').offsetHeight;
-//         else
-//             return screen.height;
-//     }
-// };
-
-var container_size = {
-    width: function() { return 1134; },
-    height: function() { return 768; }
-};
-
 var onWindowResize = (function() {
 
 // Disable scrolling
 window.onscroll = function () { window.scrollTo(0, 0); };
 
-var mesh_number = 25;
+window.onload = main;
-var renderer, scene, controls, cube, container, plane, mouse= {x:0, y:0};
+
-var bigmesh;
+var renderer, scene, container;
-var raycaster;
+var recommendations;
-var objects = [];
-var cameras, cameraSelecter;
-var spheres = new Array(mesh_number);
-var visible = 0;
 var stats;
 var camera1;
-
-var loader;
 var coins = [];
 var previousTime;
 
 
-init();
+function main() {
-animate();
+
+    container = document.getElementById('container');
+
+    initThreeElements();
+    init();
+
+    onWindowResize();
+
+    setInterval(render, 20);
+
+}
+
+function initThreeElements() {
 
-function init() {
-    // Initialize scene
     scene = new THREE.Scene();
     renderer = new THREE.WebGLRenderer({alpha:true, antialias: true});
-
-    // Collidable objects to prevent camera from traversing objects
-    var collidableObjects = [];
-
-    // Initialize renderer
-    container = document.getElementById('container');
-    container.style.height = container_size.height() + 'px';
-    container.style.width = container_size.width() + 'px';
-    renderer.setSize(container_size.width(), container_size.height());
-    // renderer.setSize(container_size.width(), container_size.height());
-    renderer.shadowMapEnabled = true;
     renderer.setClearColor(0x87ceeb);
 
+}
+
+function init() {
 
     // Initialize stats counter
     stats = new Stats();
@@ -72,113 +47,23 @@ function init() {
     container.appendChild( stats.domElement );
     container.appendChild(renderer.domElement);
 
-    // Initialize pointer camera
+    // Initialize replay camera
     camera1 = new L3D.ReplayCamera(50, container_size.width() / container_size.height(), 0.01, 100000, coins);
-    cameras = initMainScene(camera1, scene, coins);
+    recommendations = initMainScene(camera1, scene, coins);
-    camera1.cameras = cameras;
 
     // Add listeners
     initListeners();
 
-    setInterval(animate, 20);
+
 }
 
 function initListeners() {
     window.addEventListener('resize', onWindowResize, false);
-
-    // Transmit click event to camera selecter
-    // container.addEventListener('mousedown', function(event) {
-    //     if (event.which == 1)
-    //         cameraSelecter.click(event);
-    //     }, false
-    // );
-
-    // Update camera selecter when mouse moved
-    // container.addEventListener('mousemove', function(event) {
-    //         cameraSelecter.update(event);
-    //     }, false
-    // );
-
-    // Escape key to exit fullscreen mode
-    // document.addEventListener('keydown', function(event) { if (event.keyCode == 27) { stopFullscreen();} }, false);
-
-    // HTML Bootstrap buttons
-    // buttonManager = new ButtonManager(cameras);
-
-    // Camera selecter for hover and clicking recommendations
-    // cameraSelecter = new CameraSelecter(renderer, scene, cameras, buttonManager);
-}
-
-function fullscreen() {
-    isFullscreen = true;
-
-    if (!beenFullscreen) {
-        beenFullscreen = true;
-        alert('To quit fullscren mode, type ESC key');
-    }
-
-    container.style.position = "absolute";
-    container.style.cssFloat = "top-left";
-    container.style.top = "50px";
-    container.style.bottom = "0px";
-    container.style.left = "0px";
-    container.style.right = "0px";
-    container.style.width="";
-    container.style.height="";
-    container.style.overflow = "hidden";
-
-    // canvas.style.position = "absolute";
-    // canvas.style.cssFloat = "top-left";
-    // canvas.style.top = "0px";
-    // canvas.style.bottom = "0px";
-    // canvas.style.left = "0px";
-    // canvas.style.right = "0px";
-    // canvas.width=window.innerWidth;
-    // canvas.height=window.innerHeight;
-    // canvas.style.overflow = "hidden";
-
-    onWindowResize();
-}
-
-function stopFullscreen() {
-    isFullscreen = false;
-
-    container.style.position = "";
-    container.style.cssFloat = "";
-    container.style.top = "";
-    container.style.bottom = "";
-    container.style.left = "";
-    container.style.right = "";
-    container.style.width = container_size.width() + "px";
-    container.style.height = container_size.height() + "px";
-
-    // canvas.style.position = "";
-    // canvas.style.cssFloat = "";
-    // canvas.style.top = "";
-    // canvas.style.bottom = "";
-    // canvas.style.left = "";
-    // canvas.style.right = "";
-    // canvas.width = container_size.width();
-    // canvas.height = container_size.height();
-    // canvas.style.overflow = "";
-
-    onWindowResize();
 }
 
 function render() {
-    // cameraSelecter.update();
 
-    // Update recommendations (set raycastable if shown)
+    stats.begin();
-    // var transform = buttonManager.showArrows ? show : hide;
-    // cameras.map(function(camera) {
-    //     if (camera instanceof RecommendedCamera) {
-    //         transform(camera);
-
-    //         camera.traverse(function(elt) {
-    //             elt.raycastable = buttonManager.showArrows;
-    //         });
-    //     }
-    // });
 
     // Update coins
     coins.forEach(function(coin) { coin.update(); });
@@ -189,50 +74,26 @@ function render() {
     previousTime = Date.now();
 
     // Update the recommendations
-    cameras.map(function(camera) {camera.update(camera1);});
+    recommendations.map(function(camera) {camera.update(camera1);});
-
 
     // Set current position of camera
     camera1.look();
 
-    var left = 0, bottom = 0, width = container_size.width(), height = container_size.height();
-    renderer.setScissor(left, bottom, width, height);
-    renderer.enableScissorTest(true);
-    renderer.setViewport(left, bottom, width, height);
     renderer.render(scene, camera1);
 
-    // Hide arrows in recommendation
-    // cameras.map(function(camera) { if (camera instanceof RecommendedCamera) hide(camera); });
-}
-
-function animate() {
-    // Render each frame
-    // requestAnimationFrame(animate);
-
-    // stats count the number of frames per second
-    stats.begin();
-    render();
     stats.end();
+
 }
 
 function onWindowResize() {
 
-    container.style.width = container_size.width() + "px";
+    resizeElements(renderer, container, Coin);
-    container.style.height = container_size.height() + "px";
+
+    recommendations.forEach(function(reco) {resetCameraAspect(reco.camera);});
 
-    renderer.setSize(container_size.width(), container_size.height());
-    cameras.forEach(function(camera) {camera.camera.aspect = container_size.width() / container_size.height();});
-    cameras.forEach(function(camera) {camera.camera.updateProjectionMatrix();});
     render();
 }
 
-function hide(object) {
-    object.traverse(function(object) {object.visible = false;});
-}
-
-function show(object) {
-    object.traverse(function(object) {object.visible = true;});
-}
 
 return onWindowResize;