diff --git a/src/script.js b/src/script.js index ad2dbfd..eafce90 100644 --- a/src/script.js +++ b/src/script.js @@ -315,7 +315,7 @@ runBtn, searchInput, consoleEl, consoleLogEl, logCountEl }); items.forEach(function (item) { html += '
'; }); savedItemCountEl.textContent = '(' + items.length + ')'; @@ -396,6 +396,17 @@ runBtn, searchInput, consoleEl, consoleLogEl, logCountEl unsavedEditCount = 0; saveBtn.classList.remove('is-marked'); } + // Creates a new item with passed item's contents + function forkItem(sourceItem) { + const fork = JSON.parse(JSON.stringify(sourceItem)); + delete fork.id; + fork.title = '(Forked) ' + sourceItem.title; + fork.updatedOn = Date.now(); + setCurrentItem(fork); + refreshEditor(); + alertsService.add(`"${sourceItem.title}" was forked`); + trackEvent('fn', 'itemForked'); + } function createNewItem() { var d = new Date(); setCurrentItem({ @@ -1458,14 +1469,20 @@ runBtn, searchInput, consoleEl, consoleLogEl, logCountEl utils.onButtonClick(savedItemsPaneCloseBtn, toggleSavedItemsPane); utils.onButtonClick(savedItemsPane, function (e) { + // TODO: warn about unsaved changes in current item if (e.target.classList.contains('js-saved-item-tile')) { setTimeout(function () { openItem(e.target.dataset.itemId); }, 350); toggleSavedItemsPane(); } - if (e.target.classList.contains('js-saved-item-tile__close-btn')) { - removeItem(e.target.parentElement.dataset.itemId); + if (e.target.classList.contains('js-saved-item-tile__remove-btn')) { + removeItem(e.target.parentElement.parentElement.dataset.itemId); + } else if (e.target.classList.contains('js-saved-item-tile__fork-btn')) { + toggleSavedItemsPane(); + setTimeout(function () { + forkItem(savedItems[e.target.parentElement.parentElement.dataset.itemId]); + }, 350); } }); @@ -1518,6 +1535,7 @@ runBtn, searchInput, consoleEl, consoleLogEl, logCountEl // Editor keyboard shortucuts window.addEventListener('keydown', function (event) { var selectedItemElement; + // TODO: refactor common listener code // Ctrl/⌘ + S if ((event.ctrlKey || event.metaKey) && (event.keyCode === 83)) { event.preventDefault(); @@ -1572,6 +1590,18 @@ runBtn, searchInput, consoleEl, consoleLogEl, logCountEl }, 350); toggleSavedItemsPane(); } + console.log(event.keyCode) + + // Fork shortcut inside saved creations panel with Ctrl/⌘ + F + if ((event.ctrlKey || event.metaKey) && (event.keyCode === 70)) { + event.preventDefault(); + selectedItemElement = $('.js-saved-item-tile.selected'); + setTimeout(function () { + forkItem(savedItems[selectedItemElement.dataset.itemId]); + }, 350); + toggleSavedItemsPane(); + trackEvent('ui', 'forkKeyboardShortcut'); + } }); window.addEventListener('click', function(e) { diff --git a/src/style.css b/src/style.css index 698c2a2..30b38b0 100644 --- a/src/style.css +++ b/src/style.css @@ -101,6 +101,10 @@ select, input[type="text"], input[type="number"], textarea { content: '★'; color: #eee333; } +/* used to show keyboard specific content when something is keyboard focused */ +.show-when-selected { display: none; } +.selected .show-when-selected { display: inline-block; } + .main-container { position: absolute; left: 0; right: 0; @@ -456,7 +460,7 @@ li.CodeMirror-hint-active { right: 0; top: 0; bottom: 0; - width: 400px; + width: 450px; padding: 20px 30px; z-index: 6; background-color: var(--color-sidebar); @@ -535,17 +539,29 @@ li.CodeMirror-hint-active { .saved-item-tile.selected { background: rgba(255,255,255,0.1); } -.saved-item-tile__close-btn { - padding: 7px 10px; +.saved-item-tile__btns { position: absolute; - right: 8px; top: 6px; z-index: 1; - color: rgba(255,255,255,0.3); - border-radius: 50%; - background: rgba(255,255,255,0.05); + right: 8px; + opacity: 0; + pointer-events: none; + transition: 0.25s ease; } -.saved-item-tile__close-btn:hover { +.saved-item-tile.selected .saved-item-tile__btns, +.saved-item-tile:hover .saved-item-tile__btns { + opacity: 1; + pointer-events: auto; +} +.saved-item-tile__btn { + padding: 7px 10px; + color: rgba(255,255,255,0.3); + border-radius: 20px; + margin-left: 2px; + background: rgba(255,255,255,0.05); + text-transform: uppercase; +} +.saved-item-tile__btn:hover { background: rgba(255,255,255,0.8); color: #555; }