[frio] Make connector settings panels keyboard activated

- Keep the connector panel open after form was submitted
This commit is contained in:
Hypolite Petovan 2021-11-21 18:49:07 -05:00
parent 0ca420c949
commit 60bb66e18d
7 changed files with 256 additions and 99 deletions

View File

@ -298,6 +298,62 @@ $data = [
Called when the Addon Settings pages are submitted.
`$b` is the $_POST array.
### connector_settings
Called when generating the HTML for a connector addon settings page.
`$data` is an array containing:
- **connector** (output): Required. The addon folder name.
- **title** (output): Required. The addon settings panel title.
- **image** (output): Required. The relative path of the logo image of the platform/protocol this addon is connecting to, max size 48x48px.
- **enabled** (output): Optional. If set to a falsy value, the connector image will be dimmed.
- **html** (output): Optional. Raw HTML of the addon form elements. Both the `<form>` tags and the submit buttons are taken care of elsewhere.
- **submit** (output): Optional. If unset, a default submit button with `name="<addon name>-submit"` will be generated.
Can take different value types:
- **string**: The label to replace the default one.
- **associative array**: A list of submit button, the key is the value of the `name` attribute, the value is the displayed label.
The first submit button in this list is considered the main one and themes might emphasize its display.
#### Examples
##### With default submit button
```php
$data = [
'connector' => 'diaspora',
'title' => DI::l10n()->t('Diaspora Export'),
'image' => 'images/diaspora-logo.png',
'enabled' => $enabled,
'html' => $html,
];
```
##### With custom submit button label and no logo dim
```php
$data = [
'connector' => 'ifttt',
'title' => DI::l10n()->t('IFTTT Mirror'),
'image' => 'addon/ifttt/ifttt.png',
'html' => $html,
'submit' => DI::l10n()->t('Generate new key'),
];
```
##### With conditional submit buttons
```php
$submit = ['pumpio-submit' => DI::l10n()->t('Save Settings')];
if ($oauth_token && $oauth_token_secret) {
$submit['pumpio-delete'] = DI::l10n()->t('Delete this preset');
}
$data = [
'connector' => 'pumpio',
'title' => DI::l10n()->t('Pump.io Import/Export/Mirror'),
'image' => 'images/pumpio.png',
'enabled' => $enabled,
'html' => $html,
'submit' => $submit,
];
```
### profile_post
Called when posting a profile page.
`$b` is the $_POST array.

View File

@ -72,7 +72,7 @@ function settings_post(App $a)
$user = User::getById($a->getLoggedInUserId());
if ((DI::args()->getArgc() > 1) && (DI::args()->getArgv()[1] == 'connectors')) {
BaseModule::checkFormSecurityTokenRedirectOnError('/settings/connectors', 'settings_connectors');
BaseModule::checkFormSecurityTokenRedirectOnError(DI::args()->getQueryString(), 'settings_connectors');
if (!empty($_POST['general-submit'])) {
DI::pConfig()->set(local_user(), 'system', 'accept_only_sharer', intval($_POST['accept_only_sharer']));
@ -81,7 +81,7 @@ function settings_post(App $a)
DI::pConfig()->set(local_user(), 'system', 'simple_shortening', intval($_POST['simple_shortening']));
DI::pConfig()->set(local_user(), 'system', 'attach_link_title', intval($_POST['attach_link_title']));
DI::pConfig()->set(local_user(), 'ostatus', 'legacy_contact', $_POST['legacy_contact']);
} elseif (!empty($_POST['imap-submit'])) {
} elseif (!empty($_POST['mail-submit'])) {
$mail_server = $_POST['mail_server'] ?? '';
$mail_port = $_POST['mail_port'] ?? '';
$mail_ssl = strtolower(trim($_POST['mail_ssl'] ?? ''));
@ -133,6 +133,7 @@ function settings_post(App $a)
}
Hook::callAll('connector_settings_post', $_POST);
DI::baseUrl()->redirect(DI::args()->getQueryString());
return;
}
@ -507,8 +508,22 @@ function settings_content(App $a)
DI::page()['htmlhead'] = '<meta http-equiv="refresh" content="0; URL=' . DI::baseUrl().'/ostatus_subscribe?url=' . urlencode($legacy_contact) . '">';
}
$settings_connectors = '';
Hook::callAll('connector_settings', $settings_connectors);
$connector_settings_forms = [];
foreach (DI::dba()->selectToArray('hook', ['file', 'function'], ['hook' => 'connector_settings']) as $hook) {
$data = [];
Hook::callSingle(DI::app(), 'connector_settings', [$hook['file'], $hook['function']], $data);
$tpl = Renderer::getMarkupTemplate('settings/addon/connector.tpl');
$connector_settings_forms[$data['connector']] = Renderer::replaceMacros($tpl, [
'$connector' => $data['connector'],
'$title' => $data['title'],
'$image' => $data['image'] ?? '',
'$enabled' => $data['enabled'] ?? true,
'$open' => (DI::args()->getArgv()[2] ?? '') === $data['connector'],
'$html' => $data['html'] ?? '',
'$submit' => $data['submit'] ?? DI::l10n()->t('Save Settings'),
]);
}
if ($a->isSiteAdmin()) {
$diasp_enabled = DI::l10n()->t('Built-in support for %s connectivity is %s', DI::l10n()->t('Diaspora (Socialhome, Hubzilla)'), ((DI::config()->get('system', 'diaspora_enabled')) ? DI::l10n()->t('enabled') : DI::l10n()->t('disabled')));
@ -565,11 +580,11 @@ function settings_content(App $a)
'$repair_ostatus_url' => DI::baseUrl() . '/repair_ostatus',
'$repair_ostatus_text' => DI::l10n()->t('Repair OStatus subscriptions'),
'$settings_connectors' => $settings_connectors,
'$connector_settings_forms' => $connector_settings_forms,
'$h_imap' => DI::l10n()->t('Email/Mailbox Setup'),
'$imap_desc' => DI::l10n()->t("If you wish to communicate with email contacts using this service \x28optional\x29, please specify how to connect to your mailbox."),
'$imap_lastcheck' => ['imap_lastcheck', DI::l10n()->t('Last successful email check:'), $mail_chk, ''],
'$h_mail' => DI::l10n()->t('Email/Mailbox Setup'),
'$mail_desc' => DI::l10n()->t("If you wish to communicate with email contacts using this service \x28optional\x29, please specify how to connect to your mailbox."),
'$mail_lastcheck' => ['mail_lastcheck', DI::l10n()->t('Last successful email check:'), $mail_chk, ''],
'$mail_disabled' => $mail_disabled_message,
'$mail_server' => ['mail_server', DI::l10n()->t('IMAP server name:'), $mail_server, ''],
'$mail_port' => ['mail_port', DI::l10n()->t('IMAP port:'), $mail_port, ''],

View File

@ -0,0 +1,34 @@
<span id="settings_{{$connector}}_inflated" class="settings-block fakelink" style="display: {{if $open}}none{{else}}block{{/if}};" onclick="openClose('settings_{{$connector}}_expanded'); openClose('settings_{{$connector}}_inflated');">
<img class="connector{{if !$enabled}}-disabled{{/if}}" src="{{$image}}" /><h3 class="connector">{{$title}}</h3>
</span>
<div id="settings_{{$connector}}_expanded" class="settings-block" style="display: {{if $open}}block{{else}}none{{/if}};">
<span class="fakelink" onclick="openClose('settings_{{$connector}}_expanded'); openClose('settings_{{$connector}}_inflated');">
<img class="connector{{if !$enabled}}-disabled{{/if}}" src="{{$image}}" /><h3 class="connector">{{$title}}</h3>
</span>
{{$html nofilter}}
<div class="clear"></div>
{{if $submit}}
<div class="settings-submit-wrapper panel-footer">
{{if $submit|is_string}}
<button type="submit" name="{{$connector}}-submit" class="btn btn-primary settings-submit" value="{{$submit}}">{{$submit}}</button>
{{else}}
{{$count = 1}}
{{foreach $submit as $name => $label}}{{if $label}}
{{if $count == 1}}
<button type="submit" name="{{$name}}" class="btn btn-primary settings-submit" value="{{$label}}">{{$label}}</button>
{{/if}}
{{if $count == 2}}
<div class="btn-group" role="group" aria-label="...">
{{/if}}
{{if $count != 1}}
<button type="submit" name="{{$name}}" class="btn btn-default settings-submit" value="{{$label}}">{{$label}}</button>
{{/if}}
{{$count = $count + 1}}
{{/if}}{{/foreach}}
{{if $submit|count > 1}}
</div>
{{/if}}
{{/if}}
</div>
{{/if}}
</div>

View File

@ -24,36 +24,43 @@
<input type="submit" id="general-submit" name="general-submit" class="settings-submit" value="{{$submit}}"/>
</div>
</div>
<div class="clear"></div>
{{$settings_connectors nofilter}}
{{if $mail_disabled}}
{{else}}
<span id="settings_mail_inflated" class="settings-block fakelink" style="display: block;"
onclick="openClose('settings_mail_expanded'); openClose('settings_mail_inflated');">
<img class="connector" src="images/mail.png"/><h3 class="settings-heading connector">{{$h_imap}}</h3>
</span>
<div id="settings_mail_expanded" class="settings-block" style="display: none;">
<span class="fakelink" onclick="openClose('settings_mail_expanded'); openClose('settings_mail_inflated');">
<img class="connector" src="images/mail.png"/><h3 class="settings-heading connector">{{$h_imap}}</h3>
</span>
<p>{{$imap_desc nofilter}}</p>
{{include file="field_custom.tpl" field=$imap_lastcheck}}
{{include file="field_input.tpl" field=$mail_server}}
{{include file="field_input.tpl" field=$mail_port}}
{{include file="field_select.tpl" field=$mail_ssl}}
{{include file="field_input.tpl" field=$mail_user}}
{{include file="field_password.tpl" field=$mail_pass}}
{{include file="field_input.tpl" field=$mail_replyto}}
{{include file="field_checkbox.tpl" field=$mail_pubmail}}
{{include file="field_select.tpl" field=$mail_action}}
{{include file="field_input.tpl" field=$mail_movetofolder}}
<div class="settings-submit-wrapper">
<input type="submit" id="imap-submit" name="imap-submit" class="settings-submit" value="{{$submit}}"/>
</div>
</div>
{{/if}}
</form>
<div class="clear"></div>
{{if !$mail_disabled}}
<form action="settings/connectors" method="post" autocomplete="off">
<input type='hidden' name='form_security_token' value='{{$form_security_token}}'>
<span id="settings_mail_inflated" class="settings-block fakelink" style="display: block;"
onclick="openClose('settings_mail_expanded'); openClose('settings_mail_inflated');">
<img class="connector" src="images/mail.png"/><h3 class="settings-heading connector">{{$h_mail}}</h3>
</span>
<div id="settings_mail_expanded" class="settings-block" style="display: none;">
<span class="fakelink" onclick="openClose('settings_mail_expanded'); openClose('settings_mail_inflated');">
<img class="connector" src="images/mail.png"/><h3 class="settings-heading connector">{{$h_mail}}</h3>
</span>
<p>{{$mail_desc nofilter}}</p>
{{include file="field_custom.tpl" field=$mail_lastcheck}}
{{include file="field_input.tpl" field=$mail_server}}
{{include file="field_input.tpl" field=$mail_port}}
{{include file="field_select.tpl" field=$mail_ssl}}
{{include file="field_input.tpl" field=$mail_user}}
{{include file="field_password.tpl" field=$mail_pass}}
{{include file="field_input.tpl" field=$mail_replyto}}
{{include file="field_checkbox.tpl" field=$mail_pubmail}}
{{include file="field_select.tpl" field=$mail_action}}
{{include file="field_input.tpl" field=$mail_movetofolder}}
<div class="settings-submit-wrapper">
<input type="submit" id="mail-submit" name="mail-submit" class="settings-submit" value="{{$submit}}"/>
</div>
</div>
</form>
{{/if}}
{{foreach $connector_settings_forms as $addon => $connector_settings_form}}
<form action="settings/connectors/{{$addon}}" method="post" autocomplete="off">
<input type="hidden" name="form_security_token" value="{{$form_security_token}}">
{{$connector_settings_form nofilter}}
<div class="clear"></div>
</form>
{{/foreach}}

View File

@ -2974,14 +2974,12 @@ details.profile-jot-net[open] summary:before {
.fakelink > h3:before {
padding-right: 10px;
}
.widget.fakelink > h3:before,
.settings-block.fakelink > h3:before {
.widget.fakelink > h3:before {
font-family: ForkAwesome;
content: "\f0da"; /* Right Plain Pointer */
}
.widget > .fakelink > h3:before,
#sidebar-group-header > .fakelink > h3:before,
.settings-block > .fakelink > h3:before {
#sidebar-group-header > .fakelink > h3:before {
font-family: ForkAwesome;
content: "\f0d7"; /* Bottom Plain Pointer */
}

View File

@ -0,0 +1,36 @@
<div class="section-subtitle-wrapper panel-heading" role="tab" id="{{$connector}}-settings-title">
<h2>
<button class="btn-link accordion-toggle{{if !$open}} collapsed{{/if}}" data-toggle="collapse" data-parent="#settings-connectors" href="#{{$connector}}-settings-content" aria-expanded="false" aria-controls="{{$connector}}-settings-content">
<img class="connector{{if !$enabled}}-disabled{{/if}}" src="{{$image}}" /> {{$title}}
</button>
</h2>
</div>
<div id="{{$connector}}-settings-content" class="panel-collapse collapse{{if $open}} in{{/if}}" role="tabpanel" aria-labelledby="{{$connector}}-settings-title">
<div class="panel-body">
{{$html nofilter}}
</div>
<div class="panel-footer">
{{if $submit}}
{{if $submit|is_string}}
<button type="submit" name="{{$connector}}-submit" class="btn btn-primary settings-submit" value="{{$submit}}">{{$submit}}</button>
{{else}}
{{$count = 1}}
{{foreach $submit as $name => $label}}{{if $label}}
{{if $count == 1}}
<button type="submit" name="{{$name}}" class="btn btn-primary settings-submit" value="{{$label}}">{{$label}}</button>
{{/if}}
{{if $count == 2}}
<div class="btn-group" role="group" aria-label="...">
{{/if}}
{{if $count != 1}}
<button type="submit" name="{{$name}}" class="btn btn-default settings-submit" value="{{$label}}">{{$label}}</button>
{{/if}}
{{$count = $count + 1}}
{{/if}}{{/foreach}}
{{if $submit|count > 1}}
</div>
{{/if}}
{{/if}}
{{/if}}
</div>
</div>

View File

@ -1,72 +1,83 @@
<div class="generic-page-wrapper">
<h1>{{$title}}</h1>
{{include file="section_title.tpl" title=$title}}
<p class="connector_statusmsg">{{$diasp_enabled}}</p>
<p class="connector_statusmsg">{{$ostat_enabled}}</p>
<form action="settings/connectors" method="post" autocomplete="off">
<input type="hidden" name="form_security_token" value="{{$form_security_token}}">
<div class="panel-group panel-group-settings" id="settings-connectors" role="tablist" aria-multiselectable="true">
<div class="panel-group panel-group-settings" id="settings" role="tablist" aria-multiselectable="true">
<div class="panel">
<div class="section-subtitle-wrapper panel-heading" role="tab" id="content-settings-title">
<h2>
<button class="btn-link accordion-toggle collapsed" data-toggle="collapse" data-parent="#settings" href="#content-settings-content" aria-expanded="false" aria-controls="content-settings-content">
{{$general_settings}}
</button>
</h2>
<form action="settings/connectors" method="post" autocomplete="off" class="panel">
<input type="hidden" name="form_security_token" value="{{$form_security_token}}">
<div class="section-subtitle-wrapper panel-heading" role="tab" id="content-settings-title">
<h2>
<button class="btn-link accordion-toggle collapsed" data-toggle="collapse" data-parent="#settings-connectors" href="#content-settings-content" aria-expanded="false" aria-controls="content-settings-content">
{{$general_settings}}
</button>
</h2>
</div>
<div id="content-settings-content" class="panel-collapse collapse" role="tabpanel" aria-labelledby="content-settings-title">
<div class="panel-body">
{{include file="field_checkbox.tpl" field=$accept_only_sharer}}
{{include file="field_checkbox.tpl" field=$enable_cw}}
{{include file="field_checkbox.tpl" field=$enable_smart_shortening}}
{{include file="field_checkbox.tpl" field=$simple_shortening}}
{{include file="field_checkbox.tpl" field=$attach_link_title}}
{{include file="field_input.tpl" field=$legacy_contact}}
<p><a href="{{$repair_ostatus_url}}">{{$repair_ostatus_text}}</a></p>
</div>
<div id="content-settings-content" class="panel-collapse collapse" role="tabpanel" aria-labelledby="content-settings">
<div class="panel-body">
{{include file="field_checkbox.tpl" field=$accept_only_sharer}}
{{include file="field_checkbox.tpl" field=$enable_cw}}
{{include file="field_checkbox.tpl" field=$enable_smart_shortening}}
{{include file="field_checkbox.tpl" field=$simple_shortening}}
{{include file="field_checkbox.tpl" field=$attach_link_title}}
{{include file="field_input.tpl" field=$legacy_contact}}
<p><a href="{{$repair_ostatus_url}}">{{$repair_ostatus_text}}</a></p>
</div>
<div class="panel-footer">
<button type="submit" id="general-submit" name="general-submit" class="btn btn-primary" value="{{$submit}}">{{$submit}}</button>
</div>
<div class="panel-footer">
<button type="submit" id="general-submit" name="general-submit" class="btn btn-primary" value="{{$submit}}">{{$submit}}</button>
</div>
</div>
</div>
{{$settings_connectors nofilter}}
</form>
{{if !$mail_disabled}}
<span id="settings_mail_inflated" class="settings-block fakelink" style="display: block;" onclick="openClose('settings_mail_expanded'); openClose('settings_mail_inflated');">
<img class="connector" src="images/mail.png" /><h3 class="settings-heading connector">{{$h_imap}}</h3>
</span>
<div id="settings_mail_expanded" class="settings-block" style="display: none;">
<span class="fakelink" onclick="openClose('settings_mail_expanded'); openClose('settings_mail_inflated');">
<img class="connector" src="images/mail.png" /><h3 class="settings-heading connector">{{$h_imap}}</h3>
</span>
<p>{{$imap_desc nofilter}}</p>
{{include file="field_custom.tpl" field=$imap_lastcheck}}
{{include file="field_input.tpl" field=$mail_server}}
{{include file="field_input.tpl" field=$mail_port}}
{{include file="field_select.tpl" field=$mail_ssl}}
{{include file="field_input.tpl" field=$mail_user}}
{{include file="field_password.tpl" field=$mail_pass}}
{{include file="field_input.tpl" field=$mail_replyto}}
{{include file="field_checkbox.tpl" field=$mail_pubmail}}
{{include file="field_select.tpl" field=$mail_action}}
{{include file="field_input.tpl" field=$mail_movetofolder}}
<form action="settings/connectors" method="post" autocomplete="off" class="panel">
<input type="hidden" name="form_security_token" value="{{$form_security_token}}">
<div class="settings-submit-wrapper">
<input type="submit" id="imap-submit" name="imap-submit" class="settings-submit" value="{{$submit}}" />
<div class="section-subtitle-wrapper panel-heading" role="tab" id="mail-settings-title">
<h2>
<button class="btn-link accordion-toggle collapsed" data-toggle="collapse" data-parent="#settings-connectors" href="#mail-settings-content" aria-expanded="false" aria-controls="mail-settings-content">
<img class="connector" src="images/mail.png" /> {{$h_mail}}
</button>
</h2>
</div>
</div>
<div id="mail-settings-content" class="panel-collapse collapse" role="tabpanel" aria-labelledby="mail-settings-title">
<div class="panel-body">
<p>{{$mail_desc nofilter}}</p>
{{include file="field_custom.tpl" field=$mail_lastcheck}}
{{include file="field_input.tpl" field=$mail_server}}
{{include file="field_input.tpl" field=$mail_port}}
{{include file="field_select.tpl" field=$mail_ssl}}
{{include file="field_input.tpl" field=$mail_user}}
{{include file="field_password.tpl" field=$mail_pass}}
{{include file="field_input.tpl" field=$mail_replyto}}
{{include file="field_checkbox.tpl" field=$mail_pubmail}}
{{include file="field_select.tpl" field=$mail_action}}
{{include file="field_input.tpl" field=$mail_movetofolder}}
</div>
<div class="panel-footer">
<button type="submit" id="mail-submit" name="mail-submit" class="btn btn-primary" value="{{$submit}}">{{$submit}}</button>
</div>
</div>
</form>
{{/if}}
</form>
{{foreach $connector_settings_forms as $addon => $connector_settings_form}}
<form action="settings/connectors/{{$addon}}" method="post" autocomplete="off" class="panel">
<input type="hidden" name="form_security_token" value="{{$form_security_token}}">
{{$connector_settings_form nofilter}}
</form>
{{/foreach}}
</div>
</div>