Merge pull request #479 from Tyriar/478_cursorBlink_refresh

Apply cursorBlink via setOption

demo/main.js

@@ -28,7 +28,9 @@ function setTerminalSize () {
 colsElement.addEventListener('change', setTerminalSize);
 rowsElement.addEventListener('change', setTerminalSize);
 
-optionElements.cursorBlink.addEventListener('change', createTerminal);
+optionElements.cursorBlink.addEventListener('change', function () {
+  term.setOption('cursorBlink', optionElements.cursorBlink.checked);
+});
 optionElements.scrollback.addEventListener('change', function () {
   terminal.setOption('scrollback', parseInt(optionElements.scrollback.value, 10));
 });

src/test/test.js

@@ -23,6 +23,11 @@ describe('xterm.js', function() {
       xterm.writeBuffer.push(data);
       xterm.innerWrite();
     };
+    xterm.element = {
+      classList: {
+        toggle: function(){}
+      }
+    };
   });
 
   describe('getOption', function() {

src/xterm.css

@@ -82,11 +82,11 @@
     background-color: transparent;
 }
 
-.terminal.focus .terminal-cursor.blinking {
-    animation: blink-cursor 1.2s infinite step-end;
+.terminal.focus.xterm-cursor-blink .terminal-cursor {
+    animation: cursor-blink 1.2s infinite step-end;
 }
 
-@keyframes blink-cursor {
+@keyframes cursor-blink {
     0% {
         background-color: #fff;
         color: #000;

src/xterm.js

@@ -425,6 +425,9 @@ Terminal.prototype.setOption = function(key, value) {
   }
   this[key] = value;
   this.options[key] = value;
+  switch (key) {
+    case 'cursorBlink': this.element.classList.toggle('xterm-cursor-blink', value); break;
+  }
 };
 
 /**
@@ -581,6 +584,7 @@ Terminal.prototype.open = function(parent) {
   this.element.classList.add('terminal');
   this.element.classList.add('xterm');
   this.element.classList.add('xterm-theme-' + this.theme);
+  this.element.classList.toggle('xterm-cursor-blink', this.options.cursorBlink);
 
   this.element.style.height
   this.element.setAttribute('tabindex', 0);
@@ -1193,11 +1197,7 @@ Terminal.prototype.refresh = function(start, end) {
         }
         if (data !== this.defAttr) {
           if (data === -1) {
-            out += '<span class="reverse-video terminal-cursor';
-            if (this.cursorBlink) {
-              out += ' blinking';
-            }
-            out += '">';
+            out += '<span class="reverse-video terminal-cursor">';
           } else {
             var classNames = [];