view/theme/frio/js/filebrowser.js

   1 /**\r
   2  * Filebrowser - Friendica Communications Server\r
   3  *\r
   4  * Copyright (c) 2010-2015 the Friendica Project\r
   5  *\r
   6  * This program is free software: you can redistribute it and/or modify\r
   7  * it under the terms of the GNU Affero General Public License as published by\r
   8  * the Free Software Foundation, either version 3 of the License, or\r
   9  * (at your option) any later version.\r
  10  *\r
  11  * This code handle user interaction for image/file upload/browser dialog.\r
  12  * Is loaded from filebrowser_plain.tpl\r
  13  *\r
  14  * To load filebrowser in colorbox, call\r
  15  *\r
  16  *      Dialog.doImageBrowser(eventname, id);\r
  17  *\r
  18  * or\r
  19  *\r
  20  *      Dialog.doFileBrowser(eventname, id);\r
  21  *\r
  22  * where:\r
  23  *\r
  24  *              eventname: event name to catch return value\r
  25  *              id: id returned to event handler\r
  26  *\r
  27  * When user select an item, an event in fired in parent page, on body element\r
  28  * The event is named\r
  29  *\r
  30  *              fbrowser.<type>.[<eventname>]\r
  31  *\r
  32  * <type> will be one of "image" or "file", and the event handler will\r
  33  * get the following params:\r
  34  *\r
  35  *              filemane: filename of item choosed by user\r
  36  *              embed: bbcode to embed element into posts\r
  37  *              id: id from caller code\r
  38  *\r
  39  * example:\r
  40  *\r
  41  *              // open dialog for select an image for a textarea with id "myeditor"\r
  42  *              var id="myeditor";\r
  43  *              Dialog.doImageBrowser("example", id);\r
  44  *\r
  45  *              // setup event handler to get user selection\r
  46  *              $("body").on("fbrowser.image.example", function(event, filename, bbcode, id) {\r
  47  *                      // close colorbox\r
  48  *                      $.colorbox.close();\r
  49  *                      // replace textxarea text with bbcode\r
  50  *                      $(id).value = bbcode;\r
  51  *              });\r
  52  **/\r
  53 \r
  54 \r
  55 /*\r
  56  * IMPORTANT\r
  57  *\r
  58  *  This is a modified version to work with\r
  59  *  the frio theme.and bootstrap modals\r
  60  *\r
  61  *  The origninal file is under:\r
  62  *  js/filebrowser.js\r
  63  *\r
  64  */\r
  65 \r
  66 \r
  67 var FileBrowser = {\r
  68         nickname : "",\r
  69         type : "",\r
  70         event: "",\r
  71         id : null,\r
  72 \r
  73         init: function(nickname, type, hash) {\r
  74                 FileBrowser.nickname = nickname;\r
  75                 FileBrowser.type = type;\r
  76                 FileBrowser.event = "fbrowser."+type;\r
  77 \r
  78                 if (hash!=="") {\r
  79                         var h = hash.replace("#","");\r
  80                         var destination = h.split("-")[0];\r
  81                         FileBrowser.id = h.split("-")[1];\r
  82                         FileBrowser.event = FileBrowser.event + "." + destination;\r
  83                         if (destination == "comment") {\r
  84                                 // Get the comment textimput field\r
  85                                 var commentElm = document.getElementById("comment-edit-text-" + FileBrowser.id);\r
  86                         }\r
  87                 };\r
  88 \r
  89                 console.log("FileBrowser:", nickname, type,FileBrowser.event, FileBrowser.id );\r
  90 \r
  91                 FileBrowser.postLoad();\r
  92 \r
  93                 $(".error a.close").on("click", function(e) {\r
  94                         e.preventDefault();\r
  95                         $(".error").addClass("hidden");\r
  96                 });\r
  97 \r
  98                 // Click on album link\r
  99                 $(".fbrowser").on("click", ".folders a, .path a", function(e) {\r
 100                         e.preventDefault();\r
 101                         var url = baseurl + "/fbrowser/" + FileBrowser.type + "/" + this.dataset.folder + "?mode=none";\r
 102 \r
 103                         FileBrowser.loadContent(url);\r
 104                 });\r
 105 \r
 106                 //Embed on click\r
 107                 $(".fbrowser").on('click', ".photo-album-photo-link", function(e) {\r
 108                         e.preventDefault();\r
 109 \r
 110                         var embed = "";\r
 111                         if (FileBrowser.type == "image") {\r
 112                                 embed = "[url="+this.dataset.link+"][img]"+this.dataset.img+"[/img][/url]";\r
 113                         }\r
 114                         if (FileBrowser.type == "file") {\r
 115                                 // attachment links are "baseurl/attach/id"; we need id\r
 116                                 embed = "[attachment]"+this.dataset.link.split("/").pop()+"[/attachment]";\r
 117                         }\r
 118 \r
 119                         // Delete prefilled Text of the comment input\r
 120                         // Note: not the best solution but function commentOpenUI don't\r
 121                         // work as expected (we need a way to wait until commentOpenUI would be finished).\r
 122                         // As for now we insert pieces of this function here\r
 123                         if ((commentElm !== null) && (typeof commentElm !== "undefined")) {\r
 124                                 if (commentElm.value == "") {\r
 125                                         $("#comment-edit-text-" + FileBrowser.id).addClass("comment-edit-text-full").removeClass("comment-edit-text-empty");\r
 126                                         $("#comment-edit-submit-wrapper-" + FileBrowser.id).show();\r
 127                                         $("#comment-edit-text-" + FileBrowser.id).attr('tabindex','9');\r
 128                                         $("#comment-edit-submit-" + FileBrowser.id).attr('tabindex','10');\r
 129                                 }\r
 130 \r
 131                         }\r
 132                         console.log(FileBrowser.event, this.dataset.filename, embed, FileBrowser.id);\r
 133                         parent.$("body").trigger(FileBrowser.event, [\r
 134                                 this.dataset.filename,\r
 135                                 embed,\r
 136                                 FileBrowser.id,\r
 137                                 this.dataset.img,\r
 138                         ]);\r
 139 \r
 140                         // Close model\r
 141                         $('#modal').modal('hide');\r
 142                         // Update autosize for this textarea\r
 143                         autosize.update($(".text-autosize"));\r
 144                 });\r
 145 \r
 146                 // EventListener for switching between image and file mode\r
 147                 $(".fbrowser").on('click', ".fbswitcher .btn", function(e) {\r
 148                         e.preventDefault();\r
 149                         FileBrowser.type = this.getAttribute("data-mode");\r
 150                         $(".fbrowser").removeClass().addClass("fbrowser " + FileBrowser.type);\r
 151                         url = baseurl + "/fbrowser/" + FileBrowser.type + "?mode=none";\r
 152 \r
 153                         FileBrowser.loadContent(url);\r
 154                 });\r
 155         },\r
 156 \r
 157         // Initialize the AjaxUpload for the upload buttons\r
 158         uploadButtons: function() {\r
 159                 if ($("#upload-image").length) {\r
 160                         var image_uploader = new window.AjaxUpload(\r
 161                                 'upload-image',\r
 162                                 {       action: 'wall_upload/'+FileBrowser.nickname+'?response=json',\r
 163                                         name: 'userfile',\r
 164                                         responseType: 'json',\r
 165                                         onSubmit: function(file,ext) {\r
 166                                                 $(".fbrowser-content").hide();\r
 167                                                 $(".fbrowser .profile-rotator-wrapper").show();\r
 168                                                 $(".error").addClass('hidden');\r
 169                                         },\r
 170                                         onComplete: function(file,response) {\r
 171                                                 if (response['error']!= undefined) {\r
 172                                                         $(".error span").html(response['error']);\r
 173                                                         $(".error").removeClass('hidden');\r
 174                                                         $(".fbrowser .profile-rotator-wrapper").hide();\r
 175                                                         return;\r
 176                                                 }\r
 177 \r
 178 //                                              location = baseurl + "/fbrowser/image/?mode=none"+location['hash'];\r
 179 //                                              location.reload(true);\r
 180 \r
 181                                                 var url = baseurl + "/fbrowser/" + FileBrowser.type + "?mode=none"\r
 182                                                 // load new content to fbrowser window\r
 183                                                 FileBrowser.loadContent(url);\r
 184                                         }\r
 185                                 }\r
 186                         );\r
 187                 }\r
 188 \r
 189                 if ($("#upload-file").length) {\r
 190                         var file_uploader = new window.AjaxUpload(\r
 191                                 'upload-file',\r
 192                                 {       action: 'wall_attach/'+FileBrowser.nickname+'?response=json',\r
 193                                         name: 'userfile',\r
 194                                         onSubmit: function(file,ext) {\r
 195                                                 $(".fbrowser-content").hide();\r
 196                                                 $(".fbrowser .profile-rotator-wrapper").show();\r
 197                                                 $(".error").addClass('hidden');\r
 198                                         },\r
 199                                         onComplete: function(file,response) {\r
 200                                                 if (response['error']!= undefined) {\r
 201                                                         $(".error span").html(response['error']);\r
 202                                                         $(".error").removeClass('hidden');\r
 203                                                         $('#profile-rotator').hide();\r
 204                                                         return;\r
 205                                                 }\r
 206 \r
 207 //                                              location = baseurl + "/fbrowser/file/?mode=none"+location['hash'];\r
 208 //                                              location.reload(true);\r
 209 \r
 210                                                 var url = baseurl + "/fbrowser/" + FileBrowser.type + "?mode=none"\r
 211                                                 // Load new content to fbrowser window\r
 212                                                 FileBrowser.loadContent(url)\r
 213                                         }\r
 214                                 }\r
 215                         );\r
 216                 }\r
 217         },\r
 218 \r
 219         postLoad: function() {\r
 220                 $(".fbrowser .fbswitcher .btn").removeClass("active");\r
 221                 $(".fbrowser .fbswitcher [data-mode=" + FileBrowser.type + "]").addClass("active");\r
 222                 // We need to add the AjaxUpload to the button\r
 223                 FileBrowser.uploadButtons();\r
 224         },\r
 225 \r
 226         loadContent: function(url) {\r
 227                 $(".fbrowser-content").hide();\r
 228                 $(".fbrowser .profile-rotator-wrapper").show();\r
 229 \r
 230                 // load new content to fbrowser window\r
 231                 $(".fbrowser").load(url, function(responseText, textStatus){\r
 232                         $(".profile-rotator-wrapper").hide();\r
 233                         if (textStatus === 'success') {\r
 234                                 $(".fbrowser_content").show();\r
 235                                 FileBrowser.postLoad();\r
 236                         }\r
 237                 });\r
 238         }\r
 239 };\r