From fb35b87a078fc16a02ec46d7c58cc2eeee64e6d8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=98=D0=BB=D1=8C=D1=8F=20=D0=9A=D0=BE=D0=BB=D0=B4=D1=83?= =?UTF-8?q?=D0=BD=D0=BE=D0=B2?= Date: Wed, 14 Feb 2018 00:42:26 +0200 Subject: [PATCH] Designed DOM of search input (input #133). --- public/build/bundle.css | 2 +- public/build/bundle.js | 2 +- public/javascripts/searcher.js | 16 ++++++++++++++++ public/stylesheets/components/searcher.css | 6 +++++- src/views/aside.pug | 3 +-- 5 files changed, 24 insertions(+), 5 deletions(-) diff --git a/public/build/bundle.css b/public/build/bundle.css index f79a0c80..d72281d9 100644 --- a/public/build/bundle.css +++ b/public/build/bundle.css @@ -1,3 +1,3 @@ /*! normalize.css v5.0.0 | MIT License | github.com/necolas/normalize.css */html{font-family:sans-serif;line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}article,aside,footer,header,nav,section{display:block}h1{font-size:2em;margin:.67em 0}figcaption,figure,main{display:block}figure{margin:1em 40px}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent;-webkit-text-decoration-skip:objects}a:active,a:hover{outline-width:0}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:inherit;font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}dfn{font-style:italic}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}audio,video{display:inline-block}audio:not([controls]){display:none;height:0}img{border-style:none}svg:not(:root){overflow:hidden}button,input,optgroup,select,textarea{font-family:sans-serif;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{display:inline-block;vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details,menu{display:block}summary{display:list-item}canvas{display:inline-block}[hidden],template{display:none}.aside{position:fixed;left:0;top:0;bottom:0;width:200px;padding:40px 15px 30px;background:#292b37;overflow:hidden;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-app-region:drag;color:#bac3db;font-size:13.7px;letter-spacing:.3px}.aside__content-wrap{-webkit-box-orient:vertical;-ms-flex-direction:column;flex-direction:column;margin-top:15px}.aside__content-wrap,.aside__header{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-direction:normal;position:relative}.aside__header{-webkit-box-orient:horizontal;-ms-flex-direction:row;flex-direction:row;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;margin-bottom:15px}.aside__header-left{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;font-size:18px;font-weight:600;color:#fff}.aside__header-avatar{width:37px;height:37px;color:#3d3f4d;cursor:pointer;transition:all 50ms ease;transition-delay:.1s;will-change:color}.aside__header-avatar-inner{color:#a2a8bd;transition:color 50ms ease;transition-delay:.1s;will-change:color}.aside__header-avatar:hover{color:#3c93f7}.aside__header-avatar:hover .aside__header-avatar-inner{color:#fff}.aside__authorization{position:absolute;top:calc(100% + 12px);right:0;left:0;padding:20px 25px;font-size:13.1px;color:#000;text-align:center;border-radius:3px;background-color:#f5f9fe;will-change:opacity,transform;opacity:0;visibility:hidden;-webkit-transform:translateY(7px);transform:translateY(7px);transition:all 70ms ease;transition-delay:.15s;cursor:default;z-index:2}.aside__authorization:before{content:"";position:absolute;top:-7px;left:173.5px;width:0;height:0;border-style:solid;border-width:0 8px 8px;border-color:transparent transparent #f5f9fe}.aside__authorization-title{line-height:1.4em;letter-spacing:.0284em}.aside__header-avatar--filled{cursor:default}.aside__header-avatar:not(.aside__header-avatar--filled):hover .aside__authorization{-webkit-transform:none;transform:none;opacity:1;visibility:visible}.aside__header-avatar .aside__user-photo{display:none;width:37px;height:37px;border-radius:50%;background-size:cover}.aside__header-avatar--filled .aside__user-photo{display:inline-block}.aside__header-avatar--filled svg{display:none}.aside__section-title{margin-bottom:10px;color:rgba(186,195,219,.5);font-size:11.7px;letter-spacing:.72px;text-transform:uppercase}.aside__section-title:not(:first-of-type){margin-top:30px}.aside__section-settings{margin:24px 0}.aside .add-note-button{display:block;padding:10px 13px;border:1.3px dashed rgba(130,156,176,.42);border-radius:3px;color:#63758c;line-height:1em;margin-bottom:15px;font-size:15px;cursor:pointer}.aside .add-note-button svg{margin-top:-1px;float:right}.aside .add-note-button:hover{border-color:rgba(77,120,190,.72);color:#5ba2ff}.aside__add-button,.aside__input{padding:8px 0;margin:10px 0 0;color:rgba(186,195,219,.5)}.aside__input{border:0;border-bottom:2px solid #4c525a}.aside__input input{border:none;background:transparent;outline:none;color:#fff;padding-right:5px;width:90%;letter-spacing:inherit}.aside__input input::-webkit-input-placeholder{color:rgba(186,195,219,.5)}.aside__input input:-ms-input-placeholder{color:rgba(186,195,219,.5)}.aside__input input::placeholder{color:rgba(186,195,219,.5)}.aside__input input:focus+svg{color:#fff}.aside__input svg{float:right;display:inline-block;height:.8em;margin-top:.3em}.aside__add-button{cursor:pointer}.aside__add-button svg{width:.9em;height:.9em;margin-right:.5em;margin-top:-3px;vertical-align:middle}.aside__add-button:hover{color:#fff}.aside-swiper{display:-webkit-box;display:-ms-flexbox;display:flex;width:calc(200% + 15px);height:100%;transition:-webkit-transform .15s ease-in;transition:transform .15s ease-in;transition:transform .15s ease-in,-webkit-transform .15s ease-in;will-change:transform}.aside-swiper__left,.aside-swiper__right{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;width:100%;max-width:200px;position:relative}.aside-swiper__left{transition:opacity .2s ease;will-change:opacity}.aside-swiper__right{margin-left:15px}.aside-swiper--toggled{-webkit-transform:translateX(-215px);transform:translateX(-215px)}.aside-swiper--toggled .aside-swiper__left{opacity:.2}.authorization-button{display:inline-block;margin-top:15px;cursor:pointer;color:#496a84}.authorization-button svg{margin-right:8px}.authorization-button:hover{color:#1a2630;cursor:pointer}.aside__scrollable{position:relative;-webkit-box-flex:2;-ms-flex:2 100%;flex:2 100%;overflow-y:hidden;overflow-x:hidden}.aside__scrollable:after,.aside__scrollable:before{content:"";height:15px;left:0;right:0;position:absolute;z-index:2}.aside__scrollable:before{top:0;background:linear-gradient(180deg,#292b37 0,rgba(41,43,55,0) 90%);opacity:0}.aside__scrollable--scrolled:before{opacity:1}.aside__scrollable:after{bottom:0;background:linear-gradient(180deg,rgba(41,43,55,0) 0,#292b37 90%)}.aside__scrollable-content{height:100%;overflow-y:auto;margin-right:-12px;padding-right:12px}.aside__scrollable-content:after{display:block;content:"";height:15px}.content{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}.note-title{display:block;width:100%;min-height:50px;box-sizing:border-box;overflow-y:hidden;max-width:600px;margin:0 auto 10px;border:0;font-size:48px;font-weight:800;outline:none;resize:none;font-family:PT Serif;padding:0}.note-title::-webkit-input-placeholder{color:#818ba1;opacity:.7;transition:opacity .2s ease}.note-title:-ms-input-placeholder{color:#818ba1;opacity:.7;transition:opacity .2s ease}.note-title::placeholder{color:#818ba1;opacity:.7;transition:opacity .2s ease}.note-title:focus::-webkit-input-placeholder{opacity:.1}.note-title:focus:-ms-input-placeholder{opacity:.1}.note-title:focus::placeholder{opacity:.1}.editor{padding:100px;margin-left:230px;margin-top:50px;font-size:17px;color:#1a1a1a;line-height:1.5em}.ce-redactor{min-height:150px!important}@media (max-width:1000px){.ce-block__content,.ce-toolbar__content{padding:0}}.header{position:fixed;left:0;right:0;top:0;height:25px;z-index:3;background:#fff;margin-left:230px;padding:10px 30px;border-bottom:1px solid #f3f3f4;font-size:14px;line-height:25px;color:#828698}.note-date,.share-button{margin-right:15px}.note-date svg,.share-button svg{margin-right:.8em;margin-top:-.3em;color:#85899b}.delete-note-button{float:right;cursor:pointer;z-index:10}.delete-note-button:hover{color:#5c6070}.save-indicator{opacity:0;color:#587bbf;transition:opacity .3s ease}.save-indicator.saved{opacity:1}.notes-list{position:relative - /*!*background: red;*!*/}.notes-list u{margin:1.15em 0}.notes-list__scroll{position:absolute;overflow-y:auto;top:0;bottom:0;right:0;left:0;padding-right:15px}.notes-list__content{list-style:none;padding:0;margin:0}.notes-list li{text-decoration:none;line-height:1.45em;cursor:pointer;word-wrap:break-word}.notes-list li:not(:last-of-type){margin-bottom:.75em}.notes-list li:hover{color:#fff}.notes-list--loading:after,.notes-list--loading:before{content:"";background:rgba(186,195,219,.2);height:6px;display:block;border-radius:5px;margin:7px 0 15px;width:65%}.folder-header:after{content:" ";display:table;clear:both}.folder-header{position:relative;margin-bottom:17px;font-size:14.8px;cursor:pointer;color:#bac3db;padding-left:25px}.folder-header__close{position:absolute;left:0;top:43%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.folder-header__close svg{height:15px;fill:#dee6fc}.folder-header__name{color:#dee6fc}.folder-header__settings{color:rgba(186,195,219,.5);margin-top:3px;cursor:pointer}.folder-header__settings:hover{color:#bac3db}.folder-settings{background:#292b37;position:absolute;top:calc(100% + 17px);left:0;right:0;z-index:2;display:none;padding:10px 0}.folder-settings__close{position:absolute;right:0;top:3px;cursor:pointer}.folder-settings__close svg{opacity:.2}.folder-settings__close:hover svg{opacity:1}.folder-settings__delete{margin-top:15px;font-size:14.6px}.folder-settings__delete svg{margin-right:10px;vertical-align:text-bottom}.folder-settings__delete:hover{color:#fff}.folder-settings-opened .folder-settings{display:block}.folder-settings-opened .aside-swiper__right .aside__scrollable{visibility:hidden}.status-bar{margin-top:2px;font-size:13.2px;letter-spacing:.038em;font-weight:400;color:rgba(222,230,252,.5);transition:color .25s cubic-bezier(.32,-.01,0,.99)}.status-bar--blinked{color:#dee6fc}.status-bar--loading:after{content:"...";display:inline-block;-webkit-animation:loading 1s infinite;animation:loading 1s infinite;overflow:hidden;vertical-align:text-bottom}@-webkit-keyframes loading{0%{width:0}to{width:12px}}@keyframes loading{0%{width:0}to{width:12px}}body{height:100vh;margin:0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:#fff}.drag-bar{position:absolute;width:100%;height:35px;top:0;left:0;z-index:1;-webkit-app-region:drag}svg{fill:currentColor;vertical-align:middle;max-height:100%}.clearfix:after{content:"";display:table;clear:"both"}.hide{display:none!important} + /*!*background: red;*!*/}.notes-list u{margin:1.15em 0}.notes-list__scroll{position:absolute;overflow-y:auto;top:0;bottom:0;right:0;left:0;padding-right:15px}.notes-list__content{list-style:none;padding:0;margin:0}.notes-list li{text-decoration:none;line-height:1.45em;cursor:pointer;word-wrap:break-word}.notes-list li:not(:last-of-type){margin-bottom:.75em}.notes-list li:hover{color:#fff}.notes-list--loading:after,.notes-list--loading:before{content:"";background:rgba(186,195,219,.2);height:6px;display:block;border-radius:5px;margin:7px 0 15px;width:65%}.folder-header:after{content:" ";display:table;clear:both}.folder-header{position:relative;margin-bottom:17px;font-size:14.8px;cursor:pointer;color:#bac3db;padding-left:25px}.folder-header__close{position:absolute;left:0;top:43%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.folder-header__close svg{height:15px;fill:#dee6fc}.folder-header__name{color:#dee6fc}.folder-header__settings{color:rgba(186,195,219,.5);margin-top:3px;cursor:pointer}.folder-header__settings:hover{color:#bac3db}.folder-settings{background:#292b37;position:absolute;top:calc(100% + 17px);left:0;right:0;z-index:2;display:none;padding:10px 0}.folder-settings__close{position:absolute;right:0;top:3px;cursor:pointer}.folder-settings__close svg{opacity:.2}.folder-settings__close:hover svg{opacity:1}.folder-settings__delete{margin-top:15px;font-size:14.6px}.folder-settings__delete svg{margin-right:10px;vertical-align:text-bottom}.folder-settings__delete:hover{color:#fff}.folder-settings-opened .folder-settings{display:block}.folder-settings-opened .aside-swiper__right .aside__scrollable{visibility:hidden}.status-bar{margin-top:2px;font-size:13.2px;letter-spacing:.038em;font-weight:400;color:rgba(222,230,252,.5);transition:color .25s cubic-bezier(.32,-.01,0,.99)}.status-bar--blinked{color:#dee6fc}.status-bar--loading:after{content:"...";display:inline-block;-webkit-animation:loading 1s infinite;animation:loading 1s infinite;overflow:hidden;vertical-align:text-bottom}@-webkit-keyframes loading{0%{width:0}to{width:12px}}@keyframes loading{0%{width:0}to{width:12px}}.searcher__input{background:none}.searcher__input:focus{outline:none}body{height:100vh;margin:0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:#fff}.drag-bar{position:absolute;width:100%;height:35px;top:0;left:0;z-index:1;-webkit-app-region:drag}svg{fill:currentColor;vertical-align:middle;max-height:100%}.clearfix:after{content:"";display:table;clear:"both"}.hide{display:none!important} /*# sourceMappingURL=bundle.css.map*/ \ No newline at end of file diff --git a/public/build/bundle.js b/public/build/bundle.js index 744a7934..dcf9fafb 100644 --- a/public/build/bundle.js +++ b/public/build/bundle.js @@ -1 +1 @@ -var codex=codex||{};codex.notes=function(e){function t(o){if(n[o])return n[o].exports;var r=n[o]={i:o,l:!1,exports:{}};return e[o].call(r.exports,r,r.exports,t),r.l=!0,r.exports}var n={};return t.m=e,t.c=n,t.i=function(e){return e},t.d=function(e,n,o){t.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:o})},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="",t(t.s=11)}([function(e,t,n){"use strict";function o(e){if(Array.isArray(e)){for(var t=0,n=Array(e.length);t0&&void 0!==arguments[0]?arguments[0]:null;return new Promise(function(t){t(window.ipcRenderer.sendSync("notes list - load",e))}).catch(function(e){console.log("Error while loading notes: ",e)})}},{key:"loadFolders",value:function(){window.ipcRenderer.send("folders list - load")}},{key:"newNoteButtonClicked",value:function(){u.default.focusEditor(),codex.notes.note.clear()}},{key:"newFolderButtonClicked",value:function(e){var t=e.target,n=this.newFolderField.querySelector("input");t.classList.add("hide"),this.newFolderField.classList.remove("hide"),n.focus()}},{key:"newFolderInputFilled",value:function(e){if("Enter"===e.key){var t=e.target,n=t.value.trim();if(n){var o=window.ipcRenderer.sendSync("folder - create",n);this.addFolder(o),t.value="",this.newFolderField.classList.add("hide"),this.newFolderButton.classList.remove("hide")}}}},{key:"addMenuItem",value:function(e,t){var n=this;if(!e.title)return void console.warn("Can not add Note to the Aside because it has no title",e);codex.notes.searcher.pushData(e);var o=void 0;if(t)o=document.querySelector('[name="js-notes-menu"]');else{if(!this.currentFolder||e.folderId!==this.currentFolder._id)return void console.log("Note added to closed folder: %o",e.folderId);o=document.querySelector('[name="js-folder-notes-menu"]')}var r=o.querySelector('[data-id="'+e._id+'"]');if(r)return void(r.textContent=this.createMenuItemTitle(e.title));var i=this.makeMenuItem(e.title,{id:e._id});o.insertAdjacentElement("afterbegin",i),i.addEventListener("click",function(e){return n.menuItemClicked(e)})}},{key:"addFolder",value:function(e){var t=this;if(!e.title)return void console.warn("Can not add Folder to the Aside because it has no title",e);var n=document.querySelector('[name="js-folders-menu"]'),o=this.makeMenuItem(e.title,{folderId:e._id});n.insertAdjacentElement("afterbegin",o),o.addEventListener("click",function(e){return t.folderClicked(e.target)})}},{key:"makeMenuItem",value:function(e,t){e=this.createMenuItemTitle(e);var n=h.make("li",null,{textContent:e});for(var o in t)n.dataset[o]=t[o];return n}},{key:"createMenuItemTitle",value:function(e){return e.length>68&&(e=e.substring(0,68)+"…"),e}},{key:"removeMenuItem",value:function(e){document.querySelectorAll('[name="js-notes-menu"], [name="js-folder-notes-menu"]').forEach(function(t){var n=t.querySelector('[data-id="'+e+'"]');n&&(n.remove(),codex.notes.searcher.removeData(e))})}},{key:"removeFolderFromMenu",value:function(e){var t=document.querySelector('[name="js-folders-menu"]');if(!t)return!1;var n=t.querySelector('[data-folder-id="'+e+'"]');n&&n.remove()}},{key:"updateFolderTitleInMenu",value:function(e,t){var n=document.querySelector('[name="js-folders-menu"]');if(!n)return!1;var o=n.querySelector('[data-folder-id="'+e+'"]');o&&(o.textContent=t)}},{key:"menuItemClicked",value:function(e){var t=e.target,n=t.dataset.id,o=window.ipcRenderer.sendSync("note - get",{id:n});codex.notes.note.render(o),document.querySelector('[name="editor-view"]').scrollIntoView()}},{key:"folderOpened",value:function(){!this.currentFolder&&this.previouslyOpenedFolder&&(this.currentFolder=new s.default(this.previouslyOpenedFolder)),console.assert(this.currentFolder,"Folder opened but does not initialized"),codex.notes.note.clear()}},{key:"folderClosed",value:function(){this.currentFolder&&(this.previouslyOpenedFolder=this.currentFolder.id),this.currentFolder=null}},{key:"folderClicked",value:function(e){var t=e.dataset.folderId;this.currentFolder=new s.default(t,e.textContent),this.swiper.open()}},{key:"closeFolder",value:function(){this.swiper.close()}},{key:"activateScrollableGradient",value:function(){var e=function(e){var t=e.target,n=e.target.parentNode;t.scrollTop>5?n.classList.add("aside__scrollable--scrolled"):n.classList.remove("aside__scrollable--scrolled")};document.querySelectorAll('[name="js-scrollable"]').forEach(function(t){t.addEventListener("scroll",e)})}}]),e}();t.default=v},function(e,t,n){"use strict";function o(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}Object.defineProperty(t,"__esModule",{value:!0});var r=function(){function e(e,t){for(var n=0;n1)for(var n in a)a[n].includes(e[t])&&(this.commands[n]=!0);else this.keys[e[t]]=!0}},{key:"execute",value:function(e){var t=e.ctrlKey||e.metaKey,n=e.shiftKey,o=e.altKey,r={CMD:t,SHIFT:n,ALT:o},a=void 0,s=!0;for(a in this.commands)s=s&&r[a];var l=void 0,u=!0;for(l in this.keys)u=u&&e.keyCode===i[l];s&&u&&this.callback.call(null,e)}},{key:"remove",value:function(){this.element.removeEventListener("keydown",this.executeShortcut)}}]),e}();t.default=s},function(e,t,n){"use strict";function o(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}Object.defineProperty(t,"__esModule",{value:!0});var r=function(){function e(e,t){for(var n=0;n30||e.wheelDeltaX<-30;n&&o&&(this.swiped||(this.swiped=!0,this.callback(e.deltaX>0),this.wheelTimeout=window.setTimeout(function(){t.swiped=!1},1e3)))}}]),e}();t.default=i},function(e,t,n){"use strict";function o(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}Object.defineProperty(t,"__esModule",{value:!0});var r=function(){function e(e,t){for(var n=0;n()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(e)}}]),e}();t.default=i}]); \ No newline at end of file +var codex=codex||{};codex.notes=function(e){function t(o){if(n[o])return n[o].exports;var r=n[o]={i:o,l:!1,exports:{}};return e[o].call(r.exports,r,r.exports,t),r.l=!0,r.exports}var n={};return t.m=e,t.c=n,t.i=function(e){return e},t.d=function(e,n,o){t.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:o})},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="",t(t.s=11)}([function(e,t,n){"use strict";function o(e){if(Array.isArray(e)){for(var t=0,n=Array(e.length);t0&&void 0!==arguments[0]?arguments[0]:null;return new Promise(function(t){t(window.ipcRenderer.sendSync("notes list - load",e))}).catch(function(e){console.log("Error while loading notes: ",e)})}},{key:"loadFolders",value:function(){window.ipcRenderer.send("folders list - load")}},{key:"newNoteButtonClicked",value:function(){l.default.focusEditor(),codex.notes.note.clear()}},{key:"newFolderButtonClicked",value:function(e){var t=e.target,n=this.newFolderField.querySelector("input");t.classList.add("hide"),this.newFolderField.classList.remove("hide"),n.focus()}},{key:"newFolderInputFilled",value:function(e){if("Enter"===e.key){var t=e.target,n=t.value.trim();if(n){var o=window.ipcRenderer.sendSync("folder - create",n);this.addFolder(o),t.value="",this.newFolderField.classList.add("hide"),this.newFolderButton.classList.remove("hide")}}}},{key:"addMenuItem",value:function(e,t){var n=this;if(!e.title)return void console.warn("Can not add Note to the Aside because it has no title",e);codex.notes.searcher.pushData(e);var o=void 0;if(t)o=document.querySelector('[name="js-notes-menu"]');else{if(!this.currentFolder||e.folderId!==this.currentFolder._id)return void console.log("Note added to closed folder: %o",e.folderId);o=document.querySelector('[name="js-folder-notes-menu"]')}var r=o.querySelector('[data-id="'+e._id+'"]');if(r)return void(r.textContent=this.createMenuItemTitle(e.title));var i=this.makeMenuItem(e.title,{id:e._id});o.insertAdjacentElement("afterbegin",i),i.addEventListener("click",function(e){return n.menuItemClicked(e)})}},{key:"addFolder",value:function(e){var t=this;if(!e.title)return void console.warn("Can not add Folder to the Aside because it has no title",e);var n=document.querySelector('[name="js-folders-menu"]'),o=this.makeMenuItem(e.title,{folderId:e._id});n.insertAdjacentElement("afterbegin",o),o.addEventListener("click",function(e){return t.folderClicked(e.target)})}},{key:"makeMenuItem",value:function(e,t){e=this.createMenuItemTitle(e);var n=h.make("li",null,{textContent:e});for(var o in t)n.dataset[o]=t[o];return n}},{key:"createMenuItemTitle",value:function(e){return e.length>68&&(e=e.substring(0,68)+"…"),e}},{key:"removeMenuItem",value:function(e){document.querySelectorAll('[name="js-notes-menu"], [name="js-folder-notes-menu"]').forEach(function(t){var n=t.querySelector('[data-id="'+e+'"]');n&&(n.remove(),codex.notes.searcher.removeData(e))})}},{key:"removeFolderFromMenu",value:function(e){var t=document.querySelector('[name="js-folders-menu"]');if(!t)return!1;var n=t.querySelector('[data-folder-id="'+e+'"]');n&&n.remove()}},{key:"updateFolderTitleInMenu",value:function(e,t){var n=document.querySelector('[name="js-folders-menu"]');if(!n)return!1;var o=n.querySelector('[data-folder-id="'+e+'"]');o&&(o.textContent=t)}},{key:"menuItemClicked",value:function(e){var t=e.target,n=t.dataset.id,o=window.ipcRenderer.sendSync("note - get",{id:n});codex.notes.note.render(o),document.querySelector('[name="editor-view"]').scrollIntoView()}},{key:"folderOpened",value:function(){!this.currentFolder&&this.previouslyOpenedFolder&&(this.currentFolder=new s.default(this.previouslyOpenedFolder)),console.assert(this.currentFolder,"Folder opened but does not initialized"),codex.notes.note.clear()}},{key:"folderClosed",value:function(){this.currentFolder&&(this.previouslyOpenedFolder=this.currentFolder.id),this.currentFolder=null}},{key:"folderClicked",value:function(e){var t=e.dataset.folderId;this.currentFolder=new s.default(t,e.textContent),this.swiper.open()}},{key:"closeFolder",value:function(){this.swiper.close()}},{key:"activateScrollableGradient",value:function(){var e=function(e){var t=e.target,n=e.target.parentNode;t.scrollTop>5?n.classList.add("aside__scrollable--scrolled"):n.classList.remove("aside__scrollable--scrolled")};document.querySelectorAll('[name="js-scrollable"]').forEach(function(t){t.addEventListener("scroll",e)})}}]),e}();t.default=v},function(e,t,n){"use strict";function o(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}Object.defineProperty(t,"__esModule",{value:!0});var r=function(){function e(e,t){for(var n=0;n1)for(var n in a)a[n].includes(e[t])&&(this.commands[n]=!0);else this.keys[e[t]]=!0}},{key:"execute",value:function(e){var t=e.ctrlKey||e.metaKey,n=e.shiftKey,o=e.altKey,r={CMD:t,SHIFT:n,ALT:o},a=void 0,s=!0;for(a in this.commands)s=s&&r[a];var u=void 0,l=!0;for(u in this.keys)l=l&&e.keyCode===i[u];s&&l&&this.callback.call(null,e)}},{key:"remove",value:function(){this.element.removeEventListener("keydown",this.executeShortcut)}}]),e}();t.default=s},function(e,t,n){"use strict";function o(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}Object.defineProperty(t,"__esModule",{value:!0});var r=function(){function e(e,t){for(var n=0;n30||e.wheelDeltaX<-30;n&&o&&(this.swiped||(this.swiped=!0,this.callback(e.deltaX>0),this.wheelTimeout=window.setTimeout(function(){t.swiped=!1},1e3)))}}]),e}();t.default=i},function(e,t,n){"use strict";function o(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}Object.defineProperty(t,"__esModule",{value:!0});var r=function(){function e(e,t){for(var n=0;n()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(e)}}]),e}();t.default=i}]); \ No newline at end of file diff --git a/public/javascripts/searcher.js b/public/javascripts/searcher.js index d6db69e9..3a3a9fa6 100644 --- a/public/javascripts/searcher.js +++ b/public/javascripts/searcher.js @@ -7,6 +7,10 @@ export default class Searcher { * @constructor */ constructor() { + /** + * DOM tree of class + * @type {Object} + */ this.DOM = { input: document.getElementsByClassName('searcher__input')[0], foldersContainer: document.getElementsByName('js-folders-container')[0], @@ -16,6 +20,12 @@ export default class Searcher { } }; + /** + * Default value in the search input form + * @type {String} + */ + this.defaultInputValue = 'Search'; + /** * Where to search * @type {Array} @@ -28,6 +38,12 @@ export default class Searcher { */ this.found = []; + this.DOM.input.addEventListener('focus', () => { + if (this.DOM.input.value == this.defaultInputValue) { + this.DOM.input.value = ''; + } + }); + this.DOM.input.addEventListener('keyup', () => { this.search(this.DOM.input.value); }); diff --git a/public/stylesheets/components/searcher.css b/public/stylesheets/components/searcher.css index a65adbd5..6395628a 100644 --- a/public/stylesheets/components/searcher.css +++ b/public/stylesheets/components/searcher.css @@ -1,7 +1,11 @@ .searcher { &__input { - + background: none; + } + + &__input:focus { + outline: none; } } diff --git a/src/views/aside.pug b/src/views/aside.pug index 86e489ef..f2e98990 100644 --- a/src/views/aside.pug +++ b/src/views/aside.pug @@ -16,8 +16,7 @@ //- //- Search //- - .searcher - input.searcher__input + input.searcher__input.add-note-button(value="Search") //- //- Scrollable zone