Use visibility tags input for the default ACL selector

- Move friendica-tagsinput to default view folder
- Update all references to ACL::getFullSelectorHTML
- Fix theme-specific issues with the new ACL

mod/community.php

@@ -125,7 +125,7 @@ function community_content(App $a, $update = 0)
 				'default_location' => $a->user['default-location'],
 				'nickname' => $a->user['nickname'],
 				'lockstate' => (is_array($a->user) && (strlen($a->user['allow_cid']) || strlen($a->user['allow_gid']) || strlen($a->user['deny_cid']) || strlen($a->user['deny_gid'])) ? 'lock' : 'unlock'),
-				'acl' => ACL::getFullSelectorHTML($a->user, true),
+				'acl' => ACL::getFullSelectorHTML($a->page, $a->user, true),
 				'bang' => '',
 				'visitor' => 'block',
 				'profile_uid' => local_user(),

mod/display.php

@@ -304,7 +304,7 @@ function display_content(App $a, $update = false, $update_uid = 0)
 			'default_location' => $a->user['default-location'],
 			'nickname' => $a->user['nickname'],
 			'lockstate' => (is_array($a->user) && (strlen($a->user['allow_cid']) || strlen($a->user['allow_gid']) || strlen($a->user['deny_cid']) || strlen($a->user['deny_gid'])) ? 'lock' : 'unlock'),
-			'acl' => ACL::getFullSelectorHTML($a->user, true),
+			'acl' => ACL::getFullSelectorHTML($a->page, $a->user, true),
 			'bang' => '',
 			'visitor' => 'block',
 			'profile_uid' => local_user(),

mod/events.php

@@ -13,6 +13,7 @@ use Friendica\Core\L10n;
 use Friendica\Core\Logger;
 use Friendica\Core\Renderer;
 use Friendica\Core\System;
+use Friendica\Core\Theme;
 use Friendica\Core\Worker;
 use Friendica\Database\DBA;
 use Friendica\Model\Event;
@@ -384,6 +385,12 @@ function events_content(App $a)
 			$events[$key]['item'] = $event_item;
 		}
 
+		// ACL blocks are loaded in modals in frio
+		$a->page->registerFooterScript(Theme::getPathForFile('asset/typeahead.js/dist/typeahead.bundle.js'));
+		$a->page->registerFooterScript(Theme::getPathForFile('js/friendica-tagsinput/friendica-tagsinput.js'));
+		$a->page->registerStylesheet(Theme::getPathForFile('js/friendica-tagsinput/friendica-tagsinput.css'));
+		$a->page->registerStylesheet(Theme::getPathForFile('js/friendica-tagsinput/friendica-tagsinput-typeahead.css'));
+
 		$o = Renderer::replaceMacros($tpl, [
 			'$tabs'      => $tabs,
 			'$title'     => L10n::t('Events'),
@@ -486,7 +493,7 @@ function events_content(App $a)
 		$perms = ACL::getDefaultUserPermissions($orig_event);
 
 		if (!$cid && in_array($mode, ['new', 'copy'])) {
-			$acl = ACL::getFullSelectorHTML($a->user, false, $orig_event);
+			$acl = ACL::getFullSelectorHTML($a->page, $a->user, false, $perms);
 		} else {
 			$acl = '';
 		}
@@ -506,11 +513,6 @@ function events_content(App $a)
 			'$cid'  => $cid,
 			'$uri'  => $uri,
 
-			'$allow_cid' => json_encode($perms['allow_cid']),
-			'$allow_gid' => json_encode($perms['allow_gid']),
-			'$deny_cid'  => json_encode($perms['deny_cid']),
-			'$deny_gid'  => json_encode($perms['deny_gid']),
-
 			'$title' => L10n::t('Event details'),
 			'$desc' => L10n::t('Starting date and Title are required.'),
 			'$s_text' => L10n::t('Event Starts:') . ' <span class="required" title="' . L10n::t('Required') . '">*</span>',

mod/network.php

@@ -377,7 +377,7 @@ function networkFlatView(App $a, $update = 0)
 			(strlen($a->user['allow_cid']) || strlen($a->user['allow_gid']) ||
 			strlen($a->user['deny_cid']) || strlen($a->user['deny_gid'])) ? 'lock' : 'unlock'),
 			'default_perms' => ACL::getDefaultUserPermissions($a->user),
-			'acl' => ACL::getFullSelectorHTML($a->user, true),
+			'acl' => ACL::getFullSelectorHTML($a->page, $a->user, true),
 			'bang' => '',
 			'visitor' => 'block',
 			'profile_uid' => local_user(),
@@ -554,7 +554,7 @@ function networkThreadedView(App $a, $update, $parent)
 			(strlen($a->user['allow_cid']) || strlen($a->user['allow_gid']) ||
 			strlen($a->user['deny_cid']) || strlen($a->user['deny_gid']))) ? 'lock' : 'unlock'),
 			'default_perms' => ACL::getDefaultUserPermissions($a->user),
