Skip to content

Instantly share code, notes, and snippets.

@peduarte

peduarte/_readme.md

Last active November 2, 2016 13:16
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save peduarte/15f9311d3dda95dfffa3efde3c087a0d to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save peduarte/15f9311d3dda95dfffa3efde3c087a0d to your computer and use it in GitHub Desktop.
Download ZIP
Vanilla Observable – Get Shits from Shit Pedro Says
Raw
_readme.md
Raw
index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>ESNextbin Sketch</title>
<!-- put additional styles and scripts here -->
</head>
<body>
<!-- put markup and other contents here -->
<input type="text" id="search" placeholder="Search for a shit" />
<div id="shits"></div>
</body>
</html>
Raw
index.js
function map(transformFunction) {
const inputObservable = this;
return createObservable(outputObserver => {
inputObservable.subscribe({
next: data => outputObserver.next(transformFunction(data)),
error: error => outputObserver.error(error),
complete: () => outputObserver.complete()
})
});
}
function filter(conditionFunction) {
const inputObservable = this;
return createObservable(outputObserver => {
inputObservable.subscribe({
next: data => {
if (conditionFunction(data)) {
outputObserver.next(data);
}
},
error: error => outputObserver.error(error),
complete: () => outputObserver.complete()
});
});
}
function delay(period) {
const inputObservable = this;
return createObservable(outputObserver => {
inputObservable.subscribe({
next: data => setTimeout(() => outputObserver.next(data), period),
error: error => setTimeout(() => outputObserver.error(error), period),
complete: () => setTimeout(() => outputObserver.complete(), period)
})
});
}
function createObservable(subscribe) {
return {
subscribe,
map: map,
filter: filter,
delay: delay
}
};
function createArrayObservable(array) {
return createObservable(observer => {
array.map(observer.next);
observer.complete();
});
}
const peopleObservable = createArrayObservable([1, 'Pedro', 2, 'Benoit', 3, 'Henrique']);
function fromEvent$(element = 'document.body', eventName = 'click') {
return createObservable(observer => {
element.addEventListener(eventName, observer.next);
});
}
function createPromiseObservable(url) {
return createObservable(observer => {
fetch(url)
.then(response => response.json())
.then(data => {
observer.next(data);
observer.complete();
}, error => {
observer.error(error);
observer.complete();
}
);
});
}
function getShitsWith(keyword) {
return createPromiseObservable('https://shitpedrosays.herokuapp.com/shits.json')
.map(data => data.shits.filter(shit => shit.content.toLowerCase().includes(keyword)));
}
const searchInput = document.getElementById('search');
const shitsHolder = document.getElementById('shits');
fromEvent$(searchInput, 'keydown')
.filter(event => event.keyCode === 13)
.map(event => event.target.value)
.map(value => getShitsWith(value).subscribe({
next: data => {
shitsHolder.innerHTML = `
<ul>
${data.map(shit => `<li>${shit.content}</li>`).join('')}
</ul>
`;
},
error: error => console.error('Error: ', error),
complete: () => console.info('Done')
}))
.subscribe({
next: () => {}
});
Raw
package.json
{
"name": "esnextbin-sketch",
"version": "0.0.0"
}
Raw
transpiled.js
'use strict';
function map(transformFunction) {
var inputObservable = this;
return createObservable(function (outputObserver) {
inputObservable.subscribe({
next: function next(data) {
return outputObserver.next(transformFunction(data));
},
error: function error(_error) {
return outputObserver.error(_error);
},
complete: function complete() {
return outputObserver.complete();
}
});
});
}
function filter(conditionFunction) {
var inputObservable = this;
return createObservable(function (outputObserver) {
inputObservable.subscribe({
next: function next(data) {
if (conditionFunction(data)) {
outputObserver.next(data);
}
},
error: function error(_error2) {
return outputObserver.error(_error2);
},
complete: function complete() {
return outputObserver.complete();
}
});
});
}
function delay(period) {
var inputObservable = this;
return createObservable(function (outputObserver) {
inputObservable.subscribe({
next: function next(data) {
return setTimeout(function () {
return outputObserver.next(data);
}, period);
},
error: function error(_error3) {
return setTimeout(function () {
return outputObserver.error(_error3);
}, period);
},
complete: function complete() {
return setTimeout(function () {
return outputObserver.complete();
}, period);
}
});
});
}
function createObservable(subscribe) {
return {
subscribe: subscribe,
map: map,
filter: filter,
delay: delay
};
};
function createArrayObservable(array) {
return createObservable(function (observer) {
array.map(observer.next);
observer.complete();
});
}
var peopleObservable = createArrayObservable([1, 'Pedro', 2, 'Benoit', 3, 'Henrique']);
function fromEvent$() {
var element = arguments.length <= 0 || arguments[0] === undefined ? 'document.body' : arguments[0];
var eventName = arguments.length <= 1 || arguments[1] === undefined ? 'click' : arguments[1];
return createObservable(function (observer) {
element.addEventListener(eventName, observer.next);
});
}
function createPromiseObservable(url) {
return createObservable(function (observer) {
fetch(url).then(function (response) {
return response.json();
}).then(function (data) {
observer.next(data);
observer.complete();
}, function (error) {
observer.error(error);
observer.complete();
});
});
}
function getShitsWith(keyword) {
return createPromiseObservable('https://shitpedrosays.herokuapp.com/shits.json').map(function (data) {
return data.shits.filter(function (shit) {
return shit.content.toLowerCase().includes(keyword);
});
});
}
var searchInput = document.getElementById('search');
var shitsHolder = document.getElementById('shits');
fromEvent$(searchInput, 'keydown').filter(function (event) {
return event.keyCode === 13;
}).map(function (event) {
return event.target.value;
}).map(function (value) {
return getShitsWith(value).subscribe({
next: function next(data) {
shitsHolder.innerHTML = '\n <ul>\n ' + data.map(function (shit) {
return '<li>' + shit.content + '</li>';
}).join('') + '\n </ul>\n ';
},
error: function error(_error4) {
return console.error('Error: ', _error4);
},
complete: function complete() {
return console.info('Done');
}
});
}).subscribe({
next: function next() {}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment