1
0
mirror of https://github.com/chinchang/web-maker.git synced 2025-07-14 10:36:19 +02:00

add search inside saved items pane. fixes #26

This commit is contained in:
Kushagra Gour
2017-04-30 20:29:44 +05:30
parent 659588d580
commit b6e463ba4c
4 changed files with 83 additions and 26 deletions

View File

@ -5,7 +5,7 @@ addLibraryModal, addLibraryModal, notificationsBtn, notificationsModal, notifica
notificationsModal, notificationsBtn, codepenBtn, saveHtmlBtn, saveBtn, settingsBtn,
onboardModal, settingsModal, notificationsBtn, onboardShowInTabOptionBtn, editorThemeLinkTag,
onboardDontShowInTabOptionBtn, TextareaAutoComplete, savedItemCountEl, indentationSizeValueEl,
runBtn
runBtn, searchInput
*/
/* eslint-disable no-extra-semi */
;(function (alertsService) {
@ -70,6 +70,7 @@ runBtn
, prefs = {}
, codeInPreview = { html: null, css: null, js: null }
, isSavedItemsPaneOpen = false
, editorWithFocus
// DOM nodes
, frame = $('#demo-frame')
@ -336,6 +337,13 @@ runBtn
savedItemsPane.classList.toggle('is-open');
}
isSavedItemsPaneOpen = savedItemsPane.classList.contains('is-open');
if (isSavedItemsPaneOpen) {
searchInput.focus();
} else {
searchInput.value = '';
// Give last focused editor, focus again
editorWithFocus.focus();
}
document.body.classList[isSavedItemsPaneOpen ? 'add' : 'remove']('overlay-visible');
}
@ -353,7 +361,7 @@ runBtn
d.resolve([]);
}
savedItems = savedItems || [];
savedItems = savedItems || {};
trackEvent('fn', 'fetchItems', itemIds.length);
for (let i = 0; i < itemIds.length; i++) {
@ -892,6 +900,9 @@ runBtn
}
}
});
cm.on('focus', (editor) => {
editorWithFocus = editor;
});
cm.on('change', function onChange(editor, change) {
clearTimeout(updateTimer);
@ -1258,20 +1269,33 @@ runBtn
trackEvent('ui', 'saveBtnClick', currentItem.id ? 'saved' : 'new');
saveItem();
};
scope.onSearchInputChange = function (e) {
const text = e.target.value;
let el;
for (let [itemId, item] of Object.entries(savedItems)) {
el = $(`#js-saved-items-pane [data-item-id=${itemId}]`);
if (item.title.toLowerCase().indexOf(text) === -1) {
el.classList.add('hide');
} else {
el.classList.remove('hide');
}
}
};
function compileNodes() {
var nodes = [].slice.call($all('[d-click]'));
nodes.forEach(function (el) {
el.addEventListener('click', function (e) {
scope[el.getAttribute('d-click')].call(window, e)
function attachListenerForEvent(eventName) {
var nodes;
nodes = $all(`[d-${eventName}]`);
nodes.forEach(function (el) {
el.addEventListener(eventName, function (e) {
scope[el.getAttribute(`d-${eventName}`)].call(window, e)
});
});
});
nodes = [].slice.call($all('[d-change]'));
nodes.forEach(function (el) {
el.addEventListener('change', function (e) {
scope[el.getAttribute('d-change')].call(window, e)
});
})
}
attachListenerForEvent('click');
attachListenerForEvent('change');
attachListenerForEvent('input');
}
function init () {
@ -1434,9 +1458,9 @@ runBtn
selectedItemElement = $('.js-saved-item-tile.selected');
if (selectedItemElement) {
selectedItemElement.classList.remove('selected');
selectedItemElement.nextElementSibling.classList.add('selected');
selectedItemElement.nextUntil('.js-saved-item-tile:not(.hide)').classList.add('selected');
} else {
$('.js-saved-item-tile:first-child').classList.add('selected');
$('.js-saved-item-tile:not(.hide)').classList.add('selected');
}
$('.js-saved-item-tile.selected').scrollIntoView(false);
} else if (event.keyCode === 38 && isSavedItemsPaneOpen) {
@ -1445,7 +1469,7 @@ runBtn
selectedItemElement.classList.remove('selected');
selectedItemElement.previousElementSibling.classList.add('selected');
} else {
$('.js-saved-item-tile:first-child').classList.add('selected');
$('.js-saved-item-tile:not(.hide)').classList.add('selected');
}
$('.js-saved-item-tile.selected').scrollIntoView(false);
} else if (event.keyCode === 13 && isSavedItemsPaneOpen) {