Merge pull request #1846 from ajaxorg/old_browser_compatibility
Fix old browser compatibility issues
This commit is contained in:
commit
3f6e2aded9
10 changed files with 88 additions and 80 deletions
|
|
@ -161,7 +161,7 @@ function highlight() {
|
|||
var highlighter = ace.require("ace/ext/static_highlight")
|
||||
var dom = ace.require("ace/lib/dom")
|
||||
function qsa(sel) {
|
||||
return [].slice.call(document.querySelectorAll(sel));
|
||||
return Array.apply(null, document.querySelectorAll(sel));
|
||||
}
|
||||
|
||||
qsa("code[class]").forEach(function(el) {
|
||||
|
|
|
|||
15
index.html
15
index.html
|
|
@ -9,8 +9,11 @@
|
|||
<link href="./doc/site/style.css" rel="stylesheet" type="text/css" />
|
||||
<link href="./doc/site/images/favicon.ico" rel="icon" type="image/x-icon" />
|
||||
|
||||
<script src="./build/src-min/ace.js"></script>
|
||||
<script src="./build/src-min/ext-static_highlight.js"></script>
|
||||
<script src="./build/src/ace.js"></script>
|
||||
<script src="./build/src/ext-static_highlight.js"></script>
|
||||
<!--[if lt IE 9]>
|
||||
<script src="./build/src/ext-old_ie.js"></script>
|
||||
<![endif]-->
|
||||
</head>
|
||||
<body>
|
||||
<a href="http://github.com/ajaxorg/ace">
|
||||
|
|
@ -65,7 +68,7 @@
|
|||
and is the successor of the Mozilla Skywriter (Bespin) project.
|
||||
</p>
|
||||
|
||||
<div id="ace_editor_demo" style="opacity:0">/**
|
||||
<pre id="ace_editor_demo" style="opacity:0">/**
|
||||
* In fact, you're looking at ACE right now. Go ahead and play with it!
|
||||
*
|
||||
* We are currently showing off the JavaScript mode. ACE has support for 45
|
||||
|
|
@ -80,7 +83,7 @@ function add(x, y) {
|
|||
|
||||
var addResult = add(3, 2);
|
||||
console.log(addResult);
|
||||
</div>
|
||||
</pre>
|
||||
<p id="embed_link"><a href="#nav=embedding">Learn how to embed this in your own site</a></p>
|
||||
<p class="highlight_note">Looking for a more full-featured demo? Check out the
|
||||
<a href="build/kitchen-sink.html" target="_blank">kitchen sink</a>.
|
||||
|
|
@ -140,7 +143,7 @@ console.log(addResult);
|
|||
<h1>Embedding Ace in Your Site</h1>
|
||||
<p>Ace can be easily embedded into a web page. Get prebuilt version of ace from
|
||||
<a href="https://github.com/ajaxorg/ace-builds/">ace-builds</a> repository and use the code below:</p>
|
||||
<div id="embedded_ace_code" style="opacity:0"><!DOCTYPE html>
|
||||
<pre id="embedded_ace_code" style="opacity:0"><!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>ACE in Action</title>
|
||||
|
|
@ -168,7 +171,7 @@ console.log(addResult);
|
|||
editor.getSession().setMode("ace/mode/javascript");
|
||||
</script>
|
||||
</body>
|
||||
</html></div>
|
||||
</html></pre>
|
||||
<p>Now check out the <a href="#nav=howto">How-To Guide</a> for instructions on
|
||||
common operations, such as setting a different language mode or
|
||||
getting the contents from the editor.
|
||||
|
|
|
|||
|
|
@ -103,6 +103,12 @@ patch(
|
|||
}"
|
||||
);
|
||||
|
||||
patch(
|
||||
require("../mode/text").Mode.prototype, "getTokenizer",
|
||||
/Tokenizer/,
|
||||
"TokenizerModule.Tokenizer"
|
||||
);
|
||||
|
||||
useragent.isOldIE = true;
|
||||
|
||||
});
|
||||
|
|
|
|||
|
|
@ -41,6 +41,7 @@
|
|||
|
||||
define(function(require, exports, module) {
|
||||
"use strict";
|
||||
require("ace/lib/fixoldbrowsers");
|
||||
|
||||
var themeData = [
|
||||
["Chrome" ],
|
||||
|
|
|
|||
|
|
@ -36,6 +36,7 @@ var useragent = require("../lib/useragent");
|
|||
var dom = require("../lib/dom");
|
||||
var lang = require("../lib/lang");
|
||||
var BROKEN_SETDATA = useragent.isChrome < 18;
|
||||
var USE_IE_MIME_TYPE = useragent.isIE;
|
||||
|
||||
var TextInput = function(parentNode, host) {
|
||||
var text = dom.createElement("textarea");
|
||||
|
|
@ -54,7 +55,6 @@ var TextInput = function(parentNode, host) {
|
|||
|
||||
var PLACEHOLDER = "\x01\x01";
|
||||
|
||||
var cut = false;
|
||||
var copied = false;
|
||||
var pasted = false;
|
||||
var inComposition = false;
|
||||
|
|
@ -186,9 +186,7 @@ var TextInput = function(parentNode, host) {
|
|||
}
|
||||
|
||||
var onSelect = function(e) {
|
||||
if (cut) {
|
||||
cut = false;
|
||||
} else if (copied) {
|
||||
if (copied) {
|
||||
copied = false;
|
||||
} else if (isAllSelected(text)) {
|
||||
host.selectAll();
|
||||
|
|
@ -243,55 +241,31 @@ var TextInput = function(parentNode, host) {
|
|||
sendText(data);
|
||||
resetValue();
|
||||
};
|
||||
|
||||
var onCut = function(e) {
|
||||
var data = host.getCopyText();
|
||||
if (!data) {
|
||||
event.preventDefault(e);
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
var handleClipboardData = function(e, data) {
|
||||
var clipboardData = e.clipboardData || window.clipboardData;
|
||||
|
||||
if (clipboardData && !BROKEN_SETDATA) {
|
||||
// Safari 5 has clipboardData object, but does not handle setData()
|
||||
var supported = clipboardData.setData("Text", data);
|
||||
if (supported) {
|
||||
host.onCut();
|
||||
event.preventDefault(e);
|
||||
}
|
||||
}
|
||||
|
||||
if (!supported) {
|
||||
cut = true;
|
||||
text.value = data;
|
||||
text.select();
|
||||
setTimeout(function(){
|
||||
cut = false;
|
||||
resetValue();
|
||||
resetSelection();
|
||||
host.onCut();
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
var onCopy = function(e) {
|
||||
var data = host.getCopyText();
|
||||
if (!data) {
|
||||
event.preventDefault(e);
|
||||
if (!clipboardData || BROKEN_SETDATA)
|
||||
return;
|
||||
}
|
||||
|
||||
var clipboardData = e.clipboardData || window.clipboardData;
|
||||
if (clipboardData && !BROKEN_SETDATA) {
|
||||
// using "Text" doesn't work on old webkit but ie needs it
|
||||
// TODO are there other browsers that require "Text"?
|
||||
var mime = USE_IE_MIME_TYPE ? "Text" : "text/plain";
|
||||
if (data) {
|
||||
// Safari 5 has clipboardData object, but does not handle setData()
|
||||
var supported = clipboardData.setData("Text", data);
|
||||
if (supported) {
|
||||
host.onCopy();
|
||||
event.preventDefault(e);
|
||||
}
|
||||
return clipboardData.setData(mime, data);
|
||||
} else {
|
||||
return clipboardData.getData(mime);
|
||||
}
|
||||
if (!supported) {
|
||||
}
|
||||
|
||||
var doCopy = function(e, isCut) {
|
||||
var data = host.getCopyText();
|
||||
if (!data)
|
||||
return event.preventDefault(e);
|
||||
|
||||
if (handleClipboardData(e, data)) {
|
||||
isCut ? host.onCut() : host.onCopy();
|
||||
event.preventDefault(e);
|
||||
} else {
|
||||
copied = true;
|
||||
text.value = data;
|
||||
text.select();
|
||||
|
|
@ -299,16 +273,22 @@ var TextInput = function(parentNode, host) {
|
|||
copied = false;
|
||||
resetValue();
|
||||
resetSelection();
|
||||
host.onCopy();
|
||||
isCut ? host.onCut() : host.onCopy();
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
var onCut = function(e) {
|
||||
doCopy(e, true);
|
||||
}
|
||||
|
||||
var onCopy = function(e) {
|
||||
doCopy(e, false);
|
||||
}
|
||||
|
||||
var onPaste = function(e) {
|
||||
var clipboardData = e.clipboardData || window.clipboardData;
|
||||
|
||||
if (clipboardData) {
|
||||
var data = clipboardData.getData("Text");
|
||||
var data = handleClipboardData(e);
|
||||
if (typeof data == "string") {
|
||||
if (data)
|
||||
host.onPaste(data);
|
||||
if (useragent.isIE)
|
||||
|
|
@ -336,7 +316,7 @@ var TextInput = function(parentNode, host) {
|
|||
if (!('oncut' in text) || !('oncopy' in text) || !('onpaste' in text)){
|
||||
event.addListener(parentNode, "keydown", function(e) {
|
||||
if ((useragent.isMac && !e.metaKey) || !e.ctrlKey)
|
||||
return;
|
||||
return;
|
||||
|
||||
switch (e.keyCode) {
|
||||
case 67:
|
||||
|
|
|
|||
|
|
@ -54,7 +54,7 @@ var FontMetrics = exports.FontMetrics = function(parentEl, interval) {
|
|||
|
||||
if (!CHAR_COUNT)
|
||||
this.$testFractionalRect();
|
||||
this.$measureNode.textContent = lang.stringRepeat("X", CHAR_COUNT);
|
||||
this.$measureNode.innerHTML = lang.stringRepeat("X", CHAR_COUNT);
|
||||
|
||||
this.$characterSize = {width: 0, height: 0};
|
||||
this.checkForSizeChanges();
|
||||
|
|
@ -121,11 +121,18 @@ var FontMetrics = exports.FontMetrics = function(parentEl, interval) {
|
|||
};
|
||||
|
||||
this.$measureSizes = function() {
|
||||
var rect = this.$measureNode.getBoundingClientRect();
|
||||
var size = {
|
||||
height: rect.height,
|
||||
width: rect.width / CHAR_COUNT
|
||||
};
|
||||
if (CHAR_COUNT === 1) {
|
||||
var rect = this.$measureNode.getBoundingClientRect();
|
||||
var size = {
|
||||
height: rect.height,
|
||||
width: rect.width
|
||||
};
|
||||
} else {
|
||||
var size = {
|
||||
height: this.$measureNode.clientHeight,
|
||||
width: this.$measureNode.clientWidth / CHAR_COUNT
|
||||
};
|
||||
}
|
||||
// Size and width can be null if the editor is not visible or
|
||||
// detached from the document
|
||||
if (size.width === 0 || size.height === 0)
|
||||
|
|
@ -134,7 +141,7 @@ var FontMetrics = exports.FontMetrics = function(parentEl, interval) {
|
|||
};
|
||||
|
||||
this.$measureCharWidth = function(ch) {
|
||||
this.$main.textContent = lang.stringRepeat(ch, CHAR_COUNT);
|
||||
this.$main.innerHTML = lang.stringRepeat(ch, CHAR_COUNT);
|
||||
var rect = this.$main.getBoundingClientRect();
|
||||
return rect.width / CHAR_COUNT;
|
||||
};
|
||||
|
|
|
|||
|
|
@ -161,7 +161,7 @@ exports.addMouseWheelListener = function(el, callback) {
|
|||
|
||||
exports.addMultiMouseDownListener = function(el, timeouts, eventHandler, callbackName) {
|
||||
var clicks = 0;
|
||||
var startX, startY, timer;
|
||||
var startX, startY, timer;
|
||||
var eventNames = {
|
||||
2: "dblclick",
|
||||
3: "tripleclick",
|
||||
|
|
@ -180,9 +180,12 @@ exports.addMultiMouseDownListener = function(el, timeouts, eventHandler, callbac
|
|||
}
|
||||
if (useragent.isIE) {
|
||||
var isNewClick = Math.abs(e.clientX - startX) > 5 || Math.abs(e.clientY - startY) > 5;
|
||||
if (isNewClick) {
|
||||
if (!timer || isNewClick)
|
||||
clicks = 1;
|
||||
}
|
||||
if (timer)
|
||||
clearTimeout(timer)
|
||||
timer = setTimeout(function() {timer = null}, timeouts[clicks - 1] || 600);
|
||||
|
||||
if (clicks == 1) {
|
||||
startX = e.clientX;
|
||||
startY = e.clientY;
|
||||
|
|
|
|||
|
|
@ -76,7 +76,8 @@ exports.isLinux = (os == "linux");
|
|||
// Windows Store JavaScript apps (aka Metro apps written in HTML5 and JavaScript) do not use the "Microsoft Internet Explorer" string in their user agent, but "MSAppHost" instead.
|
||||
exports.isIE =
|
||||
(navigator.appName == "Microsoft Internet Explorer" || navigator.appName.indexOf("MSAppHost") >= 0)
|
||||
&& parseFloat(navigator.userAgent.match(/(?:Trident\/[0-9]+[\.0-9]+;.*rv:|MSIE )([0-9]+[\.0-9]+)/)[1]);
|
||||
? parseFloat((ua.match(/(?:MSIE |Trident\/[0-9]+[\.0-9]+;.*rv:)([0-9]+[\.0-9]+)/)||[])[1])
|
||||
: parseFloat((ua.match(/(?:Trident\/[0-9]+[\.0-9]+;.*rv:)([0-9]+[\.0-9]+)/)||[])[1]); // for ie
|
||||
|
||||
exports.isOldIE = exports.isIE && exports.isIE < 9;
|
||||
|
||||
|
|
@ -84,7 +85,7 @@ exports.isOldIE = exports.isIE && exports.isIE < 9;
|
|||
exports.isGecko = exports.isMozilla = window.controllers && window.navigator.product === "Gecko";
|
||||
|
||||
// oldGecko == rev < 2.0
|
||||
exports.isOldGecko = exports.isGecko && parseInt((navigator.userAgent.match(/rv\:(\d+)/)||[])[1], 10) < 4;
|
||||
exports.isOldGecko = exports.isGecko && parseInt((ua.match(/rv\:(\d+)/)||[])[1], 10) < 4;
|
||||
|
||||
// Is this Opera
|
||||
exports.isOpera = window.opera && Object.prototype.toString.call(window.opera) == "[object Opera]";
|
||||
|
|
|
|||
|
|
@ -181,6 +181,7 @@ function DefaultHandlers(mouseHandler) {
|
|||
this.selectAllEnd =
|
||||
this.selectByWordsEnd =
|
||||
this.selectByLinesEnd = function() {
|
||||
this.$clickSelection = null;
|
||||
this.editor.unsetStyle("ace_selecting");
|
||||
if (this.editor.renderer.scroller.releaseCapture) {
|
||||
this.editor.renderer.scroller.releaseCapture();
|
||||
|
|
|
|||
|
|
@ -49,10 +49,10 @@ var MouseHandler = function(editor) {
|
|||
var mouseTarget = editor.renderer.getMouseEventTarget();
|
||||
event.addListener(mouseTarget, "click", this.onMouseEvent.bind(this, "click"));
|
||||
event.addListener(mouseTarget, "mousemove", this.onMouseMove.bind(this, "mousemove"));
|
||||
event.addMultiMouseDownListener(mouseTarget, [300, 300, 250], this, "onMouseEvent");
|
||||
event.addMultiMouseDownListener(mouseTarget, [400, 300, 250], this, "onMouseEvent");
|
||||
if (editor.renderer.scrollBarV) {
|
||||
event.addMultiMouseDownListener(editor.renderer.scrollBarV.inner, [300, 300, 250], this, "onMouseEvent");
|
||||
event.addMultiMouseDownListener(editor.renderer.scrollBarH.inner, [300, 300, 250], this, "onMouseEvent");
|
||||
event.addMultiMouseDownListener(editor.renderer.scrollBarV.inner, [400, 300, 250], this, "onMouseEvent");
|
||||
event.addMultiMouseDownListener(editor.renderer.scrollBarH.inner, [400, 300, 250], this, "onMouseEvent");
|
||||
}
|
||||
event.addMouseWheelListener(editor.container, this.onMouseWheel.bind(this, "mousewheel"));
|
||||
|
||||
|
|
@ -112,6 +112,12 @@ var MouseHandler = function(editor) {
|
|||
|
||||
var self = this;
|
||||
var onMouseMove = function(e) {
|
||||
if (!e) return;
|
||||
// if editor is loaded inside iframe, and mouseup event is outside
|
||||
// we won't recieve it, so we cancel on first mousemove without button
|
||||
if (useragent.isWebKit && !e.which && self.releaseMouse)
|
||||
return self.releaseMouse();
|
||||
|
||||
self.x = e.clientX;
|
||||
self.y = e.clientY;
|
||||
mouseMoveHandler && mouseMoveHandler(e);
|
||||
|
|
@ -123,14 +129,14 @@ var MouseHandler = function(editor) {
|
|||
clearInterval(timerId);
|
||||
onCaptureInterval();
|
||||
self[self.state + "End"] && self[self.state + "End"](e);
|
||||
self.$clickSelection = null;
|
||||
self.state = "";
|
||||
if (renderer.$keepTextAreaAtCursor == null) {
|
||||
renderer.$keepTextAreaAtCursor = true;
|
||||
renderer.$moveTextAreaToCursor();
|
||||
}
|
||||
self.isMousePressed = false;
|
||||
self.$onCaptureMouseMove = self.releaseMouse = null;
|
||||
self.onMouseEvent("mouseup", e);
|
||||
e && self.onMouseEvent("mouseup", e);
|
||||
};
|
||||
|
||||
var onCaptureInterval = function() {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue