From d386f635256da5a539e41fbcd5e32ddea1493bf3 Mon Sep 17 00:00:00 2001
From: Rob Loach <robloach@gmail.com>
Date: Sat, 3 Dec 2016 11:44:26 -0500
Subject: [PATCH] [Emscripten] Add Tooltips to the buttons

---
 pkg/emscripten/libretro/index.html  | 18 ++++-----
 pkg/emscripten/libretro/libretro.js | 61 ++++++++++++++++-------------
 2 files changed, 42 insertions(+), 37 deletions(-)
diff --git a/pkg/emscripten/libretro/index.html b/pkg/emscripten/libretro/index.html
index e0a77e1ea9..855a69489e 100644
--- a/pkg/emscripten/libretro/index.html
+++ b/pkg/emscripten/libretro/index.html
@@ -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>
diff --git a/pkg/emscripten/libretro/libretro.js b/pkg/emscripten/libretro/libretro.js
index fc4324a69f..5b45e7353b 100644
--- a/pkg/emscripten/libretro/libretro.js
+++ b/pkg/emscripten/libretro/libretro.js
@@ -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();
 }
