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

Comparing version 1.3.0 to 1.4.0

CHANGELOG.md

@@ -0,1 +1,15 @@
+<a name="1.4.0"></a>
+# [1.4.0](https://github.com/tomchentw/medium-editor-tc-mention/compare/v1.3.0...v1.4.0) (2015-11-11)
+
+
+### Bug Fixes
+
+* **TCMention:** should include pageXOffset for left as well ([7f24f3e](https://github.com/tomchentw/medium-editor-tc-mention/commit/7f24f3e))
+
+### Features
+
+* **TCMention:** panel position to be the end of activeMentionAt element ([cb7768a](https://github.com/tomchentw/medium-editor-tc-mention/commit/cb7768a))
+
+
+
 <a name="1.3.0"></a>
@@ -2,0 +16,0 @@ # [1.3.0](https://github.com/tomchentw/medium-editor-tc-mention/compare/v1.2.2...v1.3.0) (2015-11-03)

lib/index.js

@@ -246,6 +246,9 @@ "use strict";
         var left = _activeMentionAt$getBoundingClientRect.left;
-        var pageYOffset = this.window.pageYOffset;
+        var width = _activeMentionAt$getBoundingClientRect.width;
+        var _window = this.window;
+        var pageXOffset = _window.pageXOffset;
+        var pageYOffset = _window.pageYOffset;
 
-        this.mentionPanel.style.top = bottom + pageYOffset + "px";
-        this.mentionPanel.style.left = left + "px";
+        this.mentionPanel.style.top = pageYOffset + bottom + "px";
+        this.mentionPanel.style.left = pageXOffset + left + width + "px";
     },
@@ -256,2 +259,3 @@
 
+        this.positionPanel();
         this.renderPanelContent(this.mentionPanel, textContent, this.handleSelectMention.bind(this));
@@ -258,0 +262,0 @@ },

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=this.window.pageYOffset;this.mentionPanel.style.top=t+n+"px",this.mentionPanel.style.left=i+"px"},updatePanelContent:function(){var e=this.activeMentionAt.textContent;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"},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}])});
 //# sourceMappingURL=index.min.js.map

package.json

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

src/index.js

@@ -228,7 +228,7 @@ import MediumEditor from "medium-editor";
     positionPanel () {
-        const {bottom, left} = this.activeMentionAt.getBoundingClientRect();
-        const {pageYOffset} = this.window;
+        const {bottom, left, width} = this.activeMentionAt.getBoundingClientRect();
+        const {pageXOffset, pageYOffset} = this.window;
 
-        this.mentionPanel.style.top = `${ bottom + pageYOffset }px`;
-        this.mentionPanel.style.left = `${ left }px`;
+        this.mentionPanel.style.top = `${ pageYOffset + bottom }px`;
+        this.mentionPanel.style.left = `${ pageXOffset + left + width }px`;
     },
@@ -238,2 +238,3 @@
         const {textContent} = this.activeMentionAt;
+        this.positionPanel();
         this.renderPanelContent(this.mentionPanel, textContent, ::this.handleSelectMention);
@@ -240,0 +241,0 @@ },

No alert changes

Improved metrics

Total package byte prevSize

64597

increased by1.85%

Lines of code

491

increased by1.03%

No dependency changes