client/js/paper-renderer.js
changeset 190 a9040a7c47d9
parent 189 f7b5ae0d2681
child 193 7d95ace8c08f
--- a/client/js/paper-renderer.js	Thu May 30 12:08:28 2013 +0200
+++ b/client/js/paper-renderer.js	Thu Jun 06 17:24:15 2013 +0200
@@ -12,7 +12,6 @@
     _CLICKMODE_ADDNODE = 1,
     _CLICKMODE_STARTEDGE = 2,
     _CLICKMODE_ENDEDGE = 3,
-    _IMAGE_MAX_KB = 500,
     _NODE_SIZE_STEP = Math.LN2/4,
     _MIN_SCALE = 1/20,
     _MAX_SCALE = 20,
@@ -1006,8 +1005,8 @@
                     alert(_this.renkan.translate("This file is not an image"));
                     return;
                 }
-                if (f.size > (_IMAGE_MAX_KB * 1024)) {
-                    alert(_this.renkan.translate("Image size must be under ")+_IMAGE_MAX_KB+_this.renkan.translate("KB"));
+                if (f.size > (_this.options.uploaded_image_max_kb * 1024)) {
+                    alert(_this.renkan.translate("Image size must be under ") + _this.options.uploaded_image_max_kb + _this.renkan.translate("KB"));
                     return;
                 }
                 fr.onload = function(e) {
@@ -1572,7 +1571,7 @@
     var throttledMouseMove = _.throttle(function(_event, _isTouch) {
         _this.onMouseMove(_event, _isTouch);
     }, _MOUSEMOVE_RATE);
-    
+        
     this.canvas_$.on({
         mousedown: function(_event) {
             _event.preventDefault();
@@ -1704,67 +1703,27 @@
             _this.dropData(res, _event.originalEvent);
         }
     });
-    this.editor_$.find(".Rk-ZoomOut").click(function() {
-        var _newScale = _this.scale * Math.SQRT1_2,
-            _offset = new paper.Point([
-                _this.canvas_$.width(),
-                _this.canvas_$.height()
-            ]).multiply( .5 * ( 1 - Math.SQRT1_2 ) ).add(_this.offset.multiply( Math.SQRT1_2 ));
-        _this.setScale( _newScale, _offset );
-    });
-    this.editor_$.find(".Rk-ZoomIn").click(function() {
-        var _newScale = _this.scale * Math.SQRT2,
-            _offset = new paper.Point([
-                _this.canvas_$.width(),
-                _this.canvas_$.height()
-            ]).multiply( .5 * ( 1 - Math.SQRT2 ) ).add(_this.offset.multiply( Math.SQRT2 ));
-        _this.setScale( _newScale, _offset );
-    });
+    
+    var bindClick = function(selector, fname) {
+        _this.$.find(selector).click(function(evt) {
+            _this[fname](evt);
+            return false;
+        });
+    }
+    
+    bindClick(".Rk-ZoomOut", "zoomOut");
+    bindClick(".Rk-ZoomIn", "zoomIn");
     this.$.find(".Rk-CurrentUser").mouseenter(
         function() { _this.$.find(".Rk-UserList").slideDown(); }
     );
     this.$.find(".Rk-Users").mouseleave(
         function() { _this.$.find(".Rk-UserList").slideUp(); }
     );
-    this.$.find(".Rk-FullScreen-Button").click(function() {
-        var _isFull = document.fullScreen || document.mozFullScreen || document.webkitIsFullScreen,
-            _el = _this.renkan.$[0],
-            _requestMethods = ["requestFullScreen","mozRequestFullScreen","webkitRequestFullScreen"],
-            _cancelMethods = ["cancelFullScreen","mozCancelFullScreen","webkitCancelFullScreen"];
-        if (_isFull) {
-            for (var i = 0; i < _cancelMethods.length; i++) {
-                if (typeof document[_cancelMethods[i]] === "function") {
-                    document[_cancelMethods[i]]();
-                    break;
-                }
-            }
-        } else {
-            for (var i = 0; i < _requestMethods.length; i++) {
-                if (typeof _el[_requestMethods[i]] === "function") {
-                    _el[_requestMethods[i]]();
-                    break;
-                }
-            }
-        }
-    });
-    this.$.find(".Rk-AddNode-Button").click(function() {
-        if (_this.click_mode === _CLICKMODE_ADDNODE) {
-            _this.click_mode = false;
-            _this.notif_$.hide();
-        } else {
-            _this.click_mode = _CLICKMODE_ADDNODE;
-            _this.notif_$.text(_renkan.translate("Click on the background canvas to add a node")).fadeIn();
-        }
-    });
-    this.$.find(".Rk-AddEdge-Button").click(function() {
-        if (_this.click_mode === _CLICKMODE_STARTEDGE || _this.click_mode === _CLICKMODE_ENDEDGE) {
-            _this.click_mode = false;
-            _this.notif_$.hide();
-        } else {
-            _this.click_mode = _CLICKMODE_STARTEDGE;
-            _this.notif_$.text(_renkan.translate("Click on a first node to start the edge")).fadeIn();
-        }
-    });
+    bindClick(".Rk-FullScreen-Button", "fullScreen");
+    bindClick(".Rk-AddNode-Button", "addNodeBtn");
+    bindClick(".Rk-AddEdge-Button", "addEdgeBtn");
+    bindClick(".Rk-Save-Button", "save");
+    bindClick(".Rk-Open-Button", "open");
     this.$.find(".Rk-Bookmarklet-Button")
         .attr("href","javascript:" + _BOOKMARKLET_CODE(_renkan))
         .click(function(){
@@ -1780,24 +1739,7 @@
     }).mouseout(function() {
         Rkns.$(this).find(".Rk-TopBar-Tooltip").hide();
     });
-    this.$.find(".Rk-Fold-Bins").click(function() {
-        var bins = _renkan.$.find(".Rk-Bins");
-        if (bins.offset().left < 0) {
-            bins.animate({left: 0},250);
-            _this.$.animate({left: 300},250,function() {
-                var w = _this.$.width();
-                paper.view.viewSize = new paper.Size([w, _this.canvas_$.height()]);
-            });
-            $(this).html("&laquo;");
-        } else {
-            bins.animate({left: -300},250);
-            _this.$.animate({left: 0},250,function() {
-                var w = _this.$.width();
-                paper.view.viewSize = new paper.Size([w, _this.canvas_$.height()]);
-            });
-            $(this).html("&raquo;");
-        }
-    });
+    bindClick(".Rk-Fold-Bins", "foldBins");
     
     paper.view.onResize = function(_event) {
         _this.offset = _this.offset.add(_event.delta.divide(2));
@@ -1902,14 +1844,19 @@
 template: Rkns._.template(
     '<% if (options.show_top_bar) { %><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 (options.show_user_list) { %><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><% } %>'
+    + '<% if (options.home_button_url) {%><div class="Rk-TopBar-Separator"></div><a class="Rk-TopBar-Button Rk-Home-Button" href="<%- options.home_button_url %>"><div class="Rk-TopBar-Tooltip"><div class="Rk-TopBar-Tooltip-Contents">'
+    + '<%- translate(options.home_button_title) %></div></div></a><% } %>'
+    + '<% if (options.show_fullscreen_button) { %><div class="Rk-TopBar-Separator"></div><div class="Rk-TopBar-Button Rk-FullScreen-Button"><div class="Rk-TopBar-Tooltip"><div class="Rk-TopBar-Tooltip-Contents"><%-translate("Full Screen")%></div></div></div><% } %>'
     + '<% 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>'
-    + '<div class="Rk-TopBar-Separator"></div><a class="Rk-TopBar-Button Rk-Bookmarklet-Button" href="#"><div class="Rk-TopBar-Tooltip"><div class="Rk-TopBar-Tooltip-Tip"></div><div class="Rk-TopBar-Tooltip-Contents">'
-    + '<%-translate("Renkan \'Drag-to-Add\' bookmarklet")%></div></div></a>'
+    + '<% if (options.show_addnode_button) { %><div class="Rk-TopBar-Separator"></div><div class="Rk-TopBar-Button Rk-AddNode-Button"><div class="Rk-TopBar-Tooltip">'
+    + '<div class="Rk-TopBar-Tooltip-Contents"><%-translate("Add Node")%></div></div></div><% } %>'
+    + '<% if (options.show_addedge_button) { %><div class="Rk-TopBar-Separator"></div><div class="Rk-TopBar-Button Rk-AddEdge-Button"><div class="Rk-TopBar-Tooltip">'
+    + '<div class="Rk-TopBar-Tooltip-Contents"><%-translate("Add Edge")%></div></div></div><% } %>'
+    + '<% if (options.show_save_button) { %><div class="Rk-TopBar-Separator"></div><div class="Rk-TopBar-Button Rk-Save-Button"><div class="Rk-TopBar-Tooltip"><div class="Rk-TopBar-Tooltip-Contents"> </div></div></div><% } %>'
+    + '<% if (options.show_open_button) { %><div class="Rk-TopBar-Separator"></div><div class="Rk-TopBar-Button Rk-Open-Button"><div class="Rk-TopBar-Tooltip"><div class="Rk-TopBar-Tooltip-Contents"><%-translate("Open Project")%></div></div></div><% } %>'
+    + '<% if (options.show_bookmarklet) { %><div class="Rk-TopBar-Separator"></div><a class="Rk-TopBar-Button Rk-Bookmarklet-Button" href="#"><div class="Rk-TopBar-Tooltip"><div class="Rk-TopBar-Tooltip-Contents">'
+    + '<%-translate("Renkan \'Drag-to-Add\' bookmarklet")%></div></div></a><% } %>'
     + '<div class="Rk-TopBar-Separator"></div>'
     + '<% } %></div><% } %>'
     + '<div class="Rk-Editing-Space<% if (!options.show_top_bar) { %> Rk-Editing-Space-Full<% } %>">'
@@ -2073,7 +2020,7 @@
     } else {
         if (this.renkan.options.snapshot_mode) {
             savebtn.removeClass("Rk-Save-ReadOnly Rk-Save-Online");
-            tip.text(this.renkan.translate("Archive Project"));
+            tip.text(this.renkan.translate("Save Project"));
         } else {
             savebtn.removeClass("disabled Rk-Save-ReadOnly").addClass("Rk-Save-Online");
             tip.text(this.renkan.translate("Auto-save enabled"));
@@ -2497,7 +2444,87 @@
     if (_event.type === "drop") {
         _repr.openEditor();
     }
-}
+},
+fullScreen: function() {
+    var _isFull = document.fullScreen || document.mozFullScreen || document.webkitIsFullScreen,
+        _el = this.renkan.$[0],
+        _requestMethods = ["requestFullScreen","mozRequestFullScreen","webkitRequestFullScreen"],
+        _cancelMethods = ["cancelFullScreen","mozCancelFullScreen","webkitCancelFullScreen"];
+    if (_isFull) {
+        for (var i = 0; i < _cancelMethods.length; i++) {
+            if (typeof document[_cancelMethods[i]] === "function") {
+                document[_cancelMethods[i]]();
+                break;
+            }
+        }
+    } else {
+        for (var i = 0; i < _requestMethods.length; i++) {
+            if (typeof _el[_requestMethods[i]] === "function") {
+                _el[_requestMethods[i]]();
+                break;
+            }
+        }
+    }
+},
+zoomOut: function() {
+    var _newScale = this.scale * Math.SQRT1_2,
+        _offset = new paper.Point([
+            this.canvas_$.width(),
+            this.canvas_$.height()
+        ]).multiply( .5 * ( 1 - Math.SQRT1_2 ) ).add(this.offset.multiply( Math.SQRT1_2 ));
+    this.setScale( _newScale, _offset );
+},
+zoomIn: function() {
+    var _newScale = this.scale * Math.SQRT2,
+        _offset = new paper.Point([
+            this.canvas_$.width(),
+            this.canvas_$.height()
+        ]).multiply( .5 * ( 1 - Math.SQRT2 ) ).add(this.offset.multiply( Math.SQRT2 ));
+    this.setScale( _newScale, _offset );
+},
+addNodeBtn: function() {
+    if (this.click_mode === _CLICKMODE_ADDNODE) {
+        this.click_mode = false;
+        this.notif_$.hide();
+    } else {
+        this.click_mode = _CLICKMODE_ADDNODE;
+        this.notif_$.text(_renkan.translate("Click on the background canvas to add a node")).fadeIn();
+    }
+    return false;
+},
+addEdgeBtn: function() {
+    if (this.click_mode === _CLICKMODE_STARTEDGE || this.click_mode === _CLICKMODE_ENDEDGE) {
+        this.click_mode = false;
+        this.notif_$.hide();
+    } else {
+        this.click_mode = _CLICKMODE_STARTEDGE;
+        this.notif_$.text(_renkan.translate("Click on a first node to start the edge")).fadeIn();
+    }
+    return false;
+},
+foldBins: function() {
+    var foldBinsButton = this.$.find(".Rk-Fold-Bins"),
+        bins = this.renkan.$.find(".Rk-Bins");
+    if (bins.offset().left < 0) {
+        bins.animate({left: 0},250);
+        var _this = this;
+        this.$.animate({left: 300},250,function() {
+            var w = _this.$.width();
+            paper.view.viewSize = new paper.Size([w, _this.canvas_$.height()]);
+        });
+        foldBinsButton.html("&laquo;");
+    } else {
+        bins.animate({left: -300},250);
+        var _this = this;
+        this.$.animate({left: 0},250,function() {
+            var w = _this.$.width();
+            paper.view.viewSize = new paper.Size([w, _this.canvas_$.height()]);
+        });
+        foldBinsButton.html("&raquo;");
+    }
+},
+save: function() { },
+open: function() { }
 });
 }).call(window);