DashboardFE/js/scripts.js

$('body').on('click', '.spoiler', function() {
	$(this).find("a").toggle();
	$(this).next('div').toggle();
});

$('body').on('click', '.blur', function(e) {
	e.stopPropagation();
	$(this).prev().toggle();
	$(this).toggle();
	$(this).next('a').toggle();
});

$('body').on('click', '.toggleblur', function(e) {
	e.stopPropagation();
	$(this).toggle();
	$(this).next('a').next('a').toggle();
	$(this).next('a').toggle();
});

$('body').on('click', '#emoji', function(e) {
	$(this).closest(".element").find('.picker').toggle();
	$('#emojisearch').focus();
});

$('body').on('click', '#contact', function(e) {
	$(this).closest(".element").find('.contactpicker').toggle();
	$('#contactsearch').focus();
});

$('body').on('click', '.emoji', function(e) {
	var code = $(this).attr("title");
	console.log(code);
	boxtxt = $(this).closest(".element").find("#status").val();
	$(this).closest(".element").find("#status").val(boxtxt + ":"+code+":");
});

$('body').on('click', '.contact', function(e) {
	var code = $(this).attr("title");
	console.log(code);
	boxtxt = $(this).closest(".element").find("#status").val();
	$(this).closest(".element").find("#status").val(boxtxt + code+" ");
});

$(document).on("change paste keyup","#emojisearch",function () {
   var val = $(this).val();
   var list = $(this).closest('.element').find('.emojilist');
   console.log(val); 
	$.get("action.php?a=true&emoji=" + val, function(data) {
		list.html(data);
	});
});

$(document).on("change paste keyup","#contactsearch",function () {
   var val = $(this).val();
   var list = $(this).closest('.element').find('.contactlist');
   console.log(val); 
	$.get("action.php?a=true&contact=" + val, function(data) {
		list.html(data);
	});
});

// Open Lightbox
$('body').on('click', '.open-lightbox', function(e) {
	e.preventDefault();
	e.stopPropagation();
	var image = $(this).attr('href');
	$('html').addClass('no-scroll');
	$('body').append('<div class="lightbox-opened"><img style="max-height:100%; max-width:100%;" src="' + image + '"></div>');
});

// Close Lightbox
$('body').on('click', '.lightbox-opened', function() {
	$('html').removeClass('no-scroll');
	$('.lightbox-opened').remove();
});

window.addEventListener("scroll", function() {
	onScrollDiv()
});
window.addEventListener("DOMContentLoaded", function() {
	onScrollDiv()
});

function onScrollDiv() {
	var images = document.querySelectorAll('.lazyload');
	for (var i = 0, nb = images.length; i < nb; i++) {
		var img = images[i]
		var rect = img.getBoundingClientRect();
		var isVisible = ((rect.top - window.innerHeight) < 500 && (rect.bottom) > -50) ? true : false;

		if (isVisible) {
			if (!img.src) {
				img.src = img.dataset.src;
			}
		}
	}
}

$('body').on('click', '.replies', function(e) {
	e.preventDefault;
	$(".reply").remove();
	$(".element").removeClass("element_pad");
	$(this).closest(".element").addClass("element_pad");
	/*$('.replies_container').html('');*/
	var id = $(this).parent().parent().attr('id');
	if($('#' + id+'.replies_container').find('.reply').length < 1){
		$('#' + id+'.replies_container').html("<p><img src='img/loading.gif'></p>");
	}
	$.get("action.php?a=true&replies=" + id, function(data) {
		$('#' + id+'.replies_container').html(data);
		$('#' + id+'.replies_container').delay(800).fadeIn(400);
		$('#a' + id).html('');
		$('#' + id+".replies_container .ancestor").appendTo('#a' + id);
	});
});

