friendica/js/theme.js

$(document).ready(function(){
	//fade in/out based on scrollTop value
	$(window).scroll(function () {
		if ($(this).scrollTop() > 1000) {
			$("#back-to-top").fadeIn();
		} else {
			$("#back-to-top").fadeOut();
		}
	});
 
	// scroll body to 0px on click
	$("#back-to-top").click(function () {
		$("body,html").animate({
			scrollTop: 0
		}, 400);
		return false;
	});

	// Clear bs modal on close
	// We need this to prevent that the modal displays old content
	$('body').on('hidden.bs.modal', '.modal', function () {
		$(this).removeData('bs.modal');
		$("#modal-title").empty();
		$('#modal-body').empty();
	});

	// add the class "selected" to group widges li if li > a does have the class group-selected
	if( $("#sidebar-group-ul li a").hasClass("group-selected")) {
		$("#sidebar-group-ul li a.group-selected").parent("li").addClass("selected");
	}

	// add the class "selected" to forums widges li if li > a does have the class forum-selected
	if( $("#forumlist-sidbar-ul li a").hasClass("forum-selected")) {
		$("#forumlist-sidbar-ul li a.forum-selected").parent("li").addClass("selected");
	}

	// add the class "active" to tabmenuli if li > a does have the class active
	if( $("#tabmenu ul li a").hasClass("active")) {
		$("#tabmenu ul li a.active").parent("li").addClass("active");
	}

	// give select fields an boostrap classes
	// @todo: this needs to be changed in friendica core
	$(".field.select, .field.custom").addClass("form-group");
	$(".field.select > select, .field.custom > select").addClass("form-control");

	// move the tabbar to the second nav bar
	if( $("ul.tabbar")) {
		$("ul.tabbar").appendTo("#topbar-second > .container > #tabmenu");
	}

	// make responsive tabmenu with flexmenu.js
	// the menupoints which doesn't fit in the second nav bar will moved to a 
	// dropdown menu. Look at common_tabs.tpl
	$("ul.tabs.flex-nav").flexMenu({
		'cutoff': 2,
		'popupClass': "dropdown-menu pull-right",
		'popupAbsolute': false,
		'target': ".flex-target"
	});

	// add Jot botton to the scecond navbar
	if( $("section #jotOpen")) {
		$("section #jotOpen").appendTo("#topbar-second > .container > #navbar-button");
		if( $("#jot-popup").is(":hidden")) $("#topbar-second > .container > #navbar-button #jotOpen").hide();
	}

	// add search-headding to the scecond navbar
	if( $(".search-headding")) {
		$(".search-headding").appendTo("#topbar-second > .container > #tabmenu");
	}

	
		
	//$('ul.flex-nav').flexMenu();

	// initialize the bootstrap tooltips
	$('[data-toggle="tooltip"]').tooltip({
		animation: true,
		html: true,
		placement: 'auto',
		delay: {
			show: 500,
			hide: 100
		}
	});

	// Loading remote bootstrap remote modals
	// This is uses to load tradional friendica pages into bootstrap modals
	// 
	// commentent out because we actually don't use it anymore
//	$('a[rel=modal]').on('click', function(evt) {
//		evt.preventDefault();
//		var modal = $('#modal').modal();
//		modal
//			.find('#modal-body')
//			.load($(this).attr("href"), function (responseText, textStatus) {
//				if ( textStatus === 'success' || 
//					textStatus === 'notmodified') 
//				{
//					modal.show();
//
//					//Get first h3 element and use it as title
//					loadModalTitle();
//				}
//			});
//	});

	// Add Colorbox for viewing Network page images
	//var cBoxClasses = new Array();
	$(".wall-item-body a img").each(function(){
		var aElem = $(this).parent();
		var imgHref = aElem.attr("href");

		// We need to make sure we only put a Colorbox on links to Friendica images
		// We'll try to do this by looking for links of the form
		// .../photo/ab803d8eg08daf85023adfec08 (with nothing more following), in hopes
		// that that will be unique enough
		if(imgHref.match(/\/photo\/[a-fA-F0-9]+(-[0-9]\.[\w]+?)?$/)) {

			// Add a unique class to all the images of a certain post, to allow scrolling through
			var cBoxClass = $(this).closest(".wall-item-body").attr("id") + "-lightbox";
			$(this).addClass(cBoxClass);

//			if( $.inArray(cBoxClass, cBoxClasses) < 0 ) {
//				cBoxClasses.push(cBoxClass);
//			}

			aElem.colorbox({
				maxHeight: '90%',
				photo: true, // Colorbox doesn't recognize a URL that don't end in .jpg, etc. as a photo
				rel: cBoxClass //$(this).attr("class").match(/wall-item-body-[\d]+-lightbox/)[0]
			});
		}
	});

	// overwrite Dialog.show from main js to load the filebrowser into a bs modal
	Dialog.show = function(url) {
		var modal = $('#modal').modal();
		modal
			.find('#modal-body')
			.load(url, function (responseText, textStatus) {
				if ( textStatus === 'success' || 
					textStatus === 'notmodified') 
				{
					modal.show();

					// get nickname & filebrowser type from the modal content
					var nickname = $("#fb-nickname").attr("value");
					var type = $("#fb-type").attr("value");

					// try to fetch the hash form the url
					var match = url.match(/fbrowser\/[a-z]+\/\?mode=modal(.*)/);
					var hash = match[1];

					// initialize the filebrowser
					var jsbrowser = function() {
						FileBrowser.init(nickname, type, hash);
					}
					loadScript("view/theme/frio/js/filebrowser.js", jsbrowser);
				}
			});
	};

	// overwrite the function _get_url from main.js
	Dialog._get_url = function(type, name, id) {
		var hash = name;
		if (id !== undefined) hash = hash + "-" + id;
		return "fbrowser/"+type+"/?mode=modal#"+hash;
	};


});
//function commentOpenUI(obj, id) {
//	$(document).unbind( "click.commentOpen", handler );
//
//	var handler = function() {
//		if(obj.value == '{{$comment}}') {
//			obj.value = '';
//			$("#comment-edit-text-" + id).addClass("comment-edit-text-full").removeClass("comment-edit-text-empty");
//			// Choose an arbitrary tab index that's greater than what we're using in jot (3 of them)
//			// The submit button gets tabindex + 1
//			$("#comment-edit-text-" + id).attr('tabindex','9');
//			$("#comment-edit-submit-" + id).attr('tabindex','10');
//			$("#comment-edit-submit-wrapper-" + id).show();
//		}
//	};
//
//	$(document).bind( "click.commentOpen", handler );
//}
//
//function commentCloseUI(obj, id) {
//	$(document).unbind( "click.commentClose", handler );
//
//	var handler = function() {
//		if(obj.value === '') {
//		obj.value = '{{$comment}}';
//			$("#comment-edit-text-" + id).removeClass("comment-edit-text-full").addClass("comment-edit-text-empty");
//			$("#comment-edit-text-" + id).removeAttr('tabindex');
//			$("#comment-edit-submit-" + id).removeAttr('tabindex');
//			$("#comment-edit-submit-wrapper-" + id).hide();
//		}
//	};
//
//	$(document).bind( "click.commentClose", handler );
//}

