From a72dd9edb5c0439a761f42b5692d9d6ac7bd33f4 Mon Sep 17 00:00:00 2001 From: Alex Tselegidis Date: Tue, 18 Jan 2022 18:54:36 +0100 Subject: [PATCH] Create new color selection component. --- .../views/components/color_selection.php | 65 ++++++++++ assets/css/components/color_selection.scss | 17 +++ assets/js/components/color_selection.js | 111 ++++++++++++++++++ 3 files changed, 193 insertions(+) create mode 100644 application/views/components/color_selection.php create mode 100644 assets/css/components/color_selection.scss create mode 100644 assets/js/components/color_selection.js diff --git a/application/views/components/color_selection.php b/application/views/components/color_selection.php new file mode 100644 index 00000000..4cd60b77 --- /dev/null +++ b/application/views/components/color_selection.php @@ -0,0 +1,65 @@ + + + + + + + + + + +
class="color-selection d-flex justify-content-between mb-4"> + + + + + + + + + + + + + + + + + + + + + +
+ + + + + + diff --git a/assets/css/components/color_selection.scss b/assets/css/components/color_selection.scss new file mode 100644 index 00000000..fbe803eb --- /dev/null +++ b/assets/css/components/color_selection.scss @@ -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; + } + } +} diff --git a/assets/js/components/color_selection.js b/assets/js/components/color_selection.js new file mode 100644 index 00000000..1846dfed --- /dev/null +++ b/assets/js/components/color_selection.js @@ -0,0 +1,111 @@ +/* ---------------------------------------------------------------------------- + * Easy!Appointments - Online Appointment Scheduler + * + * @package EasyAppointments + * @author A.Tselegidis + * @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 + }; +})();