From b22ef823f717421d1fceb7a72d8b4059bd2ad0c8 Mon Sep 17 00:00:00 2001 From: TheJaredWilcurt Date: Thu, 16 Apr 2020 23:19:02 -0400 Subject: [PATCH 1/2] debounce --- dev.html | 2 +- dist/find-in-nw.js | 2 +- package.json | 18 +++++++++--------- src/index.js | 44 +++++++++++++++++++++++++++++++++++++++++--- 4 files changed, 52 insertions(+), 14 deletions(-) diff --git a/dev.html b/dev.html index ced9067..86a745c 100644 --- a/dev.html +++ b/dev.html @@ -136,7 +136,7 @@ const css = String(result.css); findInNw.create.css = css; - findInNw.initialize(); + findInNw.initialize({ debounce: 200 }); diff --git a/dist/find-in-nw.js b/dist/find-in-nw.js index 701d3bc..3630f68 100644 --- a/dist/find-in-nw.js +++ b/dist/find-in-nw.js @@ -7,4 +7,4 @@ * and replaces each match (or node-separated portions of the match) * in the specified element. */ -!function(e,t){"object"==typeof module&&module.exports?module.exports=t():"function"==typeof define&&define.amd?define(t):e.findAndReplaceDOMText=t()}(this,(function(){var e="retain",t=document,n={}.hasOwnProperty;function i(){return o.apply(null,arguments)||r.apply(null,arguments)}function o(e,t,n,o,d){if(t&&!t.nodeType&&arguments.length<=2)return!1;var s,a="function"==typeof n;a&&(s=n,n=function(e,t){return s(e.text,t.startIndex)});var c=r(t,{find:e,wrap:a?null:n,replace:a?n:"$"+(o||"&"),prepMatch:function(e,t){if(!e[0])throw"findAndReplaceDOMText cannot handle zero-length matches";if(o>0){var n=e[o];e.index+=e[0].indexOf(n),e[0]=n}return e.endIndex=e.index+e[0].length,e.startIndex=e.index,e.index=t,e},filterElements:d});return i.revert=function(){return c.revert()},!0}function r(e,t){return new d(e,t)}function d(t,o){var r=o.preset&&i.PRESETS[o.preset];if(o.portionMode=o.portionMode||e,r)for(var d in r)n.call(r,d)&&!n.call(o,d)&&(o[d]=r[d]);this.node=t,this.options=o,this.prepMatch=o.prepMatch||this.prepMatch,this.reverts=[],this.matches=this.search(),this.matches.length&&this.processMatches()}return i.NON_PROSE_ELEMENTS={br:1,hr:1,script:1,style:1,img:1,video:1,audio:1,canvas:1,svg:1,map:1,object:1,input:1,textarea:1,select:1,option:1,optgroup:1,button:1},i.NON_CONTIGUOUS_PROSE_ELEMENTS={address:1,article:1,aside:1,blockquote:1,dd:1,div:1,dl:1,fieldset:1,figcaption:1,figure:1,footer:1,form:1,h1:1,h2:1,h3:1,h4:1,h5:1,h6:1,header:1,hgroup:1,hr:1,main:1,nav:1,noscript:1,ol:1,output:1,p:1,pre:1,section:1,ul:1,br:1,li:1,summary:1,dt:1,details:1,rp:1,rt:1,rtc:1,script:1,style:1,img:1,video:1,audio:1,canvas:1,svg:1,map:1,object:1,input:1,textarea:1,select:1,option:1,optgroup:1,button:1,table:1,tbody:1,thead:1,th:1,tr:1,td:1,caption:1,col:1,tfoot:1,colgroup:1},i.NON_INLINE_PROSE=function(e){return n.call(i.NON_CONTIGUOUS_PROSE_ELEMENTS,e.nodeName.toLowerCase())},i.PRESETS={prose:{forceContext:i.NON_INLINE_PROSE,filterElements:function(e){return!n.call(i.NON_PROSE_ELEMENTS,e.nodeName.toLowerCase())}}},i.Finder=d,d.prototype={search:function(){var e,t=0,n=0,i=this.options.find,o=this.getAggregateText(),r=[],d=this;return i="string"==typeof i?RegExp(String(i).replace(/([.*+?^=!:${}()|[\]\/\\])/g,"\\$1"),"g"):i,function o(s){for(var a=0,c=s.length;a=a.endIndex?t={node:s,index:h++,text:s.data.substring(a.startIndex-c,a.endIndex-c),indexInMatch:0===c?0:c-a.startIndex,indexInNode:a.startIndex-c,endIndexInNode:a.endIndex-c,isEnd:!0}:e&&d.push({node:s,index:h++,text:s.data,indexInMatch:c-a.startIndex,indexInNode:0}),!e&&s.length+c>a.startIndex&&(e={node:s,index:h++,indexInMatch:0,indexInNode:a.startIndex-c,endIndexInNode:a.endIndex-c,text:s.data.substring(a.startIndex-c,a.endIndex-c)}),c+=s.data.length),n=s.nodeType===Node.ELEMENT_NODE&&r&&!r(s),e&&t){if(s=this.replaceMatch(a,e,d,t),c-=t.node.data.length-t.endIndexInNode,e=null,t=null,d=[],h=0,!(a=i.shift()))break}else if(!n&&(s.firstChild||s.nextSibling)){s.firstChild?(l.push(s),s=s.firstChild):s=s.nextSibling;continue}for(;;){if(s.nextSibling){s=s.nextSibling;break}if((s=l.pop())===o)break e}}},revert:function(){for(var e=this.reverts.length;e--;)this.reverts[e]();this.reverts=[]},prepareReplacementString:function(e,t,n){var i=this.options.portionMode;return"first"===i&&t.indexInMatch>0?"":(e=e.replace(/\$(\d+|&|`|')/g,(function(e,t){var i;switch(t){case"&":i=n[0];break;case"`":i=n.input.substring(0,n.startIndex);break;case"'":i=n.input.substring(n.endIndex);break;default:i=n[+t]||""}return i})),"first"===i?e:t.isEnd?e.substring(t.indexInMatch):e.substring(t.indexInMatch,t.indexInMatch+t.text.length))},getPortionReplacementNode:function(e,n){var i=this.options.replace||"$&",o=this.options.wrap,r=this.options.wrapClass;if(o&&o.nodeType){var d=t.createElement("div");d.innerHTML=o.outerHTML||(new XMLSerializer).serializeToString(o),o=d.firstChild}if("function"==typeof i)return(i=i(e,n))&&i.nodeType?i:t.createTextNode(String(i));var s="string"==typeof o?t.createElement(o):o;return s&&r&&(s.className=r),(i=t.createTextNode(this.prepareReplacementString(i,e,n))).data&&s?(s.appendChild(i),s):i},replaceMatch:function(e,n,i,o){var r,d,s=n.node,a=o.node;if(s===a){var c=s;n.indexInNode>0&&(r=t.createTextNode(c.data.substring(0,n.indexInNode)),c.parentNode.insertBefore(r,c));var h=this.getPortionReplacementNode(o,e);return c.parentNode.insertBefore(h,c),o.endIndexInNodethis.total-1&&(this.currentToken=0),this.updateCount(),this.highlightCurrentToken()},showSearchBox:function(){const e=document.getElementById("find-in-nw-search-box"),t=document.getElementById("find-in-nw-input");e.classList.add("find-in-nw-search-box-visible"),t.focus()},hideSearchBox:function(){const e=document.getElementById("find-in-nw-search-box"),t=document.getElementById("find-in-nw-input");e.classList.remove("find-in-nw-search-box-visible"),document.body.focus(),t.value="",this.clearTokens()},getElementsToSearch:function(){const e=[];for(let t=0;t0){var n=e[r];e.index+=e[0].indexOf(n),e[0]=n}return e.endIndex=e.index+e[0].length,e.startIndex=e.index,e.index=t,e},filterElements:d});return n.revert=function(){return c.revert()},!0}function o(e,t){return new r(e,t)}function r(e,i){var o=i.preset&&n.PRESETS[i.preset];if(i.portionMode=i.portionMode||"retain",o)for(var r in o)t.call(o,r)&&!t.call(i,r)&&(i[r]=o[r]);this.node=e,this.options=i,this.prepMatch=i.prepMatch||this.prepMatch,this.reverts=[],this.matches=this.search(),this.matches.length&&this.processMatches()}return n.NON_PROSE_ELEMENTS={br:1,hr:1,script:1,style:1,img:1,video:1,audio:1,canvas:1,svg:1,map:1,object:1,input:1,textarea:1,select:1,option:1,optgroup:1,button:1},n.NON_CONTIGUOUS_PROSE_ELEMENTS={address:1,article:1,aside:1,blockquote:1,dd:1,div:1,dl:1,fieldset:1,figcaption:1,figure:1,footer:1,form:1,h1:1,h2:1,h3:1,h4:1,h5:1,h6:1,header:1,hgroup:1,hr:1,main:1,nav:1,noscript:1,ol:1,output:1,p:1,pre:1,section:1,ul:1,br:1,li:1,summary:1,dt:1,details:1,rp:1,rt:1,rtc:1,script:1,style:1,img:1,video:1,audio:1,canvas:1,svg:1,map:1,object:1,input:1,textarea:1,select:1,option:1,optgroup:1,button:1,table:1,tbody:1,thead:1,th:1,tr:1,td:1,caption:1,col:1,tfoot:1,colgroup:1},n.NON_INLINE_PROSE=function(e){return t.call(n.NON_CONTIGUOUS_PROSE_ELEMENTS,e.nodeName.toLowerCase())},n.PRESETS={prose:{forceContext:n.NON_INLINE_PROSE,filterElements:function(e){return!t.call(n.NON_PROSE_ELEMENTS,e.nodeName.toLowerCase())}}},n.Finder=r,r.prototype={search:function(){var e,t=0,n=0,i=this.options.find,o=this.getAggregateText(),r=[],d=this;return i="string"==typeof i?RegExp(String(i).replace(/([.*+?^=!:${}()|[\]\/\\])/g,"\\$1"),"g"):i,function o(s){for(var a=0,c=s.length;a=a.endIndex?t={node:s,index:u++,text:s.data.substring(a.startIndex-c,a.endIndex-c),indexInMatch:0===c?0:c-a.startIndex,indexInNode:a.startIndex-c,endIndexInNode:a.endIndex-c,isEnd:!0}:e&&d.push({node:s,index:u++,text:s.data,indexInMatch:c-a.startIndex,indexInNode:0}),!e&&s.length+c>a.startIndex&&(e={node:s,index:u++,indexInMatch:0,indexInNode:a.startIndex-c,endIndexInNode:a.endIndex-c,text:s.data.substring(a.startIndex-c,a.endIndex-c)}),c+=s.data.length),n=s.nodeType===Node.ELEMENT_NODE&&r&&!r(s),e&&t){if(s=this.replaceMatch(a,e,d,t),c-=t.node.data.length-t.endIndexInNode,e=null,t=null,d=[],u=0,!(a=i.shift()))break}else if(!n&&(s.firstChild||s.nextSibling)){s.firstChild?(h.push(s),s=s.firstChild):s=s.nextSibling;continue}for(;;){if(s.nextSibling){s=s.nextSibling;break}if((s=h.pop())===o)break e}}},revert:function(){for(var e=this.reverts.length;e--;)this.reverts[e]();this.reverts=[]},prepareReplacementString:function(e,t,n){var i=this.options.portionMode;return"first"===i&&t.indexInMatch>0?"":(e=e.replace(/\$(\d+|&|`|')/g,(function(e,t){var i;switch(t){case"&":i=n[0];break;case"`":i=n.input.substring(0,n.startIndex);break;case"'":i=n.input.substring(n.endIndex);break;default:i=n[+t]||""}return i})),"first"===i?e:t.isEnd?e.substring(t.indexInMatch):e.substring(t.indexInMatch,t.indexInMatch+t.text.length))},getPortionReplacementNode:function(t,n){var i=this.options.replace||"$&",o=this.options.wrap,r=this.options.wrapClass;if(o&&o.nodeType){var d=e.createElement("div");d.innerHTML=o.outerHTML||(new XMLSerializer).serializeToString(o),o=d.firstChild}if("function"==typeof i)return(i=i(t,n))&&i.nodeType?i:e.createTextNode(String(i));var s="string"==typeof o?e.createElement(o):o;return s&&r&&(s.className=r),(i=e.createTextNode(this.prepareReplacementString(i,t,n))).data&&s?(s.appendChild(i),s):i},replaceMatch:function(t,n,i,o){var r,d,s=n.node,a=o.node;if(s===a){var c=s;n.indexInNode>0&&(r=e.createTextNode(c.data.substring(0,n.indexInNode)),c.parentNode.insertBefore(r,c));var u=this.getPortionReplacementNode(o,t);return c.parentNode.insertBefore(u,c),o.endIndexInNode{this.debounceTimeout=null,this.search(e)},this.debounceAmount)},validateSettings:function(e){return e&&!Array.isArray(e)&&"object"==typeof e||(e={}),e.debounce&&"number"==typeof e.debounce&&!isNaN(e.debounce)||(e.debounce=0),e},applySettings:function(e){e=this.validateSettings(e),this.debounceAmount=e.debounce},create:{css:".find-in-nw-search-box{position:fixed;top:10px;right:10px;display:none;width:300px;background:#f1f1f1;border:1px solid #c1c1c1;border-radius:7px;margin:0px;padding:0px;box-shadow:1px 3px 9px rgba(0,0,0,.6)}.find-in-nw-search-box-visible{display:flex}.find-in-nw-input{flex-grow:1;width:100%;background:transparent;border:0px;margin:0px;padding:0px 0px 0px 3px;font-size:16px}.find-in-nw-previous,.find-in-nw-next,.find-in-nw-close{width:32px;background:transparent;border:0px;margin:0px 5px 0px 0px;padding:0px;font-size:32px;opacity:.5}.find-in-nw-previous:hover,.find-in-nw-next:hover,.find-in-nw-close:hover{opacity:1}.find-in-nw-search-box,.find-in-nw-input,.find-in-nw-count,.find-in-nw-previous,.find-in-nw-next,.find-in-nw-close{height:32px;color:#000;font-family:sans-serif;line-height:32px;vertical-align:top}.find-in-nw-input:focus,.find-in-nw-previous:focus,.find-in-nw-next:focus,.find-in-nw-close:focus{opacity:1;outline:none}.find-in-nw-previous,.find-in-nw-next{font-size:30px;transform:scale(1.5, 0.7)}.find-in-nw-count{margin-right:8px}.find-in-nw-token{background-color:#ff0}.find-in-nw-current-token{background:#38d878;color:#fff}",style:function(){const e=document.createElement("style");return e.setAttribute("id","find-in-nw-style"),e.innerText=this.css,e},container:function(){const e=document.createElement("div");return e.setAttribute("id","find-in-nw-search-box"),e.setAttribute("class","find-in-nw-search-box"),e},input:function(){const e=document.createElement("input");return e.setAttribute("id","find-in-nw-input"),e.setAttribute("class","find-in-nw-input"),e.setAttribute("placeholder","Find"),e},element:function(e,t,n){const i=document.createElement(e);return i.setAttribute("id","find-in-nw-"+t),i.setAttribute("class","find-in-nw-"+t),i.innerHTML=n+"",i},composeSearchBox:function(){const e=this.container();return e.appendChild(this.input()),e.appendChild(this.element("span","current",0)),e.appendChild(this.element("span","of","/")),e.appendChild(this.element("span","count",0)),e.appendChild(this.element("button","previous","∧")),e.appendChild(this.element("button","next","∨")),e.appendChild(this.element("button","close","×")),e}},keyDownPressed:function(){document.getElementById("find-in-nw-input").addEventListener("keydown",function(e){"Enter"===e.key&&this.highlightNext()}.bind(this))},inputChanged:function(){document.getElementById("find-in-nw-input").addEventListener("input",function(e){e.preventDefault();const t=e.target.value;t&&t!==this.lastSearched?this.debouncedSearch(t):t||this.clearTokens()}.bind(this))},previousButtonClicked:function(){document.getElementById("find-in-nw-previous").addEventListener("click",function(e){e.preventDefault(),this.highlightPrevious()}.bind(this))},nextButtonClicked:function(){document.getElementById("find-in-nw-next").addEventListener("click",function(e){e.preventDefault(),this.highlightNext()}.bind(this))},closeButtonClicked:function(){document.getElementById("find-in-nw-close").addEventListener("click",function(e){e.preventDefault(),this.hideSearchBox()}.bind(this))},eventBinding:function(){this.keyDownPressed(),this.inputChanged(),this.previousButtonClicked(),this.nextButtonClicked(),this.closeButtonClicked()},keyBindings:function(){document.onkeydown=function(e){return e.ctrlKey&&70===e.keyCode?(e.preventDefault(),this.showSearchBox(),!1):27===e.keyCode?(e.preventDefault(),this.hideSearchBox(),!1):void 0}.bind(this)},highlightPrevious:function(){this.currentToken=this.currentToken-1,this.currentToken<0&&(this.currentToken=this.total-1),this.updateCount(),this.highlightCurrentToken()},highlightNext:function(){this.currentToken=this.currentToken+1,this.currentToken>this.total-1&&(this.currentToken=0),this.updateCount(),this.highlightCurrentToken()},showSearchBox:function(){const e=document.getElementById("find-in-nw-search-box"),t=document.getElementById("find-in-nw-input");e.classList.add("find-in-nw-search-box-visible"),t.focus()},hideSearchBox:function(){const e=document.getElementById("find-in-nw-search-box"),t=document.getElementById("find-in-nw-input");e.classList.remove("find-in-nw-search-box-visible"),document.body.focus(),t.value="",this.clearTokens()},getElementsToSearch:function(){const e=[];for(let t=0;t { + this.debounceTimeout = null; + this.search(text); + }, this.debounceAmount); + }, + validateSettings: function (settings) { + if ( + !settings || + Array.isArray(settings) || + typeof(settings) !== 'object' + ) { + settings = {}; + } + + if ( + !settings.debounce || + typeof(settings.debounce) !== 'number' || + isNaN(settings.debounce) + ) { + settings.debounce = 0; + } + + return settings; + }, + applySettings: function (settings) { + settings = this.validateSettings(settings); + this.debounceAmount = settings.debounce; + }, + create: { css: '/* PLACEHOLDER */', style: function () { @@ -73,8 +107,11 @@ const findInNw = { input.addEventListener('input', function (evt) { evt.preventDefault(); const value = evt.target.value; - if (value && value !== this.lastSearched) { - this.search(value); + if ( + value && + value !== this.lastSearched + ) { + this.debouncedSearch(value); } else if (!value) { this.clearTokens(); } @@ -275,7 +312,7 @@ const findInNw = { this.updateCount(); this.highlightCurrentToken(); }, - initialize: function () { + initialize: function (settings) { if (!this.initialized) { const styleBlock = this.create.style(); const searchBox = this.create.composeSearchBox(); @@ -283,6 +320,7 @@ const findInNw = { document.body.append(styleBlock); this.keyBindings(); this.eventBinding(); + this.applySettings(settings); this.initialized = true; } } From 4ce8cb51da2b94f54f42d711ae94bbcf11fe1b09 Mon Sep 17 00:00:00 2001 From: TheJaredWilcurt Date: Mon, 27 Apr 2020 14:02:14 -0400 Subject: [PATCH 2/2] timing --- src/index.js | 23 +++++++++++++++++++++++ 1 file changed, 23 insertions(+) diff --git a/src/index.js b/src/index.js index 275260f..6a8fbce 100644 --- a/src/index.js +++ b/src/index.js @@ -1,3 +1,17 @@ +const table = { + find: [], + position: [] +}; +const start = { + find: 0, + position: 0 +}; +function timer (name) { + let diff = (new Date()) - start[name]; + table[name].push(Math.round(diff)); +} + + // eslint-disable-next-line no-unused-vars const findInNw = { initialized: false, @@ -113,6 +127,7 @@ const findInNw = { ) { this.debouncedSearch(value); } else if (!value) { + clearTimeout(this.debounceTimeout); this.clearTokens(); } }.bind(this)); @@ -299,6 +314,7 @@ const findInNw = { this.clearTokens(); const elements = this.getElementsToSearch(); + start.find = new Date(); elements.forEach(function (element) { window.findAndReplaceDOMText(element, { find: text, @@ -306,11 +322,18 @@ const findInNw = { wrapClass: 'find-in-nw-token' }); }); + timer('find'); this.lastSearched = text; + + start.position = new Date(); this.setDataPositionAttribute(); + timer('position'); + this.updateCount(); this.highlightCurrentToken(); + + console.table(table); }, initialize: function (settings) { if (!this.initialized) {