Merge pull request #37 from jarlg/master

Fixes problem with toolbar position when selection is at the top of the screen
yabwe · Sep 30, 2013 · 84d1ba5 · 84d1ba5
2 parents bf90422 + 5636d61
commit 84d1ba5
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 16 deletions.
diff --git a/src/js/medium.editor.js b/src/js/medium.editor.js
@@ -191,10 +191,19 @@ function MediumEditor(elements, options) {
         },
 
         setToolbarPosition: function () {
-            var selection = window.getSelection(),
+            var button_size = 50,
+                selection = window.getSelection(),
                 range = selection.getRangeAt(0),
                 boundary = range.getBoundingClientRect();
-            this.toolbar.style.top = boundary.top + this.options.diffTop + window.pageYOffset - this.toolbar.offsetHeight + 'px';
+            if (boundary.top < button_size) {
+                this.toolbar.classList.add('medium-toolbar-arrow-over');
+                this.toolbar.classList.remove('medium-toolbar-arrow-under');
+                this.toolbar.style.top = button_size + boundary.bottom - this.options.diffTop + window.pageYOffset - this.toolbar.offsetHeight + 'px';
+            } else {
+                this.toolbar.classList.add('medium-toolbar-arrow-under');
+                this.toolbar.classList.remove('medium-toolbar-arrow-over');
+                this.toolbar.style.top = boundary.top + this.options.diffTop + window.pageYOffset - this.toolbar.offsetHeight + 'px';
+            }
             this.toolbar.style.left = ((boundary.left + boundary.right) / 2) - (this.toolbar.offsetWidth / 2) + (this.options.diffLeft) + 'px';
             return this;
         },

diff --git a/src/sass/medium.editor.scss b/src/sass/medium.editor.scss
@@ -4,6 +4,31 @@
 $bgcolor: #242424;
 $button_size: 50px;
 
+.medium-toolbar-arrow {
+    content: "";
+    display: block;
+    position: absolute;
+    left: 50%;
+    margin-left: -8px;
+    width: 0;
+    height: 0;
+    border-style: solid;
+}
+
+.medium-toolbar-arrow-under:after {
+    @extend .medium-toolbar-arrow;
+    top: $button_size;
+    border-width: 8px 8px 0px 8px;
+    border-color: $bgcolor transparent transparent transparent;
+}
+
+.medium-toolbar-arrow-over:before {
+    @extend .medium-toolbar-arrow;
+    top: -8px;
+    border-width: 0px 8px 8px 8px;
+    border-color: transparent transparent $bgcolor transparent;
+}
+
 .medium-editor-toolbar {
     position: absolute;
     top: 0;
@@ -16,20 +41,6 @@ $button_size: 50px;
     @include border-radius(5px);
     @include box-shadow(0 0 3px #000);
 
-    &:before {
-        content: "";
-        display: block;
-        position: absolute;
-        top: $button_size;
-        left: 50%;
-        margin-left: -8px;
-        width: 0;
-        height: 0;
-        border-width: 8px 8px 0 8px;
-        border-color: $bgcolor transparent transparent transparent;
-        border-style: solid;
-    }
-
     ul {
         margin: 0;
         padding: 0;