Merge pull request #6798 from ericrius1/menuTweaks

separating out marketplace icon from edit toolbar and making directory icon from directory.js movable and persistent

examples/defaultScripts.js

@@ -11,6 +11,7 @@
 Script.load("away.js");
 Script.load("progress.js");
 Script.load("edit.js");
+Script.load("marketplace.js");
 Script.load("selectAudioDevice.js");
 Script.load("inspect.js");
 Script.load("notifications.js");

examples/directory.js

@@ -9,89 +9,118 @@
 //  See the accompanying file LICENSE or http://www.apache.org/licenses/LICENSE-2.0.html
 //
 
-Script.include("libraries/globals.js");
+Script.include([
+    "libraries/toolBars.js",
+]);
 
-var directory = (function () {
+HIFI_PUBLIC_BUCKET = "http://s3.amazonaws.com/hifi-public/";
+var toolIconUrl = HIFI_PUBLIC_BUCKET + "images/tools/";
 
-    var DIRECTORY_URL = "https://metaverse.highfidelity.com/directory",
-        directoryWindow,
-        DIRECTORY_BUTTON_URL = HIFI_PUBLIC_BUCKET + "images/tools/directory.svg",
-        BUTTON_WIDTH = 50,
-        BUTTON_HEIGHT = 50,
-        BUTTON_ALPHA = 0.9,
-        BUTTON_MARGIN = 8,
-        directoryButton,
-        EDIT_TOOLBAR_BUTTONS = 10,  // Number of buttons in edit.js toolbar
-        viewport;
+var DIRECTORY_WINDOW_URL = "https://metaverse.highfidelity.com/directory";
+var directoryWindow = new OverlayWebWindow({
+    title: 'directory',
+    source: "about:blank",
+    width: 900,
+    height: 700,
+    visible: false
+});
 
-    function updateButtonPosition() {
-        Overlays.editOverlay(directoryButton, {
-            x: viewport.x - BUTTON_WIDTH - BUTTON_MARGIN,
-            y: (viewport.y - (EDIT_TOOLBAR_BUTTONS + 1) * (BUTTON_HEIGHT + BUTTON_MARGIN) - BUTTON_MARGIN) / 2 - 1
+var toolHeight = 50;
+var toolWidth = 50;
+
+
+function showDirectory() {
+    directoryWindow.setURL(DIRECTORY_WINDOW_URL);
+    directoryWindow.setVisible(true);
+}
+
+function hideDirectory() {
+    directoryWindow.setVisible(false);
+    directoryWindow.setURL("about:blank");
+}
+
+function toggleDirectory() {
+    if (directoryWindow.visible) {
+        hideDirectory();
+    } else {
+        showDirectory();
+    }
+}
+
+var toolBar = (function() {
+    var that = {},
+        toolBar,
+        browseDirectoryButton;
+
+    function initialize() {
+        ToolBar.SPACING = 16;
+        toolBar = new ToolBar(0, 0, ToolBar.VERTICAL, "highfidelity.directory.toolbar", function(windowDimensions, toolbar) {
+            return {
+                x: windowDimensions.x - 8 - toolbar.width,
+                y: 50
+            };
         });
+        browseDirectoryButton = toolBar.addTool({
+            imageURL: toolIconUrl + "directory.svg",
+            width: toolWidth,
+            height: toolHeight,
+            alpha: 0.9,
+            visible: true,
+        });
+
+        toolBar.showTool(browseDirectoryButton, true);
     }
 
-    function onMousePressEvent(event) {
-        var clickedOverlay;
+    var browseDirectoryButtonDown = false;
+    that.mousePressEvent = function(event) {
+        var clickedOverlay,
+            url,
+            file;
 
-        clickedOverlay = Overlays.getOverlayAtPoint({ x: event.x, y: event.y });
-
-        if (clickedOverlay === directoryButton) {
-            if (directoryWindow.url !== DIRECTORY_URL) {
-                directoryWindow.setURL(DIRECTORY_URL);
-            }
-            directoryWindow.setVisible(true);
-            directoryWindow.raise();
+        if (!event.isLeftButton) {
+            // if another mouse button than left is pressed ignore it
+            return false;
         }
-    }
 
-    function onDomainChanged() {
-        directoryWindow.setVisible(false);
-    }
+        clickedOverlay = Overlays.getOverlayAtPoint({
+            x: event.x,
+            y: event.y
+        });
 
-    function onScriptUpdate() {
-        var oldViewport = viewport;
 
-        viewport = Controller.getViewportDimensions();
 
-        if (viewport.x !== oldViewport.x || viewport.y !== oldViewport.y) {
-            updateButtonPosition();
+        if (browseDirectoryButton === toolBar.clicked(clickedOverlay)) {
+            toggleDirectory();
+            return true;
         }
+
+        return false;
+    };
+
+    that.mouseReleaseEvent = function(event) {
+        var handled = false;
+
+
+        if (browseDirectoryButtonDown) {
+            var clickedOverlay = Overlays.getOverlayAtPoint({
+                x: event.x,
+                y: event.y
+            });
+        }
+
+        newModelButtonDown = false;
+        browseDirectoryButtonDown = false;
+
+        return handled;
     }
 
-    function setUp() {
-        viewport = Controller.getViewportDimensions();
+    that.cleanup = function() {
+        toolBar.cleanup();
+    };
 
-        directoryWindow = new OverlayWebWindow({
-            title: 'Directory', 
-            source: DIRECTORY_URL, 
-            width: 900, 
-            height: 700,
-            visible: false      
-        });
+    initialize();
+    return that;
+}());
 
-        directoryButton = Overlays.addOverlay("image", {
-            imageURL: DIRECTORY_BUTTON_URL,
-            width: BUTTON_WIDTH,
-            height: BUTTON_HEIGHT,
-            x: viewport.x - BUTTON_WIDTH - BUTTON_MARGIN,
-            y: BUTTON_MARGIN,
-            alpha: BUTTON_ALPHA,
-            visible: true
-        });
-
-        updateButtonPosition();
-
-        Controller.mousePressEvent.connect(onMousePressEvent);
-        Window.domainChanged.connect(onDomainChanged);
-
-        Script.update.connect(onScriptUpdate);
-    }
-
-    function tearDown() {
-        Overlays.deleteOverlay(directoryButton);
-    }
-
-    setUp();
-    Script.scriptEnding.connect(tearDown);
-}());
+Controller.mousePressEvent.connect(toolBar.mousePressEvent)
+Script.scriptEnding.connect(toolBar.cleanup);

examples/edit.js

@@ -183,8 +183,7 @@ var toolBar = (function() {
         newTextButton,
         newWebButton,
         newZoneButton,
-        newPolyVoxButton,
-        browseMarketplaceButton;
+        newPolyVoxButton;
 
     function initialize() {
         toolBar = new ToolBar(0, 0, ToolBar.VERTICAL, "highfidelity.edit.toolbar", function(windowDimensions, toolbar) {
@@ -194,13 +193,7 @@ var toolBar = (function() {
             };
         });
 
-        browseMarketplaceButton = toolBar.addTool({
-            imageURL: toolIconUrl + "marketplace.svg",
-            width: toolWidth,
-            height: toolHeight,
-            alpha: 0.9,
-            visible: true,
-        });
+  
 
         activeButton = toolBar.addTool({
             imageURL: toolIconUrl + "edit-status.svg",
@@ -415,7 +408,6 @@ var toolBar = (function() {
     }
 
     var newModelButtonDown = false;
-    var browseMarketplaceButtonDown = false;
     that.mousePressEvent = function(event) {
         var clickedOverlay,
             url,
@@ -443,11 +435,7 @@ var toolBar = (function() {
             return true;
         }
         
-        if (browseMarketplaceButton === toolBar.clicked(clickedOverlay)) {
-            toggleMarketplace();
-            return true;
-        }
-
+     
         if (newCubeButton === toolBar.clicked(clickedOverlay)) {
             createNewEntity({
                 type: "Box",
@@ -652,22 +640,10 @@ var toolBar = (function() {
                 }
                 handled = true;
             }
-        } else if (browseMarketplaceButtonDown) {
-            var clickedOverlay = Overlays.getOverlayAtPoint({
-                x: event.x,
-                y: event.y
-            });
-            if (browseMarketplaceButton === toolBar.clicked(clickedOverlay)) {
-                url = Window.s3Browse(".*(fbx|FBX|obj|OBJ)");
-                if (url !== null && url !== "") {
-                    addModel(url);
-                }
-                handled = true;
-            }
         }
 
         newModelButtonDown = false;
-        browseMarketplaceButtonDown = false;
+     
 
         return handled;
     }

examples/marketplace.js

@@ -0,0 +1,131 @@
+//
+//  marketplace.js
+//  examples
+//
+//  Created by Eric Levin on 8 Jan 2016
+//  Copyright 2016 High Fidelity, Inc.
+//
+//  Distributed under the Apache License, Version 2.0.
+//  See the accompanying file LICENSE or http://www.apache.org/licenses/LICENSE-2.0.html
+//
+
+Script.include([
+    "libraries/toolBars.js",
+]);
+
+HIFI_PUBLIC_BUCKET = "http://s3.amazonaws.com/hifi-public/";
+var toolIconUrl = HIFI_PUBLIC_BUCKET + "images/tools/";
+
+var MARKETPLACE_URL = "https://metaverse.highfidelity.com/marketplace";
+var marketplaceWindow = new OverlayWebWindow({
+    title: 'Marketplace',
+    source: "about:blank",
+    width: 900,
+    height: 700,
+    visible: false
+});
+
+var toolHeight = 50;
+var toolWidth = 50;
+
+
+function showMarketplace(marketplaceID) {
+    var url = MARKETPLACE_URL;
+    if (marketplaceID) {
+        url = url + "/items/" + marketplaceID;
+    }
+    print("setting marketplace URL to " + url);
+    marketplaceWindow.setURL(url);
+    marketplaceWindow.setVisible(true);
+}
+
+function hideMarketplace() {
+    marketplaceWindow.setVisible(false);
+    marketplaceWindow.setURL("about:blank");
+}
+
+function toggleMarketplace() {
+    if (marketplaceWindow.visible) {
+        hideMarketplace();
+    } else {
+        showMarketplace();
+    }
+}
+
+var toolBar = (function() {
+    var that = {},
+        toolBar,
+        browseMarketplaceButton;
+
+    function initialize() {
+        ToolBar.SPACING = 16;
+        toolBar = new ToolBar(0, 0, ToolBar.VERTICAL, "highfidelity.marketplace.toolbar", function(windowDimensions, toolbar) {
+            return {
+                x: windowDimensions.x - 8 - toolbar.width,
+                y: 135
+            };
+        });
+        browseMarketplaceButton = toolBar.addTool({
+            imageURL: toolIconUrl + "marketplace.svg",
+            width: toolWidth,
+            height: toolHeight,
+            alpha: 0.9,
+            visible: true,
+        });
+
+        toolBar.showTool(browseMarketplaceButton, true);
+    }
+
+    var browseMarketplaceButtonDown = false;
+    that.mousePressEvent = function(event) {
+        var clickedOverlay,
+            url,
+            file;
+
+        if (!event.isLeftButton) {
+            // if another mouse button than left is pressed ignore it
+            return false;
+        }
+
+        clickedOverlay = Overlays.getOverlayAtPoint({
+            x: event.x,
+            y: event.y
+        });
+
+
+
+        if (browseMarketplaceButton === toolBar.clicked(clickedOverlay)) {
+            toggleMarketplace();
+            return true;
+        }
+
+        return false;
+    };
+
+    that.mouseReleaseEvent = function(event) {
+        var handled = false;
+
+
+        if (browseMarketplaceButtonDown) {
+            var clickedOverlay = Overlays.getOverlayAtPoint({
+                x: event.x,
+                y: event.y
+            });
+        }
+
+        newModelButtonDown = false;
+        browseMarketplaceButtonDown = false;
+
+        return handled;
+    }
+
+    that.cleanup = function() {
+        toolBar.cleanup();
+    };
+
+    initialize();
+    return that;
+}());
+
+Controller.mousePressEvent.connect(toolBar.mousePressEvent)
+Script.scriptEnding.connect(toolBar.cleanup);