moved options to defaults.js and improved read-only switching
authorveltr
Tue, 26 Mar 2013 19:12:05 +0100
changeset 114 110f99eb417e
parent 113 fac7354c55d2
child 115 e905eb562074
moved options to defaults.js and improved read-only switching
client/js/defaults.js
client/js/full-json.js
client/js/ldtjson-bin.js
client/js/list-bin.js
client/js/main.js
client/js/paper-renderer.js
client/js/wikipedia-bin.js
client/publish-test.html
client/render-test.html
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/client/js/defaults.js	Tue Mar 26 19:12:05 2013 +0100
@@ -0,0 +1,13 @@
+Rkns.defaults = {
+    language: (navigator.language || navigator.userLanguage || "en"),
+    container: "renkan",
+    search: [],
+   	bins: [],
+	static_url: "",
+	show_bins: true,
+	properties: [],
+	clip_images: true,
+	editor_mode: true,
+	read_only: false,
+    snapshot_mode: false
+}
--- a/client/js/full-json.js	Tue Mar 26 16:14:19 2013 +0100
+++ b/client/js/full-json.js	Tue Mar 26 19:12:05 2013 +0100
@@ -10,32 +10,33 @@
             _proj.set(_data, {validate: true});
         });
     }
-    if (!_renkan.read_only) {
-        var _save = function() {
-            var _data = _proj.toJSON();
-            Rkns.$.ajax({
-                type: _opts.http_method,
-                url: _opts.url,
-                contentType: "application/json",
-                data: JSON.stringify(_data),
-                success: function(data, textStatus, jqXHR) {
-                }
-            });
-            
+    var _save = function() {
+        var _data = _proj.toJSON();
+        if (!_renkan.read_only) {
+        	Rkns.$.ajax({
+	            type: _opts.http_method,
+	            url: _opts.url,
+	            contentType: "application/json",
+	            data: JSON.stringify(_data),
+	            success: function(data, textStatus, jqXHR) {
+	            }
+	        });
         }
-        var _thrSave = Rkns._.throttle(
-            function() {
-                setTimeout(_save, 100)
-            }, 1000);
-        _proj.on("add:nodes add:edges add:users", function(_model) {
-            _model.on("change remove", function(_model) {
-                _thrSave();
-            });
+        
+    }
+    var _thrSave = Rkns._.throttle(
+        function() {
+            setTimeout(_save, 100)
+        }, 1000);
+    _proj.on("add:nodes add:edges add:users", function(_model) {
+        _model.on("change remove", function(_model) {
             _thrSave();
         });
-        _proj.on("change", function() {
-            _thrSave();
-        });
-    }
+        _thrSave();
+    });
+    _proj.on("change", function() {
+        _thrSave();
+    });
+        
     _load();
 }
--- a/client/js/ldtjson-bin.js	Tue Mar 26 16:14:19 2013 +0100
+++ b/client/js/ldtjson-bin.js	Tue Mar 26 19:12:05 2013 +0100
@@ -76,7 +76,7 @@
             title: _title,
             htitle: highlight(_title),
             encodedtitle : encodeURIComponent(_title),
-            static_url: _this.renkan.static_url
+            static_url: _this.renkan.options.static_url
         })
     });
     _html += '<li><h3>Annotations</h3></li>';
@@ -91,7 +91,7 @@
             _img = (
                 (_annotation.content && _annotation.content.img && _annotation.content.img.src)
                 ? _annotation.content.img.src
-                : ( _duration ? _this.renkan.static_url+"img/ldt-segment.png" : _this.renkan.static_url+"img/ldt-point.png" )
+                : ( _duration ? _this.renkan.options.static_url+"img/ldt-segment.png" : _this.renkan.options.static_url+"img/ldt-point.png" )
             );
         _html += _this.annotationTemplate({
             ldt_platform: _this.ldt_platform,
@@ -105,7 +105,7 @@
             mediaid: _annotation.media,
             annotationid: _annotation.id,
             image: _img,
-            static_url: _this.renkan.static_url
+            static_url: _this.renkan.options.static_url
         });
     });
     
@@ -220,8 +220,8 @@
             _end = + _segment.duration + _begin
             _img = (
                 _duration
-                ? _this.renkan.static_url + "img/ldt-segment.png"
-                : _this.renkan.static_url + "img/ldt-point.png"
+                ? _this.renkan.options.static_url + "img/ldt-segment.png"
+                : _this.renkan.options.static_url + "img/ldt-point.png"
             );
         _html += _this.segmentTemplate({
             ldt_platform: _this.ldt_platform,
--- a/client/js/list-bin.js	Tue Mar 26 16:14:19 2013 +0100
+++ b/client/js/list-bin.js	Tue Mar 26 19:12:05 2013 +0100
@@ -70,7 +70,7 @@
             image: image,
             description: description,
             hdescription: highlight(description),
-            static_url: _this.renkan.static_url
+            static_url: _this.renkan.options.static_url
         });
     });
     _this.main_$.html(_html);
