1 $(document).ready(function(){
2 //fade in/out based on scrollTop value
3 $(window).scroll(function () {
4 if ($(this).scrollTop() > 1000) {
5 $("#back-to-top").fadeIn();
7 $("#back-to-top").fadeOut();
11 // scroll body to 0px on click
12 $("#back-to-top").click(function () {
13 $("body,html").animate({
19 // Clear bs modal on close
20 // We need this to prevent that the modal displays old content
21 $('body').on('hidden.bs.modal', '.modal', function () {
22 $(this).removeData('bs.modal');
23 $("#modal-title").empty();
24 $('#modal-body').empty();
27 // add the class "selected" to group widges li if li > a does have the class group-selected
28 if( $("#sidebar-group-ul li a").hasClass("group-selected")) {
29 $("#sidebar-group-ul li a.group-selected").parent("li").addClass("selected");
32 // add the class "selected" to forums widges li if li > a does have the class forum-selected
33 if( $("#forumlist-sidbar-ul li a").hasClass("forum-selected")) {
34 $("#forumlist-sidbar-ul li a.forum-selected").parent("li").addClass("selected");
37 // add the class "active" to tabmenuli if li > a does have the class active
38 if( $("#tabmenu ul li a").hasClass("active")) {
39 $("#tabmenu ul li a.active").parent("li").addClass("active");
42 // give select fields an boostrap classes
43 // @todo: this needs to be changed in friendica core
44 $(".field.select, .field.custom").addClass("form-group");
45 $(".field.select > select, .field.custom > select").addClass("form-control");
47 // move the tabbar to the second nav bar
49 $("ul.tabbar").appendTo("#topbar-second > .container > #tabmenu");
52 // add mask css url to the logo-img container
54 // This is for firefox - we use a mask which looks like the friendica logo to apply user collers
55 // to the friendica logo (the mask is in nav.tpl at the botom). To make it work we need to apply the
56 // correct url. The only way which comes to my mind was to do this with js
57 // So we apply the correct url (with the link to the id of the mask) after the page is loaded.
59 var pageurl = "url('" + window.location.href + "#logo-mask')";
60 $("#logo-img").css({"mask": pageurl});
63 // make responsive tabmenu with flexmenu.js
64 // the menupoints which doesn't fit in the second nav bar will moved to a
65 // dropdown menu. Look at common_tabs.tpl
66 $("ul.tabs.flex-nav").flexMenu({
68 'popupClass': "dropdown-menu pull-right",
69 'popupAbsolute': false,
70 'target': ".flex-target"
73 // add Jot botton to the scecond navbar
74 if( $("section #jotOpen")) {
75 $("section #jotOpen").appendTo("#topbar-second > .container > #navbar-button");
76 if( $("#jot-popup").is(":hidden")) $("#topbar-second > .container > #navbar-button #jotOpen").hide();
79 // add search-headding to the scecond navbar
80 if( $(".search-headding")) {
81 $(".search-headding").appendTo("#topbar-second > .container > #tabmenu");
86 //$('ul.flex-nav').flexMenu();
88 // initialize the bootstrap tooltips
89 $('[data-toggle="tooltip"]').tooltip({
99 // Add Colorbox for viewing Network page images
100 //var cBoxClasses = new Array();
101 $(".wall-item-body a img").each(function(){
102 var aElem = $(this).parent();
103 var imgHref = aElem.attr("href");
105 // We need to make sure we only put a Colorbox on links to Friendica images
106 // We'll try to do this by looking for links of the form
107 // .../photo/ab803d8eg08daf85023adfec08 (with nothing more following), in hopes
108 // that that will be unique enough
109 if(imgHref.match(/\/photo\/[a-fA-F0-9]+(-[0-9]\.[\w]+?)?$/)) {
111 // Add a unique class to all the images of a certain post, to allow scrolling through
112 var cBoxClass = $(this).closest(".wall-item-body").attr("id") + "-lightbox";
113 $(this).addClass(cBoxClass);
115 // if( $.inArray(cBoxClass, cBoxClasses) < 0 ) {
116 // cBoxClasses.push(cBoxClass);
121 photo: true, // Colorbox doesn't recognize a URL that don't end in .jpg, etc. as a photo
122 rel: cBoxClass //$(this).attr("class").match(/wall-item-body-[\d]+-lightbox/)[0]
127 // overwrite Dialog.show from main js to load the filebrowser into a bs modal
128 Dialog.show = function(url) {
129 var modal = $('#modal').modal();
132 .load(url, function (responseText, textStatus) {
133 if ( textStatus === 'success' ||
134 textStatus === 'notmodified')
138 // get nickname & filebrowser type from the modal content
139 var nickname = $("#fb-nickname").attr("value");
140 var type = $("#fb-type").attr("value");
142 // try to fetch the hash form the url
143 var match = url.match(/fbrowser\/[a-z]+\/\?mode=modal(.*)/);
146 // initialize the filebrowser
147 var jsbrowser = function() {
148 FileBrowser.init(nickname, type, hash);
150 loadScript("view/theme/frio/js/filebrowser.js", jsbrowser);
155 // overwrite the function _get_url from main.js
156 Dialog._get_url = function(type, name, id) {
158 if (id !== undefined) hash = hash + "-" + id;
159 return "fbrowser/"+type+"/?mode=modal#"+hash;
164 //function commentOpenUI(obj, id) {
165 // $(document).unbind( "click.commentOpen", handler );
167 // var handler = function() {
168 // if(obj.value == '{{$comment}}') {
170 // $("#comment-edit-text-" + id).addClass("comment-edit-text-full").removeClass("comment-edit-text-empty");
171 // // Choose an arbitrary tab index that's greater than what we're using in jot (3 of them)
172 // // The submit button gets tabindex + 1
173 // $("#comment-edit-text-" + id).attr('tabindex','9');
174 // $("#comment-edit-submit-" + id).attr('tabindex','10');
175 // $("#comment-edit-submit-wrapper-" + id).show();
179 // $(document).bind( "click.commentOpen", handler );
182 //function commentCloseUI(obj, id) {
183 // $(document).unbind( "click.commentClose", handler );
185 // var handler = function() {
186 // if(obj.value === '') {
187 // obj.value = '{{$comment}}';
188 // $("#comment-edit-text-" + id).removeClass("comment-edit-text-full").addClass("comment-edit-text-empty");
189 // $("#comment-edit-text-" + id).removeAttr('tabindex');
190 // $("#comment-edit-submit-" + id).removeAttr('tabindex');
191 // $("#comment-edit-submit-wrapper-" + id).hide();
195 // $(document).bind( "click.commentClose", handler );
198 function openClose(theID) {
199 var elem = document.getElementById(theID);
201 if( $(elem).is(':visible')) {
202 $(elem).slideUp(200);
205 $(elem).slideDown(200);
209 function showHide(theID) {
210 if(document.getElementById(theID).style.display == "block") {
211 document.getElementById(theID).style.display = "none"
214 document.getElementById(theID).style.display = "block"
219 function showHideComments(id) {
220 if( $('#collapsed-comments-' + id).is(':visible')) {
221 $('#collapsed-comments-' + id).slideUp();
222 $('#hide-comments-' + id).html(window.showMore);
223 $('#hide-comments-total-' + id).show();
226 $('#collapsed-comments-' + id).slideDown();
227 $('#hide-comments-' + id).html(window.showFewer);
228 $('#hide-comments-total-' + id).hide();
233 function justifyPhotos() {
234 justifiedGalleryActive = true;
235 $('#photo-album-contents').justifiedGallery({
246 }).on('jg.complete', function(e){ justifiedGalleryActive = false; });
249 function justifyPhotosAjax() {
250 justifiedGalleryActive = true;
251 $('#photo-album-contents').justifiedGallery('norewind').on('jg.complete', function(e){ justifiedGalleryActive = false; });
254 function loadScript(url, callback) {
255 // Adding the script tag to the head as suggested before
256 var head = document.getElementsByTagName('head')[0];
257 var script = document.createElement('script');
258 script.type = 'text/javascript';
261 // Then bind the event to the callback function.
262 // There are several events for cross browser compatibility.
263 script.onreadystatechange = callback;
264 script.onload = callback;
267 head.appendChild(script);
271 * @brief Add first h3 element as modal title
273 * Note: this should be really done in the template
274 * and is the solution where we havent done it until this
275 * moment or where it isn't possible because of design
277 function loadModalTitle() {
278 // clear the text of the title
279 //$("#modal-title").empty();
281 // hide the first h3 child element of the modal body
282 $("#modal-body > h3").first().hide();
284 // get the text of the first h3 child element
285 var title = $("#modal-body > h3").first().text();
287 // and append it to modal title
289 $("#modal-title").append(title);
294 function addToModal(url) {
295 var char = qOrAmp(url);
297 var url = url + char + 'mode=modal';
298 var modal = $('#modal').modal();
302 .load(url, function (responseText, textStatus) {
303 if ( textStatus === 'success' ||
304 textStatus === 'notmodified')
308 //Get first h3 element and use it as title
314 function editpost(url) {
315 var modal = $('#jot-modal').modal();
316 var url = url + " #profile-jot-form";
317 //var rand_num = random_digits(12);
318 $("#jot-perms-lnk").hide();
320 // rename the the original div jot-preview-content because the edit function
321 // does load the content for the modal from another source and preview won't work
322 // if this div would exist twice
323 // $("#jot-content #profile-jot-form").attr("id","#profile-jot-form-renamed");
324 // $("#jot-content #jot-preview-content").attr("id","#jot-preview-content-renamed");
326 // For editpost we load the modal html form the edit page. So we would have two jot forms in
327 // the page html. To avoid js conflicts we move the original jot to the end of the page
328 // so the editpost jot would be the first jot in html structure.
329 // After closing the modal we move the original jot back to it's orginal position in the html structure.
331 // Note: For now it seems to work but this isn't optimal because we have doubled ID names for the jot div's.
332 // We need to have a better solution for this in the future.
333 $("section #jot-content #profile-jot-form").appendTo("footer #cache-container");
338 .find('#jot-modal-body')
339 .load(url, function (responseText, textStatus) {
340 if ( textStatus === 'success' ||
341 textStatus === 'notmodified')
343 // get the item type and hide the input for title and category if it isn't needed
344 var type = $(responseText).find("#profile-jot-form input[name='type']").val();
345 if(type === "wall-comment" || type === "remote-comment")
347 $("#profile-jot-form #jot-title-wrap").hide();
348 $("#profile-jot-form #jot-category-wrap").hide();
352 $("#jot-popup").show();
357 function jotreset() {
358 // Clear bs modal on close
359 // We need this to prevent that the modal displays old content
360 $('body').on('hidden.bs.modal', '#jot-modal', function () {
361 $(this).removeData('bs.modal');
362 $("#jot-perms-lnk").show();
363 $("#profile-jot-form #jot-title-wrap").show();
364 $("#profile-jot-form #jot-category-wrap").show();
366 // the following was commented out because it is needed anymore
367 // because we changed the behavior at an other place
368 // var rand_num = random_digits(12);
369 // $('#jot-title, #jot-category, #profile-jot-text').val("");
370 // $( "#profile-jot-form input[name='type']" ).val("wall");
371 // $( "#profile-jot-form input[name='post_id']" ).val("");
372 // $( "#profile-jot-form input[name='post_id_random']" ).val(rand_num);
373 $("#jot-modal-body").empty();
375 // rename the div #jot-preview-content-renamed back to it's original
376 // name. Have a look at function editpost() for further explanation
377 //$("#jot-content #profile-jot-form-renamed").attr("id","#profile-jot-form");
378 //$("#jot-content #jot-preview-content-renamed").attr("id","#jot-preview-content");
380 // Move the original jot back to it's old place in the html structure
381 // For explaination have a look at function editpost()
382 $("footer #cache-container #profile-jot-form").appendTo("section #jot-content");
386 function random_digits(digits) {
390 for(var i = 0; i < digits; i++) {
391 var rn = Math.round(Math.random() * (9));
398 // Does we need a ? or a & to append values to a url
399 function qOrAmp(url) {
400 if(url.search('\\?') < 0) {
407 function insertFormatting(comment,BBcode,id) {
409 var tmpStr = $("#comment-edit-text-" + id).val();
410 if(tmpStr == comment) {
412 $("#comment-edit-text-" + id).addClass("comment-edit-text-full");
413 $("#comment-edit-text-" + id).removeClass("comment-edit-text-empty");
414 openMenu("comment-edit-submit-wrapper-" + id);
415 $("#comment-edit-text-" + id).val(tmpStr);
418 textarea = document.getElementById("comment-edit-text-" +id);
419 if (document.selection) {
421 selected = document.selection.createRange();
422 if (BBcode == "url"){
423 selected.text = "["+BBcode+"]" + "http://" + selected.text + "[/"+BBcode+"]";
425 selected.text = "["+BBcode+"]" + selected.text + "[/"+BBcode+"]";
426 } else if (textarea.selectionStart || textarea.selectionStart == "0") {
427 var start = textarea.selectionStart;
428 var end = textarea.selectionEnd;
429 if (BBcode == "url"){
430 textarea.value = textarea.value.substring(0, start) + "["+BBcode+"]" + "http://" + textarea.value.substring(start, end) + "[/"+BBcode+"]" + textarea.value.substring(end, textarea.value.length);
432 textarea.value = textarea.value.substring(0, start) + "["+BBcode+"]" + textarea.value.substring(start, end) + "[/"+BBcode+"]" + textarea.value.substring(end, textarea.value.length);
438 function showThread(id) {
439 $("#collapsed-comments-" + id).show()
440 $("#collapsed-comments-" + id + " .collapsed-comments").show()
442 function hideThread(id) {
443 $("#collapsed-comments-" + id).hide()
444 $("#collapsed-comments-" + id + " .collapsed-comments").hide()
448 function cmtBbOpen(id) {
449 $("#comment-edit-bb-" + id).show();
451 function cmtBbClose(id) {
452 $("#comment-edit-bb-" + id).hide();
455 function contact_filter(item) {
456 // get the html content from the js template of the contact-wrapper
457 contact_tpl = unescape($(".javascript-template[rel=contact-template]").html());
462 username: item.username,
464 img_hover: item.img_hover,
465 edit_hover: item.edit_hover,
466 account_type: item.account_type,
467 photo_menu: item.photo_menu,
468 alt_text: item.alt_text,
469 dir_icon: item.dir_icon,
470 sparkle: item.sparkle,
471 itemurl: item.itemurl,
473 network: item.network,
475 details: item.details,
478 // open a new jSmart instance with the template
479 var tpl = new jSmart (contact_tpl);
481 // replace the variable with the values
482 var html = tpl.fetch(variables);
487 function filter_replace(item) {
493 $.fn.contact_filter = function(backend_url, typ, autosubmit, onselect) {
494 if(typeof typ === 'undefined') typ = '';
495 if(typeof autosubmit === 'undefined') autosubmit = false;
497 // Autocomplete contacts
499 match: /(^)([^\n]+)$/,
501 search: function(term, callback) { contact_search(term, callback, backend_url, typ); },
502 replace: filter_replace,
503 template: contact_filter,
506 this.attr('autocomplete','off');
507 var a = this.textcomplete([contacts], {className:'accontacts', appendTo: '#contact-list'});
509 a.on('textComplete:select', function(e, value, strategy) { $(".dropdown-menu.textcomplete-dropdown.media-list").show(); });