diff --git a/demo/kitchen-sink/demo.js b/demo/kitchen-sink/demo.js index 29be01be..3f9eaafc 100644 --- a/demo/kitchen-sink/demo.js +++ b/demo/kitchen-sink/demo.js @@ -177,8 +177,6 @@ var keybindings = { }) }; - - /*********** manage layout ***************************/ var consoleHeight = 20; function onResize() { @@ -395,6 +393,91 @@ bindCheckbox("highlight_token", function(checked) { } }); +bindCheckbox("mobile_mode", function(checked) { + /** Mobile test **/ + if (checked) { + var editorElement = document.getElementById("editor"); + + var left = editorElement.offsetLeft; + var height = editorElement.style.height; + var totalHeight = env.editor.session.getLength() * env.editor.renderer.lineHeight; + var width = document.documentElement.clientWidth - left; + + var mobileScrollDiv = document.createElement("div"); + mobileScrollDiv.id = "scrolldiv_container"; + mobileScrollDiv.style.width = (width+30) + "px"; + //mobileScrollDiv.style.left = left + "px"; + mobileScrollDiv.style.height = height; + + var mobileScrollDivChild = document.createElement("div"); + mobileScrollDivChild.id = "scrolldiv_child"; + mobileScrollDivChild.style.height = totalHeight + "px"; + mobileScrollDiv.appendChild(mobileScrollDivChild); + editorElement.appendChild(mobileScrollDiv); + + var movementDiff = 0, lastMovementPos = 0; + var timeDiff = 0, lastTime = 0; + var waitingForLastScroll = false; + + document.addEventListener("touchmove", function(e) { + //console.log(" TOUCHMOVE", e, mobileScrollDiv.scrollTop); + movementDiff = mobileScrollDiv.scrollTop - lastMovementPos; + lastMovementPos = mobileScrollDiv.scrollTop; + + timeDiff = e.timeStamp - lastTime; + lastTime = e.timeStamp; + }); + var movingTimer; + document.addEventListener("touchstart", function(e) { + if (e.target.className.split(" ").indexOf("ace_content") !== -1) { + clearInterval(movingTimer); + + waitingForLastScroll = false; + movementDiff = 0, lastMovementPos = 0; + timeDiff = 0, lastTime = 0; + //console.log("touchstart", e); + } + }, false); + document.addEventListener("touchend", function(e) { + if (e.target.className.split(" ").indexOf("ace_content") !== -1) { + waitingForLastScroll = true; + + //console.log("TOUCH END", e); + //console.log(movementDiff, timeDiff); + var position = mobileScrollDiv.scrollTop; + //var velocity = (movementDiff/timeDiff) * 4; + var velocity = movementDiff; + + movingTimer = setInterval(function() { + position += velocity; + velocity *= 0.949; + //console.log(velocity); + env.editor.session.setScrollTop(position); + mobileScrollDiv.scrollTop = position; + if (Math.abs(velocity) < 4) + clearInterval(movingTimer); + }, 5); + } + }, false); + + mobileScrollDiv.onscroll = function(e) { + //console.log("Scrolling", e, mobileScrollDiv.scrollTop); + if (waitingForLastScroll === false) { + env.editor.session.setScrollTop(mobileScrollDiv.scrollTop); + } + // Set the top of the scrolldiv to what the editor scrolltop is + /*else { + mobileScrollDiv.scrollTop = env.editor.session.getScrollTop(); + }*/ + }; + } + else { + var mobileScrollDiv = document.getElementById("scrolldiv_container"); + if (mobileScrollDiv) + mobileScrollDiv.parentNode.removeChild(mobileScrollDiv); + } +}); + /************** dragover ***************************/ event.addListener(container, "dragover", function(e) { return event.preventDefault(e); diff --git a/demo/kitchen-sink/styles.css b/demo/kitchen-sink/styles.css index ec3578aa..d525fce1 100644 --- a/demo/kitchen-sink/styles.css +++ b/demo/kitchen-sink/styles.css @@ -40,4 +40,19 @@ body { #controls td + td { text-align: left; +} + +#scrolldiv_container { + position: absolute; + top: 0px; + left: 0px; + z-index: 9999; + -webkit-overflow-scrolling: touch; + overflow-y: scroll; + pointer-events: none; +} + +#scrolldiv_child { + -webkit-transform: translateZ(0px); + pointer-events: none; } \ No newline at end of file diff --git a/kitchen-sink.html b/kitchen-sink.html index 96dc9c37..324e5778 100644 --- a/kitchen-sink.html +++ b/kitchen-sink.html @@ -5,6 +5,7 @@ Ace Kitchen Sink +