Skip to content

Commit

Permalink
Tentative to fix state loading and form enhancement
Browse files Browse the repository at this point in the history
  • Loading branch information
kekefreedog committed Nov 26, 2024
1 parent 843ac75 commit ccc5ff2
Show file tree
Hide file tree
Showing 6 changed files with 182 additions and 101 deletions.
54 changes: 54 additions & 0 deletions resources/Scss/style/enhancement/pickr_materializecss.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,54 @@
/// /// ///
/// Enhancement - Crazy Content
///
/// Pickr ft. Materialize
///
/// @package kzarshenas/crazyphp
/// @author kekefreedog <[email protected]>
/// @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;

}

}

}

91 changes: 47 additions & 44 deletions resources/Scss/style/enhancement/tomselect_materializecss.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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 {

Expand Down Expand Up @@ -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 {

Expand Down
2 changes: 2 additions & 0 deletions resources/Yml/Structure.yml
Original file line number Diff line number Diff line change
Expand Up @@ -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:
Expand Down
81 changes: 33 additions & 48 deletions src/Front/Library/Loader/Page.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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<LoaderPageOptions>
*/
public static loadColorSchema = async(options:LoaderPageOptions):Promise<LoaderPageOptions> => {

// 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;

}

/**
Expand Down Expand Up @@ -675,14 +630,44 @@ export default class Page {
*/
public static applyColorSchema = async(options:LoaderPageOptions):Promise<LoaderPageOptions> => {

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)

Expand Down
34 changes: 32 additions & 2 deletions src/Front/Library/Utility/Form.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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
******************************************************
*/
Expand Down Expand Up @@ -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)

Expand All @@ -1926,9 +1957,8 @@ export default class Form {

}


// Init maska
new TomSelect(inputEl, option);
let selectInstance = new TomSelect(inputEl, option);

}

Expand Down
21 changes: 14 additions & 7 deletions src/Library/State/Page.php
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand Down

0 comments on commit ccc5ff2

Please sign in to comment.