From b0aed631ee268ec28d0033fbae0eb0de294ad9a9 Mon Sep 17 00:00:00 2001
From: Kushagra Gour <chinchang457@gmail.com>
Date: Mon, 29 May 2017 00:07:40 +0530
Subject: [PATCH] feat: add fork feature from saved creation pane. fixes #125
---
src/script.js | 36 +++++++++++++++++++++++++++++++++---
src/style.css | 32 ++++++++++++++++++++++++--------
2 files changed, 57 insertions(+), 11 deletions(-)
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 += '<div class="js-saved-item-tile saved-item-tile" data-item-id="' + item.id + '">'
- + '<a class="js-saved-item-tile__close-btn saved-item-tile__close-btn hint--left" aria-label="Remove">X</a>'
+ + '<div class="saved-item-tile__btns"><a class="js-saved-item-tile__fork-btn saved-item-tile__btn hint--left hint--medium" aria-label="Creates a duplicate of this creation (Ctrl/⌘ + F)">Fork<span class="show-when-selected">(Ctrl/⌘ + F)</span></a><a class="js-saved-item-tile__remove-btn saved-item-tile__btn hint--left" aria-label="Remove">X</a></div>'
+ '<h3 class="saved-item-tile__title">' + item.title + '</h3><span class="saved-item-tile__meta">Last updated: ' + utils.getHumanDate(item.updatedOn) + '</span></div>';
});
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;
}