Create new color selection component.
This commit is contained in:
Alex Tselegidis
parent
36cf005da2
commit
a72dd9edb5
|
|
@ -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') ?>
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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
|
||||
};
|
||||
})();
|
||||
Loading…
Reference in New Issue