Giter Site home page Giter Site logo

christianvuerings / jquery-lifestream Goto Github PK

View Code? Open in Web Editor NEW
760.0 42.0 137.0 21.53 MB

Show a stream of your online activity with jQuery

Home Page: https://christianvuerings.github.io/jquery-lifestream/

License: MIT License

Makefile 0.33% JavaScript 92.03% CSS 0.43% HTML 7.21%

jquery-lifestream's Introduction

jQuery Lifestream Plug-in

jQuery Lifestream Logo

Show a stream of your online activity. Check out the example or create your own lifestream instantly.

Follow us on twitter

Requirements

Supported feeds

Currently supports the following feeds:

Feel free to fork the project and add your own feeds in. Just send a pull request to christianvuerings/jquery-lifestream when you're finished.

Extensions

Build

cd build
make

Available targets

Use make target and replace target with the target you want to use.

  • jls: Build jquery.lifestream.js, the non-minified version of jQuery Lifestream
  • jls-min: Build jquery.lifestream.min.js, the minified version of jQuery Lifestream
  • jls-css: Build css/lifestream.css, the stylesheet containing the favicons
  • script-min: Build download/js/script.min.js, this script is the main script for the download page
  • uglifyjs: Build download/js/uglify-cs.js, a custom version of UglifyJS patched to work in the browser
  • uglifyjs-min: Build download/js/uglify-cs.min.js, minified version of UglifyJS
  • service-list: Build download/services.json, a list of all the services which are available

Requirements

Usage

Add the following to the <head> or <body> tag of your HTML page.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="//rawgithub.com/christianvuerings/jquery-lifestream/master/jquery.lifestream.min.js"></script>
<script>
  $("#lifestream").lifestream({
    list:[
      {
        service: "github",
        user: "christianvuerings"
      },
      {
        service: "twitter",
        user: "christianvuer"
      }
    ]
  });
</script>

The above code will always use the latest version of the script. If you want to use it in production, download the minified or uncompressed file and host it yourself.

You also need to add a bit of HTML:

<div id="lifestream">&nbsp;</div>

jQuery Templates

You have the ability to use jQuery templates for your feed. Checkout the template page to see an overview of the current available templates.

Usage:

{
  service: 'deviantart',
  user: 'gabbyd70',
  template: {
    deviationpost: 'heeft hetvolgende gepost: <a href="${url}">${title}</a>'
  }
}

Configuration

The plug-in accepts one configuration JSON object:

$("#lifestream").lifestream({
  classname: "lifestream",
  feedloaded: feedcallback,
  limit: 30,
  list:[
    {
      service: "github",
      user: "christianvuerings"
    },
    {
      service: "twitter",
      user: "christianvuer"
    }
  ]
});

classname: The name of the main lifestream class. We use this for the main ul class e.g. lifestream and for the specific feeds e.g. lifestream-twitter

feedloaded: (function) A callback function which is triggered each time a feed was loaded.

limit: (integer) Specify how many elements you want in your lifestream (default = 10).

list: (array) Array containing other JSON objects with information about each item. Each item should have a service and a user. For more information about each service, check out the source code of the example page.

Commit to the project

Add your own feed

Adding in your own feed is pretty easy. Have a look at this commit which adds support for the last.fm feed.

