X-Git-Url: https://git.mxchange.org/?a=blobdiff_plain;f=view%2Ftemplates%2Facl_selector.tpl;h=f1943cf3f687510caade1956a8a87c4dab5c365d;hb=cad8748105c2c64bdfa07c6d11d52c5be30dda5f;hp=58a0f483b8eb8a3bc2c0a32021ac566d686ace71;hpb=f1e7d97b8cae93e1c77f5a5085880409b01fcdbe;p=friendica.git

diff --git a/view/templates/acl_selector.tpl b/view/templates/acl_selector.tpl
index 58a0f483b8..f1943cf3f6 100644
--- a/view/templates/acl_selector.tpl
+++ b/view/templates/acl_selector.tpl
@@ -1,58 +1,269 @@
-
 <div id="acl-wrapper">
-	<input id="acl-search" autocomplete="off">
-	<a id="acl-showall">{{$showall}}</a>
-	<div id="acl-list">
-		<div id="acl-list-content">
+	<div class="panel-group" id="visibility-accordion-{{$input_group_id}}" role="tablist" aria-multiselectable="true">
+		<div class="panel panel-success">
+			<label class="panel-heading{{if $visibility != 'public'}} collapsed{{/if}}" id="visibility-public-heading-{{$input_group_id}}" aria-expanded="{{if $visibility == 'public'}}true{{else}}false{{/if}}">
+				<input type="radio" name="{{$input_names.visibility}}" id="visibility-public-{{$input_group_id}}" value="public" tabindex="14" {{if $visibility == 'public'}}checked{{/if}}>
+				<i class="fa fa-globe"></i> {{$public_title}}
+			</label>
+			<fieldset id="visibility-public-panel-{{$input_group_id}}" class="panel-collapse collapse{{if $visibility == 'public'}} in{{/if}}" role="tabpanel" aria-labelledby="visibility-public-heading-{{$input_group_id}}" {{if $visibility != 'public'}}disabled{{/if}}>
+				<div class="panel-body">
+					<p>{{$public_desc}}</p>
+	                {{if $for_federation}}
+		                {{if $jotnets_fields}}
+		                    {{if $jotnets_fields|count < 3}}
+								<div class="profile-jot-net">
+		                    {{else}}
+								<details class="profile-jot-net">
+								<summary>{{$jotnets_summary}}</summary>
+		                    {{/if}}
+
+		                    {{foreach $jotnets_fields as $jotnets_field}}
+		                        {{if $jotnets_field.type == 'checkbox'}}
+		                            {{include file="field_checkbox.tpl" field=$jotnets_field.field}}
+		                        {{elseif $jotnets_field.type == 'select'}}
+		                            {{include file="field_select.tpl" field=$jotnets_field.field}}
+		                        {{/if}}
+		                    {{/foreach}}
+
+		                    {{if $jotnets_fields|count >= 3}}
+								</details>
+		                    {{else}}
+								</div>
+		                    {{/if}}
+			            {{/if}}
+	                {{/if}}
+				</div>
+			</fieldset>
+		</div>
+		<div class="panel panel-info">
+			<label class="panel-heading{{if $visibility != 'custom'}} collapsed{{/if}}" id="visibility-custom-heading-{{$input_group_id}}" aria-expanded="{{if $visibility == 'custom'}}true{{else}}false{{/if}}">
+				<input type="radio" name="{{$input_names.visibility}}" id="visibility-custom-{{$input_group_id}}" value="custom" tabindex="15" {{if $visibility == 'custom'}}checked{{/if}}>
+				<i class="fa fa-lock"></i> {{$custom_title}}
+			</label>
+			<fieldset id="visibility-custom-panel-{{$input_group_id}}" class="panel-collapse collapse{{if $visibility == 'custom'}} in{{/if}}" role="tabpanel" aria-labelledby="visibility-custom-heading-{{$input_group_id}}" {{if $visibility != 'custom'}}disabled{{/if}}>
+				<input type="hidden" name="{{$input_names.group_allow}}" value="{{$group_allow}}"/>
+				<input type="hidden" name="{{$input_names.contact_allow}}" value="{{$contact_allow}}"/>
+				<input type="hidden" name="{{$input_names.group_deny}}" value="{{$group_deny}}"/>
+				<input type="hidden" name="{{$input_names.contact_deny}}" value="{{$contact_deny}}"/>
+				<div class="panel-body">
+					<p>{{$custom_desc}}</p>
+
+					<div class="form-group">
+						<label for="acl_allow-{{$input_group_id}}">{{$allow_label}}</label>
+						<input type="text" class="form-control input-lg" id="acl_allow-{{$input_group_id}}">
+					</div>
+
+					<div class="form-group">
+						<label for="acl_deny-{{$input_group_id}}">{{$deny_label}}</label>
+						<input type="text" class="form-control input-lg" id="acl_deny-{{$input_group_id}}">
+					</div>
+				</div>
+			</fieldset>
 		</div>
 	</div>
-	<span id="acl-fields"></span>
-</div>
 
