mirror of
https://github.com/SuperBFG7/ympd
synced 2024-12-24 18:10:26 +00:00
Layout fixes
Replaced bootstrap-notify.js with version from http://bootstrap-notify.remabledesigns.com
This commit is contained in:
jcorporation
parent
73c2fe245a
commit
51dcb88a7b
@ -1,3 +1,16 @@
|
||||
html {
|
||||
position: relative;
|
||||
min-height: 100%;
|
||||
}
|
||||
body {
|
||||
margin-bottom: 60px;
|
||||
}
|
||||
|
||||
footer {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
padding-top: 50px;
|
||||
padding-bottom: 50px;
|
||||
@ -5,8 +18,7 @@ body {
|
||||
}
|
||||
|
||||
#volumeslider {
|
||||
width: 150px;
|
||||
margin-top:5px;
|
||||
width: 104px;
|
||||
}
|
||||
|
||||
#volumeslider .progress {
|
||||
@ -42,30 +54,7 @@ button {
|
||||
}
|
||||
|
||||
#search {
|
||||
margin-right: -10px;
|
||||
}
|
||||
|
||||
.btn-group-hover {
|
||||
opacity: 20%;
|
||||
}
|
||||
|
||||
.btn:active,
|
||||
.btn.active {
|
||||
background-image: none;
|
||||
outline: 0;
|
||||
-webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
|
||||
box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
|
||||
color: #428bca;
|
||||
background-color: #fdfdfd;
|
||||
border-color: #adadad;
|
||||
}
|
||||
|
||||
@media (max-width: 1199px) {
|
||||
#btn-responsive-block > .btn {
|
||||
padding: 6px 12px;
|
||||
font-size: 14px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
@ -90,7 +79,6 @@ td:nth-last-child(2), th:nth-last-child(2) {
|
||||
#salamisandwich td:nth-child(4) span {
|
||||
font-style: italic;
|
||||
font-size: 90%;
|
||||
|
||||
display: block;
|
||||
}
|
||||
*/
|
||||
@ -98,7 +86,6 @@ td:nth-last-child(2), th:nth-last-child(2) {
|
||||
td:nth-child(2), td:nth-child(3) {
|
||||
min-width: 25%;
|
||||
max-width: 10em;
|
||||
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
@ -113,6 +100,9 @@ td:nth-child(2), td:nth-child(3) {
|
||||
min-width: 10%;
|
||||
white-space: normal;
|
||||
}
|
||||
.tbllength, .tblnum {
|
||||
visibility:collapse;
|
||||
}
|
||||
}
|
||||
|
||||
tbody {
|
||||
@ -141,10 +131,6 @@ td:last-child, td:first-child {
|
||||
margin: 5px 0px;
|
||||
}
|
||||
|
||||
button {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#album-cover {
|
||||
background-size:cover;
|
||||
border:1px solid black;
|
||||
@ -164,13 +150,6 @@ button {
|
||||
color: black;
|
||||
}
|
||||
|
||||
#track-icon {
|
||||
cursor: pointer;
|
||||
font-size:34px;
|
||||
float:left;
|
||||
display:block;
|
||||
}
|
||||
|
||||
.hide {
|
||||
display: none !important;
|
||||
}
|
||||
@ -232,3 +211,13 @@ main {
|
||||
margin-bottom:10px;
|
||||
}
|
||||
|
||||
#btn-outputs-block > button {
|
||||
margin-bottom:10px;
|
||||
}
|
||||
#btn-outputs-block > button:last-child {
|
||||
margin-bottom:0px;
|
||||
}
|
||||
|
||||
.card-body {
|
||||
overflow-x:hidden;
|
||||
}
|
||||
@ -21,24 +21,23 @@
|
||||
<body>
|
||||
<header>
|
||||
<nav class="navbar navbar-expand navbar-dark fixed-top bg-dark">
|
||||
<div class="container justify-content-start">
|
||||
<div class="dropdown">
|
||||
<a class="navbar-brand dropdown-toggle" data-toggle="dropdown" href="/#/playing/"><span style="font-size:24px;float:left;margin-right:5px;" class="material-icons">play_circle_outline</span>myMPD</a>
|
||||
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
|
||||
<form id="search" class="form-inline mt-2 mt-md-0" role="search">
|
||||
<input type="text" class="form-control mr-sm-2" placeholder="Search">
|
||||
<div class="dropdown justify-content-start">
|
||||
<a class="navbar-brand dropdown-toggle" data-toggle="dropdown" href="/#/playing/"><span style="font-size:24px;float:left;margin-right:5px;" class="material-icons">play_circle_outline</span></a>
|
||||
<div class="dropdown-menu bg-dark" aria-labelledby="dropdownMenuButton">
|
||||
<h1 class="dropdown-header text-light">myMPD</h1>
|
||||
<div class="dropdown-divider"></div>
|
||||
<form id="search" class="px-4 py-3" role="search">
|
||||
<input type="text" class="form-control" placeholder="Search">
|
||||
</form>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a id="nav-dirble" class="dropdown-item" href="#/dirble/">Dirble</a>
|
||||
<a id="nav-addstream" class="dropdown-item" href="#" data-toggle="modal" data-target="#addstream">Add Stream</a>
|
||||
<a id="nav-settings" class="dropdown-item" href="#" data-toggle="modal" data-target="#settings" onclick="getHost();">Settings</a>
|
||||
<a id="nav-addstream" class="dropdown-item text-light bg-dark" href="#" data-toggle="modal" data-target="#addstream">Add Stream</a>
|
||||
<a id="nav-settings" class="dropdown-item text-light bg-dark" href="#" data-toggle="modal" data-target="#settings" onclick="getHost();">Settings</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<div id="btn-outputs-block"></div>
|
||||
<form id="btn-outputs-block" class="px-4 py-3"></form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container justify-content-between">
|
||||
<div class="btn-toolbar" role="toolbar">
|
||||
<div class="btn-toolbar navbar-nav flex-row ml-md-auto d-md-flex" role="toolbar">
|
||||
<div class="btn-group mr-2" role="group">
|
||||
<button type="button" class="btn btn-secondary" onclick="socket.send('MPD_API_SET_PREV');">
|
||||
<span class="material-icons">skip_previous</span>
|
||||
@ -73,14 +72,10 @@
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="container justify-content-end"></div>
|
||||
</nav>
|
||||
</header>
|
||||
<main role="main" class="container">
|
||||
<div class="notifications top-right"></div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<span id="panel-heading">Now playing</span>
|
||||
@ -126,13 +121,19 @@
|
||||
</ol>
|
||||
|
||||
<div class="btn-toolbar hide" id="filter-toolbar">
|
||||
<div class="btn-group mr-2" data-toggle="radio" id="filter"></div>
|
||||
<div class="btn-group mr-2 flex-wrap" data-toggle="radio" id="filter"></div>
|
||||
<div class="btn-group mr-2 pull-right">
|
||||
<button id="add-all-songs" class="btn btn-secondary">Add all</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<table id="salamisandwich" class="table table-hover hide">
|
||||
<col class="tblnum"/>
|
||||
<col class="tblartist"/>
|
||||
<col class="tblalbum"/>
|
||||
<col class="tbltitle"/>
|
||||
<col class="tbllength"/>
|
||||
<col class="tblaction"/>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>#</th>
|
||||
@ -369,9 +370,9 @@
|
||||
<!-- Placed at the end of the document so the pages load faster -->
|
||||
<script src="js/jquery-3.3.1.min.js"></script>
|
||||
<script src="js/jquery.cookie.js"></script>
|
||||
<script src="js/bootstrap.js"></script>
|
||||
<script src="js/bootstrap.min.js"></script>
|
||||
<script src="js/bootstrap-slider.js"></script>
|
||||
<script src="js/bootstrap-notify.js"></script>
|
||||
<script src="js/bootstrap-notify.min.js"></script>
|
||||
<script src="js/sammy.js"></script>
|
||||
<script src="js/jquery-ui-sortable.min.js"></script>
|
||||
<script src="js/mpd.js"></script>
|
||||
|
||||
442
htdocs/js/bootstrap-notify.js
vendored
442
htdocs/js/bootstrap-notify.js
vendored
@ -1,93 +1,349 @@
|
||||
/**
|
||||
* bootstrap-notify.js v1.0
|
||||
* --
|
||||
* Copyright 2012 Goodybag, Inc.
|
||||
* --
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
(function ($) {
|
||||
var Notification = function (element, options) {
|
||||
// Element collection
|
||||
this.$element = $(element);
|
||||
this.$note = $('<div class="alert"></div>');
|
||||
this.options = $.extend(true, {}, $.fn.notify.defaults, options);
|
||||
|
||||
// Setup from options
|
||||
if(this.options.transition)
|
||||
if(this.options.transition == 'fade')
|
||||
this.$note.addClass('in').addClass(this.options.transition);
|
||||
else this.$note.addClass(this.options.transition);
|
||||
else this.$note.addClass('fade').addClass('in');
|
||||
|
||||
if(this.options.type)
|
||||
this.$note.addClass('alert-' + this.options.type);
|
||||
else this.$note.addClass('alert-success');
|
||||
|
||||
if(!this.options.message && this.$element.data("message") !== '') // dom text
|
||||
this.$note.html(this.$element.data("message"));
|
||||
else
|
||||
if(typeof this.options.message === 'object')
|
||||
if(this.options.message.html)
|
||||
this.$note.html(this.options.message.html);
|
||||
else if(this.options.message.text)
|
||||
this.$note.text(this.options.message.text);
|
||||
else
|
||||
this.$note.html(this.options.message);
|
||||
|
||||
if(this.options.closable)
|
||||
var link = $('<a class="close pull-right" href="#"> ×</a>');
|
||||
$(link).on('click', $.proxy(onClose, this));
|
||||
this.$note.prepend(link);
|
||||
|
||||
return this;
|
||||
};
|
||||
|
||||
var onClose = function() {
|
||||
this.options.onClose();
|
||||
$(this.$note).remove();
|
||||
this.options.onClosed();
|
||||
return false;
|
||||
};
|
||||
|
||||
Notification.prototype.show = function () {
|
||||
if(this.options.fadeOut.enabled)
|
||||
this.$note.delay(this.options.fadeOut.delay || 3000).fadeOut('slow', $.proxy(onClose, this));
|
||||
|
||||
this.$element.append(this.$note);
|
||||
this.$note.alert();
|
||||
};
|
||||
|
||||
Notification.prototype.hide = function () {
|
||||
if(this.options.fadeOut.enabled)
|
||||
this.$note.delay(this.options.fadeOut.delay || 3000).fadeOut('slow', $.proxy(onClose, this));
|
||||
else onClose.call(this);
|
||||
};
|
||||
|
||||
$.fn.notify = function (options) {
|
||||
return new Notification(this, options);
|
||||
};
|
||||
|
||||
$.fn.notify.defaults = {
|
||||
type: 'success',
|
||||
closable: true,
|
||||
transition: 'fade',
|
||||
fadeOut: {
|
||||
enabled: true,
|
||||
delay: 3000
|
||||
},
|
||||
message: null,
|
||||
onClose: function () {},
|
||||
onClosed: function () {}
|
||||
}
|
||||
})(window.jQuery);
|
||||
/*
|
||||
* Project: Bootstrap Notify = v3.1.3
|
||||
* Description: Turns standard Bootstrap alerts into "Growl-like" notifications.
|
||||
* Author: Mouse0270 aka Robert McIntosh
|
||||
* License: MIT License
|
||||
* Website: https://github.com/mouse0270/bootstrap-growl
|
||||
*/
|
||||
(function (factory) {
|
||||
if (typeof define === 'function' && define.amd) {
|
||||
// AMD. Register as an anonymous module.
|
||||
define(['jquery'], factory);
|
||||
} else if (typeof exports === 'object') {
|
||||
// Node/CommonJS
|
||||
factory(require('jquery'));
|
||||
} else {
|
||||
// Browser globals
|
||||
factory(jQuery);
|
||||
}
|
||||
}(function ($) {
|
||||
// Create the defaults once
|
||||
var defaults = {
|
||||
element: 'body',
|
||||
position: null,
|
||||
type: "info",
|
||||
allow_dismiss: true,
|
||||
newest_on_top: false,
|
||||
showProgressbar: false,
|
||||
placement: {
|
||||
from: "top",
|
||||
align: "right"
|
||||
},
|
||||
offset: 20,
|
||||
spacing: 10,
|
||||
z_index: 1031,
|
||||
delay: 5000,
|
||||
timer: 1000,
|
||||
url_target: '_blank',
|
||||
mouse_over: null,
|
||||
animate: {
|
||||
enter: 'animated fadeInDown',
|
||||
exit: 'animated fadeOutUp'
|
||||
},
|
||||
onShow: null,
|
||||
onShown: null,
|
||||
onClose: null,
|
||||
onClosed: null,
|
||||
icon_type: 'class',
|
||||
template: '<div data-notify="container" class="col-xs-11 col-sm-4 alert alert-{0}" role="alert"><button type="button" aria-hidden="true" class="close" data-notify="dismiss">×</button><span data-notify="icon"></span> <span data-notify="title">{1}</span> <span data-notify="message">{2}</span><div class="progress" data-notify="progressbar"><div class="progress-bar progress-bar-{0}" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;"></div></div><a href="{3}" target="{4}" data-notify="url"></a></div>'
|
||||
};
|
||||
|
||||
String.format = function() {
|
||||
var str = arguments[0];
|
||||
for (var i = 1; i < arguments.length; i++) {
|
||||
str = str.replace(RegExp("\\{" + (i - 1) + "\\}", "gm"), arguments[i]);
|
||||
}
|
||||
return str;
|
||||
};
|
||||
|
||||
function Notify ( element, content, options ) {
|
||||
// Setup Content of Notify
|
||||
var content = {
|
||||
content: {
|
||||
message: typeof content == 'object' ? content.message : content,
|
||||
title: content.title ? content.title : '',
|
||||
icon: content.icon ? content.icon : '',
|
||||
url: content.url ? content.url : '#',
|
||||
target: content.target ? content.target : '-'
|
||||
}
|
||||
};
|
||||
|
||||
options = $.extend(true, {}, content, options);
|
||||
this.settings = $.extend(true, {}, defaults, options);
|
||||
this._defaults = defaults;
|
||||
if (this.settings.content.target == "-") {
|
||||
this.settings.content.target = this.settings.url_target;
|
||||
}
|
||||
this.animations = {
|
||||
start: 'webkitAnimationStart oanimationstart MSAnimationStart animationstart',
|
||||
end: 'webkitAnimationEnd oanimationend MSAnimationEnd animationend'
|
||||
}
|
||||
|
||||
if (typeof this.settings.offset == 'number') {
|
||||
this.settings.offset = {
|
||||
x: this.settings.offset,
|
||||
y: this.settings.offset
|
||||
};
|
||||
}
|
||||
this.init();
|
||||
};
|
||||
|
||||
$.extend(Notify.prototype, {
|
||||
init: function () {
|
||||
var self = this;
|
||||
|
||||
this.buildNotify();
|
||||
if (this.settings.content.icon) {
|
||||
this.setIcon();
|
||||
}
|
||||
if (this.settings.content.url != "#") {
|
||||
this.styleURL();
|
||||
}
|
||||
this.placement();
|
||||
this.bind();
|
||||
|
||||
this.notify = {
|
||||
$ele: this.$ele,
|
||||
update: function(command, update) {
|
||||
var commands = {};
|
||||
if (typeof command == "string") {
|
||||
commands[command] = update;
|
||||
}else{
|
||||
commands = command;
|
||||
}
|
||||
for (var command in commands) {
|
||||
switch (command) {
|
||||
case "type":
|
||||
this.$ele.removeClass('alert-' + self.settings.type);
|
||||
this.$ele.find('[data-notify="progressbar"] > .progress-bar').removeClass('progress-bar-' + self.settings.type);
|
||||
self.settings.type = commands[command];
|
||||
this.$ele.addClass('alert-' + commands[command]).find('[data-notify="progressbar"] > .progress-bar').addClass('progress-bar-' + commands[command]);
|
||||
break;
|
||||
case "icon":
|
||||
var $icon = this.$ele.find('[data-notify="icon"]');
|
||||
if (self.settings.icon_type.toLowerCase() == 'class') {
|
||||
$icon.removeClass(self.settings.content.icon).addClass(commands[command]);
|
||||
}else{
|
||||
if (!$icon.is('img')) {
|
||||
$icon.find('img');
|
||||
}
|
||||
$icon.attr('src', commands[command]);
|
||||
}
|
||||
break;
|
||||
case "progress":
|
||||
var newDelay = self.settings.delay - (self.settings.delay * (commands[command] / 100));
|
||||
this.$ele.data('notify-delay', newDelay);
|
||||
this.$ele.find('[data-notify="progressbar"] > div').attr('aria-valuenow', commands[command]).css('width', commands[command] + '%');
|
||||
break;
|
||||
case "url":
|
||||
this.$ele.find('[data-notify="url"]').attr('href', commands[command]);
|
||||
break;
|
||||
case "target":
|
||||
this.$ele.find('[data-notify="url"]').attr('target', commands[command]);
|
||||
break;
|
||||
default:
|
||||
this.$ele.find('[data-notify="' + command +'"]').html(commands[command]);
|
||||
};
|
||||
}
|
||||
var posX = this.$ele.outerHeight() + parseInt(self.settings.spacing) + parseInt(self.settings.offset.y);
|
||||
self.reposition(posX);
|
||||
},
|
||||
close: function() {
|
||||
self.close();
|
||||
}
|
||||
};
|
||||
},
|
||||
buildNotify: function () {
|
||||
var content = this.settings.content;
|
||||
this.$ele = $(String.format(this.settings.template, this.settings.type, content.title, content.message, content.url, content.target));
|
||||
this.$ele.attr('data-notify-position', this.settings.placement.from + '-' + this.settings.placement.align);
|
||||
if (!this.settings.allow_dismiss) {
|
||||
this.$ele.find('[data-notify="dismiss"]').css('display', 'none');
|
||||
}
|
||||
if ((this.settings.delay <= 0 && !this.settings.showProgressbar) || !this.settings.showProgressbar) {
|
||||
this.$ele.find('[data-notify="progressbar"]').remove();
|
||||
}
|
||||
},
|
||||
setIcon: function() {
|
||||
if (this.settings.icon_type.toLowerCase() == 'class') {
|
||||
this.$ele.find('[data-notify="icon"]').addClass(this.settings.content.icon);
|
||||
}else{
|
||||
if (this.$ele.find('[data-notify="icon"]').is('img')) {
|
||||
this.$ele.find('[data-notify="icon"]').attr('src', this.settings.content.icon);
|
||||
}else{
|
||||
this.$ele.find('[data-notify="icon"]').append('<img src="'+this.settings.content.icon+'" alt="Notify Icon" />');
|
||||
}
|
||||
}
|
||||
},
|
||||
styleURL: function() {
|
||||
this.$ele.find('[data-notify="url"]').css({
|
||||
backgroundImage: 'url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7)',
|
||||
height: '100%',
|
||||
left: '0px',
|
||||
position: 'absolute',
|
||||
top: '0px',
|
||||
width: '100%',
|
||||
zIndex: this.settings.z_index + 1
|
||||
});
|
||||
this.$ele.find('[data-notify="dismiss"]').css({
|
||||
position: 'absolute',
|
||||
right: '10px',
|
||||
top: '5px',
|
||||
zIndex: this.settings.z_index + 2
|
||||
});
|
||||
},
|
||||
placement: function() {
|
||||
var self = this,
|
||||
offsetAmt = this.settings.offset.y,
|
||||
css = {
|
||||
display: 'inline-block',
|
||||
margin: '0px auto',
|
||||
position: this.settings.position ? this.settings.position : (this.settings.element === 'body' ? 'fixed' : 'absolute'),
|
||||
transition: 'all .5s ease-in-out',
|
||||
zIndex: this.settings.z_index
|
||||
},
|
||||
hasAnimation = false,
|
||||
settings = this.settings;
|
||||
|
||||
$('[data-notify-position="' + this.settings.placement.from + '-' + this.settings.placement.align + '"]:not([data-closing="true"])').each(function() {
|
||||
return offsetAmt = Math.max(offsetAmt, parseInt($(this).css(settings.placement.from)) + parseInt($(this).outerHeight()) + parseInt(settings.spacing));
|
||||
});
|
||||
if (this.settings.newest_on_top == true) {
|
||||
offsetAmt = this.settings.offset.y;
|
||||
}
|
||||
css[this.settings.placement.from] = offsetAmt+'px';
|
||||
|
||||
switch (this.settings.placement.align) {
|
||||
case "left":
|
||||
case "right":
|
||||
css[this.settings.placement.align] = this.settings.offset.x+'px';
|
||||
break;
|
||||
case "center":
|
||||
css.left = 0;
|
||||
css.right = 0;
|
||||
break;
|
||||
}
|
||||
this.$ele.css(css).addClass(this.settings.animate.enter);
|
||||
$.each(Array('webkit', 'moz', 'o', 'ms', ''), function(index, prefix) {
|
||||
self.$ele[0].style[prefix+'AnimationIterationCount'] = 1;
|
||||
});
|
||||
|
||||
$(this.settings.element).append(this.$ele);
|
||||
|
||||
if (this.settings.newest_on_top == true) {
|
||||
offsetAmt = (parseInt(offsetAmt)+parseInt(this.settings.spacing)) + this.$ele.outerHeight();
|
||||
this.reposition(offsetAmt);
|
||||
}
|
||||
|
||||
if ($.isFunction(self.settings.onShow)) {
|
||||
self.settings.onShow.call(this.$ele);
|
||||
}
|
||||
|
||||
this.$ele.one(this.animations.start, function(event) {
|
||||
hasAnimation = true;
|
||||
}).one(this.animations.end, function(event) {
|
||||
if ($.isFunction(self.settings.onShown)) {
|
||||
self.settings.onShown.call(this);
|
||||
}
|
||||
});
|
||||
|
||||
setTimeout(function() {
|
||||
if (!hasAnimation) {
|
||||
if ($.isFunction(self.settings.onShown)) {
|
||||
self.settings.onShown.call(this);
|
||||
}
|
||||
}
|
||||
}, 600);
|
||||
},
|
||||
bind: function() {
|
||||
var self = this;
|
||||
|
||||
this.$ele.find('[data-notify="dismiss"]').on('click', function() {
|
||||
self.close();
|
||||
})
|
||||
|
||||
this.$ele.mouseover(function(e) {
|
||||
$(this).data('data-hover', "true");
|
||||
}).mouseout(function(e) {
|
||||
$(this).data('data-hover', "false");
|
||||
});
|
||||
this.$ele.data('data-hover', "false");
|
||||
|
||||
if (this.settings.delay > 0) {
|
||||
self.$ele.data('notify-delay', self.settings.delay);
|
||||
var timer = setInterval(function() {
|
||||
var delay = parseInt(self.$ele.data('notify-delay')) - self.settings.timer;
|
||||
if ((self.$ele.data('data-hover') === 'false' && self.settings.mouse_over == "pause") || self.settings.mouse_over != "pause") {
|
||||
var percent = ((self.settings.delay - delay) / self.settings.delay) * 100;
|
||||
self.$ele.data('notify-delay', delay);
|
||||
self.$ele.find('[data-notify="progressbar"] > div').attr('aria-valuenow', percent).css('width', percent + '%');
|
||||
}
|
||||
if (delay <= -(self.settings.timer)) {
|
||||
clearInterval(timer);
|
||||
self.close();
|
||||
}
|
||||
}, self.settings.timer);
|
||||
}
|
||||
},
|
||||
close: function() {
|
||||
var self = this,
|
||||
$successors = null,
|
||||
posX = parseInt(this.$ele.css(this.settings.placement.from)),
|
||||
hasAnimation = false;
|
||||
|
||||
this.$ele.data('closing', 'true').addClass(this.settings.animate.exit);
|
||||
self.reposition(posX);
|
||||
|
||||
if ($.isFunction(self.settings.onClose)) {
|
||||
self.settings.onClose.call(this.$ele);
|
||||
}
|
||||
|
||||
this.$ele.one(this.animations.start, function(event) {
|
||||
hasAnimation = true;
|
||||
}).one(this.animations.end, function(event) {
|
||||
$(this).remove();
|
||||
if ($.isFunction(self.settings.onClosed)) {
|
||||
self.settings.onClosed.call(this);
|
||||
}
|
||||
});
|
||||
|
||||
setTimeout(function() {
|
||||
if (!hasAnimation) {
|
||||
self.$ele.remove();
|
||||
if (self.settings.onClosed) {
|
||||
self.settings.onClosed(self.$ele);
|
||||
}
|
||||
}
|
||||
}, 600);
|
||||
},
|
||||
reposition: function(posX) {
|
||||
var self = this,
|
||||
notifies = '[data-notify-position="' + this.settings.placement.from + '-' + this.settings.placement.align + '"]:not([data-closing="true"])',
|
||||
$elements = this.$ele.nextAll(notifies);
|
||||
if (this.settings.newest_on_top == true) {
|
||||
$elements = this.$ele.prevAll(notifies);
|
||||
}
|
||||
$elements.each(function() {
|
||||
$(this).css(self.settings.placement.from, posX);
|
||||
posX = (parseInt(posX)+parseInt(self.settings.spacing)) + $(this).outerHeight();
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
$.notify = function ( content, options ) {
|
||||
var plugin = new Notify( this, content, options );
|
||||
return plugin.notify;
|
||||
};
|
||||
$.notifyDefaults = function( options ) {
|
||||
defaults = $.extend(true, {}, defaults, options);
|
||||
return defaults;
|
||||
};
|
||||
$.notifyClose = function( command ) {
|
||||
if (typeof command === "undefined" || command == "all") {
|
||||
$('[data-notify]').find('[data-notify="dismiss"]').trigger('click');
|
||||
}else{
|
||||
$('[data-notify-position="'+command+'"]').find('[data-notify="dismiss"]').trigger('click');
|
||||
}
|
||||
};
|
||||
|
||||
}));
|
||||
2
htdocs/js/bootstrap-slider.js
vendored
2
htdocs/js/bootstrap-slider.js
vendored
@ -38,7 +38,7 @@
|
||||
}
|
||||
|
||||
self.addClass("slider-wrapper-jq")
|
||||
.append($("<div class='progress' style='position:relative;left:0'/>")
|
||||
.append($("<div class='progress' style='position:relative;left:0;height:20px;'/>")
|
||||
.append("<div class='progress-bar' style='position:width: 30%;background-color: "+
|
||||
options.barColor+"; -webkit-transition:none; transition:none;' />")
|
||||
.append("<div class='btn btn-default ' style='position:absolute;height:100%;padding:6px 10px;margin-left:-10px;vertical-align: top'>"));
|
||||
|
||||
6444
htdocs/js/bootstrap.bundle.js
vendored
6444
htdocs/js/bootstrap.bundle.js
vendored
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
7
htdocs/js/bootstrap.bundle.min.js
vendored
7
htdocs/js/bootstrap.bundle.min.js
vendored
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
128
htdocs/js/mpd.js
128
htdocs/js/mpd.js
@ -61,8 +61,7 @@ var app = $.sammy(function() {
|
||||
}
|
||||
|
||||
function prepare() {
|
||||
$('#navbar-top > li').removeClass('active');
|
||||
$('#navbar-bottom > li').removeClass('active');
|
||||
$('#navbar-bottom > div').removeClass('active');
|
||||
$('.page-item').addClass('hide');
|
||||
$('#add-all-songs').addClass('hide');
|
||||
pagination = 0;
|
||||
@ -303,11 +302,9 @@ function webSocketConnect() {
|
||||
try {
|
||||
socket.onopen = function() {
|
||||
console.log("connected");
|
||||
$('.top-right').notify({
|
||||
message:{text:"Connected to myMPD"},
|
||||
fadeOut: { enabled: true, delay: 500 }
|
||||
}).show();
|
||||
|
||||
|
||||
$.notify({message:"Connected to myMPD" },{ type: "success", offset: { y: 60, x:20 }});
|
||||
|
||||
app.run();
|
||||
/* emit initial request for output names */
|
||||
socket.send('MPD_API_GET_OUTPUTS');
|
||||
@ -318,8 +315,11 @@ function webSocketConnect() {
|
||||
socket.onmessage = function got_packet(msg) {
|
||||
if(msg.data === last_state || msg.data.length == 0)
|
||||
return;
|
||||
var obj = JSON.parse(msg.data);
|
||||
|
||||
try {
|
||||
var obj = JSON.parse(msg.data);
|
||||
} catch(e) {
|
||||
$.notify({ title: "Invalid JSON Data received", message: msg.data},{ type: "success", offset: { y: 60, x:20 }});
|
||||
}
|
||||
|
||||
switch (obj.type) {
|
||||
case 'queue':
|
||||
@ -367,9 +367,9 @@ function webSocketConnect() {
|
||||
$('#salamisandwich > tbody > tr').on({
|
||||
mouseover: function(){
|
||||
var doomed = $(this);
|
||||
if ( $('#btntrashmodeup').hasClass('active') )
|
||||
if ( $('#btntrashmodeup').hasClass('btn-success') )
|
||||
doomed = $("#salamisandwich > tbody > tr:lt(" + ($(this).index() + 1) + ")");
|
||||
if ( $('#btntrashmodedown').hasClass('active') )
|
||||
if ( $('#btntrashmodedown').hasClass('btn-success') )
|
||||
doomed = $("#salamisandwich > tbody > tr:gt(" + ($(this).index() - 1) + ")");
|
||||
$.each(doomed, function(){
|
||||
if($(this).children().last().has("a").length == 0)
|
||||
@ -382,9 +382,9 @@ function webSocketConnect() {
|
||||
},
|
||||
mouseleave: function(){
|
||||
var doomed = $(this);
|
||||
if ( $('#btntrashmodeup').hasClass('active') )
|
||||
if ( $('#btntrashmodeup').hasClass('btn-success') )
|
||||
doomed = $("#salamisandwich > tbody > tr:lt(" + ($(this).index() + 1) + ")");
|
||||
if ( $('#btntrashmodedown').hasClass('active') )
|
||||
if ( $('#btntrashmodedown').hasClass('btn-success') )
|
||||
doomed = $("#salamisandwich > tbody > tr:gt(" + ($(this).index() - 1) + ")");
|
||||
$.each(doomed, function(){$(this).children().last().find("a").stop().remove();});
|
||||
}
|
||||
@ -507,11 +507,8 @@ function webSocketConnect() {
|
||||
.find('a').click(function(e) {
|
||||
e.stopPropagation();
|
||||
socket.send(onClickAction + "," + decodeURI($(this).parents("tr").attr("uri")));
|
||||
$('.top-right').notify({
|
||||
message:{
|
||||
text: "\"" + $('td:nth-last-child(3)', $(this).parents("tr")).text() + "\" added"
|
||||
} }).show();
|
||||
}).fadeTo('fast',1);
|
||||
$.notify({message: "\"" + $('td:nth-last-child(3)', $(this).parents("tr")).text() + "\" added"},{ type: "success", offset: { y: 60, x:20 }});
|
||||
});
|
||||
}
|
||||
|
||||
if ( isTouch ) {
|
||||
@ -523,7 +520,7 @@ function webSocketConnect() {
|
||||
if($(this).is(".dir"))
|
||||
appendClickableIcon($(this).children().last(), 'MPD_API_ADD_TRACK', 'playlist_add');
|
||||
else if($(this).is(".song"))
|
||||
appendClickableIcon($(this).children().last(), 'MPD_API_ADD_PLAY_TRACK', 'playlist_add');
|
||||
appendClickableIcon($(this).children().last(), 'MPD_API_ADD_TRACK', 'playlist_add');
|
||||
},
|
||||
mouseleave: function(){
|
||||
$(this).children().last().find("a").stop().remove();
|
||||
@ -543,19 +540,12 @@ function webSocketConnect() {
|
||||
break;
|
||||
case 'song':
|
||||
socket.send("MPD_API_ADD_TRACK," + decodeURI($(this).attr("uri")));
|
||||
$('.top-right').notify({
|
||||
message:{
|
||||
text: "\"" + $('td:nth-last-child(3)', this).text() + "\" added"
|
||||
}
|
||||
}).show();
|
||||
|
||||
$.notify({message: "\"" + $('td:nth-last-child(3)', this).text() + "\" added"},{ type: "success", offset: { y: 60, x:20 }});
|
||||
break;
|
||||
case 'plist':
|
||||
socket.send("MPD_API_ADD_PLAYLIST," + decodeURI($(this).attr("uri")));
|
||||
$('.top-right').notify({
|
||||
message:{
|
||||
text: "\"" + $('td:nth-last-child(3)', this).text() + "\" added"
|
||||
}
|
||||
}).show();
|
||||
$.notify({message: "\"" + $('td:nth-last-child(3)', this).text() + "\" added"},{ type: "success", offset: { y: 60, x:20 }});
|
||||
break;
|
||||
}
|
||||
}
|
||||
@ -631,7 +621,8 @@ function webSocketConnect() {
|
||||
$('#btn-outputs-block button').remove();
|
||||
if ( Object.keys(obj.data).length ) {
|
||||
$.each(obj.data, function(id, name){
|
||||
var btn = $('<button id="btnoutput'+id+'" class="btn btn-secondary" onclick="toggleoutput(this, '+id+')"><span class="material-icons">volume_up</span> '+name+'</button>');
|
||||
var btn = $('<button id="btnoutput'+id+'" class="btn btn-secondary btn-block" onclick="toggleoutput(this, '+id+')">'+
|
||||
'<span class="material-icons" style="float:left;">volume_up</span> '+name+'</button>');
|
||||
btn.appendTo($('#btn-outputs-block'));
|
||||
});
|
||||
} else {
|
||||
@ -652,12 +643,7 @@ function webSocketConnect() {
|
||||
last_outputs = obj;
|
||||
break;
|
||||
case 'disconnected':
|
||||
if($('.top-right').has('div').length == 0)
|
||||
$('.top-right').notify({
|
||||
message:{text:"myMPD lost connection to MPD "},
|
||||
type: "danger",
|
||||
fadeOut: { enabled: true, delay: 1000 },
|
||||
}).show();
|
||||
$.notify({message: "myMPD lost connection to MPD "},{ type: "danger", offset: { y: 60, x:20 }});
|
||||
break;
|
||||
case 'update_queue':
|
||||
if(current_app === 'queue')
|
||||
@ -686,10 +672,7 @@ function webSocketConnect() {
|
||||
songNotify(obj.data.title, obj.data.artist, obj.data.album );
|
||||
else
|
||||
if (current_app != 'nowplaying') {
|
||||
$('.top-right').notify({
|
||||
message:{html: notification},
|
||||
type: "info",
|
||||
}).show();
|
||||
$.notify({message: notification },{ type: "success", offset: { y: 60, x:20 }});
|
||||
}
|
||||
break;
|
||||
case 'mpdhost':
|
||||
@ -713,10 +696,7 @@ function webSocketConnect() {
|
||||
}
|
||||
break;
|
||||
case 'error':
|
||||
$('.top-right').notify({
|
||||
message:{text: obj.data},
|
||||
type: "danger",
|
||||
}).show();
|
||||
$.notify({message: obj.data },{ type: "danger", offset: { y: 60, x:20 }});
|
||||
default:
|
||||
break;
|
||||
}
|
||||
@ -724,13 +704,7 @@ function webSocketConnect() {
|
||||
|
||||
socket.onclose = function(){
|
||||
console.log("disconnected");
|
||||
$('.top-right').notify({
|
||||
message:{text:"Connection to myMPD lost, retrying in 3 seconds "},
|
||||
type: "danger",
|
||||
onClose: function () {
|
||||
webSocketConnect();
|
||||
}
|
||||
}).show();
|
||||
$.notify({message:"Connection to myMPD lost, retrying in 3 seconds " },{ type: "danger", offset: { y: 60, x:20 }});
|
||||
}
|
||||
|
||||
} catch(exception) {
|
||||
@ -819,9 +793,7 @@ var updatePageTitle = function(songInfo) {
|
||||
|
||||
function updateDB() {
|
||||
socket.send('MPD_API_UPDATE_DB');
|
||||
$('.top-right').notify({
|
||||
message:{text:"Updating MPD Database... "}
|
||||
}).show();
|
||||
$.notify({message:"Updating MPD Database..." },{ type: "success", offset: { y: 60, x:20 }});
|
||||
}
|
||||
|
||||
function clickPlay() {
|
||||
@ -878,13 +850,13 @@ function setLocalStream(mpdhost) {
|
||||
}
|
||||
|
||||
function trash(tr) {
|
||||
if ( $('#btntrashmodeup').hasClass('active') ) {
|
||||
if ( $('#btntrashmodeup').hasClass('btn-success') ) {
|
||||
socket.send('MPD_API_RM_RANGE,0,' + (tr.index() + 1));
|
||||
tr.remove();
|
||||
} else if ( $('#btntrashmodesingle').hasClass('active') ) {
|
||||
} else if ( $('#btntrashmodesingle').hasClass('btn-success') ) {
|
||||
socket.send('MPD_API_RM_TRACK,' + tr.attr('trackid'));
|
||||
tr.remove();
|
||||
} else if ( $('#btntrashmodedown').hasClass('active') ) {
|
||||
} else if ( $('#btntrashmodedown').hasClass('btn-success') ) {
|
||||
socket.send('MPD_API_RM_RANGE,' + tr.index() + ',-1');
|
||||
tr.remove();
|
||||
};
|
||||
@ -934,6 +906,7 @@ $('#trashmode').children("button").on('click', function(e) {
|
||||
$('#btnnotify').on('click', function (e) {
|
||||
if($.cookie("notification") === "true") {
|
||||
$.cookie("notification", false);
|
||||
$('#btnnotify').removeClass("btn-success").addClass("btn-secondary");
|
||||
} else {
|
||||
Notification.requestPermission(function (permission) {
|
||||
if(!('permission' in Notification)) {
|
||||
@ -942,7 +915,7 @@ $('#btnnotify').on('click', function (e) {
|
||||
|
||||
if (permission === "granted") {
|
||||
$.cookie("notification", true, { expires: 424242 });
|
||||
$('btnnotify').removeClass("btn-secondary").addClass("btn-success");
|
||||
$('#btnnotify').removeClass("btn-secondary").addClass("btn-success");
|
||||
}
|
||||
});
|
||||
}
|
||||
@ -973,7 +946,7 @@ $('#search').submit(function () {
|
||||
return false;
|
||||
});
|
||||
|
||||
$('.page-btn').on('click', function (e) {
|
||||
$('.page-link').on('click', function (e) {
|
||||
|
||||
switch ($(this).text()) {
|
||||
case "Next":
|
||||
@ -1048,19 +1021,6 @@ function notificationsSupported() {
|
||||
}
|
||||
|
||||
function songNotify(title, artist, album) {
|
||||
/*var opt = {
|
||||
type: "list",
|
||||
title: title,
|
||||
message: title,
|
||||
items: []
|
||||
}
|
||||
if(artist.length > 0)
|
||||
opt.items.push({title: "Artist", message: artist});
|
||||
if(album.length > 0)
|
||||
opt.items.push({title: "Album", message: album});
|
||||
*/
|
||||
//chrome.notifications.create(id, options, creationCallback);
|
||||
|
||||
var textNotification = "";
|
||||
if(typeof artist != 'undefined' && artist.length > 0)
|
||||
textNotification += " " + artist;
|
||||
@ -1175,11 +1135,7 @@ function dirble_load_stations() {
|
||||
$.getJSON( "https://api.dirble.com/v2/station/"+$(this).attr("radioid")+"?token=" + dirble_api_token, function( data ) {
|
||||
|
||||
socket.send("MPD_API_ADD_TRACK," + data.streams[0].stream);
|
||||
$('.top-right').notify({
|
||||
message:{
|
||||
text: _this.text() + " added"
|
||||
}
|
||||
}).show();
|
||||
$.notify({message: _this.text() + " added"},{ type: "success", offset: { y: 60, x:20 }});
|
||||
});
|
||||
},
|
||||
mouseenter: function() {
|
||||
@ -1193,11 +1149,7 @@ function dirble_load_stations() {
|
||||
$.getJSON( "https://api.dirble.com/v2/station/"+_this.attr("radioid")+"?token=" + dirble_api_token, function( data ) {
|
||||
|
||||
socket.send("MPD_API_ADD_PLAY_TRACK," + data.streams[0].stream);
|
||||
$('.top-right').notify({
|
||||
message:{
|
||||
text: _this.text() + " added"
|
||||
}
|
||||
}).show();
|
||||
$.notify({message: _this.text() + " added" },{ type: "success", offset: { y: 60, x:20 }});
|
||||
});
|
||||
}).fadeTo('fast',1);
|
||||
},
|
||||
@ -1214,11 +1166,7 @@ function dirble_load_stations() {
|
||||
$.getJSON( "https://api.dirble.com/v2/station/"+$(this).attr("radioid")+"?token=" + dirble_api_token, function( data ) {
|
||||
|
||||
socket.send("MPD_API_ADD_TRACK," + data.streams[0].stream);
|
||||
$('.top-right').notify({
|
||||
message:{
|
||||
text: _this.text() + " added"
|
||||
}
|
||||
}).show();
|
||||
$.notify({message: _this.text() + " added"},{ type: "success", offset: { y: 60, x:20 }});
|
||||
});
|
||||
},
|
||||
mouseenter: function() {
|
||||
@ -1232,11 +1180,7 @@ function dirble_load_stations() {
|
||||
$.getJSON( "https://api.dirble.com/v2/station/"+_this.attr("radioid")+"?token=" + dirble_api_token, function( data ) {
|
||||
|
||||
socket.send("MPD_API_ADD_PLAY_TRACK," + data.streams[0].stream);
|
||||
$('.top-right').notify({
|
||||
message:{
|
||||
text: _this.text() + " added"
|
||||
}
|
||||
}).show();
|
||||
$.notify({message: _this.text() + " added"},{ type: "success", offset: { y: 60, x:20 }});
|
||||
});
|
||||
}).fadeTo('fast',1);
|
||||
},
|
||||
|
||||
Loading…
Reference in New Issue
Block a user