Add your favicon

  1. Convert the favicon.ico of a site to a .png file. (e.g. http://google.com/favicon.ico)
  2. Optimize the .png file. Save it in src/favicons/.

How to commit?

  1. Push the finished code to your own remote repository.
  2. Send a pull request to christianvuerings/jquery-lifestream.

Code Style Guidelines

  • Indentation: 2 spaces
  • Max column width: 78 characters
  • Trailing spaces: not allowed
  • Always use curly brackets {} for if/else/for
  • Put all var statements in the beginning of a function
  • Use === & !== for comparing variables
  • Use the following spacing rules:
for (var i = 0, j = length; i < j; i++) {
  • Use jshint on your files. .jshintrc contains the necessary configuration

Ideas

Stuff that isn't implemented yet, but would be nice to have:

Mentions

Places on the web where this plug-in got mentioned:

Used By

A list of sites that use the jQuery Lifestream plug-in:

Alesh Houdek, Armin Roșu, BrainDump2.0, Dennis Metzcher, Devin Berg, Erik Ostrom, Ethan Brown, Libby Baldwin, Sam Tardif, Sebastix, Simon Gaeremynck, Song Gao, Sunny Walker, Roni Laukkarinen

Special Thanks

Special thanks all the committers and gabbyd70 for letting us use her DeviantART username.

Version log

Have a look at our tags to see what we've been working on.

jquery-lifestream's People

Contributors

ahluntang avatar arminrosu avatar billturner avatar christianvuerings avatar davidlimcheng avatar debuggingfuture avatar devinberg avatar devkungfoo avatar dmfrancisco avatar eostrom avatar etano avatar hawx avatar hiromitz avatar mattn avatar mgiulio avatar my-flow avatar numericr avatar rannmann avatar samtardif avatar simong avatar skylamer avatar songgao avatar thatryan avatar thebinarypenguin avatar tomatoganes avatar westurner avatar yeco avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

jquery-lifestream's Issues

Hashtag bug

When loading hashtags with nordic characters the links break.

E.g #blæse - The link will break right before "æ":
HTML: blæse

RSS feed won't load in Lifestream, will load in browser

I'm attempting to use Lifestream with this RSS URL: http://feeds.cad.cx/TheFlowOfConsciousness.

The RSS plugin retrieves this URL (or similar):

http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20xml%20where%20url%3D%22http%3A%2F%2Ffeeds.cad.cx%2FTheFlowOfConsciousness%22&env=store://datatables.org/alltableswithkeys&format=json&callback=jQuery16107474609359633178_1336833516308&_=1336833516707

It appears to be truncated when retrieved within Lifestream. If I access that (or similar) URL outside of Lifestream, I get the full response.

This has been going on for a couple of months, and even the latest HEAD version doesn't seem to solve it.

Simple JSON question

Can someone explain to me why when I try to host the .json file myself, the script fails to load the data. For example, I go to http://www.reddit.com/user/ME.json, download the file, edit the reddit.js service to point to my downloaded file, recompile, and then it doesn't load.

I'm sure this is something simple stemming from my lack of understanding of JSON. Please let me know. Thanks!

Callback for feeds done loading

Can you add a callback for when ALL feeds are done loading. I am loading quite a few and I want to show a spin.js spinner until all the feeds are loaded.

Character ouput for Facebook

Hi. Great plugin. I'm just wondering how I can increase the output of the facebook posts on the character count. Right now it's set at 83 characters before it's truncated. I'd like it to spit out more then that.

NoScript silently breaks Lifestream

I'm running Firefox 5.0.1 and NoScript 2.1.2.5rc1. The demo doesn't work for me. I've allowed scripts from github.com, and the lifestream script loads, but jquery.tmpl doesn't, and I get no warning or other indication that there's a problem.

It may be connected to #69, but it might not, so I'm filing a separate ticket. I think it's probably either GitHub's or NoScript's bug, but I thought you might want to know about it.

I'd like to suggest that in the README where it says "If you want to use it in production, download the minified or uncompressed file and host it yourself," you also recommend downloading and hosting jquery.tmpl (before jquery.lifestream). This fixed my NoScript problem, and just seems like common sense - if you're not going to rely on GitHub for Lifestream, you shouldn't rely on GitHub for Lifestream's dependencies.

Performance: Yql queries: select *

Services that use Yql should use the SELECT projection clause to slim down the Kbs downloaded on the wire.

The saving can be very high.
Sorry if I don't provide numbers, I did this for the DA support some time ago, I don't remember and I have not time to do it now.

Currently only DeviantArt, BitBucket and Github services do it.

@ChristianV: maybe you could put this advice in readme?

We've lost timeago and Dribble support

Hi guys,

I've finished to implement date limits and I'm going to make a pull request with more explanations.
But when merging actual master branch I've noticied that Dribble support and timeago have disappeared!

Is it normal?

I can restore code with my merge commit.

Tumblr - user with one post doesn't work

When you enter a user with only one post (e.g. denbuzze) you'll get a list of undefined elements.

This happens because

input.query.results.posts.post

is expected to be an array, but when you only have one item, it is a post itself.
We're using jQuery each on it, which will result running over all the properties in the post:

$.each(input.query.results.posts.post, function(i, post) {

Modular Builds

Description
Currently we have all the feeds + main logic in one big JavaScript file. That file keeps growing in a linear with extra feeds. The current plug-in architecture is already quite modular. Each feed has their own specific namespace and functions. Clearly separated from the main logic.

People should be able to download a custom JavaScript file which contains only their necessary feeds. We could link this to the me page or create a new download page.

Requirements

Look at

On the Modernizr download page you have a neat way of doing modular JavaScript builds. Definitely worth checking out their code.

Plugin logo in SVG format

To the source .ai I would add a more 'open' format like SVG, supported for example by open source graphics programs like Inkscape.

BTW, I could open it in Inkscape and the import seems ok.

Relative Time

It would be nice to have a way of seeing when something was posted in the past. We will probably expose the date from within our JavaScript and use a plug-in to see the relative time:

Posted ... 1 min ago

Requirements:

  • Should update automatically (e.g. from 1 min ago to 2 min ago)
  • i18n capable

Things we'll need to do:

  • Expose the "li" template for a feed - jQuery Template
  • Implement an external plug-in which handles the relative time
  • Add this feature to example.html

Suggested compatible plug-in: jquery.timeago.js

Build a Vertical Slider Example

Description
Build a vertical slider example which only shows a few feeds at a time.

Requirements

  • Stops scrolling when you hover over it
  • Links within a feed item should still be clickable
  • Add a gradient from a color to transparant on the top and bottom
  • Shouldn't need any code modifications to the current jQuery Lifestream JavaScript file

Useful links

http://www.jugbit.com/jquery/vticker.php
http://net.tutsplus.com/tutorials/javascript-ajax/build-a-simple-jquery-news-ticker/
http://sorgalla.com/jcarousel/
http://sorgalla.com/projects/jcarousel/examples/static_vertical.html
http://www.gmarwaha.com/jquery/jcarousellite/
http://www.webdesignbooth.com/create-a-vertical-scrolling-news-ticker-with-jquery-and-jcarousel-lite/
http://www.webdesignbooth.com/demo/news-ticker/

GitHub bug: created undefined undefined

I got created undefined undefined messages in stream. The second undefined are links to urls like https://github.com/mgiulio/jquery-lifestream/compare/deviantart-yql and https://github.com/mgiulio/jquery-lifestream/compare/youtube.

The offending code block is around L454:

 else if (status.type === "CreateEvent"){
        var name = (status.payload.object_name === "null")
          ? status.payload.name
          : status.payload.object_name
        output += 'created ' + status.payload.object
          +' <a href="' + status.url + '">'
          + name
          + '</a>';
      }

First of all, there is a missing comma for the var name declaration. I'm wondering if there is something else to fix in this snippet...but maybe it's only me, I have not explored this part of the plugin yet so I could be missing something.

Lifestream not working on I.E. at all.

hi Christian,

i have used the Lifestream on one of my site but its just not working at all in I.E. (bloody I.E. LOL) i keep getting an error "SCRIPT438: Object doesn't support property or method 'lifestream' ". I have tried to duplicate the scripts and mark up you have on this example http://christianv.github.com/jquery-lifestream/example.html and noticed 2 differences to mine, you are using jquery 1.7.1 and the jquery.lifestream.js and the web hosted jquery.timeago.js and i am using jquery 1.7.2 and the web hosted jquery.lifestream.min.js so copied your scripts and tried them but then it doesnt work at all on everything (grrr) and i need to use jquery 1.7.2 for other things on the site anyway. Do you have any idea on what i can do to make it work in I.E. (am only loading facebook, twitter and google) and unfortunately my client uses I.E. so cant just ignore I.E.'s issues (like i normally do LOL)

cheers in advance

Denford

No RT with Twitter support

Hi,

I've just seen that RT aren't supported. Is it a real choice or an oversight?

And as there is now an official Twitter account for this project (@jq_lifestream for those who missed it) why not using it on the example file?

Update Google reader tip

Update the google reader tip with the following:

open google reader and put in the address line (or your debugger):
javascript:prompt("User ID", _USER_ID);void(0);

Inconsistent Stream item wording

Currently there are multiple ways a stream item references the user. E.g.:

  • google+: Armin Rosu has posted a new entry jQuery
  • vimeo: posted jQuery

I suppose there is a need for including an author, especially if you have multiple streams from one network (e.g. facebook pages); then again, if you're using it as a personal lifestream, we can assume all streams are authored by you.

I'm not sure how to best handle this:

  1. impose a standard (i.e. all items need to prefix the author) or
  2. add a global/per stream option to do this,
  3. or ignore this entirely

So I just put it up for discussion. Personally, I favor option 2, but both 1 and 2.

GitHub component should use the Events API

After corresponding with GitHub support I've learned that the current method of getting the user's activity feed has been deprecated in favor of using the Events API. The same information is available via the API however it is rate-limited to 5000 requests per hour while the current method presumably has no rate limit.

RSS / Atom Support

It occurs to me that if there was a way to support generic RSS and Atom feeds, that would likely open up all sorts of possibilities. It might be a smaller niche than some of the other feeds suggested already, but anyone with a personal blog that they host on their own (ex: Wordpress), would have use for this feature.

Add QUnit

Description

Add the QUnit test suite to the jQuery Lifestream repository.
Each self-respecting plug-in should have some tests which checks the basic functionality.

Requirements

  • At least 2 basic tests need to be added to test whether it actually works
  • Needs to be easy updatable when a new version of QUnit launches
  • If a feed has a testcase, it should be in a separate test.js file

Suggested tests

  • Check whether every plug-in has its own template
  • Make sure we don't pollute the global namespace
  • Check whether the global settings are parsed in successfully
  • Check whether the plug-in is chainable
  • Check if the createYqlUrl function works fine

File structure

tests -
    test1.js
    test2.js
    qunit -
        qunit.js
        qunit.css

Links
https://github.com/jquery/qunit
https://github.com/jquery/globalize/tree/master/test

Fetching scripts from Github causes problems...

...because gh servers return a text/plain MIME type.

  • FF 4 works but report a warning: "Resource interpreted as Script but transferred with MIME type text/plain."
  • IE9 doesn't work reporting an error message with a similar content.

FF complains only about the jQuery tmpl plugin, IE9 also on the timeago plugin

The easiest fix(the only?) is to copy these deps in JLS repo.

Some refs:
*http://stackoverflow.com/questions/3467404/chrome-says-resource-interpreted-as-script-but-transferred-with-mime-type-text-p

IE 9 not showing facebook stream

Hi,

Thanks so much for lifestream.

I just am implementing the lifestream jquery and for some reason I can't see facebook posts in the stream in IE. Twitter works fine. In Chrome I am able to see both twitter and facebook.

You can check out my test site at www.nickelscabinets.com/indexnew.html

Thanks for the help!

Dave

An alternative use of class names

I experimented with this on mgiulio@e66485b . But to note that there can be troubles with CSS decls like

#lifestream .activity:hover {
      color: #e9e9e9;
}

so I didn't sent a pull request. Just something to think about.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.