js/theme.js

   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();
   6                 } else {
   7                         $("#back-to-top").fadeOut();
   8                 }
   9         });
  10
  11         // scroll body to 0px on click
  12         $("#back-to-top").click(function () {
  13                 $("body,html").animate({
  14                         scrollTop: 0
  15                 }, 400);
  16                 return false;
  17         });
  18
  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();
  25         });
  26
  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");
  30         }
  31
  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");
  35         }
  36
  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");
  40         }
  41
  42         // give select fields an boostrap classes
  43         $(".field.select, .field.custom").addClass("form-group");
  44         $(".field.select > select, .field.custom > select").addClass("form-control");
  45
  46         if( $("ul.tabs")) {
  47                 $("ul.tabs").appendTo("#topbar-second > .container > #tabmenu");
  48         }
  49
  50         // add Jot botton to the scecond navbar
  51         if( $("section #jotOpen")) {
  52                 $("section #jotOpen").appendTo("#topbar-second > .container > #navbar-button");
  53                 if( $("#jot-popup").is(":hidden")) $("#topbar-second > .container > #navbar-button #jotOpen").hide();
  54         }
  55
  56         // add search-headding to the scecond navbar
  57         if( $(".search-headding")) {
  58                 $(".search-headding").appendTo("#topbar-second > .container > #tabmenu");
  59         }
  60
  61         // initialize the bootstrap tooltips
  62         $('[data-toggle="tooltip"]').tooltip({
  63                 animation: true,
  64                 html: true,
  65                 placement: 'auto',
  66                 delay: {
  67                         show: 500,
  68                         hide: 100
  69                 }
  70         });
  71
  72         // Loading remote bootstrap remote modals
  73         // This is uses to load tradional friendica pages into bootstrap modals
  74         //
  75         // commentent out because we actually don't use it anymore
  76 //      $('a[rel=modal]').on('click', function(evt) {
  77 //              evt.preventDefault();
  78 //              var modal = $('#modal').modal();
  79 //              modal
  80 //                      .find('#modal-body')
  81 //                      .load($(this).attr("href"), function (responseText, textStatus) {
  82 //                              if ( textStatus === 'success' ||
  83 //                                      textStatus === 'notmodified')
  84 //                              {
  85 //                                      modal.show();
  86 //
  87 //                                      //Get first h3 element and use it as title
  88 //                                      loadModalTitle();
  89 //                              }
  90 //                      });
  91 //      });
  92
  93         // Add Colorbox for viewing Network page images
  94         //var cBoxClasses = new Array();
  95         $(".wall-item-body a img").each(function(){
  96                 var aElem = $(this).parent();
  97                 var imgHref = aElem.attr("href");
  98
  99                 // We need to make sure we only put a Colorbox on links to Friendica images
 100                 // We'll try to do this by looking for links of the form
 101                 // .../photo/ab803d8eg08daf85023adfec08 (with nothing more following), in hopes
 102                 // that that will be unique enough
 103                 if(imgHref.match(/\/photo\/[a-fA-F0-9]+(-[0-9]\.[\w]+?)?$/)) {
 104
 105                         // Add a unique class to all the images of a certain post, to allow scrolling through
 106                         var cBoxClass = $(this).closest(".wall-item-body").attr("id") + "-lightbox";
 107                         $(this).addClass(cBoxClass);
 108
 109 //                      if( $.inArray(cBoxClass, cBoxClasses) < 0 ) {
 110 //                              cBoxClasses.push(cBoxClass);
 111 //                      }
 112
 113                         aElem.colorbox({
 114                                 maxHeight: '90%',
 115                                 photo: true, // Colorbox doesn't recognize a URL that don't end in .jpg, etc. as a photo
 116                                 rel: cBoxClass //$(this).attr("class").match(/wall-item-body-[\d]+-lightbox/)[0]
 117                         });
 118                 }
 119         });
 120
 121         // overwrite Dialog.show from main js to load the filebrowser into a bs modal
 122         Dialog.show = function(url) {
 123                 var modal = $('#modal').modal();
 124                 modal
 125                         .find('#modal-body')
 126                         .load(url, function (responseText, textStatus) {
 127                                 if ( textStatus === 'success' ||
 128                                         textStatus === 'notmodified')
 129                                 {
 130                                         modal.show();
 131
 132                                         // get nickname & filebrowser type from the modal content
 133                                         var nickname = $("#fb-nickname").attr("value");
 134                                         var type = $("#fb-type").attr("value");
 135
 136                                         // try to fetch the hash form the url
 137                                         var match = url.match(/fbrowser\/[a-z]+\/\?mode=modal(.*)/);
 138                                         var hash = match[1];
 139
 140                                         // initialize the filebrowser
 141                                         var jsbrowser = function() {
 142                                                 FileBrowser.init(nickname, type, hash);
 143                                         }
 144                                         loadScript("view/theme/frio/js/filebrowser.js", jsbrowser);
 145                                 }
 146                         });
 147         };
 148
 149         // overwrite the function _get_url from main.js
 150         Dialog._get_url = function(type, name, id) {
 151                 var hash = name;
 152                 if (id !== undefined) hash = hash + "-" + id;
 153                 return "fbrowser/"+type+"/?mode=modal#"+hash;
 154         };
 155
 156
 157
 158
 159 });
 160 //function commentOpenUI(obj, id) {
 161 //      $(document).unbind( "click.commentOpen", handler );
 162 //
 163 //      var handler = function() {
 164 //              if(obj.value == '{{$comment}}') {
 165 //                      obj.value = '';
 166 //                      $("#comment-edit-text-" + id).addClass("comment-edit-text-full").removeClass("comment-edit-text-empty");
 167 //                      // Choose an arbitrary tab index that's greater than what we're using in jot (3 of them)
 168 //                      // The submit button gets tabindex + 1
 169 //                      $("#comment-edit-text-" + id).attr('tabindex','9');
 170 //                      $("#comment-edit-submit-" + id).attr('tabindex','10');
 171 //                      $("#comment-edit-submit-wrapper-" + id).show();
 172 //              }
 173 //      };
 174 //
 175 //      $(document).bind( "click.commentOpen", handler );
 176 //}
 177 //
 178 //function commentCloseUI(obj, id) {
 179 //      $(document).unbind( "click.commentClose", handler );
 180 //
 181 //      var handler = function() {
 182 //              if(obj.value === '') {
 183 //              obj.value = '{{$comment}}';
 184 //                      $("#comment-edit-text-" + id).removeClass("comment-edit-text-full").addClass("comment-edit-text-empty");
 185 //                      $("#comment-edit-text-" + id).removeAttr('tabindex');
 186 //                      $("#comment-edit-submit-" + id).removeAttr('tabindex');
 187 //                      $("#comment-edit-submit-wrapper-" + id).hide();
 188 //              }
 189 //      };
 190 //
 191 //      $(document).bind( "click.commentClose", handler );
 192 //}
 193
 194 function openClose(theID) {
 195         var elem = document.getElementById(theID);
 196
 197         if( $(elem).is(':visible')) {
 198                 $(elem).slideUp(200);
 199         }
 200         else {
 201                 $(elem).slideDown(200);
 202         }
 203 }
 204
 205 function showHide(theID) {
 206         if(document.getElementById(theID).style.display == "block") {
 207                 document.getElementById(theID).style.display = "none"
 208         }
 209         else {
 210                 document.getElementById(theID).style.display = "block"
 211         }
 212 }
 213
 214
 215 function showHideComments(id) {
 216         if( $('#collapsed-comments-' + id).is(':visible')) {
 217                 $('#collapsed-comments-' + id).slideUp();
 218                 $('#hide-comments-' + id).html(window.showMore);
 219                 $('#hide-comments-total-' + id).show();
 220         }
 221         else {
 222                 $('#collapsed-comments-' + id).slideDown();
 223                 $('#hide-comments-' + id).html(window.showFewer);
 224                 $('#hide-comments-total-' + id).hide();
 225         }
 226 }
 227
 228
 229 function justifyPhotos() {
 230         justifiedGalleryActive = true;
 231         $('#photo-album-contents').justifiedGallery({
 232                 margins: 3,
 233                 border: 0,
 234                 sizeRangeSuffixes: {
 235                         'lt100': '-2',
 236                         'lt240': '-2',
 237                         'lt320': '-2',
 238                         'lt500': '',
 239                         'lt640': '-1',
 240                         'lt1024': '-0'
 241                 }
 242         }).on('jg.complete', function(e){ justifiedGalleryActive = false; });
 243 }
 244
 245 function justifyPhotosAjax() {
 246         justifiedGalleryActive = true;
 247         $('#photo-album-contents').justifiedGallery('norewind').on('jg.complete', function(e){ justifiedGalleryActive = false; });
 248 }
 249
 250 function loadScript(url, callback) {
 251         // Adding the script tag to the head as suggested before
 252         var head = document.getElementsByTagName('head')[0];
 253         var script = document.createElement('script');
 254         script.type = 'text/javascript';
 255         script.src = url;
 256
 257         // Then bind the event to the callback function.
 258         // There are several events for cross browser compatibility.
 259         script.onreadystatechange = callback;
 260         script.onload = callback;
 261
 262         // Fire the loading
 263         head.appendChild(script);
 264 }
 265
 266 /**
 267  * @brief Add first h3 element as modal title
 268  *
 269  * Note: this should be really done in the template
 270  * and is the solution where we havent done it until this
 271  * moment or where it isn't possible because of design
 272  */
 273 function loadModalTitle() {
 274         // clear the text of the title
 275         //$("#modal-title").empty();
 276
 277         // hide the first h3 child element of the modal body
 278         $("#modal-body > h3").first().hide();
 279
 280         // get the text of the first h3 child element
 281         var title = $("#modal-body > h3").first().text();
 282
 283         // and append it to modal title
 284         if (title!=="") {
 285                 $("#modal-title").append(title);
 286         }
 287 }
 288
 289
 290 function addToModal(url) {
 291         var url = url + '?mode=modal';
 292         var modal = $('#modal').modal();
 293
 294         modal
 295                 .find('#modal-body')
 296                 .load(url, function (responseText, textStatus) {
 297                         if ( textStatus === 'success' ||
 298                                 textStatus === 'notmodified')
 299                         {
 300                                 modal.show();
 301
 302                                 //Get first h3 element and use it as title
 303                                 loadModalTitle();
 304                         }
 305                 });
 306 };
 307
 308 function editpost(url) {
 309         var modal = $('#jot-modal').modal();
 310         var url = url + " #profile-jot-form";
 311         //var rand_num = random_digits(12);
 312         $("#jot-perms-lnk").hide();
 313
 314         // rename the the original div jot-preview-content because the edit function
 315         // does load the content for the modal from another source and preview won't work
 316         // if this div would exist twice
 317         // $("#jot-content #profile-jot-form").attr("id","#profile-jot-form-renamed");
 318         // $("#jot-content #jot-preview-content").attr("id","#jot-preview-content-renamed");
 319
 320         // For editpost we load the modal html form the edit page. So we would have two jot forms in
 321         // the page html. To avoid js conflicts we move the original jot to the end of the page
 322         // so the editpost jot would be the first jot in html structure.
 323         // After closing the modal we move the original jot back to it's orginal position in the html structure.
 324         //
 325         // Note: For now it seems to work but this isn't optimal because we have doubled ID names for the jot div's.
 326         // We need to have a better solution for this in the future.
 327         $("section #jot-content #profile-jot-form").appendTo("footer #cache-container");
 328
 329         jotreset();
 330
 331         modal
 332                 .find('#jot-modal-body')
 333                 .load(url, function (responseText, textStatus) {
 334                         if ( textStatus === 'success' ||
 335                                 textStatus === 'notmodified')
 336                         {
 337                                 // get the item type and hide the input for title and category if it isn't needed
 338                                 var type = $(responseText).find("#profile-jot-form input[name='type']").val();
 339                                 if(type === "wall-comment" || type === "remote-comment")
 340                                 {
 341                                         $("#profile-jot-form #jot-title-wrap").hide();
 342                                         $("#profile-jot-form #jot-category-wrap").hide();
 343                                 }
 344
 345                                 modal.show();
 346                                 $("#jot-popup").show();
 347                         }
 348                 });
 349 }
 350
 351 function jotreset() {
 352         // Clear bs modal on close
 353         // We need this to prevent that the modal displays old content
 354         $('body').on('hidden.bs.modal', '#jot-modal', function () {
 355                 $(this).removeData('bs.modal');
 356                 $("#jot-perms-lnk").show();
 357                 $("#profile-jot-form #jot-title-wrap").show();
 358                 $("#profile-jot-form #jot-category-wrap").show();
 359
 360                 // the following was commented out because it is needed anymore
 361                 // because we changed the behavior at an other place
 362 //              var rand_num = random_digits(12);
 363 //              $('#jot-title, #jot-category, #profile-jot-text').val("");
 364 //              $( "#profile-jot-form input[name='type']" ).val("wall");
 365 //              $( "#profile-jot-form input[name='post_id']" ).val("");
 366 //              $( "#profile-jot-form input[name='post_id_random']" ).val(rand_num);
 367                 $("#jot-modal-body").empty();
 368
 369                 // rename the div #jot-preview-content-renamed back to it's original
 370                 // name. Have a look at function editpost() for further explanation
 371                 //$("#jot-content #profile-jot-form-renamed").attr("id","#profile-jot-form");
 372                 //$("#jot-content #jot-preview-content-renamed").attr("id","#jot-preview-content");
 373
 374                 // Move the original jot back to it's old place in the html structure
 375                 // For explaination have a look at function editpost()
 376                 $("footer #cache-container #profile-jot-form").appendTo("section #jot-content");
 377         });
 378 }
 379
 380 function random_digits(digits) {
 381         var rn = "";
 382         var rnd = "";
 383
 384         for(var i = 0; i < digits; i++) {
 385                 var rn = Math.round(Math.random() * (9));
 386                 rnd += rn;
 387         }
 388
 389         return rnd;
 390 }
 391
 392 function insertFormatting(comment,BBcode,id) {
 393
 394                 var tmpStr = $("#comment-edit-text-" + id).val();
 395                 if(tmpStr == comment) {
 396                         tmpStr = "";
 397                         $("#comment-edit-text-" + id).addClass("comment-edit-text-full");
 398                         $("#comment-edit-text-" + id).removeClass("comment-edit-text-empty");
 399                         openMenu("comment-edit-submit-wrapper-" + id);
 400                         $("#comment-edit-text-" + id).val(tmpStr);
 401                 }
 402
 403         textarea = document.getElementById("comment-edit-text-" +id);
 404         if (document.selection) {
 405                 textarea.focus();
 406                 selected = document.selection.createRange();
 407                 if (BBcode == "url"){
 408                         selected.text = "["+BBcode+"]" + "http://" +  selected.text + "[/"+BBcode+"]";
 409                         } else
 410                 selected.text = "["+BBcode+"]" + selected.text + "[/"+BBcode+"]";
 411         } else if (textarea.selectionStart || textarea.selectionStart == "0") {
 412                 var start = textarea.selectionStart;
 413                 var end = textarea.selectionEnd;
 414                 if (BBcode == "url"){
 415                         textarea.value = textarea.value.substring(0, start) + "["+BBcode+"]" + "http://" + textarea.value.substring(start, end) + "[/"+BBcode+"]" + textarea.value.substring(end, textarea.value.length);
 416                         } else
 417                 textarea.value = textarea.value.substring(0, start) + "["+BBcode+"]" + textarea.value.substring(start, end) + "[/"+BBcode+"]" + textarea.value.substring(end, textarea.value.length);
 418         }
 419         return true;
 420 }
 421
 422
 423 function showThread(id) {
 424         $("#collapsed-comments-" + id).show()
 425         $("#collapsed-comments-" + id + " .collapsed-comments").show()
 426 }
 427 function hideThread(id) {
 428         $("#collapsed-comments-" + id).hide()
 429         $("#collapsed-comments-" + id + " .collapsed-comments").hide()
 430 }
 431
 432
 433 function cmtBbOpen(id) {
 434         $("#comment-edit-bb-" + id).show();
 435 }
 436 function cmtBbClose(id) {
 437         $("#comment-edit-bb-" + id).hide();
 438 }