<commit_before>(function() {
  // refactoring
  function InputElement(option) {
    this.id = option.id;
    this.name = option.name;
    this.listener = option.listener;
    this.element = document.getElementById(this.id);
    this.element.addEventListener('change', this.listener);
  }

  InputElement.prototype.collect = function(target, mapper) {
    var value = this.element.value;

    if (value !== '') {
      if (this.element.type === 'number') {
        value = Number(value);
      }
      mapper = (typeof mapper === 'function') ? mapper : function(a) {return a;};
      target[this.name] = mapper(value);
    }
  };

  InputElement.prototype.dump = InputElement.prototype.collect;

  InputElement.prototype.restore = function(source) {
    if (this.name in source && source[this.name] !== '') {
      this.element.value = source[this.name];
    }
  };

  function TextBox(option) {
    InputElement.call(this, option);
  }

  function SelectBox(option) {
    InputElement.call(this, option);
  }

  function BooleanSelectBox(option) {
    InputElement.call(this, option);
  }

  _inherits(InputElement, TextBox);
  _inherits(InputElement, SelectBox);
  _inherits(InputElement, BooleanSelectBox);

  BooleanSelectBox.prototype.collect = function(target) {
    var value = this.element.value;

    if (value !== '') {
      target[this.name] = (value === 'true');
    }
  };

  BooleanSelectBox.prototype.dump = BooleanSelectBox.prototype.collect;

  function DummyConfig(option) {
    var _listener = option.listener;
    this.basic = new BasicConfig({listener: _listener});
    this.template = new TemplateConfig({listener: _listener});
  }

  function BasicConfig(option) {
    var _listener = option.listener;
    var _name = 'basic';
    var _inputElements = [
      new SelectBox({id: _name + '_template', name: 'template', listener: _listener}),
      new BooleanSelectBox({id: _name + '_reverseArrow', name: 'reverseArrow', listener: _listener}),
      new SelectBox({id: _name + '_orientation', name: 'orientation', listener: _listener}),
      new SelectBox({id: _name + '_mode', name: 'mode', listener: _listener}),
      new TextBox({id: _name + '_author', name: 'author', listener: _listener})
    ];

    this.collect = function(target) {
      _inputElements.forEach(function(inputElement) {
        inputElement.collect(target);
      });
    };
  }

  function TemplateConfig(option) {
    var _listener = option.listener;
    var _name = 'template';
    var _colors = new TextBox({id: _name + '_colors', name: 'colors', listener: _listener});
    var _childOption = {
      parentName: _name,
      listener: _listener
    };
    var _arrow = new ArrowTemplate(_childOption);
    var _branch = new BranchTemplate(_childOption);
    var _commit = new CommitTemplate(_childOption);

    this.collect = function(target) {
      _colors.collect(target, function(text) {
        return text.replace(/ */g, '').split(',');
      });
      _arrow.collect(target);
      _branch.collect(target);
      _commit.collect(target);
    };
  }

  function ArrowTemplate(option) {
    var _parentName = option.parentName;
    var _name = 'arrow';
    var _idPrefix = _parentName + '_' + _name;
    var _listener = option.listener;
    var _inputElements = [
      new TextBox({id: _idPrefix + '_color', name: 'color', listener: _listener}),
      new TextBox({id: _idPrefix + '_size', name: 'size', listener: _listener}),
      new TextBox({id: _idPrefix + '_offset', name: 'offset', listener: _listener})
    ];

    this.collect = function(target) {
      if (!(_name in target)) {
        target[_name] = {};
      }
      _inputElements.forEach(function(inputElement) {
        inputElement.collect(target[_name]);
      });
    };
  }
<commit_msg>refactoring add TemplateColorsConfig<commit_after>(function() {
  // refactoring
  function InputElement(option) {
    this.id = option.id;
    this.name = option.name;
    this.listener = option.listener;
    this.element = document.getElementById(this.id);
    this.element.addEventListener('change', this.listener);
  }

  InputElement.prototype.collect = function(target) {
    var value = this.element.value;

    if (value !== '') {
      if (this.element.type === 'number') {
        value = Number(value);
      }
      target[this.name] = this.mapValue(value);
    }
  };

  InputElement.prototype.mapValue = function(value) {
    return value;
  };

  InputElement.prototype.dump = InputElement.prototype.collect;

  InputElement.prototype.restore = function(source) {
    if (this.name in source && source[this.name] !== '') {
      this.element.value = source[this.name];
    }
  };

  function TextBox(option) {
    InputElement.call(this, option);
  }

  function SelectBox(option) {
    InputElement.call(this, option);
  }

  function BooleanSelectBox(option) {
    InputElement.call(this, option);
  }

  function TemplateColorsConfig(option) {
    InputElement.call(this, option);
  }

  _inherits(InputElement, TextBox);
  _inherits(InputElement, SelectBox);
  _inherits(InputElement, BooleanSelectBox);
  _inherits(InputElement, TemplateColorsConfig);

  BooleanSelectBox.prototype.mapValue = function(value) {
    return value === 'true';
  };

  TemplateColorsConfig.prototype.mapValue = function(value) {
    return value.replace(/ */g, '').split(',');
  };

  function DummyConfig(option) {
    var _listener = option.listener;
    this.basic = new BasicConfig({listener: _listener});
    this.template = new TemplateConfig({listener: _listener});
  }

  function BasicConfig(option) {
    var _listener = option.listener;
    var _name = 'basic';
    var _inputElements = [
      new SelectBox({id: _name + '_template', name: 'template', listener: _listener}),
      new BooleanSelectBox({id: _name + '_reverseArrow', name: 'reverseArrow', listener: _listener}),
      new SelectBox({id: _name + '_orientation', name: 'orientation', listener: _listener}),
      new SelectBox({id: _name + '_mode', name: 'mode', listener: _listener}),
      new TextBox({id: _name + '_author', name: 'author', listener: _listener})
    ];

    this.collect = function(target) {
      _inputElements.forEach(function(inputElement) {
        inputElement.collect(target);
      });
    };
  }

  function TemplateConfig(option) {
    var _listener = option.listener;
    var _name = 'template';
    var _colors = new TemplateColorsConfig({id: _name + '_colors', name: 'colors', listener: _listener});
    var _childOption = {
      parentName: _name,
      listener: _listener
    };
    var _arrow = new ArrowTemplate(_childOption);
    var _branch = new BranchTemplate(_childOption);
    var _commit = new CommitTemplate(_childOption);

    this.collect = function(target) {
      _colors.collect(target);
      _arrow.collect(target);
      _branch.collect(target);
      _commit.collect(target);
    };
  }

  function ArrowTemplate(option) {
    var _parentName = option.parentName;
    var _name = 'arrow';
    var _idPrefix = _parentName + '_' + _name;
    var _listener = option.listener;
    var _inputElements = [
      new TextBox({id: _idPrefix + '_color', name: 'color', listener: _listener}),
      new TextBox({id: _idPrefix + '_size', name: 'size', listener: _listener}),
      new TextBox({id: _idPrefix + '_offset', name: 'offset', listener: _listener})
    ];

    this.collect = function(target) {
      if (!(_name in target)) {
        target[_name] = {};
      }
      _inputElements.forEach(function(inputElement) {
        inputElement.collect(target[_name]);
      });
    };
  }

{'fraction_non_alphanumeric': 0.13987859593560306, 'fraction_numerical': 0.0, 'mean_word_length': 3.393623188405797, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1258786', 'n_tokens_mistral': 2267, 'n_tokens_neox': 2230, 'n_words': 481}