mirror/RetroArch
1
0
Fork 0
mirror of https://github.com/libretro/RetroArch synced 2025-04-07 13:23:32 +00:00
Code Issues Packages Projects Releases Wiki Activity

[Emscripten] Add Tooltips to the buttons

Browse Source
This commit is contained in:
Rob Loach 2016-12-03 11:44:26 -05:00
parent 37d129a13d
commit d386f63525
No known key found for this signature in database
GPG Key ID: 627C60834A74A21A
2 changed files with 42 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
pkg/emscripten/libretro/index.html
View File

@ -10,12 +10,12 @@
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css">
<!-- Material Design Bootstrap --> <!-- Material Design Bootstrap -->
<link href="//cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.1.1/css/mdb.min.css" rel="stylesheet"> <link href="//cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.1.1/css/mdb.min.css" rel="stylesheet">
<link href="libretro.css" rel="stylesheet" type="text/css"> <link href="libretro.css" rel="stylesheet" type="text/css">
<link rel="shortcut icon" href="media/icon_dark.ico" /> <link rel="shortcut icon" href="media/icon_dark.ico" />
</head> </head>
<body> <body>
<!--Navbar--> <!--Navbar-->
<nav class="navbar navbar-dark bg-primary"> <nav class="navbar navbar-dark bg-primary">
<div class="container"> <div class="container">
@ -82,14 +82,14 @@
<button class="btn btn-primary disabled" id="btnAdd" onclick="document.getElementById('btnRom').click()" disabled> <button class="btn btn-primary disabled" id="btnAdd" onclick="document.getElementById('btnRom').click()" disabled>
<span class="fa fa-plus" id="icnAdd"></span> Add Content <span class="fa fa-plus" id="icnAdd"></span> Add Content
</button> </button>
<button class="btn btn-primary" id="btnClean" onclick="cleanupStorage();" title="Cleanup"> <button class="btn btn-primary tooltip-enable" id="btnClean" onclick="cleanupStorage();" title="Cleanup storage">
<span class="fa fa-trash-o" id="icnClean"></span> <span class="sr-only">Cleanup</span> <span class="fa fa-trash-o" id="icnClean"></span> <span class="sr-only">Cleanup</span>
</button> </button>
<input class="btn btn-primary disabled" style="display: none" type="file" id="btnRom" name="upload" onclick="document.getElementById('btnAdd').click();" onchange="selectFiles(event.target.files)" multiple /> <input class="btn btn-primary disabled" style="display: none" type="file" id="btnRom" name="upload" onclick="document.getElementById('btnAdd').click();" onchange="selectFiles(event.target.files)" multiple />
<button class="btn btn-primary disabled" id="btnMenu" onclick="keyPress(112);" title="Menu toggle" disabled> <button class="btn btn-primary disabled tooltip-enable" id="btnMenu" onclick="keyPress(112);" title="Menu toggle" disabled>
<span class="fa fa-bars" id="btnMenu"></span> <span class="sr-only">Menu</span> <span class="fa fa-bars" id="btnMenu"></span> <span class="sr-only">Menu</span>
</button> </button>
<button class="btn btn-primary disabled" id="btnFullscreen" onclick="Module.requestFullScreen()" title="Fullscreen" disabled> <button class="btn btn-primary disabled tooltip-enable" id="btnFullscreen" onclick="Module.requestFullScreen()" title="Fullscreen" disabled>
<span class="fa fa-desktop" id="icnAdd"></span> <span class="sr-only">Fullscreen</span> <span class="fa fa-desktop" id="icnAdd"></span> <span class="sr-only">Fullscreen</span>
</button> </button>
</li> </li>
@ -111,12 +111,12 @@
<div class="row"> <div class="row">
<div class="col-sm-12 form-group btn-group text-xs-left p-t-2"> <div class="col-sm-12 form-group btn-group text-xs-left p-t-2">
<div class="btn-group" data-toggle="buttons"> <div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary" id="lblLocal" onclick=switchStorage("browser")> <label class="btn btn-primary tooltip-enable" id="lblLocal" onclick="switchStorage('browser')" title="Store content in your browser's cache. May take up space on disk.">
<input type="radio" name="options" id="btnLocal" autocomplete="off" checked> <input type="radio" name="options" id="btnLocal" autocomplete="off" checked >
<span class="fa fa-globe" id="icnLocal"></span> Browser <span class="fa fa-globe" id="icnLocal"></span> Browser
</input> </input>
</label> </label>
<label class="btn btn-primary" id="lblDrop" onclick=switchStorage("dropbox")> <label class="btn btn-primary tooltip-enable" id="lblDrop" onclick="switchStorage('dropbox')" title="Stores content in a folder under Dropbox storage. Requires a Dropbox account.">
<input type="radio" name="options" id="btnDrop" autocomplete="off"> <input type="radio" name="options" id="btnDrop" autocomplete="off">
<span class="fa fa-dropbox" id="icnDrop"></span> Dropbox <span class="fa fa-dropbox" id="icnDrop"></span> Dropbox
</input> </input>

