eulalie: comparison timeline/js/timeline.js

Mercurial Mercurial > eulalie / comparison

summary | shortlog | changelog | graph | tags | bookmarks | branches | files | changeset | file | latest | revisions | annotate | diff | comparison | raw | help

timeline/js/timeline.js

changeset 74	e107c77600e8
parent 73	642ef9139fad
child 75	ef3377d7a4f7

equal deleted inserted replaced

-:642ef9139fad
+:e107c77600e8
 + '<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 Publication</span><div class="Tl-AddOccurrence Tl-Occpublication" occurrence-type="publication" 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.List = '<div class="Ls-Main"><h2>Filtres&nbsp;:</h2><h3>Titre</h3><p><input class="Ls-Search" type="search" placeholder="Rechercher" /></p><h3>Univers&nbsp;:</h3><ul class="Ls-Univers"></ul>'
++ '<h3>Type d\'occurrence</h3><ul class="Ls-Occtypes"><li><input type="checkbox" value="narrative" checked>Narratives</li><li><input type="checkbox" value="publication" checked>de Publication</li></ul></p>'
++ '<h2>Occurrences&nbsp;:</h2><ul class="Ls-Occurrences"></ul></div>';
 Tlns.Templates.Univers = '<span class="Tl-UniversText">{{title}}</span>';
+Tlns.Templates.Univers_List = '{{#univers}}<li><input type="checkbox" value="{{id}}" checked>{{title}}</li>{{/univers}}';
 Tlns.Templates.Occurrence = '{{#clusters}}<div class="Tl-Cluster Tl-Occ{{type}}" style="left: {{x}}px; top: {{y}}px;" cluster-contents="{{contents}}">'
 + '<div class="Tl-ClusterCount">{{occurrences.length}}</div></div>{{/clusters}}'
 + '{{#occurrences}}<div class="Tl-Occurrence Tl-OccOnGrid Tl-Occ{{type}}{{#editing}} Tl-Editing{{/editing}}" occurrence-id="{{id}}" style="left: {{x}}px; top: {{y}}px;">'
 + '{{#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;">'
 + '{{#occurrences}}<div class="Tl-Occurrence Tl-OccInCluster Tl-Occ{{type}}{{#editing}} Tl-Editing{{/editing}}" occurrence-id="{{id}}">'
 + '{{#locked}}<div class="Tl-Locked"></div>{{/locked}}<div class="Tl-Link"{{#editing}} style="display: block"{{/editing}}></div></div>{{/occurrences}}</div>{{/open_cluster}}';
+Tlns.Templates.Occurrence_List = '{{#occurrences}}<li><h3>{{title}}</h3><p><b>Type d\'occurrence&nbsp;:</b> {{type}}</p><p>'
++ '<b>Univers&nbsp;:</b> {{univers.title}}</p><p><b>Date&nbsp;:</b> {{formatted_date}}</p><p>{{description}}</p></li>{{/occurrences}}';
 Tlns.Templates.OccurrenceTooltip = '<h3 class="Tl-Tooltip-Title">{{title}}</h3><p class="Tl-Tooltip-Date">{{formatted_date}}</p>'
 + '<p class="Tl-Tooltip-Description">{{description}}</p><p class="Tl-Tooltip-Characters">{{univers.mainCharacter}}{{#characters}}, {{.}}{{/characters}}</p>'
 /* Classes */
 /* Loading Univers */
 $.getJSON(this.url_univers, function(_data) {
 _this.onUniversLoaded(_data);
 });
