timeline/js/timeline.js
changeset 71 fa03eb8a3fe5
parent 70 43012525c832
child 72 a000f6a29dfa
--- a/timeline/js/timeline.js	Tue May 29 16:16:26 2012 +0200
+++ b/timeline/js/timeline.js	Wed Jun 27 13:15:28 2012 +0200
@@ -57,6 +57,12 @@
     return Mustache.to_html(_template, _params);
 }
 
+Tlns.Utils.guid = function() {
+    return 'xxxx-xxxx-xxxx-xxxx'.replace(/x/g,function() {
+        return Math.floor(Math.random()*16).toString(16);
+    });
+}
+
 /* Defaults */
 
 Tlns.Defaults.Timeline = {
@@ -129,7 +135,10 @@
     + '<div class="Tl-TopBar-Button Tl-Border-Right"><div class="Tl-TopBar-PreviousButton"></div></div><div class="Tl-TopBar-TimeSpan Tl-TopBar-TextBtn Tl-Border-Right">--/--</div>'
     + '<div class="Tl-TopBar-Button Tl-Border-Right"><div class="Tl-TopBar-SyncButton"></div></div><div class="Tl-TopBar-Button Tl-Border-Right"><div class="Tl-TopBar-NextButton"></div></div><div class="Tl-TopBar-Spacer Tl-Border-Right"></div>'
     + '<div class="Tl-TopBar-Timescales">{{#timescales}}<div class="Tl-TopBar-Button Tl-TopBar-TextBtn Tl-Border-Right" data-level="{{level}}">{{label}}</div>{{/timescales}}</div></div>'
-    + '<div class="Tl-BottomPart"><ul class="Tl-UniversLabels"></ul><div class="Tl-MainPart"><div class="Tl-Layer Tl-Grid"></div><canvas class="Tl-Layer Tl-Canvas"></canvas><canvas class="Tl-Layer Tl-Linking-Canvas"></canvas><div class="Tl-Layer Tl-Occurrences"></div></div>'
+    + '<div class="Tl-BottomPart"><ul class="Tl-UniversLabels"></ul>'
+    + '<div class="Tl-MainPart"><div class="Tl-Layer Tl-Grid"></div><canvas class="Tl-Layer Tl-Canvas"></canvas><canvas class="Tl-Layer Tl-Linking-Canvas"></canvas><div class="Tl-Layer Tl-Occurrences"></div>'
+    + '<ul class="Tl-Adding"><li class="Tl-AddingTitle">Ajout d\'une occurrence</li><li><span>Narrative</span><div class="Tl-AddOccurrence Tl-Occnarrative" occurrence-type="narrative" title="Glisser sur la frise chronologique pour ajouter"></div></li>'
+    + '<li><span>De Production</span><div class="Tl-AddOccurrence Tl-Occproduction" occurrence-type="production" title="Glisser sur la frise chronologique pour ajouter"></div></li></ul></div>'
     + '<div class="Tl-Overlay-Container"><div class="Tl-Overlay-Box"><div class="Tl-Overlay"><div class="Tl-Overlay-Tip-Top"></div><div class="Tl-Overlay-Main"></div><div class="Tl-Overlay-Tip-Bottom"></div></div></div></div></div>';
 
 Tlns.Templates.Univers = '<span class="Tl-UniversText">{{title}}</span>';
@@ -236,6 +245,39 @@
         $(this).hide();
     });
     
+    this.$.find('.Tl-TopBar-AddButton').click(function() {
+        $(this).toggleClass('active');
+        _this.$.find('.Tl-Adding').toggle();
+    });
+    
+    this.$.find('.Tl-AddOccurrence').mousedown(function(_event) {
+        var _el = $(this),
+            _type = _el.attr("occurrence-type"),
+            _d = _this.timeFromMouse(_event.pageX),
+            _u = _this.universFromMouse(_event.pageY),
+            _occ = _this.createOrUpdateOccurrence(
+                _type,
+                {
+                    date: _d,
+                    titre: '<Nouvelle occurrence>',
+                    univers: _this.univers[_u].id,
+                    publie: true
+                }
+            );
+        _occ.just_created = true;
+        _occ.editing = true;
+        _this.editing_occurrence = _occ;
+        _this.dragging_type = "occurrence";
+        window.setTimeout(function () {
+            _this.$.find('.Tl-TopBar-AddButton').removeClass('active');
+            _this.$.find('.Tl-Adding').hide();
+        }, 200);
+        _this.throttledDrawGrid();
+    }).mouseup(function(_event) {
+        _this.onMouseUp(_event);
+        return false;
+    });
+    
     /* Loading Univers */
     $.getJSON(this.url_univers, function(_data) {
         _this.onUniversLoaded(_data);
@@ -260,6 +302,7 @@
         switch (this.dragging_type) {
             case "occurrence":
                 this.editing_occurrence.editing = false;
+                this.editing_occurrence.just_created = false;
                 this.throttledDrawGrid();
             break;
             case "link":
@@ -269,6 +312,11 @@
                 _ctx.clearRect(0,0,this.main_width, this.main_height);
             break;
         }
+    } else {
+        if (this.dragging_type == "occurrence" && this.editing_occurrence.just_created) {
+            this.deleteOccurrence(this.editing_occurrence.type, this.editing_occurrence.id);
+            this.throttledDrawGrid();
+        }
     }
     this.mouse_down = false;
     this.is_dragging = false;
@@ -283,6 +331,14 @@
     return this.timeFromX(_pageX - this.dragging_bounds.left);
 }
 