$.fn.isOnScreen = function(){

    var win = $(window);

    var viewport = {
        top : win.scrollTop(),
        left : win.scrollLeft()
    };
    viewport.right = viewport.left + win.width();
    viewport.bottom = viewport.top + win.height();

    var bounds = this.offset();
    bounds.right = bounds.left + this.outerWidth();
    bounds.bottom = bounds.top + this.outerHeight();

    return (!(viewport.right < bounds.left || viewport.left > bounds.right || viewport.bottom < bounds.top || viewport.top > bounds.bottom));

};


$('body').on('click', '.ldr:not(.tlicon)', function(e) {
	$('.tlicon').each(function(a){
       $( this ).removeClass('tiselected')
     });
});

$('body').on('click', '.ldr', function(e) {
	e.preventDefault();
	location.hash = "#top";
	$('#loader').html('');
	$('#loaded').remove();
	var url = $(this).attr('href');
	var id = $(this).attr('id');
	localStorage.setItem("content", $('#content .element').detach());
	$('#content').html('<center><div class="loadingImage"></div></center>');
	$.get(url + "&ajax=1", function(data) {
		$('#content').html(data);
		history.pushState({}, "Dashboard FE", url);
		var thread = getUrlParameter('thread');
	});
});


$('body').on('click', '.gotop a', function(e) {
	e.preventDefault();
	$('html, body').animate({
		scrollTop: 0
	}, 800);
	return false;
});

$('body').on('click', '.topbar:not(a)', function(e) {
	if(e.target !== e.currentTarget) return;
	e.preventDefault();
	$('html, body').animate({
		scrollTop: 0
	}, 800);
	return false;
});

$('body').on('click', '#loader', function() {
	var cnt = $("#loaded").contents();
	//		$("#content").prepend(cnt);
	$('#content').find('.element').first().after(cnt);
	$("#loaded").remove();
	$("#loader").html('');
});

$('body').on('click', '.listdelete', function() {
	var id = $(this).attr('id');
	$.get("action.php?listdelete=" + id, function(data) {
		$("#"+id).remove();
	});
});

$('body').on('click', '.softmutedelete', function() {
	var id = $(this).attr('id');
	$.get("action.php?softmutedelete=" + id, function(data) {
		$("#"+id).remove();
	});
});

$('body').on('click', '.listnew', function() {
	var name = $(this).prev().val();
	$.get("action.php?listnew=" + name, function(data) {
		location.reload(true)
	});
});

$("li input").keypress(function (e) {
 var key = e.which;
 if(key == 13)  // the enter key code
  {
    var name = $(this).val();
	$.get("action.php?listnew=" + name, function(data) {
		location.reload(true)
	}); 
  }
});   

$('body').on('click', '.nsfw', function() {
	var id = $(this).attr('id');
	$.get("action.php?a=true&nsfw=" + id, function(data) {
		if (data == '1') {
			$('#' + id + '.nsfw').toggleClass('nsfw unnsfw');
			$('#' + id + '.unnsfw').html('NSFW <span class="fontello">&#xf205;</span>');
		}
	});
});

$('body').on('click', '.unnsfw', function() {
	var id = $(this).attr('id');
	$.get("action.php?a=true&nsfw=" + id, function(data) {
		if (data == '1') {
			$('#' + id + '.unnsfw').toggleClass('unnsfw nsfw');
			$('#' + id + '.nsfw').html('NSFW <span class="fontello">&#xf204;</span>');
		}
	});
});

$('body').on('click', '.block', function() {
	var id = $(this).attr('id');
	$.get("action.php?a=true&mode=true&block=" + id, function(data) {
		
			$('#' + id + '.block').removeClass('block').addClass('unblock');
			$('#' + id + '.unblock').html('Unblock');
		
	});
});

$('body').on('click', '.unblock', function() {
	var id = $(this).attr('id');
	$.get("action.php?a=true&mode=off&block=" + id, function(data) {
		
			$('#' + id + '.unblock').removeClass('unblock').addClass('block');
			$('#' + id + '.block').html('Block');
		
	});
});

