TweetDeckの画面右下に簡易ToDoアプリを設置するスクリプト

tweetdeck-minitodo.js

(function() {
  function makeEl(tag, id, opts) {
    const el = document.createElement(tag);
    if (id) el.id = id;
    if (opts) {
      opts.class && (el.className = opts.class);
      opts.text && (el.innerText = opts.text);
      if (opts.attrs) {
        Object.keys(opts.attrs).forEach(key => el.setAttribute(key, opts.attrs[key]));
      }
    }
    return el;
  }
  let style = document.head.querySelector('#minitodo-style');
  if (!style) {
    style = makeEl('style', 'minitodo-style');
    document.head.appendChild(style);
  }
  style.innerText = `
    #minitodo {
      position: fixed;
      right: 0;
      bottom: 0;
      background: white;
      display: flex;
      flex-direction: column;
      border: 1px solid #1da1f2;
    }
    #minitodo-taskList {
      flex: 1;
    }
    .minitodo-taskItem {
      color: black;
      display: flex;
      align-items: center;
    }
    .minitodo-taskItem {
      color: black;
      display: flex;
      align-items: center;
    }
    .minitodo-taskItem input[type="checkbox"] {
      margin-left: 2px;
    }
    .minitodo-taskItem .label {
      flex: 1;
    }
    #minitodo-form {
      display: flex;
    }
    #minitodo-inputTaskName {
      flex: 1;
    }
    #minitodo-inputTaskName {
      padding: 0 2px;
      border-radius: 0;
      border-color: #1da1f2;
      background: white;
      color: black;
   }
    #minitodo-btnAddTask {
      border-radius: 0;
      padding: 0 4px;
      background: #1da1f2;
      color: white;
    }
  .button {
    color: white;
    background: #1da1f2;
    font-size: small;
    border: 1px solid #1da1f2;
    display: inline-block;
    padding: 2px 3px;
    cursor: default;
    user-select: none;
  }
  `;

  const oldBox = document.querySelector('#minitodo');
  if (oldBox) {
    document.body.removeChild(oldBox);
  }
  const ctnBox = makeEl('div', 'minitodo');
  document.body.appendChild(ctnBox);
  
  const ctnCtrls = makeEl('div', 'minitodo-ctrls');
  const btnDone = makeEl('div', 'minitodo-btnDone', {class: 'button', text: '完了'});
  btnDone.addEventListener('click', () => {
    let i = _tasks.length;
    while(i--) {
      const task = _tasks[i];
      if (task.checkbox.checked) {
        _tasks.splice(i, 1);
        tasks.splice(i, 1);
        ctnTaskList.removeChild(task.el)
      }
    }
  });
  ctnCtrls.appendChild(btnDone);
  ctnBox.appendChild(ctnCtrls);
  
  const tasks = [];
  const _tasks = [];
  function makeTaskEl(task) {
    const ctnTask = makeEl('div', null, {class: 'minitodo-taskItem'});
    const checkbox = makeEl('input', null, {attrs: {type: 'checkbox'}});
    const labelTaskName = makeEl('div', null, {class: 'label', text: task.name});
    ctnTask.appendChild(checkbox);
    ctnTask.appendChild(labelTaskName);
    return [ctnTask, checkbox, labelTaskName];
  }
  function addTask(task) {
    tasks.push(task);
    const [el, checkbox, label] = makeTaskEl(task);
    _tasks.push({el, checkbox, label});
    ctnTaskList.appendChild(el);
  }

  const ctnTaskList = makeEl('div', 'minitodo-taskList');
  ctnBox.appendChild(ctnTaskList);

  const ctnForm = makeEl('div', 'minitodo-form');
  ctnBox.appendChild(ctnForm);

  const inputTaskName = makeEl('input', 'minitodo-inputTaskName');
  const btnAddTask = makeEl('button', 'minitodo-btnAddTask', {text: 'Add'});
  btnAddTask.addEventListener('click', ev => {
    const name = inputTaskName.value;
    if (name && name.length > 0) {
      addTask({name});
      inputTaskName.value = '';
    }
  });
  ctnForm.appendChild(inputTaskName);
  ctnForm.appendChild(btnAddTask);
})()