-			'acl' => ACL::getFullSelectorHTML($a->user, true, $default_permissions),
+			'acl' => ACL::getFullSelectorHTML($a->page, $a->user, true, $default_permissions),
 			'bang' => (($gid || $cid || $nets) ? '!' : ''),
 			'visitor' => 'block',
 			'profile_uid' => local_user(),

mod/photos.php

@@ -960,7 +960,7 @@ function photos_content(App $a)
 
 		$tpl = Renderer::getMarkupTemplate('photos_upload.tpl');
 
-		$aclselect_e = ($visitor ? '' : ACL::getFullSelectorHTML($a->user));
+		$aclselect_e = ($visitor ? '' : ACL::getFullSelectorHTML($a->page, $a->user));
 
 		$o .= Renderer::replaceMacros($tpl,[
 			'$pagename' => L10n::t('Upload Photos'),
@@ -1332,7 +1332,7 @@ function photos_content(App $a)
 
 			$album_e = $ph[0]['album'];
 			$caption_e = $ph[0]['desc'];
-			$aclselect_e = ACL::getFullSelectorHTML($a->user, false, $ph[0]);
+			$aclselect_e = ACL::getFullSelectorHTML($a->page, $a->user, false, $ph[0]);
 
 			$edit = Renderer::replaceMacros($edit_tpl, [
 				'$id' => $ph[0]['id'],

mod/settings.php

@@ -1197,7 +1197,7 @@ function settings_content(App $a)
 		'$permissions' => L10n::t('Default Post Permissions'),
 		'$permdesc' => L10n::t("\x28click to open/close\x29"),
 		'$visibility' => $profile['net-publish'],
-		'$aclselect' => ACL::getFullSelectorHTML($a->user),
+		'$aclselect' => ACL::getFullSelectorHTML($a->page, $a->user),
 		'$suggestme' => $suggestme,
 		'$blockwall'=> $blockwall, // array('blockwall', L10n::t('Allow friends to post to your profile page:'), !$blockwall, ''),
 		'$blocktags'=> $blocktags, // array('blocktags', L10n::t('Allow friends to tag your posts:'), !$blocktags, ''),

src/Core/ACL.php

@@ -6,13 +6,10 @@
 
 namespace Friendica\Core;
 
+use Friendica\App\Page;
 use Friendica\BaseObject;
-use Friendica\Content\Feature;
 use Friendica\Database\DBA;
 use Friendica\Model\Contact;
-use Friendica\Model\GContact;
-use Friendica\Core\Session;
-use Friendica\Util\Network;
 use Friendica\Model\Group;
 
 /**
@@ -312,26 +309,50 @@ class ACL extends BaseObject
 	/**
 	 * Return the full jot ACL selector HTML
 	 *
+	 * @param Page  $page
 	 * @param array $user                User array
-	 * @param bool  $show_jotnets
+	 * @param bool  $for_federation
-	 * @param array $default_permissions Static defaults permission array: ['allow_cid' => '', 'allow_gid' => '', 'deny_cid' => '', 'deny_gid' => '']
+	 * @param array $default_permissions Static defaults permission array:
+	 *                                   [
+	 *                                      'allow_cid' => [],
+	 *                                      'allow_gid' => [],
+	 *                                      'deny_cid' => [],
+	 *                                      'deny_gid' => [],
+	 *                                      'hidewall' => true/false
+	 *                                   ]
 	 * @return string
 	 * @throws \Friendica\Network\HTTPException\InternalServerErrorException
 	 */
-	public static function getFullSelectorHTML(array $user = null, $show_jotnets = false, array $default_permissions = [])
+	public static function getFullSelectorHTML(Page $page, array $user = null, bool $for_federation = false, array $default_permissions = [])
 	{
+		$page->registerFooterScript(Theme::getPathForFile('asset/typeahead.js/dist/typeahead.bundle.js'));
+		$page->registerFooterScript(Theme::getPathForFile('js/friendica-tagsinput/friendica-tagsinput.js'));
+		$page->registerStylesheet(Theme::getPathForFile('js/friendica-tagsinput/friendica-tagsinput.css'));
+		$page->registerStylesheet(Theme::getPathForFile('js/friendica-tagsinput/friendica-tagsinput-typeahead.css'));
+
 		// Defaults user permissions
 		if (empty($default_permissions)) {
 			$default_permissions = self::getDefaultUserPermissions($user);
 		}
 
+		if (count($default_permissions['allow_cid'])
+			+ count($default_permissions['allow_gid'])
+			+ count($default_permissions['deny_cid'])
+			+ count($default_permissions['deny_gid'])) {
+			$visibility = 'custom';
+		} else {
+			$visibility = 'public';
+			// Default permission display for custom panel
+			$default_permissions['allow_gid'] = [Group::FOLLOWERS];
+		}
+
 		$jotnets_fields = [];
-		if ($show_jotnets) {
+		if ($for_federation) {
 			$mail_enabled = false;
 			$pubmail_enabled = false;
 
 			if (function_exists('imap_open') && !Config::get('system', 'imap_disabled')) {
-				$mailacct = DBA::selectFirst('mailacct', ['pubmail'], ['`uid` = ? AND `server` != ""', local_user()]);
+				$mailacct = DBA::selectFirst('mailacct', ['pubmail'], ['`uid` = ? AND `server` != ""', $user['úid']]);
 				if (DBA::isResult($mailacct)) {
 					$mail_enabled = true;
 					$pubmail_enabled = !empty($mailacct['pubmail']);
@@ -354,27 +375,35 @@ class ACL extends BaseObject
 			}
 		}
 
+		$acl_contacts = self::getContactListByUserId($user['uid']);
+
+		$acl_groups = self::getGroupListByUserId($user['uid']);
+
+		$acl_list = array_merge($acl_groups, $acl_contacts);
+
 		$tpl = Renderer::getMarkupTemplate('acl_selector.tpl');
 		$o = Renderer::replaceMacros($tpl, [
-			'$showall' => L10n::t('Visible to everybody'),
+			'$public_title'   => L10n::t('Public'),
-			'$show' => L10n::t('show'),
+			'$public_desc'    => L10n::t('This content will be shown to all your followers and can be seen in the community pages and by anyone with its link.'),
-			'$hide' => L10n::t('don\'t show'),
+			'$custom_title'   => L10n::t('Limited/Private'),
-			'$allowcid' => json_encode(($default_permissions['allow_cid'] ?? '') ?: []), // We need arrays for
+			'$custom_desc'    => L10n::t('This content will be shown only to the people in the first box, to the exception of the people mentioned in the second box. It won\'t appear anywhere public.'),
-			'$allowgid' => json_encode(($default_permissions['allow_gid'] ?? '') ?: []), // Javascript since we
+			'$allow_label'    => L10n::t('Show to:'),
-			'$denycid'  => json_encode(($default_permissions['deny_cid']  ?? '') ?: []), // call .remove() and
+			'$deny_label'     => L10n::t('Except to:'),
-			'$denygid'  => json_encode(($default_permissions['deny_gid']  ?? '') ?: []), // .push() on these values
+			'$emailcc'        => L10n::t('CC: email addresses'),
-			'$networks' => $show_jotnets,
+			'$emtitle'        => L10n::t('Example: bob@example.com, mary@example.com'),
-			'$emailcc' => L10n::t('CC: email addresses'),
-			'$emtitle' => L10n::t('Example: bob@example.com, mary@example.com'),
-			'$jotnets_enabled' => empty($default_permissions['hidewall']),
 			'$jotnets_summary' => L10n::t('Connectors'),
-			'$jotnets_fields' => $jotnets_fields,
 			'$jotnets_disabled_label' => L10n::t('Connectors disabled, since "%s" is enabled.', L10n::t('Hide your profile details from unknown viewers?')),
-			'$aclModalTitle' => L10n::t('Permissions'),
+			'$visibility'     => $visibility,
-			'$aclModalDismiss' => L10n::t('Close'),
+			'$acl_contacts'   => $acl_contacts,
-			'$features' => [
+			'$acl_groups'     => $acl_groups,
-				'aclautomention' => !empty($user['uid']) && Feature::isEnabled($user['uid'], 'aclautomention') ? 'true' : 'false'
+			'$acl_list'       => $acl_list,
-			],
+			'$contact_allow'  => implode(',', $default_permissions['allow_cid']),
+			'$group_allow'    => implode(',', $default_permissions['allow_gid']),
+			'$contact_deny'   => implode(',', $default_permissions['deny_cid']),
+			'$group_deny'     => implode(',', $default_permissions['deny_gid']),
+			'$for_federation' => $for_federation,
+			'$jotnets_fields' => $jotnets_fields,
+			'$user_hidewall'  => $default_permissions['hidewall'],
 		]);
 
 		return $o;

src/Module/Bookmarklet.php

@@ -44,7 +44,7 @@ class Bookmarklet extends BaseModule
 				'nickname'         => $app->user['nickname'],
 				'lockstate'        => ((is_array($app->user) && ((strlen($app->user['allow_cid'])) || (strlen($app->user['allow_gid'])) || (strlen($app->user['deny_cid'])) || (strlen($app->user['deny_gid'])))) ? 'lock' : 'unlock'),
 				'default_perms'    => ACL::getDefaultUserPermissions($app->user),
-				'acl'              => ACL::getFullSelectorHTML($app->user, true),
+				'acl'              => ACL::getFullSelectorHTML($app->page, $app->user, true),
 				'bang'             => '',
 				'visitor'          => 'block',
 				'profile_uid'      => local_user(),

src/Module/Contact.php

@@ -926,7 +926,7 @@ class Contact extends BaseModule
 					'default_location' => $a->user['default-location'],
 					'nickname' => $a->user['nickname'],
 					'lockstate' => (is_array($a->user) && (strlen($a->user['allow_cid']) || strlen($a->user['allow_gid']) || strlen($a->user['deny_cid']) || strlen($a->user['deny_gid'])) ? 'lock' : 'unlock'),
-					'acl' => ACL::getFullSelectorHTML($a->user, true),
+					'acl' => ACL::getFullSelectorHTML($a->page, $a->user, true),
 					'bang' => '',
 					'visitor' => 'block',
 					'profile_uid' => local_user(),

src/Module/Profile.php

@@ -208,7 +208,7 @@ class Profile extends BaseModule
 						|| strlen($a->user['deny_cid'])
 						|| strlen($a->user['deny_gid'])
 					) ? 'lock' : 'unlock',
-					'acl' => $is_owner ? ACL::getFullSelectorHTML($a->user, true) : '',
+					'acl' => $is_owner ? ACL::getFullSelectorHTML($a->page, $a->user, true) : '',
 					'bang' => '',
 					'visitor' => $is_owner || $commvisitor ? 'block' : 'none',
 					'profile_uid' => $a->profile['profile_uid'],

view/js/friendica-tagsinput/friendica-tagsinput.css

@@ -0,0 +1,155 @@
+/*
+ * friendica-tagsinput v0.8.0
+ *
+ * Non-Bootstrap edition
+ */
+
+.label {
+	display: inline;
+	padding: .2em .6em .3em;
+	font-size: 75%;
+	font-weight: 700;
+	line-height: 1;
+	color: #fff;
+	text-align: center;
+	white-space: nowrap;
+	vertical-align: baseline;
+	border-radius: .25em;
+}
+
+.label-default {
+	background-color: #777777;
+}
+.label-default[href]:hover,
+.label-default[href]:focus {
+	background-color: #5e5e5e;
+}
+.label-primary {
+	background-color: #337ab7;
+}
+.label-primary[href]:hover,
+.label-primary[href]:focus {
+	background-color: #286090;
+}
+.label-success {
+	background-color: #5cb85c;
+}
+.label-success[href]:hover,
+.label-success[href]:focus {
+	background-color: #449d44;
+}
+.label-info {
+	background-color: #5bc0de;
+}
+.label-info[href]:hover,
+.label-info[href]:focus {
+	background-color: #31b0d5;
+}
+.label-warning {
+	background-color: #f0ad4e;
+}
+.label-warning[href]:hover,
+.label-warning[href]:focus {
+	background-color: #ec971f;
+}
+.label-danger {
+	background-color: #d9534f;
+}
+.label-danger[href]:hover,
+.label-danger[href]:focus {
+	background-color: #c9302c;
+}
+
+.form-control[disabled],
+.form-control[readonly],
+fieldset[disabled] .form-control {
+	background-color: #eeeeee;
+	opacity: 1;
+}
+.form-control[disabled],
+fieldset[disabled] .form-control {
+	cursor: not-allowed;
+}
+
+
+
+
+.friendica-tagsinput {
+	background-color: #fff;
+	border: 1px solid #ccc;
+	box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+	display: inline-block;
+	padding: 4px 6px;
+	color: #555;
+	vertical-align: middle;
+	border-radius: 4px;
+	max-width: 100%;
+	line-height: 22px;
+	cursor: text;
+	height: auto;
+}
+
+.friendica-tagsinput.input-lg {
+	line-height: 27px;
+}
+
+.friendica-tagsinput input {
+	border: none;
+	box-shadow: none;
+	outline: none;
+	background-color: transparent;
+	padding: 0 6px;
+	margin: 0;
+	width: auto;
+	max-width: inherit;
+}
+
+.friendica-tagsinput.form-control input::-moz-placeholder {
+	color: #777;
+	opacity: 1;
+}
+
+.friendica-tagsinput.form-control input:-ms-input-placeholder {
+	color: #777;
+}
+
+.friendica-tagsinput.form-control input::-webkit-input-placeholder {
+	color: #777;
+}
+
+.friendica-tagsinput input:focus {
+	border: none;
+	box-shadow: none;
+}
+
+.friendica-tagsinput .tag {
+	margin: 0 2px 2px 0;
+	color: white;
+	font-weight: normal;
+}
+
+.friendica-tagsinput .tag img {
+	width: auto;
+	height: 1.5em;
+	vertical-align: text-top;
+	margin-right: 8px;
+}
+
+.friendica-tagsinput .tag [data-role="remove"] {
+	margin-left: 8px;
+	cursor: pointer;
+}
+
+.friendica-tagsinput .tag [data-role="remove"]:after {
+	content: "x";
+	padding: 0px 2px;
+	font-weight: bold;
+}
+
+.friendica-tagsinput .tag [data-role="remove"]:hover {
+	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
+}
+
+.friendica-tagsinput .tag [data-role="remove"]:hover:active {
+	box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+}

view/templates/acl_selector.tpl

@@ -1,58 +1,263 @@
-
 <div id="acl-wrapper">
-	<input id="acl-search" autocomplete="off">
+	<div class="panel-group" id="visibility-accordion" role="tablist" aria-multiselectable="true">
-	<a id="acl-showall">{{$showall}}</a>
+		<div class="panel panel-success">
-	<div id="acl-list">
+			<div class="panel-heading{{if $visibility != 'public'}} collapsed{{/if}}" id="visibility-public-heading" aria-expanded="{{if $visibility == 'public'}}true{{else}}false{{/if}}">
-		<div id="acl-list-content">
+				<label>
+					<input type="radio" name="visibility" id="visibility-public" value="public" tabindex="14" {{if $visibility == 'public'}}checked{{/if}}>
+					<i class="fa fa-globe"></i> {{$public_title}}
+				</label>
+			</div>
+			<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}}>
+				<div class="panel-body">
+					<p>{{$public_desc}}</p>
+	                {{if $for_federation}}
+		                {{if $user_hidewall}}
+			                <h4>{{$jotnets_summary}}</h4>
+	                        {{$jotnets_disabled_label}}
+		                {{elseif $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">
+			<div class="panel-heading{{if $visibility != 'custom'}} collapsed{{/if}}" id="visibility-custom-heading" aria-expanded="{{if $visibility == 'custom'}}true{{else}}false{{/if}}">
+				<label>
+					<input type="radio" name="visibility" id="visibility-custom" value="custom" tabindex="15" {{if $visibility == 'custom'}}checked{{/if}}>
+					<i class="fa fa-lock"></i> {{$custom_title}}
+				</label>
+			</div>
+			<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}}>
+				<input type="hidden" name="group_allow" value="{{$group_allow}}"/>
+				<input type="hidden" name="contact_allow" value="{{$contact_allow}}"/>
+				<input type="hidden" name="group_deny" value="{{$group_deny}}"/>
+				<input type="hidden" name="contact_deny" value="{{$contact_deny}}"/>
+				<div class="panel-body">
+					<p>{{$custom_desc}}</p>
+
+					<div class="form-group">
+						<label for="acl_allow">{{$allow_label}}</label>
+						<input type="text" class="form-control input-lg" id="acl_allow">
+					</div>
+
+					<div class="form-group">
+						<label for="acl_deny">{{$deny_label}}</label>
+						<input type="text" class="form-control input-lg" id="acl_deny">
+					</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}}
+{{if $for_federation}}
-<hr style="clear:both"/>
+	<div class="form-group">
-<div id="profile-jot-email-label">{{$emailcc}}</div><input type="text" name="emailcc" id="profile-jot-email" title="{{$emtitle}}" />
+		<label for="profile-jot-email" id="profile-jot-email-label">{{$emailcc}}</label>
-<div id="profile-jot-email-end"></div>
+		<input type="text" name="emailcc" id="profile-jot-email" class="form-control" title="{{$emtitle}}" />
-
+	</div>
-	{{if $jotnets_fields}}
+	<div id="profile-jot-email-end"></div>
-		{{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>
+<script type="text/javascript">
+	$(function() {
+		let $acl_allow_input = $('#acl_allow');
+		let $contact_allow_input = $('[name=contact_allow]');
+		let $group_allow_input = $('[name=group_allow]');
+		let $acl_deny_input = $('#acl_deny');
+		let $contact_deny_input = $('[name=contact_deny]');
+		let $group_deny_input = $('[name=group_deny]');
+		let $visibility_public_panel = $('#visibility-public-panel');
+		let $visibility_custom_panel = $('#visibility-custom-panel');
+		let $visibility_public_radio = $('#visibility-public');
+		let $visibility_custom_radio = $('#visibility-custom');
 
-<script>
+		// Frio specific
-$(document).ready(function() {
+		if ($.fn.collapse) {
-	if(typeof acl=="undefined"){
+			$visibility_public_panel.collapse({parent: '#visibility-accordion', toggle: false});
-		acl = new ACL(
+			$visibility_custom_panel.collapse({parent: '#visibility-accordion', toggle: false});
-			baseurl + '/search/acl',
+		}
-			[ {{$allowcid nofilter}},{{$allowgid nofilter}},{{$denycid nofilter}},{{$denygid nofilter}} ],
+
-			{{$features.aclautomention}},
+		$visibility_public_radio.on('change', function (e) {
-			{{if $APP->is_mobile}}true{{else}}false{{/if}}
+			if ($.fn.collapse) {
-		);
+				$visibility_public_panel.collapse('show');
-	}
+			}
-});
+
+			$visibility_public_panel.prop('disabled', false);
+			$visibility_custom_panel.prop('disabled', true);
+
+			$('.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');
+				}
+			});
+			$('.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);
+
+			$('.profile-jot-net input[type=checkbox]').each(function() {
+				// Saves current checkbox state
+				$(this)
+					.attr('data-checked', $(this).prop('checked'))
+					.prop('checked', false);
+			});
+			$('.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.id; },
+			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.id; },
+			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.id; },
+			datumTokenizer: Bloodhound.tokenizers.obj.whitespace(['name', 'addr']),
+			queryTokenizer: Bloodhound.tokenizers.whitespace,
+		});
+		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: 'id',
+			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: 'id',
+				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 (val) {
+			$acl_allow_input.tagsinput('add', acl_groups.get(val)[0]);
+		});
+		$contact_allow_input.val().split(',').forEach(function (val) {
+			$acl_allow_input.tagsinput('add', acl_contacts.get(val)[0]);
+		});
+		$group_deny_input.val().split(',').forEach(function (val) {
+			$acl_deny_input.tagsinput('add', acl_groups.get(val)[0]);
+		});
+		$contact_deny_input.val().split(',').forEach(function (val) {
+			$acl_deny_input.tagsinput('add', acl_contacts.get(val)[0]);
+		});
+
+		// Anti-duplicate callback + acl fields value generation
+
+		$acl_allow_input.on('itemAdded', function (event) {
+			// 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', function (event) {
+			// Removes duplicate in the opposite acl box
+			$acl_allow_input.tagsinput('remove', event.item);
+
+			// 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_allow_input.val() + ',' + item.id);
+				} else {
+					$contact_deny_input.val($contact_allow_input.val() + ',' + item.id);
+				}
+			});
+		});
+	});
 </script>

