Replaced the use of the "hidden" class with the "hidden" attribute

This commit is contained in:
Alex Tselegidis 2021-11-23 10:06:13 +01:00
parent 633cf0a722
commit 3808185ac9
5 changed files with 47 additions and 35 deletions

View file

@ -57,12 +57,12 @@
<div class="wrapper row">
<div class="col-12 col-sm-3">
<div class="mb-3">
<label for="show-phone-number">
<label class="form-label" for="show-phone-number">
<?= lang('phone_number') ?>
</label>
<button id="show-phone-number" data-field="show_phone_number" type="button"
class="hide-toggle form-control form-sub-button">
<span class="hide-toggle-visible hidden">
<span class="hide-toggle-visible" hidden>
<img src="<?= base_url('assets/img/eye.svg') ?>" alt="eye"/>
<?= lang('visible') ?>
</span>
@ -73,12 +73,12 @@
</button>
</div>
<div class="mb-3">
<label for="show-address">
<label class="form-label" for="show-address">
<?= lang('address') ?>
</label>
<button id="show-address" data-field="show_address" type="button"
class="hide-toggle form-control form-sub-button">
<span class="hide-toggle-visible hidden">
<span class="hide-toggle-visible" hidden>
<img src="<?= base_url('assets/img/eye.svg') ?>" alt="eye"/>
<?= lang('visible') ?>
</span>
@ -89,12 +89,12 @@
</button>
</div>
<div class="mb-3">
<label for="show-city">
<label class="form-label" for="show-city">
<?= lang('city') ?>
</label>
<button id="show-city" data-field="show_city" type="button"
class="hide-toggle form-control form-sub-button">
<span class="hide-toggle-visible hidden">
<span class="hide-toggle-visible" hidden>
<img src="<?= base_url('assets/img/eye.svg') ?>" alt="eye"/>
<?= lang('visible') ?>
</span>
@ -105,12 +105,12 @@
</button>
</div>
<div class="mb-3">
<label for="show-zip-code">
<label class="form-label" for="show-zip-code">
<?= lang('zip_code') ?>
</label>
<button id="show-zip-code" data-field="show_zip_code" type="button"
class="hide-toggle form-control form-sub-button">
<span class="hide-toggle-visible hidden">
<span class="hide-toggle-visible" hidden>
<img src="<?= base_url('assets/img/eye.svg') ?>" alt="eye"/>
<?= lang('visible') ?>
</span>
@ -121,12 +121,12 @@
</button>
</div>
<div class="mb-3">
<label for="show-notes">
<label class="form-label" for="show-notes">
<?= lang('notes') ?>
</label>
<button id="show-notes" data-field="show_notes" type="button"
class="hide-toggle form-control form-sub-button">
<span class="hide-toggle-visible hidden">
<span class="hide-toggle-visible" hidden>
<img src="<?= base_url('assets/img/eye.svg') ?>" alt="eye"/>
<?= lang('visible') ?>
</span>
@ -142,7 +142,7 @@
<div class="mb-3">
<div class="custom-control custom-switch">
<input type="checkbox" class="custom-control-input" id="customer-notifications">
<label class="custom-form-label" for="customer-notifications">
<label class="form-label" class="custom-form-label" for="customer-notifications">
<?= lang('customer_notifications') ?>
</label>
</div>
@ -153,7 +153,7 @@
<div class="mb-3">
<div class="custom-control custom-switch">
<input type="checkbox" class="custom-control-input" id="require-captcha">
<label class="custom-form-label" for="require-captcha">
<label class="form-label" class="custom-form-label" for="require-captcha">
CAPTCHA
</label>
</div>
@ -164,7 +164,7 @@
<div class="mb-3">
<div class="custom-control custom-switch">
<input type="checkbox" class="custom-control-input" id="require-phone-number">
<label class="custom-form-label" for="require-phone-number">
<label class="form-label" class="custom-form-label" for="require-phone-number">
<?= lang('phone_number') ?>
</label>
</div>
@ -175,7 +175,7 @@
<div class="mb-3">
<div class="custom-control custom-switch">
<input type="checkbox" class="custom-control-input" id="display-any-provider">
<label class="custom-form-label" for="display-any-provider">
<label class="form-label" class="custom-form-label" for="display-any-provider">
<?= lang('any_provider') ?>
</label>
</div>

View file

