From fa409ef5dd6864f6cb07b6c8d6ead10979fab472 Mon Sep 17 00:00:00 2001 From: Kushagra Gour Date: Tue, 24 Jan 2017 12:03:32 +0530 Subject: [PATCH 01/13] add keyboard navigation in saved library pane. fixes #50 --- src/script.js | 25 +++++++++++++++++++++++++ src/style.css | 3 ++- 2 files changed, 27 insertions(+), 1 deletion(-) diff --git a/src/script.js b/src/script.js index e8f1667..26818e0 100644 --- a/src/script.js +++ b/src/script.js @@ -988,6 +988,31 @@ settingsBtn, onboardModal, notificationsBtn, onboardShowInTabOptionBtn, onboardD else if (event.keyCode === 27) { closeAllOverlays(); } + if (event.keyCode === 40 && savedItemsPane.classList.contains('is-open')) { + var selectedItemElement = $('.js-saved-item-tile.selected'); + if (selectedItemElement) { + selectedItemElement.classList.remove('selected'); + selectedItemElement.nextElementSibling.classList.add('selected'); + } else { + $('.js-saved-item-tile:first-child').classList.add('selected'); + } + } else if (event.keyCode === 38 && savedItemsPane.classList.contains('is-open')) { + var selectedItemElement = $('.js-saved-item-tile.selected'); + if (selectedItemElement) { + selectedItemElement.classList.remove('selected'); + selectedItemElement.previousElementSibling.classList.add('selected'); + } else { + $('.js-saved-item-tile:first-child').classList.add('selected'); + } + } else if (event.keyCode === 13 && savedItemsPane.classList.contains('is-open')) { + var selectedItemElement = $('.js-saved-item-tile.selected'); + setTimeout(function () { + openItem(selectedItemElement.dataset.itemId); + }, 350); + toggleSavedItemsPane(); + } + + utils.log(event.keyCode) }); window.addEventListener('click', function(e) { diff --git a/src/style.css b/src/style.css index 9f12bd2..6a0a702 100644 --- a/src/style.css +++ b/src/style.css @@ -466,7 +466,8 @@ li.CodeMirror-hint-active { transform: translateX(0px); } } -.saved-item-tile:hover { +.saved-item-tile:hover, +.saved-item-tile.selected { background: rgba(255,255,255,0.1); } .saved-item-tile__close-btn { From 7aa764cea0cd29e7b5bc81455344455ed07a4393 Mon Sep 17 00:00:00 2001 From: Kushagra Gour Date: Sun, 29 Jan 2017 17:53:04 +0530 Subject: [PATCH 02/13] fix date in new item title. fixes #58 --- src/script.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/script.js b/src/script.js index 26818e0..92b84cc 100644 --- a/src/script.js +++ b/src/script.js @@ -312,7 +312,7 @@ settingsBtn, onboardModal, notificationsBtn, onboardShowInTabOptionBtn, onboardD function createNewItem() { var d = new Date(); currentItem = { - title: 'Untitled ' + d.getDate() + '-' + d.getMonth() + '-' + d.getHours() + ':' + d.getMinutes(), + title: 'Untitled ' + d.getDate() + '-' + (d.getMonth() + 1) + '-' + d.getHours() + ':' + d.getMinutes(), html: '', css: '', js: '', From 1615c7f8895988c00a2e2c388c80cd1e2917e464 Mon Sep 17 00:00:00 2001 From: Kushagra Gour Date: Wed, 1 Feb 2017 10:44:19 +0530 Subject: [PATCH 03/13] add autocomplete in library add textarea. fixes #49 --- src/index.html | 1 + src/script.js | 9 +-- src/style.css | 8 +++ src/textarea-autocomplete.js | 119 +++++++++++++++++++++++++++++++++++ 4 files changed, 133 insertions(+), 4 deletions(-) create mode 100644 src/textarea-autocomplete.js diff --git a/src/index.html b/src/index.html index f6f5f21..9352097 100644 --- a/src/index.html +++ b/src/index.html @@ -405,6 +405,7 @@ + diff --git a/src/script.js b/src/script.js index 92b84cc..e3560fd 100644 --- a/src/script.js +++ b/src/script.js @@ -1011,8 +1011,6 @@ settingsBtn, onboardModal, notificationsBtn, onboardShowInTabOptionBtn, onboardD }, 350); toggleSavedItemsPane(); } - - utils.log(event.keyCode) }); window.addEventListener('click', function(e) { @@ -1049,8 +1047,11 @@ settingsBtn, onboardModal, notificationsBtn, onboardShowInTabOptionBtn, onboardD trackEvent('ui', 'addLibrarySelect', target.selectedOptions[0].label); onExternalLibChange(); }); - externalJsTextarea.addEventListener('change', onExternalLibChange); - externalCssTextarea.addEventListener('change', onExternalLibChange); + externalJsTextarea.addEventListener('blur', onExternalLibChange); + externalCssTextarea.addEventListener('blur', onExternalLibChange); + + new TextareaAutoComplete(externalJsTextarea, obj => obj.latest.match(/\.js$/)); + new TextareaAutoComplete(externalCssTextarea, obj => obj.latest.match(/\.css$/)); chrome.storage.local.get({ layoutMode: 1, diff --git a/src/style.css b/src/style.css index 6a0a702..2f53c58 100644 --- a/src/style.css +++ b/src/style.css @@ -582,6 +582,7 @@ li.CodeMirror-hint-active { color: #333; cursor: pointer; } +.dropdown__menu > li.selected > a, .dropdown__menu > li > a:hover { background: var(--color-sidebar); color: white; @@ -678,3 +679,10 @@ li.CodeMirror-hint-active { background: white url('data:image/svg+xml;charset=UTF-8,'); } +.autocomplete-dropdown { + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + right: 0; + max-height: 200px; + overflow-y: auto; +} \ No newline at end of file diff --git a/src/textarea-autocomplete.js b/src/textarea-autocomplete.js new file mode 100644 index 0000000..3dc289b --- /dev/null +++ b/src/textarea-autocomplete.js @@ -0,0 +1,119 @@ +// textarea-autocomplete.js +(function() { + + var timeout; + var t, list; + var isShowingSuggestions = false; + + class TextareaAutoComplete { + + constructor (textarea, filter) { + this.t = textarea; + this.filter = filter; + var wrap = document.createElement('div'); + wrap.classList.add('btn-group'); + textarea.parentElement.insertBefore(wrap, textarea); + wrap.insertBefore(textarea, null); + this.list = document.createElement('ul'); + this.list.classList.add('dropdown__menu'); + this.list.classList.add('autocomplete-dropdown'); + wrap.insertBefore(this.list, null); + + this.t.addEventListener('input', e => this.onInput(e)); + this.t.addEventListener('keydown', e => this.onKeyDown(e)); + this.t.addEventListener('blur', e => this.closeSuggestions()) + } + + get currentLineNumber() { + return this.t.value.substr(0, this.t.selectionStart).split('\n').length; + } + get currentLine() { + var line = this.currentLineNumber; + return this.t.value.split('\n')[line - 1]; + } + closeSuggestions() { + this.list.parentElement.classList.remove('open'); + this.isShowingSuggestions = false; + } + getList(input) { + // return new Promise((resolve) => { + // resolve([ + // { name: 'asdsd', latest: 'dsfdsfsdf/sdf/sd/f/df'}, + // { name: 'asdsd', latest: 'dsfdsfsdf/sdf/sd/f/df'}, + // { name: 'asdsd', latest: 'dsfdsfsdf/sdf/sd/f/df'}, + // { name: 'asdsd', latest: 'dsfdsfsdf/sdf/sd/f/df'}, + // { name: 'asdsd', latest: 'dsfdsfsdf/sdf/sd/f/df'}, + // { name: 'asdsd', latest: 'dsfdsfsdf/sdf/sd/f/df'}, + // { name: 'asdsd', latest: 'dsfdsfsdf/sdf/sd/f/df'}, + // { name: 'asdsd', latest: 'dsfdsfsdf/sdf/sd/f/df'}, + // { name: 'asdsd', latest: 'dsfdsfsdf/sdf/sd/f/df'}, + // ]) + // }) + var url = 'https://api.cdnjs.com/libraries?search='; + return fetch(url + input) + .then(response => { + return response.json().then(json => json.results); + }); + } + replaceCurrentLine(val) { + var lines = this.t.value.split('\n'); + lines.splice(this.currentLineNumber - 1, 1, val) + this.t.value = lines.join('\n'); + } + onInput() { + var currentLine = this.currentLine; + if (currentLine) { + clearTimeout(this.timeout); + this.timeout = setTimeout(() => { + this.getList(currentLine).then(arr => { + if (!arr.length) { + this.closeSuggestions(); + return; + } + this.list.innerHTML = ''; + if (this.filter) { + arr = arr.filter(this.filter); + } + for (var i = 0; i < Math.min(arr.length, 10); i++) { + this.list.innerHTML += `
  • ${arr[i].name}
    • `; + } + this.list.parentElement.classList.add('open'); + this.isShowingSuggestions = true; + }); + }, 500); + } + } + onKeyDown(event) { + if (event.keyCode === 27) { + this.closeSuggestions(); + event.stopPropagation(); + } + if (event.keyCode === 40 && this.isShowingSuggestions) { + var selectedItemElement = this.list.querySelector('.selected'); + if (selectedItemElement) { + selectedItemElement.classList.remove('selected'); + selectedItemElement.nextElementSibling.classList.add('selected'); + } else { + this.list.querySelector('li:first-child').classList.add('selected'); + } + event.preventDefault(); + } else if (event.keyCode === 38 && this.isShowingSuggestions) { + var selectedItemElement = this.list.querySelector('.selected'); + if (selectedItemElement) { + selectedItemElement.classList.remove('selected'); + selectedItemElement.previousElementSibling.classList.add('selected'); + } else { + this.list.querySelector('li:first-child').classList.add('selected'); + } + event.preventDefault(); + } else if (event.keyCode === 13 && this.isShowingSuggestions) { + var selectedItemElement = this.list.querySelector('.selected'); + this.replaceCurrentLine(selectedItemElement.dataset.url) + this.closeSuggestions(); + } + } + } + + window.TextareaAutoComplete = TextareaAutoComplete; + +})(); \ No newline at end of file From cd583c35c37ab97f0bb6bcb332787b222e47b609 Mon Sep 17 00:00:00 2001 From: Kushagra Gour Date: Sun, 5 Feb 2017 04:11:50 +0530 Subject: [PATCH 04/13] add loader and polish library autocompletion --- src/index.html | 4 ++-- src/style.css | 45 ++++++++++++++++++++++++++++++++---- src/textarea-autocomplete.js | 40 +++++++++++++++++++++++++++++--- 3 files changed, 79 insertions(+), 10 deletions(-) diff --git a/src/index.html b/src/index.html index 9352097..9da7727 100644 --- a/src/index.html +++ b/src/index.html @@ -172,10 +172,10 @@

    Add Library

    JavaScript

    - +

    CSS

    - +
    Choose from popular libraries: diff --git a/src/style.css b/src/style.css index 2f53c58..f47a7b0 100644 --- a/src/style.css +++ b/src/style.css @@ -554,6 +554,32 @@ li.CodeMirror-hint-active { top: 2px; left: 2px; } +.loader, +.loader:after { + border-radius: 50%; + width: 3em; + height: 3em; +} +.loader { + font-size: 5px; + position: relative; + text-indent: -9999em; + border-top: 1.1em solid rgba(118,57,229, 0.2); + border-right: 1.1em solid rgba(118,57,229, 0.2); + border-bottom: 1.1em solid rgba(118,57,229, 0.2); + border-left: 1.1em solid #7639e5; + transform: translateZ(0); + animation: load8 1.1s infinite linear; +} +@keyframes load8 { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(360deg); + } +} + .btn-group { position: relative; cursor: pointer; @@ -566,12 +592,13 @@ li.CodeMirror-hint-active { margin: 0; min-width: 200px; display: block; + font-size: 0.88rem; list-style: none; border-radius: 4px; overflow: hidden; opacity: 0; visibility: hidden; - transition: 0.25s ease; + transition: transform 0.25s ease; transform: translateY(10px); z-index: 5; background: white; @@ -591,7 +618,8 @@ li.CodeMirror-hint-active { border-bottom: 1px solid rgba(0,0,0,0.05); } -.open .dropdown__menu { +.open > .dropdown__menu, +.dropdown__menu.is-open { opacity: 1; visibility: visible; transform: translateY(0); @@ -680,9 +708,16 @@ li.CodeMirror-hint-active { } .autocomplete-dropdown { - border-bottom-left-radius: 0; - border-bottom-right-radius: 0; + border-top-left-radius: 0; + border-top-right-radius: 0; right: 0; max-height: 200px; overflow-y: auto; -} \ No newline at end of file + border: 1px solid rgba(0,0,0,0.5); + z-index: 2001; +} +.autocomplete__loader { + position: absolute; + right: 10px; + bottom: 10px; +} diff --git a/src/textarea-autocomplete.js b/src/textarea-autocomplete.js index 3dc289b..6a434c7 100644 --- a/src/textarea-autocomplete.js +++ b/src/textarea-autocomplete.js @@ -19,9 +19,25 @@ this.list.classList.add('autocomplete-dropdown'); wrap.insertBefore(this.list, null); + this.loader = document.createElement('div'); + this.loader.classList.add('loader'); + this.loader.classList.add('autocomplete__loader'); + this.loader.style.display = 'none'; + wrap.insertBefore(this.loader, null); + + // after list is insrted into the DOM, we put it in the body + // fixed at same position + setTimeout(() => { + requestIdleCallback(() => { + document.body.appendChild(this.list); + this.list.style.position = 'fixed'; + }); + },100); + this.t.addEventListener('input', e => this.onInput(e)); this.t.addEventListener('keydown', e => this.onKeyDown(e)); - this.t.addEventListener('blur', e => this.closeSuggestions()) + this.t.addEventListener('blur', e => this.closeSuggestions()); + this.list.addEventListener('mousedown', e => this.onListMouseDown(e)); } get currentLineNumber() { @@ -32,7 +48,7 @@ return this.t.value.split('\n')[line - 1]; } closeSuggestions() { - this.list.parentElement.classList.remove('open'); + this.list.classList.remove('is-open'); this.isShowingSuggestions = false; } getList(input) { @@ -63,9 +79,12 @@ onInput() { var currentLine = this.currentLine; if (currentLine) { + if (currentLine.indexOf('/') !== -1 || currentLine.match(/https*:\/\//)) { return; } clearTimeout(this.timeout); this.timeout = setTimeout(() => { + this.loader.style.display = 'block'; this.getList(currentLine).then(arr => { + this.loader.style.display = 'none'; if (!arr.length) { this.closeSuggestions(); return; @@ -77,13 +96,21 @@ for (var i = 0; i < Math.min(arr.length, 10); i++) { this.list.innerHTML += `
  • ${arr[i].name}
    • `; } - this.list.parentElement.classList.add('open'); this.isShowingSuggestions = true; + if (!this.textareaBounds) { + this.textareaBounds = this.t.getBoundingClientRect(); + this.list.style.top = this.textareaBounds.bottom + 'px'; + this.list.style.left = this.textareaBounds.left + 'px'; + this.list.style.width = this.textareaBounds.width + 'px'; + } + this.list.classList.add('is-open'); }); }, 500); } } onKeyDown(event) { + if (!this.isShowingSuggestions) { return; } + if (event.keyCode === 27) { this.closeSuggestions(); event.stopPropagation(); @@ -112,6 +139,13 @@ this.closeSuggestions(); } } + onListMouseDown(event) { + var target = event.target; + if (target.parentElement.dataset.url) { + this.replaceCurrentLine(target.parentElement.dataset.url) + this.closeSuggestions(); + } + } } window.TextareaAutoComplete = TextareaAutoComplete; From 4e7567da8e00fdcc13ea7f47854230abd724f47d Mon Sep 17 00:00:00 2001 From: Kushagra Gour Date: Sun, 5 Feb 2017 15:47:04 +0530 Subject: [PATCH 05/13] feat: preview screenshot capture. fixes #23 --- src/index.html | 8 ++++- src/manifest.json | 4 ++- src/script.js | 88 +++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 98 insertions(+), 2 deletions(-) diff --git a/src/index.html b/src/index.html index 9da7727..a18095e 100644 --- a/src/index.html +++ b/src/index.html @@ -105,12 +105,18 @@ - + + + + + + +
    diff --git a/src/manifest.json b/src/manifest.json index ecbb791..bca0612 100644 --- a/src/manifest.json +++ b/src/manifest.json @@ -6,7 +6,9 @@ "homepage_url": "https://kushagragour.in/lab/web-maker", "permissions": [ "storage", - "tabs" + "tabs", + "", + "downloads" ], "content_security_policy": "script-src 'self' https://ajax.googleapis.com https://code.jquery.com https://cdnjs.cloudflare.com https://unpkg.com https://maxcdn.bootstrapcdn.com https://cdn.jsdelivr.net/ https://www.google-analytics.com 'unsafe-eval'; object-src 'self'", "options_ui": { diff --git a/src/script.js b/src/script.js index e3560fd..efd8c10 100644 --- a/src/script.js +++ b/src/script.js @@ -822,6 +822,94 @@ settingsBtn, onboardModal, notificationsBtn, onboardShowInTabOptionBtn, onboardD trackEvent('ui', 'onboardDontShowInTabClick'); } + function saveScreenshot(dataURI) { + // convert base64 to raw binary data held in a string + // doesn't handle URLEncoded DataURIs + var byteString = atob(dataURI.split(',')[1]); + + // separate out the mime component + var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0]; + + // write the bytes of the string to an ArrayBuffer + var ab = new ArrayBuffer(byteString.length); + var ia = new Uint8Array(ab); + for (var i = 0; i < byteString.length; i++) { + ia[i] = byteString.charCodeAt(i); + } + + // create a blob for writing to a file + var blob = new Blob([ab], {type: mimeString}); + var size = blob.size + (1024 / 2); + + var d = new Date(); + var fileName = [ 'web-maker-screenshot', d.getFullYear(), d.getMonth(), d.getDate(), d.getHours(), d.getMinutes(), d.getSeconds() ].join('-'); + fileName += '.png'; + + function onWriteEnd() { + var filePath = 'filesystem:chrome-extension://' + chrome.i18n.getMessage('@@extension_id') + '/temporary/' + fileName; + + chrome.downloads.download({ + url: filePath + }, function() { + // If there was an error, just open the screenshot in a tab. + // This happens in incognito mode where extension cannot access filesystem. + if (chrome.runtime.lastError) { + window.open(filePath); + } + }); + } + + function errorHandler(e) { + utils.log(e); + } + + // create a blob for writing to a file + window.webkitRequestFileSystem(window.TEMPORARY, size, fs => { + fs.root.getFile(fileName, { create: true }, fileEntry => { + fileEntry.createWriter(function(fileWriter) { + fileWriter.onwriteend = onWriteEnd; + fileWriter.write(blob); + }, errorHandler); + }, errorHandler); + }, errorHandler); + } + + scope.takeScreenshot = function (e) { + // Hide tooltips so that they don't show in the screenshot + var s = document.createElement('style'); + s.textContent = '[class*="hint"]:after, [class*="hint"]:before { display: none!important; }'; + document.body.appendChild(s); + + setTimeout(() => { + + chrome.tabs.captureVisibleTab( + null, { format: 'png', quality: 100 }, function(dataURI) { + s.remove(); + if (dataURI) { + var image = new Image(); + function onImgLoad() { + var c = document.createElement('canvas'); + var iframeBounds = frame.getBoundingClientRect(); + c.width = iframeBounds.width; + c.height = iframeBounds.height; + utils.log(c, iframeBounds) + ctx = c.getContext('2d'); + ctx.drawImage(image, + iframeBounds.left, iframeBounds.top, iframeBounds.width, iframeBounds.height, + 0, 0, iframeBounds.width, iframeBounds.height); + image.removeEventListener('load', onImgLoad); + saveScreenshot(c.toDataURL()); + }; + image.src = dataURI; + image.addEventListener('load', onImgLoad); + } + }); + }, 50); + + trackEvent('ui', 'takeScreenshotBtnClick'); + e.preventDefault(); + } + function compileNodes() { var nodes = [].slice.call($all('[d-click]')); nodes.forEach(function (el) { From 24b3178574ad6864e141a016aa23d1f484fd54e8 Mon Sep 17 00:00:00 2001 From: Kushagra Gour Date: Sun, 5 Feb 2017 17:07:21 +0530 Subject: [PATCH 06/13] add key shortcut for auto indenting code. fixes #32 --- src/script.js | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/src/script.js b/src/script.js index efd8c10..a1e8de5 100644 --- a/src/script.js +++ b/src/script.js @@ -759,7 +759,12 @@ settingsBtn, onboardModal, notificationsBtn, onboardShowInTabOptionBtn, onboardD foldGutter: true, gutters: options.gutters || [], // cursorScrollMargin: '20', has issue with scrolling - profile: options.profile || '' + profile: options.profile || '', + extraKeys: { + "Shift-Tab": function(cm) { + CodeMirror.commands.indentAuto(cm); + } + } }); cm.on('change', function onChange() { clearTimeout(updateTimer); From f0978bf634d9fc9fd580c9e56f6a0194768144c9 Mon Sep 17 00:00:00 2001 From: Kushagra Gour Date: Sun, 5 Feb 2017 17:13:22 +0530 Subject: [PATCH 07/13] style active lines. --- src/index.html | 1 + src/script.js | 1 + src/style.css | 3 +++ 3 files changed, 5 insertions(+) diff --git a/src/index.html b/src/index.html index a18095e..91e2356 100644 --- a/src/index.html +++ b/src/index.html @@ -392,6 +392,7 @@ + diff --git a/src/script.js b/src/script.js index a1e8de5..7b9d6b1 100644 --- a/src/script.js +++ b/src/script.js @@ -757,6 +757,7 @@ settingsBtn, onboardModal, notificationsBtn, onboardShowInTabOptionBtn, onboardD theme: 'monokai', lint: !!options.lint, foldGutter: true, + styleActiveLine: true, gutters: options.gutters || [], // cursorScrollMargin: '20', has issue with scrolling profile: options.profile || '', diff --git a/src/style.css b/src/style.css index f47a7b0..a37f193 100644 --- a/src/style.css +++ b/src/style.css @@ -211,6 +211,9 @@ select, input[type="text"], textarea { .cm-s-monokai .CodeMirror-guttermarker-subtle { opacity: 0.4; } +.CodeMirror-activeline-background, .CodeMirror-activeline-gutter { + background: rgba(0,0,0,0.1) !important; +} .CodeMirror-guttermarker-subtle { /*visibility: hidden !important;*/ } From 145c476abe92336e9c3735cb6604725b36a3fb16 Mon Sep 17 00:00:00 2001 From: Kushagra Gour Date: Sun, 5 Feb 2017 17:29:50 +0530 Subject: [PATCH 08/13] eslint fixes :| --- .eslintrc.json | 6 ++-- src/script.js | 58 ++++++++++++++++++------------------ src/textarea-autocomplete.js | 42 +++++++++----------------- 3 files changed, 47 insertions(+), 59 deletions(-) diff --git a/.eslintrc.json b/.eslintrc.json index bd2bad0..fa8f161 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -8,7 +8,7 @@ "accessor-pairs": "error", "array-bracket-spacing": "off", "array-callback-return": "error", - "arrow-body-style": "error", + "arrow-body-style": "off", "arrow-parens": "error", "arrow-spacing": "error", "block-scoped-var": "error", @@ -120,7 +120,7 @@ "no-native-reassign": "error", "no-negated-condition": "off", "no-nested-ternary": "off", - "no-new": "error", + "no-new": "off", "no-new-func": "error", "no-new-object": "error", "no-new-require": "error", @@ -246,6 +246,8 @@ ] }, "globals": { + "ArrayBuffer": true, + "Uint8Array": true, "chrome": true, "CodeMirror": true, "Split": true, diff --git a/src/script.js b/src/script.js index 7b9d6b1..3c788a1 100644 --- a/src/script.js +++ b/src/script.js @@ -3,7 +3,8 @@ onboardModal, layoutBtn1, layoutBtn2, layoutBtn3, layoutBtn4, helpBtn, onboardModal, onboardModal, addLibraryModal, addLibraryModal, notificationsBtn, notificationsModal, notificationsModal, notificationsModal, notificationsBtn, codepenBtn, saveHtmlBtn, openBtn, saveBtn, newBtn, -settingsBtn, onboardModal, notificationsBtn, onboardShowInTabOptionBtn, onboardDontShowInTabOptionBtn */ +settingsBtn, onboardModal, notificationsBtn, onboardShowInTabOptionBtn, onboardDontShowInTabOptionBtn +TextareaAutoComplete */ /* eslint-disable no-extra-semi */ ;(function (alertsService) { @@ -762,8 +763,8 @@ settingsBtn, onboardModal, notificationsBtn, onboardShowInTabOptionBtn, onboardD // cursorScrollMargin: '20', has issue with scrolling profile: options.profile || '', extraKeys: { - "Shift-Tab": function(cm) { - CodeMirror.commands.indentAuto(cm); + "Shift-Tab": function(editor) { + CodeMirror.commands.indentAuto(editor); } } }); @@ -844,7 +845,7 @@ settingsBtn, onboardModal, notificationsBtn, onboardShowInTabOptionBtn, onboardD } // create a blob for writing to a file - var blob = new Blob([ab], {type: mimeString}); + var blob = new Blob([ab], { type: mimeString }); var size = blob.size + (1024 / 2); var d = new Date(); @@ -870,9 +871,9 @@ settingsBtn, onboardModal, notificationsBtn, onboardShowInTabOptionBtn, onboardD } // create a blob for writing to a file - window.webkitRequestFileSystem(window.TEMPORARY, size, fs => { - fs.root.getFile(fileName, { create: true }, fileEntry => { - fileEntry.createWriter(function(fileWriter) { + window.webkitRequestFileSystem(window.TEMPORARY, size, (fs) => { + fs.root.getFile(fileName, { create: true }, (fileEntry) => { + fileEntry.createWriter((fileWriter) => { fileWriter.onwriteend = onWriteEnd; fileWriter.write(blob); }, errorHandler); @@ -886,28 +887,26 @@ settingsBtn, onboardModal, notificationsBtn, onboardShowInTabOptionBtn, onboardD s.textContent = '[class*="hint"]:after, [class*="hint"]:before { display: none!important; }'; document.body.appendChild(s); - setTimeout(() => { + function onImgLoad(image) { + var c = document.createElement('canvas'); + var iframeBounds = frame.getBoundingClientRect(); + c.width = iframeBounds.width; + c.height = iframeBounds.height; + var ctx = c.getContext('2d'); + ctx.drawImage(image, + iframeBounds.left, iframeBounds.top, iframeBounds.width, iframeBounds.height, + 0, 0, iframeBounds.width, iframeBounds.height); + image.removeEventListener('load', onImgLoad); + saveScreenshot(c.toDataURL()); + } - chrome.tabs.captureVisibleTab( - null, { format: 'png', quality: 100 }, function(dataURI) { + setTimeout(() => { + chrome.tabs.captureVisibleTab(null, { format: 'png', quality: 100 }, function(dataURI) { s.remove(); if (dataURI) { var image = new Image(); - function onImgLoad() { - var c = document.createElement('canvas'); - var iframeBounds = frame.getBoundingClientRect(); - c.width = iframeBounds.width; - c.height = iframeBounds.height; - utils.log(c, iframeBounds) - ctx = c.getContext('2d'); - ctx.drawImage(image, - iframeBounds.left, iframeBounds.top, iframeBounds.width, iframeBounds.height, - 0, 0, iframeBounds.width, iframeBounds.height); - image.removeEventListener('load', onImgLoad); - saveScreenshot(c.toDataURL()); - }; image.src = dataURI; - image.addEventListener('load', onImgLoad); + image.addEventListener('load', () => onImgLoad(image, dataURI)); } }); }, 50); @@ -1067,6 +1066,7 @@ settingsBtn, onboardModal, notificationsBtn, onboardShowInTabOptionBtn, onboardD }); window.addEventListener('keydown', function (event) { + var selectedItemElement; // Ctrl/⌘ + S if ((event.ctrlKey || event.metaKey) && (event.keyCode === 83)) { event.preventDefault(); @@ -1083,7 +1083,7 @@ settingsBtn, onboardModal, notificationsBtn, onboardShowInTabOptionBtn, onboardD closeAllOverlays(); } if (event.keyCode === 40 && savedItemsPane.classList.contains('is-open')) { - var selectedItemElement = $('.js-saved-item-tile.selected'); + selectedItemElement = $('.js-saved-item-tile.selected'); if (selectedItemElement) { selectedItemElement.classList.remove('selected'); selectedItemElement.nextElementSibling.classList.add('selected'); @@ -1091,7 +1091,7 @@ settingsBtn, onboardModal, notificationsBtn, onboardShowInTabOptionBtn, onboardD $('.js-saved-item-tile:first-child').classList.add('selected'); } } else if (event.keyCode === 38 && savedItemsPane.classList.contains('is-open')) { - var selectedItemElement = $('.js-saved-item-tile.selected'); + selectedItemElement = $('.js-saved-item-tile.selected'); if (selectedItemElement) { selectedItemElement.classList.remove('selected'); selectedItemElement.previousElementSibling.classList.add('selected'); @@ -1099,7 +1099,7 @@ settingsBtn, onboardModal, notificationsBtn, onboardShowInTabOptionBtn, onboardD $('.js-saved-item-tile:first-child').classList.add('selected'); } } else if (event.keyCode === 13 && savedItemsPane.classList.contains('is-open')) { - var selectedItemElement = $('.js-saved-item-tile.selected'); + selectedItemElement = $('.js-saved-item-tile.selected'); setTimeout(function () { openItem(selectedItemElement.dataset.itemId); }, 350); @@ -1144,8 +1144,8 @@ settingsBtn, onboardModal, notificationsBtn, onboardShowInTabOptionBtn, onboardD externalJsTextarea.addEventListener('blur', onExternalLibChange); externalCssTextarea.addEventListener('blur', onExternalLibChange); - new TextareaAutoComplete(externalJsTextarea, obj => obj.latest.match(/\.js$/)); - new TextareaAutoComplete(externalCssTextarea, obj => obj.latest.match(/\.css$/)); + new TextareaAutoComplete(externalJsTextarea, (obj) => obj.latest.match(/\.js$/)); + new TextareaAutoComplete(externalCssTextarea, (obj) => obj.latest.match(/\.css$/)); chrome.storage.local.get({ layoutMode: 1, diff --git a/src/textarea-autocomplete.js b/src/textarea-autocomplete.js index 6a434c7..14f97d8 100644 --- a/src/textarea-autocomplete.js +++ b/src/textarea-autocomplete.js @@ -1,15 +1,11 @@ // textarea-autocomplete.js (function() { - var timeout; - var t, list; - var isShowingSuggestions = false; - class TextareaAutoComplete { constructor (textarea, filter) { this.t = textarea; - this.filter = filter; + this.filter = filter; var wrap = document.createElement('div'); wrap.classList.add('btn-group'); textarea.parentElement.insertBefore(wrap, textarea); @@ -34,10 +30,10 @@ }); },100); - this.t.addEventListener('input', e => this.onInput(e)); - this.t.addEventListener('keydown', e => this.onKeyDown(e)); - this.t.addEventListener('blur', e => this.closeSuggestions()); - this.list.addEventListener('mousedown', e => this.onListMouseDown(e)); + this.t.addEventListener('input', (e) => this.onInput(e)); + this.t.addEventListener('keydown', (e) => this.onKeyDown(e)); + this.t.addEventListener('blur', (e) => this.closeSuggestions(e)); + this.list.addEventListener('mousedown', (e) => this.onListMouseDown(e)); } get currentLineNumber() { @@ -52,23 +48,10 @@ this.isShowingSuggestions = false; } getList(input) { - // return new Promise((resolve) => { - // resolve([ - // { name: 'asdsd', latest: 'dsfdsfsdf/sdf/sd/f/df'}, - // { name: 'asdsd', latest: 'dsfdsfsdf/sdf/sd/f/df'}, - // { name: 'asdsd', latest: 'dsfdsfsdf/sdf/sd/f/df'}, - // { name: 'asdsd', latest: 'dsfdsfsdf/sdf/sd/f/df'}, - // { name: 'asdsd', latest: 'dsfdsfsdf/sdf/sd/f/df'}, - // { name: 'asdsd', latest: 'dsfdsfsdf/sdf/sd/f/df'}, - // { name: 'asdsd', latest: 'dsfdsfsdf/sdf/sd/f/df'}, - // { name: 'asdsd', latest: 'dsfdsfsdf/sdf/sd/f/df'}, - // { name: 'asdsd', latest: 'dsfdsfsdf/sdf/sd/f/df'}, - // ]) - // }) var url = 'https://api.cdnjs.com/libraries?search='; return fetch(url + input) - .then(response => { - return response.json().then(json => json.results); + .then((response) => { + return response.json().then((json) => json.results); }); } replaceCurrentLine(val) { @@ -83,7 +66,7 @@ clearTimeout(this.timeout); this.timeout = setTimeout(() => { this.loader.style.display = 'block'; - this.getList(currentLine).then(arr => { + this.getList(currentLine).then((arr) => { this.loader.style.display = 'none'; if (!arr.length) { this.closeSuggestions(); @@ -91,6 +74,8 @@ } this.list.innerHTML = ''; if (this.filter) { + + /* eslint-disable no-param-reassign */ arr = arr.filter(this.filter); } for (var i = 0; i < Math.min(arr.length, 10); i++) { @@ -109,6 +94,7 @@ } } onKeyDown(event) { + var selectedItemElement; if (!this.isShowingSuggestions) { return; } if (event.keyCode === 27) { @@ -116,7 +102,7 @@ event.stopPropagation(); } if (event.keyCode === 40 && this.isShowingSuggestions) { - var selectedItemElement = this.list.querySelector('.selected'); + selectedItemElement = this.list.querySelector('.selected'); if (selectedItemElement) { selectedItemElement.classList.remove('selected'); selectedItemElement.nextElementSibling.classList.add('selected'); @@ -125,7 +111,7 @@ } event.preventDefault(); } else if (event.keyCode === 38 && this.isShowingSuggestions) { - var selectedItemElement = this.list.querySelector('.selected'); + selectedItemElement = this.list.querySelector('.selected'); if (selectedItemElement) { selectedItemElement.classList.remove('selected'); selectedItemElement.previousElementSibling.classList.add('selected'); @@ -134,7 +120,7 @@ } event.preventDefault(); } else if (event.keyCode === 13 && this.isShowingSuggestions) { - var selectedItemElement = this.list.querySelector('.selected'); + selectedItemElement = this.list.querySelector('.selected'); this.replaceCurrentLine(selectedItemElement.dataset.url) this.closeSuggestions(); } From 85a0266557f7277ea45a686c353f6c346c811028 Mon Sep 17 00:00:00 2001 From: Kushagra Gour Date: Sun, 5 Feb 2017 17:48:51 +0530 Subject: [PATCH 09/13] add auto scroll in typeahead dropdowns --- src/script.js | 2 ++ src/textarea-autocomplete.js | 2 ++ 2 files changed, 4 insertions(+) diff --git a/src/script.js b/src/script.js index 3c788a1..a37e90d 100644 --- a/src/script.js +++ b/src/script.js @@ -1090,6 +1090,7 @@ TextareaAutoComplete */ } else { $('.js-saved-item-tile:first-child').classList.add('selected'); } + $('.js-saved-item-tile.selected').scrollIntoView(false); } else if (event.keyCode === 38 && savedItemsPane.classList.contains('is-open')) { selectedItemElement = $('.js-saved-item-tile.selected'); if (selectedItemElement) { @@ -1098,6 +1099,7 @@ TextareaAutoComplete */ } else { $('.js-saved-item-tile:first-child').classList.add('selected'); } + $('.js-saved-item-tile.selected').scrollIntoView(false); } else if (event.keyCode === 13 && savedItemsPane.classList.contains('is-open')) { selectedItemElement = $('.js-saved-item-tile.selected'); setTimeout(function () { diff --git a/src/textarea-autocomplete.js b/src/textarea-autocomplete.js index 14f97d8..46f3d3e 100644 --- a/src/textarea-autocomplete.js +++ b/src/textarea-autocomplete.js @@ -109,6 +109,7 @@ } else { this.list.querySelector('li:first-child').classList.add('selected'); } + this.list.querySelector('.selected').scrollIntoView(false); event.preventDefault(); } else if (event.keyCode === 38 && this.isShowingSuggestions) { selectedItemElement = this.list.querySelector('.selected'); @@ -118,6 +119,7 @@ } else { this.list.querySelector('li:first-child').classList.add('selected'); } + this.list.querySelector('.selected').scrollIntoView(false); event.preventDefault(); } else if (event.keyCode === 13 && this.isShowingSuggestions) { selectedItemElement = this.list.querySelector('.selected'); From 1dcc4a6acda6219d2f7ee7e3367cf71854966cc2 Mon Sep 17 00:00:00 2001 From: Kushagra Gour Date: Sun, 5 Feb 2017 17:57:59 +0530 Subject: [PATCH 10/13] add changelog --- src/index.html | 18 +++++++++++++++--- 1 file changed, 15 insertions(+), 3 deletions(-) diff --git a/src/index.html b/src/index.html index 91e2356..cae704a 100644 --- a/src/index.html +++ b/src/index.html @@ -200,7 +200,7 @@