view/theme/frio/templates/jot.tpl

   1
   2 {{* The button to open the jot - in This theme we move the button with js to the second nav bar *}}
   3 <button class="btn btn-sm btn-main pull-right" id="jotOpen" onclick="jotShow(); return false;"><i class="fa fa-pencil-square-o fa-2x"></i></button>
   4
   5
   6 <div id="jot-content">
   7         <div id="jot-sections">
   8                 <div class="modal-header">
   9                         {{* Note: We need 2 modal close buttons here to bypass a bug in bootstrap.
  10                         The second is for mobile view. The first one doesnt work with dropdowns. To get a working close button
  11                         in with dropdows the close button needs to be inserted after the dropdown. *}}
  12                         <button type="button" class="close hidden-xs" data-dismiss="modal" style="float: right;">&times;</button>
  13
  14                         {{* The Jot navigation menu (text input, permissions, preview, filebrowser) *}}
  15                         <ul class="nav nav-tabs hidden-xs jot-nav" role="menubar" data-tabs="tabs">
  16                                 {{* Mark the first list entry as active because it is the first which is active after opening
  17                                         the modal. Changing of the activity status is done by js in jot.tpl-header *}}
  18                                 <li class="active" role="menuitem"><a id="jot-text-lnk" class="jot-text-lnk" onclick="jotActive(); return false;">{{$message}}</a></li>
  19                                 {{if $acl}}<li role="menuitem"><a id="jot-perms-lnk" class="jot-perms-lnk" onclick="aclActive();return false;">{{$shortpermset}}</a></li>{{/if}}
  20                                 {{if $preview}}<li role="menuitem"><a id="jot-preview-lnk" class="jot-preview-lnk" onclick="previewActive();return false;">{{$preview}}</a></li>{{/if}}
  21                                 <li role="menuitem"><a id="jot-browser-link" onclick="fbrowserActive(); return false;">{{$browser}}</a></li>
  22                         </ul>
  23
  24                         <div class="dropdown dropdown-head dropdown-mobile-jot jot-nav hidden-lg hidden-md hidden-sm" role="menubar" data-tabs="tabs" style="float: left;">
  25                                 <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">{{$message}}&nbsp;<span class="caret"></span></button>
  26                                 <ul class="dropdown-menu nav nav-pills">
  27                                         {{* mark the first list entry as active because it is the first which is active after opening
  28                                         the modal. Changing of the activity status is done by js in jot.tpl-header *}}
  29                                         <li role="menuitem" style="display: none;"><a id="jot-text-lnk-mobile" class="jot-text-lnk" onclick="jotActive(); return false;">{{$message}}</a></li>
  30                                         {{if $acl}}<li role="menuitem"><a id="jot-perms-lnk-mobile" class="jot-perms-lnk" onclick="aclActive();return false;">{{$shortpermset}}</a></li>{{/if}}
  31                                         {{if $preview}}<li role="menuitem"><a id="jot-preview-lnk-mobile" class="jot-preview-lnk" onclick="previewActive();return false;">{{$preview}}</a></li>{{/if}}
  32                                 </ul>
  33                         </div>
  34                         <button type="button" class="close hidden-lg hidden-md hidden-sm" data-dismiss="modal" style="float: right;">&times;</button>
  35                 </div>
  36
  37                 <div id="jot-modal-body" class="modal-body">
  38                         <form id="profile-jot-form" action="{{$action}}" method="post">
  39                                 <div id="profile-jot-wrapper">
  40                                         <div>
  41                                                 <!--<div id="profile-jot-desc" class="jothidden pull-right">&nbsp;</div>-->
  42                                         </div>
  43
  44                                         <div id="profile-jot-banner-end"></div>
  45
  46                                         {{* The hidden input fields which submit important values with the post *}}
  47                                         <input type="hidden" name="type" value="{{$ptyp}}" />
  48                                         <input type="hidden" name="profile_uid" value="{{$profile_uid}}" />
  49                                         <input type="hidden" name="return" value="{{$return_path}}" />
  50                                         <input type="hidden" name="location" id="jot-location" value="{{$defloc}}" />
  51                                         <input type="hidden" name="coord" id="jot-coord" value="" />
  52                                         <input type="hidden" name="post_id" value="{{$post_id}}" />
  53                                         <input type="hidden" name="preview" id="jot-preview" value="0" />
  54                                         <input type="hidden" name="post_id_random" value="{{$rand_num}}" />
  55                                         {{if $notes_cid}}
  56                                         <input type="hidden" name="contact_allow[]" value="<{{$notes_cid}}>" />
  57                                         {{/if}}
  58                                         <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>
  59                                         {{if $placeholdercategory}}
  60                                         <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>
  61                                         {{/if}}
  62
  63                                         {{* The jot text field in which the post text is inserted *}}
  64                                         <div id="jot-text-wrap">
  65                                         <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}}{{/if}}</textarea>
  66                                         </div>
  67
  68                                         <ul id="profile-jot-submit-wrapper" class="jothidden nav nav-pills">
  69                                                 <li><a id="profile-link"  ondragenter="return linkdropper(event);" ondragover="return linkdropper(event);" ondrop="linkdrop(event);" onclick="jotGetLink(); return false;" title="{{$weblink}}"><i class="fa fa-link"></i></a></li>
  70                                                 <li><a id="profile-video" onclick="jotVideoURL();return false;" title="{{$video}}"><i class="fa fa-film"></i></a></li>
  71                                                 <li><a id="profile-audio" onclick="jotAudioURL();return false;" title="{{$audio}}"><i class="fa fa-music"></i></a></li>
  72                                                 <li><a id="profile-location" onclick="jotGetLocation();return false;" title="{{$setloc}}"><i class="fa fa-map-marker"></i></a></li>
  73                                                 <!-- TODO: waiting for a better placement
  74                                                 <li><a id="profile-nolocation" onclick="jotClearLocation();return false;" title="{{$noloc}}">{{$shortnoloc}}</a></li>
  75                                                 -->
  76
  77                                                 <li class="pull-right"><button class="btn btn-primary" id="jot-submit" type="submit" id="profile-jot-submit" name="submit" ><i class="fa fa-slideshare fa-fw"></i> {{$share}}</button></li>
  78                                                 <li id="character-counter" class="grey jothidden text-info pull-right"></li>
  79                                                 <div id="profile-rotator-wrapper" style="display: {{$visitor}};" >
  80                                                         <img id="profile-rotator" src="images/rotator.gif" alt="{{$wait}}" title="{{$wait}}" style="display: none;" />
  81                                                 </div>
  82                                                 <div id="profile-jot-plugin-wrapper">
  83                                                         {{$jotplugins}}
  84                                                 </div>
  85                                         </ul>
  86
  87                                 </div>
  88
  89                                 <div id="profile-jot-acl-wrapper" style="display: none;">
  90                                         {{$acl}}
  91                                 </div>
  92
  93                                 <div id="jot-preview-content" style="display:none;"></div>
  94                         </form>
  95
  96                         <div id="jot-fbrowser-wrapper" style="display: none"></div>
  97
  98                         {{if $content}}<script>initEditor();</script>{{/if}}
  99                 </div>
 100         </div>
 101 </div>
 102
 103
 104 {{* The jot modal - We use a own modal for the jot and not the standard modal
 105 from the page template. This is because the special structure of the jot
 106 (e.g.jot navigation tabs in the modal titel area).
 107 The in the frio theme the jot will loaded regulary and is hidden by default.)
 108 The js function jotShow() loads the jot into the modal. With this structure we
 109 can load different content into the jot moadl (e.g. the item edit jot)
 110 *}}
 111 <div id="jot-modal" class="modal fade" role="dialog">
 112         <div class="modal-dialog">
 113                 <div id="jot-modal-content" class="modal-content"></div>
 114         </div>
 115 </div>
 116
 117
 118 <script language="javascript" type="text/javascript">
 119         $('iframe').load(function() {
 120                 this.style.height = this.contentWindow.document.body.offsetHeight + 'px';
 121         });
 122 </script>
 123