Skip to content

Commit

Permalink
update deps
Browse files Browse the repository at this point in the history
  • Loading branch information
@thednp
thednp committed Sep 10, 2023
1 parent e8c9627 commit 3cceafa
Show file tree
Hide file tree
Showing 6 changed files with 12,810 additions and 12,525 deletions.
54 changes: 9 additions & 45 deletions docs/dev.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,11 +46,14 @@ <h2>Regular Input</h2>
<button class="btn-appearance switch" id="rtlSwitch" title="Switch language direction" aria-label="Right To Left Languages Testing">RTL</button>
<div class="row">
<div class="col">
<label for="picker31">Accent Colour</label>
<div class="color-picker">
<input type="text" name="picker31" id="picker31" class="color-preview btn-appearance" autocomplete="off" spellcheck="false"
<form action="">
<label for="picker31">Accent Colour</label>
<input type="text" value="" placeholder="type in"/>
<div class="color-picker">
<input type="text" name="picker31" id="picker31" class="color-preview btn-appearance" autocomplete="off" spellcheck="false"
placeholder="Définir la couleur au format HSL" value="red" data-format="rgb" data-color-presets='{"hue": 0, "hueSteps": 12, "lightSteps": 10, "saturation": 85}'>
</div>
</div>
</form>
<ul class="mb-5">
<li>manually initialized via JavaScript;</li>
<li><code>componentLabels</code> option is default;</li>
Expand Down Expand Up @@ -134,12 +137,8 @@ <h2>Regular Input</h2>
<!-- <script src="./js/color-picker.js"></script> -->
<script type="module">
import ColorPicker from '../src/ts';
// import './js/script';
// window.ColorPicker = ColorPicker;

const [picker31, picker0, picker1, picker2, picker3] = document.querySelectorAll('input');
const [picker4, picker5, picker6, picker7] = [...document.querySelectorAll('color-picker')].map(c => c.querySelector('input'));

const [picker31, picker0, picker1, picker2, picker3] = document.querySelectorAll('.color-picker input');

const picker31Instance = new ColorPicker(picker31, {
// colorPresets: bootstrapColors,
Expand Down Expand Up @@ -179,7 +178,7 @@ <h2>Regular Input</h2>
[...document.querySelectorAll(selector)].forEach(init);

const favicon = document.getElementById('favicon');
const CPs = [...document.querySelectorAll('input')]
const CPs = [...document.querySelectorAll('.color-picker input')]
.filter(x=>ColorPicker.getInstance(x) || ColorPicker.getInstance(x));

let changed = 0;
Expand All @@ -206,41 +205,6 @@ <h2>Regular Input</h2>
changed = 1;
console.log(`The "colorpicker.change" event has fired for <color-picker id="picker3"> with new value: ${target.value}\nThis listener is set to fire *only* once for performance reasons.`);
}

if (target === picker4) {
if (target.value === 'revert') {
document.body.style.setProperty('--body-bg', '');
document.body.style.setProperty('--color', '');
document.body.style.setProperty('--heading-color', '');
} else if (target.value === 'transparent') {
document.body.style.setProperty('--body-bg', 'transparent');
document.body.style.setProperty('--color', '');
document.body.style.setProperty('--heading-color', '');
} else {
const lightModifier = cp.isDark ? 35 : -35;
const [cp5, cp6] = [picker5, picker6].map(ColorPickerElement.getInstance);
cp5.color = color.clone().setAlpha(1).lighten(lightModifier);
cp6.color = color.clone().setAlpha(1).spin(60).lighten(1.2 * lightModifier);
cp5.update(); cp6.update();
document.body.style.setProperty('--body-bg', color.toString());
document.body.style.setProperty('--color', cp5.color.toString());
document.body.style.setProperty('--heading-color', cp6.color.toString());
}
}
if (target === picker5) {
document.body.style.setProperty('--color', color.toString());
}
if (target === picker6) {
document.body.style.setProperty('--heading-color', color.toString());
}
if (target === picker7) {
document.body.style.setProperty('--btn-bg-color', color.toString());
if (color.isDark) {
document.body.style.setProperty('--btn-color', 'rgb(255 255 255 / 70%)');
} else {
document.body.style.setProperty('--btn-color', 'rgb(0 0 0 / 70%)');
}
}
const favColor = new ColorPicker.Color({ r: color.r, g: color.g, b: color.b}).toString();
favicon.setAttribute('href', `data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" fill="${favColor}"><path d="M0 32a32 32 0 1 0 64 0a32 32 0 1 0 -64 0M21.83 47.18v-30.3q0 -4.65 2.66 -6.79T33 7.96c2.78 -0.15 5.55 0.42 8.04 1.67c0.23 0.13 0.45 0.28 0.66 0.43q2.85 2.1 2.85 6.9v9.97l-6.37 0.82v-9.22q0 -2.55 -0.98 -3.94t-4.05 -1.39q-2.93 0 -3.86 1.46t-0.94 3.79v27.23q0 1.95 1.05 3.23t3.75 1.27q2.77 0 3.9 -1.27t1.13 -3.23v-8.7l6.38 -0.75v10.95q0 3.98 -2.92 6.15t-8.4 2.17c-2.79 0.17 -5.57 -0.45 -8.03 -1.79C25.01 53.6 24.82 53.47 24.64 53.33q-2.81 -2.17 -2.81 -6.15z"></path></svg>`)
})
Expand Down
Loading

0 comments on commit 3cceafa

Please sign in to comment.