function openClose(theID) {
	var elem = document.getElementById(theID);

	if( $(elem).is(':visible')) {
		$(elem).slideUp(200);
	}
	else {
		$(elem).slideDown(200);
	}
}

function showHide(theID) {
	if(document.getElementById(theID).style.display == "block") {
		document.getElementById(theID).style.display = "none"
	}
	else {
		document.getElementById(theID).style.display = "block"
	}
}


function showHideComments(id) {
	if( $('#collapsed-comments-' + id).is(':visible')) {
		$('#collapsed-comments-' + id).slideUp();
		$('#hide-comments-' + id).html(window.showMore);
		$('#hide-comments-total-' + id).show();
	}
	else {
		$('#collapsed-comments-' + id).slideDown();
		$('#hide-comments-' + id).html(window.showFewer);
		$('#hide-comments-total-' + id).hide();
	}
}


function justifyPhotos() {
	justifiedGalleryActive = true;
	$('#photo-album-contents').justifiedGallery({
		margins: 3,
		border: 0,
		sizeRangeSuffixes: {
			'lt100': '-2',
			'lt240': '-2',
			'lt320': '-2',
			'lt500': '',
			'lt640': '-1',
			'lt1024': '-0'
		}
	}).on('jg.complete', function(e){ justifiedGalleryActive = false; });
}

