work on notes js

app/views/notes/index_by_note.html.erb

@@ -0,0 +1,28 @@
+<div id="c-notes">
+  <div id="a-index">
+    <table>
+      <thead>
+        <tr>
+          <th>Post</th>
+          <th>Created by</th>
+          <th>Created at</th>
+          <th>Active?</th>
+          <th>Body</th>
+        </tr>
+      </thead>
+      <tbody>
+        <% @notes.each do |note| %>
+          <tr>
+            <td><%= link_to note.post_id, post_path(note.post_id) %></td>
+            <td><%= link_to note.creator.name, user_path(note.creator_id) %></td>
+            <td><%= time_ago_in_words(note.created_at) %> ago</td>
+            <td><%= note.is_active? %></td>
+            <td><%= format_text(note.body) %></td>
+          </tr>
+        <% end %>
+      </tbody>
+    </table>
+  </div>
+</div>
+
+<%= render "notes/secondary_links" %>

app/views/pools/search.html.erb

@@ -0,0 +1,11 @@
+<div id="c-pools">
+  <div id="a-search">
+    <%= simple_form_for @search, :method => :get do |f| %>
+      <%= f.input :name_contains, :label => "Name", :required => false %>
+      <%= f.input :description_contains, :label => "Description", :required => false %>
+      <%= f.button :submit, "Search" %>
+    <% end %>
+  </div>
+</div>
+
+<%= render "secondary_links" %>

app/views/static/jquery_test.html.erb

@@ -0,0 +1,40 @@
+<div id="jquery-test">
+  <div class="note" id="lots-of-text-1">
+    Lorem ipsum 
+  </div>
+  
+  <div class="note" id="lots-of-text-2" style="left: 400px;">
+    Lorem ipsum 
+  </div>
+</div>
+
+<script type="text/javascript">
+  var body = $("#lots-of-text-2");
+  body.css({height: "auto", minWidth: 140});
+  
+  var w = body[0].offsetWidth;
+  var h = body[0].offsetHeight;
+  var lo = null;
+  var hi = null;
+  var x = null;
+  var last = null;
+  
+  if (body[0].scrollWidth <= body[0].clientWidth) {
+    lo = 20, hi = w
+
+    do {
+      x = (lo+hi)/2
+      body.css({minWidth: x});
+      
+      if (body[0].offsetHeight > h) {
+        lo = x;
+      } else {
+        hi = x;
+      }
+    } while ((hi - lo) > 4);
+
+    if (body[0].offsetHeight > h) {
+      body.css({minWidth: hi});
+    }
+  }
+</script>

public/javascripts/src/app/notes.js

