mirror/php-web-maker
1
0
Fork 0
mirror of https://github.com/chinchang/web-maker.git synced 2025-05-14 22:35:33 +02:00
Code Issues Releases Wiki Activity

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

Browse Source
This commit is contained in:
Kushagra Gour 2017-05-29 00:07:40 +05:30
parent b8d84378ae
commit b0aed631ee
2 changed files with 57 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
src/script.js
View File

@ -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) {

32
src/style.css
View File

@ -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;
}