From 1bde4043a5657a6c4a594a502511b806307ea3a7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=96mercan=20K=C3=B6m=C3=BCr?= <fpscan@gmail.com>
Date: Sat, 17 Aug 2019 19:25:18 +0300
Subject: [PATCH] Steps for web.libretro
---
pkg/emscripten/libretro/embed.html | 24 +++-
pkg/emscripten/libretro/index.html | 33 ++++-
pkg/emscripten/libretro/steps.css | 188 +++++++++++++++++++++++++++++
pkg/emscripten/libretro/steps.js | 68 +++++++++++
4 files changed, 309 insertions(+), 4 deletions(-)
create mode 100644 pkg/emscripten/libretro/steps.css
create mode 100644 pkg/emscripten/libretro/steps.js
diff --git a/pkg/emscripten/libretro/embed.html b/pkg/emscripten/libretro/embed.html
index 77afd33b65..11daaeaebe 100644
--- a/pkg/emscripten/libretro/embed.html
+++ b/pkg/emscripten/libretro/embed.html
@@ -13,15 +13,13 @@
<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="stylesheet" href="./steps.css">
<link rel="shortcut icon" href="https://web.libretro.com/media/retroarch.ico" />
</head>
<body>
<!--Navbar-->
<nav class="navbar navbar-dark bg-primary">
<div class="container">
- <!--navbar content-->
- <div class="navbar-toggleable-xs">
-
<!--Links-->
<ul class="nav navbar-nav">
<div class="dropdown">
@@ -73,6 +71,22 @@
</div>
</div>
</div>
+ <!--navbar content-->
+ <div class="navbar-toggleable-xs">
+ <div class="how-to-guide js-container">
+ <button type="button" class="button-close">×</button>
+
+ <div class="slide-view">
+ </div>
+
+ <div class="navigation">
+ <button type="button" class="button-nav js-nav disabled" data-nav="prev">Back</button>
+ <div class="nav-state">
+ <span class="current js-slide-no">1</span>/<span class="total">5</span>
+ </div>
+ <button type="button" class="button-nav js-nav" data-nav="next">Next</button>
+ </div>
+ </div>
<script src="//code.jquery.com/jquery-3.1.0.min.js"></script>
<script src="//rawgit.com/jeresig/jquery.hotkeys/master/jquery.hotkeys.js"></script>
@@ -85,6 +99,10 @@
<div align="center">
<a href="https://www.patreon.com/libretro">
<img src="https://patreon_public_assets.s3.amazonaws.com/sized/becomeAPatronBanner.png" width="350" height="116"></a>
+<!-- partial -->
+ <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
+<script src='http://cdnjs.cloudflare.com/ajax/libs/mustache.js/0.7.2/mustache.min.js'></script>
+<script src="./steps.js"></script>
</div>
</body>
</html>
diff --git a/pkg/emscripten/libretro/index.html b/pkg/emscripten/libretro/index.html
index ba11aff35b..191f968482 100644
--- a/pkg/emscripten/libretro/index.html
+++ b/pkg/emscripten/libretro/index.html
@@ -12,6 +12,7 @@
<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="stylesheet" href="./steps.css">
<link rel="shortcut icon" href="media/retroarch.ico" />
</head>
@@ -119,7 +120,33 @@
<img class="webplayer-preview img-fluid" src="media/canvas.png" width="960px" height="720px" alt="RetroArch Logo">
</div>
</div>
-
+ <!--/.steps content-->
+ </div>
+ </nav>
+ <div class="bg-inverse webplayer-container">
+ <div class="container">
+ <div class="webplayer_border text-xs-center" id="canvas_div">
+ <canvas class="webplayer" id="canvas" tabindex="1" oncontextmenu="event.preventDefault()" style="display: none"></canvas>
+ <img class="webplayer-preview img-fluid" src="media/canvas.png" width="960px" height="720px" alt="RetroArch Logo">
+ </div>
+ </div>
+ </div>
+ <!--navbar content-->
+ <div class="navbar-toggleable-xs">
+ <div class="how-to-guide js-container">
+ <button type="button" class="button-close">×</button>
+
+ <div class="slide-view">
+ </div>
+
+ <div class="navigation">
+ <button type="button" class="button-nav js-nav disabled" data-nav="prev">Back</button>
+ <div class="nav-state">
+ <span class="current js-slide-no">1</span>/<span class="total">5</span>
+ </div>
+ <button type="button" class="button-nav js-nav" data-nav="next">Next</button>
+ </div>
+ </div>
<script src="//code.jquery.com/jquery-3.1.0.min.js"></script>
<script src="//rawgit.com/jeresig/jquery.hotkeys/master/jquery.hotkeys.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/tether/1.3.4/js/tether.min.js"></script>
@@ -131,6 +158,10 @@
<div align="center">
<a href="https://www.patreon.com/libretro">
<img src="https://patreon_public_assets.s3.amazonaws.com/sized/becomeAPatronBanner.png" width="350" height="116"></a>
+ <!-- partial -->
+ <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
+<script src='http://cdnjs.cloudflare.com/ajax/libs/mustache.js/0.7.2/mustache.min.js'></script>
+<script src="./steps.js"></script>
</div>
</body>
</html>
diff --git a/pkg/emscripten/libretro/steps.css b/pkg/emscripten/libretro/steps.css
new file mode 100644
index 0000000000..f01c040d7a
--- /dev/null
+++ b/pkg/emscripten/libretro/steps.css
@@ -0,0 +1,188 @@
+*,
+*:before,
+*:after {
+ -moz-box-sizing: border-box;
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
+}
+html,
+body {
+ background: #ecf0f1;
+ color: #444;
+ font-family: Tahoma, Geneva, sans-serif;
+ font-size: 16px;
+ padding: 10px;
+}
+.how-to-guide {
+ -moz-border-radius: 2px;
+ -webkit-border-radius: 2px;
+ border-radius: 2px;
+ background: #34495e;
+ color: #ecf0f1;
+ margin: 0;
+ padding: 0 0 40px;
+ position: relative;
+ text-align: left;
+ width: 296px;
+}
+.how-to-guide:before {
+ border: 10px solid transparent;
+ border-right-color: #34495e;
+ content: '';
+ height: 0;
+ left: -20px;
+ position: absolute;
+ top: 20px;
+ width: 0;
+}
+.how-to-guide .button-close {
+ -webkit-transition: color 0.25s ease-out 0.1s;
+ -moz-transition: color 0.25s ease-out 0.1s;
+ -o-transition: color 0.25s ease-out 0.1s;
+ transition: color 0.25s ease-out 0.1s;
+ background: none;
+ border: none;
+ color: #ecf0f1;
+ font-size: 1em;
+ position: absolute;
+ right: 0;
+ top: 0;
+ z-index: 99;
+}
+.how-to-guide .button-close:hover,
+.how-to-guide .button-close:focus {
+ color: #3498db;
+ cursor: pointer;
+}
+.how-to-guide .navigation {
+ background: #2c3e50;
+ border-top: 1px solid #414141;
+ bottom: 0;
+ font-size: 0.8em;
+ height: 40px;
+ left: 0;
+ line-height: 1em;
+ padding: 13px;
+ position: absolute;
+ width: 100%;
+}
+.how-to-guide .navigation .nav-state {
+ font-weight: bold;
+ text-align: center;
+}
+.how-to-guide .navigation .button-nav {
+ -moz-border-radius: 2px;
+ -webkit-border-radius: 2px;
+ border-radius: 2px;
+ -webkit-transition: background 0.25s ease-out 0.1s;
+ -moz-transition: background 0.25s ease-out 0.1s;
+ -o-transition: background 0.25s ease-out 0.1s;
+ transition: background 0.25s ease-out 0.1s;
+ background: #34495e;
+ border: none;
+ color: #ecf0f1;
+ font-size: 0.9em;
+ padding: 5px 20px;
+ position: absolute;
+ top: 5px;
+}
+.how-to-guide .navigation .button-nav:hover,
+.how-to-guide .navigation .button-nav:focus {
+ background: #3498db;
+ cursor: pointer;
+}
+.how-to-guide .navigation .button-nav.disabled {
+ color: #bdc3c7;
+}
+.how-to-guide .navigation .button-nav.disabled:hover,
+.how-to-guide .navigation .button-nav.disabled:focus {
+ background: #34495e;
+ cursor: default;
+}
+.how-to-guide .navigation .button-nav[data-nav="prev"] {
+ left: 5px;
+}
+.how-to-guide .navigation .button-nav[data-nav="next"] {
+ right: 5px;
+}
+.how-to-guide .slide-view {
+ overflow: hidden;
+}
+.how-to-guide .slides {
+ -webkit-transition: -webkit-transform 0.25s ease-out 0.1s;
+ -moz-transition: -moz-transform 0.25s ease-out 0.1s;
+ -o-transition: -o-transform 0.25s ease-out 0.1s;
+ transition: transform 0.25s ease-out 0.1s;
+ width: 9999px;
+}
+.how-to-guide .slides[data-active-slide="1"] {
+ -webkit-transform: translate(0, 0);
+ -moz-transform: translate(0, 0);
+ -ms-transform: translate(0, 0);
+ -o-transform: translate(0, 0);
+ transform: translate(0, 0);
+}
+.how-to-guide .slides[data-active-slide="1"] .step[data-slide="1"] {
+ opacity: 1;
+}
+.how-to-guide .slides[data-active-slide="2"] {
+ -webkit-transform: translate(-296px, 0);
+ -moz-transform: translate(-296px, 0);
+ -ms-transform: translate(-296px, 0);
+ -o-transform: translate(-296px, 0);
+ transform: translate(-296px, 0);
+}
+.how-to-guide .slides[data-active-slide="2"] .step[data-slide="2"] {
+ opacity: 1;
+}
+.how-to-guide .slides[data-active-slide="3"] {
+ -webkit-transform: translate(-592px, 0);
+ -moz-transform: translate(-592px, 0);
+ -ms-transform: translate(-592px, 0);
+ -o-transform: translate(-592px, 0);
+ transform: translate(-592px, 0);
+}
+.how-to-guide .slides[data-active-slide="3"] .step[data-slide="3"] {
+ opacity: 1;
+}
+.how-to-guide .slides[data-active-slide="4"] {
+ -webkit-transform: translate(-888px, 0);
+ -moz-transform: translate(-888px, 0);
+ -ms-transform: translate(-888px, 0);
+ -o-transform: translate(-888px, 0);
+ transform: translate(-888px, 0);
+}
+.how-to-guide .slides[data-active-slide="4"] .step[data-slide="4"] {
+ opacity: 1;
+}
+.how-to-guide .slides[data-active-slide="5"] {
+ -webkit-transform: translate(-1184px, 0);
+ -moz-transform: translate(-1184px, 0);
+ -ms-transform: translate(-1184px, 0);
+ -o-transform: translate(-1184px, 0);
+ transform: translate(-1184px, 0);
+}
+.how-to-guide .slides[data-active-slide="5"] .step[data-slide="5"] {
+ opacity: 1;
+}
+.how-to-guide .step {
+ -webkit-transition: opacity 0.25s ease-out 0.1s;
+ -moz-transition: opacity 0.25s ease-out 0.1s;
+ -o-transition: opacity 0.25s ease-out 0.1s;
+ transition: opacity 0.25s ease-out 0.1s;
+ display: inline-block;
+ opacity: 0;
+ padding: 10px;
+ width: 296px;
+ vertical-align: top;
+}
+.how-to-guide .step header {
+ cursor: default;
+ font-size: 1.25em;
+ margin: 0 0 20px;
+ padding: 0;
+}
+.how-to-guide .step .content {
+ cursor: default;
+ font-size: 0.85em;
+}
diff --git a/pkg/emscripten/libretro/steps.js b/pkg/emscripten/libretro/steps.js
new file mode 100644
index 0000000000..aa1e39409e
--- /dev/null
+++ b/pkg/emscripten/libretro/steps.js
@@ -0,0 +1,68 @@
+$(function () {
+ var data = [
+ {
+ idx: 1,
+ title: 'Load Core',
+ content: 'Load your core by clicking first tab, scroll down until desired Core. We will use Nestopia for now. Do not forget; Content must be compatible with Core.'
+ },
+ {
+ idx: 2,
+ title: 'Load Content',
+ content: 'After selecting Core, click Run. After RetroArch opens, click Add Content and select your compatible ROM.'
+ },
+ {
+ idx: 3,
+ title: 'Load Content',
+ content: 'Select Load Content from the menu, and then enter Start Directory. You will see your Content, select it then select the Core'
+ },
+ {
+ idx: 4,
+ title: 'Cleanup Storage',
+ content: 'The trash can erases your existing configuration and presets.'
+ },
+ {
+ idx: 5,
+ title: 'Quick Menu',
+ content: 'If you click on the three line icons, the Quick Menu will open here as in RetroArch.'
+ }
+ ];
+
+ var template =
+ '<div class="slides" data-active-slide="1">' +
+ '{{#slides}}' +
+ '<article class="step" data-slide="{{idx}}">' +
+ '<header>{{title}}</header>' +
+ '<div class="content">{{content}}</div>' +
+ '</article>' +
+ '{{/slides}}' +
+ '</div>';
+
+ $('.how-to-guide').append(Mustache.render(template, { slides: data }));
+
+ var slidesCount = data.length;
+ var currentIdx = 1;
+
+ $('body')
+ .off('click', '.js-nav:not(.disabled)')
+ .on('click', '.js-nav:not(.disabled)', function (event) {
+ var button = $(event.currentTarget).blur();
+ var container = button.parents('.js-container');
+
+ var newIdx = currentIdx + (button.attr('data-nav') === 'prev' ? -1 : 1);
+ container
+ .find('.slides').attr('data-active-slide', newIdx).end()
+ .find('.js-slide-no').html(newIdx);
+
+ /* enable/disable nav buttons */
+ container.find('.js-nav').removeClass('disabled');
+ if (newIdx <= 1) {
+ container.find('.js-nav[data-nav="prev"]').addClass('disabled');
+ } else if (newIdx >= slidesCount) {
+ container.find('.js-nav[data-nav="next"]').addClass('disabled');
+ }
+
+ currentIdx = newIdx;
+
+ return true;
+ });
+});
\ No newline at end of file