diff --git a/package.json b/package.json index 1041664..4b7632b 100644 --- a/package.json +++ b/package.json @@ -26,6 +26,7 @@ }, "dependencies": { "@material/material-color-utilities": "^0.3.0", + "@simonwep/pickr": "^1.9.1", "maska": "^3.0.2", "tom-select": "^2.3.1" } diff --git a/resources/Environment/Page/Error/index.ts b/resources/Environment/Page/Error/index.ts index d3d0cb8..5be6b7a 100644 --- a/resources/Environment/Page/Error/index.ts +++ b/resources/Environment/Page/Error/index.ts @@ -5,16 +5,16 @@ * * @package kzarshenas/crazyphp * @author kekefreedog - * @copyright 2022-2024 Kévin Zarshenas + * @copyright 2022-2023 Kévin Zarshenas */ /** * Dependances */ const css = require("!!css-loader!sass-loader!./style.scss"); -import {Carousel} from "@materializecss/materialize"; +import {Carousel, M} from "@materializecss/materialize"; +import {Crazypage, LoaderPage} from "crazyphp"; const html = require("./template.hbs"); -import {Crazypage} from "crazyphp"; require("./style.scss"); /** @@ -24,7 +24,7 @@ require("./style.scss"); * * @package kzarshenas/crazyphp * @author kekefreedog - * @copyright 2022-2024 Kévin Zarshenas + * @copyright 2022-2023 Kévin Zarshenas */ export default class Home extends Crazypage { @@ -71,7 +71,7 @@ export default class Home extends Crazypage { /** * On Ready * - * @return void + * @returns {void} */ public onReady = ():void => { @@ -80,14 +80,17 @@ export default class Home extends Crazypage { // Init carousel this.initCarousel(); + // Init Index Button + this.initIndexBtn(); + } /** * Init Carousel * - * @return void + * @returns {void} */ - private initCarousel = () => { + private initCarousel = ():void => { // Get error-carousel let errorCarouselEl = document.getElementById("crazy-root"); @@ -96,7 +99,7 @@ export default class Home extends Crazypage { if(errorCarouselEl !== null) // New carousel instance - this.carouselInstance = new Carousel( + this.carouselInstance = new M.Carousel( errorCarouselEl, { fullWidth: true, @@ -107,6 +110,45 @@ export default class Home extends Crazypage { } + /** + * Init Index Btn + * + * @returns {void} + */ + private initIndexBtn = ():void => { + + // Get btn el + let btnEl = document.getElementById("root-btn"); + + // Check el + if(btnEl !== null) + + // Add event on click + btnEl.addEventListener( + "click", + e => { + + e.preventDefault(); + + // Set option + let options:LoaderPageOptions = { + name: "Index", + }; + + // Check ctrl or cmd pressed + if(e.ctrlKey || e.metaKey) + + // Add openInNewTab in options + options["openInNewTab"] = true; + + // Load page (redirection) + new LoaderPage(options); + + } + ); + + } + } /** diff --git a/resources/Environment/Page/Error/template.hbs b/resources/Environment/Page/Error/template.hbs index cb754d1..b85436a 100644 --- a/resources/Environment/Page/Error/template.hbs +++ b/resources/Environment/Page/Error/template.hbs @@ -7,7 +7,7 @@ ! ! @package kzarshenas/crazyphp ! @author kekefreedog - ! @copyright 2022-2024 Kévin Zarshenas + ! @copyright 2022-2023 Kévin Zarshenas !--}} {{!-- Root --}} @@ -16,6 +16,7 @@ {{!-- Static btn --}}
item.startsWith(`${shortLanguage}-`)).shift() ?? ""; + // Get tempShort + let tempLong = window.navigator.languages.at(0); - + // Get temp short + let tempShort = window.navigator.languages.at(1); + + // Check temp long + if(typeof tempLong === "string" && tempLong) + + // Set long + longLanguage = tempLong; + + // Check temp short + if(typeof tempShort === "string" && tempShort) + + // Set short + shortLanguage = tempShort; + + } }else if(["chrome"].includes(currentNavigator)){ diff --git a/src/Front/Library/Utility/Form.ts b/src/Front/Library/Utility/Form.ts index e4687ae..54d30a6 100644 --- a/src/Front/Library/Utility/Form.ts +++ b/src/Front/Library/Utility/Form.ts @@ -15,6 +15,7 @@ import { TomSettings, RecursivePartial } from 'tom-select/dist/types/types'; import {default as PageError} from './../Error/Page'; import {default as UtilityStrings} from './Strings'; import Crazyrequest from '../Crazyrequest'; +import Pickr from '@simonwep/pickr'; import TomSelect from 'tom-select'; import Page from '../Loader/Page'; import { MaskInput } from "maska" @@ -1546,6 +1547,73 @@ export default class Form { ****************************************************** */ + /** + * Init Color Input + * + * @param inputEl + * @returns {void} + */ + private _initColorInput = (inputEl:HTMLSelectElement|HTMLInputElement):void => { + + // Check maska + console.log("color init"); + console.log(inputEl); + + // Check pickr + if(inputEl instanceof HTMLInputElement && "colorPicker" in inputEl.dataset && inputEl.dataset.colorPicker == "pickr"){ + + // Prepare options + let options:Partial = { + el: inputEl, + theme: "colorTheme" in inputEl.dataset && ['classic', 'monolith', 'nano'].includes(inputEl.dataset.colorTheme as string) + ? inputEl.dataset.colorTheme as Pickr.Theme + : 'classic' + , + lockOpacity: "colorOpacity" in inputEl.dataset && ['false', '0', '', 'null'].includes(inputEl.dataset.colorOpacity as string) + ? true + : false + , + swatches: [ + 'rgba(244, 67, 54, 1)', + 'rgba(233, 30, 99, 0.95)', + 'rgba(156, 39, 176, 0.9)', + 'rgba(103, 58, 183, 0.85)', + 'rgba(63, 81, 181, 0.8)', + 'rgba(33, 150, 243, 0.75)', + 'rgba(3, 169, 244, 0.7)', + 'rgba(0, 188, 212, 0.7)', + 'rgba(0, 150, 136, 0.75)', + 'rgba(76, 175, 80, 0.8)', + 'rgba(139, 195, 74, 0.85)', + 'rgba(205, 220, 57, 0.9)', + 'rgba(255, 235, 59, 0.95)', + 'rgba(255, 193, 7, 1)' + ], + components: { + // Main components + preview: true, + opacity: true, + hue: true, + // Input / output Options + interaction: { + hex: true, + rgba: true, + hsla: true, + hsva: true, + cmyk: true, + input: true, + clear: true, + save: true + } + } + }; + + // Simple example, see optional options for more configuration. + const pickr = Pickr.create(options as Pickr.Options); + + } + + } /** * Init Number Input *