$('body').on('click', '.autl', function() {
	var id = $(this).attr('id');
	var list = $(this).attr('list');
	$.get("action.php?a=true&mode=true&user=" + id + "&list=" + list, function(data) {
		
		$('#' + id + '.autl').removeClass('autl').addClass('rutl');
		/* $('#' + id + '.rutl li').html('Added'); */
	});
});

$('body').on('click', '.rutl', function() {
	var elem = $(this);
	var id = $(this).attr('id');
	var list = $(this).attr('list');
	$.get("action.php?a=true&mode=off&user=" + id + "&list=" + list, function(data) {
		$('#' + id + '.rutl').removeClass('rutl').addClass('autl');
		/* $(elem).find('li').html('Removed');*/
	});
});



$('body').on('click', '.hide', function() {
	var id = $(this).attr('id');
	$.get("action.php?a=true&mode=true&hide=" + id, function(data) {
		$('#' + id + '.hide').removeClass('hide').addClass('unhide');
		$('#' + id + '.unhide').html('Unhide Thread');
		console.log(data);
	});
});

$('body').on('click', '.unhide', function() {
	var id = $(this).attr('id');
	$.get("action.php?a=true&mode=off&hide=" + id, function(data) {
		$('#' + id + '.unhide').removeClass('unhide').addClass('hide');
		$('#' + id + '.hide').html('Hide Thread');
		console.log(data);
	});
});

$('body').on('click', '.bookmark', function() {
	var id = $(this).attr('id');
	$.get("action.php?a=true&mode=true&bookmark=" + id, function(data) {
		$('#' + id + '.bookmark').removeClass('bookmark').addClass('unbookmark');
		$('#' + id + '.unbookmark').html('Unbookmark');
		console.log(data);
	});
});

$('body').on('click', '.unbookmark', function() {
	var id = $(this).attr('id');
	$.get("action.php?a=true&mode=off&bookmark=" + id, function(data) {
		$('#' + id + '.unbookmark').removeClass('unbookmark').addClass('bookmark');
		$('#' + id + '.bookmark').html('Bookmark');
		console.log(data);
	});
});

$('body').on('click', '.follow', function() {
	var id = $(this).attr('id');
	$.get("action.php?a=true&follow=" + id, function(data) {
		console.log(data);
		if (data == '1') {
			$('#' + id + '.follow').removeClass('follow').addClass('unfollow');
			$('#' + id + '.unfollow').html('<span class=\'fontello\'></span> Following');
		}
	});
});

$('body').on('click', '.unfollow', function() {
	var id = $(this).attr('id');
	$.get("action.php?a=true&unfollow=" + id, function(data) {
		
		if (data == '1') {
			$('#' + id + '.unfollow').removeClass('unfollow').addClass('follow');
			$('#' + id + '.follow').html('Follow');
		}
	});
});

$('.container').on('mouseenter', '.user', function(event) {
	event.stopPropagation();
    event.stopImmediatePropagation();
	var id = $(this).attr('id');
	console.log(id);
	$(this).append("<div class='userinfo' id='" + id + "'><img src='img/loading.gif'></div>");
	$('#' + id + '.userinfo').fadeIn();
	$.when($.get("action.php?a=true&userinfo=" + id, function(data) {
		$('#' + id + '.userinfo').html(data);
	})).then(function(){
		$('#' + id + '.userinfo').fadeIn();
	});
});

$('.container').on('mouseleave', '.user', function(event) {
	event.stopPropagation();
    event.stopImmediatePropagation();
	$(this).find('.userinfo').fadeOut(300, function() { $(this).remove(); });
});

$('.container').on('mouseenter', '.external', function(event) {
	event.stopPropagation();
    event.stopImmediatePropagation();
	var id = $(this).attr('id');
	var url = $(this).attr('href');
	console.log(url);
	$(this).before("<div class='notif previewpost' id='" + id + "'></div>");
	$.when($.get("action.php?a=true&previewurl=" + btoa(url), function(data) {
		$('#' + id + '.previewpost').html(data);
	})).then(function(){
		if ($('#' + id + '.previewpost').html() === 'empty'){
			return false;
		}
		$('#' + id + '.previewpost').fadeIn();
	});
});

