From a47af02e1b3a5d31ed2e286f508d814334dbfab1 Mon Sep 17 00:00:00 2001 From: Dessalines Date: Thu, 29 Aug 2019 21:38:06 -0700 Subject: [PATCH] Fixing tribute. --- ui/assets/libs/tribute.min.js | 2 ++ ui/src/components/comment-form.tsx | 6 +++--- ui/src/index.html | 1 + ui/yarn.lock | 2 +- 4 files changed, 7 insertions(+), 4 deletions(-) create mode 100644 ui/assets/libs/tribute.min.js diff --git a/ui/assets/libs/tribute.min.js b/ui/assets/libs/tribute.min.js new file mode 100644 index 00000000..b2295fa9 --- /dev/null +++ b/ui/assets/libs/tribute.min.js @@ -0,0 +1,2 @@ +!function(e){if("object"==typeof exports&&"undefined"!=typeof module)module.exports=e();else if("function"==typeof define&&define.amd)define([],e);else{("undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:this).Tribute=e()}}(function(){return function o(u,a,l){function s(t,e){if(!a[t]){if(!u[t]){var n="function"==typeof require&&require;if(!e&&n)return n(t,!0);if(c)return c(t,!0);var i=new Error("Cannot find module '"+t+"'");throw i.code="MODULE_NOT_FOUND",i}var r=a[t]={exports:{}};u[t][0].call(r.exports,function(e){return s(u[t][1][e]||e)},r,r.exports,o,u,a,l)}return a[t].exports}for(var c="function"==typeof require&&require,e=0;e",post:u.current.collection.searchOpts.post||"",skip:u.current.collection.searchOpts.skip,extract:function(e){if("string"==typeof u.current.collection.lookup)return e[u.current.collection.lookup];if("function"==typeof u.current.collection.lookup)return u.current.collection.lookup(e,u.current.mentionText);throw new Error("Invalid lookup attribute, lookup must be string or function.")}});u.current.filteredItems=t;var n=u.menu.querySelector("ul");if(u.range.positionMenuAtCaret(o),!t.length){var i=new CustomEvent("tribute-no-match",{detail:u.menu});return u.current.element.dispatchEvent(i),void("function"==typeof u.current.collection.noMatchTemplate&&!u.current.collection.noMatchTemplate()||!u.current.collection.noMatchTemplate?u.hideMenu():"function"==typeof u.current.collection.noMatchTemplate?n.innerHTML=u.current.collection.noMatchTemplate():n.innerHTML=u.current.collection.noMatchTemplate)}u.current.collection.menuItemLimit&&(t=t.slice(0,u.current.collection.menuItemLimit)),n.innerHTML="";var r=u.range.getDocument().createDocumentFragment();t.forEach(function(e,t){var n=u.range.getDocument().createElement("li");n.setAttribute("data-index",t),n.addEventListener("mousemove",function(e){var t=u._findLiTarget(e.target),n=a(t,2),i=(n[0],n[1]);0!==e.movementY&&u.events.setActiveLi(i)}),u.menuSelected===t&&(n.className=u.current.collection.selectClass),n.innerHTML=u.current.collection.menuItemTemplate(e),r.appendChild(n)}),n.appendChild(r)}};"function"==typeof this.current.collection.values?this.current.collection.values(this.current.mentionText,t):t(this.current.collection.values)}}},{key:"_findLiTarget",value:function(e){if(!e)return[];var t=e.getAttribute("data-index");return t?[e,t]:this._findLiTarget(e.parentNode)}},{key:"showMenuForCollection",value:function(e,t){e!==document.activeElement&&this.placeCaretAtEnd(e),this.current.collection=this.collection[t||0],this.current.externalTrigger=!0,(this.current.element=e).isContentEditable?this.insertTextAtCursor(this.current.collection.trigger):this.insertAtCaret(e,this.current.collection.trigger),this.showMenuFor(e)}},{key:"placeCaretAtEnd",value:function(e){if(e.focus(),void 0!==window.getSelection&&void 0!==document.createRange){var t=document.createRange();t.selectNodeContents(e),t.collapse(!1);var n=window.getSelection();n.removeAllRanges(),n.addRange(t)}else if(void 0!==document.body.createTextRange){var i=document.body.createTextRange();i.moveToElementText(e),i.collapse(!1),i.select()}}},{key:"insertTextAtCursor",value:function(e){var t,n;(n=(t=window.getSelection()).getRangeAt(0)).deleteContents();var i=document.createTextNode(e);n.insertNode(i),n.selectNodeContents(i),n.collapse(!1),t.removeAllRanges(),t.addRange(n)}},{key:"insertAtCaret",value:function(e,t){var n=e.scrollTop,i=e.selectionStart,r=e.value.substring(0,i),o=e.value.substring(e.selectionEnd,e.value.length);e.value=r+t+o,i+=t.length,e.selectionStart=i,e.selectionEnd=i,e.focus(),e.scrollTop=n}},{key:"hideMenu",value:function(){this.menu&&(this.menu.style.cssText="display: none;",this.isActive=!1,this.menuSelected=0,this.current={})}},{key:"selectItemAtIndex",value:function(e,t){if("number"==typeof(e=parseInt(e))&&!isNaN(e)){var n=this.current.filteredItems[e],i=this.current.collection.selectTemplate(n);null!==i&&this.replaceText(i,t,n)}}},{key:"replaceText",value:function(e,t,n){this.range.replaceTriggerText(e,!0,!0,t,n)}},{key:"_append",value:function(e,t,n){if("function"==typeof e.values)throw new Error("Unable to append to values, as it is a function.");e.values=n?t:e.values.concat(t)}},{key:"append",value:function(e,t,n){var i=parseInt(e);if("number"!=typeof i)throw new Error("please provide an index for the collection to update.");var r=this.collection[i];this._append(r,t,n)}},{key:"appendCurrent",value:function(e,t){if(!this.isActive)throw new Error("No active state. Please use append instead and pass an index.");this._append(this.current.collection,e,t)}},{key:"detach",value:function(e){if(!e)throw new Error("[Tribute] Must pass in a DOM node or NodeList.");if("undefined"!=typeof jQuery&&e instanceof jQuery&&(e=e.get()),e.constructor===NodeList||e.constructor===HTMLCollection||e.constructor===Array)for(var t=e.length,n=0;n'+(this.current.collection.trigger+e.original[this.current.collection.fillAttr])+"":this.current.collection.trigger+e.original[this.current.collection.fillAttr]}},{key:"defaultMenuItemTemplate",value:function(e){return e.string}},{key:"inputTypes",value:function(){return["TEXTAREA","INPUT"]}}]),Y);function Y(e){var t=this,n=e.values,i=void 0===n?null:n,r=e.iframe,o=void 0===r?null:r,u=e.selectClass,a=void 0===u?"highlight":u,l=e.trigger,s=void 0===l?"@":l,c=e.autocompleteMode,d=void 0!==c&&c,h=e.selectTemplate,f=void 0===h?null:h,v=e.menuItemTemplate,p=void 0===v?null:v,m=e.lookup,g=void 0===m?"key":m,b=e.fillAttr,y=void 0===b?"value":b,w=e.collection,T=void 0===w?null:w,E=e.menuContainer,C=void 0===E?null:E,k=e.noMatchTemplate,S=void 0===k?null:k,x=e.requireLeadingSpace,M=void 0===x||x,A=e.allowSpaces,L=void 0!==A&&A,I=e.replaceTextSuffix,N=void 0===I?null:I,O=e.positionMenu,P=void 0===O||O,D=e.spaceSelectsMatch,R=void 0!==D&&D,_=e.searchOpts,W=void 0===_?{}:_,H=e.menuItemLimit,j=void 0===H?null:H;if(function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,Y),this.autocompleteMode=d,this.menuSelected=0,this.current={},this.inputEvent=!1,this.isActive=!1,this.menuContainer=C,this.allowSpaces=L,this.replaceTextSuffix=N,this.positionMenu=P,this.hasTrailingSpace=!1,this.spaceSelectsMatch=R,this.autocompleteMode&&(s="",L=!1),i)this.collection=[{trigger:s,iframe:o,selectClass:a,selectTemplate:(f||Y.defaultSelectTemplate).bind(this),menuItemTemplate:(p||Y.defaultMenuItemTemplate).bind(this),noMatchTemplate:"function"==typeof S?S.bind(t):S||function(){return""}.bind(t),lookup:g,fillAttr:y,values:i,requireLeadingSpace:M,searchOpts:W,menuItemLimit:j}];else{if(!T)throw new Error("[Tribute] No collection specified.");this.autocompleteMode&&console.warn("Tribute in autocomplete mode does not work for collections"),this.collection=T.map(function(e){return{trigger:e.trigger||s,iframe:e.iframe||o,selectClass:e.selectClass||a,selectTemplate:(e.selectTemplate||Y.defaultSelectTemplate).bind(t),menuItemTemplate:(e.menuItemTemplate||Y.defaultMenuItemTemplate).bind(t),noMatchTemplate:"function"==typeof S?S.bind(t):null,lookup:e.lookup||g,fillAttr:e.fillAttr||y,values:e.values,requireLeadingSpace:e.requireLeadingSpace,searchOpts:e.searchOpts||W,menuItemLimit:e.menuItemLimit||j}})}new q.default(this),new B.default(this),new F.default(this),new z.default(this)}n.default=u,t.exports=n.default},{"./TributeEvents":2,"./TributeMenuEvents":3,"./TributeRange":4,"./TributeSearch":5,"./utils":7}],2:[function(e,t,n){"use strict";function i(e,t){for(var n=0;n container for the click");n.selectItemAtIndex(i.getAttribute("data-index"),t),n.hideMenu()}else n.current.element&&!n.current.externalTrigger&&(n.current.externalTrigger=!1,setTimeout(function(){return n.hideMenu()}))}},{key:"keyup",value:function(e,t){if(e.inputEvent&&(e.inputEvent=!1),e.updateSelection(this),27!==t.keyCode){if(!e.tribute.allowSpaces&&e.tribute.hasTrailingSpace)return e.tribute.hasTrailingSpace=!1,e.commandEvent=!0,void e.callbacks().space(t,this);if(!e.tribute.isActive)if(e.tribute.autocompleteMode)e.callbacks().triggerChar(t,this,"");else{var n=e.getKeyCode(e,this,t);if(isNaN(n)||!n)return;var i=e.tribute.triggers().find(function(e){return e.charCodeAt(0)===n});void 0!==i&&e.callbacks().triggerChar(t,this,i)}((e.tribute.current.trigger||e.tribute.autocompleteMode)&&!1===e.commandEvent||e.tribute.isActive&&8===t.keyCode)&&e.tribute.showMenuFor(this,!0)}}},{key:"shouldDeactivate",value:function(t){if(!this.tribute.isActive)return!1;if(0!==this.tribute.current.mentionText.length)return!1;var n=!1;return o.keys().forEach(function(e){t.keyCode===e.key&&(n=!0)}),!n}},{key:"getKeyCode",value:function(e,t,n){var i=e.tribute,r=i.range.getTriggerInfo(!1,i.hasTrailingSpace,!0,i.allowSpaces,i.autocompleteMode);return!!r&&r.mentionTriggerChar.charCodeAt(0)}},{key:"updateSelection",value:function(e){this.tribute.current.element=e;var t=this.tribute.range.getTriggerInfo(!1,this.tribute.hasTrailingSpace,!0,this.tribute.allowSpaces,this.tribute.autocompleteMode);t&&(this.tribute.current.selectedPath=t.mentionSelectedPath,this.tribute.current.mentionText=t.mentionText,this.tribute.current.selectedOffset=t.mentionSelectedOffset)}},{key:"callbacks",value:function(){var o=this;return{triggerChar:function(e,t,n){var i=o.tribute;i.current.trigger=n;var r=i.collection.find(function(e){return e.trigger===n});i.current.collection=r,i.inputEvent&&i.showMenuFor(t,!0)},enter:function(e,t){o.tribute.isActive&&o.tribute.current.filteredItems&&(e.preventDefault(),e.stopPropagation(),setTimeout(function(){o.tribute.selectItemAtIndex(o.tribute.menuSelected,e),o.tribute.hideMenu()},0))},escape:function(e,t){o.tribute.isActive&&(e.preventDefault(),e.stopPropagation(),o.tribute.isActive=!1,o.tribute.hideMenu())},tab:function(e,t){o.callbacks().enter(e,t)},space:function(e,t){o.tribute.isActive&&(o.tribute.spaceSelectsMatch?o.callbacks().enter(e,t):o.tribute.allowSpaces||(e.stopPropagation(),setTimeout(function(){o.tribute.hideMenu(),o.tribute.isActive=!1},0)))},up:function(e,t){if(o.tribute.isActive&&o.tribute.current.filteredItems){e.preventDefault(),e.stopPropagation();var n=o.tribute.current.filteredItems.length,i=o.tribute.menuSelected;i>>0;e&&(this.tribute.menuSelected=parseInt(e));for(var i=0;iu.bottom){var a=o.bottom-u.bottom;this.tribute.menu.scrollTop+=a}else if(o.tope.width&&(t.left||t.right),i=window.innerHeight>e.height&&(t.top||t.bottom);(n||i)&&(o.tribute.menu.style.cssText="display: none",o.positionMenuAtCaret(r))},0)}else this.tribute.menu.style.cssText="display: none"}},{key:"selectElement",value:function(e,t,n){var i=void 0,r=e;if(t)for(var o=0;oMath.ceil(o+n),bottom:s>Math.ceil(u+i),left:cparseInt(u.height)&&(o.overflowY="scroll")):o.overflow="hidden",r.textContent=e.value.substring(0,t),"INPUT"===e.nodeName&&(r.textContent=r.textContent.replace(/\s/g," "));var a=this.getDocument().createElement("span");a.textContent=e.value.substring(t)||".",r.appendChild(a);var l=e.getBoundingClientRect(),s=document.documentElement,c=(window.pageXOffset||s.scrollLeft)-(s.clientLeft||0),d=(window.pageYOffset||s.scrollTop)-(s.clientTop||0),h={top:l.top+d+a.offsetTop+parseInt(u.borderTopWidth)+parseInt(u.fontSize)-e.scrollTop,left:l.left+c+a.offsetLeft+parseInt(u.borderLeftWidth)},f=window.innerWidth,v=window.innerHeight,p=this.getMenuDimensions(),m=this.isMenuOffScreen(h,p);m.right&&(h.right=f-h.left,h.left="auto");var g=this.tribute.menuContainer?this.tribute.menuContainer.offsetHeight:this.getDocument().body.offsetHeight;if(m.bottom){var b=g-(v-(this.tribute.menuContainer?this.tribute.menuContainer.getBoundingClientRect():this.getDocument().body.getBoundingClientRect()).top);h.bottom=b+(v-l.top-a.offsetTop),h.top="auto"}return(m=this.isMenuOffScreen(h,p)).left&&(h.left=f>p.width?c+f-p.width:c,delete h.right),m.top&&(h.top=v>p.height?d+v-p.height:d,delete h.bottom),this.getDocument().body.removeChild(r),h}},{key:"getContentEditableCaretPosition",value:function(e){var t=void 0,n="sel_"+(new Date).getTime()+"_"+Math.random().toString().substr(2),i=void 0,r=this.getWindowSelection(),o=r.getRangeAt(0);(i=this.getDocument().createRange()).setStart(r.anchorNode,e),i.setEnd(r.anchorNode,e),i.collapse(!1),(t=this.getDocument().createElement("span")).id=n,t.appendChild(this.getDocument().createTextNode("\ufeff")),i.insertNode(t),r.removeAllRanges(),r.addRange(o);var u=t.getBoundingClientRect(),a=document.documentElement,l=(window.pageXOffset||a.scrollLeft)-(a.clientLeft||0),s=(window.pageYOffset||a.scrollTop)-(a.clientTop||0),c={left:u.left+l,top:u.top+t.offsetHeight+s},d=window.innerWidth,h=window.innerHeight,f=this.getMenuDimensions(),v=this.isMenuOffScreen(c,f);v.right&&(c.left="auto",c.right=d-u.left-l);var p=this.tribute.menuContainer?this.tribute.menuContainer.offsetHeight:this.getDocument().body.offsetHeight;if(v.bottom){var m=p-(h-(this.tribute.menuContainer?this.tribute.menuContainer.getBoundingClientRect():this.getDocument().body.getBoundingClientRect()).top);c.top="auto",c.bottom=m+(h-u.top)}return(v=this.isMenuOffScreen(c,f)).left&&(c.left=d>f.width?l+d-f.width:l,delete c.right),v.top&&(c.top=h>f.height?s+h-f.height:s,delete c.bottom),t.parentNode.removeChild(t),c}},{key:"scrollIntoView",value:function(e){var t=void 0,n=this.menu;if(void 0!==n){for(;void 0===t||0===t.height;)if(0===(t=n.getBoundingClientRect()).height&&(void 0===(n=n.childNodes[0])||!n.getBoundingClientRect))return;var i=t.top,r=i+t.height;if(i<0)window.scrollTo(0,window.pageYOffset+t.top-20);else if(r>window.innerHeight){var o=window.pageYOffset+t.top-20;100e.length-n)){for(var o=t[i],u=e.indexOf(o,n),a=void 0,l=void 0;-1>>0,r=arguments[1],o=0;o { - private id = `comment-form-${btoa(Math.random()).substring(0,12)}`; + private id = `comment-form-${Math.random().toString(36).replace(/[^a-z]+/g, '').substr(2, 10)}`; private userSub: Subscription; private communitySub: Subscription; private tribute: any; @@ -40,7 +40,7 @@ export class CommentForm extends Component { constructor(props: any, context: any) { super(props, context); - this.tribute = new tributejs({ + this.tribute = new Tribute({ collection: [ // Users diff --git a/ui/src/index.html b/ui/src/index.html index 4dbde8b0..f2e513f1 100644 --- a/ui/src/index.html +++ b/ui/src/index.html @@ -9,6 +9,7 @@ + diff --git a/ui/yarn.lock b/ui/yarn.lock index ff0fdda4..19dc87c5 100644 --- a/ui/yarn.lock +++ b/ui/yarn.lock @@ -3286,7 +3286,7 @@ uc.micro@^1.0.1, uc.micro@^1.0.5: resolved "https://registry.yarnpkg.com/uc.micro/-/uc.micro-1.0.6.tgz#9c411a802a409a91fc6cf74081baba34b24499ac" integrity sha512-8Y75pvTYkLJW2hWQHXxoqRgV7qb9B+9vFEtidML+7koHUFapnVJAZ6cKs+Qjz5Aw3aZWHMC6u0wJE3At+nSGwA== -uglify-js@^3.0.5: +uglify-js@^3.0.5, uglify-js@^3.6.0: version "3.6.0" resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-3.6.0.tgz#704681345c53a8b2079fb6cec294b05ead242ff5" integrity sha512-W+jrUHJr3DXKhrsS7NUVxn3zqMOFn0hL/Ei6v0anCIMoKC93TjcflTagwIHLW7SfMFfiQuktQyFVCFHGUE0+yg== -- 2.44.1