mirror of
https://github.com/chinchang/web-maker.git
synced 2025-05-17 15:50:34 +02:00
add search inside saved items pane. fixes #26
This commit is contained in:
Kushagra Gour
parent
659588d580
commit
b6e463ba4c
@ -507,17 +507,18 @@
|
||||
<div id="js-saved-items-pane" class="saved-items-pane">
|
||||
<button class="btn saved-items-pane__close-btn" id="js-saved-items-pane-close-btn">X</button>
|
||||
<div class="flex flex-v-center" style="justify-content: space-between;">
|
||||
<h3>My Library <span id="savedItemCountEl"></span></h3>
|
||||
|
||||
<h3>My Library <span id="savedItemCountEl"></span></h3>
|
||||
<div class="main-header__btn-wrap">
|
||||
<a d-click="exportItems" href="" class="btn btn-icon">Export
|
||||
</a>
|
||||
<a d-click="onImportBtnClicked" href="" class="btn btn-icon">Import
|
||||
</a>
|
||||
</div>
|
||||
<div class="main-header__btn-wrap">
|
||||
<a d-click="exportItems" href="" class="btn btn-icon">Export
|
||||
</a>
|
||||
<a d-click="onImportBtnClicked" href="" class="btn btn-icon">Import
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<input type="" id="searchInput" class="search-input" d-input="onSearchInputChange" placeholder="Search your creations here...">
|
||||
|
||||
<div id="js-saved-items-wrap" class="saved-items-pane__container">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@ -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) {
|
||||
|
||||
@ -373,7 +373,16 @@ li.CodeMirror-hint-active {
|
||||
background: none;
|
||||
border: 0;
|
||||
color: rgba(255,255,255,0.6);
|
||||
width: calc(100vw - 400px);
|
||||
width: calc(100vw - 420px);
|
||||
}
|
||||
.search-input {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
padding: 10px 20px;
|
||||
border: 0;
|
||||
width: 100%;
|
||||
font-size: 16px;
|
||||
color: white;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.modal {
|
||||
position: fixed;
|
||||
|
||||
25
src/utils.js
25
src/utils.js
@ -2,9 +2,32 @@
|
||||
window.DEBUG = document.cookie.indexOf('wmdebug') > -1;
|
||||
|
||||
window.$ = document.querySelector.bind(document);
|
||||
window.$all = document.querySelectorAll.bind(document);
|
||||
window.$all = (selector) => [...document.querySelectorAll(selector)] ;
|
||||
var alphaNum = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';
|
||||
|
||||
/**
|
||||
* The following 2 functions are supposed to find the next/previous sibling until the
|
||||
* passed `selector` is matched. But for now it actually finds the next/previous
|
||||
* element of `this` element in the list of `selector` matched element inside `this`'s
|
||||
* parent.
|
||||
* @param Selector that should match for next siblings
|
||||
* @return element Next element that mathes `selector`
|
||||
*/
|
||||
Node.prototype.nextUntil = function (selector) {
|
||||
var siblings = [...this.parentNode.querySelectorAll(selector)];
|
||||
var index = siblings.indexOf(this);
|
||||
return siblings[index + 1];
|
||||
};
|
||||
/*
|
||||
* @param Selector that should match for next siblings
|
||||
* @return element Next element that mathes `selector`
|
||||
*/
|
||||
Node.prototype.previousUntil = function (selector) {
|
||||
var siblings = [...this.parentNode.querySelectorAll(selector)];
|
||||
var index = siblings.indexOf(this);
|
||||
return siblings[index - 1];
|
||||
};
|
||||
|
||||
// https://github.com/substack/semver-compare/blob/master/index.js
|
||||
function semverCompare(a, b) {
|
||||
var pa = a.split('.');
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user