61
pkg/emscripten/libretro/libretro.js
View File

@ -48,7 +48,7 @@ var showError = function(error) {
function cleanupStorage() function cleanupStorage()
{ {
localStorage.clear(); localStorage.clear();
if (BrowserFS.FileSystem.IndexedDB.isAvailable()) if (BrowserFS.FileSystem.IndexedDB.isAvailable())
{ {
var req = indexedDB.deleteDatabase("RetroArch"); var req = indexedDB.deleteDatabase("RetroArch");
req.onsuccess = function () { req.onsuccess = function () {
@ -61,7 +61,7 @@ function cleanupStorage()
console.log("Couldn't delete database due to the operation being blocked"); console.log("Couldn't delete database due to the operation being blocked");
}; };
} }
document.getElementById("btnClean").disabled = true; document.getElementById("btnClean").disabled = true;
} }
@ -70,12 +70,12 @@ function dropboxInit()
document.getElementById("btnDrop").disabled = true; document.getElementById("btnDrop").disabled = true;
$('#icnDrop').removeClass('fa-dropbox'); $('#icnDrop').removeClass('fa-dropbox');
$('#icnDrop').addClass('fa-spinner fa-spin'); $('#icnDrop').addClass('fa-spinner fa-spin');
client.authDriver(new Dropbox.AuthDriver.Redirect()); client.authDriver(new Dropbox.AuthDriver.Redirect());
client.authenticate({ rememberUser: true }, function(error, client) client.authenticate({ rememberUser: true }, function(error, client)
{ {
if (error) if (error)
{ {
return showError(error); return showError(error);
} }
@ -114,10 +114,10 @@ function idbfsInit()
$('#icnLocal').removeClass('fa-globe'); $('#icnLocal').removeClass('fa-globe');
$('#icnLocal').addClass('fa-spinner fa-spin'); $('#icnLocal').addClass('fa-spinner fa-spin');
var imfs = new BrowserFS.FileSystem.InMemory(); var imfs = new BrowserFS.FileSystem.InMemory();
if (BrowserFS.FileSystem.IndexedDB.isAvailable()) if (BrowserFS.FileSystem.IndexedDB.isAvailable())
{ {
afs = new BrowserFS.FileSystem.AsyncMirror(imfs, afs = new BrowserFS.FileSystem.AsyncMirror(imfs,
new BrowserFS.FileSystem.IndexedDB(function(e, fs) new BrowserFS.FileSystem.IndexedDB(function(e, fs)
{ {
if (e) if (e)
{ {
@ -126,20 +126,20 @@ function idbfsInit()
console.log("WEBPLAYER: error: " + e + " falling back to in-memory filesystem"); console.log("WEBPLAYER: error: " + e + " falling back to in-memory filesystem");
setupFileSystem("browser"); setupFileSystem("browser");
preLoadingComplete(); preLoadingComplete();
} }
else else
{ {
// initialize afs by copying files from async storage to sync storage. // initialize afs by copying files from async storage to sync storage.
afs.initialize(function (e) afs.initialize(function (e)
{ {
if (e) if (e)
{ {
afs = new BrowserFS.FileSystem.InMemory(); afs = new BrowserFS.FileSystem.InMemory();
console.log("WEBPLAYER: error: " + e + " falling back to in-memory filesystem"); console.log("WEBPLAYER: error: " + e + " falling back to in-memory filesystem");
setupFileSystem("browser"); setupFileSystem("browser");
preLoadingComplete(); preLoadingComplete();
} }
else else
{ {
idbfsSyncComplete(); idbfsSyncComplete();
} }
@ -211,7 +211,7 @@ function startRetroArch()
$('.webplayer-preview').hide(); $('.webplayer-preview').hide();
document.getElementById("btnDrop").disabled = true; document.getElementById("btnDrop").disabled = true;
document.getElementById("btnRun").disabled = true; document.getElementById("btnRun").disabled = true;
$('#btnFullscreen').removeClass('disabled'); $('#btnFullscreen').removeClass('disabled');
$('#btnMenu').removeClass('disabled'); $('#btnMenu').removeClass('disabled');
$('#btnAdd').removeClass('disabled'); $('#btnAdd').removeClass('disabled');
@ -233,13 +233,13 @@ function selectFiles(files)
$('#icnAdd').addClass('fa-spinner spinning'); $('#icnAdd').addClass('fa-spinner spinning');
var count = files.length; var count = files.length;
for (var i = 0; i < files.length; i++) for (var i = 0; i < files.length; i++)
{ {
filereader = new FileReader(); filereader = new FileReader();
filereader.file_name = files[i].name; filereader.file_name = files[i].name;
filereader.readAsArrayBuffer(files[i]); filereader.readAsArrayBuffer(files[i]);
filereader.onload = function(){uploadData(this.result, this.file_name)}; filereader.onload = function(){uploadData(this.result, this.file_name)};
filereader.onloadend = function(evt) filereader.onloadend = function(evt)
{ {
console.log("WEBPLAYER: file: " + this.file_name + " upload complete"); console.log("WEBPLAYER: file: " + this.file_name + " upload complete");
if (evt.target.readyState == FileReader.DONE) if (evt.target.readyState == FileReader.DONE)
@ -262,17 +262,17 @@ function uploadData(data,name)
FS.unlink(name); FS.unlink(name);
} }
var Module = var Module =
{ {
noInitialRun: true, noInitialRun: true,
arguments: ["-v", "--menu"], arguments: ["-v", "--menu"],
preRun: [], preRun: [],
postRun: [], postRun: [],
print: (function() print: (function()
{ {
var element = document.getElementById('output'); var element = document.getElementById('output');
element.value = ''; // clear browser cache element.value = ''; // clear browser cache
return function(text) return function(text)
{ {
text = Array.prototype.slice.call(arguments).join(' '); text = Array.prototype.slice.call(arguments).join(' ');
element.value += text + "\n"; element.value += text + "\n";
@ -289,7 +289,7 @@ var Module =
}, },
canvas: document.getElementById('canvas'), canvas: document.getElementById('canvas'),
totalDependencies: 0, totalDependencies: 0,
monitorRunDependencies: function(left) monitorRunDependencies: function(left)
{ {
this.totalDependencies = Math.max(this.totalDependencies, left); this.totalDependencies = Math.max(this.totalDependencies, left);
} }
@ -309,9 +309,14 @@ function switchStorage(backend) {
// When the browser has loaded everything. // When the browser has loaded everything.
$(function() { $(function() {
/** // Enable all available ToolTips.
* Attempt to disable some default browser keys. $('.tooltip-enable').tooltip({
*/ placement: 'right'
});
/**
* Attempt to disable some default browser keys.
*/
var keys = { var keys = {
9: "tab", 9: "tab",
13: "enter", 13: "enter",
@ -361,7 +366,7 @@ $(function() {
$('#dropdownMenu1').text(coreTitle); $('#dropdownMenu1').text(coreTitle);
// Load the Core's related JavaScript. // Load the Core's related JavaScript.
$.getScript(core + '_libretro.js', function () $.getScript(core + '_libretro.js', function ()
{ {
$('#icnRun').removeClass('fa-spinner').removeClass('fa-spin'); $('#icnRun').removeClass('fa-spinner').removeClass('fa-spin');
$('#icnRun').addClass('fa-play'); $('#icnRun').addClass('fa-play');
@ -389,7 +394,7 @@ function keyPress(k)
kp = function(k, event) { kp = function(k, event) {
var oEvent = document.createEvent('KeyboardEvent'); var oEvent = document.createEvent('KeyboardEvent');
// Chromium Hack // Chromium Hack
Object.defineProperty(oEvent, 'keyCode', { Object.defineProperty(oEvent, 'keyCode', {
get : function() { get : function() {
@ -401,19 +406,19 @@ kp = function(k, event) {
return this.keyCodeVal; return this.keyCodeVal;
} }
}); });
if (oEvent.initKeyboardEvent) { if (oEvent.initKeyboardEvent) {
oEvent.initKeyboardEvent(event, true, true, document.defaultView, false, false, false, false, k, k); oEvent.initKeyboardEvent(event, true, true, document.defaultView, false, false, false, false, k, k);
} else { } else {
oEvent.initKeyEvent(event, true, true, document.defaultView, false, false, false, false, k, 0); oEvent.initKeyEvent(event, true, true, document.defaultView, false, false, false, false, k, 0);
} }
oEvent.keyCodeVal = k; oEvent.keyCodeVal = k;
if (oEvent.keyCode !== k) { if (oEvent.keyCode !== k) {
alert("keyCode mismatch " + oEvent.keyCode + "(" + oEvent.which + ")"); alert("keyCode mismatch " + oEvent.keyCode + "(" + oEvent.which + ")");
} }
document.dispatchEvent(oEvent); document.dispatchEvent(oEvent);
document.getElementById('canvas').focus(); document.getElementById('canvas').focus();
} }