From be0ef820ffd26c3de5c7a3c951a07405a1ce5132 Mon Sep 17 00:00:00 2001 From: David Rowe Date: Thu, 8 Dec 2016 10:58:37 +1300 Subject: [PATCH] Add "back" button to marketplaces footer --- scripts/system/html/css/marketplaces.css | 16 +- scripts/system/html/js/marketplaces.js | 26 --- .../system/html/js/marketplacesDirectory.js | 21 --- scripts/system/html/js/marketplacesHiFi.js | 51 ------ ...etplacesClara.js => marketplacesInject.js} | 161 ++++++++++++------ scripts/system/html/marketplaces.html | 7 +- scripts/system/marketplaces/marketplaces.js | 33 +--- 7 files changed, 130 insertions(+), 185 deletions(-) delete mode 100644 scripts/system/html/js/marketplaces.js delete mode 100644 scripts/system/html/js/marketplacesDirectory.js delete mode 100644 scripts/system/html/js/marketplacesHiFi.js rename scripts/system/html/js/{marketplacesClara.js => marketplacesInject.js} (61%) diff --git a/scripts/system/html/css/marketplaces.css b/scripts/system/html/css/marketplaces.css index 7660584730..bb57bea3bc 100644 --- a/scripts/system/html/css/marketplaces.css +++ b/scripts/system/html/css/marketplaces.css @@ -110,8 +110,8 @@ body { position: absolute; right: 20px; margin-top: 12px; - padding-left: 10px; - padding-right: 10px; + padding-left: 15px; + padding-right: 15px; } @media (max-width:768px) { @@ -128,10 +128,10 @@ body { text-align:center; } .tile-divider { - width: 100%; - margin-left: 0%; + width: 100%; + margin-left: 0; + } + .marketplace-tile-image { + margin-bottom: 15px; + } } -.marketplace-tile-image{ - margin-bottom:15px; -} -} \ No newline at end of file diff --git a/scripts/system/html/js/marketplaces.js b/scripts/system/html/js/marketplaces.js deleted file mode 100644 index d4637a4519..0000000000 --- a/scripts/system/html/js/marketplaces.js +++ /dev/null @@ -1,26 +0,0 @@ -// -// marketplaces.js -// -// 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 -// - -function loaded() { - bindExploreButtons(); -} - -function bindExploreButtons() { - $('#claraSignUp').on('click', function () { - EventBridge.emitWebEvent("INJECT_CLARA"); - }); - $('#exploreClaraMarketplace').on('click', function () { - EventBridge.emitWebEvent("INJECT_CLARA"); - window.location = "https://clara.io/library?gameCheck=true&public=true" - }); - $('#exploreHifiMarketplace').on('click', function () { - EventBridge.emitWebEvent("INJECT_HIFI"); - window.location = "http://www.highfidelity.com/marketplace" - }); -} diff --git a/scripts/system/html/js/marketplacesDirectory.js b/scripts/system/html/js/marketplacesDirectory.js deleted file mode 100644 index cffb5c061d..0000000000 --- a/scripts/system/html/js/marketplacesDirectory.js +++ /dev/null @@ -1,21 +0,0 @@ -// -// marketplacesDirectory.js -// -// Created by David Rowe on 12 Nov 2016. -// Copyright 2016 High Fidelity, Inc. -// -// Injected into marketplaces directory page. -// -// Distributed under the Apache License, Version 2.0. -// See the accompanying file LICENSE or http://www.apache.org/licenses/LICENSE-2.0.html -// - -// Only used in WebTablet. - -$(document).ready(function () { - - // Remove e-mail hyperlink. - var letUsKnow = $("#letUsKnow"); - letUsKnow.replaceWith(letUsKnow.html()); - -}); diff --git a/scripts/system/html/js/marketplacesHiFi.js b/scripts/system/html/js/marketplacesHiFi.js deleted file mode 100644 index 3aba2937c4..0000000000 --- a/scripts/system/html/js/marketplacesHiFi.js +++ /dev/null @@ -1,51 +0,0 @@ -// -// marketplacesHiFi.js -// -// Created by David Rowe on 12 Nov 2016. -// Copyright 2016 High Fidelity, Inc. -// -// Injected into High Fidelity marketplace Web page. -// -// Distributed under the Apache License, Version 2.0. -// See the accompanying file LICENSE or http://www.apache.org/licenses/LICENSE-2.0.html -// - -$(document).ready(function () { - - // Supporting styles from marketplaces.css. - // Glyph font family, size, and spacing adjusted because HiFi-Glyphs cannot be used cross-domain. - $("head").append( - '' - ); - - // Supporting styles from edit-style.css. - // Font family, size, and position adjusted because Raleway-Bold cannot be used cross-domain. - $("head").append( - '' - ); - - // Marketplaces footer. - $("body").append( - '
' + - '🛈 Check out other marketplaces.' + - '' + - '
' - ); - - // Marketplace footer action. - $("#all-markets").on("click", function () { - $("#marketplace-content").attr("src", "marketplacesDirectory.html"); - EventBridge.emitWebEvent("RELOAD_DIRECTORY"); - }); - -}); diff --git a/scripts/system/html/js/marketplacesClara.js b/scripts/system/html/js/marketplacesInject.js similarity index 61% rename from scripts/system/html/js/marketplacesClara.js rename to scripts/system/html/js/marketplacesInject.js index 8540b36a70..401185f290 100644 --- a/scripts/system/html/js/marketplacesClara.js +++ b/scripts/system/html/js/marketplacesInject.js @@ -1,25 +1,84 @@ // -// marketplacesClara.js +// marketplacesInject.js // // Created by David Rowe on 12 Nov 2016. // Copyright 2016 High Fidelity, Inc. // -// Injected into Clara.io marketplace Web page. +// Injected into marketplace Web pages. // // Distributed under the Apache License, Version 2.0. // See the accompanying file LICENSE or http://www.apache.org/licenses/LICENSE-2.0.html // (function () { - // Can't use $(document).ready() because jQuery isn't loaded early enough by Clara Web page. - var locationHref = ""; - var checkLocationInterval = undefined; + function injectCommonCode(isDirectoryPage) { - function checkLocation() { + // Supporting styles from marketplaces.css. + // Glyph font family, size, and spacing adjusted because HiFi-Glyphs cannot be used cross-domain. + $("head").append( + '' + ); + + // Supporting styles from edit-style.css. + // Font family, size, and position adjusted because Raleway-Bold cannot be used cross-domain. + $("head").append( + '' + ); + + // Footer. + var isInitialDirectoryPage = location.href.match(/\/scripts\/system\/html\/marketplaces\.html$/); + $("body").append( + '
' + + (isInitialDirectoryPage ? '🛈 Select a marketplace to explore.' : '') + + (!isInitialDirectoryPage ? '' : '') + + (!isDirectoryPage ? '' : '') + + '
' + ); + + // Footer actions. + $("#back-button").on("click", function () { + window.history.back(); + }); + $("#all-markets").on("click", function () { + EventBridge.emitWebEvent("GOTO_DIRECTORY"); + }); + } + + function injectDirectoryCode() { + + // Remove e-mail hyperlink. + var letUsKnow = $("#letUsKnow"); + letUsKnow.replaceWith(letUsKnow.html()); + + // Add button links. + $('#exploreClaraMarketplace').on('click', function () { + window.location = "https://clara.io/library?gameCheck=true&public=true" + }); + $('#exploreHifiMarketplace').on('click', function () { + window.location = "http://www.highfidelity.com/marketplace" + }); + } + + function injectHiFiCode() { + // Nothing to do. + } + + function updateClaraCode(currentLocation) { // Have to manually monitor location for changes because Clara Web page replaced content rather than loading new page. - if (location.href !== locationHref) { + if (location.href !== currentLocation) { // Clara library page. if (location.href.indexOf("clara.io/library") !== -1) { @@ -74,35 +133,13 @@ } } - locationHref = location.href; + currentLocation = location.href; } } - function onLoad() { + function injectClaraCode() { - // Supporting styles from marketplaces.css. - // Glyph font family, size, and spacing adjusted because HiFi-Glyphs cannot be used cross-domain. - $("head").append( - '' - ); - - // Supporting styles from edit-style.css. - // Font family, size, and position adjusted because Raleway-Bold cannot be used cross-domain. - $("head").append( - '' - ); - - // Make space for marketplaces footer. + // Make space for marketplaces footer in Clara pages. $("head").append( '' ); - // Marketplaces footer. - $("body").append( - '
' + - '🛈 Check out other marketplaces.' + - '' + - '
' - ); + // Update code injected per page displayed. + var currentLocation = ""; + var checkLocationInterval = undefined; + updateClaraCode(currentLocation); + checkLocationInterval = setInterval(function () { + updateClaraCode(currentLocation); + }, 1000); - // Marketplace footer action. - $("#all-markets").on("click", function () { - $("#marketplace-content").attr("src", "marketplacesDirectory.html"); - EventBridge.emitWebEvent("RELOAD_DIRECTORY"); + window.addEventListener("unload", function () { + clearInterval(checkLocationInterval); + checkLocationInterval = undefined; + currentLocation = ""; }); - - checkLocation(); - checkLocationInterval = setInterval(checkLocation, 1000); } - function onUnload() { - clearInterval(checkLocationInterval); - checkLocationInterval = undefined; - locationHref = ""; + function onLoad() { + var DIRECTORY = 0; + var HIFI = 1; + var CLARA = 2; + var pageType = DIRECTORY; + + if (location.href.indexOf("highfidelity.com/") !== -1) { pageType = HIFI; } + if (location.href.indexOf("clara.io/") !== -1) { pageType = CLARA; } + + injectCommonCode(pageType === DIRECTORY); + switch (pageType) { + case DIRECTORY: + injectDirectoryCode(); + break; + case HIFI: + injectHiFiCode(); + break; + case CLARA: + injectClaraCode(); + break; + } } - window.addEventListener("load", onLoad); - window.addEventListener("unload", onUnload); + // Load / unload. + try { + // This appears more responsive to the user but $ is not necessarily loaded in time for each marketplace. + $(document).ready(function () { onLoad(); }); + } + catch (e) { + window.addEventListener("load", onLoad); + } }()); diff --git a/scripts/system/html/marketplaces.html b/scripts/system/html/marketplaces.html index a90532efad..e2e15d83cc 100644 --- a/scripts/system/html/marketplaces.html +++ b/scripts/system/html/marketplaces.html @@ -13,9 +13,8 @@ - - +