view/theme/frio/frameworks/friendica-tagsinput/friendica-tagsinput.css

@@ -1,72 +0,0 @@
-/*
- * friendica-tagsinput v0.8.0
- * 
- */
-
-.friendica-tagsinput {
-  background-color: #fff;
-  border: 1px solid #ccc;
-  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-  display: inline-block;
-  padding: 4px 6px;
-  color: #555;
-  vertical-align: middle;
-  border-radius: 4px;
-  max-width: 100%;
-  line-height: 22px;
-  cursor: text;
-  height: auto;
-}
-.friendica-tagsinput.input-lg {
-  line-height: 27px;
-}
-.friendica-tagsinput input {
-  border: none;
-  box-shadow: none;
-  outline: none;
-  background-color: transparent;
-  padding: 0 6px;
-  margin: 0;
-  width: auto;
-  max-width: inherit;
-}
-.friendica-tagsinput.form-control input::-moz-placeholder {
-  color: #777;
-  opacity: 1;
-}
-.friendica-tagsinput.form-control input:-ms-input-placeholder {
-  color: #777;
-}
-.friendica-tagsinput.form-control input::-webkit-input-placeholder {
-  color: #777;
-}
-.friendica-tagsinput input:focus {
-  border: none;
-  box-shadow: none;
-}
-.friendica-tagsinput .tag {
-  margin: 0 2px 2px 0;
-  color: white;
-  font-weight: normal;
-}
-.friendica-tagsinput .tag img {
-  width: auto;
-  height: 1.5em;
-  vertical-align: text-top;
-  margin-right: 8px;
-}
-.friendica-tagsinput .tag [data-role="remove"] {
-  margin-left: 8px;
-  cursor: pointer;
-}
-.friendica-tagsinput .tag [data-role="remove"]:after {
-  content: "x";
-  padding: 0px 2px;
-  font-weight: bold;
-}
-.friendica-tagsinput .tag [data-role="remove"]:hover {
-  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
-}
-.friendica-tagsinput .tag [data-role="remove"]:hover:active {
-  box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
-}

