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:
@ -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;
|
||||||
}
|
}
|
||||||
|
@ -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 () {
|
||||||
|
Reference in New Issue
Block a user