maket/MaketRandevu
1
1
Fork 0
Code Issues 15 Pull requests Projects Releases 4 Packages Wiki Activity

Create new color selection component.

Browse source
This commit is contained in:
Alex Tselegidis 2022-01-18 18:54:36 +01:00
parent 36cf005da2
commit a72dd9edb5
3 changed files with 193 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

65
application/views/components/color_selection.php Normal file
View file

@ -0,0 +1,65 @@
<?php
/**
* @var string $attributes
*/
?>
<?php section('styles') ?>
<link rel="stylesheet" type="text/css" href="<?= asset_url('assets/css/components/color_selection.css') ?>">
<?php section('styles') ?>
<label class="form-label"><?= lang('color') ?></label>
<div <?= $attributes ?? '' ?> class="color-selection d-flex justify-content-between mb-4">
<button type="button" class="color-selection-option selected" data-value="#4c96cc">
<i class="fas fa-check"></i>
</button>
<button type="button" class="color-selection-option" data-value="#acbefb">
<i class="fas fa-check"></i>
</button>
<button type="button" class="color-selection-option" data-value="#65d8e1">
<i class="fas fa-check"></i>
</button>
<button type="button" class="color-selection-option" data-value="#7cebc1">
<i class="fas fa-check"></i>
</button>
<button type="button" class="color-selection-option" data-value="#54be49">
<i class="fas fa-check"></i>
</button>
<button type="button" class="color-selection-option" data-value="#eddf60">
<i class="fas fa-check"></i>
</button>
<button type="button" class="color-selection-option" data-value="#f3bc7d">
<i class="fas fa-check"></i>
</button>
<button type="button" class="color-selection-option" data-value="#ef8c80">
<i class="fas fa-check"></i>
</button>
<button type="button" class="color-selection-option" data-value="#e0292b">
<i class="fas fa-check"></i>
</button>
<button type="button" class="color-selection-option" data-value="#dfaffe">
<i class="fas fa-check"></i>
</button>
<button type="button" class="color-selection-option" data-value="#e3e3e3">
<i class="fas fa-check"></i>
</button>
</div>
<?php section('scripts') ?>
<script src="<?= asset_url('assets/js/components/color_selection.js') ?>"></script>
<?php section('scripts') ?>

17
assets/css/components/color_selection.scss Normal file
View file

@ -0,0 +1,17 @@
.color-selection {
.color-selection-option {
border: none;
color: white;
width: 32px;
height: 32px;
.fa-check {
display: none;
margin: auto;
}
&.selected .fa-check {
display: block;
}
}
}

111
assets/js/components/color_selection.js Normal file
View file

@ -0,0 +1,111 @@
/* ----------------------------------------------------------------------------
* Easy!Appointments - Online Appointment Scheduler
*
* @package EasyAppointments
* @author A.Tselegidis <alextselegidis@gmail.com>
* @copyright Copyright (c) Alex Tselegidis
* @license https://opensource.org/licenses/GPL-3.0 - GPLv3
* @link https://easyappointments.org
* @since v1.5.0
* ---------------------------------------------------------------------------- */
/**
* Color selection component.
*
* This module implements the color selection functionality.
*/
App.Components.ColorSelection = (function () {
/**
* Event: Color Selection Option "Click"
*
* @param {jQuery.Event} event
*/
function onColorSelectionOptionClick(event) {
const $target = $(event.currentTarget);
const $colorSelection = $target.closest('.color-selection');
$colorSelection.find('.color-selection-option.selected').removeClass('selected');
$target.addClass('selected');
}
/**
* Get target color.
*
* @param {jQuery} $target Container element ".color-selection" selector.
*/
function getColor($target) {
return $target.find('.color-selection-option.selected').data('value');
}
/**
* Set target color.
*
* @param {jQuery} $target Container element ".color-selection" selector.
* @param {String} color Color value.
*/
function setColor($target, color) {
$target
.find('.color-selection-option')
.removeClass('selected')
.each((index, colorSelectionOptionEl) => {
var $colorSelectionOption = $(colorSelectionOptionEl);
if ($colorSelectionOption.data('value') === color) {
$colorSelectionOption.addClass('selected');
return false;
}
});
}
/**
* Disable the color selection for the target element.
*
* @param {jQuery} $target
*/
function disable($target) {
$target.find('.color-selection-option').prop('disabled', true).removeClass('selected');
$target.find('.color-selection-option:first').addClass('selected');
}
/**
* Enable the color selection for the target element.
*
* @param {jQuery} $target
*/
function enable($target) {
$target.find('.color-selection-option').prop('disabled', false);
}
function applyBackgroundColors() {
$(document)
.find('.color-selection-option')
.each((index, colorSelectionOptionEl) => {
const $colorSelectionOption = $(colorSelectionOptionEl);
const color = $colorSelectionOption.data('value');
$colorSelectionOption.css('background-color', color);
});
}
/**
* Initialize the module.
*/
function initialize() {
$(document).on('click', '.color-selection-option', onColorSelectionOptionClick);
applyBackgroundColors();
}
document.addEventListener('DOMContentLoaded', initialize);
return {
disable,
enable,
getColor,
setColor,
initialize
};
})();