function justifyPhotosAjax() {
	justifiedGalleryActive = true;
	$('#photo-album-contents').justifiedGallery('norewind').on('jg.complete', function(e){ justifiedGalleryActive = false; });
}

function loadScript(url, callback) {
	// Adding the script tag to the head as suggested before
	var head = document.getElementsByTagName('head')[0];
	var script = document.createElement('script');
	script.type = 'text/javascript';
	script.src = url;

	// Then bind the event to the callback function.
	// There are several events for cross browser compatibility.
	script.onreadystatechange = callback;
	script.onload = callback;

	// Fire the loading
	head.appendChild(script);
}

/**
 * @brief Add first h3 element as modal title
 * 
 * Note: this should be really done in the template
 * and is the solution where we havent done it until this
 * moment or where it isn't possible because of design
 */
function loadModalTitle() {
	// clear the text of the title
	//$("#modal-title").empty();

	// hide the first h3 child element of the modal body
	$("#modal-body > h3").first().hide();

	// get the text of the first h3 child element
	var title = $("#modal-body > h3").first().text();

	// and append it to modal title
	if (title!=="") {
		$("#modal-title").append(title);
	}
}


function addToModal(url) {
	var url = url + '?mode=modal';
	var modal = $('#modal').modal();

	modal
		.find('#modal-body')
		.load(url, function (responseText, textStatus) {
			if ( textStatus === 'success' || 
				textStatus === 'notmodified') 
			{
				modal.show();

				//Get first h3 element and use it as title
				loadModalTitle();
			}
		});
};

function editpost(url) {
	var modal = $('#jot-modal').modal();
	var url = url + " #profile-jot-form";
	//var rand_num = random_digits(12);
	$("#jot-perms-lnk").hide();

	// rename the the original div jot-preview-content because the edit function
	// does load the content for the modal from another source and preview won't work
	// if this div would exist twice
	// $("#jot-content #profile-jot-form").attr("id","#profile-jot-form-renamed");
	// $("#jot-content #jot-preview-content").attr("id","#jot-preview-content-renamed");

	// For editpost we load the modal html form the edit page. So we would have two jot forms in
	// the page html. To avoid js conflicts we move the original jot to the end of the page
	// so the editpost jot would be the first jot in html structure.
	// After closing the modal we move the original jot back to it's orginal position in the html structure.
	// 
	// Note: For now it seems to work but this isn't optimal because we have doubled ID names for the jot div's.
	// We need to have a better solution for this in the future. 
	$("section #jot-content #profile-jot-form").appendTo("footer #cache-container");

	jotreset();

	modal
		.find('#jot-modal-body')
		.load(url, function (responseText, textStatus) {
			if ( textStatus === 'success' || 
				textStatus === 'notmodified') 
			{
				// get the item type and hide the input for title and category if it isn't needed
				var type = $(responseText).find("#profile-jot-form input[name='type']").val();
				if(type === "wall-comment" || type === "remote-comment")
				{
					$("#profile-jot-form #jot-title-wrap").hide();
					$("#profile-jot-form #jot-category-wrap").hide();
				}

				modal.show();
				$("#jot-popup").show();
			}
		});
}

function jotreset() {
	// Clear bs modal on close
	// We need this to prevent that the modal displays old content
	$('body').on('hidden.bs.modal', '#jot-modal', function () {
		$(this).removeData('bs.modal');
		$("#jot-perms-lnk").show();
		$("#profile-jot-form #jot-title-wrap").show();
		$("#profile-jot-form #jot-category-wrap").show();

		// the following was commented out because it is needed anymore
		// because we changed the behavior at an other place
//		var rand_num = random_digits(12);
//		$('#jot-title, #jot-category, #profile-jot-text').val("");
//		$( "#profile-jot-form input[name='type']" ).val("wall");
//		$( "#profile-jot-form input[name='post_id']" ).val("");
//		$( "#profile-jot-form input[name='post_id_random']" ).val(rand_num);
		$("#jot-modal-body").empty();

		// rename the div #jot-preview-content-renamed back to it's original
		// name. Have a look at function editpost() for further explanation
		//$("#jot-content #profile-jot-form-renamed").attr("id","#profile-jot-form");
		//$("#jot-content #jot-preview-content-renamed").attr("id","#jot-preview-content");

		// Move the original jot back to it's old place in the html structure
		// For explaination have a look at function editpost()
		$("footer #cache-container #profile-jot-form").appendTo("section #jot-content");
	});
}

