435 lines
17 KiB
JavaScript
435 lines
17 KiB
JavaScript
//just to ensure that the correct page is loaded iframe and http is checked again
|
|
if (window.top !== window.self || window.top.location != window.self.location || window.location.hostname !='youcount.github.io' || window.top.location.hostname != 'youcount.github.io')
|
|
window.top.location = window.self.location;
|
|
if(window.location.protocol != "https:")
|
|
window.location.href = "https:" + window.location.href.substring(window.location.protocol.length);
|
|
|
|
//this is to hide email from spam bots
|
|
var emailParts = ["manas.khurana20", "gmail", "com", ".", "@"];
|
|
document.getElementById('email').innerHTML = emailParts[0] + emailParts[4] + emailParts[1] + emailParts[3] + emailParts[2];
|
|
document.getElementById('email').href = "mailto:" + document.getElementById('email').innerHTML;
|
|
|
|
//below, the elements are assigned their onclicks.
|
|
$('#buttonBig').on("click", function() {
|
|
menubuttonfunc();
|
|
});
|
|
$('#fb').on("click", function() {
|
|
window.open('https://www.facebook.com/sharer/sharer.php?u=' + encodeURIComponent(document.querySelector('#pageUrl input').getAttribute("value")), '_blank');
|
|
});
|
|
$('#tw').on("click", function() {
|
|
window.open('https://twitter.com/share?text=' + document.getElementById('username').value + ' now has ' + actualCount.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") + ' subscribers!&url=' + encodeURIComponent(document.querySelector('#pageUrl input').getAttribute("value")) + '&hashtags=YouCount', '_blank');
|
|
});
|
|
$('#lnkdIn').on("click", function() {
|
|
window.open('https://www.linkedin.com/shareArticle?mini=true&url=' + encodeURIComponent(document.querySelector('#pageUrl input').getAttribute("value")) + '&title=' + encodeURIComponent(channelname) + '\'s%20Live%20Subscriber%20Count&source=YouCount', '_blank');
|
|
});
|
|
$('#tb').on("click", function() {
|
|
window.open('http://www.tumblr.com/share/link?url=' + encodeURIComponent(document.querySelector('#pageUrl input').getAttribute("value")), '_blank');
|
|
});
|
|
$('#rdit').on("click", function() {
|
|
window.open('http://www.reddit.com/submit?url=' + encodeURIComponent(document.querySelector('#pageUrl input').getAttribute("value")) + '&title=' + encodeURIComponent(channelname) + '\'s%20Live%20Subscriber%20Count', '_blank');
|
|
});
|
|
$('#link').on("click", function() {
|
|
linkshare();
|
|
});
|
|
$('#menuHelp,#menuAbout,#menuEmbed').on("click", function() {
|
|
nav('show', this.className);
|
|
});
|
|
$('#input button').on("click", function() {
|
|
getValue();
|
|
});
|
|
$('.suggest').on("click", function() {
|
|
username = this.dataset.id;
|
|
rawInput= this.dataset.id;
|
|
var url = "https://www.googleapis.com/youtube/v3/channels?part=snippet&id=" + this.dataset.id + "&fields=items/snippet&key=" + getKey();
|
|
getText(url, function(e) {
|
|
//set channel name in input box and title
|
|
channelname = e.items[0].snippet.title;
|
|
document.title = channelname + "'s YouTube Live Subscriber Count - YouCount";
|
|
changeText(document.querySelector("#username"), channelname);
|
|
|
|
//resetting charts so it loads again.
|
|
if(isChart===2){
|
|
isChart = 1;
|
|
}
|
|
//running live manually to get updated info immediately
|
|
live();
|
|
|
|
//set date of starting youtube with months in text (jan, feb, etc)
|
|
var pubDate = e.items[0].snippet.publishedAt.split("T")[0];
|
|
pubDate = pubDate.split("-");
|
|
if(pubDate[1]=='01')pubDate[1]='Jan'; else if(pubDate[1]=='02')pubDate[1]='Feb'; else if(pubDate[1]=='03')pubDate[1]='Mar'; else if(pubDate[1]=='04')pubDate[1]='Apr'; else if(pubDate[1]=='05')pubDate[1]='May'; else if(pubDate[1]=='06')pubDate[1]='Jun'; else if(pubDate[1]=='07')pubDate[1]='Jul'; else if(pubDate[1]=='08')pubDate[1]='Aug'; else if(pubDate[1]=='09')pubDate[1]='Sep'; else if(pubDate[1]=='10')pubDate[1]='Oct'; else if(pubDate[1]=='11')pubDate[1]='Nov'; else if(pubDate[1]=='12')pubDate[1]='Dec';
|
|
changeText(document.getElementById('pubDate'), pubDate[2] + '-' + pubDate[1] + '-' + pubDate[0]);
|
|
|
|
//set profile picture of channel
|
|
document.getElementById("dp").src = e.items[0].snippet.thumbnails.default.url;
|
|
|
|
if(popstatevar == 1) {
|
|
var urlCandidate, urlFinalName;
|
|
if(e.items[0].snippet.customUrl) {
|
|
urlCandidate = e.items[0].snippet.customUrl.trim();
|
|
} else {
|
|
urlCandidate = channelname.trim().replace(/\s+/g, '+');
|
|
}
|
|
var url = "https://www.googleapis.com/youtube/v3/search?part=snippet&q=" + encodeURIComponent(urlCandidate) + "&type=channel&maxResults=1&key=" + getKey();
|
|
getText(url, function(f) {
|
|
if((f.pageInfo.totalResults < 1) || (f.items[0].snippet.channelId.trim() != username)){
|
|
urlFinalName = username;
|
|
} else {
|
|
urlFinalName = urlCandidate;
|
|
}
|
|
history.pushState(null, null, "#!/" + urlFinalName);
|
|
//also sets iframe src url for embedding and url for sharing.
|
|
changeText(document.getElementById('embedUrl'), '<iframe src="https://youcount.github.io/e/#!/' + urlFinalName + '" height="100" width="250" frameborder="0"></iframe>');
|
|
changeText(document.querySelector('#pageUrl input'), 'https://youcount.github.io/#!/' + urlFinalName);
|
|
});
|
|
}
|
|
popstatevar = 1;//resetting of popstatevar
|
|
var url2 = "https://www.googleapis.com/youtube/v3/channels?part=statistics&id=" + username + "&fields=items/statistics&key=" + getKey();
|
|
getText(url2, function(e) {
|
|
changeText(document.getElementById("totalVideos"), e.items[0].statistics.videoCount.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","));
|
|
changeText(document.getElementById("totalViews"), e.items[0].statistics.viewCount.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","));
|
|
});
|
|
});
|
|
});
|
|
$('#logo').on("click", function() {
|
|
rawInput = preSelect[Math.floor(Math.random() * preSelect.length)];
|
|
queryName();
|
|
});
|
|
$('#showextra,#hideextra').on("click", function() {
|
|
extrabutton();
|
|
});
|
|
//these 2 functions give the share button its clicking function. if the button is clicked, the sharing features are shown, next time, they are hidden. The function after that checks if sharing features are being shown. If they are, it hides them whenever the body is clicked.
|
|
var shareswitch = 0;
|
|
$("#share").on("click", function() {
|
|
if(shareswitch === 0) {
|
|
$("#fb,#tw,#lnkdIn,#tb,#rdit,#link").fadeIn(200);
|
|
shareswitch = 3;
|
|
} else {
|
|
$("#fb,#tw,#lnkdIn,#tb,#rdit,#link").fadeOut(200);
|
|
setTimeout(function() {
|
|
shareswitch = 0;
|
|
}, 200);
|
|
}
|
|
});
|
|
$("body").on("click", function() {
|
|
if(shareswitch !== 0) {
|
|
--shareswitch;
|
|
if(shareswitch == 1) {
|
|
$("#fb,#tw,#lnkdIn,#tb,#rdit,#link").fadeOut(200);
|
|
setTimeout(function() {
|
|
shareswitch = 0;
|
|
}, 200);
|
|
}
|
|
}
|
|
});
|
|
//this thing gives the search box it's effects (material design thing + fading in search button) when it is clicked or focussed upon and effectively hides them as well.
|
|
$("#username").focusin(function() {
|
|
$("#input").css({
|
|
"background-color": "rgba(255,0,0,0.4)"
|
|
});
|
|
$("#input button").fadeIn(250);
|
|
$("#username").select();
|
|
});
|
|
$("#username").focusout(function() {
|
|
$("#input").css({
|
|
"background-color": "rgba(0,0,0,0.3)"
|
|
});
|
|
$("#input button, #suggest").fadeOut(250);
|
|
});
|
|
$("#username").on( "keyup",
|
|
function(){
|
|
var value = document.getElementById('username').value;
|
|
if(!value.trim()){
|
|
$("#suggest").hide();
|
|
return;
|
|
} else {
|
|
$("#suggest").show();
|
|
}
|
|
if(value.trim() == "Not Found!" || value.trim() == "Loading...")
|
|
return;
|
|
getText("https://www.googleapis.com/youtube/v3/search?part=snippet&q=" + encodeURIComponent(value) + "&type=channel&maxResults=5&relevanceLanguage=en&key=" + getKey(),
|
|
function(e) {
|
|
if(e.pageInfo.totalResults < 1) {//if no result found, return
|
|
return;
|
|
}//else
|
|
//show results in suggestions
|
|
for(var x=0;x<5;x++){
|
|
try {
|
|
document.querySelectorAll(".suggest")[x].style.display="block";
|
|
document.querySelectorAll(".suggest")[x].dataset.id = e.items[x].snippet.channelId.trim();
|
|
document.querySelectorAll(".suggest div")[x].textContent=e.items[x].snippet.title;
|
|
document.querySelectorAll(".suggestImg")[x].src = e.items[x].snippet.thumbnails.default.url;
|
|
} catch(error){
|
|
document.querySelectorAll(".suggest")[x].style.display="none";
|
|
}
|
|
}
|
|
});
|
|
});
|
|
|
|
//these 3 functions below store the y-axis location of the page (where it has been scrolled) then slide down the menu, set overflowing content in the main thing to hidden (so this menu thing can work properly) and do the vice versa as well
|
|
var menuswitch1 = 0, menuswitch2 = 0;
|
|
var loc;
|
|
|
|
function menubuttonfunc() {
|
|
if(menuswitch1 === 0) {
|
|
showmenu();
|
|
} else {
|
|
hidemenu();
|
|
}
|
|
}
|
|
|
|
function showmenu() {
|
|
loc = $("#buttonBig").offset().top;
|
|
setTimeout(function() {
|
|
$("#mainPage").css({
|
|
"overflow": "hidden"
|
|
});
|
|
$("#contents").css({
|
|
"position": "absolute"
|
|
});
|
|
menuswitch1 = 1;
|
|
}, 500);
|
|
menuswitch2 = 1;
|
|
$("#buttonBig").addClass("cross");
|
|
$("#contents").css({
|
|
"position": "fixed"
|
|
});
|
|
$('#contents').fadeIn(750);
|
|
$('#bg1').slideDown(500);
|
|
$("#buttonBig").css({
|
|
"background-color": "rgba(0,0,0,0.5)"
|
|
});
|
|
}
|
|
|
|
function hidemenu() {
|
|
setTimeout(function() {
|
|
menuswitch1 = 0;
|
|
}, 500);
|
|
menuswitch2 = 0;
|
|
$("#buttonBig").removeClass("cross");
|
|
$('#contents').fadeOut(250);
|
|
$('#contents,#bg1').slideUp(500);
|
|
$("#buttonBig").css({
|
|
"background-color": "transparent"
|
|
});
|
|
nav("hide", null);
|
|
$("#mainPage").css({
|
|
"overflow": "visible"
|
|
});
|
|
window.scrollTo(0, loc);
|
|
}
|
|
|
|
//nav shows and hides the pages in the menu. the last 'else' hides every page and is called when menu is closed
|
|
var articleStates = [0,0,0];
|
|
|
|
function nav(func, page) {
|
|
if(func == "show") {
|
|
var articles = ["#help","#about","#embed"], lis = ["#menuHelp","#menuAbout","#menuEmbed"];
|
|
page = Number(page[1]);
|
|
if(articleStates[page]==0){
|
|
$(articles[page]).slideDown(1000);
|
|
$(lis[page]).css({
|
|
'color': 'black',
|
|
'background-color': 'rgba(0,0,0,0.1)',
|
|
'font-weight': '900'
|
|
});
|
|
articleStates[page]=1;
|
|
} else {
|
|
$(articles[page]).slideUp(1000);
|
|
$(lis[page]).css({
|
|
'color': 'grey',
|
|
'background-color': 'white',
|
|
'font-weight': '100'
|
|
});
|
|
articleStates[page]=0;
|
|
}
|
|
} else {
|
|
$("#about,#help,#embed").hide();
|
|
$("#menuAbout,#menuHelp,#menuEmbed").css({
|
|
'color': 'grey',
|
|
'background-color': 'white',
|
|
'font-weight': '100'
|
|
});
|
|
articleStates = [0,0,0];
|
|
}
|
|
}
|
|
|
|
//this allows inputting of value using enter.
|
|
function trigenter(e) {
|
|
if(e.keyCode === 13) {
|
|
getValue();
|
|
}
|
|
}
|
|
|
|
//this shows/hides the sharable link of the page.
|
|
function linkshare() {
|
|
$("#pageUrl").fadeIn();
|
|
$("#bg2").fadeIn();
|
|
$("#bg2").on("click", function() {
|
|
$("#pageUrl").fadeOut();
|
|
$("#bg2").hide();
|
|
$("bg2").off("click");
|
|
});
|
|
}
|
|
var views = [];
|
|
for(var l=0;l<50;l++)views[l]=50-l;
|
|
function pushViews(url,i,auto) {
|
|
getText(url, function(e) {
|
|
views[i] = e.items[0].statistics.viewCount;
|
|
if(auto=="auto"&&i==((vids*2)-1))upCharts();
|
|
});
|
|
}
|
|
//this is used to show/hide the chart. if the chart is loading for the first time (ie firstload=0) first the script of chart is downloaded and then it is loaded.
|
|
var extraswitch = 0,
|
|
myLineChart2,
|
|
myLineChart3,
|
|
vids=5;
|
|
function extrabutton() {
|
|
if(firstload === 0) {
|
|
$("#showextra").html("LOADING...");
|
|
var reqType = (username.length >= 24 && username.substr(0, 2).toUpperCase() == "UC") ? "id" : "forUsername";
|
|
var url = "https://www.googleapis.com/youtube/v3/channels?part=contentDetails&" + reqType + "=" + username + "&fields=items/contentDetails/relatedPlaylists/uploads&key=" + getKey();
|
|
getText(url, function(e) {
|
|
var url = "https://www.googleapis.com/youtube/v3/playlistItems?part=snippet&playlistId=" + e.items[0].contentDetails.relatedPlaylists.uploads + "&maxResults=50&fields=items/snippet/resourceId/videoId&key=" + getKey();
|
|
getText(url, function(e) {
|
|
for(var i=0; e.items[i]; i++){
|
|
var url = "https://www.googleapis.com/youtube/v3/videos?part=statistics&id=" + e.items[i].snippet.resourceId.videoId + "&fields=items/statistics/viewCount&key=" + getKey();
|
|
pushViews(url,i);
|
|
}
|
|
$.getScript("https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.js", function() {
|
|
isChart = 1;
|
|
$("#extra").removeClass("extraCol");
|
|
$("#extra").addClass("extraExp");
|
|
$("#showextra").fadeOut();
|
|
$("#hideextra").fadeIn();
|
|
extraswitch = 1;
|
|
|
|
var data1=[],labels1=[];
|
|
for(var i=0;i<vids;i++){data1[i]=views[i];labels1[i]='';}
|
|
var myLineChart2Data = {
|
|
labels: labels1,
|
|
datasets: [{
|
|
label: "Views of last " + vids + " videos",
|
|
fill:false,
|
|
borderColor: "rgba(255,50,50,0.5)",
|
|
pointBorderColor: "rgba(255,50,50,0.5)",
|
|
pointBackgroundColor:"rgba(255,50,50,1)",
|
|
data: data1
|
|
}]
|
|
};
|
|
myLineChart2 = new Chart(document.getElementById("myChart2").getContext("2d"), {
|
|
type:"line",
|
|
data: myLineChart2Data,
|
|
gridLines:{display: false},
|
|
responsive: true,
|
|
maintainAspectRatio: false
|
|
});
|
|
var totviews = [(function(){var tot=0;for(var i=0;i<vids;i++)tot+=Number(views[i]);return tot;})(),(function(){var tot=0;for(var i=vids;i<(vids*2);i++)tot+=Number(views[i]);return tot;})()],
|
|
data2 = [Math.floor(totviews[0]/vids),Math.floor(totviews[1]/vids)],
|
|
labels2 = ["last "+vids+" videos","last to last "+vids+" videos"],
|
|
myLineChart3Data = {
|
|
labels: labels2,
|
|
datasets: [{
|
|
label: "Average Views",
|
|
borderColor: ["rgba(0,0,255,1)","rgba(0,255,0,1)"],
|
|
backgroundColor:["rgba(50,50,255,0.2)","rgba(50,255,50,0.2)"],
|
|
hoverBackgroundColor:["rgba(0,0,255,1)","rgba(0,255,0,1)"],
|
|
data: data2
|
|
}]
|
|
};
|
|
myLineChart3 = new Chart(document.getElementById("myChart3").getContext("2d"), {
|
|
type:"bar",
|
|
data: myLineChart3Data,
|
|
gridLines:{display: false},
|
|
responsive: true,
|
|
maintainAspectRatio: false
|
|
});
|
|
var data3 = [totviews[0],totviews[1]],
|
|
labels3 = ["last "+vids+" videos (total views)","last to last "+vids+" videos (total views)"],
|
|
myLineChart4Data = {
|
|
labels: labels3,
|
|
datasets: [{
|
|
label: "Total Views",
|
|
borderColor: ["rgba(0,0,255,1)","rgba(0,255,0,1)"],
|
|
backgroundColor:["rgba(50,50,255,0.2)","rgba(50,255,50,0.2)"],
|
|
hoverBackgroundColor:["rgba(0,0,255,1)","rgba(0,255,0,1)"],
|
|
data: data3
|
|
}]
|
|
};
|
|
myLineChart4 = new Chart(document.getElementById("myChart4").getContext("2d"), {
|
|
type:"doughnut",
|
|
data: myLineChart4Data,
|
|
gridLines:{display: false},
|
|
responsive: true,
|
|
maintainAspectRatio: false
|
|
});
|
|
changeText(document.getElementById('pubDate'), channeldate);
|
|
var url2 = "https://www.googleapis.com/youtube/v3/channels?part=statistics&" + reqType + "=" + username + "&fields=items/statistics(videoCount,viewCount)&key=" + getKey();
|
|
getText(url2, function(e) {
|
|
changeText(document.getElementById("totalVideos"), e.items[0].statistics.videoCount.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","));
|
|
changeText(document.getElementById("totalViews"), e.items[0].statistics.viewCount.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","));
|
|
});
|
|
});
|
|
});
|
|
});
|
|
$("#extraContent").fadeTo("fast",1);
|
|
$("#charts").fadeIn(500);
|
|
firstload = 1;
|
|
} else {
|
|
$("#showextra").html("SHOW STATS");
|
|
if(extraswitch === 0) {
|
|
isChart = 1;
|
|
$("#extra").removeClass("extraCol");
|
|
$("#extra").addClass("extraExp");
|
|
$("#showextra").fadeOut();
|
|
$("#hideextra").fadeIn();
|
|
$("#extraContent").fadeTo("fast",1);
|
|
extraswitch = 1;
|
|
} else {
|
|
myLineChart1.destroy();
|
|
$("#extra").removeClass("extraExp");
|
|
$("#extra").addClass("extraCol");
|
|
$("#showextra").fadeIn();
|
|
$("#hideextra").fadeOut(100);
|
|
$("#extraContent").fadeTo(0,0);
|
|
extraswitch = 0;
|
|
isChart = 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
function upCharts() {
|
|
if(Number($("#vids").val())>25)return;
|
|
vids = Number($("#vids").val());
|
|
var sum1=0,sum2=0;
|
|
for(var i=0;i<vids;i++){
|
|
myLineChart2.data.labels[i]='';
|
|
myLineChart2.data.datasets[0].data[i]=views[i];
|
|
sum1+=Number(views[i]);
|
|
}
|
|
for(i=vids;i<(vids*2);i++)sum2+=Number(views[i]);
|
|
myLineChart2.data.labels.splice(vids);
|
|
myLineChart2.data.datasets[0].data.splice(vids);
|
|
myLineChart2.data.datasets[0].label = "Views of last " + vids + " videos";
|
|
|
|
myLineChart3.data.labels= ["last "+vids+" videos","last to last "+vids+" videos"];
|
|
myLineChart3.data.datasets[0].data[0] = Math.floor(sum1/vids);
|
|
myLineChart3.data.datasets[0].data[1] = Math.floor(sum2/vids);
|
|
|
|
myLineChart4.data.labels= ["last "+vids+" videos (total views)","last to last "+vids+" videos (total views)"];
|
|
myLineChart4.data.datasets[0].data[0] = sum1;
|
|
myLineChart4.data.datasets[0].data[1] = sum2;
|
|
|
|
myLineChart2.update();
|
|
myLineChart3.update();
|
|
myLineChart4.update();
|
|
}
|
|
|
|
//images are loaded after the whole page is loaded (since it has a big download size and sends multiple requests).
|
|
var images = document.getElementsByTagName("img");
|
|
for(var pl=0;pl<images.length;pl++){
|
|
if(!images[pl].src && images[pl].id && images[pl].id!="instruct"){
|
|
images[pl].src = '/images/' + images[pl].id + '.png';
|
|
}
|
|
}
|
|
document.getElementById("instruct").src="/images/instruct.png"; |