diff --git a/resources/Scss/style/enhancement/pickr_materializecss.scss b/resources/Scss/style/enhancement/pickr_materializecss.scss new file mode 100644 index 0000000..86df999 --- /dev/null +++ b/resources/Scss/style/enhancement/pickr_materializecss.scss @@ -0,0 +1,54 @@ +/// /// /// +/// Enhancement - Crazy Content +/// +/// Pickr ft. Materialize +/// +/// @package kzarshenas/crazyphp +/// @author kekefreedog +/// @copyright 2022-2024 Kévin Zarshenas +/// /// /// + +/** + * Adapt button + */ +button.pcr-button { + + // Position + margin-top: 10px; + margin-bottom: 5px; + border-radius: 6px; + + &::before { + + // Border + border-radius: 6px; + + } + +} + +/** + * Editor + */ +.pcr-app { + + /* Background */ + background: var(--md-sys-color-on-tertiary); + + /* Dimension */ + border-radius: 6px; + + /* Interaction */ + .pcr-interaction { + + /* Result */ + .pcr-result { + + height: 25px; + + } + + } + +} + diff --git a/resources/Scss/style/enhancement/tomselect_materializecss.scss b/resources/Scss/style/enhancement/tomselect_materializecss.scss index e815eec..a7de5d4 100644 --- a/resources/Scss/style/enhancement/tomselect_materializecss.scss +++ b/resources/Scss/style/enhancement/tomselect_materializecss.scss @@ -58,50 +58,6 @@ } - // Ts Wrapper - .ts-dropdown { - - // Color - background-color: var(--md-sys-color-on-tertiary); - - // Position - margin-top: 0px; - - // Shadow - box-shadow: 0 2px 2px #00000024,0 3px 1px -2px #0000001f,0 1px 5px #0003; - - // Dimension - border: none; - - // Children - - // Items - .create, .no-results, .option { - - // Font - font-size: 16px; - line-height: 22px; - - // Color - color: var(--md-sys-color-primary); - background-color: transparent; - - // Dimension - padding: 14px 16px; - - // Display - display: block; - - &.active { - - background-color: var(--md-sys-color-tertiary-container); - - } - - } - - } - // Focus &.focus { @@ -162,6 +118,53 @@ } +// Ts Wrapper +.ts-dropdown { + + // Depth + z-index: 9999; + + // Color + background-color: var(--md-sys-color-on-tertiary); + + // Position + margin-top: 0px; + + // Shadow + box-shadow: 0 2px 2px #00000024,0 3px 1px -2px #0000001f,0 1px 5px #0003; + + // Dimension + border: none; + + // Children + + // Items + .create, .no-results, .option { + + // Font + font-size: 16px; + line-height: 22px; + + // Color + color: var(--md-sys-color-primary); + background-color: transparent; + + // Dimension + padding: 14px 16px; + + // Display + display: block; + + &.active { + + background-color: var(--md-sys-color-tertiary-container); + + } + + } + +} + // Label select.tomselected + div.ts-wrapper + label { diff --git a/resources/Yml/Structure.yml b/resources/Yml/Structure.yml index ae7dccd..b4e2013 100644 --- a/resources/Yml/Structure.yml +++ b/resources/Yml/Structure.yml @@ -167,6 +167,8 @@ Structure: source: "@crazyphp_root/resources/Scss/style/enhancement/form_materializecss.scss" tomselect_materializecss.scss: source: "@crazyphp_root/resources/Scss/style/enhancement/tomselect_materializecss.scss" + pickr_materializecss.scss: + source: "@crazyphp_root/resources/Scss/style/enhancement/pickr_materializecss.scss" partial: files: _preloader_linear_indeterminate.scss: diff --git a/src/Front/Library/Loader/Page.ts b/src/Front/Library/Loader/Page.ts index 8006312..d77ae04 100644 --- a/src/Front/Library/Loader/Page.ts +++ b/src/Front/Library/Loader/Page.ts @@ -47,10 +47,6 @@ export default class Page { // Load Pre Action Page.loadUrl ) - .then( - // Load Pre Action - Page.loadColorSchema - ) .then( // Open New Tab (if needed) Page.openNewTab @@ -368,47 +364,6 @@ export default class Page { // Return options return options; - } - - /** - * load Color Schema - * - * Load url from name and arguments - * - * @param options:LoaderPageOptions Options with all page details - * @return Promise - */ - public static loadColorSchema = async(options:LoaderPageOptions):Promise => { - - // Get state - let state = await options.scriptLoaded?.loadPageState(); - - // Get source color - if(typeof state?._ui?.materialDynamicColors?.source == "string" && state._ui?.materialDynamicColors.source){ - - // Get source - let source = state?._ui?.materialDynamicColors?.source; - - // Check source - if(source){ - - // Get colors - let colors = new Crazycolor(source); - - // Push to color - // @ts-ignore - options.color = colors; - - // Set status - options = this.setStatus(options, "hasColor", true); - - } - - } - - // Return options - return options; - } /** @@ -675,14 +630,44 @@ export default class Page { */ public static applyColorSchema = async(options:LoaderPageOptions):Promise => { - console.log(options); - // Get document let doc = document; + // Set state + let state = {...await options.scriptLoaded?.loadPageState()}; + + // Get potential overide source + // @ts-ignore + let newSource = state._ui?.materialDynamicColors?.source; + + // Get body + let bodyEl = document.body; + + // Check new source + if(typeof newSource === "string" && newSource){ + + // Set dataset + bodyEl.dataset.crazyColor = newSource; + + + }else + // Check if default + if("defaultColor" in bodyEl.dataset){ + + // Get default color + let defaultSource = bodyEl.dataset.defaultColor; + + // Check defaultSource + if(typeof defaultSource === "string" && defaultSource) + + // Set crazy color + bodyEl.dataset.crazyColor = defaultSource; + + } + // Scan crazy color let result = Crazycolor.scanCrazyColor(doc); - + // Check if(result?.length) diff --git a/src/Front/Library/Utility/Form.ts b/src/Front/Library/Utility/Form.ts index 6d31131..2205889 100644 --- a/src/Front/Library/Utility/Form.ts +++ b/src/Front/Library/Utility/Form.ts @@ -1312,6 +1312,33 @@ export default class Form { } + /** + * Set Color + * + * Set text in item + * + * @param itemEl:HTMLElement + * @param value:string + * @return void + */ + private colorSet = (itemEl:HTMLElement, value:string, valuesID:string|Object|null):void => { + + // Check itemEl + if(itemEl.tagName == "INPUT"){ + + // Set value + itemEl.setAttribute("value", value); + + // Dispatch event change + itemEl.dispatchEvent(new Event("change")); + + // Set id + this._setID(valuesID, itemEl); + + } + + } + /** Private methods | Set value | Set Custom Data ****************************************************** */ @@ -1900,9 +1927,13 @@ export default class Form { persist: false, createOnBlur: true, create: true, + dropdownParent: "body", plugins: {} }; + // Append create + option.create = false; + // Check clear if(inputEl.dataset && "selectClear" in inputEl.dataset) @@ -1926,9 +1957,8 @@ export default class Form { } - // Init maska - new TomSelect(inputEl, option); + let selectInstance = new TomSelect(inputEl, option); } diff --git a/src/Library/State/Page.php b/src/Library/State/Page.php index 2cdcaf1..a5a1a97 100644 --- a/src/Library/State/Page.php +++ b/src/Library/State/Page.php @@ -26,6 +26,7 @@ use CrazyPHP\Library\Form\Query; use CrazyPHP\Core\ApiResponse; use CrazyPHP\Core\Controller; +use CrazyPHP\Library\String\Color; use CrazyPHP\Model\Context; use CrazyPHP\Model\Env; use Exception; @@ -88,17 +89,23 @@ public function __construct(array $options = []){ */ public function pushColorSchema(string $source = ""):Page { + # Get color source + $appSource = Config::getValue("Style.materialDynamicColors.source"); + # Check source - if(!$source) + if(!$source){ + + # Get url parameter + $source = $appSource; - # Get materialDynamicColors - $materialDynamicColors = Config::getValue("Style.materialDynamicColors.source"); + }else + # Check source + if($source && Color::isValid($source)){ - # Check materialDynamicColors - if($materialDynamicColors) + # Set language in response + $this->pushUiContent("materialDynamicColors.source", $source); - # Push into ui content - $this->pushUiContent("materialDynamicColors.source", $materialDynamicColors); + } # Return self return $this;