jquery-image-annotate/demo/vanilla-basics.html at 886e2eefb378f10b6f81bfe12e69252fdf2a9bec · flipbit/jquery-image-annotate · 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
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Vanilla JS — Image Annotate</title>
  <link rel="stylesheet" href="../dist/css/annotate.min.css">
  <link rel="stylesheet" href="demo.css">
</head>
<body>
  <nav class="demo-nav">
    <span class="nav-title">Image Annotate</span>
    <a href="index.html">Home</a>
    <a href="jquery-basics.html">jQuery Basics</a>
    <a href="vanilla-basics.html" class="active">Vanilla JS</a>
    <a href="react.html">React</a>
    <a href="vue.html">Vue</a>
    <a href="ajax.html">AJAX</a>
    <a href="multiple-instances.html">Multiple Instances</a>
    <a href="programmatic-api.html">Programmatic API</a>
    <a href="custom-labels.html">Custom Labels</a>
    <a href="scaling.html">Scaling</a>
  </nav>
  <div class="demo-content">
    <h1>Vanilla JS</h1>
    <p>Core API without jQuery. Uses <code>annotate()</code> factory and ES module import.</p>

    <div class="demo-section">
      <h2>Editable</h2>
      <p>Same behavior as the jQuery version — no jQuery dependency required.</p>
      <img id="vanilla-editable-image" src="images/starry-night.jpg" alt="Starry Night" width="960" height="760">
    </div>

    <div class="demo-section">
      <h2>Read-Only</h2>
      <p>Global <code>editable: false</code>. No "Add Note" button, no click-to-edit.</p>
      <img id="vanilla-readonly-image" src="images/starry-night.jpg" alt="Starry Night" width="960" height="760">
    </div>
  </div>

  <script type="module">
    import { annotate } from '../dist/core.js';

    var notes = [
      { top: 80, left: 30, width: 100, height: 350, text: "Cypress tree", id: "note-1", editable: true },
      { top: 20, left: 200, width: 500, height: 200, text: "Swirling sky", id: "note-2", editable: false },
      { top: 500, left: 150, width: 550, height: 200, text: "Village below", id: "note-3", editable: true },
      { top: 30, left: 750, width: 120, height: 120, text: "Crescent moon", id: "note-4", editable: false }
    ];

    window.addEventListener('load', function() {
      var editableImg = document.getElementById('vanilla-editable-image');
      annotate(editableImg, {
        editable: true,
        notes: JSON.parse(JSON.stringify(notes))
      });

      var readonlyImg = document.getElementById('vanilla-readonly-image');
      annotate(readonlyImg, {
        editable: false,
        notes: JSON.parse(JSON.stringify(notes))
      });
    });
  </script>
</body>
</html>