/*

​

Есть компонент для ведения заметок, редактирование по клику на текст.

​

Задача: отрефактировать код без использования сторонних библиотек.

Исправить баги, улучшить качество, maintainability, читабельность.

CSS писать не нужно.

​

Должен получится независимый компонент,

легко встраиваемый в любую вёрстку и не ломающий окружение.

Возможно в будущем захочется сохранять данные на сервер

и как-то ещё расширять возможности компонента.

​

Инструкция:

- Сохранить изначальный код задачи в Secret Gist на Гитхабе.

- Отдельной правкой внести ваши изменения, чтобы можно было посмотреть diff.

- В ответе прислать ссылку на Gist и на JS Bin.

​

Ориентировочное время на выполнение задания — 1 час.

​

*/

​

​

let storage = {

  data: ['foo', 'bar', '', 'foobar'],

  add: function(text) {

    this.data.unshift(text);

    this.save();

  },

  set: function(i, text) {

    this.data[i] = text;

    this.save();

  },

  remove: function(i) {

    this.data.splice(i, 1);

    this.save();

  },

  save: function() {

    window.localStorage.setItem('__notes_storage', JSON.stringify(this.data));

  },

  load: function() {

    this.data = JSON.parse(window.localStorage.getItem('__notes_storage'));

  }

};

​

​

let notes;

function renderNotes() {

  if (notes) {

    notes.parentNode.removeChild(notes);

  }

  notes = document.createElement('div');

  document.body.appendChild(notes);

  storage.data.forEach(renderNote.bind(null, notes));

}

​

​

function addNote() {

  storage.add('');

  renderNotes();

}

​

function removeNote(i) {

  storage.remove(i);

  renderNotes();

}

​

function saveNote(i, e) {

  storage.set(i, e.currentTarget.previousSibling.value);

  renderNotes();

}

​

​

function renderNote(parent, text, i) {

  var note = document.createElement('div');

  parent.appendChild(note);

  var editEl = document.createElement('div');

  editEl.style.display = 'none';

  note.appendChild(editEl);

  var textEl = document.createElement('div');

  var labelText = text;

  if (labelText == '') {

    labelText = '<span style="color: #999; font-style: italic;">[empty]</span>'

  }

  textEl.innerHTML = labelText;

  textEl.addEventListener('click', function() {

    textEl.style.display = 'none';

    editEl.style.display = '';

  });

  note.appendChild(textEl);

​

  var textareaEl = document.createElement('textarea');

  textareaEl.value = text;

  editEl.appendChild(textareaEl);

  var saveEl = document.createElement('button');

  saveEl.appendChild(document.createTextNode('Save'));

  saveEl.addEventListener('click', saveNote.bind(null, i));

  editEl.appendChild(saveEl);

​

  var removeEl = document.createElement('button');

  removeEl.appendChild(document.createTextNode('Remove'));

  removeEl.addEventListener('click', removeNote.bind(null, i));

  editEl.appendChild(removeEl);

}

​

​

function renderCreateButton() {

  let createButtonEl = document.createElement('button');

  createButtonEl.appendChild(document.createTextNode('Add Note'));

  createButtonEl.addEventListener('click', addNote);

  document.body.appendChild(createButtonEl);

}

​

​

renderCreateButton();

renderNotes();