dropkiq-ui
Version:
Liquid Expressions Simplified
1 lines • 11.2 kB
JavaScript
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var ColumnType,DropkiqEngine=require("dropkiq").DropkiqEngine,BoundElement_1=require("./BoundElement"),tippy_js_1=require("tippy.js"),uuid_1=require("uuid"),createDOMPurify=require("dompurify"),DOMPurify=createDOMPurify(window);!function(e){e.Boolean="ColumnTypes::Boolean",e.DateTime="ColumnTypes::DateTime",e.HasMany="ColumnTypes::HasMany",e.HasOne="ColumnTypes::HasOne",e.Numeric="ColumnTypes::Numeric",e.String="ColumnTypes::String",e.Text="ColumnTypes::Text",e.YAML="ColumnTypes::YAML"}(ColumnType||(ColumnType={}));var DropkiqUI=function(){function e(e,t,i,n,s,o){var r;void 0===s&&(s=""),void 0===o&&(o={}),this.schema=t,this.context=i,this.scope=n,this.licenseKey=s,this.options=o,this.showPreviews="function"==typeof o.showPreviews?o.showPreviews:function(){return!0},this.showHints="function"==typeof o.showHints?o.showHints:function(){return!0},this.suggestionFilter="function"==typeof o.suggestionFilter?o.suggestionFilter:function(){},this.onRender="function"==typeof o.onRender?o.onRender:function(){},this.iframe=o.iframe,this.iframe?(this.window=this.iframe.contentWindow,this.document=this.window.document):(this.window=window,this.document=document),this.element=e,this.window.dropkiqUIInstances||(this.window.dropkiqUIInstances={}),this.element.dataset&&(r=this.element.dataset.dropkiqUUID);var a=this.window.dropkiqUIInstances[r];if(a)return a;this.element.dataset&&(r=uuid_1.v4(),this.element.dataset.dropkiqUUID=r,this.window.dropkiqUIInstances[r]=this),this.isCodeMirror="object"==typeof this.element.doc,this.isAceEditor="object"==typeof this.element.renderer,this.boundElement=new BoundElement_1.BoundElement(this.element,this.window,this.document),this.dropkiqEngine=new DropkiqEngine("",0,t,i,n,this.licenseKey,{suggestionFilter:this.suggestionFilter}),this.suggestionsArray=[],this.result={},this.caretOffset={},this.pathSchema=[],this.$poweredByDropkiq=document.createElement("div"),this.$poweredByDropkiq.style.display="none",this.$poweredByDropkiq.style.padding="5px",this.$poweredByDropkiq.style.height="24px",this.$poweredByDropkiq.style.color="#666666",this.$poweredByDropkiq.style["font-size"]="10px",this.$poweredByDropkiq.style.background="rgba(240,240,240,0.9)",this.$poweredByDropkiq.style["text-align"]="right";var l=document.createTextNode("Powered by"),u=document.createElement("img");u.setAttribute("src","https://app.dropkiq.com/plugin/dropkiq-sm.png"),u.style.width="48px",u.style.height="10px",u.style["margin-left"]="3px",this.$poweredByDropkiq.appendChild(l),this.$poweredByDropkiq.appendChild(u),this.$paywall=document.createElement("div"),this.$paywall.style["font-size"]="14px",this.$paywall.style.padding="10px",this.$paywall.style.color="#666666",this.$paywall.display="none",this.$ul=document.createElement("ul"),this.$header=document.createElement("div"),this.$header.setAttribute("class","dropkiq-header"),this.$div=document.createElement("div"),this.$div.setAttribute("id","dropkiq-autosuggest-menu"),this.$div.appendChild(this.$header),this.$div.appendChild(this.$ul),this.$div.appendChild(this.$paywall),this.$div.appendChild(this.$poweredByDropkiq),document.body.appendChild(this.$div);var h=this;h.documentCallback=function(){h.closeMenu()};var d=function(){h.closeMenu()},c=function(e){if(h.suggestionsArray.length){var t=void 0;switch(e.keyCode){case 27:return h.closeMenu(),e.preventDefault(),!1;case 38:return h.scrollToPrevious(),e.preventDefault(),!1;case 40:return h.scrollToNext(),e.preventDefault(),!1;case 9:case 13:return t=h.suggestionsArray.find((function(e){return e.active})),h.insertSuggestion(t),e.preventDefault(),!1}}setTimeout((function(){var t=h.boundElement.caretPositionWithDocumentInfo(),i=t.selectionStart,n=t.leftText,s=t.rightText,o=n.slice(-2);if(219!=e.keyCode||!e.shiftKey||"{"!=o[1]&&"{"!=o){if(53==e.keyCode&&e.shiftKey&&"{%"==o&&/^(\s+)?\}(.+)?/.test(s)){r=h.boundElement.insertTextAtCaret("%");h.boundElement.setCaretPosition(i,0,0,r,""),h.element.focus()}}else{var r=h.boundElement.insertTextAtCaret("}");h.boundElement.setCaretPosition(i,0,0,r,""),h.element.focus()}}),25),p(e)},p=function(e){e&&"function"==typeof e.stopImmediatePropagation&&e.stopImmediatePropagation(),setTimeout((function(){h.findResults.apply(h)}),25)},m=function(e){var t=h.window.getSelection().getRangeAt(0);h.boundElement.setExpiringCachedOnBlurRange(t)};this.isCodeMirror?(this.element.on("keydown",(function(e,t){c(t)})),this.element.on("mousedown",(function(e,t){p(t)})),this.element.on("focus",(function(e,t){p(t)})),this.element.on("blur",(function(e,t){m()})),this.element.on("scroll",(function(e,t){d()}))):this.isAceEditor?(this.element.textInput.getElement().addEventListener("keydown",c),this.element.on("click",p),this.element.on("focus",p),this.element.on("blur",m),this.element.session.on("changeScrollTop",d),this.element.session.on("changeScrollLeft",d)):(this.element.addEventListener("keydown",c),this.element.addEventListener("click",p),this.element.addEventListener("focus",p),this.element.addEventListener("blur",m),this.element.addEventListener("scroll",d))}return e.prototype.updateScope=function(e){this.scope=e,this.dropkiqEngine.updateScope(this.scope)},e.prototype.registerFilter=function(e,t,i,n,s){this.dropkiqEngine.registerFilter(e,t,i,n,s)},e.prototype.menuIsOpen=function(){return this.suggestionsArray.length>0},e.prototype.closeMenu=function(){this.removeDocumentEventListeners(),this.suggestionsArray=[],this.renderSuggestions()},e.prototype.removeDocumentEventListeners=function(){document.removeEventListener("click",this.documentCallback),this.document&&this.document!==document&&this.document.removeEventListener("click",this.documentCallback)},e.prototype.renderSuggestions=function(){var e,t=this.result.prefix;if(this.$paywall.innerHTML="",this.$paywall.style.display="none",this.$header.innerHTML="",this.$header.style.display="none",this.$poweredByDropkiq.style.display="none",this.dropkiqEngine.authorizer.authorized()||(this.$poweredByDropkiq.style.display="block"),this.pathSchema&&(e=this.pathSchema[this.pathSchema.length-1]),e&&"ColumnTypes::HasOne"===e.type){var i=document.createElement("img");i.setAttribute("src","https://app.dropkiq.com/plugin/object.png"),i.setAttribute("class","icon"),i.setAttribute("width","16px"),i.setAttribute("height","16px");var n=document.createElement("span");n.textContent=e.name,this.$header.appendChild(i),this.$header.appendChild(n),this.$header.style.display="block"}this.$div.style.top=this.caretOffset.top+"px",this.$div.style.left=this.caretOffset.left+"px",this.suggestionsArray.length?this.$div.style.display="block":this.$div.style.display="none",this.$ul.innerHTML="";var s=this;this.suggestionsArray.forEach((function(e){var i=document.createElement("li"),n=e.iconImageURLForSuggestion,o=document.createElement("img");o.setAttribute("src",n),o.setAttribute("class","icon"),o.setAttribute("width","16px"),o.setAttribute("height","16px");var r=document.createElement("div");r.setAttribute("class","first-line");var a=document.createElement("div");a.setAttribute("class","extra");var l=document.createElement("span"),u=document.createElement("img");if(u.setAttribute("class","right-arrow"),u.setAttribute("src","https://app.dropkiq.com/plugin/next-level.png"),r.appendChild(o),r.appendChild(u),t){var h=document.createElement("strong");h.textContent=t;var d=e.name;l.textContent=d.slice(t.length,d.length),r.appendChild(h)}else l.textContent=e.name;if(r.appendChild(l),i.appendChild(r),i.setAttribute("title",s.suggestionTitleText(e)),e.hint&&s.showHints()){var c=document.createElement("div");c.setAttribute("class","hint-icon"),c.setAttribute("data-tippy-content",e.hint),c.setAttribute("title","");var p=document.createElement("img");p.setAttribute("src","https://app.dropkiq.com/plugin/question-circle.png"),c.appendChild(p),i.appendChild(c)}if(e.preview&&s.showPreviews()){var m=document.createElement("p");m.textContent="OUTPUT";var g=document.createElement("div");g.innerHTML=DOMPurify.sanitize(e.preview),a.appendChild(m),a.appendChild(g),i.appendChild(a)}e.active&&i.classList.add("active"),s.$ul.appendChild(i),i.addEventListener("click",(function(t){s.insertSuggestion(e)}))}));var o=this.$ul.querySelector(".active");if(o&&(this.$ul.scrollTop=o.offsetTop-50),e&&"ColumnTypes::HasOne"===e.type&&!this.dropkiqEngine.authorizer.authorized()){this.$ul.innerHTML="",this.$paywall.style.display="block";var r=document.createElement("p"),a=this.suggestionsArray[0];a&&(r.textContent=a.hint),this.$paywall.appendChild(r);var l=document.createElement("p"),u=document.createElement("a");u.textContent="Purchase to unlock",u.setAttribute("href","http://dropkiq.com"),l.appendChild(u),this.$paywall.appendChild(l)}s.removeDocumentEventListeners(),setTimeout((function(){document.addEventListener("click",s.documentCallback),s.document&&s.document!==document&&s.document.addEventListener("click",s.documentCallback)}),100),tippy_js_1.default(".hint-icon")},e.prototype.findResults=function(){var e=this.boundElement.caretPositionWithDocumentInfo();if(this.caretOffset=this.boundElement.getCaretPosition(),this.iframe){var t=this.iframe.getBoundingClientRect();this.caretOffset.top=this.caretOffset.top+t.top,this.caretOffset.left=this.caretOffset.left+t.left}try{this.result=this.dropkiqEngine.update(e.allText,e.selectionStart)}catch(e){if(this.closeMenu(),"ParseError"===e.name)return!1;if("RenderError"===e.name)return!1;throw e}this.onRender(this.result.renderedDocument),this.pathSchema=this.result.pathSchema;this.suggestionsArray=this.result.suggestionsArray||[],this.suggestionsArray.length>0&&(this.suggestionsArray=this.suggestionsArray.sort((function(e,t){return e.name>t.name?1:-1})),this.suggestionsArray[0].active=!0),this.renderSuggestions()},e.prototype.insertSuggestion=function(e){var t,i,n=this.result.prefix;"ColumnTypes::Filter"===e.type?(i=this.boundElement.caretPositionWithDocumentInfo(),t=e.insertionTemplate):t=e.name;var s=t.slice(n.length,t.length);"ColumnTypes::HasOne"===e.type&&(s+=".");var o=this.boundElement.insertTextAtCaret(s);if("ColumnTypes::Filter"===e.type){var r=e.selectRange[0],a=e.selectRange[1];this.boundElement.setCaretPosition(i.selectionStart,r,a,o,n)}this.boundElement.setFocus(),this.closeMenu();var l=this;setTimeout((function(){l.findResults.apply(l)}),25)},e.prototype.scrollToNext=function(){var e=this.suggestionsArray.find((function(e,t){return e.active})),t=this.suggestionsArray.indexOf(e);this.suggestionsArray[t].active=!1,this.suggestionsArray[t+1]?this.suggestionsArray[t+1].active=!0:this.suggestionsArray[0].active=!0,this.renderSuggestions()},e.prototype.scrollToPrevious=function(){var e=this.suggestionsArray.find((function(e,t){return e.active})),t=this.suggestionsArray.indexOf(e);this.suggestionsArray[t].active=!1,this.suggestionsArray[t-1]?this.suggestionsArray[t-1].active=!0:this.suggestionsArray[this.suggestionsArray.length-1].active=!0,this.renderSuggestions()},e.prototype.suggestionTitleText=function(e){var t=[e.name];return e.preview&&t.push("**OUTPUT** "+e.preview),e.hint&&t.push("**HINT** "+e.hint),t.join(" ")},e}();exports.DropkiqUI=DropkiqUI;