]> git.mxchange.org Git - friendica.git/blob - view/templates/acl_selector.tpl
Use visibility tags input for the default ACL selector
[friendica.git] / view / templates / acl_selector.tpl
1 <div id="acl-wrapper">
2         <div class="panel-group" id="visibility-accordion" role="tablist" aria-multiselectable="true">
3                 <div class="panel panel-success">
4                         <div class="panel-heading{{if $visibility != 'public'}} collapsed{{/if}}" id="visibility-public-heading" aria-expanded="{{if $visibility == 'public'}}true{{else}}false{{/if}}">
5                                 <label>
6                                         <input type="radio" name="visibility" id="visibility-public" value="public" tabindex="14" {{if $visibility == 'public'}}checked{{/if}}>
7                                         <i class="fa fa-globe"></i> {{$public_title}}
8                                 </label>
9                         </div>
10                         <fieldset id="visibility-public-panel" class="panel-collapse collapse{{if $visibility == 'public'}} in{{/if}}" role="tabpanel" aria-labelledby="visibility-public-heading" {{if $visibility != 'public'}}disabled{{/if}}>
11                                 <div class="panel-body">
12                                         <p>{{$public_desc}}</p>
13                         {{if $for_federation}}
14                                 {{if $user_hidewall}}
15                                         <h4>{{$jotnets_summary}}</h4>
16                                 {{$jotnets_disabled_label}}
17                                 {{elseif $jotnets_fields}}
18                                     {{if $jotnets_fields|count < 3}}
19                                                                 <div class="profile-jot-net">
20                                     {{else}}
21                                                                 <details class="profile-jot-net">
22                                                                 <summary>{{$jotnets_summary}}</summary>
23                                     {{/if}}
24
25                                     {{foreach $jotnets_fields as $jotnets_field}}
26                                         {{if $jotnets_field.type == 'checkbox'}}
27                                             {{include file="field_checkbox.tpl" field=$jotnets_field.field}}
28                                         {{elseif $jotnets_field.type == 'select'}}
29                                             {{include file="field_select.tpl" field=$jotnets_field.field}}
30                                         {{/if}}
31                                     {{/foreach}}
32
33                                     {{if $jotnets_fields|count >= 3}}
34                                                                 </details>
35                                     {{else}}
36                                                                 </div>
37                                     {{/if}}
38                                     {{/if}}
39                         {{/if}}
40                                 </div>
41                         </fieldset>
42                 </div>
43                 <div class="panel panel-info">
44                         <div class="panel-heading{{if $visibility != 'custom'}} collapsed{{/if}}" id="visibility-custom-heading" aria-expanded="{{if $visibility == 'custom'}}true{{else}}false{{/if}}">
45                                 <label>
46                                         <input type="radio" name="visibility" id="visibility-custom" value="custom" tabindex="15" {{if $visibility == 'custom'}}checked{{/if}}>
47                                         <i class="fa fa-lock"></i> {{$custom_title}}
48                                 </label>
49                         </div>
50                         <fieldset id="visibility-custom-panel" class="panel-collapse collapse{{if $visibility == 'custom'}} in{{/if}}" role="tabpanel" aria-labelledby="visibility-custom-heading" {{if $visibility != 'custom'}}disabled{{/if}}>
51                                 <input type="hidden" name="group_allow" value="{{$group_allow}}"/>
52                                 <input type="hidden" name="contact_allow" value="{{$contact_allow}}"/>
53                                 <input type="hidden" name="group_deny" value="{{$group_deny}}"/>
54                                 <input type="hidden" name="contact_deny" value="{{$contact_deny}}"/>
55                                 <div class="panel-body">
56                                         <p>{{$custom_desc}}</p>
57
58                                         <div class="form-group">
59                                                 <label for="acl_allow">{{$allow_label}}</label>
60                                                 <input type="text" class="form-control input-lg" id="acl_allow">
61                                         </div>
62
63                                         <div class="form-group">
64                                                 <label for="acl_deny">{{$deny_label}}</label>
65                                                 <input type="text" class="form-control input-lg" id="acl_deny">
66                                         </div>
67                                 </div>
68                         </fieldset>
69                 </div>
70         </div>
71
72
73 {{if $for_federation}}
74         <div class="form-group">
75                 <label for="profile-jot-email" id="profile-jot-email-label">{{$emailcc}}</label>
76                 <input type="text" name="emailcc" id="profile-jot-email" class="form-control" title="{{$emtitle}}" />
77         </div>
78         <div id="profile-jot-email-end"></div>
79 {{/if}}
80 </div>
81 <script type="text/javascript">
82         $(function() {
83                 let $acl_allow_input = $('#acl_allow');
84                 let $contact_allow_input = $('[name=contact_allow]');
85                 let $group_allow_input = $('[name=group_allow]');
86                 let $acl_deny_input = $('#acl_deny');
87                 let $contact_deny_input = $('[name=contact_deny]');
88                 let $group_deny_input = $('[name=group_deny]');
89                 let $visibility_public_panel = $('#visibility-public-panel');
90                 let $visibility_custom_panel = $('#visibility-custom-panel');
91                 let $visibility_public_radio = $('#visibility-public');
92                 let $visibility_custom_radio = $('#visibility-custom');
93
94                 // Frio specific
95                 if ($.fn.collapse) {
96                         $visibility_public_panel.collapse({parent: '#visibility-accordion', toggle: false});
97                         $visibility_custom_panel.collapse({parent: '#visibility-accordion', toggle: false});
98                 }
99
100                 $visibility_public_radio.on('change', function (e) {
101                         if ($.fn.collapse) {
102                                 $visibility_public_panel.collapse('show');
103                         }
104
105                         $visibility_public_panel.prop('disabled', false);
106                         $visibility_custom_panel.prop('disabled', true);
107
108                         $('.profile-jot-net input[type=checkbox]').each(function() {
109                                 // Restores checkbox state if it had been saved
110                                 if ($(this).attr('data-checked') !== undefined) {
111                                         $(this).prop('checked', $(this).attr('data-checked') === 'true');
112                                 }
113                         });
114                         $('.profile-jot-net input').attr('disabled', false);
115                 });
116
117                 $visibility_custom_radio.on('change', function(e) {
118                         if ($.fn.collapse) {
119                                 $visibility_custom_panel.collapse('show');
120                         }
121
122                         $visibility_public_panel.prop('disabled', true);
123                         $visibility_custom_panel.prop('disabled', false);
124
125                         $('.profile-jot-net input[type=checkbox]').each(function() {
126                                 // Saves current checkbox state
127                                 $(this)
128                                         .attr('data-checked', $(this).prop('checked'))
129                                         .prop('checked', false);
130                         });
131                         $('.profile-jot-net input').attr('disabled', 'disabled');
132                 });
133
134                 // Custom visibility tags inputs
135                 let acl_groups = new Bloodhound({
136                         local: {{$acl_groups|@json_encode nofilter}},
137                         identify: function(obj) { return obj.id; },
138                         datumTokenizer: Bloodhound.tokenizers.obj.whitespace(['name']),
139                         queryTokenizer: Bloodhound.tokenizers.whitespace,
140                 });
141                 let acl_contacts = new Bloodhound({
142                         local: {{$acl_contacts|@json_encode nofilter}},
143                         identify: function(obj) { return obj.id; },
144                         datumTokenizer: Bloodhound.tokenizers.obj.whitespace(['name', 'addr']),
145                         queryTokenizer: Bloodhound.tokenizers.whitespace,
146                 });
147                 let acl = new Bloodhound({
148                         local: {{$acl_list|@json_encode nofilter}},
149                         identify: function(obj) { return obj.id; },
150                         datumTokenizer: Bloodhound.tokenizers.obj.whitespace(['name', 'addr']),
151                         queryTokenizer: Bloodhound.tokenizers.whitespace,
152                 });
153                 acl.initialize();
154
155                 let suggestionTemplate = function (item) {
156                         return '<div><img src="' + item.micro + '" alt="" style="float: left; width: auto; height: 2.8em; margin-right: 0.5em;"> <strong>' + item.name + '</strong><br /><em>' + item.addr + '</em></div>';
157                 };
158
159                 $acl_allow_input.tagsinput({
160                         confirmKeys: [13, 44],
161                         freeInput: false,
162                         tagClass: function(item) {
163                                 switch (item.type) {
164                                         case 'group'   : return 'label label-primary';
165                                         case 'contact'  :
166                                         default:
167                                                 return 'label label-info';
168                                 }
169                         },
170                         itemValue: 'id',
171                         itemText: 'name',
172                         itemThumb: 'micro',
173                         itemTitle: function(item) {
174                                 return item.addr;
175                         },
176                         typeaheadjs: {
177                                 name: 'contacts',
178                                 displayKey: 'name',
179                                 templates: {
180                                         suggestion: suggestionTemplate
181                                 },
182                                 source: acl.ttAdapter()
183                         }
184                 });
185
186                 $acl_deny_input
187                         .tagsinput({
188                                 confirmKeys: [13, 44],
189                                 freeInput: false,
190                                 tagClass: function(item) {
191                                         switch (item.type) {
192                                                 case 'group'   : return 'label label-primary';
193                                                 case 'contact'  :
194                                                 default:
195                                                         return 'label label-info';
196                                         }
197                                 },
198                                 itemValue: 'id',
199                                 itemText: 'name',
200                                 itemThumb: 'micro',
201                                 itemTitle: function(item) {
202                                         return item.addr;
203                                 },
204                                 typeaheadjs: {
205                                         name: 'contacts',
206                                         displayKey: 'name',
207                                         templates: {
208                                                 suggestion: suggestionTemplate
209                                         },
210                                         source: acl.ttAdapter()
211                                 }
212                         });
213
214                 // Import existing ACL into the tags input fields.
215
216                 $group_allow_input.val().split(',').forEach(function (val) {
217                         $acl_allow_input.tagsinput('add', acl_groups.get(val)[0]);
218                 });
219                 $contact_allow_input.val().split(',').forEach(function (val) {
220                         $acl_allow_input.tagsinput('add', acl_contacts.get(val)[0]);
221                 });
222                 $group_deny_input.val().split(',').forEach(function (val) {
223                         $acl_deny_input.tagsinput('add', acl_groups.get(val)[0]);
224                 });
225                 $contact_deny_input.val().split(',').forEach(function (val) {
226                         $acl_deny_input.tagsinput('add', acl_contacts.get(val)[0]);
227                 });
228
229                 // Anti-duplicate callback + acl fields value generation
230
231                 $acl_allow_input.on('itemAdded', function (event) {
232                         // Removes duplicate in the opposite acl box
233                         $acl_deny_input.tagsinput('remove', event.item);
234
235                         // Update the real acl field
236                         $group_allow_input.val('');
237                         $contact_allow_input.val('');
238                         [].forEach.call($acl_allow_input.tagsinput('items'), function (item) {
239                                 if (item.type === 'group') {
240                                         $group_allow_input.val($group_allow_input.val() + ',' + item.id);
241                                 } else {
242                                         $contact_allow_input.val($contact_allow_input.val() + ',' + item.id);
243                                 }
244                         });
245                 });
246
247                 $acl_deny_input.on('itemAdded', function (event) {
248                         // Removes duplicate in the opposite acl box
249                         $acl_allow_input.tagsinput('remove', event.item);
250
251                         // Update the real acl field
252                         $group_deny_input.val('');
253                         $contact_deny_input.val('');
254                         [].forEach.call($acl_deny_input.tagsinput('items'), function (item) {
255                                 if (item.type === 'group') {
256                                         $group_deny_input.val($group_allow_input.val() + ',' + item.id);
257                                 } else {
258                                         $contact_deny_input.val($contact_allow_input.val() + ',' + item.id);
259                                 }
260                         });
261                 });
262         });
263 </script>