$('.container').on('mouseleave', '.external', function(event) {
	event.stopPropagation();
    event.stopImmediatePropagation();
	$('.container').find('.previewpost').fadeOut(300, function() { $(this).remove(); });
});



$('.container').on('mouseenter', '.preview', function(event) {
	event.stopPropagation();
    event.stopImmediatePropagation();
	var id = $(this).attr('id');
	console.log(id);
	$(this).before("<div class='notif previewpost' id='" + id + "'></div>");
	$.when($.get("action.php?a=true&previewpost=" + id, function(data) {
		$('#' + id + '.previewpost').html(data);
	})).then(function(){
		$('#' + id + '.previewpost').fadeIn();
	});
});

$('.container').on('mouseleave', '.preview', function(event) {
	event.stopPropagation();
    event.stopImmediatePropagation();
	$('.container').find('.previewpost').fadeOut(300, function() { $(this).remove(); });
});

var getUrlParameter = function getUrlParameter(sParam) {
	var sPageURL = window.location.search.substring(1),
		sURLVariables = sPageURL.split('&'),
		sParameterName,
		i;

	for (i = 0; i < sURLVariables.length; i++) {
		sParameterName = sURLVariables[i].split('=');

		if (sParameterName[0] === sParam) {
			return sParameterName[1] === undefined ? true : decodeURIComponent(sParameterName[1]);
		}
	}
};

function getMode() {
	if (typeof getUrlParameter('user') !== 'undefined') {
		console.log('list');
		return "&user=" + getUrlParameter('user');
	}
	if (typeof getUrlParameter('list') !== 'undefined') {
		console.log('list');
		return "&list=" + getUrlParameter('list');
	}
	if (typeof getUrlParameter('mode') !== 'undefined') {
		console.log('mode');
		return "&mode=" + getUrlParameter('mode');
	}
	if (typeof getUrlParameter('tag') !== 'undefined') {
		console.log('tag');
		return "&tag=" + getUrlParameter('tag');
	}
	if (typeof getUrlParameter('search') !== 'undefined') {
		console.log('tag');
		return "&search=" + getUrlParameter('search');
	}
	return "&mode=federated";
};

function loadmore(){
	var thread = getUrlParameter('thread');
	if (typeof thread !== 'undefined') {
		return false;
	}
	if (typeof getUrlParameter('search') !== 'undefined') {
		return false;
	}
	var thread = getUrlParameter('thread');
	if (typeof thread === 'undefined') {
		var error = $(".error").length;
		if (error < 1) {
			pageMode = getMode();
			var id = $('.post').last().attr('pid');
			$('.loadmore').html("<img id='loadinggif' src='img/loading.gif'>")
			$.get("index.php?ajax=1&next=" + id + "" + pageMode, function(data) {
				$('.loadmore').parent().before(data);
				$('.loadmore').html("Load More Posts")
			});
		}
	}
}

$(window).scroll(function() {
	if ($(window).scrollTop() >= ($(document).height()-700) - $(window).height()) {
		var loadinggif = $('#loadinggif').attr('src');
		if (typeof loadinggif === 'undefined') {
			loadmore();
		}
	}
});



$('body').on('click', '.loadmore', function() {
	loadmore();
});

