Skip to content

Commit

Permalink
added pickr color picker
Browse files Browse the repository at this point in the history
  • Loading branch information
michaelsboost committed Sep 6, 2024
1 parent ed4405d commit 680e6a9
Show file tree
Hide file tree
Showing 10 changed files with 781 additions and 530 deletions.
Binary file modified .DS_Store
View file
Binary file not shown.
994 changes: 526 additions & 468 deletions dist/App.min.js
View file

Large diffs are not rendered by default.

8 changes: 4 additions & 4 deletions dist/App.min.js.map
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion dist/style.css
View file

Large diffs are not rendered by default.

6 changes: 4 additions & 2 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,10 +23,12 @@
<link rel="shortcut icon" type="image/x-icon" href="imgs/logo.svg">
<link rel="icon" type="image/svg+xml" href="imgs/logo.svg">
<link rel="apple-touch-icon" href="imgs/logo.svg">
<!-- <link rel="stylesheet" href="libraries/pico/pico.classless.min.css">
<!-- <link rel="stylesheet" href="libraries/pico/pico.classless.css">
<script src="libraries/tailwind/tailwind-mod-noreset.min.js"></script>
<script src="libraries/font-awesome/js/all.min.js"></script> -->
<style>.pickr *,.pcr-app *{all:unset;}.pcr-app input:not([type=checkbox]){width:unset;}.pcr-app[data-theme='nano']{display:none;width:100%;max-width:100%;}.pcr-app.visible{display:block;}</style>
<link rel="stylesheet" href="dist/style.css">
<style>.pickr>.pcr-button{width:100%;}</style>
</head>
<body>
<header class="absolute inset-0 text-center grid grid-cols-1 items-center">
Expand All @@ -38,7 +40,7 @@ <h2 class="text-[#ffffff00]">Design with Freedom, Build with Power. Free for per

<div id="app" class="absolute inset-0"></div>

