]> git.mxchange.org Git - friendica.git/blob - view/theme/frio/templates/jot.tpl
fix editing in modal-jot
[friendica.git] / view / theme / frio / templates / jot.tpl
1 {{* The button to open the jot - in This theme we move the button with js to the second nav bar *}}
2 <a class="btn btn-sm btn-primary pull-right{{if !$always_open_compose}} modal-open{{/if}}" id="jotOpen" href="compose/{{$posttype}}{{if $content}}?body={{$content}}{{/if}}" aria-label="{{$new_post}}" title="{{$new_post}}"><i class="fa fa-pencil-square-o fa-2x"></i></a>
3
4 <div id="jot-content">
5         <div id="jot-sections">
6                 <div class="modal-header">
7                         <button type="button" class="close" data-dismiss="modal" aria-label="Close" style="float: right;">&times;</button>
8
9                         <a href="/compose" class="btn compose-link" title="{{$compose_link_title}}" aria-label="{{$compose_link_title}}">
10                                 <i class="fa fa-pencil-square-o" aria-hidden="true"></i>
11                         </a>
12
13                         {{* The Jot navigation menu for desktop user (text input, permissions, preview, filebrowser) *}}
14                         <ul class="nav nav-tabs hidden-xs jot-nav" role="tablist" data-tabs="tabs">
15                                 {{* Mark the first list entry as active because it is the first which is active after opening
16                                         the modal. Changing of the activity status is done by js in jot.tpl-header *}}
17                                 <li class="active" role="presentation">
18                                         <a href="#profile-jot-wrapper" class="jot-text-lnk jot-nav-lnk" id="jot-text-lnk" role="tab" aria-controls="profile-jot-wrapper">
19                                                 <i class="fa fa-file-text-o" aria-hidden="true"></i>
20                                                 {{$message}}
21                                         </a>
22                                 </li>
23                                 {{if $acl}}
24                                 <li role="presentation">
25                                         <a href="#profile-jot-acl-wrapper" class="jot-perms-lnk jot-nav-lnk" id="jot-perms-lnk" role="tab" aria-controls="profile-jot-acl-wrapper">
26                                                 <i class="fa fa-shield" aria-hidden="true"></i>
27                                                 {{$shortpermset}}
28                                         </a>
29                                 </li>
30                                 {{/if}}
31                                 {{if $preview}}
32                                 <li role="presentation">
33                                         <a href="#jot-preview-content" class="jot-preview-lnk jot-nav-lnk" id="jot-preview-lnk" role="tab" aria-controls="jot-preview-content">
34                                                 <i class="fa fa-eye" aria-hidden="true"></i>
35                                                 {{$preview}}
36                                         </a>
37                                 </li>
38                                 {{/if}}
39                                 <li role="presentation">
40                                         <a href="#jot-fbrowser-wrapper" class="jot-browser-lnk jot-nav-lnk" id="jot-browser-link" role="tab" aria-controls="jot-fbrowser-wrapper">
41                                                 <i class="fa fa-picture-o" aria-hidden="true"></i>
42                                                 {{$browser}}
43                                         </a>
44                                 </li>
45                         </ul>
46
47                         {{* The Jot navigation menu for small displays (text input, permissions, preview, filebrowser) *}}
48                         <div class="dropdown dropdown-head dropdown-mobile-jot jot-nav hidden-lg hidden-md hidden-sm" role="menubar" data-tabs="tabs" style="float: left;">
49                                 <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true">{{$message}}&nbsp;<span class="caret"></span></button>
50                                 <ul class="dropdown-menu nav nav-pills" aria-label="submenu">
51                                         {{* mark the first list entry as active because it is the first which is active after opening
52                                         the modal. Changing of the activity status is done by js in jot.tpl-header *}}
53                                         <li role="presentation" style="display: none;">
54                                                 <button class="jot-text-lnk btn-link jot-nav-lnk jot-nav-lnk-mobile" id="jot-text-lnk-mobile" aria-controls="profile-jot-wrapper" role="menuitem">{{$message}}</button>
55                                         </li>
56                                         {{if $acl}}
57                                         <li role="presentation">
58                                                 <button class="jot-perms-lnk btn-link jot-nav-lnk jot-nav-lnk-mobile" id="jot-perms-lnk-mobile" aria-controls="profile-jot-acl-wrapper" role="menuitem">{{$shortpermset}}</button>
59                                         </li>
60                                         {{/if}}
61                                         {{if $preview}}
62                                         <li role="presentation">
63                                                 <button class="jot-preview-lnk btn-link jot-nav-lnk jot-nav-lnk-mobile" id="jot-preview-lnk-mobile" aria-controls="jot-preview-content" role="menuitem">{{$preview}}</button>
64                                         </li>
65                                         {{/if}}
66                                         <li role="presentation">
67                                                 <button class="jot-browser-lnk-mobile btn-link jot-nav-lnk jot-nav-lnk-mobile" id="jot-browser-lnk-mobile" aria-controls="jot-fbrowser-wrapper" role="menuitem">{{$browser}}</button>
68                                         </li>
69                                 </ul>
70                         </div>
71                 </div>
72
73                 <div id="jot-modal-body" class="modal-body">
74                         <form id="profile-jot-form" action="{{$action}}" method="post">
75                                 <div id="profile-jot-wrapper" aria-labelledby="jot-text-lnk" role="tabpanel" aria-hidden="false">
76                                         <div>
77                                                 <!--<div id="profile-jot-desc" class="jothidden pull-right">&nbsp;</div>-->
78                                         </div>
79
80                                         <div id="profile-jot-banner-end"></div>
81
82                                         {{* The hidden input fields which submit important values with the post *}}
83                                         <input type="hidden" name="jot" value="{{$jot}}" />
84                                         <input type="hidden" name="wall" value="{{$wall}}" />
85                                         <input type="hidden" name="post_type" value="{{$posttype}}" />
86                                         <input type="hidden" name="profile_uid" value="{{$profile_uid}}" />
87                                         <input type="hidden" name="return" value="{{$return_path}}" />
88                                         <input type="hidden" name="location" id="jot-location" value="{{$defloc}}" />
89                                         <input type="hidden" name="coord" id="jot-coord" value="" />
90                                         <input type="hidden" name="post_id" value="{{$post_id}}" />
91                                         <input type="hidden" name="preview" id="jot-preview" value="0" />
92                                         <input type="hidden" name="post_id_random" value="{{$rand_num}}" />
93                                         {{if $notes_cid}}
94                                         <input type="hidden" name="contact_allow[]" value="<{{$notes_cid}}>" />
95                                         {{/if}}
96                                         <div id="jot-title-wrap"><input name="title" id="jot-title" class="jothidden jotforms form-control" type="text" placeholder="{{$placeholdertitle}}" title="{{$placeholdertitle}}" value="{{$title}}" style="display:block;" dir="auto" /></div>
97                                         {{if $placeholdercategory}}
98                                         <div id="jot-category-wrap"><input name="category" id="jot-category" class="jothidden jotforms form-control" type="text" placeholder="{{$placeholdercategory}}" title="{{$placeholdercategory}}" value="{{$category}}" dir="auto" /></div>
99                                         {{/if}}
100
101                                         {{* The jot text field in which the post text is inserted *}}
102                                         <!--div id="dropzone-jot" class="dropzone"-->
103                                                 <div id="jot-text-wrap" class="dropzone">
104                                                         <textarea rows="2" cols="64" class="profile-jot-text form-control text-autosize" id="profile-jot-text" name="body" placeholder="{{$share}}" onFocus="jotTextOpenUI(this);" onBlur="jotTextCloseUI(this);" style="min-width:100%; max-width:100%;" dir="auto">{{if $content}}{{$content nofilter}}{{/if}}</textarea>
105                                                 </div>
106                                         <!--/div-->
107
108                                         <ul id="profile-jot-submit-wrapper" class="jothidden nav nav-pills">
109                                                 <li role="presentation"><button type="button" class="hidden-xs btn-link icon underline" style="cursor: pointer;" aria-label="{{$eduline}}" title="{{$eduline}}" onclick="insertFormattingToPost('u');"><i class="fa fa-underline"></i></button></li>
110                                                 <li role="presentation"><button type="button" class="hidden-xs btn-link icon italic" style="cursor: pointer;" aria-label="{{$editalic}}" title="{{$editalic}}" onclick="insertFormattingToPost('i');"><i class="fa fa-italic"></i></button></li>
111                                                 <li role="presentation"><button type="button" class="hidden-xs btn-link icon bold" style="cursor: pointer;" aria-label="{{$edbold}}" title="{{$edbold}}" onclick="insertFormattingToPost('b');"><i class="fa fa-bold"></i></button></li>
112                                                 <li role="presentation"><button type="button" class="hidden-xs btn-link icon quote" style="cursor: pointer;" aria-label="{{$edquote}}" title="{{$edquote}}" onclick="insertFormattingToPost('quote');"><i class="fa fa-quote-left"></i></button></li>
113                                                 <li role="presentation"><button type="button" class="btn-link icon" style="cursor: pointer;" aria-label="{{$edurl}}" title="{{$edurl}}" onclick="insertFormattingToPost('url');"><i class="fa fa-link"></i></button></li>
114                                                 <li role="presentation"><button type="button" class="btn-link" id="profile-attach"  ondragenter="return linkDropper(event);" ondragover="return linkDropper(event);" ondrop="linkDrop(event);" onclick="jotGetLink();" title="{{$edattach}}"><i class="fa fa-paperclip"></i></button></li>
115                                                 <li role="presentation"><button type="button" class="btn-link" id="profile-location" onclick="jotGetLocation();" title="{{$setloc}}"><i class="fa fa-map-marker" aria-hidden="true"></i></button></li>
116                                                 <!-- TODO: waiting for a better placement
117                                                 <li><button type="button" class="btn-link" id="profile-nolocation" onclick="jotClearLocation();" title="{{$noloc}}">{{$shortnoloc}}</button></li>
118                                                 -->
119
120                                                 <li role="presentation" class="pull-right">
121                                                         <button class="btn btn-primary" type="submit" id="profile-jot-submit" name="submit" data-loading-text="{{$loading}}">
122                                                                 <i class="fa fa-paper-plane fa-fw" aria-hidden="true"></i> {{$share}}
123                                                         </button>
124                                                 </li>
125                                                 <li id="character-counter" class="grey jothidden text-info pull-right"></li>
126                                                 <li role="presentation" id="profile-rotator-wrapper" class="pull-right" style="display: {{$visitor}};">
127                                                         <img role="presentation" id="profile-rotator" src="images/rotator.gif" alt="{{$wait}}" title="{{$wait}}" style="display: none;" />
128                                                 </li>
129                                                 <li role="presentation" id="profile-jot-plugin-wrapper">
130                                                         {{$jotplugins nofilter}}
131                                                 </li>
132                                         </ul>
133
134                                 </div>
135
136                                 <div id="profile-jot-acl-wrapper" class="minimize" aria-labelledby="jot-perms-lnk" role="tabpanel" aria-hidden="true">
137                                         {{$acl nofilter}}
138                                         {{if $scheduled_at}}{{$scheduled_at nofilter}}{{/if}}
139                                         {{if $created_at}}{{$created_at nofilter}}{{/if}}
140                                 </div>
141
142                                 <div id="jot-preview-content" class="minimize" aria-labelledby="jot-preview-lnk" role="tabpanel" aria-hidden="true"></div>
143
144                                 <div id="jot-preview-share" class="minimize" aria-labelledby="jot-preview-lnk" role="tabpanel" aria-hidden="true">
145                                         <ul id="profile-jot-preview-submit-wrapper" class="jothidden nav nav-pills">
146                                                 <li role="presentation" class="pull-right">
147                                                         <button class="btn btn-primary" type="submit" id="profile-jot-preview-submit" name="submit" data-loading-text="{{$loading}}">
148                                                                 <i class="fa fa-paper-plane fa-fw" aria-hidden="true"></i> {{$share}}
149                                                         </button>
150                                                 </li>
151                                         </ul>
152                                 </div>
153
154                                 <div id="jot-fbrowser-wrapper" class="minimize" aria-labelledby="jot-browser-link" role="tabpanel" aria-hidden="true"></div>
155
156                         </form>
157                         <div id="dz-preview-jot" class="dropzone-preview"></div>
158
159                         {{if $content}}<script type="text/javascript">initEditor();</script>{{/if}}
160                 </div>
161         </div>
162 </div>
163
164
165 {{* The jot modal - We use a own modal for the jot and not the standard modal
166 from the page template. This is because the special structure of the jot
167 (e.g.jot navigation tabs in the modal titel area).
168 Then in the frio theme the jot will loaded regulary and is hidden by default.)
169 The js function jotShow() loads the jot into the modal. With this structure we
170 can load different content into the jot modal (e.g. the item edit jot)
171 *}}
172 <div id="jot-modal" class="modal fade" role="dialog">
173         <div class="modal-dialog">
174                 <div id="jot-modal-content" class="modal-content"></div>
175         </div>
176 </div>
177
178 <script type="text/javascript">
179         $('iframe').load(function() {
180                 this.style.height = this.contentWindow.document.body.offsetHeight + 'px';
181         });
182 </script>
183
184 <script>
185         // getMByte() is from view/theme/frio/js/dropzone-frio.js
186         // to workaround dysfunctional php Strings:getBytesFromShorthand
187         Dropzone.autoDiscover = false;
188         var dropzoneJot = new Dropzone( '#jot-text-wrap', {
189                 paramName: "userfile", // The name that will be used to transfer the file
190                 maxFilesize: getMBytes('{{$max_imagesize}}'), // MB
191                 url: "/media/photo/upload?response=url&album=",
192                 accept: function(file, done) {
193                         done();
194                 },
195                 init: function() {
196                         this.on("success", function(file, serverResponse) {
197                                 var target = $('#profile-jot-text')
198                                 var resp = $(serverResponse).find('div#content').text()
199                                 if (target.setRangeText) {
200                                         //if setRangeText function is supported by current browser
201                                         target.setRangeText(" " + $.trim(resp) + " ")
202                                 } else {
203                                         target.focus()
204                                         document.execCommand('insertText', false /*no UI*/, " " + $.trim(resp) + " ");
205                                 }
206                         });
207                         this.on("complete", function(file) {
208                                 // Remove just uploaded file from dropzone, makes interface more clear.
209                                 // Image can be seen in posting-preview
210                                 // We need preview to get optical feedback about upload-progress.
211                                 // you see success, when the bb-code link for image is inserted
212                                 setTimeout(function(){
213                                         dropzoneJot.removeFile(file);
214                                 },5000);
215                         });
216                 },
217         });
218
219         // Enables Copy&Paste for this dropzone
220         $('#jot-text-wrap').on('paste', function(event){
221                 const items = (event.clipboardData || event.originalEvent.clipboardData).items;
222                 items.forEach((item) => {
223                         if (item.kind === 'file') {
224                                 // adds the file to your dropzone instance
225                                 dropzoneJot.addFile(item.getAsFile())
226                         }
227                 })
228         })
229 </script>