1
0
mirror of https://github.com/chinchang/web-maker.git synced 2025-07-11 00:56:25 +02:00

add option to remove item.

This commit is contained in:
Kushagra Gour
2016-11-27 08:54:34 +05:30
parent def2dcab15
commit f82e64b369
2 changed files with 55 additions and 13 deletions

View File

@ -354,6 +354,7 @@
.saved-item-tile { .saved-item-tile {
padding: 20px; padding: 20px;
background-color: #2f302b; background-color: #2f302b;
position: relative;
/*border: 1px solid rgba(255,255,255,0.1);*/ /*border: 1px solid rgba(255,255,255,0.1);*/
margin: 20px 0; margin: 20px 0;
display: block; display: block;
@ -363,6 +364,12 @@
.saved-item-tile:hover { .saved-item-tile:hover {
background: rgba(255,255,255,0.1); background: rgba(255,255,255,0.1);
} }
.saved-item-tile__close-btn {
padding: 20px;
position: absolute;
right: -5px;
top: -5px;
}
.saved-items-pane__container { .saved-items-pane__container {
overflow-y: scroll; overflow-y: scroll;
max-height: calc(100vh - 90px); max-height: calc(100vh - 90px);
@ -472,6 +479,7 @@
padding: 10px; padding: 10px;
background: #9f3b4e; background: #9f3b4e;
border-radius: 3px; border-radius: 3px;
z-index: 6;
transform: translateY(-100%); transform: translateY(-100%);
transition: 0.3s ease; transition: 0.3s ease;
} }

View File

@ -115,7 +115,7 @@
} else { } else {
options.sizes = [ 33.33, 33.33, 33.33 ]; options.sizes = [ 33.33, 33.33, 33.33 ];
} }
console.log('reset spliiting', options.sizes) utils.log('reset spliiting', options.sizes)
codeSplitInstance = Split(['#js-html-code', '#js-css-code', '#js-js-code'], options); codeSplitInstance = Split(['#js-html-code', '#js-css-code', '#js-js-code'], options);
mainSplitInstance = Split(['#js-code-side', '#js-demo-side' ], { mainSplitInstance = Split(['#js-code-side', '#js-demo-side' ], {
direction: (currentLayoutMode === 2 ? 'vertical' : 'horizontal'), direction: (currentLayoutMode === 2 ? 'vertical' : 'horizontal'),
@ -125,7 +125,7 @@
} }
function toggleLayout(mode) { function toggleLayout(mode) {
if (currentLayoutMode === mode) { if (currentLayoutMode === mode) {
console.log('setsize', currentItem.sizes || [ 33.33, 33.33, 33.33 ]); utils.log('setsize', currentItem.sizes || [ 33.33, 33.33, 33.33 ]);
codeSplitInstance.setSizes(currentItem.sizes || [ 33.33, 33.33, 33.33 ]); codeSplitInstance.setSizes(currentItem.sizes || [ 33.33, 33.33, 33.33 ]);
currentLayoutMode = mode; currentLayoutMode = mode;
return; return;
@ -165,7 +165,7 @@
chrome.storage.local.set({ chrome.storage.local.set({
items: result.items items: result.items
}); });
}) });
} }
} }
@ -204,16 +204,20 @@
} }
function populateItemsInSavedPane(items) { function populateItemsInSavedPane(items) {
if (!items || !items.length) { return; }
var html = ''; var html = '';
// TODO: sort desc. by updation date if (items.length) {
items.sort(function (a, b) { // TODO: sort desc. by updation date
return b.updatedOn - a.updatedOn; items.sort(function (a, b) {
}); return b.updatedOn - a.updatedOn;
items.forEach(function (item) { });
html += '<a class="js-saved-item-tile saved-item-tile" data-item-id="' + item.id + '">' items.forEach(function (item) {
+ '<h3>' + item.title + '</h3><span>Last updated: ' + item.updatedOn + '</span></a>'; 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">X</a>'
+ '<h3>' + item.title + '</h3><span>Last updated: ' + item.updatedOn + '</span></div>';
});
} else {
html += 'Nothing saved here.'
}
savedItemsPane.querySelector('#js-saved-items-wrap').innerHTML = html; savedItemsPane.querySelector('#js-saved-items-wrap').innerHTML = html;
toggleSavedItemsPane(); toggleSavedItemsPane();
} }
@ -228,8 +232,12 @@
} }
function openSavedItemsPane() { function openSavedItemsPane() {
chrome.storage.local.get('items', function (result) { chrome.storage.local.get('items', function (result) {
var itemIds = Object.getOwnPropertyNames(result.items), var itemIds = Object.getOwnPropertyNames(result.items || {}),
items = []; items = [];
if (!itemIds.length) {
populateItemsInSavedPane([]);
return;
}
savedItems = savedItems || []; savedItems = savedItems || [];
for (var i = 0; i < itemIds.length; i++) { for (var i = 0; i < itemIds.length; i++) {
@ -265,6 +273,28 @@
refreshEditor(); refreshEditor();
alertsService.add('Saved item loaded'); alertsService.add('Saved item loaded');
} }
function removeItem(itemId) {
var itemTile = document.querySelector('.js-saved-item-tile[data-item-id="' + itemId + '"]');
itemTile.remove();
// Remove from items list
chrome.storage.local.get({
items: {}
}, function (result) {
delete result.items[itemId]
chrome.storage.local.set({
items: result.items
});
});
// Remove individual item too.
chrome.storage.local.remove(itemId, function () {
alertsService.add('Item removed.');
// This item is open in the editor. Lets open a new one.
if (currentItem.id === itemId) {
createNewItem();
}
});
}
function refreshEditor() { function refreshEditor() {
titleInput.value = currentItem.title || 'Untitled'; titleInput.value = currentItem.title || 'Untitled';
@ -628,6 +658,10 @@
openItem(e.target.dataset.itemId); openItem(e.target.dataset.itemId);
toggleSavedItemsPane(); toggleSavedItemsPane();
} }
if (e.target.classList.contains('js-saved-item-tile__close-btn')) {
utils.log('removing', e.target.parentElement)
removeItem(e.target.parentElement.dataset.itemId);
}
}); });
titleInput.addEventListener('blur', function () { titleInput.addEventListener('blur', function () {