medium-editor-tc-mention - npm Package Compare versions

Comparing version 1.4.0 to 1.4.1

CHANGELOG.md

@@ -0,1 +1,11 @@
+<a name="1.4.1"></a>
+## [1.4.1](https://github.com/tomchentw/medium-editor-tc-mention/compare/v1.4.0...v1.4.1) (2015-11-11)
+
+
+### Bug Fixes
+
+* **TCMention:** add autoHideOnBlurDelay to options ([2227777](https://github.com/tomchentw/medium-editor-tc-mention/commit/2227777)), closes [#3](https://github.com/tomchentw/medium-editor-tc-mention/issues/3)
+
+
+
 <a name="1.4.0"></a>
@@ -2,0 +12,0 @@ # [1.4.0](https://github.com/tomchentw/medium-editor-tc-mention/compare/v1.3.0...v1.4.0) (2015-11-11)

lib/index.js

@@ -92,2 +92,4 @@ "use strict";
 
+    autoHideOnBlurDelay: 300,
+
     init: function init() {
@@ -100,2 +102,3 @@ this.mentionPanel = this.createPanel();
         this.subscribe("editableBlur", this.handleBlur.bind(this));
+        this.subscribe("focus", this.handleFocus.bind(this));
         //
@@ -178,5 +181,9 @@ // instance variables
     handleBlur: function handleBlur(event) {
-        this.hidePanel();
+        this.autoHideTimeoutId = setTimeout(this.hidePanel.bind(this), this.autoHideOnBlurDelay);
     },
 
+    handleFocus: function handleFocus(event) {
+        clearTimeout(this.autoHideTimeoutId);
+    },
+
     handleTriggerKeydown: function handleTriggerKeydown(trigger, event) {
@@ -183,0 +190,0 @@ this.trigger = trigger;

lib/index.min.js

@@ -1,2 +0,2 @@
-!function(e,t){if("object"==typeof exports&&"object"==typeof module)module.exports=t(require("MediumEditor"));else if("function"==typeof define&&define.amd)define(["MediumEditor"],t);else{var i=t("object"==typeof exports?require("MediumEditor"):e.MediumEditor);for(var n in i)("object"==typeof exports?exports:e)[n]=i[n]}}(this,function(e){return function(e){function t(n){if(i[n])return i[n].exports;var a=i[n]={exports:{},id:n,loaded:!1};return e[n].call(a.exports,a,a.exports,t),a.loaded=!0,a.exports}var i={};return t.m=e,t.c=i,t.p="",t(0)}([function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{"default":e}}function a(e,t){var i,n,a=e.parentNode;for(o["default"].util.unwrap(e,t),n=a.lastChild;i=n.previousSibling;)3===n.nodeType&&3===i.nodeType&&(i.textContent+=n.textContent,a.removeChild(n)),n=i}Object.defineProperty(t,"__esModule",{value:!0}),t.unwrapForTextNode=a;var s=i(1),o=n(s),l=50;t.atKeyCode=l;var r=51;t.hashKeyCode=r;var d=o["default"].Extension.extend({name:"mention",extraClassName:"",extraActiveClassName:"",tagName:"strong",renderPanelContent:function(){},destroyPanelContent:function(){},activeTriggerList:["@"],triggerClassNameMap:{"#":"medium-editor-mention-hash","@":"medium-editor-mention-at"},init:function(){this.mentionPanel=this.createPanel(),this.getEditorOption("elementsContainer").appendChild(this.mentionPanel),this.subscribe("editableKeydown",this.handleKeydown.bind(this)),this.subscribe("editableBlur",this.handleBlur.bind(this)),this.trigger=null,this.triggerClassName=null,this.activeMentionAt=null},createPanel:function(){var e=this.document.createElement("div");return e.classList.add("medium-editor-mention-panel"),this.extraClassName&&e.classList.add(this.extraClassName),e.innerHTML=this.getTemplate(),e},getTemplate:function(){return"<p>\nYour mention implementation\n</p>"},destroy:function(){this.mentionPanel&&(this.mentionPanel.parentNode&&(this.destroyPanelContent(this.mentionPanel),this.mentionPanel.parentNode.removeChild(this.mentionPanel)),delete this.mentionPanel)},handleKeydown:function(e){switch(o["default"].util.getKeyCode(e)){case o["default"].util.keyCode.ESCAPE:this.hidePanel();break;case o["default"].util.keyCode.SPACE:this.hidePanel();break;case o["default"].util.keyCode.ENTER:this.hidePanel();break;case o["default"].util.keyCode.BACKSPACE:var t=o["default"].selection.getSelectionRange(this.document),i=t.startOffset,n=t.endOffset;1===i&&1===n?this.hidePanel():this.updatePanelContentWithDelay();break;case l:e.shiftKey&&-1!==this.activeTriggerList.indexOf("@")?this.handleTriggerKeydown("@",e):this.updatePanelContentWithDelay();break;case r:e.shiftKey&&-1!==this.activeTriggerList.indexOf("#")?this.handleTriggerKeydown("#",e):this.updatePanelContentWithDelay();break;default:this.updatePanelContentWithDelay()}},handleBlur:function(e){this.hidePanel()},handleTriggerKeydown:function(e,t){this.trigger=e,this.triggerClassName=this.triggerClassNameMap[this.trigger],t.preventDefault();var i=o["default"].selection.getSelectionStart(this.document);i.classList.contains(this.triggerClassName)||(this.hidePanel(),this.showPanel(),this.positionPanel(),this.updatePanelContentWithDelay())},handleSelectMention:function(e){if(e){var t=this.activeMentionAt.childNodes[0];t.textContent=e,o["default"].selection.select(this.document,t,e.length),this.hidePanel()}else this.hidePanel()},hidePanel:function(){this.mentionPanel.classList.remove("medium-editor-mention-panel-active"),this.extraActiveClassName&&this.mentionPanel.classList.remove(this.extraActiveClassName),this.activeMentionAt&&(this.base.saveSelection(),a(this.activeMentionAt,this.document),this.base.restoreSelection(),this.activeMentionAt=null)},showPanel:function(){var e="<"+this.tagName+' class="'+this.triggerClassName+'">'+this.trigger+"</"+this.tagName+">";o["default"].util.insertHTMLCommand(this.document,e),this.mentionPanel.classList.contains("medium-editor-mention-panel-active")||(this.activeMentionAt=this.document.querySelector("."+this.triggerClassName),this.mentionPanel.classList.add("medium-editor-mention-panel-active"),this.extraActiveClassName&&this.mentionPanel.classList.add(this.extraActiveClassName))},positionPanel:function(){var e=this.activeMentionAt.getBoundingClientRect(),t=e.bottom,i=e.left,n=e.width,a=this.window,s=a.pageXOffset,o=a.pageYOffset;this.mentionPanel.style.top=o+t+"px",this.mentionPanel.style.left=s+i+n+"px"},updatePanelContent:function(){var e=this.activeMentionAt.textContent;this.positionPanel(),this.renderPanelContent(this.mentionPanel,e,this.handleSelectMention.bind(this))},updatePanelContentWithDelay:function(){this.activeMentionAt&&this.activeMentionAt===o["default"].selection.getSelectionStart(this.document)&&this.base.delay(this.updatePanelContent.bind(this))}});t.TCMention=d,t["default"]=d},function(t,i){t.exports=e}])});
+!function(e,t){if("object"==typeof exports&&"object"==typeof module)module.exports=t(require("MediumEditor"));else if("function"==typeof define&&define.amd)define(["MediumEditor"],t);else{var i=t("object"==typeof exports?require("MediumEditor"):e.MediumEditor);for(var n in i)("object"==typeof exports?exports:e)[n]=i[n]}}(this,function(e){return function(e){function t(n){if(i[n])return i[n].exports;var a=i[n]={exports:{},id:n,loaded:!1};return e[n].call(a.exports,a,a.exports,t),a.loaded=!0,a.exports}var i={};return t.m=e,t.c=i,t.p="",t(0)}([function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{"default":e}}function a(e,t){var i,n,a=e.parentNode;for(o["default"].util.unwrap(e,t),n=a.lastChild;i=n.previousSibling;)3===n.nodeType&&3===i.nodeType&&(i.textContent+=n.textContent,a.removeChild(n)),n=i}Object.defineProperty(t,"__esModule",{value:!0}),t.unwrapForTextNode=a;var s=i(1),o=n(s),l=50;t.atKeyCode=l;var r=51;t.hashKeyCode=r;var d=o["default"].Extension.extend({name:"mention",extraClassName:"",extraActiveClassName:"",tagName:"strong",renderPanelContent:function(){},destroyPanelContent:function(){},activeTriggerList:["@"],triggerClassNameMap:{"#":"medium-editor-mention-hash","@":"medium-editor-mention-at"},autoHideOnBlurDelay:300,init:function(){this.mentionPanel=this.createPanel(),this.getEditorOption("elementsContainer").appendChild(this.mentionPanel),this.subscribe("editableKeydown",this.handleKeydown.bind(this)),this.subscribe("editableBlur",this.handleBlur.bind(this)),this.subscribe("focus",this.handleFocus.bind(this)),this.trigger=null,this.triggerClassName=null,this.activeMentionAt=null},createPanel:function(){var e=this.document.createElement("div");return e.classList.add("medium-editor-mention-panel"),this.extraClassName&&e.classList.add(this.extraClassName),e.innerHTML=this.getTemplate(),e},getTemplate:function(){return"<p>\nYour mention implementation\n</p>"},destroy:function(){this.mentionPanel&&(this.mentionPanel.parentNode&&(this.destroyPanelContent(this.mentionPanel),this.mentionPanel.parentNode.removeChild(this.mentionPanel)),delete this.mentionPanel)},handleKeydown:function(e){switch(o["default"].util.getKeyCode(e)){case o["default"].util.keyCode.ESCAPE:this.hidePanel();break;case o["default"].util.keyCode.SPACE:this.hidePanel();break;case o["default"].util.keyCode.ENTER:this.hidePanel();break;case o["default"].util.keyCode.BACKSPACE:var t=o["default"].selection.getSelectionRange(this.document),i=t.startOffset,n=t.endOffset;1===i&&1===n?this.hidePanel():this.updatePanelContentWithDelay();break;case l:e.shiftKey&&-1!==this.activeTriggerList.indexOf("@")?this.handleTriggerKeydown("@",e):this.updatePanelContentWithDelay();break;case r:e.shiftKey&&-1!==this.activeTriggerList.indexOf("#")?this.handleTriggerKeydown("#",e):this.updatePanelContentWithDelay();break;default:this.updatePanelContentWithDelay()}},handleBlur:function(e){this.autoHideTimeoutId=setTimeout(this.hidePanel.bind(this),this.autoHideOnBlurDelay)},handleFocus:function(e){clearTimeout(this.autoHideTimeoutId)},handleTriggerKeydown:function(e,t){this.trigger=e,this.triggerClassName=this.triggerClassNameMap[this.trigger],t.preventDefault();var i=o["default"].selection.getSelectionStart(this.document);i.classList.contains(this.triggerClassName)||(this.hidePanel(),this.showPanel(),this.positionPanel(),this.updatePanelContentWithDelay())},handleSelectMention:function(e){if(e){var t=this.activeMentionAt.childNodes[0];t.textContent=e,o["default"].selection.select(this.document,t,e.length),this.hidePanel()}else this.hidePanel()},hidePanel:function(){this.mentionPanel.classList.remove("medium-editor-mention-panel-active"),this.extraActiveClassName&&this.mentionPanel.classList.remove(this.extraActiveClassName),this.activeMentionAt&&(this.base.saveSelection(),a(this.activeMentionAt,this.document),this.base.restoreSelection(),this.activeMentionAt=null)},showPanel:function(){var e="<"+this.tagName+' class="'+this.triggerClassName+'">'+this.trigger+"</"+this.tagName+">";o["default"].util.insertHTMLCommand(this.document,e),this.mentionPanel.classList.contains("medium-editor-mention-panel-active")||(this.activeMentionAt=this.document.querySelector("."+this.triggerClassName),this.mentionPanel.classList.add("medium-editor-mention-panel-active"),this.extraActiveClassName&&this.mentionPanel.classList.add(this.extraActiveClassName))},positionPanel:function(){var e=this.activeMentionAt.getBoundingClientRect(),t=e.bottom,i=e.left,n=e.width,a=this.window,s=a.pageXOffset,o=a.pageYOffset;this.mentionPanel.style.top=o+t+"px",this.mentionPanel.style.left=s+i+n+"px"},updatePanelContent:function(){var e=this.activeMentionAt.textContent;this.positionPanel(),this.renderPanelContent(this.mentionPanel,e,this.handleSelectMention.bind(this))},updatePanelContentWithDelay:function(){this.activeMentionAt&&this.activeMentionAt===o["default"].selection.getSelectionStart(this.document)&&this.base.delay(this.updatePanelContent.bind(this))}});t.TCMention=d,t["default"]=d},function(t,i){t.exports=e}])});
 //# sourceMappingURL=index.min.js.map