function random_digits(digits) {
	var rn = "";
	var rnd = "";

	for(var i = 0; i < digits; i++) {
		var rn = Math.round(Math.random() * (9));
		rnd += rn;
	}

	return rnd;
}

function insertFormatting(comment,BBcode,id) {

		var tmpStr = $("#comment-edit-text-" + id).val();
		if(tmpStr == comment) {
			tmpStr = "";
			$("#comment-edit-text-" + id).addClass("comment-edit-text-full");
			$("#comment-edit-text-" + id).removeClass("comment-edit-text-empty");
			openMenu("comment-edit-submit-wrapper-" + id);
			$("#comment-edit-text-" + id).val(tmpStr);
		}

	textarea = document.getElementById("comment-edit-text-" +id);
	if (document.selection) {
		textarea.focus();
		selected = document.selection.createRange();
		if (BBcode == "url"){
			selected.text = "["+BBcode+"]" + "http://" +  selected.text + "[/"+BBcode+"]";
			} else
		selected.text = "["+BBcode+"]" + selected.text + "[/"+BBcode+"]";
	} else if (textarea.selectionStart || textarea.selectionStart == "0") {
		var start = textarea.selectionStart;
		var end = textarea.selectionEnd;
		if (BBcode == "url"){
			textarea.value = textarea.value.substring(0, start) + "["+BBcode+"]" + "http://" + textarea.value.substring(start, end) + "[/"+BBcode+"]" + textarea.value.substring(end, textarea.value.length);
			} else
		textarea.value = textarea.value.substring(0, start) + "["+BBcode+"]" + textarea.value.substring(start, end) + "[/"+BBcode+"]" + textarea.value.substring(end, textarea.value.length);
	}
	return true;
}


function showThread(id) {
	$("#collapsed-comments-" + id).show()
	$("#collapsed-comments-" + id + " .collapsed-comments").show()
}
function hideThread(id) {
	$("#collapsed-comments-" + id).hide()
	$("#collapsed-comments-" + id + " .collapsed-comments").hide()
}


function cmtBbOpen(id) {
	$("#comment-edit-bb-" + id).show();
}
function cmtBbClose(id) {
	$("#comment-edit-bb-" + id).hide();
}

function contact_filter(item) {
	// get the html content from the js template of the contact-wrapper
	contact_tpl = unescape($(".javascript-template[rel=contact-template]").html());

	var variables = {
			id:		item.id,
			name:		item.name,
			username:	item.username,
			thumb:		item.thumb,
			img_hover:	item.img_hover,
			edit_hover:	item.edit_hover,
			account_type:	item.account_type,
			photo_menu:	item.photo_menu,
			alt_text:	item.alt_text,
			dir_icon:	item.dir_icon,
			sparkle:	item.sparkle,
			itemurl:	item.itemurl,
			url:		item.url,
			network:	item.network,
			tags:		item.tags,
			details:	item.details,
	};

	// open a new jSmart instance with the template
	var tpl = new jSmart (contact_tpl);

	// replace the variable with the values
	var html = tpl.fetch(variables);

	return html;
}

function filter_replace(item) {

	return item.name;
}

(function( $ ) {
	$.fn.contact_filter = function(backend_url, typ, autosubmit, onselect) {
		if(typeof typ === 'undefined') typ = '';
		if(typeof autosubmit === 'undefined') autosubmit = false;

		// Autocomplete contacts
		contacts = {
			match: /(^)([^\n]+)$/,
			index: 2,
			search: function(term, callback) { contact_search(term, callback, backend_url, typ); },
			replace: filter_replace,
			template: contact_filter,
		};

		this.attr('autocomplete','off');
		var a = this.textcomplete([contacts], {className:'accontacts', zIndex:10000, appendTo: '#contact-list'});

		a.on('textComplete:select', function(e, value, strategy) { $(".dropdown-menu.textcomplete-dropdown.media-list").show(); });
	};
})( jQuery );