Skip to content

Instantly share code, notes, and snippets.

@ktilcu

ktilcu/index.html

Created April 23, 2019 17:13
Show Gist options
  • Save ktilcu/12ec46222bde7837d4cbde654dc276bd to your computer and use it in GitHub Desktop.
Save ktilcu/12ec46222bde7837d4cbde654dc276bd to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin CycleJS - Campaign Screenshots // source https://jsbin.com/hodusu
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="CycleJS - Campaign Screenshots">
<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/4.0.6/rx.all.js"></script>
<script src="https://rawgit.com/cyclejs/cycle-core/v6.0.0-rc2/dist/cycle.js"></script>
<script src="https://rawgit.com/cyclejs/cycle-dom/v8.0.0-rc9/dist/cycle-dom.js"></script>
<script src="https://rawgit.com/cyclejs/cycle-http-driver/v7.0.0-rc2/dist/cycle-http-driver.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.0.0/jszip.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ramda/0.22.1/ramda.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div id="app"></div>
<script id="jsbin-javascript">
'use strict';
var _Rx = Rx;
var Observable = _Rx.Observable;
var _CycleDOM = CycleDOM;
var div = _CycleDOM.div;
var img = _CycleDOM.img;
var label = _CycleDOM.label;
var pre = _CycleDOM.pre;
var textarea = _CycleDOM.textarea;
var button = _CycleDOM.button;
var makeDOMDriver = _CycleDOM.makeDOMDriver;
var _CycleHTTPDriver = CycleHTTPDriver;
var makeHTTPDriver = _CycleHTTPDriver.makeHTTPDriver;
// DOM read: text pasted
// HTTP write: request sent
// HTTP read: response received
// DOM write: dom updated
var SS_URL = 'http://ss.prod.paperg.com/captures/ui/ui';
function intent(DOM) {
var submissions$ = DOM.select('.omg').events('input').debounce(500).map(function (event) {
return event.target.value;
}).filter(function (input) {
return input.length > 0;
}).map(function (body) {
return {
url: SS_URL,
method: 'POST',
send: body
};
});
return submissions$;
}
function model(HTTP) {
var response$ = HTTP.filter(function (res$) {
return res$.request.url === SS_URL;
}).flatMap(function (x) {
return x['catch'](function (err) {
return Observable.just({ err: err });
});
}).map(isRes(function (res) {
return res.body;
})).scan(values, []).flatMap(Rx.Observable.fromArray).flatMap(makeJpeg).takeUntil(Rx.Observable.timer(20000)).toArray().startWith([]);
return response$;
}
function view(res$) {
return res$.map(function (body) {
return div('.users', [textarea('.omg', 'Put Draft JSON Here!'), body.err && body.err.message ? div('.error', [pre('.error-message', body.err.response.body.message), pre('.json', JSON.stringify(body.err, null, 4))]) : div('.images', body.map(function (url) {
return img({ src: url });
}))]);
});
}
function main(sources) {
var submissions$ = intent(sources.DOM);
var data$ = model(sources.HTTP);
var vtree$ = view(data$);
return {
DOM: vtree$,
HTTP: submissions$
};
}
Cycle.run(main, {
DOM: makeDOMDriver('#app'),
HTTP: makeHTTPDriver()
});
</script>
<script id="jsbin-source-javascript" type="text/javascript">const {Observable} = Rx;
const {div, img, label, pre, textarea, button, makeDOMDriver} = CycleDOM;
const {makeHTTPDriver} = CycleHTTPDriver;
// DOM read: text pasted
// HTTP write: request sent
// HTTP read: response received
// DOM write: dom updated
const SS_URL = 'http://ss.prod.paperg.com/captures/ui/ui';
function intent(DOM) {
const submissions$ = DOM
.select('.omg').events('input')
.debounce(500)
.map(event => event.target.value)
.filter(input => input.length > 0)
.map(body => {
return {
url: SS_URL,
method: 'POST',
send: body,
};
});
return submissions$;
}
function model(HTTP) {
const response$ = HTTP
.filter(res$ => res$.request.url === SS_URL)
.flatMap(x => x.catch(err => Observable.just({err})))
.map(isRes((res) => res.body))
.scan(values, [])
.flatMap(Rx.Observable.fromArray)
.flatMap(makeJpeg)
.takeUntil(Rx.Observable.timer(20000))
.toArray()
.startWith([]);
return response$;
}
function view(res$) {
return res$
.map(body =>
div('.users', [
textarea('.omg', 'Put Draft JSON Here!'),
body.err && body.err.message
? div('.error', [
pre('.error-message', body.err.response.body.message),
pre('.json', JSON.stringify(body.err, null, 4))])
: div('.images', body.map(url => img({src:url})))
])
);
}
function main(sources) {
const submissions$ = intent(sources.DOM);
const data$ = model(sources.HTTP);
const vtree$ = view(data$);
return {
DOM: vtree$,
HTTP: submissions$
};
}
Cycle.run(main, {
DOM: makeDOMDriver('#app'),
HTTP: makeHTTPDriver()
});</script></body>
</html>
Raw
jsbin.hodusu.js
'use strict';
var _Rx = Rx;
var Observable = _Rx.Observable;
var _CycleDOM = CycleDOM;
var div = _CycleDOM.div;
var img = _CycleDOM.img;
var label = _CycleDOM.label;
var pre = _CycleDOM.pre;
var textarea = _CycleDOM.textarea;
var button = _CycleDOM.button;
var makeDOMDriver = _CycleDOM.makeDOMDriver;
var _CycleHTTPDriver = CycleHTTPDriver;
var makeHTTPDriver = _CycleHTTPDriver.makeHTTPDriver;
// DOM read: text pasted
// HTTP write: request sent
// HTTP read: response received
// DOM write: dom updated
var SS_URL = 'http://ss.prod.paperg.com/captures/ui/ui';
function intent(DOM) {
var submissions$ = DOM.select('.omg').events('input').debounce(500).map(function (event) {
return event.target.value;
}).filter(function (input) {
return input.length > 0;
}).map(function (body) {
return {
url: SS_URL,
method: 'POST',
send: body
};
});
return submissions$;
}
function model(HTTP) {
var response$ = HTTP.filter(function (res$) {
return res$.request.url === SS_URL;
}).flatMap(function (x) {
return x['catch'](function (err) {
return Observable.just({ err: err });
});
}).map(isRes(function (res) {
return res.body;
})).scan(values, []).flatMap(Rx.Observable.fromArray).flatMap(makeJpeg).takeUntil(Rx.Observable.timer(20000)).toArray().startWith([]);
return response$;
}
function view(res$) {
return res$.map(function (body) {
return div('.users', [textarea('.omg', 'Put Draft JSON Here!'), body.err && body.err.message ? div('.error', [pre('.error-message', body.err.response.body.message), pre('.json', JSON.stringify(body.err, null, 4))]) : div('.images', body.map(function (url) {
return img({ src: url });
}))]);
});
}
function main(sources) {
var submissions$ = intent(sources.DOM);
var data$ = model(sources.HTTP);
var vtree$ = view(data$);
return {
DOM: vtree$,
HTTP: submissions$
};
}
Cycle.run(main, {
DOM: makeDOMDriver('#app'),
HTTP: makeHTTPDriver()
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment