markup.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>JS annotation markup</title>
    <link rel="stylesheet" href="css/annotator.css">
  </head>

  <body>
    <header>
      <h1>Javascript annotation service test</h1>
    </header>

    <div id="airlock">
      <div class="annotator-wrapper">
        <p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>

        <h2>Header Level 2</h2>

        <ol>
           <li>Lorem <span class="annotator-hl">ipsum dolor sit amet, consectetuer adipiscing</span> elit.</li>
           <li>Aliquam tincidunt mauris eu risus.</li>
        </ol>

        <blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote>

        <h3>Header Level 3</h3>

        <ul>
           <li id="listone">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
           <li id="listtwo">Aliquam tincidunt mauris eu risus.</li>
        </ul>

        <pre><code>
        #header h1 a {
          display: block;
          width: 300px;
          height: 80px;
        }
        </code></pre>

        <div class="annotator-adder"><button>Annotate</button></div>
        <div class="annotator-outer annotator-viewer">
          <ul class="annotator-widget annotator-listing">
            <li class="annotator-annotation annotator-item">
              <span class="annotator-controls">
                <button class="annotator-edit">Edit</button>
                <button class="annotator-delete">Delete</button>
              </span>
              <div>
                This is a comment on this annotation text. This annotation
                has multiple comments.
              </div>
            </li>
            <li class="annotator-annotation annotator-item">
              <span class="annotator-controls">
                <button class="annotator-edit" disabled>Edit</button>
                <button class="annotator-delete">Delete</button>
              </span>
              <div>
                This is a <a href="comment">Comment</a> on this annotation text. This annotation
                has multiple comments.
                <ul>
                  <li>A simple list item.</li>
                  <li>A simple list item.</li>
                </ul>
              </div>
              <div class="plugin annotator-author">
                By Joe Bloggs
              </div>
              <div class="plugin annotator-tags">
                <span class="annotator-tag">Apple</span>
                <span class="annotator-tag">Oranges</span>
                <span class="annotator-tag">Pears</span>
              </div>
            </li>
          </ul>
        </div>
        <div class="annotator-outer annotator-viewer annotator-right">
          <ul class="annotator-widget annotator-listing">
            <li class="annotator-annotation annotator-item">
              <span class="annotator-controls">
                 <a href="#" class="annotator-link">View as webpage</a>
                 <button class="annotator-edit">Edit</button>
                 <button class="annotator-delete">Delete</button>
               </span>
              <div>
                This is a a a a a a a a a a a a a a a a a a a a a a a a a a comment on this annotation text. This annotation
                has one comment and no plugins.
              </div>
            </li>
          </ul>
        </div>
        <div class="annotator-outer annotator-editor">
          <form class="annotator-widget">
            <ul class="annotator-listing">
              <li class="annotator-item">
                <textarea cols="20" rows="4" placeholder="Comments…"></textarea>
              </li>
              <li class="annotator-item">
                <input id="annotator-field-2" placeholder="Tags…" />
              </li>
              <li class="annotator-item annotator-checkbox">
                <input type="checkbox" id="annotator-field-3"></textarea>
                <label for="annotator-field-3">Anyone can <strong>view</strong> this annotation</label>
              </li>
              <li class="annotator-item annotator-checkbox">
                <input type="checkbox" id="annotator-field-4"></textarea>
                <label for="annotator-field-4">Anyone can <strong>edit</strong> this annotation</label>
              </li>
            </ul>
            <div class="annotator-controls">
              <a href="#cancel" class="annotator-cancel">Cancel</a>
              <a href="#save" class="annotator-save annotator-focus">Save</a>
            </div>
            <span class="annotator-resize"></span>
          </form>
        <div>
      </div>
    </div>

    <div class='annotator-notice'>  
      <p>This is an exciting message with a <a href="#link">Link</a>.</p>
    </div>

    <div class="annotator-filter">
      <strong>Navigate:</strong>
      <span class="annotator-filter-navigation">
        <button class="annotator-filter-previous">Previous</button>
        <button class="annotator-filter-next">Next</button>
      </span>
      <strong>Filter by:</strong>
      <span class="annotator-filter-property annotator-filter-active">
        <label for="annotator-filter-user">User</label>
        <input type="text" id="annotator-filter-user" placeholder="Filter&hellip;" value="alice" />
        <button class="annotator-filter-clear">Clear</button>
      </span>
      <span class="annotator-filter-property">
        <label for="annotator-filter-tag">Tag</label>
        <input type="text" id="annotator-filter-tag" placeholder="Filter by tag&hellip;" value="" />
        <button class="annotator-filter-clear">Clear</button>
      </span>
      <span class="annotator-filter-property">
        <label for="annotator-filter-annotation">Annotation</label>
        <input type="text" id="annotator-filter-annotation" placeholder="Filter by annotation&hellip;" value="" />
        <button class="annotator-filter-clear">Clear</button>
      </span>
    </div>

    <script src="lib/vendor/jquery.js"></script>
    <script>
      (function ($) {
        var base = (function () {
          var wrapper    = $('.annotator-wrapper').offset();
          var annotation = $('.annotator-hl').offset();
          return {
            top:  annotation.top - wrapper.top,
            left: annotation.left - wrapper.left
          };
        }());

        $('.annotator-adder').css({
          top:  base.top,
          left: base.left + ($('.annotator-adder a').width() / 2)
        });

        $('.annotator-viewer').each(function (i) {
          var viewer = $(this);

          viewer.css({
            top:  base.top,
            left: base.left + 50 + (270 * i)
          });
        });

        $('.annotator-editor').each(function (i) {
          var viewer = $(this);

          viewer.css({
            top:  base.top + 280,
            left: base.left
          });
        });

        var mousedown = null
        var editor = $('.annotator-editor');
        var resize = $('.annotator-resize');
        var textarea = resize.parent().find('textarea:first');
        var controls = resize.parent().find('.annotator-controls');
        var throttle = false;

        function onMousedown(e) {
          if (e.target === this) {
            mousedown = {
              element: this,
              top: e.pageY,
              left: e.pageX
            };
            e.preventDefault();
          }
        }

        resize.bind('mousedown', onMousedown);
        controls.bind('mousedown', onMousedown);

        $(window).bind({
          mouseup: function () {
            mousedown = null;
          },
          mousemove: function (e) {
            if (mousedown && throttle === false) {
              var diff = {
                top:  e.pageY - mousedown.top,
                left: e.pageX - mousedown.left
              };

              if (mousedown.element === resize[0]) {
                var height = textarea.outerHeight();
                var width  = textarea.outerWidth();
  
                textarea.height(height - diff.top);
                textarea.width(width + diff.left);

                // Only update the mousedown object if the dimensions
                // have changed, otherwise they have reached thier minimum
                // values.
                if (textarea.outerHeight() !== height) {
                  mousedown.top  = e.pageY;
                }
                if (textarea.outerWidth() !== width) {
                  mousedown.left = e.pageX;
                }
              }
              else if (mousedown.element === controls[0]) {
                editor.css({
                  top:  parseInt(editor.css('top'), 10)  + diff.top,
                  left: parseInt(editor.css('left'), 10) + diff.left
                });

                mousedown.top  = e.pageY;
                mousedown.left = e.pageX;
              }

              throttle = true;
              setTimeout(function () {
                throttle = false;
              }, 1000/60);
            }
          }
        });
      }(jQuery));
    </script>
  </body>
</html>