package.json

 {
   "name": "medium-editor-tc-mention",
-  "version": "1.4.0",
+  "version": "1.4.1",
   "description": "MediumEditor extension for mention panels like @username or #tagging",
@@ -5,0 +5,0 @@ "main": "lib/index.js",

README.md

@@ -6,3 +6,3 @@ # medium-editor-tc-mention [![Travis CI][travis-image]][travis-url] [![Quality][codeclimate-image]][codeclimate-url] [![Coverage][codeclimate-coverage-image]][codeclimate-coverage-url] [![Dependencies][gemnasium-image]][gemnasium-url] [![Gitter][gitter-image]][gitter-url]
 
-<img width="636" alt="screen shot 2015-10-23 at 4 37 56 pm" src="https://cloud.githubusercontent.com/assets/922234/10689707/d2848ab8-79af-11e5-8afc-675a162ec4bf.png">
+<img width="824" alt="screen shot 2015-11-11 at 4 29 30 pm" src="https://cloud.githubusercontent.com/assets/922234/11088093/9b00fe2e-889a-11e5-801d-b6f79c568dde.png">
 
@@ -9,0 +9,0 @@

src/index.js

@@ -78,2 +78,4 @@ import MediumEditor from "medium-editor";
 
+    autoHideOnBlurDelay: 300,
+
     init () {
@@ -86,2 +88,3 @@ this.mentionPanel = this.createPanel();
         this.subscribe(`editableBlur`, ::this.handleBlur);
+        this.subscribe(`focus`, ::this.handleFocus);
         //
@@ -164,5 +167,9 @@ // instance variables
     handleBlur (event) {
-        this.hidePanel();
+        this.autoHideTimeoutId = setTimeout(::this.hidePanel, this.autoHideOnBlurDelay);
     },
 
+    handleFocus (event) {
+        clearTimeout(this.autoHideTimeoutId);
+    },
+
     handleTriggerKeydown (trigger, event) {
@@ -169,0 +176,0 @@ this.trigger = trigger;

No alert changes

Improved metrics

Total package byte prevSize

66412

increased by2.81%

Lines of code

502

increased by2.24%

No dependency changes