view/theme/frio/js/event_edit.js

@@ -49,24 +49,6 @@ $(document).ready(function() {
 		$("#event-preview").empty();
 		e.preventDefault();
 	});
-
-	// Construct a new ACL. We need this everytime the 'event-edit-form' is loaded
-	// without page reloading (e.g. closing an old modal and open a new modal).
-	// Otherwise we wouldn't get the ACL data.
-	/// @todo: Try to implement some kind of ACL reloading in acl.js.
-
-	var eventPerms = document.getElementById('event-edit-form');
-
-	acl = new ACL(
-		baseurl + '/search/acl',
-		[
-			JSON.parse(eventPerms.dataset.allow_cid),
-			JSON.parse(eventPerms.dataset.allow_gid),
-			JSON.parse(eventPerms.dataset.deny_cid),
-			JSON.parse(eventPerms.dataset.deny_gid)
-		]
-	);
-	acl.get(0, 100);
 });
 
 // Load the html of the actual event and incect the output to the

view/theme/frio/js/modal.js

@@ -344,11 +344,11 @@ function toggleJotNav (elm) {
 
 	// Minimize all tab content wrapper and activate only the selected
 	// tab panel.
-	$('#jot-modal [role=tabpanel]').addClass("minimize").attr("aria-hidden" ,"true");
+	$('#profile-jot-form > [role=tabpanel]').addClass("minimize").attr("aria-hidden" ,"true");
-	$('#jot-modal #' + tabpanel).removeClass("minimize").attr("aria-hidden" ,"false");
+	$('#' + tabpanel).removeClass("minimize").attr("aria-hidden" ,"false");
 
 	// Set the aria-selected states
-	$("#jot-modal .nav-tabs .jot-nav-lnk").attr("aria-selected", "false");
+	$("#jot-modal .modal-header .nav-tabs .jot-nav-lnk").attr("aria-selected", "false");
 	elm.setAttribute("aria-selected", "true");
 
 	// For some some tab panels we need to execute other js functions.

view/theme/frio/templates/acl_selector.tpl

@@ -1,64 +0,0 @@
-
-<div id="acl-wrapper">
-	<div class="form-group form-group-search">
-		<button id="acl-showall" class="btn btn-block btn-default"><i class="fa fa-globe"></i> {{$showall}}</button>
-	</div>
-	<div class="form-group form-group-search">
-		<input type="text" id="acl-search" class="form-control form-search" autocomplete="off">
-	</div>
-	<div id="acl-list">
-		<div id="acl-list-content"></div>
-	</div>
-	<span id="acl-fields"></span>
-</div>
-
-<div class="acl-list-item" rel="acl-template" style="display:none">
-	<img data-src="{0}" alt="{1}"><p>{1}</p>
-	<button class='acl-button-hide btn btn-sm btn-default'>{{$hide}}</button>
-	<button class='acl-button-show btn btn-sm btn-default'>{{$show}}</button>
-</div>
-
-{{if $networks}}
-<hr style="clear:both"/>
-<div class="form-group">
-	<label for="profile-jot-email" id="profile-jot-email-label">{{$emailcc}}</label>
-	<input type="text" name="emailcc" id="profile-jot-email" class="form-control" title="{{$emtitle}}" />
-</div>
-<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}}
-
-<script type="text/javascript">
-$(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}}
-		);
-	}
-});
-</script>

view/theme/frio/templates/event_form.tpl

@@ -30,7 +30,7 @@
 	</ul>
 
 	<div id="event-edit-form-wrapper">
-	<form id="event-edit-form" action="{{$post}}" method="post" data-allow_cid="{{$allow_cid}}" data-allow_gid="{{$allow_gid}}" data-deny_cid="{{$deny_cid}}" data-deny_gid="{{$deny_gid}}">
+	<form id="event-edit-form" action="{{$post}}" method="post">
 
 		<input type="hidden" name="event_id" value="{{$eid}}" />
 		<input type="hidden" name="cid" value="{{$cid}}" />

view/theme/smoothly/templates/jot.tpl

@@ -70,9 +70,6 @@
         <div style="display: none;">
             <div id="profile-jot-acl-wrapper" style="width:auto;height:auto;overflow:auto;">
                 {{$acl nofilter}}
-                <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>
                 {{$jotnets nofilter}}
             </div>
         </div>