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 dropzone">
  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="jot-text-wrap">
 103                                                 <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>
 104                                         </div>
 105
 106                                         <ul id="profile-jot-submit-wrapper" class="jothidden nav nav-pills">
 107                                                 <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>
 108                                                 <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>
 109                                                 <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>
 110                                                 <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>
 111                                                 <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>
 112                                                 <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>
 113                                                 <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>
 114                                                 <!-- TODO: waiting for a better placement
 115                                                 <li><button type="button" class="btn-link" id="profile-nolocation" onclick="jotClearLocation();" title="{{$noloc}}">{{$shortnoloc}}</button></li>
 116                                                 -->
 117
 118                                                 <li role="presentation" class="pull-right">
 119                                                         <button class="btn btn-primary" type="submit" id="profile-jot-submit" name="submit" data-loading-text="{{$loading}}">
 120                                                                 <i class="fa fa-paper-plane fa-fw" aria-hidden="true"></i> {{$share}}
 121                                                         </button>
 122                                                 </li>
 123                                                 <li id="character-counter" class="grey jothidden text-info pull-right"></li>
 124                                                 <li role="presentation" id="profile-rotator-wrapper" class="pull-right" style="display: {{$visitor}};">
 125                                                         <img role="presentation" id="profile-rotator" src="images/rotator.gif" alt="{{$wait}}" title="{{$wait}}" style="display: none;" />
 126                                                 </li>
 127                                                 <li role="presentation" id="profile-jot-plugin-wrapper">
 128                                                         {{$jotplugins nofilter}}
 129                                                 </li>
 130                                         </ul>
 131
 132                                 </div>
 133
 134                                 <div id="profile-jot-acl-wrapper" class="minimize" aria-labelledby="jot-perms-lnk" role="tabpanel" aria-hidden="true">
 135                                         {{$acl nofilter}}
 136                                         {{if $scheduled_at}}{{$scheduled_at nofilter}}{{/if}}
 137                                         {{if $created_at}}{{$created_at nofilter}}{{/if}}
 138                                 </div>
 139
 140                                 <div id="jot-preview-content" class="minimize" aria-labelledby="jot-preview-lnk" role="tabpanel" aria-hidden="true"></div>
 141
 142                                 <div id="jot-preview-share" class="minimize" aria-labelledby="jot-preview-lnk" role="tabpanel" aria-hidden="true">
 143                                         <ul id="profile-jot-preview-submit-wrapper" class="jothidden nav nav-pills">
 144                                                 <li role="presentation" class="pull-right">
 145                                                         <button class="btn btn-primary" type="submit" id="profile-jot-preview-submit" name="submit" data-loading-text="{{$loading}}">
 146                                                                 <i class="fa fa-paper-plane fa-fw" aria-hidden="true"></i> {{$share}}
 147                                                         </button>
 148                                                 </li>
 149                                         </ul>
 150                                 </div>
 151
 152                                 <div id="jot-fbrowser-wrapper" class="minimize" aria-labelledby="jot-browser-link" role="tabpanel" aria-hidden="true"></div>
 153
 154                         </form>
 155                         <div id="dz-preview-jot" class="dropzone-preview"></div>
 156
 157                         {{if $content}}<script type="text/javascript">initEditor();</script>{{/if}}
 158                 </div>
 159         </div>
 160 </div>
 161
 162
 163 {{* The jot modal - We use a own modal for the jot and not the standard modal
 164 from the page template. This is because the special structure of the jot
 165 (e.g.jot navigation tabs in the modal titel area).
 166 The in the frio theme the jot will loaded regulary and is hidden by default.)
 167 The js function jotShow() loads the jot into the modal. With this structure we
 168 can load different content into the jot moadl (e.g. the item edit jot)
 169 *}}
 170 <div id="jot-modal" class="modal fade" role="dialog">
 171         <div class="modal-dialog">
 172                 <div id="jot-modal-content" class="modal-content"></div>
 173         </div>
 174 </div>
 175
 176
 177 <script type="text/javascript">
 178         $('iframe').load(function() {
 179                 this.style.height = this.contentWindow.document.body.offsetHeight + 'px';
 180         });
 181 </script>
 182 <script>
 183         Dropzone.autoDiscover = false;
 184         var dropzoneJot = new Dropzone( '#jot-modal-body', {
 185                 paramName: "userfile", // The name that will be used to transfer the file
 186                 maxFilesize: 6, // MB - change this to use systemsettings
 187                 previewsContainer: '#dz-preview-jot',
 188                 url: "/media/photo/upload?response=url&album=",
 189                 accept: function(file, done) {
 190                         if (file.name == "justinbieber.jpg") {
 191                                 done("Naha, you don't.");
 192                         } else {
 193                                 done();
 194                         }
 195                 },
 196                 init: function() {
 197                         this.on("success", function(file, serverResponse) {
 198                                 var target = $('#profile-jot-text')
 199                                 var resp = $(serverResponse).find('div#content').text()
 200                                 if (target.setRangeText) {
 201                                         //if setRangeText function is supported by current browser
 202                                         target.setRangeText(" " + $.trim(resp) + " ")
 203                                 } else {
 204                                         target.focus()
 205                                         document.execCommand('insertText', false /*no UI*/, " " + $.trim(resp) + " ");
 206                                 }
 207                         });
 208                 },
 209         });
 210
 211         //  document.onpaste = function(event){
 212         $('#jot-modal-body').on('paste', function(event){
 213                 const items = (event.clipboardData || event.originalEvent.clipboardData).items;
 214                 items.forEach((item) => {
 215                         if (item.kind === 'file') {
 216                                 // adds the file to your dropzone instance
 217                                 dropzoneJot.addFile(item.getAsFile())
 218                         }
 219                 })
 220         })
 221 </script>