timeline/js/timeline.js
changeset 72 a000f6a29dfa
parent 71 fa03eb8a3fe5
child 73 642ef9139fad
equal deleted inserted replaced
71:fa03eb8a3fe5 72:a000f6a29dfa
   143 
   143 
   144 Tlns.Templates.Univers = '<span class="Tl-UniversText">{{title}}</span>';
   144 Tlns.Templates.Univers = '<span class="Tl-UniversText">{{title}}</span>';
   145 
   145 
   146 Tlns.Templates.Occurrence = '{{#clusters}}<div class="Tl-Cluster Tl-Occ{{type}}" style="left: {{x}}px; top: {{y}}px;" cluster-contents="{{contents}}">'
   146 Tlns.Templates.Occurrence = '{{#clusters}}<div class="Tl-Cluster Tl-Occ{{type}}" style="left: {{x}}px; top: {{y}}px;" cluster-contents="{{contents}}">'
   147     + '<div class="Tl-ClusterCount">{{occurrences.length}}</div></div>{{/clusters}}'
   147     + '<div class="Tl-ClusterCount">{{occurrences.length}}</div></div>{{/clusters}}'
   148     + '{{#occurrences}}<div class="Tl-Occurrence Tl-OccOnGrid Tl-Occ{{type}}{{#editing}} Tl-Editing{{/editing}}" occurrence-type="{{type}}" occurrence-id="{{id}}" style="left: {{x}}px; top: {{y}}px;">'
   148     + '{{#occurrences}}<div class="Tl-Occurrence Tl-OccOnGrid Tl-Occ{{type}}{{#editing}} Tl-Editing{{/editing}}" occurrence-id="{{id}}" style="left: {{x}}px; top: {{y}}px;">'
   149     + '{{#locked}}<div class="Tl-Locked"></div>{{/locked}}<div class="Tl-Link"{{#editing}} style="display: block"{{/editing}}></div></div>{{/occurrences}}{{#open_cluster}}<div class="Tl-ClusterOverlay" style="left: {{x}}px; top: {{y}}px;">'
   149     + '{{#locked}}<div class="Tl-Locked"></div>{{/locked}}<div class="Tl-Link"{{#editing}} style="display: block"{{/editing}}></div></div>{{/occurrences}}{{#open_cluster}}<div class="Tl-ClusterOverlay" style="left: {{x}}px; top: {{y}}px;">'
   150     + '{{#occurrences}}<div class="Tl-Occurrence Tl-OccInCluster Tl-Occ{{type}}{{#editing}} Tl-Editing{{/editing}}" occurrence-type="{{type}}" occurrence-id="{{id}}">'
   150     + '{{#occurrences}}<div class="Tl-Occurrence Tl-OccInCluster Tl-Occ{{type}}{{#editing}} Tl-Editing{{/editing}}" occurrence-id="{{id}}">'
   151     + '{{#locked}}<div class="Tl-Locked"></div>{{/locked}}<div class="Tl-Link"{{#editing}} style="display: block"{{/editing}}></div></div>{{/occurrences}}</div>{{/open_cluster}}';
   151     + '{{#locked}}<div class="Tl-Locked"></div>{{/locked}}<div class="Tl-Link"{{#editing}} style="display: block"{{/editing}}></div></div>{{/occurrences}}</div>{{/open_cluster}}';
   152     
   152     
   153 Tlns.Templates.OccurrenceTooltip = '<h3 class="Tl-Tooltip-Title">{{title}}</h3><p class="Tl-Tooltip-Date">{{formatted_date}}</p>'
   153 Tlns.Templates.OccurrenceTooltip = '<h3 class="Tl-Tooltip-Title">{{title}}</h3><p class="Tl-Tooltip-Date">{{formatted_date}}</p>'
   154     + '<p class="Tl-Tooltip-Description">{{description}}</p><p class="Tl-Tooltip-Characters">{{univers.mainCharacter}}{{#characters}}, {{.}}{{/characters}}</p>'
   154     + '<p class="Tl-Tooltip-Description">{{description}}</p><p class="Tl-Tooltip-Characters">{{univers.mainCharacter}}{{#characters}}, {{.}}{{/characters}}</p>'
   155 
   155 
   466     if (!this.mouse_down) {
   466     if (!this.mouse_down) {
   467         this.drawOccurrences();
   467         this.drawOccurrences();
   468     }
   468     }
   469 }
   469 }
   470 
   470 
   471 Tlns.Classes.Timeline.prototype.deleteOccurrence = function(_type, _id) {
   471 Tlns.Classes.Timeline.prototype.deleteOccurrence = function(_id) {
   472     this.occurrences = _(this.occurrences).reject(function(_occ) {
   472     this.occurrences = _(this.occurrences).reject(function(_occ) {
   473         return (_occ.type == _type && _occ.id == _id);
   473         return occ.id == _id;
   474     });
   474     });
   475 }
   475 }
   476 
   476 
   477 Tlns.Classes.Timeline.prototype.getOccurrence = function(_type, _id) {
   477 Tlns.Classes.Timeline.prototype.getOccurrence = function(_id) {
   478     return _(this.occurrences).find(function(_occ) {
   478     return _(this.occurrences).find(function(_occ) {
   479         return (_occ.type == _type && _occ.id == _id);
   479         return _occ.id == _id;
   480     });
   480     });
   481 }
   481 }
   482 
   482 
   483 Tlns.Classes.Timeline.prototype.createOrUpdateOccurrence = function(_type, _data) {
   483 Tlns.Classes.Timeline.prototype.createOrUpdateOccurrence = function(_type, _data) {
   484     var _occurrence = this.getOccurrence(_type, _data.id);
   484     var _id = _type + "_" + _data.id,
       
   485         _occurrence = this.getOccurrence(_id);
   485     if (typeof _occurrence === "undefined") {
   486     if (typeof _occurrence === "undefined") {
   486         _occurrence = new Tlns.Classes.Occurrence(this);
   487         _occurrence = new Tlns.Classes.Occurrence(this);
   487         this.occurrences.push(_occurrence);
   488         this.occurrences.push(_occurrence);
   488     }
   489     }
   489     _occurrence.update(_type, _data);
   490     _occurrence.update(_type, _data);
   583     var _links = [];
   584     var _links = [];
   584     
   585     
   585     _(_visible).each(function(_occurrence) {
   586     _(_visible).each(function(_occurrence) {
   586         _(_occurrence.dependsOn).each(function(_dependance) {
   587         _(_occurrence.dependsOn).each(function(_dependance) {
   587             var _parent = _(_visible).find(function(_o) {
   588             var _parent = _(_visible).find(function(_o) {
   588                 return _o.type == "narrative" && _o.id == _dependance;
   589                 return _o.id == _dependance;
   589             });
   590             });
   590             if (typeof _parent !== "undefined") {
   591             if (typeof _parent !== "undefined") {
   591                 _links.push({
   592                 _links.push({
   592                     from_x: _occurrence.x,
   593                     from_x: _occurrence.x,
   593                     from_y: _occurrence.y + Math.floor(_this.univers_height / 2),
   594                     from_y: _occurrence.y + Math.floor(_this.univers_height / 2),
   628         });
   629         });
   629     }
   630     }
   630     
   631     
   631     this.$.find('.Tl-Occurrence').mousedown(function() {
   632     this.$.find('.Tl-Occurrence').mousedown(function() {
   632         var _el = $(this),
   633         var _el = $(this),
   633             _type = _el.attr("occurrence-type"),
       
   634             _id = _el.attr("occurrence-id");
   634             _id = _el.attr("occurrence-id");
   635         if (typeof _type !== "undefined" && typeof _id !== "undefined") {
   635         if (typeof _id !== "undefined") {
   636             _this.editing_occurrence = _this.getOccurrence(_type,_id);
   636             _this.editing_occurrence = _this.getOccurrence(_id);
   637             if (typeof _this.dragging_type === "undefined" && typeof _this.editing_occurrence !== "undefined" && !_this.editing_occurrence.locked) {
   637             if (typeof _this.dragging_type === "undefined" && typeof _this.editing_occurrence !== "undefined" && !_this.editing_occurrence.locked) {
   638                 _this.dragging_type = "occurrence";
   638                 _this.dragging_type = "occurrence";
   639                 _this.editing_occurrence.editing = true;
   639                 _this.editing_occurrence.editing = true;
   640             }
   640             }
   641         }
   641         }
   642     }).mouseover(function(_event) {
   642     }).mouseover(function(_event) {
   643         var _el = $(this),
   643         var _el = $(this),
   644             _type = _el.attr("occurrence-type"),
       
   645             _id = _el.attr("occurrence-id");
   644             _id = _el.attr("occurrence-id");
   646         if (typeof _type !== "undefined" && typeof _id !== "undefined") {
   645         if (typeof _id !== "undefined") {
   647             var _occurrence = _this.getOccurrence(_type, _id);
   646             var _occurrence = _this.getOccurrence(_id);
   648             if (!_occurrence.locked) {
   647             if (!_occurrence.locked) {
   649                 _el.find('.Tl-Link').show();
   648                 _el.find('.Tl-Link').show();
   650             }
   649             }
   651             _occurrence.formatted_date = Tlns.Utils.dateFormat(_occurrence.date,_this.tooltip_date_format);
   650             _occurrence.formatted_date = Tlns.Utils.dateFormat(_occurrence.date,_this.tooltip_date_format);
   652             var _html = Mustache.to_html(Tlns.Templates.OccurrenceTooltip, _occurrence);
   651             var _html = Mustache.to_html(Tlns.Templates.OccurrenceTooltip, _occurrence);
   653             _this.showTooltip(_occurrence.x, _occurrence.y, _html, (_event.pageY - _this.dragging_bounds.top) >= (.4 * _this.main_height) );
   652             _this.showTooltip(_occurrence.x, _occurrence.y, _html, (_event.pageY - _this.dragging_bounds.top) >= (.4 * _this.main_height) );
   654         }
   653         }
   655     }).mouseout(function() {
   654     }).mouseout(function() {
   656         var _el = $(this),
   655         var _el = $(this),
   657             _type = _el.attr("occurrence-type"),
       
   658             _id = _el.attr("occurrence-id");
   656             _id = _el.attr("occurrence-id");
   659         if (typeof _type !== "undefined" && typeof _id !== "undefined") {
   657         if (typeof _id !== "undefined") {
   660             var _occurrence = _this.getOccurrence(_type, _id);
   658             var _occurrence = _this.getOccurrence(_id);
   661             _this.hideTooltip();
   659             _this.hideTooltip();
   662             if (!_occurrence.editing) {
   660             if (!_occurrence.editing) {
   663                 $(this).find('.Tl-Link').hide();
   661                 $(this).find('.Tl-Link').hide();
   664             }
   662             }
   665         }
   663         }
   666     }).mouseup(function() {
   664     }).mouseup(function() {
   667         var _el = $(this);
   665         var _el = $(this);
   668         if (_this.dragging_type == "link" && _el.attr("occurrence-type") == "narrative") {
   666         if (_this.dragging_type == "link") {
   669             _this.editing_occurrence.addDependency(_el.attr("occurrence-id"));
   667             _this.editing_occurrence.addDependency(_el.attr("occurrence-id"));
   670         }
   668         }
   671     });
   669     });
   672     
   670     
   673     this.$.find('.Tl-Link').mousedown(function() {
   671     this.$.find('.Tl-Link').mousedown(function() {
   674         var _el = $(this).parent();
   672         var _el = $(this).parent(),
   675         _this.editing_occurrence = _this.getOccurrence(_el.attr("occurrence-type"),_el.attr("occurrence-id"));
   673             _id = _el.attr("occurrence-id");
       
   674         _this.editing_occurrence = _this.getOccurrence(_id);
   676         if (typeof _this.editing_occurrence !== "undefined" && !_this.editing_occurrence.locked) {
   675         if (typeof _this.editing_occurrence !== "undefined" && !_this.editing_occurrence.locked) {
   677             _this.dragging_type = "link";
   676             _this.dragging_type = "link";
   678             _this.editing_occurrence.editing = true;
   677             _this.editing_occurrence.editing = true;
   679         }
   678         }
   680     })
   679     })
   731     this.timeline = _timeline;
   730     this.timeline = _timeline;
   732 }
   731 }
   733 
   732 
   734 Tlns.Classes.Occurrence.prototype.update = function(_type, _data) {
   733 Tlns.Classes.Occurrence.prototype.update = function(_type, _data) {
   735     this.type = _type;
   734     this.type = _type;
   736     this.id = _data.id || Tlns.Utils.guid();
   735     this.original_id = _data.id || Tlns.Utils.guid();
       
   736     this.id = _type + "_" + this.original_id;
   737     this.date = _data.date || _data.datePublication;
   737     this.date = _data.date || _data.datePublication;
   738     this.title = _data.titre || "<untitled>";
   738     this.title = _data.titre || "<untitled>";
   739     this.univers_id = _data.univers;
   739     this.univers_id = _data.univers;
   740     this.univers = this.timeline.getUnivers(this.univers_id);
   740     this.univers = this.timeline.getUnivers(this.univers_id);
   741     this.status = _data.statut;
   741     this.status = _data.statut;
   742     this.published = _data.publie || false;
   742     this.published = _data.publie || false;
   743     this.locked = _data.verrouille || false;
   743     this.locked = _data.verrouille || false;
   744     this.characters = _data.personnagesSecondaires || [];
   744     this.characters = _data.personnagesSecondaires || [];
   745     this.dependsOn = _data.dependDe || [];
   745     this.dependsOn = _(_data.dependDe || []).map(function(_id) {
       
   746         return "narrative_" + _id;
       
   747     });
   746     this.description = _data.description || "";
   748     this.description = _data.description || "";
   747 }
   749 }
   748 
   750 
   749 Tlns.Classes.Occurrence.prototype.addDependency = function(_id) {
   751 Tlns.Classes.Occurrence.prototype.addDependency = function(_id) {
   750     if (_(this.dependsOn).indexOf(_id) == -1) {
   752     if (_(this.dependsOn).indexOf(_id) == -1) {