update writable demo and read me.
--- a/client/README.md Fri Feb 07 10:58:26 2014 +0100
+++ b/client/README.md Fri Feb 07 12:50:35 2014 +0100
@@ -27,7 +27,8 @@
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.
-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.
+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.
+It is built with the script available in sbin/build/compil.sh.
### In body 100%
@@ -113,13 +114,169 @@
</script>
+## Search and bins
+
+On the right of your renkan interface, you can add some search engine and data bins.
+
+Search engine can be the current [IRI's Lignes de temps platform](http://ldt.iri.centrepompidou.fr/) and wikipedia in any available language.
+Here is an example of configuration :
+
+ _renkan = new Rkns.Renkan({
+ search: [
+ {
+ type: "Ldt"
+ },
+ {
+ type: "Wikipedia",
+ lang: "fr"
+ },
+ {
+ type: "Wikipedia",
+ lang: "ja"
+ }
+ ]
+ });
+ Rkns.jsonIO(_renkan, {
+ url: "data/simple-persist.php"
+ });
+
+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.
+Resources can be simple texts, links or objects with title, description, url and image. Here is an example of configuration :
+
+ _renkan = new Rkns.Renkan({
+ search: [
+ ...
+ ],
+ bins: [
+ {
+ title: "To be or not to be on Lignes de Temps",
+ type: "Ldt",
+ ldt_type: "Project",
+ project_id: "6af4019c-8283-11e2-9678-00145ea4a2be",
+ ldt_platform: "http://ldt.iri.centrepompidou.fr/"
+ },
+ {
+ type: "ResourceList",
+ title: "Ressources",
+ list: [
+ {
+ url: "http://www.google.com/",
+ title: "Google",
+ description: "Search engine",
+ image: "http://www.google.fr/images/srpr/logo4w.png"
+ },
+ "Polemic Tweet http://www.polemictweet.com",
+ "Twitter http://www.twitter.com/"
+ ]
+ }
+ ]
+ });
+ Rkns.jsonIO(_renkan, {
+ url: "data/simple-persist.php"
+ });
-## Data bins
+## More configuration
+
+You can configure several things :
+* the language of your interface, english (default) or french
+* you can fill your nodes with black color instead of transparent.
+* thanks to an external file, you can define properties for links between node.
+
+
+ _renkan = new Rkns.Renkan({
+ ...
+ property_files: [ "data/properties.json" ],
+ node_fill_color: true,
+ language: "fr"
+ });
+
+Here is an example of properties file :
-More to come...
+ [
+ {
+ "label": "Dublin Core Metadata",
+ "base-uri": "http://purl.org/dc/elements/1.1/",
+ "properties": [
+ {
+ "uri": "creator",
+ "label": "created by"
+ }, {
+ "uri": "date",
+ "label": "has date"
+ }, {
+ "uri": "subject",
+ "label": "has subject"
+ }
+ ]
+ }, {
+ "label": "SKOS Semantic relations",
+ "base-uri": "http://www.w3.org/2004/02/skos/core#",
+ "properties": [
+ {
+ "uri": "broader",
+ "label": "has broader"
+ }, {
+ "uri": "narrower",
+ "label": "has narrower"
+ }, {
+ "uri": "related",
+ "label": "has related"
+ }
+ ]
+ }
+ ]
+Finally, here is an example of full configuration :
-
+ <script type="text/javascript">
+ var _renkan;
+ $(function() {
+ _renkan = new Rkns.Renkan({
+ search: [
+ {
+ type: "Ldt"
+ },
+ {
+ type: "Wikipedia",
+ lang: "fr"
+ },
+ {
+ type: "Wikipedia",
+ lang: "ja"
+ }
+ ],
+ bins: [
+ {
+ title: "Projet Lignes de Temps",
+ type: "Ldt",
+ ldt_type: "Project",
+ project_id: "6af4019c-8283-11e2-9678-00145ea4a2be",
+ ldt_platform: "http://ldt.iri.centrepompidou.fr/"
+ },
+ {
+ type: "ResourceList",
+ title: "Ressources",
+ list: [
+ {
+ url: "http://www.google.com/",
+ title: "Google",
+ description: "Search engine",
+ image: "http://www.google.fr/images/srpr/logo4w.png"
+ },
+ "Polemic Tweet http://www.polemictweet.com",
+ "Twitter http://www.twitter.com/"
+ ]
+ }
+ ],
+ property_files: [ "data/properties.json" ],
+ node_fill_color: false,
+ language: "fr"
+ });
+ Rkns.jsonIO(_renkan, {
+ url: "data/simple-persist.php"
+ });
+ });
+ </script>
\ No newline at end of file
--- a/client/test-readonly-body.html Fri Feb 07 10:58:26 2014 +0100
+++ b/client/test-readonly-body.html Fri Feb 07 12:50:35 2014 +0100
@@ -18,7 +18,7 @@
$(function() {
_renkan = new Rkns.Renkan({
editor_mode: false,
- show_bins: false,
+ show_bins: false
});
Rkns.jsonIO(_renkan, {
url: "data/example-cinema.json"
--- a/client/test-readonly-div.html Fri Feb 07 10:58:26 2014 +0100
+++ b/client/test-readonly-div.html Fri Feb 07 12:50:35 2014 +0100
@@ -18,7 +18,7 @@
$(function() {
_renkan = new Rkns.Renkan({
editor_mode: false,
- show_bins: false,
+ show_bins: false
});
Rkns.jsonIO(_renkan, {
url: "data/example-cinema.json"
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/client/test-writable-bins.html Fri Feb 07 12:50:35 2014 +0100
@@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<html lang="fr">
+ <head>
+ <meta charset="utf-8" />
+ <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
+ <title>RENKAN test in read-only mode : body 100%</title>
+ <meta name="description" content="" />
+ <meta name="author" content="Institut de Recherche et d'Innovation" />
+ <script src="lib/jquery.min.js"></script>
+ <script src="lib/jquery.mousewheel.min.js"></script>
+ <script src="lib/underscore-min.js"></script>
+ <script src="lib/backbone.js"></script>
+ <script src="lib/backbone-relational.js"></script>
+ <script src="lib/paper.js"></script>
+ <script src="../build/renkan.js"></script>
+ <script type="text/javascript">
+ var _renkan;
+ $(function() {
+ _renkan = new Rkns.Renkan({
+ search: [
+ {
+ type: "Ldt"
+ },
+ {
+ type: "Wikipedia",
+ lang: "fr"
+ },
+ {
+ type: "Wikipedia",
+ lang: "ja"
+ }
+ ],
+ bins: [
+ {
+ title: "Projet Lignes de Temps",
+ type: "Ldt",
+ ldt_type: "Project",
+ project_id: "6af4019c-8283-11e2-9678-00145ea4a2be",
+ ldt_platform: "http://ldt.iri.centrepompidou.fr/"
+ },
+ {
+ type: "ResourceList",
+ title: "Ressources",
+ list: [
+ {
+ url: "http://www.google.com/",
+ title: "Google",
+ description: "Search engine",
+ image: "http://www.google.fr/images/srpr/logo4w.png"
+ },
+ "Polemic Tweet http://www.polemictweet.com",
+ "Twitter http://www.twitter.com/"
+ ]
+ }
+ ],
+ /*property_files: [ "data/properties.json" ],
+ node_fill_color: false*/
+ language: "fr"
+ });
+ Rkns.jsonIO(_renkan, {
+ url: "data/simple-persist.php"
+ });
+ });
+ </script>
+ <link rel="stylesheet" href="css/renkan.css" />
+ <style type="text/css">
+ </style>
+ </head>
+
+ <body>
+ <div id="renkan"></div>
+ </body>
+</html>