Merge branch 'develop'

g1eb · Dec 15, 2016 · f6029c5 · f6029c5
2 parents 6449e30 + cf1237d
commit f6029c5
Show file tree

Hide file tree

Showing 6 changed files with 50 additions and 20 deletions.
diff --git a/bower.json b/bower.json
@@ -1,6 +1,6 @@
 {
   "name": "cli-plugin",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "Command line interface plugin for web applications.",
   "homepage": "https://github.com/g1eb/cli-plugin#readme",
   "authors": [

diff --git a/dist/cli-plugin.min.css b/dist/cli-plugin.min.css
diff --git a/dist/cli-plugin.min.js b/dist/cli-plugin.min.js
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "cli-plugin",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "Command line interface plugin for web applications.",
   "homepage": "https://github.com/g1eb/cli-plugin#readme",
   "author": "g1eb",

diff --git a/src/cli-plugin.css b/src/cli-plugin.css
@@ -3,7 +3,7 @@
  */
 .cli-plugin {
   display: block;
-  position: absolute;
+  position: fixed;
   top: 50px;
   left: 50px;
   bottom: 50px;
@@ -89,39 +89,60 @@
   top: 0;
   right: 0;
   bottom: 0;
+  opacity: 1;
   background-color: black;
 
-  -webkit-animation: blink 1.5s ease-in-out 0s infinite;
-  -moz-animation: blink 1.5s ease-in-out 0s infinite;
-  -ms-animation: blink 1.5s ease-in-out 0s infinite;
-  -o-animation: blink 1.5s ease-in-out 0s infinite;
-  animation: blink 1.5s ease-in-out 0s infinite;
+  -webkit-animation: blink 1.5s linear 0s infinite;
+  -moz-animation: blink 1.5s linear 0s infinite;
+  -ms-animation: blink 1.5s linear 0s infinite;
+  -o-animation: blink 1.5s linear 0s infinite;
+  animation: blink 1.5s linear 0s infinite;
 }
 .cli-plugin .input.active .cursor {
   display: none;
 }
 
 @-webkit-keyframes blink {
-  40%  { background-color: transparent; }
-  60%  { background-color: transparent; }
+  0% { opacity: 0; }
+  30% { opacity: 0; }
+  35% { opacity: 1; }
+  65% { opacity: 1; }
+  70% { opacity: 0; }
+  100% { opacity: 0; }
 }
 
 @-moz-keyframes blink {
-  40%  { background-color: transparent; }
-  60%  { background-color: transparent; }
+  0% { opacity: 0; }
+  30% { opacity: 0; }
+  35% { opacity: 1; }
+  65% { opacity: 1; }
+  70% { opacity: 0; }
+  100% { opacity: 0; }
 }
 
 @-ms-keyframes blink {
-  40%  { background-color: transparent; }
-  60%  { background-color: transparent; }
+  0% { opacity: 0; }
+  30% { opacity: 0; }
+  35% { opacity: 1; }
+  65% { opacity: 1; }
+  70% { opacity: 0; }
+  100% { opacity: 0; }
 }
 
 @-o-keyframes blink {
-  40%  { background-color: transparent; }
-  60%  { background-color: transparent; }
+  0% { opacity: 0; }
+  30% { opacity: 0; }
+  35% { opacity: 1; }
+  65% { opacity: 1; }
+  70% { opacity: 0; }
+  100% { opacity: 0; }
 }
 
 @keyframes blink {
-  40%  { background-color: transparent; }
-  60%  { background-color: transparent; }
+  0% { opacity: 0; }
+  30% { opacity: 0; }
+  35% { opacity: 1; }
+  65% { opacity: 1; }
+  70% { opacity: 0; }
+  100% { opacity: 0; }
 }
diff --git a/src/cli-plugin.js b/src/cli-plugin.js
@@ -57,6 +57,13 @@ var cliPlugin = {
     cliPlugin.inputElement.setAttribute('spellcheck', 'false');
     cliPlugin.containerElement.appendChild(cliPlugin.inputElement);
 
+    cliPlugin.addCursor();
+  },
+
+  /**
+   * Add blinking cursor to input element
+   */
+  addCursor: function () {
     cliPlugin.cursorElement = document.createElement('div');
     cliPlugin.cursorElement.setAttribute('class', 'cursor');
     cliPlugin.cursorElement.setAttribute('style', 'background:'+cliPlugin.settings.cursorColor);
@@ -127,6 +134,7 @@ var cliPlugin = {
       cmd = cliPlugin.history[--cliPlugin.index];
     }
     cliPlugin.inputElement.innerHTML = cmd;
+    cliPlugin.addCursor();
   },
 
   /**
@@ -138,6 +146,7 @@ var cliPlugin = {
       cmd = cliPlugin.history[++cliPlugin.index] || '';
     }
     cliPlugin.inputElement.innerHTML = cmd;
+    cliPlugin.addCursor();
   },
 
   /**