<!-- <script src="src/App.js"></script> -->
<!-- <script src="src/concat.js" type="module"></script> -->
<script src="dist/App.min.js"></script>
<script src="https://storage.googleapis.com/workbox-cdn/releases/6.4.1/workbox-sw.js"></script>
<script>
Expand Down
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
"type": "module",
"scripts": {
"build:css": "postcss src/style.css -o dist/style.css",
"build:js": "esbuild src/App.js --bundle --minify --sourcemap --outfile=dist/App.min.js",
"build:js": "esbuild src/concat.js --bundle --minify --sourcemap --outfile=dist/App.min.js",
"build": "npm run build:css && npm run build:js",
"serve": "http-server -c-1 -p 8081"
},
Expand Down
148 changes: 121 additions & 27 deletions src/App-backup.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -88,6 +88,7 @@ window.generateId = () => {
return id;
}
let d = {
doNotRender: null,
shiftKey: null,
cmdKey: null,
iframeSize: null,
Expand Down Expand Up @@ -2246,7 +2247,7 @@ function Inspector() {
let styles = '';

// Regular expression to detect color values
const colorRegex = /^(#[0-9a-f]{3,6}|rgba?(.+)|hsla?(.+))$/i;
const colorRegex = /^(#[0-9a-f]{3,6}|rgb?(.+)|hsl?(.+)|hsv?(.+))$/i;

// List of properties that should use a textarea
const complexProperties = [
Expand Down Expand Up @@ -2353,7 +2354,7 @@ function Inspector() {
styles += `
<input class="${inputClass}" style="${inputStyle}"
type="text" value="${value}"
oninput="${selector} = this.value; saveState();">
oninput="${selector} = this.value;" onfocus="saveState()" onblur="saveState()">
`;
}

Expand All @@ -2370,29 +2371,31 @@ function Inspector() {
${prop}
</button>
<textarea class="${textareaClass}" style="${textareaStyle}"
oninput="${selector} = this.value; saveState();">${value}</textarea>`;
oninput="${selector} = this.value;" onfocus="saveState()" onblur="saveState()">${value}</textarea>`;
} else {
// Check if the property is a color property
const isColorProperty = colorRegex.test(value) || value === null;
const inputType = isColorProperty ? 'color' : 'text';
const fallbackColor = isColorProperty && value === null ? '#000000' : value;

// Update the style if the input type is color
const updatedInputStyle = inputType === 'color'
? `${inputStyle} height: 2rem; margin: 0; padding: .25rem; overflow: hidden;`
: inputStyle;

styles += `
<button
class="${buttonItemClass.split('capitalize').join('')}"
style="color: unset;"
onclick="
styleModal('${key}', '${prop}', '${value}'${detect ? `, '${detect}'` : ''});
class="${buttonItemClass.split('capitalize').join('')}"
style="color: unset;"
onclick="
styleModal('${key}', '${prop}', '${value}'${detect ? `, '${detect}'` : ''});
">
${prop}
</button>
<input class="${inputClass}" style="${updatedInputStyle}" type="${inputType}" value="${fallbackColor}"
oninput="${selector} = this.value; saveState();">`;
<input
class="${inputClass}"
style="${inputStyle}"
type="text"
value="${fallbackColor}"
${isColorProperty ? `data-iscolor="${value}"` : ''}
oninput="${selector} = this.value;"
onfocus="saveState()"
onblur="saveState()"
/>`;
}
});

Expand All @@ -2403,7 +2406,7 @@ function Inspector() {
let styles = '';

// Regular expression to detect color values
const colorRegex = /^(#[0-9a-f]{3,6}|rgba?(.+)|hsla?(.+))$/i;
const colorRegex = /^(#[0-9a-f]{3,6}|rgb?(.+)|hsl?(.+)|hsv?(.+))$/i;

// Iterate over each root variable
Object.keys(project.css.rootVariables).forEach(key => {
Expand All @@ -2412,18 +2415,12 @@ function Inspector() {

// Determine input type based on value
const isColor = colorRegex.test(value);
const hasAlpha = value.includes('rgba') || value.includes('hsla');
const isNumeric = !isNaN(parseFloat(value)) && isFinite(value);

let inputType = 'text';
let inputStyle = 'height: auto; margin: 0; padding: .4rem;';

if (isNumeric) {
inputType = 'number';
} else if (isColor && !hasAlpha) {
inputType = 'color';
inputStyle = 'height: 2rem; margin: 0; padding: .25rem; overflow: hidden;';
}
if (isNumeric) inputType = 'number';

// Use processStyles function to generate styles for root variables
styles += `
Expand All @@ -2437,7 +2434,8 @@ function Inspector() {
class="${inputClass}"
style="${inputStyle}"
type="${inputType}"
value="${value}"
value="${value}"
${isColor ? `data-iscolor="${value}"` : ''}
oninput="${selector} = this.value;"
onfocus="saveState()"
onblur="saveState()"
Expand Down Expand Up @@ -3559,6 +3557,7 @@ window.Blocks = () => {
window.App = {
initialRender: true,
render(container) {
if (data.doNotRender) return;
const buttonClass = "border-0 bg-transparent py-1";
// Calculate zoom transform based on viewport size and iframe size
const size = data.selectedSize;
Expand Down Expand Up @@ -3778,10 +3777,72 @@ window.App = {
return false;
}

const oldPickers = document.querySelectorAll('.pcr-app');
if (oldPickers) oldPickers.forEach(picker => picker.remove());

// Compare and update only the changed parts
const currentDoc = element.firstElementChild;
const newDoc = doc.body.firstElementChild;
diffNodes(currentDoc, newDoc);

// Select all elements with the data-color-picker attribute
const pickers = document.querySelectorAll('[data-iscolor]');

if (pickers) {
pickers.forEach((picker, index) => {
// Extract the initial color value from the data-iscolor attribute
const initialColor = picker.getAttribute('data-iscolor');

const pickr = Pickr.create({
el: picker,
theme: 'nano', // or 'monolith', or 'nano'
default: initialColor,
inline: true,
components: {
// Main components
preview: true,
opacity: true,
hue: true,

// Input / output Options
interaction: {
input: true
}
}
});

// Set the initial color
pickr.setColor(initialColor);

// Update color display and state on color change
pickr.on('show', () => {
data.doNotRender = true;
})
.on('change', color => {
const colorString = color.toHEXA().toString();

// Get the oninput attribute value
const onInputCode = pickers[index].getAttribute('oninput');

if (onInputCode) {
// Replace 'this.value' with the actual color string
const updatedCode = onInputCode.replace(/this.value/g, `"${colorString}"`);

// Create a new function using the Function constructor and execute it
const func = new Function(updatedCode);
func(); // Execute the dynamically created function
}

// Apply color
pickr.applyColor();
})
.on('hide', () => {
data.doNotRender = null;
pickr.applyColor();
App.render('#app');
})
});
}
}
}

Expand Down Expand Up @@ -7726,6 +7787,40 @@ window.emptyStorage = () => {
}
});
}
window.clearAllStorage = () => {
// Clear local storage
localStorage.clear();

// Clear session storage
sessionStorage.clear();

// Clear all cookies
document.cookie.split(";").forEach(function(cookie) {
const cookieName = cookie.split("=")[0].trim();
document.cookie = cookieName + '=;expires=Thu, 01 Jan 1970 00:00:00 UTC;path=/';
});

// Clear all service workers
if ('serviceWorker' in navigator) {
navigator.serviceWorker.getRegistrations().then(function(registrations) {
registrations.forEach(function(registration) {
registration.unregister();
});
});
}

// Clear all caches
if ('caches' in window) {
caches.keys().then(function(names) {
names.forEach(function(name) {
caches.delete(name);
});
});
}

// Reload the page
location.reload();
}
window.importProject = () => {
Modal.render({
title: "Are you sure you want to load a new project?",
Expand Down Expand Up @@ -8935,9 +9030,8 @@ window.diffNodes = (oldNode, newNode) => {
return;
}

// Check for data-ignore attribute
if (oldNode.hasAttribute && oldNode.hasAttribute('data-ignore') ||
newNode.hasAttribute && newNode.hasAttribute('data-ignore')) {
// Skip nodes that are marked with `data-ignore-diff`
if (oldNode?.getAttribute && oldNode.hasAttribute('data-ignore-diff')) {
return;
}

Expand Down
Loading

0 comments on commit 680e6a9

Please sign in to comment.