Fixed #80 and #70 (again)

HISTORY.md

@@ -3,6 +3,11 @@
 http://jsoneditoronline.org
 
 
+## (not yet released), version 2.3.5
+
+- Fixed a positioning issue of the action menu again.
+
+
 ## 2013-11-19, version 2.3.4
 
 - Dropped support for IE8, cleaned up legacy code for old browsers.

jsoneditor.css

@@ -226,7 +226,7 @@
 /* ContextMenu - main menu */
 
 .jsoneditor-contextmenu {
-  position: fixed;
+  position: absolute;
   z-index: 99999;
 }
 

jsoneditor.js

@@ -27,8 +27,8 @@
  * Copyright (c) 2011-2013 Jos de Jong, http://jsoneditoronline.org
  *
  * @author  Jos de Jong, <wjosdejong@gmail.com>
- * @version 2.3.4
- * @date    2013-11-19
+ * @version 2.3.5-SNAPSHOT
+ * @date    2013-12-07
  */
 (function () {
 
@@ -4560,14 +4560,16 @@ ContextMenu.prototype.show = function (anchor) {
   this.hide();
 
   // calculate whether the menu fits below the anchor
-  var windowHeight = window.innerHeight;
-  var anchorHeight = anchor.offsetHeight;
-  var menuHeight = this.maxHeight;
+  var windowHeight = window.innerHeight,
+      windowScroll = (window.pageYOffset || document.scrollTop),
+      windowBottom = windowHeight + windowScroll,
+      anchorHeight = anchor.offsetHeight,
+      menuHeight = this.maxHeight;
 
   // position the menu
   var left = util.getAbsoluteLeft(anchor);
   var top = util.getAbsoluteTop(anchor);
-  if (top + anchorHeight + menuHeight < windowHeight) {
+  if (top + anchorHeight + menuHeight < windowBottom) {
     // display the menu below the anchor
     this.dom.menu.style.left = left + 'px';
     this.dom.menu.style.top = (top + anchorHeight) + 'px';
@@ -5624,33 +5626,19 @@ util.isUrl = function isUrl (text) {
  *                          in the browser page.
  */
 util.getAbsoluteLeft = function getAbsoluteLeft(elem) {
-  var left = elem.offsetLeft;
-  var body = document.body;
-  var e = elem.offsetParent;
-  while (e != null && elem != body) {
-    left += e.offsetLeft;
-    left -= e.scrollLeft;
-    e = e.offsetParent;
-  }
-  return left;
+  var rect = elem.getBoundingClientRect();
+  return rect.left + window.pageXOffset || document.scrollLeft || 0;
 };
 
 /**
  * Retrieve the absolute top value of a DOM element
  * @param {Element} elem    A dom element, for example a div
- * @return {Number} top    The absolute top position of this element
+ * @return {Number} top     The absolute top position of this element
  *                          in the browser page.
  */
 util.getAbsoluteTop = function getAbsoluteTop(elem) {
-  var top = elem.offsetTop;
-  var body = document.body;
-  var e = elem.offsetParent;
-  while (e != null && e != body) {
-    top += e.offsetTop;
-    top -= e.scrollTop;
-    e = e.offsetParent;
-  }
-  return top;
+  var rect = elem.getBoundingClientRect();
+  return rect.top + window.pageYOffset || document.scrollTop || 0;
 };
 
 /**

jsoneditor/css/contextmenu.css

@@ -2,7 +2,7 @@
 /* ContextMenu - main menu */
 
 .jsoneditor-contextmenu {
-  position: fixed;
+  position: absolute;
   z-index: 99999;
 }
 

jsoneditor/js/contextmenu.js

@@ -180,14 +180,16 @@ ContextMenu.prototype.show = function (anchor) {
   this.hide();
 
   // calculate whether the menu fits below the anchor
-  var windowHeight = window.innerHeight;
-  var anchorHeight = anchor.offsetHeight;
-  var menuHeight = this.maxHeight;
+  var windowHeight = window.innerHeight,
+      windowScroll = (window.pageYOffset || document.scrollTop),
+      windowBottom = windowHeight + windowScroll,
+      anchorHeight = anchor.offsetHeight,
+      menuHeight = this.maxHeight;
 
   // position the menu
   var left = util.getAbsoluteLeft(anchor);
   var top = util.getAbsoluteTop(anchor);
-  if (top + anchorHeight + menuHeight < windowHeight) {
+  if (top + anchorHeight + menuHeight < windowBottom) {
     // display the menu below the anchor
     this.dom.menu.style.left = left + 'px';
     this.dom.menu.style.top = (top + anchorHeight) + 'px';

jsoneditor/js/util.js

@@ -121,33 +121,19 @@ util.isUrl = function isUrl (text) {
  *                          in the browser page.
  */
 util.getAbsoluteLeft = function getAbsoluteLeft(elem) {
-  var left = elem.offsetLeft;
-  var body = document.body;
-  var e = elem.offsetParent;
-  while (e != null && elem != body) {
-    left += e.offsetLeft;
-    left -= e.scrollLeft;
-    e = e.offsetParent;
-  }
-  return left;
+  var rect = elem.getBoundingClientRect();
+  return rect.left + window.pageXOffset || document.scrollLeft || 0;
 };
 
 /**
  * Retrieve the absolute top value of a DOM element
  * @param {Element} elem    A dom element, for example a div
- * @return {Number} top    The absolute top position of this element
+ * @return {Number} top     The absolute top position of this element
  *                          in the browser page.
  */
 util.getAbsoluteTop = function getAbsoluteTop(elem) {
-  var top = elem.offsetTop;
-  var body = document.body;
-  var e = elem.offsetParent;
-  while (e != null && e != body) {
-    top += e.offsetTop;
-    top -= e.scrollTop;
-    e = e.offsetParent;
-  }
-  return top;
+  var rect = elem.getBoundingClientRect();
+  return rect.top + window.pageYOffset || document.scrollTop || 0;
 };
 
 /**

test/bootstrap/index.html

@@ -0,0 +1,113 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Test Bootstrap modal</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+  <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
+  <link rel="stylesheet" type="text/css" href="../../jsoneditor-min.css">
+
+  <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.js"></script>
+  <script src="js/bootstrap.min.js"></script>
+  <script src="../../jsoneditor-min.js"></script>
+
+  <style>
+    body {
+      width: 500px;
+      margin: 20px;
+      padding: 20px;
+    }
+  </style>
+</head>
+<body>
+
+<div style="height: 100px;"></div>
+
+<h1>Test Bootstrap Modal</h1>
+
+<a class="btn" data-toggle="modal" href="#myModal1">Launch Modal 1</a>
+
+
+<div class="modal hide" id="myModal1"><!-- note the use of "hide" class -->
+  <div class="modal-header">
+    <button class="close" data-dismiss="modal">&times;</button>
+    <h3>Modal header</h3>
+  </div>
+  <div class="modal-body">
+    <p>One fine body...</p>
+    <div id="jsoneditor1"></div>
+  </div>
+  <div class="modal-footer">
+    <a href="#" class="btn" data-dismiss="modal">Close</a><!-- note the use of "data-dismiss" -->
+    <a href="#" class="btn btn-primary">Save changes</a>
+  </div>
+</div>​
+
+<a class="btn" data-toggle="modal" href="#myModal2">Launch Modal 2</a>
+
+<div class="modal hide" id="myModal2"><!-- note the use of "hide" class -->
+  <div class="modal-header">
+    <button class="close" data-dismiss="modal">&times;</button>
+    <h3>Modal header</h3>
+  </div>
+  <div class="modal-body">
+    <p>One fine body...</p>
+    <div id="jsoneditor2" style="height: 300px;"></div>
+  </div>
+  <div class="modal-footer">
+    <a href="#" class="btn" data-dismiss="modal">Close</a><!-- note the use of "data-dismiss" -->
+    <a href="#" class="btn btn-primary">Save changes</a>
+  </div>
+</div>​
+
+<p></p>
+
+<div id="jsoneditor3"></div>
+
+<p></p>
+
+<div id="jsoneditor4" style="height: 300px;"></div>
+
+<p></p>
+
+<div style="width:500px; height:300px; overflow: auto; background: lightgray;">
+  <div style="width: 700px; height:200px;"></div>
+  <div id="jsoneditor5" style="width: 300px; height: 300px; background: white; margin: 0 200px;"></div>
+  <div style="height:200px;"></div>
+</div>
+
+<div style="height: 400px;"></div>
+
+<script>
+  function createEditor (container) {
+
+    var options = {};
+
+    var json = {
+      'array': [1, 2, 3],
+      'boolean': true,
+      'null': null,
+      'number': 123,
+      'object': {'a': 'b', 'c': 'd'},
+      'string': 'Hello World'
+    };
+
+    var editor = new jsoneditor.JSONEditor(container, options, json);
+  }
+
+  setTimeout(function () {
+    createEditor(document.getElementById('jsoneditor1'));
+    createEditor(document.getElementById('jsoneditor2'));
+    createEditor(document.getElementById('jsoneditor3'));
+    createEditor(document.getElementById('jsoneditor4'));
+    createEditor(document.getElementById('jsoneditor5'));
+    document.getElementById('jsoneditor5').parentNode.scrollLeft = 100;
+    document.getElementById('jsoneditor5').parentNode.scrollTop = 100;
+    document.scrollTop = 100;
+  }, 0);
+
+</script>
+
+</body>
+</html>
+