mirror of
https://github.com/KevinMidboe/zoff.git
synced 2025-10-29 18:00:23 +00:00
Added scroll to top buttons in playlist
This commit is contained in:
@@ -229,6 +229,8 @@
|
||||
</div>
|
||||
</div>
|
||||
<div id="playlist" class="col s12 m3">
|
||||
<div id="top-button" title="Scroll to the top" class="hide hide-on-small-only">Top</div>
|
||||
<div id="bottom-button" title="Scroll to the bottom" class="hide hide-on-small-only">Bottom</div>
|
||||
<ul class="tabs playlist-tabs hide-on-small-only hide">
|
||||
<li class="tab col s3"><a class="playlist-tab-links" href="#wrapper">Playlist</a></li>
|
||||
<li class="tab col s3"><a class="playlist-tab-links" href="#suggestions">Suggested</a></li>
|
||||
|
||||
@@ -875,6 +875,7 @@ ul #chat-log{
|
||||
#playlist{
|
||||
/*padding:0px 15px;*/
|
||||
flex:1;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#player{
|
||||
@@ -1112,6 +1113,30 @@ nav ul li:hover, nav ul li.active {
|
||||
width:15px;
|
||||
}
|
||||
|
||||
#top-button, #bottom-button{
|
||||
color: white;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translate(-50%);
|
||||
background-color: #2d2d2d;
|
||||
width: 70px;
|
||||
height: 27px;
|
||||
z-index: 1;
|
||||
cursor:pointer;
|
||||
}
|
||||
|
||||
#top-button{
|
||||
top:0px;
|
||||
}
|
||||
|
||||
.top-button-with-tabs{
|
||||
top:53px !important;
|
||||
}
|
||||
|
||||
#bottom-button{
|
||||
bottom: 0px;
|
||||
}
|
||||
|
||||
|
||||
/************** Youtube controls **************/
|
||||
|
||||
|
||||
2
static/dist/embed.min.js
vendored
2
static/dist/embed.min.js
vendored
File diff suppressed because one or more lines are too long
2
static/dist/frontpage.min.js
vendored
2
static/dist/frontpage.min.js
vendored
File diff suppressed because one or more lines are too long
4
static/dist/main.min.js
vendored
4
static/dist/main.min.js
vendored
File diff suppressed because one or more lines are too long
@@ -84,6 +84,7 @@ var Admin = {
|
||||
$("#password").attr("placeholder", "Change channel password")
|
||||
$(".playlist-tabs").removeClass("hide");
|
||||
$("#wrapper").toggleClass("tabs_height");
|
||||
$("#top-button").toggleClass("top-button-with-tabs");
|
||||
|
||||
if(!Helper.contains($("#admin-lock").attr("class").split(" "), "mdi-action-lock-open"))
|
||||
$("#admin-lock").addClass("mdi-action-lock-open clickable");
|
||||
@@ -152,6 +153,7 @@ var Admin = {
|
||||
$("#wrapper").removeClass("tabs_height");
|
||||
$("#admin-lock").removeClass("mdi-action-lock-open clickable");
|
||||
$("#password").attr("placeholder", "Enter channel password");
|
||||
$("#top-button").removeClass("top-button-with-tabs");
|
||||
},
|
||||
|
||||
//function used in html onlick
|
||||
|
||||
@@ -210,24 +210,6 @@ var Helper = {
|
||||
$("#contact-container").html("Something went wrong, sorry about that. You could instead try with your own mail-client: <a title='Open in client' href='mailto:contact@zoff.no?Subject=Contact%20Zoff&Body=" + message + "'>contact@zoff.no</a>");
|
||||
|
||||
|
||||
}
|
||||
},
|
||||
|
||||
share_link_modifier: function(in_list){
|
||||
if(in_list){
|
||||
$("#facebook-code-link").attr("href", "https://www.facebook.com/sharer/sharer.php?u=https://zoff.no/" + chan.toLowerCase());
|
||||
$("#facebook-code-link").attr("onclick", "window.open('https://www.facebook.com/sharer/sharer.php?u=https://zoff.no/" + chan.toLowerCase() + "', 'Share Playlist','width=600,height=300'); return false;");
|
||||
$("#twitter-code-link").attr("href", "http://twitter.com/intent/tweet?url=https://zoff.no/" + chan.toLowerCase() + "&text=Check%20out%20this%20playlist%20" + chan.toLowerCase() + "%20on%20Zöff!&via=zoffmusic")
|
||||
$("#twitter-code-link").attr("onclick", "window.open('http://twitter.com/intent/tweet?url=https://zoff.no/" + chan.toLowerCase() + "/&text=Check%20out%20this%20playlist%20" + chan.toLowerCase() + "%20on%20Zöff!&via=zoffmusic','Share Playlist','width=600,height=300'); return false;");
|
||||
$("#qr-code-link").attr("href", "//chart.googleapis.com/chart?chs=500x500&cht=qr&chl=https://zoff.no/" + chan.toLowerCase() + "&choe=UTF-8&chld=L%7C1");
|
||||
$("#qr-code-image-link").attr("src", "//chart.googleapis.com/chart?chs=150x150&cht=qr&chl=https://zoff.no/" + chan.toLowerCase() + "&choe=UTF-8&chld=L%7C1");
|
||||
}else{
|
||||
$("#facebook-code-link").attr("href", "https://www.facebook.com/sharer/sharer.php?u=https://zoff.no/");
|
||||
$("#facebook-code-link").attr("onclick", "window.open('https://www.facebook.com/sharer/sharer.php?u=https://zoff.no/', 'Share Zöff','width=600,height=300'); return false;");
|
||||
$("#twitter-code-link").attr("href", "http://twitter.com/intent/tweet?url=https://zoff.no/&text=Check%20out%20Zöff!&via=zoffmusic")
|
||||
$("#twitter-code-link").attr("onclick", "window.open('http://twitter.com/intent/tweet?url=https://zoff.no/&text=Check%20out%20Zöff!&via=zoffmusic','Share Playlist','width=600,height=300'); return false;");
|
||||
$("#qr-code-link").attr("href", "//chart.googleapis.com/chart?chs=500x500&cht=qr&chl=https://zoff.no/&choe=UTF-8&chld=L%7C1");
|
||||
$("#qr-code-image-link").attr("src", "//chart.googleapis.com/chart?chs=150x150&cht=qr&chl=https://zoff.no/&choe=UTF-8&chld=L%7C1");
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -58,7 +58,7 @@ function init(){
|
||||
onepage_load();
|
||||
}
|
||||
|
||||
Helper.share_link_modifier(true);
|
||||
share_link_modifier();
|
||||
|
||||
chan = $("#chan").html();
|
||||
if(window.location.hostname == "zoff.no") add = "https://zoff.no";
|
||||
@@ -395,6 +395,42 @@ $(document).on("click", ".brand-logo-navigate", function(e){
|
||||
onepage_load();
|
||||
});
|
||||
|
||||
$(document).on("mousemove", "#playlist", function(e)
|
||||
{
|
||||
var y = e.pageY - this.offsetTop;
|
||||
if(y <= 27){
|
||||
$("#top-button").removeClass("hide");
|
||||
Helper.addClass("#bottom-button", "hide");
|
||||
}else if(y >= $("#playlist").height() - 18){
|
||||
$("#bottom-button").removeClass("hide");
|
||||
Helper.addClass("#top-button", "hide");
|
||||
}else{
|
||||
Helper.addClass("#bottom-button", "hide");
|
||||
Helper.addClass("#top-button", "hide");
|
||||
}
|
||||
});
|
||||
|
||||
$(document).on("mouseleave", "#playlist", function(){
|
||||
Helper.addClass("#bottom-button", "hide");
|
||||
Helper.addClass("#top-button", "hide");
|
||||
});
|
||||
|
||||
$(document).on("click", "#top-button", function(){
|
||||
List.scrollTop();
|
||||
});
|
||||
|
||||
$(document).on("click", "#bottom-button", function(){
|
||||
List.scrollBottom();
|
||||
});
|
||||
|
||||
function share_link_modifier(){
|
||||
$("#facebook-code-link").attr("href", "https://www.facebook.com/sharer/sharer.php?u=https://zoff.no/" + chan.toLowerCase());
|
||||
$("#facebook-code-link").attr("onclick", "window.open('https://www.facebook.com/sharer/sharer.php?u=https://zoff.no/" + chan.toLowerCase() + "', 'Share Playlist','width=600,height=300'); return false;");
|
||||
$("#twitter-code-link").attr("href", "http://twitter.com/intent/tweet?url=https://zoff.no/" + chan.toLowerCase() + "&text=Check%20out%20this%20playlist%20" + chan.toLowerCase() + "%20on%20Zöff!&via=zoffmusic")
|
||||
$("#twitter-code-link").attr("onclick", "window.open('http://twitter.com/intent/tweet?url=https://zoff.no/" + chan.toLowerCase() + "/&text=Check%20out%20this%20playlist%20" + chan.toLowerCase() + "%20on%20Zöff!&via=zoffmusic','Share Playlist','width=600,height=300'); return false;");
|
||||
$("#qr-code-link").attr("href", "//chart.googleapis.com/chart?chs=500x500&cht=qr&chl=https://zoff.no/" + chan.toLowerCase() + "&choe=UTF-8&chld=L%7C1");
|
||||
$("#qr-code-image-link").attr("src", "//chart.googleapis.com/chart?chs=150x150&cht=qr&chl=https://zoff.no/" + chan.toLowerCase() + "&choe=UTF-8&chld=L%7C1");
|
||||
}
|
||||
|
||||
function onepage_load(){
|
||||
|
||||
@@ -413,8 +449,6 @@ function onepage_load(){
|
||||
$("#channel-load").css("display", "block");
|
||||
window.scrollTo(0, 0);
|
||||
|
||||
Helper.share_link_modifier(false);
|
||||
|
||||
Youtube.stopInterval = true;
|
||||
Admin.display_logged_out();
|
||||
Admin.beginning = true;
|
||||
|
||||
@@ -260,6 +260,15 @@ String.prototype.capitalizeFirstLetter = function() {
|
||||
|
||||
$().ready(initfp);
|
||||
|
||||
function share_link_modifier(){
|
||||
$("#facebook-code-link").attr("href", "https://www.facebook.com/sharer/sharer.php?u=https://zoff.no/");
|
||||
$("#facebook-code-link").attr("onclick", "window.open('https://www.facebook.com/sharer/sharer.php?u=https://zoff.no/', 'Share Zöff','width=600,height=300'); return false;");
|
||||
$("#twitter-code-link").attr("href", "http://twitter.com/intent/tweet?url=https://zoff.no/&text=Check%20out%20Zöff!&via=zoffmusic")
|
||||
$("#twitter-code-link").attr("onclick", "window.open('http://twitter.com/intent/tweet?url=https://zoff.no/&text=Check%20out%20Zöff!&via=zoffmusic','Share Playlist','width=600,height=300'); return false;");
|
||||
$("#qr-code-link").attr("href", "//chart.googleapis.com/chart?chs=500x500&cht=qr&chl=https://zoff.no/&choe=UTF-8&chld=L%7C1");
|
||||
$("#qr-code-image-link").attr("src", "//chart.googleapis.com/chart?chs=150x150&cht=qr&chl=https://zoff.no/&choe=UTF-8&chld=L%7C1");
|
||||
}
|
||||
|
||||
function initfp(){
|
||||
|
||||
|
||||
@@ -273,6 +282,8 @@ function initfp(){
|
||||
|
||||
channel_list = $("#channel-list-container").html();
|
||||
|
||||
share_link_modifier();
|
||||
|
||||
var connection_options = {
|
||||
'secure': true,
|
||||
'force new connection': true
|
||||
|
||||
@@ -212,6 +212,9 @@ var Youtube = {
|
||||
var color = colorThief.getColor(img);
|
||||
|
||||
document.getElementsByTagName("body")[0].style.backgroundColor = Helper.rgbToHsl(color);
|
||||
document.getElementById("top-button").style.backgroundColor = Helper.rgbToHsl(color);
|
||||
document.getElementById("bottom-button").style.backgroundColor = Helper.rgbToHsl(color);
|
||||
|
||||
$("meta[name=theme-color]").attr("content", Helper.rgbToHex(color[0], color[1], color[2]));
|
||||
};
|
||||
|
||||
|
||||
Reference in New Issue
Block a user