@ -28,7 +28,7 @@ window.BackendCalendarWorkingPlanExceptionsModal = window.BackendCalendarWorking
* Stores the working plan exception changes or inserts a new record.
*/
$('#manage-working-plan-exceptions #save-working-plan-exception').on('click', function () {
$('#manage-working-plan-exceptions .modal-message').addClass('hidden');
$('#manage-working-plan-exceptions .modal-message').prop('hidden', true);
$('#manage-working-plan-exceptions').find('.has-error').removeClass('has-error');
@ -58,7 +58,7 @@ window.BackendCalendarWorkingPlanExceptionsModal = window.BackendCalendarWorking
$('#manage-working-plan-exceptions .modal-message')
.text(EALang.start_date_before_end_error)
.addClass('alert-danger')
.removeClass('hidden');
.prop('hidden', false);
$('#working-plan-exception-start').addClass('has-error');
$('#working-plan-exception-end').addClass('has-error');
@ -76,7 +76,7 @@ window.BackendCalendarWorkingPlanExceptionsModal = window.BackendCalendarWorking
Backend.displayNotification(EALang.working_plan_exception_saved);
// Close the modal modal and update the local provider.
$('#manage-working-plan-exceptions .modal-message').addClass('hidden');
$('#manage-working-plan-exceptions .modal-message').prop('hidden', true);
$('#manage-working-plan-exceptions').modal('hide');
var providerId = $('#working-plan-exception-provider').val();

View file

@ -99,33 +99,45 @@ window.BackendSettingsClientForm = window.BackendSettingsClientForm || {};
* Change the state of the Visible/Hidden button
*/
$('.hide-toggle').on('click', function () {
var $input = $(this);
$input.find('span').toggleClass('hidden');
var $target = $(this);
$target.find('span').each(function (index, span) {
var $span = $(span);
var isHidden = $span.prop('hidden');
$span.prop('hidden', !isHidden);
});
});
/**
* set a Visible/Hidden toggle button to a certain state
*
* @argument $element for which jquery element to set the state for
* @argument isVisible a boolean which is true if the button should display 'visible' and false when the button should display 'hidden'
* Set a Visible/Hidden toggle button to a certain state.
*
* @param {jQuery} $target Target element selector.
* @param {Boolean} isVisible a boolean which is true if the button should display 'visible' and false when the button should display 'hidden'
*/
function setShowToggleValue($element, isVisible) {
if (getShowToggleValue($element) !== isVisible) {
$element.find('span').toggleClass('hidden');
function setShowToggleValue($target, isVisible) {
if (getShowToggleValue($target) !== isVisible) {
$target.find('span').each(function (index, span) {
var $span = $(span);
var isHidden = $span.prop('hidden');
$span.prop('hidden', !isHidden);
});
}
}
/**
* get the Visible/Hidden toggle button
* Get the Visible/Hidden toggle button
*
* @argument $element for which jquery element to set the state for
* @param {jQuery} $target Target element selector.
*
* @return the state of the button. True for visible, false for hidden.
*/
function getShowToggleValue($element) {
var visiblePartArray = $element.find('.hide-toggle-visible');
return !visiblePartArray.hasClass('hidden');
function getShowToggleValue($target) {
var visiblePartArray = $target.find('.hide-toggle-visible');
return !visiblePartArray.prop('hidden');
}
/**

View file

@ -57,7 +57,7 @@
var visiblePartArray = $element.find('.hide-toggle-visible');
var invisiblePartArray = $element.find('.hide-toggle-hidden');
if (!(visiblePartArray.length === 0 || invisiblePartArray.length === 0)) {
if (visiblePartArray.hasClass('hidden')) {
if (visiblePartArray.prop('hidden')) {
//our button is currently invisible
return '0'; //invisible
} else {

View file

@ -50,7 +50,7 @@ $(function () {
$alert
.text('Easy!Appointments has been successfully installed!')
.addClass('alert-success')
.removeClass('hidden');
.prop('hidden', false);
setTimeout(function () {
window.location.href = GlobalVariables.baseUrl + '/index.php/backend';
@ -67,7 +67,7 @@ $(function () {
*/
function validate() {
try {
$alert.removeClass('alert-danger').addClass('hidden');
$alert.removeClass('alert-danger').prop('hidden', true);
$('input').closest('.form-group').removeClass('has-error');
// Check for empty fields.
@ -109,7 +109,7 @@ $(function () {
return true;
} catch (error) {
$alert.addClass('alert-danger').text(error.message).removeClass('hidden');
$alert.addClass('alert-danger').text(error.message).prop('hidden', false);
return false;
}