diff --git a/src/index.html b/src/index.html index d0edd09..25285ed 100644 --- a/src/index.html +++ b/src/index.html @@ -354,6 +354,7 @@ .saved-item-tile { padding: 20px; background-color: #2f302b; + position: relative; /*border: 1px solid rgba(255,255,255,0.1);*/ margin: 20px 0; display: block; @@ -363,6 +364,12 @@ .saved-item-tile:hover { background: rgba(255,255,255,0.1); } + .saved-item-tile__close-btn { + padding: 20px; + position: absolute; + right: -5px; + top: -5px; + } .saved-items-pane__container { overflow-y: scroll; max-height: calc(100vh - 90px); @@ -472,6 +479,7 @@ padding: 10px; background: #9f3b4e; border-radius: 3px; + z-index: 6; transform: translateY(-100%); transition: 0.3s ease; } diff --git a/src/script.js b/src/script.js index 57adf61..f5fef85 100644 --- a/src/script.js +++ b/src/script.js @@ -115,7 +115,7 @@ } else { 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); mainSplitInstance = Split(['#js-code-side', '#js-demo-side' ], { direction: (currentLayoutMode === 2 ? 'vertical' : 'horizontal'), @@ -125,7 +125,7 @@ } function toggleLayout(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 ]); currentLayoutMode = mode; return; @@ -165,7 +165,7 @@ chrome.storage.local.set({ items: result.items }); - }) + }); } } @@ -204,16 +204,20 @@ } function populateItemsInSavedPane(items) { - if (!items || !items.length) { return; } var html = ''; - // TODO: sort desc. by updation date - items.sort(function (a, b) { - return b.updatedOn - a.updatedOn; - }); - items.forEach(function (item) { - html += '' - + '

' + item.title + '

Last updated: ' + item.updatedOn + '
'; - }) + if (items.length) { + // TODO: sort desc. by updation date + items.sort(function (a, b) { + return b.updatedOn - a.updatedOn; + }); + items.forEach(function (item) { + html += '
' + + 'X' + + '

' + item.title + '

Last updated: ' + item.updatedOn + '
'; + }); + } else { + html += 'Nothing saved here.' + } savedItemsPane.querySelector('#js-saved-items-wrap').innerHTML = html; toggleSavedItemsPane(); } @@ -228,8 +232,12 @@ } function openSavedItemsPane() { chrome.storage.local.get('items', function (result) { - var itemIds = Object.getOwnPropertyNames(result.items), + var itemIds = Object.getOwnPropertyNames(result.items || {}), items = []; + if (!itemIds.length) { + populateItemsInSavedPane([]); + return; + } savedItems = savedItems || []; for (var i = 0; i < itemIds.length; i++) { @@ -265,6 +273,28 @@ refreshEditor(); 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() { titleInput.value = currentItem.title || 'Untitled'; @@ -628,6 +658,10 @@ openItem(e.target.dataset.itemId); 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 () {