libretro/RetroArch
1
0
Fork 0
mirror of https://github.com/libretro/RetroArch.git synced 2024-12-13 11:52:08 +00:00
Code Issues Actions 24 Packages Projects Releases Wiki Activity

Merge pull request #4144 from RobLoach/tooltips

Browse Source 
[Emscripten] Add Tooltips to the buttons
This commit is contained in:
Twinaphex 2016-12-03 17:53:00 +01:00 committed by GitHub
commit 42886713be
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">
<!-- Material Design Bootstrap -->
<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 rel="shortcut icon" href="media/icon_dark.ico" />
</head>
<body>
<body>
<!--Navbar-->
<nav class="navbar navbar-dark bg-primary">
<div class="container">
@ -82,14 +82,14 @@
<button class="btn btn-primary disabled" id="btnAdd" onclick="document.getElementById('btnRom').click()" disabled>
<span class="fa fa-plus" id="icnAdd"></span> Add Content
</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>
</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 />
<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>
</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>
</button>
</li>
@ -111,12 +111,12 @@
<div class="row">
<div class="col-sm-12 form-group btn-group text-xs-left p-t-2">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary" id="lblLocal" onclick=switchStorage("browser")>
<input type="radio" name="options" id="btnLocal" autocomplete="off" checked>
<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 >
<span class="fa fa-globe" id="icnLocal"></span> Browser
</input>
</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">
<span class="fa fa-dropbox" id="icnDrop"></span> Dropbox
</input>

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

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