All files / app/assets/javascripts/behaviors secret_values.js

100% Statements 18/18
66.67% Branches 4/6
100% Functions 6/6
100% Lines 18/18

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48                  21x 21x 21x       21x   21x 16x 16x   16x         8x 8x       24x 24x 51x     24x 24x 51x     24x     24x      
import { parseBoolean } from '../lib/utils/common_utils';
import { n__ } from '../locale';
 
export default class SecretValues {
  constructor({
    container,
    valueSelector = '.js-secret-value',
    placeholderSelector = '.js-secret-value-placeholder',
  }) {
    this.container = container;
    this.valueSelector = valueSelector;
    this.placeholderSelector = placeholderSelector;
  }
 
  init() {
    this.revealButton = this.container.querySelector('.js-secret-value-reveal-button');
 
    if (this.revealButton) {
      const isRevealed = parseBoolean(this.revealButton.dataset.secretRevealStatus);
      this.updateDom(isRevealed);
 
      this.revealButton.addEventListener('click', this.onRevealButtonClicked.bind(this));
    }
  }
 
  onRevealButtonClicked() {
    const previousIsRevealed = parseBoolean(this.revealButton.dataset.secretRevealStatus);
    this.updateDom(!previousIsRevealed);
  }
 
  updateDom(isRevealed) {
    const values = this.container.querySelectorAll(this.valueSelector);
    values.forEach((value) => {
      value.classList.toggle('hide', !isRevealed);
    });
 
    const placeholders = this.container.querySelectorAll(this.placeholderSelector);
    placeholders.forEach((placeholder) => {
      placeholder.classList.toggle('hide', isRevealed);
    });
 
    this.revealButton.textContent = isRevealed
      ? n__('Hide value', 'Hide values', values.length)
      : n__('Reveal value', 'Reveal values', values.length);
    this.revealButton.dataset.secretRevealStatus = isRevealed;
  }
}