From 048d9589c740fec223a10323b0a148c9c173bd10 Mon Sep 17 00:00:00 2001 From: nightwing Date: Thu, 30 Jan 2014 21:19:36 +0400 Subject: [PATCH] remove slow cursor[style*] css rule --- lib/ace/css/editor.css | 8 +++---- lib/ace/layer/cursor.js | 53 +++++++++++++++++++++++++++-------------- 2 files changed, 39 insertions(+), 22 deletions(-) diff --git a/lib/ace/css/editor.css b/lib/ace/css/editor.css index 25d3cecb..d4f6bb67 100644 --- a/lib/ace/css/editor.css +++ b/lib/ace/css/editor.css @@ -63,6 +63,10 @@ left: 0; cursor: default; z-index: 4; + -ms-user-select: none; + -moz-user-select: none; + -webkit-user-select: none; + user-select: none; } .ace_gutter-active-line { @@ -227,10 +231,6 @@ transition: opacity 0.18s; } -.ace_cursor[style*="opacity: 0"]{ - -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; -} - .ace_editor.ace_multiselect .ace_cursor { border-left-width: 1px; } diff --git a/lib/ace/layer/cursor.js b/lib/ace/layer/cursor.js index 26ade52b..aaf3ffec 100644 --- a/lib/ace/layer/cursor.js +++ b/lib/ace/layer/cursor.js @@ -32,11 +32,15 @@ define(function(require, exports, module) { "use strict"; var dom = require("../lib/dom"); +var IE8; var Cursor = function(parentEl) { this.element = dom.createElement("div"); this.element.className = "ace_layer ace_cursor-layer"; parentEl.appendChild(this.element); + + if (IE8 === undefined) + IE8 = "opacity" in this.element; this.isVisible = false; this.isBlinking = true; @@ -46,9 +50,22 @@ var Cursor = function(parentEl) { this.cursors = []; this.cursor = this.addCursor(); dom.addCssClass(this.element, "ace_hidden-cursors"); + this.$updateCursors = this.$updateVisibility.bind(this); }; (function() { + + this.$updateVisibility = function(val) { + var cursors = this.cursors; + for (var i = cursors.length; i--; ) + cursors[i].style.visibility = val ? "" : "hidden"; + }; + this.$updateOpacity = function(val) { + var cursors = this.cursors; + for (var i = cursors.length; i--; ) + cursors[i].style.opacity = val ? "" : "0"; + }; + this.$padding = 0; this.setPadding = function(padding) { @@ -74,12 +91,13 @@ var Cursor = function(parentEl) { }; this.setSmoothBlinking = function(smoothBlinking) { - if (smoothBlinking != this.smoothBlinking) { + if (smoothBlinking != this.smoothBlinking && !IE8) { this.smoothBlinking = smoothBlinking; - if (smoothBlinking) - dom.addCssClass(this.element, "ace_smooth-blinking"); - else - dom.removeCssClass(this.element, "ace_smooth-blinking"); + dom.setCssClass(this.element, "ace_smooth-blinking", smoothBlinking); + this.$updateCursors(true); + this.$updateCursors = (smoothBlinking + ? this.$updateOpacity + : this.$updateVisibility).bind(this); this.restartTimer(); } }; @@ -113,35 +131,34 @@ var Cursor = function(parentEl) { }; this.restartTimer = function() { + var update = this.$updateCursors; clearInterval(this.intervalId); clearTimeout(this.timeoutId); - if (this.smoothBlinking) + if (this.smoothBlinking) { dom.removeCssClass(this.element, "ace_smooth-blinking"); - for (var i = this.cursors.length; i--; ) - this.cursors[i].style.opacity = ""; + } + + update(true); if (!this.isBlinking || !this.blinkInterval || !this.isVisible) return; - if (this.smoothBlinking) + if (this.smoothBlinking) { setTimeout(function(){ dom.addCssClass(this.element, "ace_smooth-blinking"); }.bind(this)); - + } + var blink = function(){ this.timeoutId = setTimeout(function() { - for (var i = this.cursors.length; i--; ) { - this.cursors[i].style.opacity = 0; - } - }.bind(this), 0.6 * this.blinkInterval); + update(false); + }, 0.6 * this.blinkInterval); }.bind(this); this.intervalId = setInterval(function() { - for (var i = this.cursors.length; i--; ) { - this.cursors[i].style.opacity = ""; - } + update(true); blink(); - }.bind(this), this.blinkInterval); + }, this.blinkInterval); blink(); };