renkan: client/README.md@1387779706e5 (annotated)

249 3d8937fa93a8 read me dans clearer test pages cavaliet parents: diff changeset	1	# Renkan - Client configuration
3d8937fa93a8 read me dans clearer test pages cavaliet parents: diff changeset	2
398 57f8d344fde9 Correct button shift on hover that appeared after paperjs v 0.9.15 ymh <ymh.work@gmail.com> parents: 265 diff changeset	3	Renkan is a tool to simply build oriented graphs by creating nodes and drag'n'droping links,
57f8d344fde9 Correct button shift on hover that appeared after paperjs v 0.9.15 ymh <ymh.work@gmail.com> parents: 265 diff changeset	4	pictures and html elements from web pages. Each node can have title, description, uri/url, color,
249 3d8937fa93a8 read me dans clearer test pages cavaliet parents: diff changeset	5	image and specific size. Each node can have title, uri/url and color.
3d8937fa93a8 read me dans clearer test pages cavaliet parents: diff changeset	6
3d8937fa93a8 read me dans clearer test pages cavaliet parents: diff changeset	7
3d8937fa93a8 read me dans clearer test pages cavaliet parents: diff changeset	8	## Embedding Renkan in a web page
3d8937fa93a8 read me dans clearer test pages cavaliet parents: diff changeset	9
3d8937fa93a8 read me dans clearer test pages cavaliet parents: diff changeset	10	Whatever configuration you have, you need to import those javascript files in that order...
3d8937fa93a8 read me dans clearer test pages cavaliet parents: diff changeset	11
3d8937fa93a8 read me dans clearer test pages cavaliet parents: diff changeset	12	<script src="[...]/jquery.min.js"></script>
3d8937fa93a8 read me dans clearer test pages cavaliet parents: diff changeset	13	<script src="[...]/jquery.mousewheel.min.js"></script>
3d8937fa93a8 read me dans clearer test pages cavaliet parents: diff changeset	14	<script src="[...]/underscore-min.js"></script>
3d8937fa93a8 read me dans clearer test pages cavaliet parents: diff changeset	15	<script src="[...]/backbone.js"></script>
3d8937fa93a8 read me dans clearer test pages cavaliet parents: diff changeset	16	<script src="[...]/backbone-relational.js"></script>
3d8937fa93a8 read me dans clearer test pages cavaliet parents: diff changeset	17	<script src="[...]/paper.js"></script>
3d8937fa93a8 read me dans clearer test pages cavaliet parents: diff changeset	18	<script src="[...]/renkan.js"></script>
3d8937fa93a8 read me dans clearer test pages cavaliet parents: diff changeset	19
3d8937fa93a8 read me dans clearer test pages cavaliet parents: diff changeset	20	... and the renkan css file :
3d8937fa93a8 read me dans clearer test pages cavaliet parents: diff changeset	21
3d8937fa93a8 read me dans clearer test pages cavaliet parents: diff changeset	22	<link rel="stylesheet" href="[...]/renkan.css" />
3d8937fa93a8 read me dans clearer test pages cavaliet parents: diff changeset	23
3d8937fa93a8 read me dans clearer test pages cavaliet parents: diff changeset	24	Finally, add the div in you DOM :
3d8937fa93a8 read me dans clearer test pages cavaliet parents: diff changeset	25
3d8937fa93a8 read me dans clearer test pages cavaliet parents: diff changeset	26	<div id="renkan"></div>
3d8937fa93a8 read me dans clearer test pages cavaliet parents: diff changeset	27
3d8937fa93a8 read me dans clearer test pages cavaliet parents: diff changeset	28	Your Renkan should be displayed. Now let's see more specifically the 2 displays possibilities : in body 100% or in a div with set width and height.
3d8937fa93a8 read me dans clearer test pages cavaliet parents: diff changeset	29
251 163b59b3e50b update writable demo and read me. cavaliet parents: 250 diff changeset	30	N.B. : renkan.js is the concatenation of those js files : header.js main.js models.js defaults.js i18n.js paper-renderer.js full-json.js ldtjson-bin.js list-bin.js wikipedia-bin.js.
398 57f8d344fde9 Correct button shift on hover that appeared after paperjs v 0.9.15 ymh <ymh.work@gmail.com> parents: 265 diff changeset	31	It is built with the script available in sbin/build/compil.sh.
249 3d8937fa93a8 read me dans clearer test pages cavaliet parents: diff changeset	32
3d8937fa93a8 read me dans clearer test pages cavaliet parents: diff changeset	33	### In body 100%
3d8937fa93a8 read me dans clearer test pages cavaliet parents: diff changeset	34
3d8937fa93a8 read me dans clearer test pages cavaliet parents: diff changeset	35	Nothing to add, the html is very simple :
3d8937fa93a8 read me dans clearer test pages cavaliet parents: diff changeset	36
3d8937fa93a8 read me dans clearer test pages cavaliet parents: diff changeset	37	<body>
3d8937fa93a8 read me dans clearer test pages cavaliet parents: diff changeset	38	<div id="renkan"></div>
3d8937fa93a8 read me dans clearer test pages cavaliet parents: diff changeset	39	</body>
3d8937fa93a8 read me dans clearer test pages cavaliet parents: diff changeset	40
3d8937fa93a8 read me dans clearer test pages cavaliet parents: diff changeset	41
3d8937fa93a8 read me dans clearer test pages cavaliet parents: diff changeset	42	### In a div
3d8937fa93a8 read me dans clearer test pages cavaliet parents: diff changeset	43
398 57f8d344fde9 Correct button shift on hover that appeared after paperjs v 0.9.15 ymh <ymh.work@gmail.com> parents: 265 diff changeset	44	The renkan div has the css attributes position:absolute/top:0/left:0/bottom:0/right:0,
250 ea459415fdc9 writable renkan in div cavaliet parents: 249 diff changeset	45	so the parent div has to be in position:relative and define width and height. Here is a simple example including css and partial html :
249 3d8937fa93a8 read me dans clearer test pages cavaliet parents: diff changeset	46
3d8937fa93a8 read me dans clearer test pages cavaliet parents: diff changeset	47	<head>
3d8937fa93a8 read me dans clearer test pages cavaliet parents: diff changeset	48	<style type="text/css">
3d8937fa93a8 read me dans clearer test pages cavaliet parents: diff changeset	49	body{
3d8937fa93a8 read me dans clearer test pages cavaliet parents: diff changeset	50	margin: 0 auto;
3d8937fa93a8 read me dans clearer test pages cavaliet parents: diff changeset	51	width: 960px;
3d8937fa93a8 read me dans clearer test pages cavaliet parents: diff changeset	52	}
3d8937fa93a8 read me dans clearer test pages cavaliet parents: diff changeset	53	.header, .footer {
3d8937fa93a8 read me dans clearer test pages cavaliet parents: diff changeset	54	font-size: 14px;
3d8937fa93a8 read me dans clearer test pages cavaliet parents: diff changeset	55	height: 40px;
3d8937fa93a8 read me dans clearer test pages cavaliet parents: diff changeset	56	padding-top: 10px;
3d8937fa93a8 read me dans clearer test pages cavaliet parents: diff changeset	57	}
3d8937fa93a8 read me dans clearer test pages cavaliet parents: diff changeset	58	.rnk-container{
3d8937fa93a8 read me dans clearer test pages cavaliet parents: diff changeset	59	height: 500px;
3d8937fa93a8 read me dans clearer test pages cavaliet parents: diff changeset	60	position: relative;
3d8937fa93a8 read me dans clearer test pages cavaliet parents: diff changeset	61	width: 700px;
3d8937fa93a8 read me dans clearer test pages cavaliet parents: diff changeset	62	}
3d8937fa93a8 read me dans clearer test pages cavaliet parents: diff changeset	63	</style>
3d8937fa93a8 read me dans clearer test pages cavaliet parents: diff changeset	64	</head>
3d8937fa93a8 read me dans clearer test pages cavaliet parents: diff changeset	65	<body>
3d8937fa93a8 read me dans clearer test pages cavaliet parents: diff changeset	66	<div class="header">
3d8937fa93a8 read me dans clearer test pages cavaliet parents: diff changeset	67	This is a header
3d8937fa93a8 read me dans clearer test pages cavaliet parents: diff changeset	68	</div>
3d8937fa93a8 read me dans clearer test pages cavaliet parents: diff changeset	69	<div class="rnk-container">
3d8937fa93a8 read me dans clearer test pages cavaliet parents: diff changeset	70	<div id="renkan"></div>
3d8937fa93a8 read me dans clearer test pages cavaliet parents: diff changeset	71	</div>
3d8937fa93a8 read me dans clearer test pages cavaliet parents: diff changeset	72	<div class="footer">
3d8937fa93a8 read me dans clearer test pages cavaliet parents: diff changeset	73	This is a footer
3d8937fa93a8 read me dans clearer test pages cavaliet parents: diff changeset	74	</div>
3d8937fa93a8 read me dans clearer test pages cavaliet parents: diff changeset	75	</body>
3d8937fa93a8 read me dans clearer test pages cavaliet parents: diff changeset	76
3d8937fa93a8 read me dans clearer test pages cavaliet parents: diff changeset	77
3d8937fa93a8 read me dans clearer test pages cavaliet parents: diff changeset	78	## Embedding a read only Renkan
3d8937fa93a8 read me dans clearer test pages cavaliet parents: diff changeset	79
3d8937fa93a8 read me dans clearer test pages cavaliet parents: diff changeset	80	To embed a read only Renkan, just add this script tag :
3d8937fa93a8 read me dans clearer test pages cavaliet parents: diff changeset	81
3d8937fa93a8 read me dans clearer test pages cavaliet parents: diff changeset	82	<script type="text/javascript">
3d8937fa93a8 read me dans clearer test pages cavaliet parents: diff changeset	83	var _renkan;
3d8937fa93a8 read me dans clearer test pages cavaliet parents: diff changeset	84	$(function() {
3d8937fa93a8 read me dans clearer test pages cavaliet parents: diff changeset	85	_renkan = new Rkns.Renkan({
3d8937fa93a8 read me dans clearer test pages cavaliet parents: diff changeset	86	editor_mode: false,
3d8937fa93a8 read me dans clearer test pages cavaliet parents: diff changeset	87	show_bins: false,
3d8937fa93a8 read me dans clearer test pages cavaliet parents: diff changeset	88	});
3d8937fa93a8 read me dans clearer test pages cavaliet parents: diff changeset	89	Rkns.jsonIO(_renkan, {
3d8937fa93a8 read me dans clearer test pages cavaliet parents: diff changeset	90	url: "any_local_or_jsonp_url"
3d8937fa93a8 read me dans clearer test pages cavaliet parents: diff changeset	91	});
3d8937fa93a8 read me dans clearer test pages cavaliet parents: diff changeset	92	});
3d8937fa93a8 read me dans clearer test pages cavaliet parents: diff changeset	93	</script>
3d8937fa93a8 read me dans clearer test pages cavaliet parents: diff changeset	94
3d8937fa93a8 read me dans clearer test pages cavaliet parents: diff changeset	95
3d8937fa93a8 read me dans clearer test pages cavaliet parents: diff changeset	96
3d8937fa93a8 read me dans clearer test pages cavaliet parents: diff changeset	97	## Embedding a writable Renkan
3d8937fa93a8 read me dans clearer test pages cavaliet parents: diff changeset	98
3d8937fa93a8 read me dans clearer test pages cavaliet parents: diff changeset	99	### Simple mode : no bins on the left, just the canvas
3d8937fa93a8 read me dans clearer test pages cavaliet parents: diff changeset	100
398 57f8d344fde9 Correct button shift on hover that appeared after paperjs v 0.9.15 ymh <ymh.work@gmail.com> parents: 265 diff changeset	101	To embed a simple writable Renkan, just add this script tag. In the client folder, "data/simple-persist.php" makes a very simple persistent url.
249 3d8937fa93a8 read me dans clearer test pages cavaliet parents: diff changeset	102	The persistent url is supposed to give the json data on GET request at page load, and save datas at PUT request sent by the browser :
3d8937fa93a8 read me dans clearer test pages cavaliet parents: diff changeset	103
3d8937fa93a8 read me dans clearer test pages cavaliet parents: diff changeset	104	<script type="text/javascript">
3d8937fa93a8 read me dans clearer test pages cavaliet parents: diff changeset	105	var _renkan;
3d8937fa93a8 read me dans clearer test pages cavaliet parents: diff changeset	106	$(function() {
3d8937fa93a8 read me dans clearer test pages cavaliet parents: diff changeset	107	_renkan = new Rkns.Renkan({
3d8937fa93a8 read me dans clearer test pages cavaliet parents: diff changeset	108	show_bins: false
3d8937fa93a8 read me dans clearer test pages cavaliet parents: diff changeset	109	});
3d8937fa93a8 read me dans clearer test pages cavaliet parents: diff changeset	110	Rkns.jsonIO(_renkan, {
3d8937fa93a8 read me dans clearer test pages cavaliet parents: diff changeset	111	url: "url_of_a_persistent_connection"
3d8937fa93a8 read me dans clearer test pages cavaliet parents: diff changeset	112	});
3d8937fa93a8 read me dans clearer test pages cavaliet parents: diff changeset	113	});
3d8937fa93a8 read me dans clearer test pages cavaliet parents: diff changeset	114	</script>
3d8937fa93a8 read me dans clearer test pages cavaliet parents: diff changeset	115
3d8937fa93a8 read me dans clearer test pages cavaliet parents: diff changeset	116
251 163b59b3e50b update writable demo and read me. cavaliet parents: 250 diff changeset	117	## Search and bins
163b59b3e50b update writable demo and read me. cavaliet parents: 250 diff changeset	118
163b59b3e50b update writable demo and read me. cavaliet parents: 250 diff changeset	119	On the right of your renkan interface, you can add some search engine and data bins.
163b59b3e50b update writable demo and read me. cavaliet parents: 250 diff changeset	120
398 57f8d344fde9 Correct button shift on hover that appeared after paperjs v 0.9.15 ymh <ymh.work@gmail.com> parents: 265 diff changeset	121	Search engine can be the current [IRI's Lignes de temps platform](http://ldt.iri.centrepompidou.fr/) and wikipedia in any available language.
251 163b59b3e50b update writable demo and read me. cavaliet parents: 250 diff changeset	122	Here is an example of configuration :
163b59b3e50b update writable demo and read me. cavaliet parents: 250 diff changeset	123
163b59b3e50b update writable demo and read me. cavaliet parents: 250 diff changeset	124	_renkan = new Rkns.Renkan({
163b59b3e50b update writable demo and read me. cavaliet parents: 250 diff changeset	125	search: [
163b59b3e50b update writable demo and read me. cavaliet parents: 250 diff changeset	126	{
163b59b3e50b update writable demo and read me. cavaliet parents: 250 diff changeset	127	type: "Ldt"
163b59b3e50b update writable demo and read me. cavaliet parents: 250 diff changeset	128	},
163b59b3e50b update writable demo and read me. cavaliet parents: 250 diff changeset	129	{
163b59b3e50b update writable demo and read me. cavaliet parents: 250 diff changeset	130	type: "Wikipedia",
163b59b3e50b update writable demo and read me. cavaliet parents: 250 diff changeset	131	lang: "fr"
163b59b3e50b update writable demo and read me. cavaliet parents: 250 diff changeset	132	},
163b59b3e50b update writable demo and read me. cavaliet parents: 250 diff changeset	133	{
163b59b3e50b update writable demo and read me. cavaliet parents: 250 diff changeset	134	type: "Wikipedia",
163b59b3e50b update writable demo and read me. cavaliet parents: 250 diff changeset	135	lang: "ja"
163b59b3e50b update writable demo and read me. cavaliet parents: 250 diff changeset	136	}
163b59b3e50b update writable demo and read me. cavaliet parents: 250 diff changeset	137	]
163b59b3e50b update writable demo and read me. cavaliet parents: 250 diff changeset	138	});
163b59b3e50b update writable demo and read me. cavaliet parents: 250 diff changeset	139	Rkns.jsonIO(_renkan, {
163b59b3e50b update writable demo and read me. cavaliet parents: 250 diff changeset	140	url: "data/simple-persist.php"
163b59b3e50b update writable demo and read me. cavaliet parents: 250 diff changeset	141	});
163b59b3e50b update writable demo and read me. cavaliet parents: 250 diff changeset	142
163b59b3e50b update writable demo and read me. cavaliet parents: 250 diff changeset	143	You can also define data bins : annotations loaded from IRI's Lignes de temps projects, and any resources which can be drag and dropped into the renkan.
163b59b3e50b update writable demo and read me. cavaliet parents: 250 diff changeset	144	Resources can be simple texts, links or objects with title, description, url and image. Here is an example of configuration :
163b59b3e50b update writable demo and read me. cavaliet parents: 250 diff changeset	145
163b59b3e50b update writable demo and read me. cavaliet parents: 250 diff changeset	146	_renkan = new Rkns.Renkan({
163b59b3e50b update writable demo and read me. cavaliet parents: 250 diff changeset	147	search: [
163b59b3e50b update writable demo and read me. cavaliet parents: 250 diff changeset	148	...
163b59b3e50b update writable demo and read me. cavaliet parents: 250 diff changeset	149	],
163b59b3e50b update writable demo and read me. cavaliet parents: 250 diff changeset	150	bins: [
163b59b3e50b update writable demo and read me. cavaliet parents: 250 diff changeset	151	{
163b59b3e50b update writable demo and read me. cavaliet parents: 250 diff changeset	152	title: "To be or not to be on Lignes de Temps",
163b59b3e50b update writable demo and read me. cavaliet parents: 250 diff changeset	153	type: "Ldt",
163b59b3e50b update writable demo and read me. cavaliet parents: 250 diff changeset	154	ldt_type: "Project",
163b59b3e50b update writable demo and read me. cavaliet parents: 250 diff changeset	155	project_id: "6af4019c-8283-11e2-9678-00145ea4a2be",
163b59b3e50b update writable demo and read me. cavaliet parents: 250 diff changeset	156	ldt_platform: "http://ldt.iri.centrepompidou.fr/"
163b59b3e50b update writable demo and read me. cavaliet parents: 250 diff changeset	157	},
163b59b3e50b update writable demo and read me. cavaliet parents: 250 diff changeset	158	{
163b59b3e50b update writable demo and read me. cavaliet parents: 250 diff changeset	159	type: "ResourceList",
163b59b3e50b update writable demo and read me. cavaliet parents: 250 diff changeset	160	title: "Ressources",
163b59b3e50b update writable demo and read me. cavaliet parents: 250 diff changeset	161	list: [
163b59b3e50b update writable demo and read me. cavaliet parents: 250 diff changeset	162	{
163b59b3e50b update writable demo and read me. cavaliet parents: 250 diff changeset	163	url: "http://www.google.com/",
163b59b3e50b update writable demo and read me. cavaliet parents: 250 diff changeset	164	title: "Google",
163b59b3e50b update writable demo and read me. cavaliet parents: 250 diff changeset	165	description: "Search engine",
163b59b3e50b update writable demo and read me. cavaliet parents: 250 diff changeset	166	image: "http://www.google.fr/images/srpr/logo4w.png"
163b59b3e50b update writable demo and read me. cavaliet parents: 250 diff changeset	167	},
163b59b3e50b update writable demo and read me. cavaliet parents: 250 diff changeset	168	"Polemic Tweet http://www.polemictweet.com",
163b59b3e50b update writable demo and read me. cavaliet parents: 250 diff changeset	169	"Twitter http://www.twitter.com/"
163b59b3e50b update writable demo and read me. cavaliet parents: 250 diff changeset	170	]
163b59b3e50b update writable demo and read me. cavaliet parents: 250 diff changeset	171	}
163b59b3e50b update writable demo and read me. cavaliet parents: 250 diff changeset	172	]
163b59b3e50b update writable demo and read me. cavaliet parents: 250 diff changeset	173	});
163b59b3e50b update writable demo and read me. cavaliet parents: 250 diff changeset	174	Rkns.jsonIO(_renkan, {
163b59b3e50b update writable demo and read me. cavaliet parents: 250 diff changeset	175	url: "data/simple-persist.php"
163b59b3e50b update writable demo and read me. cavaliet parents: 250 diff changeset	176	});
249 3d8937fa93a8 read me dans clearer test pages cavaliet parents: diff changeset	177
253 9851e84a0b37 update readme cavaliet parents: 252 diff changeset	178	If you embed the renkan in a div, the renkan container css should have overflow:hidden in order to hide bins when the user wants to.
249 3d8937fa93a8 read me dans clearer test pages cavaliet parents: diff changeset	179
251 163b59b3e50b update writable demo and read me. cavaliet parents: 250 diff changeset	180	## More configuration
163b59b3e50b update writable demo and read me. cavaliet parents: 250 diff changeset	181
163b59b3e50b update writable demo and read me. cavaliet parents: 250 diff changeset	182	You can configure several things :
163b59b3e50b update writable demo and read me. cavaliet parents: 250 diff changeset	183	* the language of your interface, english (default) or french
163b59b3e50b update writable demo and read me. cavaliet parents: 250 diff changeset	184	* you can fill your nodes with black color instead of transparent.
163b59b3e50b update writable demo and read me. cavaliet parents: 250 diff changeset	185	* thanks to an external file, you can define properties for links between node.
163b59b3e50b update writable demo and read me. cavaliet parents: 250 diff changeset	186
163b59b3e50b update writable demo and read me. cavaliet parents: 250 diff changeset	187
163b59b3e50b update writable demo and read me. cavaliet parents: 250 diff changeset	188	_renkan = new Rkns.Renkan({
163b59b3e50b update writable demo and read me. cavaliet parents: 250 diff changeset	189	...
163b59b3e50b update writable demo and read me. cavaliet parents: 250 diff changeset	190	property_files: [ "data/properties.json" ],
163b59b3e50b update writable demo and read me. cavaliet parents: 250 diff changeset	191	node_fill_color: true,
163b59b3e50b update writable demo and read me. cavaliet parents: 250 diff changeset	192	language: "fr"
163b59b3e50b update writable demo and read me. cavaliet parents: 250 diff changeset	193	});
163b59b3e50b update writable demo and read me. cavaliet parents: 250 diff changeset	194
163b59b3e50b update writable demo and read me. cavaliet parents: 250 diff changeset	195	Here is an example of properties file :
249 3d8937fa93a8 read me dans clearer test pages cavaliet parents: diff changeset	196
251 163b59b3e50b update writable demo and read me. cavaliet parents: 250 diff changeset	197	[
163b59b3e50b update writable demo and read me. cavaliet parents: 250 diff changeset	198	{
163b59b3e50b update writable demo and read me. cavaliet parents: 250 diff changeset	199	"label": "Dublin Core Metadata",
163b59b3e50b update writable demo and read me. cavaliet parents: 250 diff changeset	200	"base-uri": "http://purl.org/dc/elements/1.1/",
163b59b3e50b update writable demo and read me. cavaliet parents: 250 diff changeset	201	"properties": [
163b59b3e50b update writable demo and read me. cavaliet parents: 250 diff changeset	202	{
163b59b3e50b update writable demo and read me. cavaliet parents: 250 diff changeset	203	"uri": "creator",
163b59b3e50b update writable demo and read me. cavaliet parents: 250 diff changeset	204	"label": "created by"
163b59b3e50b update writable demo and read me. cavaliet parents: 250 diff changeset	205	}, {
163b59b3e50b update writable demo and read me. cavaliet parents: 250 diff changeset	206	"uri": "date",
163b59b3e50b update writable demo and read me. cavaliet parents: 250 diff changeset	207	"label": "has date"
163b59b3e50b update writable demo and read me. cavaliet parents: 250 diff changeset	208	}, {
163b59b3e50b update writable demo and read me. cavaliet parents: 250 diff changeset	209	"uri": "subject",
163b59b3e50b update writable demo and read me. cavaliet parents: 250 diff changeset	210	"label": "has subject"
163b59b3e50b update writable demo and read me. cavaliet parents: 250 diff changeset	211	}
163b59b3e50b update writable demo and read me. cavaliet parents: 250 diff changeset	212	]
163b59b3e50b update writable demo and read me. cavaliet parents: 250 diff changeset	213	}, {
163b59b3e50b update writable demo and read me. cavaliet parents: 250 diff changeset	214	"label": "SKOS Semantic relations",
163b59b3e50b update writable demo and read me. cavaliet parents: 250 diff changeset	215	"base-uri": "http://www.w3.org/2004/02/skos/core#",
163b59b3e50b update writable demo and read me. cavaliet parents: 250 diff changeset	216	"properties": [
163b59b3e50b update writable demo and read me. cavaliet parents: 250 diff changeset	217	{
163b59b3e50b update writable demo and read me. cavaliet parents: 250 diff changeset	218	"uri": "broader",
163b59b3e50b update writable demo and read me. cavaliet parents: 250 diff changeset	219	"label": "has broader"
163b59b3e50b update writable demo and read me. cavaliet parents: 250 diff changeset	220	}, {
163b59b3e50b update writable demo and read me. cavaliet parents: 250 diff changeset	221	"uri": "narrower",
163b59b3e50b update writable demo and read me. cavaliet parents: 250 diff changeset	222	"label": "has narrower"
163b59b3e50b update writable demo and read me. cavaliet parents: 250 diff changeset	223	}, {
163b59b3e50b update writable demo and read me. cavaliet parents: 250 diff changeset	224	"uri": "related",
163b59b3e50b update writable demo and read me. cavaliet parents: 250 diff changeset	225	"label": "has related"
163b59b3e50b update writable demo and read me. cavaliet parents: 250 diff changeset	226	}
163b59b3e50b update writable demo and read me. cavaliet parents: 250 diff changeset	227	]
163b59b3e50b update writable demo and read me. cavaliet parents: 250 diff changeset	228	}
163b59b3e50b update writable demo and read me. cavaliet parents: 250 diff changeset	229	]
249 3d8937fa93a8 read me dans clearer test pages cavaliet parents: diff changeset	230
3d8937fa93a8 read me dans clearer test pages cavaliet parents: diff changeset	231
3d8937fa93a8 read me dans clearer test pages cavaliet parents: diff changeset	232
251 163b59b3e50b update writable demo and read me. cavaliet parents: 250 diff changeset	233	Finally, here is an example of full configuration :
249 3d8937fa93a8 read me dans clearer test pages cavaliet parents: diff changeset	234
251 163b59b3e50b update writable demo and read me. cavaliet parents: 250 diff changeset	235	<script type="text/javascript">
163b59b3e50b update writable demo and read me. cavaliet parents: 250 diff changeset	236	var _renkan;
163b59b3e50b update writable demo and read me. cavaliet parents: 250 diff changeset	237	$(function() {
163b59b3e50b update writable demo and read me. cavaliet parents: 250 diff changeset	238	_renkan = new Rkns.Renkan({
163b59b3e50b update writable demo and read me. cavaliet parents: 250 diff changeset	239	search: [
163b59b3e50b update writable demo and read me. cavaliet parents: 250 diff changeset	240	{
163b59b3e50b update writable demo and read me. cavaliet parents: 250 diff changeset	241	type: "Ldt"
163b59b3e50b update writable demo and read me. cavaliet parents: 250 diff changeset	242	},
163b59b3e50b update writable demo and read me. cavaliet parents: 250 diff changeset	243	{
163b59b3e50b update writable demo and read me. cavaliet parents: 250 diff changeset	244	type: "Wikipedia",
163b59b3e50b update writable demo and read me. cavaliet parents: 250 diff changeset	245	lang: "fr"
163b59b3e50b update writable demo and read me. cavaliet parents: 250 diff changeset	246	},
163b59b3e50b update writable demo and read me. cavaliet parents: 250 diff changeset	247	{
163b59b3e50b update writable demo and read me. cavaliet parents: 250 diff changeset	248	type: "Wikipedia",
163b59b3e50b update writable demo and read me. cavaliet parents: 250 diff changeset	249	lang: "ja"
163b59b3e50b update writable demo and read me. cavaliet parents: 250 diff changeset	250	}
163b59b3e50b update writable demo and read me. cavaliet parents: 250 diff changeset	251	],
163b59b3e50b update writable demo and read me. cavaliet parents: 250 diff changeset	252	bins: [
163b59b3e50b update writable demo and read me. cavaliet parents: 250 diff changeset	253	{
163b59b3e50b update writable demo and read me. cavaliet parents: 250 diff changeset	254	title: "Projet Lignes de Temps",
163b59b3e50b update writable demo and read me. cavaliet parents: 250 diff changeset	255	type: "Ldt",
163b59b3e50b update writable demo and read me. cavaliet parents: 250 diff changeset	256	ldt_type: "Project",
163b59b3e50b update writable demo and read me. cavaliet parents: 250 diff changeset	257	project_id: "6af4019c-8283-11e2-9678-00145ea4a2be",
163b59b3e50b update writable demo and read me. cavaliet parents: 250 diff changeset	258	ldt_platform: "http://ldt.iri.centrepompidou.fr/"
163b59b3e50b update writable demo and read me. cavaliet parents: 250 diff changeset	259	},
163b59b3e50b update writable demo and read me. cavaliet parents: 250 diff changeset	260	{
163b59b3e50b update writable demo and read me. cavaliet parents: 250 diff changeset	261	type: "ResourceList",
163b59b3e50b update writable demo and read me. cavaliet parents: 250 diff changeset	262	title: "Ressources",
163b59b3e50b update writable demo and read me. cavaliet parents: 250 diff changeset	263	list: [
163b59b3e50b update writable demo and read me. cavaliet parents: 250 diff changeset	264	{
163b59b3e50b update writable demo and read me. cavaliet parents: 250 diff changeset	265	url: "http://www.google.com/",
163b59b3e50b update writable demo and read me. cavaliet parents: 250 diff changeset	266	title: "Google",
163b59b3e50b update writable demo and read me. cavaliet parents: 250 diff changeset	267	description: "Search engine",
163b59b3e50b update writable demo and read me. cavaliet parents: 250 diff changeset	268	image: "http://www.google.fr/images/srpr/logo4w.png"
163b59b3e50b update writable demo and read me. cavaliet parents: 250 diff changeset	269	},
163b59b3e50b update writable demo and read me. cavaliet parents: 250 diff changeset	270	"Polemic Tweet http://www.polemictweet.com",
163b59b3e50b update writable demo and read me. cavaliet parents: 250 diff changeset	271	"Twitter http://www.twitter.com/"
163b59b3e50b update writable demo and read me. cavaliet parents: 250 diff changeset	272	]
163b59b3e50b update writable demo and read me. cavaliet parents: 250 diff changeset	273	}
163b59b3e50b update writable demo and read me. cavaliet parents: 250 diff changeset	274	],
163b59b3e50b update writable demo and read me. cavaliet parents: 250 diff changeset	275	property_files: [ "data/properties.json" ],
163b59b3e50b update writable demo and read me. cavaliet parents: 250 diff changeset	276	node_fill_color: false,
163b59b3e50b update writable demo and read me. cavaliet parents: 250 diff changeset	277	language: "fr"
163b59b3e50b update writable demo and read me. cavaliet parents: 250 diff changeset	278	});
163b59b3e50b update writable demo and read me. cavaliet parents: 250 diff changeset	279	Rkns.jsonIO(_renkan, {
163b59b3e50b update writable demo and read me. cavaliet parents: 250 diff changeset	280	url: "data/simple-persist.php"
163b59b3e50b update writable demo and read me. cavaliet parents: 250 diff changeset	281	});
163b59b3e50b update writable demo and read me. cavaliet parents: 250 diff changeset	282	});
253 9851e84a0b37 update readme cavaliet parents: 252 diff changeset	283	</script>
9851e84a0b37 update readme cavaliet parents: 252 diff changeset	284
264 cc1b3aa8cada drop handler and enhancer functions, and read me explains this. cavaliet parents: 253 diff changeset	285
cc1b3aa8cada drop handler and enhancer functions, and read me explains this. cavaliet parents: 253 diff changeset	286	## Drop management
cc1b3aa8cada drop handler and enhancer functions, and read me explains this. cavaliet parents: 253 diff changeset	287
cc1b3aa8cada drop handler and enhancer functions, and read me explains this. cavaliet parents: 253 diff changeset	288	You can override, partially or totally, the function that handle the drop event from an other web page.
cc1b3aa8cada drop handler and enhancer functions, and read me explains this. cavaliet parents: 253 diff changeset	289	The current function catches drops from google results page, tweets, links, images and other things like svg paths.
cc1b3aa8cada drop handler and enhancer functions, and read me explains this. cavaliet parents: 253 diff changeset	290	If you want to override totally the handler function, you can define a drop\_handler function that receives a \_data object
398 57f8d344fde9 Correct button shift on hover that appeared after paperjs v 0.9.15 ymh <ymh.work@gmail.com> parents: 265 diff changeset	291	and returns a node object. A node object has title, description, image and uri properties. The \_data object is received from the
264 cc1b3aa8cada drop handler and enhancer functions, and read me explains this. cavaliet parents: 253 diff changeset	292	browser's drop event. Here is an example of drop\_handler function :
cc1b3aa8cada drop handler and enhancer functions, and read me explains this. cavaliet parents: 253 diff changeset	293
cc1b3aa8cada drop handler and enhancer functions, and read me explains this. cavaliet parents: 253 diff changeset	294	_renkan = new Rkns.Renkan({
cc1b3aa8cada drop handler and enhancer functions, and read me explains this. cavaliet parents: 253 diff changeset	295	...
cc1b3aa8cada drop handler and enhancer functions, and read me explains this. cavaliet parents: 253 diff changeset	296	drop_handler: function(_data){
cc1b3aa8cada drop handler and enhancer functions, and read me explains this. cavaliet parents: 253 diff changeset	297	var newNode = {};
cc1b3aa8cada drop handler and enhancer functions, and read me explains this. cavaliet parents: 253 diff changeset	298	newNode.title = "Overridden title";
cc1b3aa8cada drop handler and enhancer functions, and read me explains this. cavaliet parents: 253 diff changeset	299	newNode.description = "Overridden description " + _data["text/plain"];
cc1b3aa8cada drop handler and enhancer functions, and read me explains this. cavaliet parents: 253 diff changeset	300	return newNode;
cc1b3aa8cada drop handler and enhancer functions, and read me explains this. cavaliet parents: 253 diff changeset	301	}
cc1b3aa8cada drop handler and enhancer functions, and read me explains this. cavaliet parents: 253 diff changeset	302	});
cc1b3aa8cada drop handler and enhancer functions, and read me explains this. cavaliet parents: 253 diff changeset	303
cc1b3aa8cada drop handler and enhancer functions, and read me explains this. cavaliet parents: 253 diff changeset	304
398 57f8d344fde9 Correct button shift on hover that appeared after paperjs v 0.9.15 ymh <ymh.work@gmail.com> parents: 265 diff changeset	305	You can also define a drop\_enhancer function that receives the already formed node object and \_data object. This function has to
264 cc1b3aa8cada drop handler and enhancer functions, and read me explains this. cavaliet parents: 253 diff changeset	306	return the overriden node object. Here is an example of drop\_enhancer function :
cc1b3aa8cada drop handler and enhancer functions, and read me explains this. cavaliet parents: 253 diff changeset	307
cc1b3aa8cada drop handler and enhancer functions, and read me explains this. cavaliet parents: 253 diff changeset	308	_renkan = new Rkns.Renkan({
cc1b3aa8cada drop handler and enhancer functions, and read me explains this. cavaliet parents: 253 diff changeset	309	...
cc1b3aa8cada drop handler and enhancer functions, and read me explains this. cavaliet parents: 253 diff changeset	310	drop_enhancer: function(newNode, _data){
265 2a93b8166531 small read me change cavaliet parents: 264 diff changeset	311	newNode.title = "Prefixed title : " + newNode.title;
264 cc1b3aa8cada drop handler and enhancer functions, and read me explains this. cavaliet parents: 253 diff changeset	312	return newNode;
cc1b3aa8cada drop handler and enhancer functions, and read me explains this. cavaliet parents: 253 diff changeset	313	}
cc1b3aa8cada drop handler and enhancer functions, and read me explains this. cavaliet parents: 253 diff changeset	314	});
cc1b3aa8cada drop handler and enhancer functions, and read me explains this. cavaliet parents: 253 diff changeset	315
431 1387779706e5 update README file to reference the task available in grunt rougeronj parents: 403 diff changeset	316	## Dev
264 cc1b3aa8cada drop handler and enhancer functions, and read me explains this. cavaliet parents: 253 diff changeset	317
431 1387779706e5 update README file to reference the task available in grunt rougeronj parents: 403 diff changeset	318	We offer a environment to develop without having to build all the project manually after each change. We define few grunt task to help us
1387779706e5 update README file to reference the task available in grunt rougeronj parents: 403 diff changeset	319	making it easier. You can launch them by running './node_modules/.bin/grunt task'.
1387779706e5 update README file to reference the task available in grunt rougeronj parents: 403 diff changeset	320	* 'dev': will build th project but let the temporary file like templates.js to let us test the application through the test files
1387779706e5 update README file to reference the task available in grunt rougeronj parents: 403 diff changeset	321	(see 'Tests' part below). Then it will launch a small testing server and watch the modifications of the js/css/html to build the project
1387779706e5 update README file to reference the task available in grunt rougeronj parents: 403 diff changeset	322	again in case of any change.
1387779706e5 update README file to reference the task available in grunt rougeronj parents: 403 diff changeset	323
1387779706e5 update README file to reference the task available in grunt rougeronj parents: 403 diff changeset	324	Tasks for production :
1387779706e5 update README file to reference the task available in grunt rougeronj parents: 403 diff changeset	325	* 'default': will build the project and clean the temporary files (like templates.js) used during development and building.
1387779706e5 update README file to reference the task available in grunt rougeronj parents: 403 diff changeset	326	* 'copy-server': will copy the built project to the server side.
1387779706e5 update README file to reference the task available in grunt rougeronj parents: 403 diff changeset	327
253 9851e84a0b37 update readme cavaliet parents: 252 diff changeset	328	## Tests
9851e84a0b37 update readme cavaliet parents: 252 diff changeset	329
9851e84a0b37 update readme cavaliet parents: 252 diff changeset	330	Because of a simple php file enabling persistent connection, you can not test the writables examples by only opening them in your browser.
9851e84a0b37 update readme cavaliet parents: 252 diff changeset	331	A url like file:///path/to/folder/test-writable-\*.html will not work.
9851e84a0b37 update readme cavaliet parents: 252 diff changeset	332	You need to run a localhost server that executes php and go to a url like http://localhost/renkan/test/test-writable-\*.html.
9851e84a0b37 update readme cavaliet parents: 252 diff changeset	333
9851e84a0b37 update readme cavaliet parents: 252 diff changeset	334	For read only examples, it appears that for security reasons urls like file:///path/to/folder/test-readonly-\*.html only work on Firefox.
9851e84a0b37 update readme cavaliet parents: 252 diff changeset	335	To see those examples with other browsers, you also need to run a localhost server and go to a url like http://localhost/renkan/test/test-readonly-\*.html.

author	rougeronj
	Fri, 24 Apr 2015 18:01:45 +0200
changeset 431	1387779706e5
parent 403	96781c1a8bbe
child 439	741fd2028c99
permissions	-rw-r--r--