Nanananananananana.. Pat Man!

    @mrf3/json_stream

    0.0.8 • Public • Published

    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

    Demo GIF

    Setup example:

    - With NPM:

    npm install --save @mrf3/json_stream
    import 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:

    1. jQuery
    2. jQuery UI (optional)

    Install

    npm i @mrf3/json_stream

    DownloadsWeekly Downloads

    17

    Version

    0.0.8

    License

    MPL-2.0

    Unpacked Size

    398 kB

    Total Files

    8

    Last publish

    Collaborators

    • mrf3