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         // Loading remote bootstrap remote modals
  57         // This is uses to load tradional friendica pages into bootstrap modals
  58         //
  59         $('a[rel=modal]').on('click', function(evt) {
  60                 evt.preventDefault();
  61                 var modal = $('#modal').modal();
  62                 modal
  63                         .find('#modal-body')
  64                         .load($(this).attr("href"), function (responseText, textStatus) {
  65                                 if ( textStatus === 'success' ||
  66                                         textStatus === 'notmodified')
  67                                 {
  68                                         modal.show();
  69
  70                                         //Get first h3 element and use it as title
  71                                         loadModalTitle();
  72                                 }
  73                         });
  74         });
  75
  76         // overwrite Dialog.show from main js to load the filebrowser into a bs modal
  77         Dialog.show = function(url) {
  78                 var modal = $('#modal').modal();
  79                 modal
  80                         .find('#modal-body')
  81                         .load(url, function (responseText, textStatus) {
  82                                 if ( textStatus === 'success' ||
  83                                         textStatus === 'notmodified')
  84                                 {
  85                                         modal.show();
  86
  87                                         // get nickname & filebrowser type from the modal content
  88                                         var nickname = $("#fb-nickname").attr("value");
  89                                         var type = $("#fb-type").attr("value");
  90
  91                                         // try to fetch the hash form the url
  92                                         var match = url.match(/fbrowser\/[a-z]+\/\?mode=modal(.*)/);
  93                                         var hash = match[1];
  94
  95                                         // initialize the filebrowser
  96                                         var jsbrowser = function() {
  97                                                 FileBrowser.init(nickname, type, hash);
  98                                         }
  99                                         loadScript("view/theme/frio/js/filebrowser.js", jsbrowser);
 100                                 }
 101                         });
 102         };
 103
 104         // overwrite the function _get_url from main.js
 105         Dialog._get_url = function(type, name, id) {
 106                 var hash = name;
 107                 if (id !== undefined) hash = hash + "-" + id;
 108                 return "fbrowser/"+type+"/?mode=modal#"+hash;
 109         };
 110
 111
 112
 113
 114 });
 115 //function commentOpenUI(obj, id) {
 116 //      $(document).unbind( "click.commentOpen", handler );
 117 //
 118 //      var handler = function() {
 119 //              if(obj.value == '{{$comment}}') {
 120 //                      obj.value = '';
 121 //                      $("#comment-edit-text-" + id).addClass("comment-edit-text-full").removeClass("comment-edit-text-empty");
 122 //                      // Choose an arbitrary tab index that's greater than what we're using in jot (3 of them)
 123 //                      // The submit button gets tabindex + 1
 124 //                      $("#comment-edit-text-" + id).attr('tabindex','9');
 125 //                      $("#comment-edit-submit-" + id).attr('tabindex','10');
 126 //                      $("#comment-edit-submit-wrapper-" + id).show();
 127 //              }
 128 //      };
 129 //
 130 //      $(document).bind( "click.commentOpen", handler );
 131 //}
 132 //
 133 //function commentCloseUI(obj, id) {
 134 //      $(document).unbind( "click.commentClose", handler );
 135 //
 136 //      var handler = function() {
 137 //              if(obj.value === '') {
 138 //              obj.value = '{{$comment}}';
 139 //                      $("#comment-edit-text-" + id).removeClass("comment-edit-text-full").addClass("comment-edit-text-empty");
 140 //                      $("#comment-edit-text-" + id).removeAttr('tabindex');
 141 //                      $("#comment-edit-submit-" + id).removeAttr('tabindex');
 142 //                      $("#comment-edit-submit-wrapper-" + id).hide();
 143 //              }
 144 //      };
 145 //
 146 //      $(document).bind( "click.commentClose", handler );
 147 //}
 148
 149 function openClose(theID) {
 150         var elem = document.getElementById(theID);
 151
 152         if( $(elem).is(':visible')) {
 153                 $(elem).slideUp(200);
 154         }
 155         else {
 156                 $(elem).slideDown(200);
 157         }
 158 }
 159
 160 function showHide(theID) {
 161         if(document.getElementById(theID).style.display == "block") {
 162                 document.getElementById(theID).style.display = "none"
 163         }
 164         else {
 165                 document.getElementById(theID).style.display = "block"
 166         }
 167 }
 168
 169
 170 function showHideComments(id) {
 171         if( $('#collapsed-comments-' + id).is(':visible')) {
 172                 $('#collapsed-comments-' + id).slideUp();
 173                 $('#hide-comments-' + id).html(window.showMore);
 174                 $('#hide-comments-total-' + id).show();
 175         }
 176         else {
 177                 $('#collapsed-comments-' + id).slideDown();
 178                 $('#hide-comments-' + id).html(window.showFewer);
 179                 $('#hide-comments-total-' + id).hide();
 180         }
 181 }
 182
 183
 184 function justifyPhotos() {
 185         justifiedGalleryActive = true;
 186         $('#photo-album-contents').justifiedGallery({
 187                 margins: 3,
 188                 border: 0,
 189                 sizeRangeSuffixes: {
 190                         'lt100': '-2',
 191                         'lt240': '-2',
 192                         'lt320': '-2',
 193                         'lt500': '',
 194                         'lt640': '-1',
 195                         'lt1024': '-0'
 196                 }
 197         }).on('jg.complete', function(e){ justifiedGalleryActive = false; });
 198 }
 199
 200 function justifyPhotosAjax() {
 201         justifiedGalleryActive = true;
 202         $('#photo-album-contents').justifiedGallery('norewind').on('jg.complete', function(e){ justifiedGalleryActive = false; });
 203 }
 204
 205 function loadScript(url, callback) {
 206         // Adding the script tag to the head as suggested before
 207         var head = document.getElementsByTagName('head')[0];
 208         var script = document.createElement('script');
 209         script.type = 'text/javascript';
 210         script.src = url;
 211
 212         // Then bind the event to the callback function.
 213         // There are several events for cross browser compatibility.
 214         script.onreadystatechange = callback;
 215         script.onload = callback;
 216
 217         // Fire the loading
 218         head.appendChild(script);
 219 }
 220
 221 /**
 222  * @brief Add first h3 element as modal title
 223  *
 224  * Note: this should be really done in the template
 225  * and is the solution where we havent done it until this
 226  * moment or where it isn't possible because of design
 227  */
 228 function loadModalTitle() {
 229         // clear the text of the title
 230         //$("#modal-title").empty();
 231
 232         // hide the first h3 child element of the modal body
 233         $("#modal-body > h3").first().hide();
 234
 235         // get the text of the first h3 child element
 236         var title = $("#modal-body > h3").first().text();
 237
 238         // and append it to modal title
 239         if (title!=="") {
 240                 $("#modal-title").append(title);
 241         }
 242 }
 243
 244 function editpost(url) {
 245         var modal = $('#jot-modal').modal();
 246         var url = url + " #profile-jot-form";
 247         //var rand_num = random_digits(12);
 248         $("#jot-perms-lnk").hide();
 249
 250         // rename the the original div jot-preview-content because the edit function
 251         // does load the content for the modal from another source and preview won't work
 252         // if this div would exist twice
 253         // $("#jot-content #profile-jot-form").attr("id","#profile-jot-form-renamed");
 254         // $("#jot-content #jot-preview-content").attr("id","#jot-preview-content-renamed");
 255
 256         // For editpost we load the modal html form the edit page. So we would have two jot forms in
 257         // the page html. To avoid js conflicts we move the original jot to the end of the page
 258         // so the editpost jot would be the first jot in html structure.
 259         // After closing the modal we move the original jot back to it's orginal position in the html structure.
 260         //
 261         // Note: For now it seems to work but this isn't optimal because we have doubled ID names for the jot div's.
 262         // We need to have a better solution for this in the future.
 263         $("section #jot-content #profile-jot-form").appendTo("footer #cache-container");
 264
 265         jotreset();
 266
 267         modal
 268                 .find('#jot-modal-body')
 269                 .load(url, function (responseText, textStatus) {
 270                         if ( textStatus === 'success' ||
 271                                 textStatus === 'notmodified')
 272                         {
 273                                 // get the item type and hide the input for title and category if it isn't needed
 274                                 var type = $(responseText).find("#profile-jot-form input[name='type']").val();
 275                                 if(type === "wall-comment" || type === "remote-comment")
 276                                 {
 277                                         $("#profile-jot-form #jot-title-wrap").hide();
 278                                         $("#profile-jot-form #jot-category-wrap").hide();
 279                                 }
 280
 281                                 modal.show();
 282                                 $("#jot-popup").show();
 283                         }
 284                 });
 285 }
 286
 287 function jotreset() {
 288         // Clear bs modal on close
 289         // We need this to prevent that the modal displays old content
 290         $('body').on('hidden.bs.modal', '#jot-modal', function () {
 291                 $(this).removeData('bs.modal');
 292                 $("#jot-perms-lnk").show();
 293                 $("#profile-jot-form #jot-title-wrap").show();
 294                 $("#profile-jot-form #jot-category-wrap").show();
 295
 296                 // the following was commented out because it is needed anymore
 297                 // because we changed the behavior at an other place
 298 //              var rand_num = random_digits(12);
 299 //              $('#jot-title, #jot-category, #profile-jot-text').val("");
 300 //              $( "#profile-jot-form input[name='type']" ).val("wall");
 301 //              $( "#profile-jot-form input[name='post_id']" ).val("");
 302 //              $( "#profile-jot-form input[name='post_id_random']" ).val(rand_num);
 303                 $("#jot-modal-body").empty();
 304
 305                 // rename the div #jot-preview-content-renamed back to it's original
 306                 // name. Have a look at function editpost() for further explanation
 307                 //$("#jot-content #profile-jot-form-renamed").attr("id","#profile-jot-form");
 308                 //$("#jot-content #jot-preview-content-renamed").attr("id","#jot-preview-content");
 309
 310                 // Move the original jot back to it's old place in the html structure
 311                 // For explaination have a look at function editpost()
 312                 $("footer #cache-container #profile-jot-form").appendTo("section #jot-content");
 313         });
 314 }
 315
 316 function random_digits(digits) {
 317         var rn = "";
 318         var rnd = "";
 319
 320         for(var i = 0; i < digits; i++) {
 321                 var rn = Math.round(Math.random() * (9));
 322                 rnd += rn;
 323         }
 324
 325         return rnd;
 326 }