view/theme/frio/js/modal.js

   1 /*
   2  * @brief contains functions for bootstrap modal handling
   3  */
   4 $(document).ready(function(){
   5         // Clear bs modal on close
   6         // We need this to prevent that the modal displays old content
   7         $('body, footer').on('hidden.bs.modal', '.modal', function () {
   8                 $(this).removeData('bs.modal');
   9                 $("#modal-title").empty();
  10                 $('#modal-body').empty();
  11                 // remove the file browser from jot (else we would have problems
  12                 // with ajaxupload
  13                 $(".fbrowser").remove();
  14         });
  15
  16                 // Add Colorbox for viewing Network page images
  17         //var cBoxClasses = new Array();
  18         $("body").on("click", ".wall-item-body a img", function(){
  19                 var aElem = $(this).parent();
  20                 var imgHref = aElem.attr("href");
  21
  22                 // We need to make sure we only put a Colorbox on links to Friendica images
  23                 // We'll try to do this by looking for links of the form
  24                 // .../photo/ab803d8eg08daf85023adfec08 (with nothing more following), in hopes
  25                 // that that will be unique enough
  26                 if(imgHref.match(/\/photo\/[a-fA-F0-9]+(-[0-9]\.[\w]+?)?$/)) {
  27
  28                         // Add a unique class to all the images of a certain post, to allow scrolling through
  29                         var cBoxClass = $(this).closest(".wall-item-body").attr("id") + "-lightbox";
  30                         $(this).addClass(cBoxClass);
  31
  32 //                      if( $.inArray(cBoxClass, cBoxClasses) < 0 ) {
  33 //                              cBoxClasses.push(cBoxClass);
  34 //                      }
  35
  36                         aElem.colorbox({
  37                                 maxHeight: '90%',
  38                                 photo: true, // Colorbox doesn't recognize a URL that don't end in .jpg, etc. as a photo
  39                                 rel: cBoxClass //$(this).attr("class").match(/wall-item-body-[\d]+-lightbox/)[0]
  40                         });
  41                 }
  42         });
  43
  44
  45
  46         // Jot nav menu.
  47         $("body").on("click", "#jot-modal .jot-nav li a", function(e){
  48                 e.preventDefault();
  49                 toggleJotNav(this);
  50         });
  51
  52         // Open filebrowser for elements with the class "image-select"
  53         // The following part handles the filebrowser for field_fileinput.tpl
  54         $("body").on("click", ".image-select", function(e){
  55                 // set a extra attribute to mark the clicked button
  56                 this.setAttribute("image-input", "select");
  57                 Dialog.doImageBrowser("input");
  58         });
  59
  60         // Insert filebrowser images into the input field (field_fileinput.tpl)
  61         $("body").on("fbrowser.image.input", function(e, filename, embedcode, id, img) {
  62                 // select the clicked button by it's attribute
  63                 var elm = $("[image-input='select']")
  64                 // select the input field which belongs to this button
  65                 var input = elm.parent(".input-group").children("input");
  66                 // remove the special indicator attribut from the button
  67                 elm.removeAttr("image-input");
  68                 // inserte the link from the image into the input field
  69                 input.val(img);
  70
  71         });
  72 });
  73
  74 // overwrite Dialog.show from main js to load the filebrowser into a bs modal
  75 Dialog.show = function(url) {
  76         var modal = $('#modal').modal();
  77         modal
  78                 .find('#modal-body')
  79                 .load(url, function (responseText, textStatus) {
  80                         if ( textStatus === 'success' ||
  81                                 textStatus === 'notmodified')
  82                         {
  83                                 modal.show();
  84
  85                                 $(function() {Dialog._load(url);});
  86                         }
  87                 });
  88 };
  89
  90 // overwrite the function _get_url from main.js
  91 Dialog._get_url = function(type, name, id) {
  92         var hash = name;
  93         if (id !== undefined) hash = hash + "-" + id;
  94         return "fbrowser/"+type+"/?mode=none#"+hash;
  95 };
  96
  97 // does load the filebrowser into the jot modal
  98 Dialog.showJot = function() {
  99         var type = "image";
 100         var name = "main";
 101
 102         var url = Dialog._get_url(type, name);
 103         if(($(".modal-body #jot-fbrowser-wrapper .fbrowser").length) < 1 ) {
 104                 // load new content to fbrowser window
 105                 $("#jot-fbrowser-wrapper").load(url,function(responseText, textStatus){
 106                         if ( textStatus === 'success' ||
 107                                 textStatus === 'notmodified')
 108                         {
 109                                 $(function() {Dialog._load(url);});
 110                         }
 111                 });
 112         }
 113 };
 114
 115 // init the filebrowser after page load
 116 Dialog._load = function(url) {
 117         // get nickname & filebrowser type from the modal content
 118         var nickname = $("#fb-nickname").attr("value");
 119         var type = $("#fb-type").attr("value");
 120
 121         // try to fetch the hash form the url
 122         var match = url.match(/fbrowser\/[a-z]+\/\?mode=none(.*)/);
 123         var hash = match[1];
 124
 125         // initialize the filebrowser
 126         var jsbrowser = function() {
 127                 FileBrowser.init(nickname, type, hash);
 128         }
 129         loadScript("view/theme/frio/js/filebrowser.js", jsbrowser);
 130 };
 131
 132 /**
 133  * @brief Add first h3 element as modal title
 134  *
 135  * Note: this should be really done in the template
 136  * and is the solution where we havent done it until this
 137  * moment or where it isn't possible because of design
 138  */
 139 function loadModalTitle() {
 140         // clear the text of the title
 141         //$("#modal-title").empty();
 142
 143         // hide the first h3 child element of the modal body
 144         $("#modal-body .heading").first().hide();
 145
 146         // get the text of the first element with heading class
 147         var title = $("#modal-body .heading").first().text();
 148
 149         // and append it to modal title
 150         if (title!=="") {
 151                 $("#modal-title").append(title);
 152         }
 153 }
 154
 155 // This function loads html content from a friendica page
 156 // into a modal
 157 function addToModal(url) {
 158         var char = qOrAmp(url);
 159
 160         var url = url + char + 'mode=none';
 161         var modal = $('#modal').modal();
 162
 163         modal
 164                 .find('#modal-body')
 165                 .load(url, function (responseText, textStatus) {
 166                         if ( textStatus === 'success' ||
 167                                 textStatus === 'notmodified')
 168                         {
 169                                 modal.show();
 170
 171                                 //Get first h3 element and use it as title
 172                                 loadModalTitle();
 173                         }
 174                 });
 175 };
 176
 177 // function to load the html from the edit post page into
 178 // the jot modal
 179 function editpost(url) {
 180         var modal = $('#jot-modal').modal();
 181         var url = url + " #profile-jot-form";
 182         //var rand_num = random_digits(12);
 183         $(".jot-nav #jot-perms-lnk").parent("li").hide();
 184
 185         // rename the the original div jot-preview-content because the edit function
 186         // does load the content for the modal from another source and preview won't work
 187         // if this div would exist twice
 188         // $("#jot-content #profile-jot-form").attr("id","#profile-jot-form-renamed");
 189         // $("#jot-content #jot-preview-content").attr("id","#jot-preview-content-renamed");
 190
 191         // For editpost we load the modal html form the edit page. So we would have two jot forms in
 192         // the page html. To avoid js conflicts we move the original jot to the end of the page
 193         // so the editpost jot would be the first jot in html structure.
 194         // After closing the modal we move the original jot back to it's orginal position in the html structure.
 195         //
 196         // Note: For now it seems to work but this isn't optimal because we have doubled ID names for the jot div's.
 197         // We need to have a better solution for this in the future.
 198         $("section #jot-content #profile-jot-form").appendTo("footer #cache-container");
 199
 200         jotreset();
 201
 202         modal
 203                 .find('#jot-modal-body')
 204                 .load(url, function (responseText, textStatus) {
 205                         if ( textStatus === 'success' ||
 206                                 textStatus === 'notmodified')
 207                         {
 208                                 // get the item type and hide the input for title and category if it isn't needed
 209                                 var type = $(responseText).find("#profile-jot-form input[name='type']").val();
 210                                 if(type === "wall-comment" || type === "remote-comment")
 211                                 {
 212                                         $("#profile-jot-form #jot-title-wrap").hide();
 213                                         $("#profile-jot-form #jot-category-wrap").hide();
 214                                 }
 215
 216                                 modal.show();
 217                                 $("#jot-popup").show();
 218                         }
 219                 });
 220 }
 221
 222 // remove content from the jot modal
 223 function jotreset() {
 224         // Clear bs modal on close
 225         // We need this to prevent that the modal displays old content
 226         $('body').on('hidden.bs.modal', '#jot-modal', function () {
 227                 $(this).removeData('bs.modal');
 228                 $(".jot-nav #jot-perms-lnk").parent("li").show();
 229                 $("#profile-jot-form #jot-title-wrap").show();
 230                 $("#profile-jot-form #jot-category-wrap").show();
 231
 232                 // the following was commented out because it is needed anymore
 233                 // because we changed the behavior at an other place
 234         //              var rand_num = random_digits(12);
 235         //              $('#jot-title, #jot-category, #profile-jot-text').val("");
 236         //              $( "#profile-jot-form input[name='type']" ).val("wall");
 237         //              $( "#profile-jot-form input[name='post_id']" ).val("");
 238         //              $( "#profile-jot-form input[name='post_id_random']" ).val(rand_num);
 239                 $("#jot-modal-body").empty();
 240
 241                 // rename the div #jot-preview-content-renamed back to it's original
 242                 // name. Have a look at function editpost() for further explanation
 243                 //$("#jot-content #profile-jot-form-renamed").attr("id","#profile-jot-form");
 244                 //$("#jot-content #jot-preview-content-renamed").attr("id","#jot-preview-content");
 245
 246                 // Move the original jot back to it's old place in the html structure
 247                 // For explaination have a look at function editpost()
 248                 $("footer #cache-container #profile-jot-form").appendTo("section #jot-content");
 249                 });
 250 }
 251
 252 // Give the active "jot-nav" list element the class "active"
 253 function toggleJotNav (elm) {
 254         // select all li of jot-nav and remove the active class
 255         $(elm).closest(".jot-nav").children("li").removeClass("active");
 256         // add the active class to the parent of the link which was selected
 257         $(elm).parent("li").addClass("active");
 258 }
 259