feat: add fork feature from saved creation pane. fixes #125

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')) {
+			if (e.target.classList.contains('js-saved-item-tile__remove-btn')) {
-				removeItem(e.target.parentElement.dataset.itemId);
+				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) {

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 {
+.saved-item-tile__btns {
-	padding: 7px 10px;
 	position: absolute;
-	right: 8px;
 	top: 6px;
 	z-index: 1;
-	color: rgba(255,255,255,0.3);
+	right: 8px;
-	border-radius: 50%;
+	opacity: 0;
-	background: rgba(255,255,255,0.05);
+	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;
 }