+Tlns.Classes.Timeline.prototype.universFromY = function(_y) {
+    return Math.max(0,Math.min(this.univers.length, Math.floor(_y / this.univers_height)))
+}
+
+Tlns.Classes.Timeline.prototype.universFromMouse = function(_pageY) {
+    return this.universFromY(_pageY - this.dragging_bounds.top);
+}
+
 Tlns.Classes.Timeline.prototype.onMouseMove = function(_event) {
     if (this.mouse_down) {
         this.is_dragging = true;
@@ -291,7 +347,7 @@
             case "occurrence":
                 var _d = this.timeFromMouse(_event.pageX);
                 this.editing_occurrence.date = _d;
-                var _u = Math.max(0,Math.min(this.univers.length, Math.floor((_event.pageY - this.dragging_bounds.top) / this.univers_height)));
+                var _u = this.universFromMouse(_event.pageY);
                 this.editing_occurrence.univers = this.univers[_u];
                 this.editing_occurrence.univers_id = this.univers[_u].id;
                 this.throttledDrawGrid();
@@ -412,6 +468,12 @@
     }
 }
 
+Tlns.Classes.Timeline.prototype.deleteOccurrence = function(_type, _id) {
+    this.occurrences = _(this.occurrences).reject(function(_occ) {
+        return (_occ.type == _type && _occ.id == _id);
+    });
+}
+
 Tlns.Classes.Timeline.prototype.getOccurrence = function(_type, _id) {
     return _(this.occurrences).find(function(_occ) {
         return (_occ.type == _type && _occ.id == _id);
@@ -425,6 +487,7 @@
         this.occurrences.push(_occurrence);
     }
     _occurrence.update(_type, _data);
+    return _occurrence;
 }
 
 Tlns.Classes.Timeline.prototype.showTooltip = function(_x, _y, _html, _isUp) {
@@ -566,27 +629,39 @@
     }
     
     this.$.find('.Tl-Occurrence').mousedown(function() {
-        var _el = $(this);
-        _this.editing_occurrence = _this.getOccurrence(_el.attr("occurrence-type"),_el.attr("occurrence-id"));
-        if (typeof _this.dragging_type === "undefined" && typeof _this.editing_occurrence !== "undefined" && !_this.editing_occurrence.locked) {
-            _this.dragging_type = "occurrence";
-            _this.editing_occurrence.editing = true;
+        var _el = $(this),
+            _type = _el.attr("occurrence-type"),
+            _id = _el.attr("occurrence-id");
+        if (typeof _type !== "undefined" && typeof _id !== "undefined") {
+            _this.editing_occurrence = _this.getOccurrence(_type,_id);
+            if (typeof _this.dragging_type === "undefined" && typeof _this.editing_occurrence !== "undefined" && !_this.editing_occurrence.locked) {
+                _this.dragging_type = "occurrence";
+                _this.editing_occurrence.editing = true;
+            }
         }
     }).mouseover(function(_event) {
         var _el = $(this),
-            _occurrence = _this.getOccurrence(_el.attr("occurrence-type"),_el.attr("occurrence-id"));
-        if (!_occurrence.locked) {
-            _el.find('.Tl-Link').show();
+            _type = _el.attr("occurrence-type"),
+            _id = _el.attr("occurrence-id");
+        if (typeof _type !== "undefined" && typeof _id !== "undefined") {
+            var _occurrence = _this.getOccurrence(_type, _id);
+            if (!_occurrence.locked) {
+                _el.find('.Tl-Link').show();
+            }
+            _occurrence.formatted_date = Tlns.Utils.dateFormat(_occurrence.date,_this.tooltip_date_format);
+            var _html = Mustache.to_html(Tlns.Templates.OccurrenceTooltip, _occurrence);
+            _this.showTooltip(_occurrence.x, _occurrence.y, _html, (_event.pageY - _this.dragging_bounds.top) >= (.4 * _this.main_height) );
         }
-        _occurrence.formatted_date = Tlns.Utils.dateFormat(_occurrence.date,_this.tooltip_date_format);
-        var _html = Mustache.to_html(Tlns.Templates.OccurrenceTooltip, _occurrence);
-        _this.showTooltip(_occurrence.x, _occurrence.y, _html, (_event.pageY - _this.dragging_bounds.top) >= (.4 * _this.main_height) );
     }).mouseout(function() {
         var _el = $(this),
-            _occurrence = _this.getOccurrence(_el.attr("occurrence-type"),_el.attr("occurrence-id"));
-        _this.hideTooltip();
-        if (!_occurrence.editing) {
-            $(this).find('.Tl-Link').hide();
+            _type = _el.attr("occurrence-type"),
+            _id = _el.attr("occurrence-id");
+        if (typeof _type !== "undefined" && typeof _id !== "undefined") {
+            var _occurrence = _this.getOccurrence(_type, _id);
+            _this.hideTooltip();
+            if (!_occurrence.editing) {
+                $(this).find('.Tl-Link').hide();
+            }
         }
     }).mouseup(function() {
         var _el = $(this);
@@ -658,7 +733,7 @@
 
 Tlns.Classes.Occurrence.prototype.update = function(_type, _data) {
     this.type = _type;
-    this.id = _data.id || _.uniqueId();
+    this.id = _data.id || Tlns.Utils.guid();
     this.date = _data.date || _data.datePublication;
     this.title = _data.titre || "<untitled>";
     this.univers_id = _data.univers;