-<div class="acl-list-item" rel="acl-template" style="display:none">
-	<img data-src="{0}"><p>{1}</p>
-	<a class='acl-button-show'>{{$show}}</a>
-	<a class='acl-button-hide'>{{$hide}}</a>
-</div>
 
-{{if $networks}}
-<hr style="clear:both"/>
-<div id="profile-jot-email-label">{{$emailcc}}</div><input type="text" name="emailcc" id="profile-jot-email" title="{{$emtitle}}" />
-<div id="profile-jot-email-end"></div>
-
-	{{if $jotnets_fields}}
-		{{if $jotnets_fields|count < 3}}
-<div class="profile-jot-net">
-		{{else}}
-<details class="profile-jot-net">
-	<summary>{{$jotnets_summary}}</summary>
-		{{/if}}
-
-		{{foreach $jotnets_fields as $jotnets_field}}
-			{{if $jotnets_field.type == 'checkbox'}}
-				{{include file="field_checkbox.tpl" field=$jotnets_field.field}}
-			{{elseif $jotnets_field.type == 'select'}}
-				{{include file="field_select.tpl" field=$jotnets_field.field}}
-			{{/if}}
-		{{/foreach}}
-
-		{{if $jotnets_fields|count >= 3}}
-</details>
-		{{else}}
-</div>
-		{{/if}}
-	{{/if}}
+{{if $for_federation}}
+	<div class="form-group">
+		<label for="profile-jot-email" id="profile-jot-email-label-{{$input_group_id}}">{{$emailcc}}</label>
+		<input type="text" name="{{$input_names.emailcc}}" id="profile-jot-email-{{$input_group_id}}" class="form-control" title="{{$emtitle}}" />
+	</div>
+	<div id="profile-jot-email-end-{{$input_group_id}}"></div>
 {{/if}}
