CloudNote/index.html at main · tasmon/CloudNote · GitHub

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
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=240, height=320, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>Notes</title>
  <link rel="icon" type="image/png" href="icon.png">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header>CloudNote</header>

  <section id="app">
    <ul class="note-list" id="note-list"></ul>
    <p class="empty-state" id="empty-state" hidden>No notes yet.<br>Press Menu &gt; New Note to add one.</p>
  </section>

  <footer>
    <span id="softkey-left" class="softkey"></span>
    <span id="softkey-center" class="softkey"></span>
    <span id="softkey-right" class="softkey"></span>
  </footer>

  <script src="app.js"></script>
  <script>
    setupCommon();
    labelHomeRightSoftKey('Exit');

    var listEl = document.getElementById('note-list');
    var emptyEl = document.getElementById('empty-state');
    var items = [];
    var selectedIndex = 0;

    function openNote(id) {
      window.location.href = 'note.html?id=' + encodeURIComponent(id);
    }

    function render() {
      var settings = loadSettings();
      var notes = sortNotes(loadNotes(), settings.sort);
      listEl.innerHTML = '';
      items = [];

      if (notes.length === 0) {
        emptyEl.hidden = false;
        return;
      }
      emptyEl.hidden = true;

      notes.forEach(function (note, i) {
        var li = document.createElement('li');
        var btn = document.createElement('button');
        btn.type = 'button';
        btn.className = 'note-item';
        btn.setAttribute('data-id', note.id);

        var title = document.createElement('span');
        title.className = 'note-title';
        title.textContent = note.title && note.title.trim() ? note.title : '(Untitled note)';

        var snippet = document.createElement('span');
        snippet.className = 'note-snippet';
        snippet.textContent = (note.body || '').replace(/\s+/g, ' ').trim().slice(0, 60);

        var date = document.createElement('span');
        date.className = 'note-date';
        date.textContent = formatDate(note.updatedAt);

        btn.appendChild(title);
        btn.appendChild(snippet);
        btn.appendChild(date);
        btn.addEventListener('click', function () { openNote(note.id); });

        li.appendChild(btn);
        listEl.appendChild(li);
        items.push(btn);
      });

      selectedIndex = Math.min(selectedIndex, items.length - 1);
      focusSelected();
    }

    function focusSelected() {
      items.forEach(function (el, i) {
        el.classList.toggle('focused', i === selectedIndex);
      });
      if (items[selectedIndex]) items[selectedIndex].focus();
    }

    window.addEventListener('keydown', function (e) {
      if (items.length === 0) return;
      if (e.key === 'ArrowDown') {
        e.preventDefault();
        selectedIndex = (selectedIndex + 1) % items.length;
        focusSelected();
      } else if (e.key === 'ArrowUp') {
        e.preventDefault();
        selectedIndex = (selectedIndex - 1 + items.length) % items.length;
        focusSelected();
      }
    });

    function openMenu() {
      showOptionsMenu([
        { label: 'New Note', action: function () { window.location.href = 'note.html'; } },
        { label: 'Settings', action: function () { window.location.href = 'settings.html'; } },
        { label: 'Backup & Restore', action: function () { window.location.href = 'backup.html'; } },
        { label: 'Help', action: function () { window.location.href = 'help.html'; } },
        { label: 'About', action: function () { window.location.href = 'about.html'; } }
      ]);
    }

    bindLeftSoftKey(openMenu, 'Menu');
    document.getElementById('softkey-center').textContent = 'Open';
    document.getElementById('softkey-center').addEventListener('click', function () {
      if (items[selectedIndex]) items[selectedIndex].click();
    });

    render();
  </script>
</body>
</html>