rogie / dug.js Goto Github PK

Dug.js

JavaScript 100.00%

dug.js's Introduction

Dug.js

So you want to display your Dribbble shots, recent pins on Pinterest, 500px or Instagram photos, Github commits, or recently listened to music on your blog or site? Then this chunk of javascript is for you. It was designed to be a lightweight, simple, library-independent script to pull in feeds of content available on the web as JSONP (there's lots of em!) to display on your site.

Read the full explanation over at the blog post.

A JSONP to HTML script

Usage

With Dug.js, you really only need two things to pull in data from any JSONP endpoint into any HTML page:

The api endpoint (jsonp callbacks supported)
The HTML template to display the data

Include dug.js

First step is to place dug.js in your /js directory, and include is in your document <head> via <script src="/js/dug.js"></script>.

Add render templates to your HTML

Once you have included dug.js on your page, you can then create render templates directly in your HTML doc by simply calling the dug function, and including the endpoint param, target param, and a template param.

There are five example instances here in the repo, including:

Params

target — the id of an existing DOM element to put the html results in.
template — the string template OR a CSS selector pointing to a template script.
cacheExpire — # of milliseconds to cache data on the client side (using localstorage). 0 for no caching.
callbackParam — the name of the query variable a JSONP service will use for a callback function. Most services just use 'callback=functionName', but sometimes a service will use a different query variable name.
success — a function to call when JSONP data is successfully retrieved.
error — a function to call when JSONP data is not successfully retrieved.
beforeRender @param data — a function called before Dug.js renders the template. Helpful for trimming/changing the data before it renders.
afterRender @param data — a function called after Dug.js renders the template.

Contributing

If you have a great idea for making dug.js better, just fork, and open a pull requests for discussion & development. When in doubt, open the PR early for discussion (prior to actually fully completing the feature) and once we have a chance to discuss whether it's a good idea, then go build that ✨!

License

Dug.js is 100% free under the WTFPL — no link backs or anything needed.

dug.js's People

Contributors

Stargazers

Watchers

dug.js's Issues

Browser hangs with 100% CPU utilization under dug.js execution

Hi, rogie.

I tried to change Flickr API end-point at flickr.html example file to different one and browser hanged with 100% CPU.

I used this endpoint: http://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=f162f2bd093e4b60d2167158a4d67513&format=json&user_id=21960065@N03&tags=bmwmuseum which returns about 20 photos.

I think there is an infinite loop somewhere inside dug.js which never ends.

Dug limit not working with data

Hello,
I have tried to use dug.js with this code

dug({
      endpoint: 'https://api.github.com/repos/superbedit/superbedit/commits',
      target: 'commits',
      error: function(){
      console.log('error');
      },
      template: '{{#data|dug.limit:2}}\
        <div class="row">\
          <div class="large-2 columns">\
            <img src="{{author.avatar_url}}" width="64" height="64">\
          </div>\
          <div class="large-10 columns">\
            <p><b>{{commit.author.name}}</b>:<br/>{{commit.message}}</p>\
          </div>\
        </div>\
      {{/data}}'
    });

but it seems that the output is not correct as i get:

Templates within the HTML

I think it'd be great if we could keep the template in the HTML itself. And pass in it's id. So we don't have to do all that escaping and keep the outline of the posts in the HTML itself. Splitting up the templates and the HTML is a bit messy.

Support of custom delimiters

Hi!

Nice script. I tried to use it on Jekyll-powered blog, which itself using {{ and }} for liquid templates, so I need to use custom delimiters with Dug.

At dug.js I found option templateDelimiters, but when I set it to [[, ]] nothing worked. Then I set it to (( and )) and my computer hangs with 100% CPU utilization of one core. Finally, I got << and >> and they worked but only for parent iterator. Inside iteration cycle it still uses default {{ and }} and can't handle right data in dotData function.

I changed {{ and }} to << and >> inside render function and it seemed to work now.

Please, provide documentation for templateDelimiters and fix that bug.

Dugs template causes Chrome to crash if wrong endpoint

Found an interesting issue with the template engine of Dug.js.

If you specify a wrong url like:
endpoint: 'https://api.pinterest.com/foobar

The script will just give a 404 correctly and do nothing.

Now if you go deeper and just add a little typo in the url:
endpoint: 'https://api.pinterest.com/v3/pidgets/boards/rogieking/my-illustration-style-typo/pins/'

Chrome will crash because the template engine will keep looking for data.data.pins.

A workaround for this is to set data.data.pins to something:

beforeRender: function( data ){ if (data.status === "failure") { // Hack: give something to the template to be happy data.data = { pins: [] }; (...)

So the template will get an empty object and do nothing.

As far as I understood the "error" callback will only be called if there's an error such a network error. If you have a typo in the endpoint url, the call will be a success but with empty data (without pins). So the error callback won't be called and the template will hang.

CommonJS and AMD support

It would be good for people that don't want it as a global object.