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
+2
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>
+25
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 **************/
+1 -1
View File
File diff suppressed because one or more lines are too long
+1 -1
View File
File diff suppressed because one or more lines are too long
+2 -2
View File
File diff suppressed because one or more lines are too long
+2
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
-18
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");
}
}
+37 -3
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;
+11
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
+3
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]));
};