json_stream (Beta)
jQuery based script to monitor and fetch JSON feed upon change.
Features :
- Apply jQuery UI effects whenever elements change.
- Execute inserted function whenever elements change.
Live Demo
- Credit: In this example, i am using Fixer API to get the latest exchange rates
Setup example:
- With NPM:
npm install --save @mrf3/json_streamimport JsonStream from 'json_stream'
window.addEventListener('load', () => {
const stream = JsonStream({
// ... options
url: 'http://127.0.0.1:5000/',
data_attr: 'stream',
use_effect: 'true',
effect: 'fade'
// ...
})
}- With browser:
<head>
<script type="text/javascript"
src="https://rawgit.com/mrf345/json_stream/master/bin/bundle.js">
</script>
<script type="text/javascript">
window.addEventListener('load', () => {
JsonStream({
// ... options
url: 'http://127.0.0.1:5000/',
data_attr: 'stream',
use_effect: 'true',
effect: 'fade'
// ... options
})
})
</script>
</head>- The body
- Assuming that we will receive a JSON object of the following properties :
{
first: 'The first one',
second: {
name: 'some name',
details: {
address: 'some address',
tel: 'telephone'
}
}
}<body>
<h1 stream='first' class='effectit'>
First to be changed
</h1>
<h1 stream='second>details>address' class='effectit'>
To be changed too
</h1>
</body>Options :
returnit.options = {
url: options.url || '/', // url to get the json feed
request_type: options.request_type || 'GET', // http request method to use in ajax
duration: options.duration * 1000 || 2000, // duration of sleep between each response check
data_attr: options.data_attr || 'jsonstream', // attaribute assigned to html elements with json property name
use_watch: options.use_watch || 'true', // to activate watch elements change and update
watch_class: options.watch_class || '.watchit', // class assigned to elements wanted to be watched
use_effect: options.use_effect || 'false', // to activate watch elements change with updates and jquery UI effects
effect: options.effect || exFunctions.choice(exFunctions.effects), // motion effect to use upon data update. Default is randomly chosen
effect_repeats: options.effect_repeats || 1, // number of times repeating the motion effect
effect_duration: options.effect_duraton || 1000, // the duration of motion effect
effect_class: options.effect_class || '.effectit', // class assigned to elements wanted to be watched with motion effects
effect_do_class: options.effect_do_class || '.effectdoit', // class assigned to element wanted to be watched with motion effect and todo function executed
use_effect_do: options.use_effect_do || 'false', // to activate watch elments change with effects and function execution
use_do: options.use_do || 'false', // to activiate watch elments and update with applying specific function on each update
todo: options.todo || function (data) {
if (data) { // data is the json response passed to the function by default
alert('Got fetched !')
console.log(data)
}
}, // function to be applied on update
do_class: options.do_class || '.doit', // class assigned to elements wanted to be watched with specific function
ensure_class: options.ensure_class || 'ensureit', // class assigned to elements which will be ensured to update with other values
ensure_value: options.ensure_value || 'id' // value which will be checked in the json response to triger update instead of depending on the default content change
}Useful functions :
To use any of the following functions, you have to get an instance of the module, which we did in the Setup section :
const stream = JsonStream()
stream.following_functions()
- Log and status :
this.list = function list () {
// returning a log of the parsed and stored elements
}
this.loops = function loops (log) {
// returning the status of stored intervals
}- Exit and cleanup :
this.exit = function exit () {
// stop and clean up
}List of jQuery UI effects :
const effects = [
// jquery ui effects
'blind', 'bounce', 'clip',
'drop', 'explode', 'fade',
'fold', 'highlight', 'puff',
'pulsate', 'scale', 'shake',
'size', 'slide']Dependencies:
- jQuery
- jQuery UI (optional)