Added scroll to top buttons in playlist

This commit is contained in:
Kasper Rynning-Tønnesen
2016-02-12 18:12:08 +01:00
parent dab1b5ef0c
commit 65d637015f
10 changed files with 84 additions and 25 deletions

View File

@@ -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>

View File

@@ -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 **************/

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@@ -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

View File

@@ -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() + "&amp;text=Check%20out%20this%20playlist%20" + chan.toLowerCase() + "%20on%20Zöff!&amp;via=zoffmusic")
$("#twitter-code-link").attr("onclick", "window.open('http://twitter.com/intent/tweet?url=https://zoff.no/" + chan.toLowerCase() + "/&amp;text=Check%20out%20this%20playlist%20" + chan.toLowerCase() + "%20on%20Zöff!&amp;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/&amp;text=Check%20out%20Zöff!&amp;via=zoffmusic")
$("#twitter-code-link").attr("onclick", "window.open('http://twitter.com/intent/tweet?url=https://zoff.no/&amp;text=Check%20out%20Zöff!&amp;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");
}
}

View File

@@ -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() + "&amp;text=Check%20out%20this%20playlist%20" + chan.toLowerCase() + "%20on%20Zöff!&amp;via=zoffmusic")
$("#twitter-code-link").attr("onclick", "window.open('http://twitter.com/intent/tweet?url=https://zoff.no/" + chan.toLowerCase() + "/&amp;text=Check%20out%20this%20playlist%20" + chan.toLowerCase() + "%20on%20Zöff!&amp;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;

View File

@@ -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/&amp;text=Check%20out%20Zöff!&amp;via=zoffmusic")
$("#twitter-code-link").attr("onclick", "window.open('http://twitter.com/intent/tweet?url=https://zoff.no/&amp;text=Check%20out%20Zöff!&amp;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

View File

@@ -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]));
};