function newPosts() {
	
	var url = window.location.href;
	
	var thread = getUrlParameter('thread');
	if (typeof thread !== 'undefined') {
		return false;
	}
	var search = getUrlParameter('search');
	if (typeof search !== 'undefined') {
		return false;
	}
	var error = $(".error").length;
	if (error >= 1) {
		return false;
	}
	var id = $(".post").first().attr('pid');
	pageMode = getMode();
	if (getUrlParameter('mode') == 'bookmarks') {
		return false;
	}
	var page = getUrlParameter('page');
	if (typeof page !== 'undefined') {
		return false;
	}
		
	$.get("index.php?ajax=1&since=" + id + "" + pageMode, function(data) {
		
		if (window.location.href !== url){
			return false;
		}
	
		if (data) {
			var scroll = $(window).scrollTop();
			if (scroll > 1000) {
			$('#loader').html("<div class='avatar' style='height:0px;'></div><div class='loader' style='display:table-cell; height:50px; line-height:50px;'><a class='link' style='margin:5px;' href='#'>Load Newer Posts</a></div>");
				if ($('#loaded').length) {
					$('#loaded').prepend(data);
				} else {
					$('#loader').after("<div id='loaded' style='display:none'></div>");
					$('#loaded').prepend(data);
				}
			} else {
				if ($('#loaded').length) {
					$('#loaded').prepend(data);
				} else {
					$('#content').find('.element').first().after(data);
				}
			}
		}
	});
};

window.setInterval(function() {
	var timestamp;
	$('.postAge').each(function(a){
       timestamp = $(this).attr('id');
	   $(this).html(timeSince(timestamp)+' ago');
     });

	newPosts();

}, 25000);

function themecheck(name){
	if(name.value == "custom"){
		$('#customtheme').css("display","block");
    }
    else{
        $('#customtheme').css("display","none");
    }
};

function timeSince(date) {
  /*  https://stackoverflow.com/questions/3177836/how-to-format-time-since-xxx-e-g-4-minutes-ago-similar-to-stack-exchange-site  */
  
  var seconds = Math.floor((new Date() - (date*1000)) / 1000);

  var interval = Math.floor(seconds / 31536000);

  if (interval >= 1) {
    return interval + " year"+(interval > 1 ? "s" : "");
  }
  interval = Math.floor(seconds / 2592000);
  if (interval >= 1) {
    return interval + " month"+(interval > 1 ? "s" : "");
  }
  interval = Math.floor(seconds / 604800);
  if (interval >= 1) {
    return interval + " week"+(interval > 1 ? "s" : "");
  }
  interval = Math.floor(seconds / 86400);
  if (interval >= 1) {
    return interval + " day"+(interval > 1 ? "s" : "");
  }
  interval = Math.floor(seconds / 3600);
  if (interval >= 1) {
    return interval + " hour"+(interval > 1 ? "s" : "");
  }
  interval = Math.floor(seconds / 60);
  if (interval >= 1) {
    return interval + " minute"+(interval > 1 ? "s" : "");
  }
  
  if (interval < 0) {
    return " just now";
  }
  return Math.floor(seconds) + " seconds";
}

function previewHeader(){
	const chooseFile = document.getElementById("chooseheader");
	const imgPreview = document.getElementById("profileheader");
	
	 const files = chooseFile.files[0];
	  if (files) {
		const fileReader = new FileReader();
		fileReader.readAsDataURL(files);
		fileReader.addEventListener("load", function () {
			imgPreview.style.backgroundImage = 'url(' + this.result + ')';	
		});    
	  }
}

function previewAvatar(){
	const chooseFile = document.getElementById("chooseavatar");
	const imgPreview = document.getElementById("profileavatar");
	
	 const files = chooseFile.files[0];
	  if (files) {
		const fileReader = new FileReader();
		fileReader.readAsDataURL(files);
		fileReader.addEventListener("load", function () {
			imgPreview.style.backgroundImage = 'url(' + this.result + ')';	
		});    
	  }
}

function dockvideo(elem){
	$('#videodock embed').detach();
	$(elem).prev().prev().detach().appendTo('#videodock');
	$(elem).toggle();
	embed1 = $('#videodock embed');
	embed1.width(350);
	embed1.height(240);
	$('#videodock').toggle();
}

function undockvideo(){
	$('#videodock embed').detach();
	$('#videodock').toggle();
}