✨colorPicker! 🎨

src/components/colorPicker.js

@@ -0,0 +1,74 @@
+import Selectors from "../utils/selectors";
+
+const generateHueGradient = (colorCount) => {
+ let gradient = [];
+ for (let i = 0; i < colorCount; i++) {
+ gradient.push(
+ `hsl(${i * (360 / colorCount)}, ${getCurrentColor()[1]}%, 50%)`
+ );
+ }
+ return gradient;
+};
+
+const backupColor = "315, 50%";
+
+const getCurrentColor = () => {
+ const rawColor =
+ Selectors().rootStyle.getPropertyValue("--cubiq-accent-color-raw") ||
+ backupColor;
+ const color = rawColor.replace("%", "").split(", ");
+ return color;
+ // ex. returns: [315, 50]
+};
+
+const formatColor = (clr) => {
+ return `${clr[0]}, ${clr[1]}%`;
+};
+
+const setMode = (slider) => {
+ slider.customMode = (slider.customMode % 3) + 1 || 1;
+ if (slider.customMode === 1) {
+ slider.classList.remove("unfolded");
+ } else {
+ slider.classList.add("unfolded");
+ slider.max = slider.customMode === 2 ? 360 : 100;
+ slider.value = getCurrentColor()[slider.customMode - 2];
+ // display either hue or saturation gradients
+ const gradient =
+ "linear-gradient(to right," +
+ (slider.customMode == 2
+ ? `${generateHueGradient(20).join(", ")})`
+ : `hsl(0,0%,50%), hsl(${getCurrentColor()[0]}, 100%, 50%) )`);
+ slider.style.background = gradient;
+ }
+};
+
+const updateTheme = (slider) => {
+ const { customMode, value } = slider;
+ let newTheme = getCurrentColor();
+ // test if custom mode property exists and is not in folded state
+ if (customMode && customMode != 1) {
+ newTheme[customMode - 2] = value;
+ }
+ return newTheme;
+};
+
+export default function ColorPicker() {
+ const colorPicker = document.createElement("input");
+ colorPicker.className = "mySlider";
+ colorPicker.type = "range";
+ colorPicker.value = 0;
+ setMode(colorPicker);
+
+ colorPicker.oninput = function () {
+ const newTheme = formatColor(updateTheme(this));
+ Selectors().rootStyle.setProperty("--cubiq-accent-color-raw", newTheme);
+ };
+
+ // switch the slider modes on double-click
+ colorPicker.ondblclick = function () {
+ setMode(this);
+ };
+
+ return colorPicker;
+}

src/main.js

@@ -1,14 +1,15 @@
+import colorPicker from "./styles/colorPicker.css?inline";
 import vizzyThemer from "./styles/vizzyThemer.css?inline";
+import Selectors from "./utils/selectors";
 import injectVizzard from "./vizzard";
 
 window.addEventListener("load", function () {
- // load custom css
- GM_addStyle(vizzyThemer);
- // trigger vizzard reload
- vizzardReload();
- },
-);
-
+ // load custom css
+ GM_addStyle(vizzyThemer);
+ GM_addStyle(colorPicker);
+ // trigger vizzard reload
+ vizzardReload();
+});
 
 // run function when navigating to a different page
 new MutationObserver(function () {

src/styles/colorPicker.css

@@ -0,0 +1,53 @@
+.mySlider{
+ width: 10px;
+ height: 3px;
+ appearance: none;
+ outline: none;
+ padding: 0;
+ margin: 0;
+ opacity: 0.5;
+ border-radius: 1em;
+ transition: width, opacity, 0.3s ease-in-out;
+}
+
+.mySlider:hover{
+ opacity: 1;
+}
+
+.mySlider.unfolded{
+ width: 10em;
+ opacity: 1;
+}
+
+.mySlider::-webkit-slider-runnable-track {
+ cursor: pointer;
+ transform: scale(1.05);
+ border-radius: 0;
+}
+
+.mySlider::-webkit-slider-thumb {
+ -webkit-appearance: none;
+ appearance: none;
+ width: 10px;
+ aspect-ratio: 1;
+ border-radius: 50%;
+ /* box-shadow: 0px 0px 0px 0px var(--cubiq-accent-dark); */
+ background: var(--cubiq-accent-light);
+ cursor: pointer;
+ box-sizing: border-box;
+ transition: box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+}
+
+.mySlider::-webkit-slider-thumb:hover {
+ box-shadow: 0px 0px 0px 6px rgba(255, 255, 255, 0.16);
+}
+
+.myGradient{
+ /* padding: 0;
+ margin: 0; */
+ align-items: center;
+ justify-content: center;
+ display:flex;
+ border-radius: 1em;
+ border: 1px solid #000;
+}

src/vizzard.js

@@ -4,8 +4,7 @@ import Selectors from "./utils/selectors";
 
 const injectVizzard = () => {
  // append custom elements
- // console.log(selectors().playPanel);
- // selectors().header.appendChild(myButton());
+ Selectors().playPanel.appendChild(ColorPicker());
  console.log("Vizzard Successfully Injected!");
 };