--- a/client/js/main.js	Tue Mar 26 16:14:19 2013 +0100
+++ b/client/js/main.js	Tue Mar 26 19:12:05 2013 +0100
@@ -98,53 +98,25 @@
 Rkns.Renkan = function(_opts) {
     var _this = this;
     
-    if (typeof _opts.language !== "string" || typeof Rkns.i18n[_opts.language] == "undefined") {
-        _opts.language = (navigator.language || navigator.userLanguage || "en");
-    }
-    if (typeof _opts.container !== "string") {
-        _opts.container = "renkan";
-    }
-    if (typeof _opts.search !== "object" || !_opts.search) {
-        _opts.search = [];
-    }
-    if (typeof _opts.bins !== "object" || !_opts.bins) {
-        _opts.bins = [];
-    }
-    if (typeof _opts.static_url !== "string") {
-        _opts.static_url = "";
-    }
-    if (typeof _opts.show_bins !== "boolean") {
-        _opts.show_bins = !!_opts.search.length || !!_opts.bins.length;
-    }
-    if (typeof _opts.properties !== "object") {
-    	_opts.properties = [];
-    }
-    if (typeof _opts.property_files === "object") {
-    	Rkns._(_opts.property_files).each(function(f) {
-    		Rkns.$.getJSON(f, function(data) {
-    			_this.properties = _this.properties.concat(data);
-    		});
-    	});
-    }
-    if (typeof _opts.clip_images === "undefined") {
-    	_opts.clip_images = true;
-    }
+    this.options = _.defaults(_opts, Rkns.defaults);
+        
+	Rkns._(this.options.property_files).each(function(f) {
+		Rkns.$.getJSON(f, function(data) {
+			_this.options.properties = _this.options.properties.concat(data);
+		});
+	});
+    
+    this.read_only = this.options.read_only || !this.options.editor_mode;
+
     this.project = new Rkns.Models.Project();
-    this.language = _opts.language;
-    this.static_url = _opts.static_url;
-    this.show_bins = _opts.show_bins;
-    this.properties = _opts.properties;
-    this.clip_images = _opts.clip_images;
-    this.read_only = _opts.read_only || false;
-    this.snapshot_mode = _opts.snapshot_mode || false;
     
     this.translate = function(_text) {
-    	return (Rkns.i18n[_opts.language] || Rkns.i18n[_opts.language.substr(0,2)] || {})[_text] || _text;
+    	return (Rkns.i18n[_this.options.language] || Rkns.i18n[_this.options.language.substr(0,2)] || {})[_text] || _text;
     }
-    if (typeof _opts.user_id !== "undefined") {
-        this.current_user = _opts.user_id;
+    if (typeof this.options.user_id !== "undefined") {
+        this.current_user = this.options.user_id;
     }
-    this.$ = Rkns.$("#" + _opts.container);
+    this.$ = Rkns.$("#" + this.options.container);
     this.$
         .addClass("Rk-Main")
         .html(this.template(this));
@@ -154,14 +126,14 @@
 
     this.current_user_list = new Rkns.Models.UsersList();
     
-    if (!_opts.search.length) {
+    if (!this.options.search.length) {
         this.$.find(".Rk-Web-Search-Form").detach();
     } else {
         var _tmpl = Rkns._.template('<li class="<%= className %>" data-key="<%= key %>"><%= title %></li>'),
             _select = this.$.find(".Rk-Search-List"),
             _input = this.$.find(".Rk-Web-Search-Input")
             _form = this.$.find(".Rk-Web-Search-Form");
-        Rkns._(_opts.search).each(function(_search, _key) {
+        Rkns._(this.options.search).each(function(_search, _key) {
         	if (Rkns[_search.type] && Rkns[_search.type].Search) {
         		_this.search_engines.push(new Rkns[_search.type].Search(_this, _search));
         	}
@@ -195,7 +167,7 @@
         );
         this.setSearchEngine(0);
     }
-    Rkns._(_opts.bins).each(function(_bin) {
+    Rkns._(this.options.bins).each(function(_bin) {
     	if (Rkns[_bin.type] && Rkns[_bin.type].Bin) {
     		_this.tabs.push(new Rkns[_bin.type].Bin(_this, _bin));
     	}
@@ -251,13 +223,13 @@
 }
 
 Rkns.Renkan.prototype.template = Rkns._.template(
-    '<% if (show_bins) { %><div class="Rk-Bins"><div class="Rk-Bins-Head"><h2 class="Rk-Bins-Title"><%- translate("Select contents:")%></h2>'
+    '<% if (options.show_bins) { %><div class="Rk-Bins"><div class="Rk-Bins-Head"><h2 class="Rk-Bins-Title"><%- translate("Select contents:")%></h2>'
     + '<form class="Rk-Web-Search-Form Rk-Search-Form"><input class="Rk-Web-Search-Input Rk-Search-Input" type="search" placeholder="<%- translate("Search the Web") %>" />'
     + '<div class="Rk-Search-Select"><div class="Rk-Search-Current"></div><ul class="Rk-Search-List"></ul></div>'
     + '<input type="submit" value="" class="Rk-Web-Search-Submit Rk-Search-Submit" /></form>'
     + '<form class="Rk-Bins-Search-Form Rk-Search-Form"><input class="Rk-Bins-Search-Input Rk-Search-Input" type="search" placeholder="<%- translate("Search in Bins") %>" />'
     + '<input type="submit" value="" class="Rk-Bins-Search-Submit Rk-Search-Submit" /></form></div>'
-    + '<ul class="Rk-Bin-List"></ul></div><% } %><div class="Rk-Render Rk-Render-<% if (show_bins) { %>Panel<% } else { %>Full<% } %>"></div>'
+    + '<ul class="Rk-Bin-List"></ul></div><% } %><div class="Rk-Render Rk-Render-<% if (options.show_bins) { %>Panel<% } else { %>Full<% } %>"></div>'
 );
 
 Rkns.Renkan.prototype.onStatusChange = function() {
--- a/client/js/paper-renderer.js	Tue Mar 26 16:14:19 2013 +0100
+++ b/client/js/paper-renderer.js	Tue Mar 26 19:12:05 2013 +0100
@@ -207,7 +207,9 @@
             }
             this._removeBinding = function() {
                 _renderer.removeRepresentation(_this);
-                _renderer.redraw();
+                _(function() {
+                	_renderer.redraw()
+            	}).defer();
             }
             this.model.on("change", this._changeBinding );
             this.model.on("remove", this._removeBinding );
@@ -256,11 +258,7 @@
         fontSize: Rkns.Renderer._NODE_FONT_SIZE,
         fillColor: 'black'
     };
-    if (this.renderer.renkan.read_only) {
-        this.edit_button = new Rkns.Renderer._BaseRepresentation(this.renderer, null);
-        this.remove_button = new Rkns.Renderer._BaseRepresentation(this.renderer, null);
-        this.link_button = new Rkns.Renderer._BaseRepresentation(this.renderer, null);
-    } else {
+    if (this.renderer.renkan.options.editor_mode) {
         this.edit_button = new Rkns.Renderer.NodeEditButton(this.renderer, null);
         this.edit_button.node_representation = this;
         this.remove_button = new Rkns.Renderer.NodeRemoveButton(this.renderer, null);
@@ -284,7 +282,7 @@
     }
     this.circle_radius = _baseRadius * this.renderer.scale;
     if (this.last_circle_radius !== this.circle_radius) {
-    	if (!this.renderer.renkan.read_only) {
+    	if (this.renderer.renkan.options.editor_mode) {
 	    	this.edit_button.setSectorSize();
 	    	this.remove_button.setSectorSize();
 	    	this.link_button.setSectorSize();
@@ -310,9 +308,11 @@
     this.title.position = this.paper_coords.add([0, this.circle_radius + 1.5 *Rkns.Renderer._NODE_FONT_SIZE]);
     var _color = this.model.get("color") || (this.model.get("created_by") || Rkns.Renderer._USER_PLACEHOLDER).get("color");
     this.circle.strokeColor = _color;
-    this.edit_button.moveTo(this.paper_coords);
-    this.remove_button.moveTo(this.paper_coords);
-    this.link_button.moveTo(this.paper_coords);
+    if (this.renderer.renkan.options.editor_mode) {
+    	this.edit_button.moveTo(this.paper_coords);
+	    this.remove_button.moveTo(this.paper_coords);
+	    this.link_button.moveTo(this.paper_coords);
+    }
     var _img = this.model.get("image");
     if (_img && _img !== this.img) {
         var _image = new Image(),
@@ -324,7 +324,7 @@
             _this.renderer.node_layer.activate();
             var _ratio = Math.min(2 / _image.width, 2 / _image.height );
             var _raster = new paper.Raster(_image);
-            if (_this.renderer.renkan.clip_images) {
+            if (_this.renderer.renkan.options.clip_images) {
 	            var _clip = new paper.Path.Circle([0, 0], 1);
 	            _raster.scale(_ratio);
 	            _this.node_image = new paper.Group(_clip, _raster);
@@ -367,10 +367,12 @@
 }
 
 Rkns.Renderer.Node.prototype.paperShift = function(_delta) {
-	if (!this.renderer.renkan.read_only) {
-		this.is_dragging = true;
-		this.paper_coords = this.paper_coords.add(_delta);
-    	this.redraw();
+	if (this.renderer.renkan.options.editor_mode) {
+		if (!this.renderer.renkan.read_only) {
+			this.is_dragging = true;
+			this.paper_coords = this.paper_coords.add(_delta);
+	    	this.redraw();
+    	}
 	} else {
 		this.renderer.paperShift(_delta);
 	}
@@ -385,9 +387,11 @@
 
 Rkns.Renderer.Node.prototype.select = function() {
     this.circle.strokeWidth = 4;
-    this.edit_button.show();
-    this.remove_button.show();
-    this.link_button.show();
+    if (this.renderer.isEditable()) {
+	    this.edit_button.show();
+	    this.remove_button.show();
+	    this.link_button.show();
+    }
     var _uri = this.model.get("uri");
     if (_uri) {
     	Rkns.$('.Rk-Bin-Item').each(function() {
@@ -397,7 +401,7 @@
 	        }
 	    });
     }
-    if (this.renderer.renkan.read_only) {
+    if (!this.renderer.renkan.options.editor_mode) {
         this.openEditor();
     }
     this.minimap_circle.fillColor = "#ff00fc";
@@ -405,9 +409,11 @@
 
 Rkns.Renderer.Node.prototype.unselect = function(_newTarget) {
     if (!_newTarget || _newTarget.node_representation !== this) {
-        this.edit_button.hide();
-        this.remove_button.hide();
-        this.link_button.hide();
+	    if (this.renderer.renkan.options.editor_mode) {
+	        this.edit_button.hide();
+	        this.remove_button.hide();
+	        this.link_button.hide();
+	   	}
         this.circle.strokeWidth = 2;
         Rkns.$('.Rk-Bin-Item').removeClass("selected");
     	this.minimap_circle.fillColor = this.circle.strokeColor;
@@ -436,17 +442,17 @@
                 y: _coords.y
             }
         };
-    this.model.set(_data);
+    if (this.renderer.isEditable()) {
+    	this.model.set(_data);
+    }
 }
 
 Rkns.Renderer.Node.prototype.mouseup = function(_event) {
-    if (!this.renderer.renkan.read_only) {
-        if (this.renderer.is_dragging) {
-            this.saveCoords();
-        }
-        else {
-            this.openEditor();
-        }
+    if (this.renderer.isEditable() && this.renderer.is_dragging) {
+        this.saveCoords();
+    }
+    else {
+        this.openEditor();
     }
     this.renderer.click_target = null;
     this.renderer.is_dragging = false;
@@ -455,9 +461,11 @@
 
 Rkns.Renderer.Node.prototype.destroy = function(_event) {
     this.super("destroy");
-    this.edit_button.destroy();
-    this.remove_button.destroy();
-    this.link_button.destroy();
+    if (this.renderer.renkan.options.editor_mode) {
+	    this.edit_button.destroy();
+	    this.remove_button.destroy();
+	    this.link_button.destroy();
+    }
     this.circle.remove();
     this.title.remove();
     this.minimap_circle.remove();
@@ -491,10 +499,7 @@
     this.text.paragraphStyle.justification = 'center';
     this.text_angle = 0;
     this.arrow_angle = 0;
-    if (this.renderer.renkan.read_only) {
-        this.edit_button = new Rkns.Renderer._BaseRepresentation(this.renderer, null);
-        this.remove_button = new Rkns.Renderer._BaseRepresentation(this.renderer, null);
-    } else {
+    if (this.renderer.renkan.options.editor_mode) {
         this.edit_button = new Rkns.Renderer.EdgeEditButton(this.renderer, null);
         this.edit_button.edge_representation = this;
         this.remove_button = new Rkns.Renderer.EdgeRemoveButton(this.renderer, null);
@@ -543,8 +548,10 @@
     this.text.content = Rkns.Renderer.Utils.shortenText(_text, Rkns.Renderer._EDGE_MAX_CHAR);
     this.text.position = this.paper_coords.add(_textdelta);
     this.text_angle = _a;
-    this.edit_button.moveTo(this.paper_coords);
-    this.remove_button.moveTo(this.paper_coords);
+    if (this.renderer.renkan.options.editor_mode) {
+	    this.edit_button.moveTo(this.paper_coords);
+	    this.remove_button.moveTo(this.paper_coords);
+    }
 }
 
 Rkns.Renderer.Edge.prototype.openEditor = function() {
@@ -556,17 +563,21 @@
 
 Rkns.Renderer.Edge.prototype.select = function() {
     this.line.strokeWidth = 4;
-    this.edit_button.show();
-    this.remove_button.show();
-    if (this.renderer.renkan.read_only) {
+    if (this.renderer.isEditable()) {
+	    this.edit_button.show();
+	    this.remove_button.show();
+   	}
+    if (!this.renderer.renkan.options.editor_mode) {
         this.openEditor();
     }
 }
 
 Rkns.Renderer.Edge.prototype.unselect = function(_newTarget) {
     if (!_newTarget || _newTarget.edge_representation !== this) {
-        this.edit_button.hide();
-        this.remove_button.hide();
+    	if (this.renderer.renkan.options.editor_mode) {
+	        this.edit_button.hide();
+	        this.remove_button.hide();
+        }
         this.line.strokeWidth = 2;
     }
 }
@@ -585,9 +596,11 @@
 }
 
 Rkns.Renderer.Edge.prototype.paperShift = function(_delta) {
-	if (!this.renderer.renkan.read_only) {
-	    this.from_representation.paperShift(_delta);
-	    this.to_representation.paperShift(_delta);
+	if (this.renderer.renkan.options.editor_mode) {
+		if (!this.renderer.renkan.options.read_only) {
+		    this.from_representation.paperShift(_delta);
+		    this.to_representation.paperShift(_delta);
+	    }
 	} else {
 		this.renderer.paperShift(_delta);
 	}
@@ -598,8 +611,10 @@
     this.line.remove();
     this.arrow.remove();
     this.text.remove();
-    this.edit_button.destroy();
-    this.remove_button.destroy();
+    if (this.renderer.renkan.options.editor_mode) {
+	    this.edit_button.destroy();
+	    this.remove_button.destroy();
+   	}
     var _this = this;
     this.bundle.edges = Rkns._(this.bundle.edges).reject(function(_edge) {
         return _edge === _this;
@@ -639,6 +654,11 @@
 }
 
 Rkns.Renderer.TempEdge.prototype.paperShift = function(_delta) {
+	if (!this.renderer.isEditable()) {
+		this.renderer.removeRepresentation(_this);
+    	paper.view.draw();
+    	return;
+	}
     this.end_pos = this.end_pos.add(_delta);
     var _hitResult = paper.project.hitTest(this.end_pos);
     this.renderer.findTarget(_hitResult);
@@ -658,7 +678,9 @@
                 from: _model.get("_id"),
                 to: _target.model.get("_id")
             };
-            this.project.addEdge(_data);
+            if (this.renderer.isEditable()) {
+            	this.project.addEdge(_data);
+            }
         }
         if (_model === _target.model || (_target.node_representation && _target.node_representation.model === _model)) {
             _endDrag = false;
@@ -726,8 +748,8 @@
 Rkns.Renderer.NodeEditor.prototype.draw = function() {
     var _model = this.node_representation.model,
         _created_by = _model.get("created_by") || Rkns.Renderer._USER_PLACEHOLDER,
-        _template = (this.renderer.renkan.read_only ? this.readOnlyTemplate : this.template),
-        _image_placeholder = this.renderer.renkan.static_url + "img/image-placeholder.png",
+        _template = (this.renderer.isEditable() ? this.template : this.readOnlyTemplate ),
+        _image_placeholder = this.renderer.renkan.options.static_url + "img/image-placeholder.png",
         _size = (_model.get("size") || 0);
     this.editor_$
         .html(_template({
@@ -746,27 +768,35 @@
             translate: this.renderer.renkan.translate
         }));
     this.redraw();
-    var _this = this;
-    this.editor_$.find(".Rk-CloseX").click(function() {
-        _this.renderer.removeRepresentation(_this);
-        paper.view.draw();
-    });
-    if (!this.renderer.renkan.read_only) {
+    var _this = this,
+    	closeEditor = function() {
+    		_this.renderer.removeRepresentation(_this);
+        	paper.view.draw();
+    	}
+    	
+    this.editor_$.find(".Rk-CloseX").click(closeEditor);
+    
+    if (this.renderer.isEditable()) {
     	
     	var onFieldChange = Rkns._(function() {
     		Rkns._(function() {
-	            var _uri = _this.editor_$.find(".Rk-Edit-URI").val(),
-	                _image = _this.editor_$.find(".Rk-Edit-Image").val();
-	            _this.editor_$.find(".Rk-Edit-ImgPreview").attr("src", _image || _image_placeholder);
-	            _this.editor_$.find(".Rk-Edit-Goto").attr("href",_uri);
-	            var _data = {
-	                title: _this.editor_$.find(".Rk-Edit-Title").val(),
-	                description: _this.editor_$.find(".Rk-Edit-Description").val(),
-	                uri: _uri,
-	                image: _image
+	            if (_this.renderer.isEditable()) {
+		            var _uri = _this.editor_$.find(".Rk-Edit-URI").val(),
+		                _image = _this.editor_$.find(".Rk-Edit-Image").val();
+		            _this.editor_$.find(".Rk-Edit-ImgPreview").attr("src", _image || _image_placeholder);
+		            _this.editor_$.find(".Rk-Edit-Goto").attr("href",_uri);
+		            var _data = {
+		                title: _this.editor_$.find(".Rk-Edit-Title").val(),
+		                description: _this.editor_$.find(".Rk-Edit-Description").val(),
+		                uri: _uri,
+		                image: _image
+		            }
+	            	_model.set(_data);
+	            	_this.redraw();
+	            } else {
+	            	closeEditor();
 	            }
-	            _model.set(_data);
-	            _this.redraw();
+	            
     		}).defer();
     	}).throttle(500);
     	
@@ -800,15 +830,23 @@
             function() { _this.editor_$.find(".Rk-Edit-Color").css("background", $(this).attr("data-color")); },
             function() { _this.editor_$.find(".Rk-Edit-Color").css("background", _model.get("color") || (_model.get("created_by") || Rkns.Renderer._USER_PLACEHOLDER).get("color")) }
         ).click(function() {
-            _model.set("color", $(this).attr("data-color"));
-            paper.view.draw();
+            if (_this.renderer.isEditable()) {
+	            _model.set("color", $(this).attr("data-color"));
+				paper.view.draw();
+            } else {
+            	closeEditor();
+            }
         });
         
         function shiftSize(n) {
-        	var _newsize = n+(_model.get("size") || 0);
-        	_this.editor_$.find(".Rk-Edit-Size-Value").text((_newsize > 0 ? "+" : "") + _newsize);
-        	_model.set("size", _newsize);
-			paper.view.draw();
+        	if (_this.renderer.isEditable()) {
+	        	var _newsize = n+(_model.get("size") || 0);
+	        	_this.editor_$.find(".Rk-Edit-Size-Value").text((_newsize > 0 ? "+" : "") + _newsize);
+	        	_model.set("size", _newsize);
+				paper.view.draw();
+			} else {
+				closeEditor();
+			}
         }
         
         this.editor_$.find(".Rk-Edit-Size-Down").click(function() {
@@ -892,7 +930,7 @@
         _from_model = _model.get("from"),
         _to_model = _model.get("to"),
         _created_by = _model.get("created_by") || Rkns.Renderer._USER_PLACEHOLDER,
-        _template = (this.renderer.renkan.read_only ? this.readOnlyTemplate : this.template);
+        _template = (this.renderer.isEditable() ? this.template : this.readOnlyTemplate);
     this.editor_$
         .html(_template({
             edge: {
@@ -909,25 +947,31 @@
                 created_by_title: _created_by.get("title")
             },
             translate: this.renderer.renkan.translate,
-            properties: this.renderer.renkan.properties
+            properties: this.renderer.renkan.options.properties
         }));
     this.redraw();
-    var _this = this;
-    this.editor_$.find(".Rk-CloseX").click(function() {
-        _this.renderer.removeRepresentation(_this);
-        paper.view.draw();
-    });
-    if (!this.renderer.renkan.read_only) {
+    var _this = this,
+    	closeEditor = function() {
+	        _this.renderer.removeRepresentation(_this);
+	        paper.view.draw();
+    	}
+    this.editor_$.find(".Rk-CloseX").click(closeEditor);
+    
+    if (this.renderer.isEditable()) {
     	
     	var onFieldChange = Rkns._(function() {
     		Rkns._(function() {
-    			_this.editor_$.find(".Rk-Edit-Goto").attr("href",_this.editor_$.find(".Rk-Edit-URI").val());
-	            var _data = {
-	                title: _this.editor_$.find(".Rk-Edit-Title").val(),
-	                uri: _this.editor_$.find(".Rk-Edit-URI").val()
-	            }
-	            _model.set(_data);
-	            paper.view.draw();
+    			if (_this.renderer.isEditable()) {
+	    			_this.editor_$.find(".Rk-Edit-Goto").attr("href",_this.editor_$.find(".Rk-Edit-URI").val());
+		            var _data = {
+		                title: _this.editor_$.find(".Rk-Edit-Title").val(),
+		                uri: _this.editor_$.find(".Rk-Edit-URI").val()
+		            }
+		            _model.set(_data);
+		            paper.view.draw();
+	           	} else {
+	           		closeEditor();
+	           	}
     		}).defer();
     	}).throttle(500);
     	
@@ -942,11 +986,15 @@
         	}
         });
         this.editor_$.find(".Rk-Edit-Direction").click(function() {
-        	_model.set({
-        		from: _model.get("to"),
-        		to: _model.get("from")
-        	});
-        	_this.draw();
+			if (_this.renderer.isEditable()) {
+	        	_model.set({
+	        		from: _model.get("to"),
+	        		to: _model.get("from")
+	        	});
+	        	_this.draw();
+	       	} else {
+	       		closeEditor();
+	       	}
         });
         this.editor_$.find(".Rk-Edit-ColorPicker-Wrapper").hover(
             function() { _this.editor_$.find(".Rk-Edit-ColorPicker").show(); },
@@ -956,8 +1004,12 @@
             function() { _this.editor_$.find(".Rk-Edit-Color").css("background", $(this).attr("data-color")); },
             function() { _this.editor_$.find(".Rk-Edit-Color").css("background", _model.get("color") || (_model.get("created_by") || Rkns.Renderer._USER_PLACEHOLDER).get("color")); }
         ).click(function() {
-            _model.set("color", $(this).attr("data-color"));
-            paper.view.draw();
+			if (_this.renderer.isEditable()) {
+            	_model.set("color", $(this).attr("data-color"));
+            	paper.view.draw();
+            } else {
+	       		closeEditor();
+	       	}
         });
     }
 }
@@ -989,7 +1041,7 @@
 		if (this.sector) {
 			this.sector.destroy();
 		}
-		this.sector = Rkns.Renderer.Utils.sector(this, 1 + sectorInner, Rkns.Renderer._NODE_BUTTON_WIDTH + sectorInner, - 90, 30, 1, this.renderer.renkan.static_url+'img/edit.png', this.renderer.renkan.translate("Edit"));
+		this.sector = Rkns.Renderer.Utils.sector(this, 1 + sectorInner, Rkns.Renderer._NODE_BUTTON_WIDTH + sectorInner, - 90, 30, 1, this.renderer.renkan.options.static_url+'img/edit.png', this.renderer.renkan.translate("Edit"));
 		this.lastSectorInner = sectorInner;
 	}
 }
@@ -1042,7 +1094,7 @@
 		if (this.sector) {
 			this.sector.destroy();
 		}
-		this.sector = Rkns.Renderer.Utils.sector(this, 1 + sectorInner, Rkns.Renderer._NODE_BUTTON_WIDTH + sectorInner, - 210, - 90, 1, this.renderer.renkan.static_url+'img/remove.png', this.renderer.renkan.translate("Remove"));
+		this.sector = Rkns.Renderer.Utils.sector(this, 1 + sectorInner, Rkns.Renderer._NODE_BUTTON_WIDTH + sectorInner, - 210, - 90, 1, this.renderer.renkan.options.static_url+'img/remove.png', this.renderer.renkan.translate("Remove"));
 		this.lastSectorInner = sectorInner;
 	}
 }
@@ -1072,7 +1124,7 @@
 
 Rkns.Renderer.NodeRemoveButton.prototype.mouseup = function() {
     this.renderer.removeRepresentationsOfType("editor");
-    if (confirm(this.renderer.renkan.translate('Do you really wish to remove node ') + '"' + this.node_representation.model.get("title") + '"?')) {
+    if (this.renderer.isEditable() && confirm(this.renderer.renkan.translate('Do you really wish to remove node ') + '"' + this.node_representation.model.get("title") + '"?')) {
         this.project.removeNode(this.node_representation.model);
     }
 }
@@ -1096,7 +1148,7 @@
 		if (this.sector) {
 			this.sector.destroy();
 		}
-		this.sector = Rkns.Renderer.Utils.sector(this, 1 + sectorInner, Rkns.Renderer._NODE_BUTTON_WIDTH + sectorInner, 30, 150, 1, this.renderer.renkan.static_url+'img/link.png', this.renderer.renkan.translate("Link to another node"));
+		this.sector = Rkns.Renderer.Utils.sector(this, 1 + sectorInner, Rkns.Renderer._NODE_BUTTON_WIDTH + sectorInner, 30, 150, 1, this.renderer.renkan.options.static_url+'img/link.png', this.renderer.renkan.translate("Link to another node"));
 		this.lastSectorInner = sectorInner;
 	}
 }
@@ -1134,7 +1186,7 @@
 
 Rkns.Renderer.EdgeEditButton.prototype._init = function() {
     this.type = "Edge-edit-button";
-    this.sector = Rkns.Renderer.Utils.sector(this, Rkns.Renderer._EDGE_BUTTON_INNER, Rkns.Renderer._EDGE_BUTTON_OUTER, - 90, 90, 1, this.renderer.renkan.static_url+'img/edit.png', this.renderer.renkan.translate("Edit"));
+    this.sector = Rkns.Renderer.Utils.sector(this, Rkns.Renderer._EDGE_BUTTON_INNER, Rkns.Renderer._EDGE_BUTTON_OUTER, - 90, 90, 1, this.renderer.renkan.options.static_url+'img/edit.png', this.renderer.renkan.translate("Edit"));
 }
 
 Rkns.Renderer.EdgeEditButton.prototype.moveTo = function(_pos) {
@@ -1176,7 +1228,7 @@
 
 Rkns.Renderer.EdgeRemoveButton.prototype._init = function() {
     this.type = "Edge-remove-button";
-    this.sector = Rkns.Renderer.Utils.sector(this, Rkns.Renderer._EDGE_BUTTON_INNER, Rkns.Renderer._EDGE_BUTTON_OUTER, - 270, -90, 1, this.renderer.renkan.static_url+'img/remove.png', this.renderer.renkan.translate("Remove"));
+    this.sector = Rkns.Renderer.Utils.sector(this, Rkns.Renderer._EDGE_BUTTON_INNER, Rkns.Renderer._EDGE_BUTTON_OUTER, - 270, -90, 1, this.renderer.renkan.options.static_url+'img/remove.png', this.renderer.renkan.translate("Remove"));
 }
 Rkns.Renderer.EdgeRemoveButton.prototype.moveTo = function(_pos) {
     this.sector.moveTo(_pos);
@@ -1203,7 +1255,7 @@
 
 Rkns.Renderer.EdgeRemoveButton.prototype.mouseup = function() {
     this.renderer.removeRepresentationsOfType("editor");
-    if (confirm(this.renderer.renkan.translate('Do you really wish to remove edge ') + '"' + this.edge_representation.model.get("title") + '"?')) {
+    if (this.renderer.isEditable() && confirm(this.renderer.renkan.translate('Do you really wish to remove edge ') + '"' + this.edge_representation.model.get("title") + '"?')) {
         this.project.removeEdge(this.edge_representation.model);
     }
 }
@@ -1315,7 +1367,7 @@
     	_event.stopPropagation();
     	_event.preventDefault();
     	_allowScroll = true;
-    	if (_this.renkan.read_only) {
+    	if (!_this.isEditable()) {
     		return;
     	}
     	var res = {}
@@ -1392,15 +1444,6 @@
 		    		newNode.description = snippet.find("[data-description]").attr("data-description") || newNode.description;
 		    	}
     	}
-/*
-    	var fields = ["title", "description", "uri", "image"];
-    	for (var i = 0; i < fields.length; i++) {
-    		var f = fields[i];
-    		if (res["text/x-iri-" + f]) {
-    			newNode[f] = res["text/x-iri-" + f];
-    		}
-    	}
-*/
     	if (newNode.title || newNode.description || newNode.uri) {
     		var _off = _this.canvas_$.offset(),
             _point = new paper.Point([
@@ -1575,11 +1618,11 @@
 }
 
 Rkns.Renderer.Scene.prototype.template = Rkns._.template(
-    '<div class="Rk-TopBar"><% if (read_only) { %><h2 class="Rk-PadTitle"><%- project.get("title") || translate("Untitled project")%></h2>'
+    '<div class="Rk-TopBar"><% if (!options.editor_mode) { %><h2 class="Rk-PadTitle"><%- project.get("title") || translate("Untitled project")%></h2>'
     + '<% } else { %><input type="text" class="Rk-PadTitle" value="<%- project.get("title") || "" %>" placeholder="<%-translate("Untitled project")%>" /><% } %>'
     + '<div class="Rk-Users"><div class="Rk-CurrentUser"><span class="Rk-CurrentUser-Color"></span><span class="Rk-CurrentUser-Name">&lt;unknown user&gt;</span></div><ul class="Rk-UserList"></ul></div>'
     + '<div class="Rk-TopBar-Separator"></div><div class="Rk-TopBar-Button Rk-FullScreen-Button"><div class="Rk-TopBar-Tooltip"><div class="Rk-TopBar-Tooltip-Tip"></div><div class="Rk-TopBar-Tooltip-Contents"><%-translate("Full Screen")%></div></div></div>'
-    + '<% if (!read_only) { %>'
+    + '<% if (options.editor_mode) { %>'
     + '<div class="Rk-TopBar-Separator"></div><div class="Rk-TopBar-Button Rk-AddNode-Button"><div class="Rk-TopBar-Tooltip"><div class="Rk-TopBar-Tooltip-Tip"></div><div class="Rk-TopBar-Tooltip-Contents"><%-translate("Add Node")%></div></div></div>'
     + '<div class="Rk-TopBar-Separator"></div><div class="Rk-TopBar-Button Rk-AddEdge-Button"><div class="Rk-TopBar-Tooltip"><div class="Rk-TopBar-Tooltip-Tip"></div><div class="Rk-TopBar-Tooltip-Contents"><%-translate("Add Edge")%></div></div></div>'
     + '<div class="Rk-TopBar-Separator"></div><div class="Rk-TopBar-Button Rk-Save-Button"><div class="Rk-TopBar-Tooltip"><div class="Rk-TopBar-Tooltip-Tip"></div><div class="Rk-TopBar-Tooltip-Contents"> </div></div></div>'
@@ -1588,7 +1631,7 @@
     + '<div class="Rk-TopBar-Separator"></div></div>'
     + '<% } %>'
     + '<canvas class="Rk-Canvas" resize></canvas><div class="Rk-Editor"><div class="Rk-Notifications"></div>'
-    + '<% if (show_bins) { %><div class="Rk-Fold-Bins">&laquo;</div><% } %>'
+    + '<% if (options.show_bins) { %><div class="Rk-Fold-Bins">&laquo;</div><% } %>'
     + '<div class="Rk-ZoomButtons"><div class="Rk-ZoomIn" title="<%-translate("Zoom In")%>"></div><div class="Rk-ZoomOut" title="<%-translate("Zoom Out")%>"></div></div>'
     + '</div>'
 );
@@ -1617,6 +1660,10 @@
     return _bundle;
 }
 
+Rkns.Renderer.Scene.prototype.isEditable = function() {
+	return (this.renkan.options.editor_mode && !this.renkan.read_only)
+}
+
 Rkns.Renderer.Scene.prototype.onStatusChange = function() {
 	var savebtn = this.$.find(".Rk-Save-Button"),
 		tip = savebtn.find(".Rk-TopBar-Tooltip-Contents");
@@ -1624,7 +1671,7 @@
 		savebtn.removeClass("disabled Rk-Save-Online").addClass("Rk-Save-ReadOnly");
 		tip.text(this.renkan.translate("Connection lost"));
 	} else {
-		if (this.renkan.snapshot_mode) {
+		if (this.renkan.options.snapshot_mode) {
 			savebtn.removeClass("Rk-Save-ReadOnly Rk-Save-Online");
 			tip.text(this.renkan.translate("Archive Project"));
 		} else {
@@ -1805,7 +1852,7 @@
         this.removeRepresentationsOfType("editor");
         this.is_dragging = false;
         var _hitResult = paper.project.hitTest(_event.point);
-        if (_hitResult && typeof _hitResult.item.__representation !== "undefined") {
+        if (this.isEditable() && _hitResult && typeof _hitResult.item.__representation !== "undefined") {
             this.click_target = _hitResult.item.__representation;
             if (this.click_target.type === "Node-link-button") {
                 this.removeRepresentationsOfType("editor");
@@ -1813,7 +1860,7 @@
             }
         } else {
             this.click_target = null;
-            if (this.click_mode === Rkns.Renderer._CLICKMODE_ADDNODE) {
+            if (this.isEditable() && this.click_mode === Rkns.Renderer._CLICKMODE_ADDNODE) {
                 var _coords = this.toModelCoords(_event.point),
                     _data = {
                         id: Rkns.Utils.getUID('node'),
@@ -1829,7 +1876,7 @@
         }
     }
     if (this.click_mode) {
-        if (this.click_mode === Rkns.Renderer._CLICKMODE_STARTEDGE && this.click_target && this.click_target.type === "Node") {
+        if (this.isEditable() && this.click_mode === Rkns.Renderer._CLICKMODE_STARTEDGE && this.click_target && this.click_target.type === "Node") {
             this.removeRepresentationsOfType("editor");
             this.addTempEdge(this.click_target, _event.point);
             this.click_mode = Rkns.Renderer._CLICKMODE_ENDEDGE;
@@ -1886,7 +1933,7 @@
 }
 
 Rkns.Renderer.Scene.prototype.onDoubleClick = function(_event) {
-    if (this.renkan.read_only) {
+    if (!this.isEditable()) {
         return;
     }
     var _off = this.canvas_$.offset(),
@@ -1895,7 +1942,7 @@
             _event.pageY - _off.top
         ]);
     var _hitResult = paper.project.hitTest(_point);
-    if (!_hitResult || typeof _hitResult.item.__representation === "undefined") {
+    if (this.isEditable() && (!_hitResult || typeof _hitResult.item.__representation === "undefined")) {
         var _coords = this.toModelCoords(_point),
             _data = {
                 id: Rkns.Utils.getUID('node'),
--- a/client/js/wikipedia-bin.js	Tue Mar 26 16:14:19 2013 +0100
+++ b/client/js/wikipedia-bin.js	Tue Mar 26 19:12:05 2013 +0100
@@ -75,7 +75,7 @@
             htitle: highlight(title),
             description: description,
             hdescription: highlight(description),
-            static_url: _this.renkan.static_url
+            static_url: _this.renkan.options.static_url
         });
     });
     _this.main_$.html(_html);
--- a/client/publish-test.html	Tue Mar 26 16:14:19 2013 +0100
+++ b/client/publish-test.html	Tue Mar 26 19:12:05 2013 +0100
@@ -13,6 +13,7 @@
         <script src="lib/backbone-relational.js"></script>
         <script src="lib/paper.js"></script>
         <script src="js/main.js"></script>
+        <script src="js/defaults.js"></script>
         <script src="js/i18n.js"></script>
         <script src="js/models.js"></script>
         <script src="js/full-json.js"></script>
@@ -22,7 +23,8 @@
             $(function() {
                 _renkan = new Rkns.Renkan({
                     url: "data/simple-persist.php",
-                    read_only: true
+                    editor_mode: false,
+                    show_bins: false
                 });
                 Rkns.jsonIO(_renkan, {
                     url: "data/simple-persist.php"
--- a/client/render-test.html	Tue Mar 26 16:14:19 2013 +0100
+++ b/client/render-test.html	Tue Mar 26 19:12:05 2013 +0100
@@ -13,6 +13,7 @@
         <script src="lib/backbone-relational.js"></script>
         <script src="lib/paper.js"></script>
         <script src="js/main.js"></script>
+        <script src="js/defaults.js"></script>
         <script src="js/i18n.js"></script>
         <script src="js/models.js"></script>
         <script src="js/full-json.js"></script>
@@ -25,6 +26,7 @@
             var _renkan;
             $(function() {
                 _renkan = new Rkns.Renkan({
+                	read_only: true,
                     url: "data/simple-persist.php",
                     bins: [
                     	{