KevinMidboe/zoff
1
0
Fork 0
mirror of https://github.com/KevinMidboe/zoff.git synced 2025-10-29 18:00:23 +00:00
Code Issues Packages Projects Releases Wiki Activity

Added scroll to top buttons in playlist

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

2
index.php
View File

@@ -229,6 +229,8 @@
</div> </div>
</div> </div>
<div id="playlist" class="col s12 m3"> <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"> <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="#wrapper">Playlist</a></li>
<li class="tab col s3"><a class="playlist-tab-links" href="#suggestions">Suggested</a></li> <li class="tab col s3"><a class="playlist-tab-links" href="#suggestions">Suggested</a></li>

25
static/css/style.css
View File

@@ -875,6 +875,7 @@ ul #chat-log{
#playlist{ #playlist{
/*padding:0px 15px;*/ /*padding:0px 15px;*/
flex:1; flex:1;
position: relative;
} }
#player{ #player{
@@ -1112,6 +1113,30 @@ nav ul li:hover, nav ul li.active {
width:15px; 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 **************/ /************** Youtube controls **************/

2
static/dist/embed.min.js vendored
View File

File diff suppressed because one or more lines are too long

2
static/dist/frontpage.min.js vendored
View File

File diff suppressed because one or more lines are too long

4
static/dist/main.min.js vendored
View File

File diff suppressed because one or more lines are too long

2
static/js/admin.js
View File

@@ -84,6 +84,7 @@ var Admin = {
$("#password").attr("placeholder", "Change channel password") $("#password").attr("placeholder", "Change channel password")
$(".playlist-tabs").removeClass("hide"); $(".playlist-tabs").removeClass("hide");
$("#wrapper").toggleClass("tabs_height"); $("#wrapper").toggleClass("tabs_height");
$("#top-button").toggleClass("top-button-with-tabs");
if(!Helper.contains($("#admin-lock").attr("class").split(" "), "mdi-action-lock-open")) if(!Helper.contains($("#admin-lock").attr("class").split(" "), "mdi-action-lock-open"))
$("#admin-lock").addClass("mdi-action-lock-open clickable"); $("#admin-lock").addClass("mdi-action-lock-open clickable");
@@ -152,6 +153,7 @@ var Admin = {
$("#wrapper").removeClass("tabs_height"); $("#wrapper").removeClass("tabs_height");
$("#admin-lock").removeClass("mdi-action-lock-open clickable"); $("#admin-lock").removeClass("mdi-action-lock-open clickable");
$("#password").attr("placeholder", "Enter channel password"); $("#password").attr("placeholder", "Enter channel password");
$("#top-button").removeClass("top-button-with-tabs");
}, },
//function used in html onlick //function used in html onlick

18
static/js/helpers.js
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>"); $("#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");
} }
} }

40
static/js/listeners.js
View File

@@ -58,7 +58,7 @@ function init(){
onepage_load(); onepage_load();
} }
Helper.share_link_modifier(true); share_link_modifier();
chan = $("#chan").html(); chan = $("#chan").html();
if(window.location.hostname == "zoff.no") add = "https://zoff.no"; if(window.location.hostname == "zoff.no") add = "https://zoff.no";
@@ -395,6 +395,42 @@ $(document).on("click", ".brand-logo-navigate", function(e){
onepage_load(); 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(){ function onepage_load(){
@@ -413,8 +449,6 @@ function onepage_load(){
$("#channel-load").css("display", "block"); $("#channel-load").css("display", "block");
window.scrollTo(0, 0); window.scrollTo(0, 0);
Helper.share_link_modifier(false);
Youtube.stopInterval = true; Youtube.stopInterval = true;
Admin.display_logged_out(); Admin.display_logged_out();
Admin.beginning = true; Admin.beginning = true;

11
static/js/nochan.js
View File

@@ -260,6 +260,15 @@ String.prototype.capitalizeFirstLetter = function() {
$().ready(initfp); $().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(){ function initfp(){
@@ -273,6 +282,8 @@ function initfp(){
channel_list = $("#channel-list-container").html(); channel_list = $("#channel-list-container").html();
share_link_modifier();
var connection_options = { var connection_options = {
'secure': true, 'secure': true,
'force new connection': true 'force new connection': true

3
static/js/youtube.js
View File

@@ -212,6 +212,9 @@ var Youtube = {
var color = colorThief.getColor(img); var color = colorThief.getColor(img);
document.getElementsByTagName("body")[0].style.backgroundColor = Helper.rgbToHsl(color); 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])); $("meta[name=theme-color]").attr("content", Helper.rgbToHex(color[0], color[1], color[2]));
}; };