@@ -0,0 +1,347 @@
+(function() {
+  Danbooru.Note = function() {}
+  
+  Danbooru.Note.initialize_all = function() {
+    $("#note-container").width($("#image").width());
+    $("#note-container").height($("#image").height());
+    
+    $("a#translate").click(function(e) {
+      e.preventDefault();
+      Danbooru.Note.create(1);
+    });
+  }
+  
+  Danbooru.Note.prototype.getElement = function(name, unwrap) {
+    var element = $("#note-" + name + "-" + this.id);
+    
+    if (unwrap) {
+      return element[0];
+    } else {
+      return element;
+    }
+  }
+  
+  Danbooru.Note.prototype.getBox = function(unwrap) {
+    return this.getElement("box", unwrap);
+  }
+  
+  Danbooru.Note.prototype.getImage = function(unwrap) {
+    return this.getElement("image", unwrap);
+  }
+
+  Danbooru.Note.prototype.getBody = function(unwrap) {
+    return this.getElement("body", unwrap);
+  }
+
+  Danbooru.Note.prototype.getCorner = function(unwrap) {
+    return this.getElement("corner", unwrap);
+  }
+  
+  Danbooru.Note.prototype.initialize = function(id, is_new, raw_body) {
+    if (Note.debug) {
+      console.debug("Note#initialize (id=%d)", id);
+    }
+    
+    this.id = id;
+    this.is_new = is_new;
+
+    // Cache the dimensions
+    this.fullsize = {
+      left: this.getBox().offset().left,
+      top: this.getBox().offset().top,
+      width: this.getBox().width(),
+      height: this.getBox().height()
+    }
+    
+    // Store the original values (in case the user clicks Cancel)
+    this.old = {
+      raw_body: raw_body,
+      formatted_body: this.getBody().html()
+    }
+    
+    for (p in this.fullsize) {
+      this.old[p] = this.fullsize[p];
+    }
+
+    // Make the note translucent
+    if (is_new) {
+      this.getBox().css({opacity: 0.2});
+    } else {
+      this.getBox().css({opacity: 0.5});
+    }
+
+    if (is_new && raw_body == '') {
+      this.bodyfit = true;
+      this.getBody().css({height: 100});
+    }
+
+    // Attach the event listeners
+    this.getBox().mousedown(this.dragStart);
+    this.getBox().mouseout(this.bodyHideTimer);
+    this.getBox().mouseover(this.bodyShow);
+    this.getCorner().mousedown(this.resizeStart);
+    this.getBody().mouseover(this.bodyShow);
+    this.getBody().mouseout(this.bodyHideTimer);
+    this.getBody().click(this.showEditBox);
+
+    this.adjustScale();
+  }
+  
+  // Returns the raw text value of this note
+  Danbooru.Note.prototype.textValue = function() {
+    if (Note.debug) {
+      console.debug("Note#textValue (id=%d)", this.id);
+    }
+    
+    return this.old.raw_body.trim();
+  }
+  
+  // Removes the edit box
+  Danbooru.Note.prototype.hideEditBox = function(e) {
+    if (Note.debug) {
+      console.debug("Note#hideEditBox (id=%d)", this.id)
+    }
+    
+    var id = $("#edit-box").data("id");
+
+    if (id != null) {
+      $("#edit-box").unbind();
+      $("#note-save-" + id).unbind();
+      $("#note-cancel-" + id).unbind();
+      $("#note-remove-" + id).unbind();
+      $("#note-history-" + id).unbind();
+      $("#edit-box").remove();
+    }
+  }
+  
+  // Shows the edit box
+  Danbooru.Note.prototype.showEditBox = function(e) {
+    if (Note.debug) {
+      console.debug("Note#showEditBox (id=%d)", this.id);
+    }
+    
+    this.hideEditBox(e);
+
+    var insertionPosition = this.getInsertionPosition();
+    var top = insertionPosition[0];
+    var left = insertionPosition[1];
+    html += '<div id="edit-box" style="top: '+top+'px; left: '+left+'px; position: absolute; visibility: visible; z-index: 100; background: white; border: 1px solid black; padding: 12px;">';
+    html += '<form onsubmit="return false;" style="padding: 0; margin: 0;">';
+    html += '<textarea rows="7" id="edit-box-text" style="width: 350px; margin: 2px 2px 12px 2px;">' + this.textValue() + '</textarea>';
+    html += '<input type="submit" value="Save" name="save" id="note-save-' + this.id + '">';
+    html += '<input type="submit" value="Cancel" name="cancel" id="note-cancel-' + this.id + '">';
+    html += '<input type="submit" value="Delete" name="remove" id="note-remove-' + this.id + '">';
+    html += '<input type="submit" value="History" name="history" id="note-history-' + this.id + '">';
+    html += '</form>';
+    html += '</div>';
+    $("#note-container").append(html);
+    $('#edit-box').data("id", this.id);
+    $("#edit-box").mousedown(this.editDragStart);
+    $("#note-save-" + this.id).click(this.save);
+    $("#note-cancel-" + this.id).click(this.cancel);
+    $("#note-remove-" + this.id).click(this.remove);
+    $("#note-history-" + this.id).click(this.history)
+    $("#edit-box-text").focus();
+  }
+  
+  // Shows the body text for the note
+  Danbooru.Note.prototype.bodyShow = function(e) {
+    if (Note.debug) {
+      console.debug("Note#bodyShow (id=%d)", this.id);
+    }
+    
+    if (this.dragging) {
+      return;
+    }
+
+    if (this.hideTimer) {
+      this.hideTimer.clear();
+    }
+
+    if (Note.noteShowingBody == this) {
+      return;
+    }
+    
+    if (Note.noteShowingBody) {
+      Note.noteShowingBody.bodyHide();
+    }
+    
+    Note.noteShowingBody = this;
+
+    if (Note.zindex >= 9) {
+      /* don't use more than 10 layers (+1 for the body, which will always be above all notes) */
+      Note.zindex = 0;
+      for (var i=0; i< Note.all.length; ++i) {
+        Note.all[i].getBox().css({zIndex: 0});
+      }
+    }
+
+    this.getBox().css({zIndex: ++Note.zindex});
+    this.getBody().css({zIndex: 10, top: 0, left: 0});
+    var dw = document.documentElement.scrollWidth;
+    this.getBody().css({visibility: "hidden", display: "block"});
+    if (!this.bodyfit) {
+      this.getBody().css({height: "auto", minWidth: 140});
+      var w = this.getBody(true).offsetWidth;
+      var h = this.getBody(true).offsetHeight;
+      var lo = null;
+      var hi = null;
+      var x = null;
+      var last = null;
+      if (this.getBody(true).scrollWidth <= this.getBody(true).clientWidth) {
+        /* for short notes (often a single line), make the box no wider than necessary */  
+        // scroll test necessary for Firefox
+        lo = 20;
+        hi = w;
+  
+        do {
+          x = (lo+hi)/2
+          this.getBody().css({minWidth: x});
+          if (this.getBody(true).offsetHeight > h) {
+            lo = x;
+          } else {
+            hi = x;
+          }
+        } while ((hi - lo) > 4);
+        if (this.getBody(true).offsetHeight > h) {
+          this.getBody().css({minWidth: hi});
+        }
+      }
+      
+      if ($.browser.msie) {
+        // IE7 adds scrollbars if the box is too small, obscuring the text
+        if (this.getBody(true).offsetHeight < 35) {
+          this.getBody().css({minHeight: 35});
+        }
+        
+        if (this.getBody(true).offsetWidth < 47) {
+          this.getBody().css({minWidth: 47});
+        }
+      }
+      this.bodyfit = true;
+    }
+    this.getBody().css({
+      top: this.getBox(true).offsetTop + this.getBox(true).clientHeight + 5
+    });
+
+    // keep the box within the document's width
+    var l = 0;
+    var e = this.getBox(true);
+    do {
+      l += e.offsetLeft
+    } while (e = e.offsetParent);
+    l += this.getBody(true).offsetWidth + 10 - dw;
+    if (l > 0) {
+      this.getBody().css({left: this.getBox(true).offsetLeft - l});
+    } else {
+      this.getBody().css({left: this.getBox(true).offsetLeft});
+    }
+    this.getBody().css({visibility: "visible"});
+  }
+  
+  Danbooru.Note.prototype.bodyHideTimer = function(e) {
+    if (Note.debug) {
+      console.debug("Note#bodyHideTimer (id=%d)", this.id);
+    }
+    this.hideTimer = $.timeout(250).done(this.bodyHide);
+  }
+  
+  // Start dragging the note
+  Danbooru.Note.prototype.dragStart = function(e) {
+    if (Note.debug) {
+      console.debug("Note#dragStart (id=%d)", this.id);
+    }
+    
+    $(document).mousemove(this.drag);
+    $(document).mouseup(this.dragStop);
+    $(document).select(function(e) {e.preventDefault();});
+
+    this.cursorStartX = e.pageX;
+    this.cursorStartY = e.pageY;
+    this.boxStartX = this.getBox().offset().left;
+    this.boxStartY = this.getBox().offset().top;
+    this.boundsX = new ClipRange(5, this.getImage(true).clientWidth - this.getBox(true).clientWidth - 5);
+    this.boundsY = new ClipRange(5, this.getImage(true).clientHeight - this.getBox(true).clientHeight - 5);
+    this.dragging = true;
+    this.bodyHide();
+  }
+  
+  // Stop dragging the note
+  Danbooru.Note.prototype.dragStop = function(e) {
+    if (Note.debug) {
+      console.debug("Note#dragStop (id=%d)", this.id);
+    }
+    
+    $(document).unbind();
+
+    this.cursorStartX = null;
+    this.cursorStartY = null;
+    this.boxStartX = null;
+    this.boxStartY = null;
+    this.boundsX = null;
+    this.boundsY = null;
+    this.dragging = false;
+
+    this.bodyShow();
+  }
+  
+  Danbooru.Note.prototype.ratio = function() {
+    return this.getImage().width() / parseFloat(this.getImage().data("original-width"));
+  }
+  
+  // Scale the notes for when the image gets resized
+  Danbooru.Note.prototype.adjustScale = function() {
+    if (Note.debug) {
+      console.debug("Note#adjustScale (id=%d)", this.id);
+    }
+    
+    var ratio = this.ratio();
+    this.getBox().css({
+      left: this.fullsize.left * ratio,
+      top: this.fullsize.top * ratio,
+      width: this.fullsize.width * ratio,
+      height: this.fullsize.height * ratio
+    });
+  }
+  
+  // Update the note's position as it gets dragged
+  Danbooru.Note.prototype.drag = function(e) {
+    var left = this.boxStartX + e.pageX - this.cursorStartX;
+    var top = this.boxStartY + e.pageY - this.cursorStartY;
+    left = this.boundsX.clip(left);
+    top = this.boundsY.clip(top);
+    this.getBox().css({left: left, top: top});
+    var ratio = this.ratio();
+    this.fullsize.left = left / ratio;
+    this.fullsize.top = top / ratio;
+
+    e.preventDefault();
+  }
+  
+  // Start dragging the edit box
+  Danbooru.Note.prototype.editDragStart = function(e) {
+    if (Note.debug) {
+      console.debug("Note#editDragStart (id=%d)", this.id);
+    }
+    
+    var node = e.element().nodeName;
+    if (node != 'FORM' && node != 'DIV') {
+      return
+    }
+
+    document.observe("mousemove", this.editDrag.bindAsEventListener(this))
+    document.observe("mouseup", this.editDragStop.bindAsEventListener(this))
+    document.observe("selectstart", function() {return false})
+
+    this.elements.editBox = $('edit-box');
+    this.cursorStartX = e.pointerX()
+    this.cursorStartY = e.pointerY()
+    this.editStartX = this.elements.editBox.offsetLeft
+    this.editStartY = this.elements.editBox.offsetTop
+    this.dragging = true
+  }
+})();
+
+$(document).ready(function() {
+  Danbooru.Note.initialize_all();
+});

public/javascripts/src/lib/jquery.timeout.js

@@ -0,0 +1,47 @@
+/**
+ * jquery.timeout.js
+ *
+ * Copyright (c) 2011 Thomas Kemmer <tkemmer@computer.org>
+ *
+ * http://code.google.com/p/jquery-timeout/
+ *
+ * Permission is hereby granted, free of charge, to any person
+ * obtaining a copy of this software and associated documentation
+ * files (the "Software"), to deal in the Software without
+ * restriction, including without limitation the rights to use, copy,
+ * modify, merge, publish, distribute, sublicense, and/or sell copies
+ * of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be
+ * included in all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+ * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+ * MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+ * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS
+ * BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN
+ * ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+ * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+;(function($) {
+    $.timeout = function(delay) {
+        var deferred = $.Deferred(function(deferred) {
+            deferred.timeoutID = window.setTimeout(function() {
+                deferred.resolve();
+            }, delay);
+
+            deferred.fail(function() {
+                window.clearTimeout(deferred.timeoutID);
+            });
+        });
+
+        return $.extend(deferred.promise(), {
+            clear: function() {
+                deferred.reject();
+            }
+        });
+    };
+})(jQuery);