-
Notifications
You must be signed in to change notification settings - Fork 0
/
README
68 lines (52 loc) · 3.98 KB
/
README
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
This project is an attempt to process json data streams entirely on the client side
without requiring any client side processing. This is most useful for rendering
listing of items (ex: story listings from newspapers, aggregators, etc.).
This project is an extension and generalization of work done with NewsTrust (http://newstrust.net).
The ideas in this project were first tested during the development of NewsTrust's widgets
which can be seen at: http://newstrust.net/widgets. NewsTrust relies a lot on these
widgets on its own site as well as on a lot of partner sites. Thanks to NewsTrust for
letting me use that code as the basis for this FOSS project.
* Read NOTES for the rough ideas that inform this project.
* jsWidget.ultracompressible.js is the uncompressed (but compressible) version of
this widget engine. This code is pushed through Yahoo's JS compressor and my own
custom compresser to generate the compact jsWidget.js code as follows:
java -jar PATH-TO-JAR/yuicompressor-2.3.5.jar jsWidget.ultracompressible.js | perl compress.js.pl > jsWidget.js
This compression technique is just legacy and how I have done it in the past -- this
can be stripped out to use any other compression techique.
* This is standalone javascript and does not depend on any other javascript library and
as such can be embedded on any site easily. It can be used on static HTML pages or within
CMSes or pretty much anywhere you want to use it.
* Last I verified, this code used to work well on Firefox, IE, and Safari. I haven't recently
tested this on IE or on other browsers.
* formats/* has sample format files for consuming data streams from different services
(ex: Digg, Delicious, Twitter, NewsTrust, NewsRack) and rendering HTML.
* jsw.demo.html gives you examples of how to use the widget formats and the engine to process
a json data stream. As is clear, you can embed multiple widgets on the same page without
them interfering with each other.
Sites currently using this widget engine:
-----------------------------------------
* http://esgindia.org
* http://hindi.indiawaterportal.org/content/%E0%A4%B8%E0%A4%AE%E0%A4%BE%E0%A4%9A%E0%A4%BE%E0%A4%B0
* http://bangalore.citizenmatters.in/citynews
* http://pinkslipmedia.org/
Some preliminary notes for writing widget formats
-------------------------------------------------
I am yet to write up a spec for this format, but till such time, some preliminary notes here.
* You can provide css settings either via inline styles (which is what is commonly used on most of
the widget formats -- so as to tightly control the rendering without being impacted by the styles
of the site on which this is embedded) or via css class names (which are expected to be present
on the page within which the widget is embedded).
digg.json is an example that uses css classes (and the css defns. for these classes are provided
in jsw.demo.html).
* For each section of the widget (which is specified by an array -- self-explanatory when you look
at some widget formats), you provide a base css style/class + the elements to be generated for
the data object being processed by this section. This spec (dom_nodes) is basically an array of hashes,
where each element of the array (a hash of properties) specifies an individual DOM node. It says
what needs to be rendered, and how it needs to be rendered. You can nest this arbitrarily using
the 'dom_tree' node type (see formats/nt.json) for an example.
- You can do conditional rendering of an item in this array via the if_true property.
- '$' provides you access to the data object that is currently being processed.
- '$util' provides you access to helpers defined within the javascript engine.
- This engine can be extended with say '$extern' to let you access arbitrary javascript code, if necessary.
* You can combine multiple distinct formats and consume multiple data streams within the same widget easily
See formats/mashup.json for an example of this and jsw.demo.html for how it is used there.