mirror of
https://github.com/HifiExperiments/overte.git
synced 2025-08-05 21:40:38 +02:00
Add "back" button to marketplaces footer
This commit is contained in:
David Rowe
Seth Alves
parent
eef8c70f10
commit
be0ef820ff
7 changed files with 130 additions and 185 deletions
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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"
|
||||
});
|
||||
}
|
||||
|
|
@ -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());
|
||||
|
||||
});
|
||||
|
|
@ -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(
|
||||
'<style>' +
|
||||
'#marketplace-navigation { font-family: Arial, Helvetica, sans-serif; width: 100%; height: 50px; background: #00b4ef; position: fixed; bottom: 0; }' +
|
||||
'#marketplace-navigation .glyph { margin-left: 20px; margin-right: 3px; font-family: sans-serif; color: #fff; font-size: 24px; line-height: 50px; }' +
|
||||
'#marketplace-navigation .text { color: #fff; font-size: 18px; line-height: 50px; vertical-align: top; position: relative; top: 1px; }' +
|
||||
'#marketplace-navigation input { position: absolute; right: 20px; margin-top: 12px; padding-left: 10px; padding-right: 10px; }' +
|
||||
'</style>'
|
||||
);
|
||||
|
||||
// Supporting styles from edit-style.css.
|
||||
// Font family, size, and position adjusted because Raleway-Bold cannot be used cross-domain.
|
||||
$("head").append(
|
||||
'<style>' +
|
||||
'input[type=button] { font-family: Arial, Helvetica, sans-serif; font-weight: bold; font-size: 12px; text-transform: uppercase; vertical-align: center; height: 28px; min-width: 100px; padding: 0 15px; border-radius: 5px; border: none; color: #fff; background-color: #000; background: linear-gradient(#343434 20%, #000 100%); cursor: pointer; }' +
|
||||
'input[type=button].white { color: #121212; background-color: #afafaf; background: linear-gradient(#fff 20%, #afafaf 100%); }' +
|
||||
'input[type=button].white:enabled:hover { background: linear-gradient(#fff, #fff); border: none; }' +
|
||||
'input[type=button].white:active { background: linear-gradient(#afafaf, #afafaf); }' +
|
||||
'</style>'
|
||||
);
|
||||
|
||||
// Marketplaces footer.
|
||||
$("body").append(
|
||||
'<div id="marketplace-navigation">' +
|
||||
'<span class="glyph">🛈</span> <span class="text">Check out other marketplaces.</span>' +
|
||||
'<input id="all-markets" type="button" class="white" value="See All Markets" />' +
|
||||
'</div>'
|
||||
);
|
||||
|
||||
// Marketplace footer action.
|
||||
$("#all-markets").on("click", function () {
|
||||
$("#marketplace-content").attr("src", "marketplacesDirectory.html");
|
||||
EventBridge.emitWebEvent("RELOAD_DIRECTORY");
|
||||
});
|
||||
|
||||
});
|
||||
|
|
@ -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(
|
||||
'<style>' +
|
||||
'#marketplace-navigation { font-family: Arial, Helvetica, sans-serif; width: 100%; height: 50px; background: #00b4ef; position: fixed; bottom: 0; }' +
|
||||
'#marketplace-navigation .glyph { margin-left: 20px; margin-right: 3px; font-family: sans-serif; color: #fff; font-size: 24px; line-height: 50px; }' +
|
||||
'#marketplace-navigation .text { color: #fff; font-size: 18px; line-height: 50px; vertical-align: top; position: relative; top: 1px; }' +
|
||||
'#marketplace-navigation input#back-button { position: absolute; left: 20px; margin-top: 12px; padding-left: 0; padding-right: 5px; }' +
|
||||
'#marketplace-navigation input#all-markets { position: absolute; right: 20px; margin-top: 12px; padding-left: 15px; padding-right: 15px; }' +
|
||||
'</style>'
|
||||
);
|
||||
|
||||
// Supporting styles from edit-style.css.
|
||||
// Font family, size, and position adjusted because Raleway-Bold cannot be used cross-domain.
|
||||
$("head").append(
|
||||
'<style>' +
|
||||
'input[type=button] { font-family: Arial, Helvetica, sans-serif; font-weight: bold; font-size: 12px; text-transform: uppercase; vertical-align: center; height: 28px; min-width: 100px; padding: 0 15px; border-radius: 5px; border: none; color: #fff; background-color: #000; background: linear-gradient(#343434 20%, #000 100%); cursor: pointer; }' +
|
||||
'input[type=button].white { color: #121212; background-color: #afafaf; background: linear-gradient(#fff 20%, #afafaf 100%); }' +
|
||||
'input[type=button].white:enabled:hover { background: linear-gradient(#fff, #fff); border: none; }' +
|
||||
'input[type=button].white:active { background: linear-gradient(#afafaf, #afafaf); }' +
|
||||
'</style>'
|
||||
);
|
||||
|
||||
// Footer.
|
||||
var isInitialDirectoryPage = location.href.match(/\/scripts\/system\/html\/marketplaces\.html$/);
|
||||
$("body").append(
|
||||
'<div id="marketplace-navigation">' +
|
||||
(isInitialDirectoryPage ? '<span class="glyph">🛈</span> <span class="text">Select a marketplace to explore.</span>' : '') +
|
||||
(!isInitialDirectoryPage ? '<input id="back-button" type="button" class="white" value="< Back" />' : '') +
|
||||
(!isDirectoryPage ? '<input id="all-markets" type="button" class="white" value="See All Markets" />' : '') +
|
||||
'</div>'
|
||||
);
|
||||
|
||||
// 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(
|
||||
'<style>' +
|
||||
'#marketplace-navigation { font-family: Arial, Helvetica, sans-serif; width: 100%; height: 50px; background: #00b4ef; position: fixed; bottom: 0; }' +
|
||||
'#marketplace-navigation .glyph { margin-left: 20px; margin-right: 3px; font-family: sans-serif; color: #fff; font-size: 24px; line-height: 50px; }' +
|
||||
'#marketplace-navigation .text { color: #fff; font-size: 18px; line-height: 50px; vertical-align: top; position: relative; top: 1px; }' +
|
||||
'#marketplace-navigation input { position: absolute; right: 20px; margin-top: 12px; padding-left: 10px; padding-right: 10px; }' +
|
||||
'</style>'
|
||||
);
|
||||
|
||||
// Supporting styles from edit-style.css.
|
||||
// Font family, size, and position adjusted because Raleway-Bold cannot be used cross-domain.
|
||||
$("head").append(
|
||||
'<style>' +
|
||||
'input[type=button] { font-family: Arial, Helvetica, sans-serif; font-weight: bold; font-size: 12px; text-transform: uppercase; vertical-align: center; height: 28px; min-width: 100px; padding: 0 15px; border-radius: 5px; border: none; color: #fff; background-color: #000; background: linear-gradient(#343434 20%, #000 100%); cursor: pointer; }' +
|
||||
'input[type=button].white { color: #121212; background-color: #afafaf; background: linear-gradient(#fff 20%, #afafaf 100%); }' +
|
||||
'input[type=button].white:enabled:hover { background: linear-gradient(#fff, #fff); border: none; }' +
|
||||
'input[type=button].white:active { background: linear-gradient(#afafaf, #afafaf); }' +
|
||||
'</style>'
|
||||
);
|
||||
|
||||
// Make space for marketplaces footer.
|
||||
// Make space for marketplaces footer in Clara pages.
|
||||
$("head").append(
|
||||
'<style>' +
|
||||
'#app { margin-bottom: 135px; }' +
|
||||
|
|
@ -110,31 +147,51 @@
|
|||
'</style>'
|
||||
);
|
||||
|
||||
// Marketplaces footer.
|
||||
$("body").append(
|
||||
'<div id="marketplace-navigation">' +
|
||||
'<span class="glyph">🛈</span> <span class="text">Check out other marketplaces.</span>' +
|
||||
'<input id="all-markets" type="button" class="white" value="See All Markets" />' +
|
||||
'</div>'
|
||||
);
|
||||
// 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);
|
||||
}
|
||||
|
||||
}());
|
||||
|
|
@ -13,9 +13,8 @@
|
|||
<link rel="stylesheet" type="text/css" href="css/edit-style.css">
|
||||
<link rel="stylesheet" type="text/css" href="css/marketplaces.css">
|
||||
<script src="js/jquery-2.1.4.min.js"></script>
|
||||
<script src="js/marketplaces.js"></script>
|
||||
</head>
|
||||
<body onload='loaded();'>
|
||||
<body>
|
||||
<div class="marketplaces-container">
|
||||
<h2 class="marketplaces-title">Marketplaces</h2>
|
||||
<div class="marketplaces-intro-text">
|
||||
|
|
@ -49,9 +48,11 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- The following code is injected; it is included here to help with CSS styling.
|
||||
<div id="marketplace-navigation">
|
||||
<span class="glyph">🛈</span> <span class="text">Select a marketplace to explore.</span>
|
||||
<!--<input id="all-markets" type="button" class="white" value="See All Markets" />-->
|
||||
<input id="all-markets" type="button" class="white" value="See All Markets" />
|
||||
</div>
|
||||
-->
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -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 {
|
||||
|
|
|
|||
Loading…
Reference in a new issue