+</div>
+<script type="text/javascript">
+	$(function() {
+		let $acl_allow_input = $('#acl_allow-{{$input_group_id}}');
+		let $contact_allow_input = $('[name="{{$input_names.contact_allow}}"]');
+		let $group_allow_input = $('[name="{{$input_names.group_allow}}"]');
+		let $acl_deny_input = $('#acl_deny-{{$input_group_id}}');
+		let $contact_deny_input = $('[name="{{$input_names.contact_deny}}"]');
+		let $group_deny_input = $('[name="{{$input_names.group_deny}}"]');
+		let $visibility_public_panel = $('#visibility-public-panel-{{$input_group_id}}');
+		let $visibility_custom_panel = $('#visibility-custom-panel-{{$input_group_id}}');
+		let $visibility_public_radio = $('#visibility-public-{{$input_group_id}}');
+		let $visibility_custom_radio = $('#visibility-custom-{{$input_group_id}}');
+
+		// Frio specific
+		if ($.fn.collapse) {
+			$visibility_public_panel.collapse({parent: '#visibility-accordion-{{$input_group_id}}', toggle: false});
+			$visibility_custom_panel.collapse({parent: '#visibility-accordion-{{$input_group_id}}', toggle: false});
+		}
+
+		$visibility_public_radio.on('change', function (e) {
+			if ($.fn.collapse) {
+				$visibility_public_panel.collapse('show');
+			}
+
+			$visibility_public_panel.prop('disabled', false);
+			$visibility_custom_panel.prop('disabled', true);
+
+			$('#visibility-public-panel-{{$input_group_id}} .profile-jot-net input[type=checkbox]').each(function() {
+				// Restores checkbox state if it had been saved
+				if ($(this).attr('data-checked') !== undefined) {
+					$(this).prop('checked', $(this).attr('data-checked') === 'true');
+				}
+			});
+			$('#visibility-public-panel-{{$input_group_id}} .profile-jot-net input').attr('disabled', false);
+		});
+
+		$visibility_custom_radio.on('change', function(e) {
+			if ($.fn.collapse) {
+				$visibility_custom_panel.collapse('show');
+			}
+
+			$visibility_public_panel.prop('disabled', true);
+			$visibility_custom_panel.prop('disabled', false);
+
+			$('#visibility-public-panel-{{$input_group_id}} .profile-jot-net input[type=checkbox]').each(function() {
+				// Saves current checkbox state
+				$(this)
+					.attr('data-checked', $(this).prop('checked'))
+					.prop('checked', false);
+			});
+			$('#visibility-public-panel-{{$input_group_id}} .profile-jot-net input').attr('disabled', 'disabled');
+		});
+
+		// Custom visibility tags inputs
+		let acl_groups = new Bloodhound({
+			local: {{$acl_groups|@json_encode nofilter}},
+			identify: function(obj) { return obj.type + '-' + obj.id.toString(); },
+			datumTokenizer: Bloodhound.tokenizers.obj.whitespace(['name']),
+			queryTokenizer: Bloodhound.tokenizers.whitespace,
+		});
+		let acl_contacts = new Bloodhound({
+			local: {{$acl_contacts|@json_encode nofilter}},
+			identify: function(obj) { return obj.type + '-' + obj.id.toString(); },
+			datumTokenizer: Bloodhound.tokenizers.obj.whitespace(['name', 'addr']),
+			queryTokenizer: Bloodhound.tokenizers.whitespace,
+		});
+		let acl = new Bloodhound({
+			local: {{$acl_list|@json_encode nofilter}},
+			identify: function(obj) { return obj.type + '-' + obj.id.toString(); },
+			datumTokenizer: Bloodhound.tokenizers.obj.whitespace(['name', 'addr']),
+			queryTokenizer: Bloodhound.tokenizers.whitespace,
+			sorter: function (itemA, itemB) {
+				if (itemA.name === itemB.name) {
+					return 0;
+				} else if (itemA.name > itemB.name) {
+					return 1;
+				} else {
+					return -1;
+				}
+			},
+		});
+		acl.initialize();
+
+		let suggestionTemplate = function (item) {
+			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>';
+		};
+
+		$acl_allow_input.tagsinput({
+			confirmKeys: [13, 44],
+			freeInput: false,
+			tagClass: function(item) {
+				switch (item.type) {
+					case 'group'   : return 'label label-primary';
+					case 'contact'  :
+					default:
+						return 'label label-info';
+				}
+			},
+			itemValue: function (item) { return item.type + '-' + item.id.toString(); },
+			itemText: 'name',
+			itemThumb: 'micro',
+			itemTitle: function(item) {
+				return item.addr;
+			},
+			typeaheadjs: {
+				name: 'contacts',
+				displayKey: 'name',
+				templates: {
+					suggestion: suggestionTemplate
+				},
+				source: acl.ttAdapter()
+			}
+		});
+
+		$acl_deny_input
+			.tagsinput({
+				confirmKeys: [13, 44],
+				freeInput: false,
+				tagClass: function(item) {
+					switch (item.type) {
+						case 'group'   : return 'label label-primary';
+						case 'contact'  :
+						default:
+							return 'label label-info';
+					}
+				},
+				itemValue: function (item) { return item.type + '-' + item.id.toString(); },
+				itemText: 'name',
+				itemThumb: 'micro',
+				itemTitle: function(item) {
+					return item.addr;
+				},
+				typeaheadjs: {
+					name: 'contacts',
+					displayKey: 'name',
+					templates: {
+						suggestion: suggestionTemplate
+					},
+					source: acl.ttAdapter()
+				}
+			});
+
+		// Import existing ACL into the tags input fields.
+
+		$group_allow_input.val().split(',').forEach(function (group_id) {
+			$acl_allow_input.tagsinput('add', acl_groups.get('group-' + group_id)[0]);
+		});
+		$contact_allow_input.val().split(',').forEach(function (contact_id) {
+			$acl_allow_input.tagsinput('add', acl_contacts.get('contact-' + contact_id)[0]);
+		});
+		$group_deny_input.val().split(',').forEach(function (group_id) {
+			$acl_deny_input.tagsinput('add', acl_groups.get('group-' + group_id)[0]);
+		});
+		$contact_deny_input.val().split(',').forEach(function (contact_id) {
+			$acl_deny_input.tagsinput('add', acl_contacts.get('contact-' + contact_id)[0]);
+		});
+
+		// Anti-duplicate callback + acl fields value generation
+
+		$acl_allow_input.on('itemAdded itemRemoved', function (event) {
+			if (event.type === 'itemAdded') {
+				// Removes duplicate in the opposite acl box
+				$acl_deny_input.tagsinput('remove', event.item);
+			}
+
+			// Update the real acl field
+			$group_allow_input.val('');
+			$contact_allow_input.val('');
+			[].forEach.call($acl_allow_input.tagsinput('items'), function (item) {
+				if (item.type === 'group') {
+					$group_allow_input.val($group_allow_input.val() + ',' + item.id);
+				} else {
+					$contact_allow_input.val($contact_allow_input.val() + ',' + item.id);
+				}
+			});
+		});
+
+		$acl_deny_input.on('itemAdded itemRemoved', function (event) {
+			if (event.type === 'itemAdded') {
+				// Removes duplicate in the opposite acl box
+				$acl_allow_input.tagsinput('remove', event.item);
+			}
 
-<script>
-$(document).ready(function() {
-	if(typeof acl=="undefined"){
-		acl = new ACL(
-			baseurl + '/search/acl',
-			[ {{$allowcid nofilter}},{{$allowgid nofilter}},{{$denycid nofilter}},{{$denygid nofilter}} ],
-			{{$features.aclautomention}},
-			{{if $APP->is_mobile}}true{{else}}false{{/if}}
-		);
-	}
-});
+			// Update the real acl field
+			$group_deny_input.val('');
+			$contact_deny_input.val('');
+			[].forEach.call($acl_deny_input.tagsinput('items'), function (item) {
+				if (item.type === 'group') {
+					$group_deny_input.val($group_deny_input.val() + ',' + item.id);
+				} else {
+					$contact_deny_input.val($contact_deny_input.val() + ',' + item.id);
+				}
+			});
+		});
+	});
 </script>