+/* LIST */
+$("body").append(Mustache.to_html(Tlns.Templates.List, this));
+$(".Ls-Main input").bind("click change keyup", function() {
+_this.drawList();
+});
 }
 Tlns.Classes.Timeline.prototype.onMouseDown = function(_event) {
 this.mouse_down = true;
 this.is_dragging = false;
 this.hideTooltip();
 switch (this.dragging_type) {
 case "occurrence":
 var _d = this.timeFromMouse(_event.pageX);
 this.editing_occurrence.date = _d;
+this.editing_occurrence.formatted_date = Tlns.Utils.dateFormat(this.editing_occurrence.date,this.tooltip_date_format);
 var _u = this.universFromMouse(_event.pageY);
 this.editing_occurrence.univers = this.univers[_u];
 this.editing_occurrence.univers_id = this.univers[_u].id;
 this.throttledDrawGrid();
 break;
 this.univers_height = Math.floor(this.main_height / _data.length);
 }
 for(var _i = 0; _i < _data.length; _i++) {
 this.univers.push(new Tlns.Classes.Univers(_data[_i], this, _i));
 }
+$(".Ls-Univers").html(Mustache.to_html(Tlns.Templates.Univers_List, this));
+var _this = this;
+$(".Ls-Univers input").bind("click change keyup", function() {
+_this.drawList();
+});
 this.loadOccurrences();
 }
 Tlns.Classes.Timeline.prototype.offsetTime = function(_timeOffset) {
 this.setTime(this.central_time + _timeOffset);
 if (_x > 0) {
 _html += '<div class="Tl-Grid-Column" style="width:' + _grid_width + 'px; left: ' + _x + 'px">'
 + '<div class="Tl-Grid-Label">' + Tlns.Utils.dateFormat(_t, _timescale.grid_date_format) + '</div></div>';
 }
 }
-/*
-for (var _t = _roundstart; _t < _tmax; _t += _timescale.grid_interval) {
-var _isMajor = !(Math.floor((_t - _offset) / _timescale.grid_interval) % _timescale.major_interval);
-_html += '<div class="Tl-Grid-Column' + ( _isMajor ? ' Tl-Grid-Major' : '' ) + '" style="width:' + _grid_width + 'px; left: ' + _scale * (_t - this.start_time) + 'px">'
-+ ( _isMajor ? '<div class="Tl-Grid-Label">' + Tlns.Utils.dateFormat(_t, _timescale.date_format) + '</div>' : '' ) + '</div>';
-}
-*/
 if (this.start_time <= _now && this.end_time >= _now) {
 _html += '<div class="Tl-Grid-Now" style="left: ' + this.current_scale * (_now - this.start_time) + 'px"></div>'
 }
 this.$.find('.Tl-Grid').html(_html);
 this.drawOccurrences();
 }
 }
 if (!this.mouse_down) {
 this.drawOccurrences();
 }
+this.drawList();
 }
 Tlns.Classes.Timeline.prototype.deleteOccurrence = function(_id) {
 this.occurrences = _(this.occurrences).reject(function(_occ) {
 return occ.id == _id;
 var _occurrence = _this.getOccurrence(_id);
 if (!_occurrence.locked) {
 _el.find('.Tl-Link').show();
 }
 if (!_this.is_dragging) {
-_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() {
 }
 _this.throttledDrawGrid();
 })
 }
+Tlns.Classes.Timeline.prototype.drawList = function() {
+var _universfilter = $(".Ls-Univers input:checked").map(function(){return this.value}),
+_occtypefilter = $(".Ls-Occtypes input:checked").map(function(){return this.value}),
+_title = $(".Ls-Search").val(),
+_titleregexp = new RegExp( "(" + _title.replace(/(\W)/gm, "\\$1") + ")", "gim" );
+$(".Ls-Occurrences").html(
+Mustache.to_html(
+Tlns.Templates.Occurrence_List,
+{
+occurrences: this.occurrences.filter(function(_occ) {
+var _titletest = (!!_occ.title.match(_titleregexp)),
+_keep = (
+( !_title || _titletest )
+&& (_(_occtypefilter).indexOf(_occ.type) !== -1)
+&& (_(_universfilter).indexOf(_occ.univers_id) !== -1)
+);
+return _keep;
+})
+}
+)
+);
+if (_title) {
+$(".Ls-Occurrences h3").each(function() {
+$(this).html($(this).text().replace(_titleregexp, "<span style='background:yellow'>$1</span>"));
+});
+}
+}
 Tlns.Classes.Timeline.prototype.getUnivers = function(_id) {
 return _(this.univers).find(function(_univ) {
 return (_univ.id == _id);
 });
 }
 Tlns.Classes.Occurrence.prototype.update = function(_type, _data) {
 this.type = _type;
 this.original_id = _data.id || Tlns.Utils.guid();
 this.id = _type + "_" + this.original_id;
 this.date = _data.date || _data.datePublication;
+this.formatted_date = Tlns.Utils.dateFormat(this.date,Tlns.Defaults.Timeline.tooltip_date_format);
 this.title = _data.titre || "<untitled>";
 this.univers_id = _data.univers;
 this.univers = this.timeline.getUnivers(this.univers_id);
 this.status = _data.statut;
 this.published = _data.publie || false;

eulalie