list/list.html at master · centaurreader/list · 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
<!doctype HTML>
<html>
  <head>
    <title>List - centaurreader</title>
    <link rel="stylesheet" href="list.css">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>

  <body>
    <div class="wrap">
      <section>
        <div class="button add-list" data-bind="click: addList"></div>
        <input class="primary-input" id="newNote" type="text" placeholder="Add note to all..." data-bind="event: { blur: addNote }, value: newNote, valueUpdate: 'keyup'">
      </section>
      <!-- ko foreach: lists -->
      <section>
        <h2>
          <input type="text" class="section-title" data-bind="value: name">
          <div class="list-control-strip">
            <div class="button serialize-list" data-bind="click: $root.serializeList"></div>
            <div class="button clear-list" data-bind="click: $root.clearList"></div>
            <div class="button delete-list" data-bind="click: $root.deleteList"></div>
          </div>
        </h2>
        <ul>
          <!-- ko foreach: notes -->
            <li class="note-in-list">
              <input type="text" class="note-in-list-input" data-bind="value: value, valueUpdate: 'keyup', event: { blur: $root.updateStorage }">
              <div class="delete-bug">
                <div class="delete-primary"><div class="delete-list"></div></div>
                <div class="delete-bug-child delete-bug-child-1" data-bind="click: $root.deleteFromList.bind($data, $parent)">1</div>
                <div class="delete-bug-child delete-bug-child-2" data-bind="click: $root.deleteNote">*</div>
              </div>
            </li>
          <!-- /ko -->
        </ul>
        <input type="text" class="new-note-in-list" placeholder="Add note..." data-bind="value: newNote, valueUpdate: 'keyup', attr: { id: 'newListNote' + id }, event: { blur: addNote, keypress: keypressInput }">
      </section>
      <!-- /ko -->
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.3.0/knockout-min.js"></script>
    <script src="app.js"></script>
  </body>
</html>