<commit_before>const faces = require('cool-ascii-faces').faces;
const clipboard = require('electron').clipboard;
const ipc = require('electron').ipcRenderer;
const Config = require('electron-config');
const utils = require('./utils.js');
const conf = new Config();

const $ = document.querySelector.bind(document);
const $$ = document.querySelectorAll.bind(document);

// Read up all the elements
const mainElem = $('.root');
const settingsElem = $('.gear');
const quitElem = $('.quit');
const backElem = $('.back');

// Display all the faces
function renderEmojis() {
  mainElem.innerHTML = faces.map((e, idx) => `<a class="emoji" tabindex="${idx}">${e}</a>`).join('');
}

/**
 * Setup settings page
 */
function setupSettings() {
  const submitFormElem = $('#settings');
  const toggleKeyElem = $('#toggle-key');
  const onoffLogin = $('#onoff-login');
  const btnSaveElem = $('#btn-save');
  toggleKeyElem.value = conf.get('toggleKey') || '';
  submitFormElem.onsubmit = (e) => {
    e.preventDefault();
    ipc.send('set-toggle-key', 'toggleKey', toggleKeyElem.value);

    if (onoffLogin.checked) ipc.send('enable-login');
    else ipc.send('disable-login');
    btnSaveElem.innerHTML = '<i class="fa fa-check-circle-o"></i> Saved';
  };

  // Reset the text of save button when any fields in the form changed
  toggleKeyElem.onkeydown = () => {
    btnSaveElem.innerHTML = 'Save';
  };
  onoffLogin.onchange = () => {
    btnSaveElem.innerHTML = 'Save';
  };
}

renderEmojis();

// Bind onclick to emoji elements
const elems = $$('.emoji');
for (let i = 0; i < elems.length; i++) {
  elems[i].onclick = (e) => {
    clipboard.writeText(e.target.innerHTML);
    ipc.send('hide');
  };
}

// Bind onclick to settings element
settingsElem.onclick = () => {
  mainElem.innerHTML = utils.loadPage('settings');
  backElem.classList.remove('hide');

  setupSettings();
};

// Bind onclick to back element
backElem.onclick = () => {
  backElem.classList.add('hide');
  renderEmojis();
};

quitElem.onclick = () => {
  ipc.send('quit');
};

document.onkeydown = (e) => {
  e.preventDefault();

  switch (e.which || e.keyCode) {
    case 37: // left
      break;
    case 38: // up
      break;
    case 39: // right
      break;
    case 40: // down
      break;
    default: return;
  }
};<commit_msg>Allow focusing an emoji by using arrow keys<commit_after>const faces = require('cool-ascii-faces').faces;
const clipboard = require('electron').clipboard;
const ipc = require('electron').ipcRenderer;
const Config = require('electron-config');
const utils = require('./utils.js');
const conf = new Config();

const $ = document.querySelector.bind(document);
const $$ = document.querySelectorAll.bind(document);

// Read up all the elements
const mainElem = $('.root');
const settingsElem = $('.gear');
const quitElem = $('.quit');
const backElem = $('.back');

// Display all the faces
function renderEmojis() {
  mainElem.innerHTML = faces.map((e, idx) => `<a class="emoji" tabindex="${idx}">${e}</a>`).join('');
}

/**
 * Setup settings page
 */
function setupSettings() {
  const submitFormElem = $('#settings');
  const toggleKeyElem = $('#toggle-key');
  const onoffLogin = $('#onoff-login');
  const btnSaveElem = $('#btn-save');
  toggleKeyElem.value = conf.get('toggleKey') || '';
  submitFormElem.onsubmit = (e) => {
    e.preventDefault();
    ipc.send('set-toggle-key', 'toggleKey', toggleKeyElem.value);

    if (onoffLogin.checked) ipc.send('enable-login');
    else ipc.send('disable-login');
    btnSaveElem.innerHTML = '<i class="fa fa-check-circle-o"></i> Saved';
  };

  // Reset the text of save button when any fields in the form changed
  toggleKeyElem.onkeydown = () => {
    btnSaveElem.innerHTML = 'Save';
  };
  onoffLogin.onchange = () => {
    btnSaveElem.innerHTML = 'Save';
  };
}

renderEmojis();

// Bind onclick to emoji elements
const elems = $$('.emoji');
for (let i = 0; i < elems.length; i++) {
  elems[i].onclick = (e) => {
    clipboard.writeText(e.target.innerHTML);
    ipc.send('hide');
  };
}

// Bind onclick to settings element
settingsElem.onclick = () => {
  mainElem.innerHTML = utils.loadPage('settings');
  backElem.classList.remove('hide');

  setupSettings();
};

// Bind onclick to back element
backElem.onclick = () => {
  backElem.classList.add('hide');
  renderEmojis();
};

quitElem.onclick = () => {
  ipc.send('quit');
};

document.onkeydown = (e) => {
  e.preventDefault();

  const emojiElems = $$('.emoji');
  const focusElem = $('.emoji:focus');
  const firstEmojiElem = $('.emoji:first-child');
  const focusIndex = Array.prototype.indexOf.call(emojiElems, focusElem);

  switch (e.which || e.keyCode) {
    case 37: // left
      // Move to the left if the focus is on the right
      if (focusIndex % 2 !== 0) emojiElems[focusIndex - 1].focus();
      break;
    case 38: // up
      // Jump backward two elements if the element is exist
      if (focusIndex - 2 >= 0) emojiElems[focusIndex - 2].focus();
      break;
    case 39: // right
      // Move to the right if the focus is on the left
      if (focusIndex % 2 === 0) emojiElems[focusIndex + 1].focus();
      break;
    case 40: // down
      // Focus on the first element, if no element was focused
      if (!focusElem) firstEmojiElem.focus();

      // Jump forward two elements if the element is exist
      else if (focusIndex + 2 < emojiElems.length) emojiElems[focusIndex + 2].focus();
      break;
    default: return;
  }
};
{'fraction_non_alphanumeric': 0.1781524926686217, 'fraction_numerical': 0.00531524926686217, 'mean_word_length': 3.555091819699499, 'pattern_counts': {'":': 0, '<': 14, '<?xml version=': 0, '>': 30, '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': '57234', 'n_tokens_mistral': 1804, 'n_tokens_neox': 1760, 'n_words': 438}