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-main pull-right" 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                         {{* Note: We need 2 modal close buttons here to bypass a bug in bootstrap.
   8                         The second is for mobile view. The first one doesnt work with dropdowns. To get a working close button
   9                         in with dropdows the close button needs to be inserted after the dropdown. *}}
  10                         <button type="button" class="close hidden-xs" data-dismiss="modal" aria-label="Close" style="float: right;">&times;</button>
  11
  12                         <a href="/compose" class="btn compose-link" title="{{$compose_link_title}}" aria-label="{{$compose_link_title}}">
  13                                 <i class="fa fa-pencil-square-o" aria-hidden="true"></i>
  14                         </a>
  15
  16                         {{* The Jot navigation menu for desktop user (text input, permissions, preview, filebrowser) *}}
  17                         <ul class="nav nav-tabs hidden-xs jot-nav" role="tablist" data-tabs="tabs">
  18                                 {{* Mark the first list entry as active because it is the first which is active after opening
  19                                         the modal. Changing of the activity status is done by js in jot.tpl-header *}}
  20                                 <li class="active" role="presentation">
  21                                         <a href="#profile-jot-wrapper" class="jot-text-lnk jot-nav-lnk" id="jot-text-lnk" role="tab" aria-controls="profile-jot-wrapper">
  22                                                 <i class="fa fa-file-text-o" aria-hidden="true"></i>
  23                                                 {{$message}}
  24                                         </a>
  25                                 </li>
  26                                 {{if $acl}}
  27                                 <li role="presentation">
  28                                         <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">
  29                                                 <i class="fa fa-shield" aria-hidden="true"></i>
  30                                                 {{$shortpermset}}
  31                                         </a>
  32                                 </li>
  33                                 {{/if}}
  34                                 {{if $preview}}
  35                                 <li role="presentation">
  36                                         <a href="#jot-preview-content" class="jot-preview-lnk jot-nav-lnk" id="jot-preview-lnk" role="tab" aria-controls="jot-preview-content">
  37                                                 <i class="fa fa-eye" aria-hidden="true"></i>
  38                                                 {{$preview}}
  39                                         </a>
  40                                 </li>
  41                                 {{/if}}
  42                                 <li role="presentation">
  43                                         <a href="#jot-fbrowser-wrapper" class="jot-browser-lnk jot-nav-lnk" id="jot-browser-link" role="tab" aria-controls="jot-fbrowser-wrapper">
  44                                                 <i class="fa fa-picture-o" aria-hidden="true"></i>
  45                                                 {{$browser}}
  46                                         </a>
  47                                 </li>
  48                         </ul>
  49
  50                         {{* The Jot navigation menu for small displays (text input, permissions, preview, filebrowser) *}}
  51                         <div class="dropdown dropdown-head dropdown-mobile-jot jot-nav hidden-lg hidden-md hidden-sm" role="menubar" data-tabs="tabs" style="float: left;">
  52                                 <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true">{{$message}}&nbsp;<span class="caret"></span></button>
  53                                 <ul class="dropdown-menu nav nav-pills" aria-label="submenu">
  54                                         {{* mark the first list entry as active because it is the first which is active after opening
  55                                         the modal. Changing of the activity status is done by js in jot.tpl-header *}}
  56                                         <li role="presentation" style="display: none;">
  57                                                 <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>
  58                                         </li>
  59                                         {{if $acl}}
  60                                         <li role="presentation">
  61                                                 <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>
  62                                         </li>
  63                                         {{/if}}
  64                                         {{if $preview}}
  65                                         <li role="presentation">
  66                                                 <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>
  67                                         </li>
  68                                         {{/if}}
  69                                         <li role="presentation">
  70                                                 <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>
  71                                         </li>
  72                                 </ul>
  73                         </div>
  74                         <button type="button" class="close hidden-lg hidden-md hidden-sm" data-dismiss="modal" style="float: right;">&times;</button>
  75                 </div>
  76
  77                 <div id="jot-modal-body" class="modal-body">
  78                         <form id="profile-jot-form" action="{{$action}}" method="post">
  79                                 <div id="profile-jot-wrapper" aria-labelledby="jot-text-lnk" role="tabpanel" aria-hidden="false">
  80                                         <div>
  81                                                 <!--<div id="profile-jot-desc" class="jothidden pull-right">&nbsp;</div>-->
  82                                         </div>
  83
  84                                         <div id="profile-jot-banner-end"></div>
  85
  86                                         {{* The hidden input fields which submit important values with the post *}}
  87                                         <input type="hidden" name="jot" value="{{$jot}}" />
  88                                         <input type="hidden" name="wall" value="{{$wall}}" />
  89                                         <input type="hidden" name="post_type" value="{{$posttype}}" />
  90                                         <input type="hidden" name="profile_uid" value="{{$profile_uid}}" />
  91                                         <input type="hidden" name="return" value="{{$return_path}}" />
  92                                         <input type="hidden" name="location" id="jot-location" value="{{$defloc}}" />
  93                                         <input type="hidden" name="coord" id="jot-coord" value="" />
  94                                         <input type="hidden" name="post_id" value="{{$post_id}}" />
  95                                         <input type="hidden" name="preview" id="jot-preview" value="0" />
  96                                         <input type="hidden" name="post_id_random" value="{{$rand_num}}" />
  97                                         {{if $notes_cid}}
  98                                         <input type="hidden" name="contact_allow[]" value="<{{$notes_cid}}>" />
  99                                         {{/if}}
 100                                         <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;" /></div>
 101                                         {{if $placeholdercategory}}
 102                                         <div id="jot-category-wrap"><input name="category" id="jot-category" class="jothidden jotforms form-control" type="text" placeholder="{{$placeholdercategory}}" title="{{$placeholdercategory}}" value="{{$category}}" /></div>
 103                                         {{/if}}
 104
 105                                         {{* The jot text field in which the post text is inserted *}}
 106                                         <div id="jot-text-wrap">
 107                                                 <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%;">{{if $content}}{{$content nofilter}}{{/if}}</textarea>
 108                                         </div>
 109
 110                                         <ul id="profile-jot-submit-wrapper" class="jothidden nav nav-pills">
 111                                                 <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>
 112                                                 <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>
 113                                                 <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>
 114                                                 <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>
 115                                                 <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>
 116                                                 <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>
 117                                                 <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>
 118                                                 <!-- TODO: waiting for a better placement
 119                                                 <li><button type="button" class="btn-link" id="profile-nolocation" onclick="jotClearLocation();" title="{{$noloc}}">{{$shortnoloc}}</button></li>
 120                                                 -->
 121
 122                                                 <li role="presentation" class="pull-right">
 123                                                         <button class="btn btn-primary" type="submit" id="profile-jot-submit" name="submit" data-loading-text="{{$loading}}">
 124                                                                 <i class="fa fa-paper-plane fa-fw" aria-hidden="true"></i> {{$share}}
 125                                                         </button>
 126                                                 </li>
 127                                                 <li role="presentation" id="character-counter" class="grey jothidden text-info pull-right"></li>
 128                                                 <li role="presentation" id="profile-rotator-wrapper" class="pull-right" style="display: {{$visitor}};" >
 129                                                         <img role="presentation" id="profile-rotator" src="images/rotator.gif" alt="{{$wait}}" title="{{$wait}}" style="display: none;" />
 130                                                 </li>
 131                                                 <li role="presentation" id="profile-jot-plugin-wrapper">
 132                                                         {{$jotplugins nofilter}}
 133                                                 </li>
 134                                         </ul>
 135
 136                                 </div>
 137
 138                                 <div id="profile-jot-acl-wrapper" class="minimize" aria-labelledby="jot-perms-lnk" role="tabpanel" aria-hidden="true">
 139                                         {{$acl nofilter}}
 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
 158                         {{if $content}}<script type="text/javascript">initEditor();</script>{{/if}}
 159                 </div>
 160         </div>
 161 </div>
 162
 163
 164 {{* The jot modal - We use a own modal for the jot and not the standard modal
 165 from the page template. This is because the special structure of the jot
 166 (e.g.jot navigation tabs in the modal titel area).
 167 The in the frio theme the jot will loaded regulary and is hidden by default.)
 168 The js function jotShow() loads the jot into the modal. With this structure we
 169 can load different content into the jot moadl (e.g. the item edit jot)
 170 *}}
 171 <div id="jot-modal" class="modal fade" role="dialog">
 172         <div class="modal-dialog">
 173                 <div id="jot-modal-content" class="modal-content"></div>
 174         </div>
 175 </div>
 176
 177
 178 <script type="text/javascript">
 179         $('iframe').load(function() {
 180                 this.style.height = this.contentWindow.document.body.offsetHeight + 'px';
 181         });
 182 </script>