Marketplaces

@@ -49,9 +48,11 @@
+ + + --> \ No newline at end of file diff --git a/scripts/system/marketplaces/marketplaces.js b/scripts/system/marketplaces/marketplaces.js index 89b28dfa2f..3953ed1508 100644 --- a/scripts/system/marketplaces/marketplaces.js +++ b/scripts/system/marketplaces/marketplaces.js @@ -16,9 +16,8 @@ Script.include("../libraries/WebTablet.js"); var toolIconUrl = Script.resolvePath("../assets/images/tools/"); var MARKETPLACES_URL = Script.resolvePath("../html/marketplaces.html"); -var MARKETPLACES_DIRECTORY_SCRIPT_URL = Script.resolvePath("../html/js/marketplacesDirectory.js"); -var MARKETPLACES_HFIF_SCRIPT_URL = Script.resolvePath("../html/js/marketplacesHiFi.js"); -var MARKETPLACES_CLARA_SCRIPT_URL = Script.resolvePath("../html/js/marketplacesClara.js"); +var MARKETPLACES_URL_AMENDED = MARKETPLACES_URL + "?"; // Append "?" to signal injected script that it's not the initial page. +var MARKETPLACES_INJECT_SCRIPT_URL = Script.resolvePath("../html/js/marketplacesInject.js"); var marketplaceWindow = new OverlayWebWindow({ title: "Marketplace", @@ -27,17 +26,10 @@ var marketplaceWindow = new OverlayWebWindow({ height: 700, visible: false }); -marketplaceWindow.setScriptURL(""); +marketplaceWindow.setScriptURL(MARKETPLACES_INJECT_SCRIPT_URL); marketplaceWindow.webEventReceived.connect(function (data) { - if (data === "INJECT_HIFI") { - marketplaceWindow.setScriptURL(MARKETPLACES_HFIF_SCRIPT_URL); - } - if (data === "INJECT_CLARA") { - marketplaceWindow.setScriptURL(MARKETPLACES_CLARA_SCRIPT_URL); - } - if (data === "RELOAD_DIRECTORY") { - marketplaceWindow.setScriptURL(""); - marketplaceWindow.setURL(MARKETPLACES_URL); + if (data === "GOTO_DIRECTORY") { + marketplaceWindow.setURL(MARKETPLACES_URL_AMENDED); } }); @@ -63,18 +55,11 @@ function showMarketplace(marketplaceID) { updateButtonState(true); marketplaceWebTablet = new WebTablet(MARKETPLACES_URL, null, null, true); Settings.setValue(persistenceKey, marketplaceWebTablet.pickle()); - marketplaceWebTablet.setScriptURL(MARKETPLACES_DIRECTORY_SCRIPT_URL); + marketplaceWebTablet.setScriptURL(MARKETPLACES_INJECT_SCRIPT_URL); marketplaceWebTablet.getOverlayObject().webEventReceived.connect(function (data) { - if (data === "INJECT_HIFI") { - marketplaceWebTablet.setScriptURL(MARKETPLACES_HFIF_SCRIPT_URL); - } - if (data === "INJECT_CLARA") { - marketplaceWebTablet.setScriptURL(MARKETPLACES_CLARA_SCRIPT_URL); - } - if (data === "RELOAD_DIRECTORY") { - marketplaceWebTablet.setScriptURL(MARKETPLACES_DIRECTORY_SCRIPT_URL); - marketplaceWebTablet.setURL(""); // Force reload of URL. - marketplaceWebTablet.setURL(MARKETPLACES_URL); + if (data === "GOTO_DIRECTORY") { + marketplaceWebTablet.setURL(""); // Force reload of URL to work around WetTablet bug. + marketplaceWebTablet.setURL(MARKETPLACES_URL_AMENDED); } }); } else {