BookStack Code Mirror - bookstack/blob - resources/js/components/setting-app-color-picker.js

   1 import {Component} from "./component";
   2
   3 export class SettingAppColorPicker extends Component {
   4
   5     setup() {
   6         this.colorInput = this.$refs.input;
   7         this.lightColorInput = this.$refs.lightInput;
   8
   9         this.colorInput.addEventListener('change', this.updateColor.bind(this));
  10         this.colorInput.addEventListener('input', this.updateColor.bind(this));
  11     }
  12
  13     /**
  14      * Update the app colors as a preview, and create a light version of the color.
  15      */
  16     updateColor() {
  17         const hexVal = this.colorInput.value;
  18         const rgb = this.hexToRgb(hexVal);
  19         const rgbLightVal = 'rgba('+ [rgb.r, rgb.g, rgb.b, '0.15'].join(',') +')';
  20
  21         this.lightColorInput.value = rgbLightVal;
  22
  23         const customStyles = document.getElementById('custom-styles');
  24         const oldColor = customStyles.getAttribute('data-color');
  25         const oldColorLight = customStyles.getAttribute('data-color-light');
  26
  27         customStyles.innerHTML = customStyles.innerHTML.split(oldColor).join(hexVal);
  28         customStyles.innerHTML = customStyles.innerHTML.split(oldColorLight).join(rgbLightVal);
  29
  30         customStyles.setAttribute('data-color', hexVal);
  31         customStyles.setAttribute('data-color-light', rgbLightVal);
  32     }
  33
  34     /**
  35      * Covert a hex color code to rgb components.
  36      * @attribution https://stackoverflow.com/a/5624139
  37      * @param {String} hex
  38      * @returns {{r: Number, g: Number, b: Number}}
  39      */
  40     hexToRgb(hex) {
  41         const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
  42         return {
  43             r: result ? parseInt(result[1], 16) : 0,
  44             g: result ? parseInt(result[2], 16) : 0,
  45             b: result ? parseInt(result[3], 16) : 0
  46         };
  47     }
  48
  49 }