From 4984f8cd058480c0481afcc8114e25ae22ff3d0f Mon Sep 17 00:00:00 2001
From: Eugene Efimochkin <eugene@aboutecho.com>
Date: Wed, 27 Aug 2014 12:17:24 +0400
Subject: [PATCH] Limiting how far to the left and up the bubble control can go

Works much better when the editor is edge-to-edge on the page and
selection is in the leftmost part of the string. With these changes the
bubble will still be visible.
---
 src/js/jquery.notebook.js | 26 ++++++++++++++++++++++++--
 1 file changed, 24 insertions(+), 2 deletions(-)

diff --git a/src/js/jquery.notebook.js b/src/js/jquery.notebook.js
index dbd51c2..441f156 100644
--- a/src/js/jquery.notebook.js
+++ b/src/js/jquery.notebook.js
@@ -259,15 +259,37 @@
              * This is called to position the bubble above the selection.
              */
             updatePos: function(editor, elem) {
+                var findLimitingParent, findMaxOffset;
+
+                findLimitingParent = function(starterElement) {
+                  var element, result;
+                  result = $(starterElement);
+                  while (!((result.is('html')) || (result.css('overflow') === 'hidden'))) {
+                    result = result.parent();
+                  }
+                  return result;
+                };
+
+                findMaxOffset = function(element) {
+                  var highOffset, lowOffset;
+                  highOffset = element.offset();
+                  lowOffset = findLimitingParent(element).offset();
+                  return {
+                    left: lowOffset.left - highOffset.left,
+                    top: lowOffset.top - highOffset.top
+                  };
+                };
+
                 var sel = w.getSelection(),
                     range = sel.getRangeAt(0),
                     boundary = range.getBoundingClientRect(),
                     bubbleWidth = elem.width(),
                     bubbleHeight = elem.height(),
                     offset = editor.offset().left,
+                    maxOffset = findMaxOffset(editor),
                     pos = {
-                        x: (boundary.left + boundary.width / 2) - (bubbleWidth / 2),
-                        y: boundary.top - bubbleHeight - 8 + $(document).scrollTop()
+                        x: Math.max((boundary.left + boundary.width / 2) - (bubbleWidth / 2), maxOffset.left),
+                        y: Math.max(boundary.top - bubbleHeight - 8 + $(document).scrollTop(), maxOffset.top)
                     };
                 transform.translate(elem, pos.x, pos.y);
             },