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