From 5f39f374c8f40978277ad0f3709b2eeeb084bbdc Mon Sep 17 00:00:00 2001
From: Nicolas Stepien <stepien.nicolas@gmail.com>
Date: Tue, 26 Jun 2012 21:20:49 +0200
Subject: [PATCH] The menu should always be entirely visible on click.

---
 4chan_x.user.js | 27 ++++++++++++++++-----------
 script.coffee   | 36 ++++++++++++++++++++++++------------
 2 files changed, 40 insertions(+), 23 deletions(-)

diff --git a/4chan_x.user.js b/4chan_x.user.js
index 66a42e77a..a0651bc4b 100644
--- a/4chan_x.user.js
+++ b/4chan_x.user.js
@@ -1101,7 +1101,7 @@
       return $.on(a, 'click', Menu.toggle);
     },
     toggle: function(e) {
-      var lastOpener, rect, s;
+      var lastOpener;
       e.preventDefault();
       e.stopPropagation();
       if (Menu.el.parentNode) {
@@ -1111,15 +1111,11 @@
           return;
         }
       }
-      s = Menu.el.style;
-      rect = this.getBoundingClientRect();
-      s.top = d.documentElement.scrollTop + d.body.scrollTop + rect.top + rect.height + 2 + 'px';
-      s.left = d.documentElement.scrollLeft + d.body.scrollLeft + rect.left + 'px';
       Menu.lastOpener = this;
-      return Menu.open(Main.preParse($.x('ancestor::div[contains(@class,"postContainer")][1]', this)));
+      return Menu.open(this, Main.preParse($.x('ancestor::div[contains(@class,"postContainer")][1]', this)));
     },
-    open: function(post) {
-      var el, entry, _i, _len, _ref;
+    open: function(button, post) {
+      var bLeft, bRect, bTop, el, entry, mRect, _i, _len, _ref;
       el = Menu.el;
       el.setAttribute('data-id', post.ID);
       el.setAttribute('data-rootid', post.root.id);
@@ -1133,12 +1129,21 @@
           $.add(el, entry.el);
         }
       }
+      $.on(d, 'click', Menu.close);
       $.add(d.body, el);
-      return $.on(d, 'click', Menu.close);
+      mRect = el.getBoundingClientRect();
+      bRect = button.getBoundingClientRect();
+      bTop = d.documentElement.scrollTop + d.body.scrollTop + bRect.top;
+      bLeft = d.documentElement.scrollLeft + d.body.scrollLeft + bRect.left;
+      el.style.top = bRect.top + bRect.height + mRect.height < d.documentElement.clientHeight ? bTop + bRect.height + 2 + 'px' : bTop - mRect.height - 2 + 'px';
+      return el.style.left = bRect.left + mRect.width < d.documentElement.clientWidth ? bLeft + 'px' : bLeft + bRect.width - mRect.width + 'px';
     },
     close: function() {
-      $.rm(Menu.el);
-      Menu.el.innerHTML = null;
+      var el;
+      el = Menu.el;
+      $.rm(el);
+      el.innerHTML = null;
+      el.removeAttribute('style');
       delete Menu.lastOpener;
       return $.off(d, 'click', Menu.close);
     },
diff --git a/script.coffee b/script.coffee
index 71134d244..3b4afdee3 100644
--- a/script.coffee
+++ b/script.coffee
@@ -845,16 +845,9 @@ Menu =
       Menu.close()
       return if lastOpener is @
 
-    # Position
-    s = Menu.el.style
-    # XXX prevent overflows
-    rect   = @getBoundingClientRect()
-    s.top  = d.documentElement.scrollTop  + d.body.scrollTop  + rect.top  + rect.height + 2 + 'px'
-    s.left = d.documentElement.scrollLeft + d.body.scrollLeft + rect.left + 'px'
-
     Menu.lastOpener = @
-    Menu.open Main.preParse $.x 'ancestor::div[contains(@class,"postContainer")][1]', @
-  open: (post) ->
+    Menu.open @, Main.preParse $.x 'ancestor::div[contains(@class,"postContainer")][1]', @
+  open: (button, post) ->
     {el} = Menu
     # XXX GM/Scriptish require setAttribute
     el.setAttribute 'data-id', post.ID
@@ -867,11 +860,30 @@ Menu =
       if entry.requirement post
         entry.open? post
         $.add el, entry.el
-    $.add d.body, el
+
     $.on d, 'click', Menu.close
+    $.add d.body, el
+
+    # Position
+    mRect = el.getBoundingClientRect()
+    bRect = button.getBoundingClientRect()
+    bTop  = d.documentElement.scrollTop  + d.body.scrollTop  + bRect.top
+    bLeft = d.documentElement.scrollLeft + d.body.scrollLeft + bRect.left
+    el.style.top =
+      if bRect.top + bRect.height + mRect.height < d.documentElement.clientHeight
+        bTop + bRect.height + 2 + 'px'
+      else
+        bTop - mRect.height - 2 + 'px'
+    el.style.left =
+      if bRect.left + mRect.width < d.documentElement.clientWidth
+        bLeft + 'px'
+      else
+        bLeft + bRect.width - mRect.width + 'px'
   close: ->
-    $.rm Menu.el
-    Menu.el.innerHTML = null
+    {el} = Menu
+    $.rm el
+    el.innerHTML = null
+    el.removeAttribute 'style'
     delete Menu.lastOpener
     $.off d, 'click', Menu.close