Anton Shestakov <av6@dwimlabs.net>, Sun, 05 Nov 2017 20:16:29 +0800
index: use "gradient" theme because pressed buttons have more contrast
index.html
Permissions: -rw-r--r--
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="/libs/uikit/2.27.4/css/uikit.gradient.min.css"> <link rel="stylesheet" href="/libs/uikit/2.27.4/css/components/progress.gradient.min.css"> <script src="/libs/jquery/3.2.1/jquery.min.js"></script> <script src="/libs/underscore/1.8.3/underscore-min.js"></script> <script src="/libs/backbone/1.3.3/backbone-min.js"></script> <script src="/libs/rivets/0.9.4/rivets.bundled.min.js"></script> -webkit-transition: none; <div class="uk-container uk-container-center"> <div class="uk-grid uk-margin-top"> <div class="uk-width-medium-1-2"> <div class="uk-scrollable-box"> <ul class="uk-nav uk-nav-side" data-files></ul> "nsf/Shovel_Knight_Music.nsfe", for (var i = 0; i < files.length; i++) { var fn = path.slice(path.lastIndexOf('/') + 1); var $a = $('<a>').attr('href', '#' + path).text(fn); $('[data-files]').append($('<li>').append($a)); <div class="uk-width-medium-1-2"> <div class="uk-panel uk-panel-box uk-panel-box-secondary uk-hidden" data-front> <h3 class="uk-panel-title" rv-text="player:track:song"></h3> <span rv-text="player:track:author"></span> <span rv-if="player:track:game">-
<span rv-text="player:track:game"></span></span> <span rv-if="player:track:system">(
<span rv-text="player:track:system"></span>)
</span> <div class="uk-button-group"> <button class="uk-button" rv-on-click="front.fastBackward"><i class="uk-icon-fast-backward"></i></button> <button class="uk-button" rv-class-uk-active="player:track:status | is 'playing'" rv-on-click="front.play"><i class="uk-icon-play"></i></button> <button class="uk-button" rv-class-uk-active="player:track:status | is 'stopped'" rv-on-click="front.pause"><i class="uk-icon-pause"></i></button> <button class="uk-button" rv-on-click="front.stop"><i class="uk-icon-stop"></i></button> <button class="uk-button" rv-on-click="front.fastForward"><i class="uk-icon-fast-forward"></i></button> <div class="uk-button-group"> <button class="uk-button" rv-class-uk-active="player:autoplay" rv-on-click="front.toggleAutoplay" title="Autoplay"><i class="uk-icon-long-arrow-right"></i></button> <button class="uk-button" rv-class-uk-active="player:repeat" rv-on-click="front.toggleRepeat" title="Repeat"><i class="uk-icon-repeat"></i></button> <button class="uk-button" rv-class-uk-active="player:random" rv-on-click="front.toggleRandom" title="Random"><i class="uk-icon-random"></i></button> <table class="uk-text-nowrap uk-margin"> <td><span class="uk-margin-small-right" rv-text="player:track:position | time"></span></td> <td class="uk-width-1-1"> <div class="uk-progress uk-progress-mini uk-margin-remove"> <div class="uk-progress-bar" rv-width="player:track:position | percent player:track:play_length"></div> <td><span class="uk-margin-small-left" rv-text="player:track:play_length | time"></span></td> <table class="uk-table uk-table-condensed"> <tbody data-tracks></tbody> <pre style="white-space: pre-wrap; word-break: break-all; word-wrap: break-word;" data-debug></pre> <script type="text/template" id="track-template"> <tr class="uk-visible-hover" rv-class-uk-active="track:status | is 'playing'"> <td><a class="uk-link-muted uk-invisible" rv-on-click="view.play"><i class="uk-icon-play"></i></a></td> <td rv-text="track:id"></td> <td rv-text="track:song"></td> <td rv-text="track:author"></td> <td rv-text="track:game"></td> <td rv-text="track:system"></td> <td rv-text="track:copyright"></td> <td rv-text="track:dumper"></td> <td rv-text="track:play_length | time"></td> <script src="/libgme.Oz.js"></script> <script src="/ui.js"></script> <script src="/player.js"></script> var player = window.player = new Player(); player.on('change:track', function() { $('title').text(player.get('track').get('song')); var front = window.front = new FrontView({ var trackList = window.trackList = new TrackListView({ collection: player.tracks var Router = Backbone.Router.extend({ loadArrayBuffer(url, function(xhr) { player.load(xhr.response); front.$el.removeClass('uk-hidden'); $('[data-debug]').text(JSON.stringify(player.tracks.toJSON())); if (player.tracks.length > 0) { if (player.get('autoplay')) { console.error('Loading ' + url + ' failed: ' + xhr.statusText); var router = window.router = new Router(); Backbone.history.start();