]> git.mxchange.org Git - friendica.git/blob - view/theme/frio/js/filebrowser.js
css: border for images, min-with for folders list
[friendica.git] / 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         folder: "",\r
72         id : null,\r
73 \r
74         init: function(nickname, type, hash) {\r
75                 FileBrowser.nickname = nickname;\r
76                 FileBrowser.type = type;\r
77                 FileBrowser.event = "fbrowser."+type;\r
78 \r
79                 if (hash!=="") {\r
80                         var h = hash.replace("#","");\r
81                         var destination = h.split("-")[0];\r
82                         FileBrowser.id = h.split("-")[1];\r
83                         FileBrowser.event = FileBrowser.event + "." + destination;\r
84                         if (destination == "comment") {\r
85                                 // Get the comment textimput field\r
86                                 var commentElm = document.getElementById("comment-edit-text-" + FileBrowser.id);\r
87                         }\r
88                 };\r
89 \r
90                 console.log("FileBrowser:", nickname, type,FileBrowser.event, FileBrowser.id);\r
91 \r
92                 FileBrowser.postLoad();\r
93 \r
94                 $(".error a.close").on("click", function(e) {\r
95                         e.preventDefault();\r
96                         $(".error").addClass("hidden");\r
97                 });\r
98 \r
99                 // Click on album link\r
100                 $(".fbrowser").on("click", ".folders a, .path a", function(e) {\r
101                         e.preventDefault();\r
102                         var url = baseurl + "/fbrowser/" + FileBrowser.type + "/" + this.dataset.folder + "?mode=none";\r
103                         FileBrowser.folder = this.dataset.folder;\r
104 \r
105                         FileBrowser.loadContent(url);\r
106                 });\r
107 \r
108                 //Embed on click\r
109                 $(".fbrowser").on('click', ".photo-album-photo-link", function(e) {\r
110                         e.preventDefault();\r
111 \r
112                         var embed = "";\r
113                         if (FileBrowser.type == "image") {\r
114                                 embed = "[url=" + this.dataset.link + "][img]" + this.dataset.img + "[/img][/url]";\r
115                         }\r
116                         if (FileBrowser.type == "file") {\r
117                                 // attachment links are "baseurl/attach/id"; we need id\r
118                                 embed = "[attachment]" + this.dataset.link.split("/").pop() + "[/attachment]";\r
119                         }\r
120 \r
121                         // Delete prefilled Text of the comment input\r
122                         // Note: not the best solution but function commentOpenUI don't\r
123                         // work as expected (we need a way to wait until commentOpenUI would be finished).\r
124                         // As for now we insert pieces of this function here\r
125                         if ((commentElm !== null) && (typeof commentElm !== "undefined")) {\r
126                                 if (commentElm.value == "") {\r
127                                         $("#comment-edit-text-" + FileBrowser.id).addClass("comment-edit-text-full").removeClass("comment-edit-text-empty");\r
128                                         $("#comment-edit-submit-wrapper-" + FileBrowser.id).show();\r
129                                         $("#comment-edit-text-" + FileBrowser.id).attr('tabindex','9');\r
130                                         $("#comment-edit-submit-" + FileBrowser.id).attr('tabindex','10');\r
131                                 }\r
132 \r
133                         }\r
134 \r
135                         console.log(FileBrowser.event, this.dataset.filename, embed, FileBrowser.id);\r
136 \r
137                         parent.$("body").trigger(FileBrowser.event, [\r
138                                 this.dataset.filename,\r
139                                 embed,\r
140                                 FileBrowser.id,\r
141                                 this.dataset.img\r
142                         ]);\r
143 \r
144                         // Close model\r
145                         $('#modal').modal('hide');\r
146                         // Update autosize for this textarea\r
147                         autosize.update($(".text-autosize"));\r
148                 });\r
149 \r
150                 // EventListener for switching between image and file mode\r
151                 $(".fbrowser").on('click', ".fbswitcher .btn", function(e) {\r
152                         e.preventDefault();\r
153                         FileBrowser.type = this.getAttribute("data-mode");\r
154                         $(".fbrowser").removeClass().addClass("fbrowser " + FileBrowser.type);\r
155                         url = baseurl + "/fbrowser/" + FileBrowser.type + "?mode=none";\r
156 \r
157                         FileBrowser.loadContent(url);\r
158                 });\r
159         },\r
160 \r
161         // Initialize the AjaxUpload for the upload buttons\r
162         uploadButtons: function() {\r
163                 if ($("#upload-image").length) {\r
164                         // To get the albumname we need to convert it from hex\r
165                         var albumname = hex2bin(FileBrowser.folder);\r
166                         //AjaxUpload for images\r
167                         var image_uploader = new window.AjaxUpload(\r
168                                 'upload-image',\r
169                                 {       action: 'wall_upload/' + FileBrowser.nickname + '?response=json&album=' + albumname,\r
170                                         name: 'userfile',\r
171                                         responseType: 'json',\r
172                                         onSubmit: function(file, ext) {\r
173                                                 $(".fbrowser-content").hide();\r
174                                                 $(".fbrowser .profile-rotator-wrapper").show();\r
175                                                 $(".error").addClass('hidden');\r
176                                         },\r
177                                         onComplete: function(file,response) {\r
178                                                 if (response['error'] != undefined) {\r
179                                                         $(".error span").html(response['error']);\r
180                                                         $(".error").removeClass('hidden');\r
181                                                         $(".fbrowser .profile-rotator-wrapper").hide();\r
182                                                         return;\r
183                                                 }\r
184 \r
185 //                                              location = baseurl + "/fbrowser/image/?mode=none"+location['hash'];\r
186 //                                              location.reload(true);\r
187 \r
188                                                 var url = baseurl + "/fbrowser/" + FileBrowser.type + "/" + FileBrowser.folder + "?mode=none";\r
189                                                 // load new content to fbrowser window\r
190                                                 FileBrowser.loadContent(url);\r
191                                         }\r
192                                 }\r
193                         );\r
194                 }\r
195 \r
196                 if ($("#upload-file").length) {\r
197                         //AjaxUpload for files\r
198                         var file_uploader = new window.AjaxUpload(\r
199                                 'upload-file',\r
200                                 {       action: 'wall_attach/' + FileBrowser.nickname + '?response=json',\r
201                                         name: 'userfile',\r
202                                         onSubmit: function(file, ext) {\r
203                                                 $(".fbrowser-content").hide();\r
204                                                 $(".fbrowser .profile-rotator-wrapper").show();\r
205                                                 $(".error").addClass('hidden');\r
206                                         },\r
207                                         onComplete: function(file,response) {\r
208                                                 if (response['error']!= undefined) {\r
209                                                         $(".error span").html(response['error']);\r
210                                                         $(".error").removeClass('hidden');\r
211                                                         $('#profile-rotator').hide();\r
212                                                         return;\r
213                                                 }\r
214 \r
215 //                                              location = baseurl + "/fbrowser/file/?mode=none"+location['hash'];\r
216 //                                              location.reload(true);\r
217 \r
218                                                 var url = baseurl + "/fbrowser/" + FileBrowser.type + "?mode=none";\r
219                                                 // Load new content to fbrowser window\r
220                                                 FileBrowser.loadContent(url);\r
221                                         }\r
222                                 }\r
223                         );\r
224                 }\r
225         },\r
226 \r
227         // Stuff which should be executed if ne content was loaded\r
228         postLoad: function() {\r
229                 FileBrowser.initGallery();\r
230                 $(".fbrowser .fbswitcher .btn").removeClass("active");\r
231                 $(".fbrowser .fbswitcher [data-mode=" + FileBrowser.type + "]").addClass("active");\r
232                 // We need to add the AjaxUpload to the button\r
233                 FileBrowser.uploadButtons();\r
234                 \r
235         },\r
236 \r
237         // Load new content (e.g. change photo album)\r
238         loadContent: function(url) {\r
239                 $(".fbrowser-content").hide();\r
240                 $(".fbrowser .profile-rotator-wrapper").show();\r
241 \r
242                 // load new content to fbrowser window\r
243                 $(".fbrowser").load(url, function(responseText, textStatus) {\r
244                         $(".profile-rotator-wrapper").hide();\r
245                         if (textStatus === 'success') {\r
246                                 $(".fbrowser_content").show();\r
247                                 FileBrowser.postLoad();\r
248                         }\r
249                 });\r
250         },\r
251 \r
252         // Initialize justified Gallery\r
253         initGallery: function() {\r
254                 $(".fbrowser.image .fbrowser-content-container").justifiedGallery({\r
255                         'rowHeight': 80,\r
256                         'margins': 2,\r
257                         'border': 0\r
258                 });\r
259         }\r
260 };\r