Skip to content

Commit

Permalink
add search inside saved items pane. fixes #26
Browse files Browse the repository at this point in the history
  • Loading branch information
@chinchang
chinchang committed Apr 30, 2017
1 parent 659588d commit b6e463b
Show file tree
Hide file tree
Showing 4 changed files with 83 additions and 26 deletions.
17 changes: 9 additions & 8 deletions src/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -507,17 +507,18 @@ <h1>Whats new?</h1>
<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>
<div id="js-saved-items-wrap" class="saved-items-pane__container">
<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>

Expand Down
56 changes: 40 additions & 16 deletions src/script.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down Expand Up @@ -70,6 +70,7 @@ runBtn
, prefs = {}
, codeInPreview = { html: null, css: null, js: null }
, isSavedItemsPaneOpen = false
, editorWithFocus

// DOM nodes
, frame = $('#demo-frame')
Expand Down Expand Up @@ -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');
}

Expand All @@ -353,7 +361,7 @@ runBtn
d.resolve([]);
}

savedItems = savedItems || [];
savedItems = savedItems || {};
trackEvent('fn', 'fetchItems', itemIds.length);
for (let i = 0; i < itemIds.length; i++) {

Expand Down Expand Up @@ -892,6 +900,9 @@ runBtn
}
}
});
cm.on('focus', (editor) => {
editorWithFocus = editor;
});
cm.on('change', function onChange(editor, change) {
clearTimeout(updateTimer);

Expand Down Expand Up @@ -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)
});
});
nodes = [].slice.call($all('[d-change]'));
nodes.forEach(function (el) {
el.addEventListener('change', function (e) {
scope[el.getAttribute('d-change')].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)
});
});
})
}
attachListenerForEvent('click');
attachListenerForEvent('change');
attachListenerForEvent('input');
}

function init () {
Expand Down Expand Up @@ -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) {
Expand All @@ -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) {
Expand Down
11 changes: 10 additions & 1 deletion src/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
25 changes: 24 additions & 1 deletion src/utils.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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('.');
Expand Down

0 comments on commit b6e463b

Please sign in to comment.