timeline/js/timeline.js
changeset 89 6b1a038edbf7
parent 88 8bab0eb0d791
child 90 50e3c4ba168a
equal deleted inserted replaced
88:8bab0eb0d791 89:6b1a038edbf7
    19     var _options = _options || {};
    19     var _options = _options || {};
    20     _(_defaults).each(function(_v, _k) {
    20     _(_defaults).each(function(_v, _k) {
    21         if(/^m(in|ax)_/.test(_k)) {
    21         if(/^m(in|ax)_/.test(_k)) {
    22             var _tab = _k.split('_')
    22             var _tab = _k.split('_')
    23             if( typeof _object[_tab[1]] !== "undefined") {
    23             if( typeof _object[_tab[1]] !== "undefined") {
    24                 var _fn = (_tab[0] === "min" ? Math.max : Math.min);
    24                 var _fn = Math[_tab[0] === "max" ? "min":"max"];
    25                 _object[_tab[1]] = _fn(_object[_tab[1]], _v);
    25                 _object[_tab[1]] = _fn(_object[_tab[1]], _v);
    26             }
    26             }
    27         } else {
    27         } else {
    28             if( typeof _options[_k] !== "undefined") {
    28             if( typeof _options[_k] !== "undefined") {
    29                 _object[_k] = _options[_k];
    29                 _object[_k] = _options[_k];
    38     if (typeof _date !== "object") {
    38     if (typeof _date !== "object") {
    39         _date = new Date(parseInt(_date));
    39         _date = new Date(parseInt(_date));
    40     }
    40     }
    41     var _params = {
    41     var _params = {
    42         hours: _date.getHours(),
    42         hours: _date.getHours(),
       
    43         isDayStart: !_date.getHours(),
    43         "0hours": Tlns.Utils.zeroPad(_date.getHours()),
    44         "0hours": Tlns.Utils.zeroPad(_date.getHours()),
    44         minutes: _date.getMinutes(),
    45         minutes: _date.getMinutes(),
    45         "0minutes": Tlns.Utils.zeroPad(_date.getMinutes()),
    46         "0minutes": Tlns.Utils.zeroPad(_date.getMinutes()),
    46         seconds: _date.getSeconds(),
    47         seconds: _date.getSeconds(),
    47         "0seconds": Tlns.Utils.zeroPad(_date.getSeconds()),
    48         "0seconds": Tlns.Utils.zeroPad(_date.getSeconds()),
   106         date: _d,
   107         date: _d,
   107         text: Tlns.Utils.zeroPad(_d) + '/' + Tlns.Utils.zeroPad(_m) + '/' + _y
   108         text: Tlns.Utils.zeroPad(_d) + '/' + Tlns.Utils.zeroPad(_m) + '/' + _y
   108     }
   109     }
   109 }
   110 }
   110 
   111 
   111 Tlns.Utils.clickActiveProcess = function(_el) {
       
   112     if (_el.hasClass("Ls-Active")) {
       
   113         if (!_el.siblings(":not(.Ls-Active)").length) {
       
   114             _el.siblings().removeClass("Ls-Active");
       
   115         } else {
       
   116             if (!_el.siblings(".Ls-Active").length) {
       
   117                 _el.siblings().addClass("Ls-Active");
       
   118             }
       
   119             _el.removeClass("Ls-Active");
       
   120         }
       
   121     } else {
       
   122         _el.addClass("Ls-Active");
       
   123     }
       
   124 }
       
   125 
       
   126 /* Defaults */
   112 /* Defaults */
   127 
   113 
   128 Tlns.Defaults.Timeline = {
   114 Tlns.Defaults.Timeline = {
   129     email: "",
   115     email: "",
   130     token: "",
   116     token: "",
   134     min_width : 400,
   120     min_width : 400,
   135     min_height : 100,
   121     min_height : 100,
   136     main_width : 700,
   122     main_width : 700,
   137     linelabels : [],
   123     linelabels : [],
   138     timescales : [{
   124     timescales : [{
   139         label : "Mois",
       
   140         span : 32 * 86400 * 1000,
       
   141         grid_interval : 5 * 86400 * 1000,
       
   142         grid_date_format : '{{dayOfMonth}} {{shortMonthName}}',
       
   143         start_date_format : '{{dayOfMonth}} {{shortMonthName}}',
       
   144         end_date_format : '{{dayOfMonth}} {{shortMonthName}} {{year}}'
       
   145     }, {
       
   146         label : "Semaine",
   125         label : "Semaine",
   147         span : 8 * 86400 * 1000,
   126         span : 7 * 86400 * 1000,
   148         grid_interval : 86400 * 1000,
   127         grid_interval : 86400 * 1000,
   149         grid_date_format : '{{shortDayOfWeek}} {{0dayOfMonth}}/{{0monthNumber}}',
   128         grid_date_format : '{{dayOfMonth}} {{monthName}}',
   150         start_date_format : '{{dayOfMonth}} {{shortMonthName}}',
   129         start_date_format : '{{dayOfMonth}} {{shortMonthName}}',
   151         end_date_format : '{{dayOfMonth}} {{shortMonthName}}'
   130         end_date_format : '{{dayOfMonth}} {{shortMonthName}}'
   152     }, {
   131     }, {
   153         label : "2 jours",
   132         label : "3 jours",
   154         span : 2 * 86400 * 1000,
   133         span : 3 * 86400 * 1000,
   155         grid_interval : 8 * 3600 * 1000,
   134         grid_interval : 6 * 3600 * 1000,
   156         grid_date_format : '{{shortDayOfWeek}} {{0dayOfMonth}}/{{0monthNumber}} {{hours}}h',
   135         grid_date_format : '{{^isDayStart}}{{0hours}}h{{0minutes}}{{/isDayStart}}{{#isDayStart}}{{dayOfMonth}} {{shortMonthName}}{{/isDayStart}}',
   157         start_date_format : '{{dayOfMonth}} {{shortMonthName}}',
   136         start_date_format : '{{dayOfMonth}} {{shortMonthName}}',
   158         end_date_format : '{{dayOfMonth}} {{shortMonthName}}'
   137         end_date_format : '{{dayOfMonth}} {{shortMonthName}}'
   159     }, {
   138     }, {
   160         label : "Demi-Journée",
   139         label : "Journée",
   161         span : 12 * 3600 * 1000,
   140         span : 86400 * 1000,
   162         grid_interval : 2 * 3600 * 1000,
   141         grid_interval : 2 * 3600 * 1000,
   163         grid_date_format : '{{hours}}h',
   142         grid_date_format : '{{^isDayStart}}{{0hours}}h{{0minutes}}{{/isDayStart}}{{#isDayStart}}{{dayOfMonth}} {{shortMonthName}}{{/isDayStart}}',
   164         start_date_format : '{{dayOfMonth}} {{shortMonthName}} {{hours}}h',
   143         start_date_format : '{{dayOfMonth}} {{shortMonthName}} {{hours}}h',
   165         end_date_format : '{{dayOfMonth}} {{shortMonthName}} {{hours}}h'
   144         end_date_format : '{{dayOfMonth}} {{shortMonthName}} {{hours}}h'
   166     }, {
   145     }, {
   167         label : "3 Heures",
   146         label : "Demi-Journée",
   168         span : 3 * 3600 * 1000,
   147         span : 6 * 3600 * 1000,
   169         grid_interval : 30 * 60 * 1000,
   148         grid_interval : 3600 * 1000,
   170         grid_date_format : '{{0hours}}:{{0minutes}}',
   149         grid_date_format : '{{^isDayStart}}{{0hours}}h{{0minutes}}{{/isDayStart}}{{#isDayStart}}{{dayOfMonth}} {{shortMonthName}}{{/isDayStart}}',
   171         start_date_format : '{{dayOfMonth}} {{shortMonthName}} {{0hours}}:{{0minutes}}',
   150         start_date_format : '{{dayOfMonth}} {{shortMonthName}} {{hours}}h',
   172         end_date_format : '{{0hours}}:{{0minutes}}'
   151         end_date_format : '{{dayOfMonth}} {{shortMonthName}} {{hours}}h'
   173     }, {
       
   174         label : "1 Heure",
       
   175         span : 60 * 60 * 1000,
       
   176         grid_interval : 15 * 60 * 1000,
       
   177         grid_date_format : '{{0hours}}:{{0minutes}}',
       
   178         start_date_format : '{{dayOfMonth}} {{shortMonthName}} {{0hours}}:{{0minutes}}',
       
   179         end_date_format : '{{0hours}}:{{0minutes}}'
       
   180     }],
   152     }],
   181     level: 0,
   153     level: 0,
   182     central_time: 0,
   154     central_time: 0,
   183     sync_now: true,
   155     sync_now: true,
   184     api_endpoint: "",
   156     api_endpoint: "",
   185     api_method: "fetchAll",
   157     api_method: "searchForTimelineEdito",
   186     occurrences: [],
   158     occurrences: [],
   187     cluster_spacing: 12,
   159     cluster_spacing: 12,
   188     tooltip_date_format: '{{dayOfMonth}} {{shortMonthName}} {{year}} {{0hours}}:{{0minutes}}',
   160     tooltip_date_format: '{{dayOfMonth}} {{shortMonthName}} {{year}} {{0hours}}:{{0minutes}}',
   189     statuses: {
   161     statuses: {
   190         "valide": "Validée",
   162         "valide": "Validée",
   197     Tlns.Defaults.Timeline.timescales[_i].level = _i;
   169     Tlns.Defaults.Timeline.timescales[_i].level = _i;
   198 }
   170 }
   199 
   171 
   200 /* Templates */
   172 /* Templates */
   201 
   173 
   202 Tlns.Templates.Timeline = '<ul class="Onglets"><li class="Onglet-Tl active">Frise chronologique</li><li class="Onglet-Ls">Liste des occurrences</li></ul><div class="Tl-Main"><div class="Tl-TopBar">'
   174 Tlns.Templates.Timeline = '<div class="Tl-Main"><div class="Tl-Grid"></div><div class="Tl-TopBar"></div>'
   203     + '<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>'
       
   204     + '<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>'
       
   205     + '<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>'
       
   206     + '<div class="Tl-BottomPart"><ul class="Tl-UniversLabels"></ul>'
   175     + '<div class="Tl-BottomPart"><ul class="Tl-UniversLabels"></ul>'
   207     + '<div class="Tl-MainPart"><div class="Tl-Layer Tl-Grid"></div><div class="Tl-Layer Tl-Occurrences"></div>'
   176     + '<div class="Tl-MainPart"><div class="Tl-Occurrences"></div>'
   208     + '</div>'
   177     + '</div>'
   209     + '<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></div>'
   178     + '<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></div>'
   210     
   179     
   211     +'<div class="Ls-Main"><div class="Ls-Filtres">'
   180 Tlns.Templates.Univers = '<div class="Tl-UniversText">{{title}}</div>';
   212     + '<div class="Ls-Column"><h2>Filtres&nbsp;:</h2><h3>Univers&nbsp;:</h3><ul class="Ls-Univers"></ul></div>'
       
   213     + '<div class="Ls-Column"><h3>Type d\'occurrence&nbsp;:</h3><ul class="Ls-Occtypes"><li data="narrative" class="Ls-Critere Ls-Active Ls-CrWithIcon"><div class="Ls-OccIcon Tl-Occnarrative"></div>Narratives</li><li data="publication" class="Ls-Critere Ls-Active Ls-CrWithIcon"><div class="Ls-OccIcon Tl-Occpublication"></div>de Publication</li></ul>'
       
   214     + '<h3>Statut&nbsp;:</h3><ul class="Ls-Occstatuses"><li data="a_realiser" class="Ls-Critere Ls-Active Ls-CrWithIcon"><div class="Ls-OccIcon Tl-Occpublication Tl-Occa_realiser"></div>À réaliser</li><li data="a_valider" class="Ls-Critere Ls-Active Ls-CrWithIcon"><div class="Ls-OccIcon Tl-Occpublication Tl-Occa_valider"></div>À valider</li><li data="valide" class="Ls-Critere Ls-Active Ls-CrWithIcon"><div class="Ls-OccIcon Tl-Occpublication Tl-Occvalide"></div>Validé</li></ul></div>'
       
   215     + '<div class="Ls-Column"><h3>Format&nbsp;:</h3><ul class="Ls-Formats"></ul><h3>Est au JT&nbsp;:</h3><ul class="Ls-IsJt"><li class="Ls-Critere Ls-Active" data="1">Oui</li><li class="Ls-Critere Ls-Active" data="0">Non</li></ul></div>'
       
   216     + '<div class="Ls-Column"><h3>Réinitialiser filtres&nbsp;:</h3><ul><li class="Ls-Critere Ls-Active Ls-All">Tous les contenus</li></ul><h3>Recherche par titre&nbsp;:</h3><p><input class="Ls-Search" type="search" placeholder="Rechercher" /></p><h3>Date&nbsp;:</h3><p><label class="Ls-Label">Du </label><input class="Ls-From-Date Ls-Input" /></p><p><label class="Ls-Label">à </label><input class="Ls-From-Time Ls-Input" /></p><p><label class="Ls-Label">Au </label><input class="Ls-To-Date Ls-Input" /></p><p><label class="Ls-Label">à </label><input class="Ls-To-Time Ls-Input" /></p></div>'
       
   217     + '</div><div class="Ls-Resultats"><h2>Occurrences&nbsp;:</h2><ul class="Ls-Occurrences"></ul></div></div>';
       
   218 
       
   219 Tlns.Templates.Univers = '<span class="Tl-UniversText">{{title}}</span>';
       
   220 
       
   221 Tlns.Templates.Univers_List = '{{#univers}}<li data="{{id}}" class="Ls-Critere Ls-Active">{{title}}</li>{{/univers}}';
       
   222 
       
   223 Tlns.Templates.Formats_List = '{{#formats}}<li class="Ls-Critere Ls-Active">{{.}}</li>{{/formats}}';
       
   224 
   181 
   225 Tlns.Templates.Occurrence = '{{#clusters}}<div class="Tl-Cluster" style="left: {{x}}px; top: {{y}}px;" cluster-contents="{{contents}}">'
   182 Tlns.Templates.Occurrence = '{{#clusters}}<div class="Tl-Cluster" style="left: {{x}}px; top: {{y}}px;" cluster-contents="{{contents}}">'
   226     + '<div class="Tl-ClusterCount">{{occurrences.length}}</div></div>{{/clusters}}'
   183     + '<div class="Tl-ClusterCount">{{occurrences.length}}</div></div>{{/clusters}}'
   227     + '{{#occurrences}}<div class="Tl-Occurrence Tl-OccOnGrid Tl-Occ{{type}} Tl-Occ{{status}}{{#editing}} Tl-Editing{{/editing}}" occurrence-id="{{id}}" style="left: {{x}}px; top: {{y}}px;">'
   184     + '{{#occurrences}}<div class="Tl-Occurrence Tl-OccOnGrid Tl-Occ{{type}} Tl-Occ{{status}}{{#editing}} Tl-Editing{{/editing}}" occurrence-id="{{id}}" style="left: {{x}}px; top: {{y}}px;">'
   228 //  + '{{#locked}}<div class="Tl-Locked"></div>{{/locked}}'
   185 //  + '{{#locked}}<div class="Tl-Locked"></div>{{/locked}}'
   229     + '</div>{{/occurrences}}{{#open_cluster}}<div class="Tl-ClusterOverlay" style="left: {{x}}px; top: {{y}}px;">'
   186     + '</div>{{/occurrences}}{{#open_cluster}}<div class="Tl-ClusterOverlay" style="left: {{x}}px; top: {{y}}px;">'
   230     + '{{#occurrences}}<div class="Tl-Occurrence Tl-OccInCluster Tl-Occ{{type}} Tl-Occ{{status}}{{#editing}} Tl-Editing{{/editing}}" occurrence-id="{{id}}">'
   187     + '{{#occurrences}}<div class="Tl-Occurrence Tl-OccInCluster Tl-Occ{{type}} Tl-Occ{{status}}{{#editing}} Tl-Editing{{/editing}}" occurrence-id="{{id}}">'
   231     + '{{#locked}}<div class="Tl-Locked"></div>{{/locked}}</div>{{/occurrences}}</div>{{/open_cluster}}';
   188     + '{{#locked}}<div class="Tl-Locked"></div>{{/locked}}</div>{{/occurrences}}</div>{{/open_cluster}}';
   232 
   189 
   233 Tlns.Templates.Occurrence_List = '{{#occurrences}}<li class="Ls-Occurrence" data-id="{{id}}"><div class="Ls-OccIcon Tl-Occ{{type}} Tl-Occ{{status}}"></div><h4 class="Ls-Occurrence-Title"><a href="#">{{title}}</a></h4>'
       
   234     + '<p class="Ls-Occ-More">{{formatted_date}} &mdash; {{univers.title}} &mdash; {{translated_status}}{{#format}} &mdash; {{format}}{{/format}}</p><div style="clear:both;"></div></li>{{/occurrences}}';
       
   235 
       
   236 Tlns.Templates.OccurrenceTooltip = '<h3 class="Tl-Tooltip-Title">{{title}}</h3><p class="Tl-Tooltip-Date">{{formatted_date}} &mdash; {{translated_status}} &mdash; {{#jt}}Au JT{{/jt}}{{^jt}}Hors JT{{/jt}}{{#format}} &mdash; {{format}}{{/format}}</p>'
   190 Tlns.Templates.OccurrenceTooltip = '<h3 class="Tl-Tooltip-Title">{{title}}</h3><p class="Tl-Tooltip-Date">{{formatted_date}} &mdash; {{translated_status}} &mdash; {{#jt}}Au JT{{/jt}}{{^jt}}Hors JT{{/jt}}{{#format}} &mdash; {{format}}{{/format}}</p>'
   237     + '<p class="Tl-Tooltip-Description">{{description}}</p>'
   191     + '<p class="Tl-Tooltip-Description">{{description}}</p>'
   238 //    + '<p class="Tl-Tooltip-Characters">{{univers.mainCharacter}}{{#characters}}, {{.}}{{/characters}}</p>'
   192 //    + '<p class="Tl-Tooltip-Characters">{{univers.mainCharacter}}{{#characters}}, {{.}}{{/characters}}</p>'
   239 
   193 
   240 /* Classes */
   194 /* Classes */
   249     
   203     
   250     this.$.find('.Tl-Main').css({
   204     this.$.find('.Tl-Main').css({
   251         width : this.width + "px",
   205         width : this.width + "px",
   252         height : this.height + "px"
   206         height : this.height + "px"
   253     });
   207     });
   254     this.main_height = this.height - this.$.find('.Tl-TopBar').outerHeight();
   208     this.top_height = this.$.find('.Tl-TopBar').outerHeight();
       
   209     this.main_height = this.height - this.top_height;
   255     //this.main_height = this.height - 27;
   210     //this.main_height = this.height - 27;
   256     this.$.find('.Tl-BottomPart').css("height", this.main_height + "px");
   211     this.$.find('.Tl-BottomPart').css("height", this.main_height + "px");
   257     this.$.find('.Tl-MainPart').css("width", this.main_width + "px");
   212     this.$.find('.Tl-MainPart, .Tl-Grid').css("width", this.main_width + "px");
   258     this.$.find('.Tl-Overlay-Container').css("left", (this.$.find('.Tl-BottomPart').outerWidth() - this.main_width) + "px");
   213     this.$.find('.Tl-Overlay-Container').css("left", (this.$.find('.Tl-BottomPart').outerWidth() - this.main_width) + "px");
   259     
   214     
   260     var _o = this.$.find('.Tl-MainPart').offset();
   215     var _o = this.$.find('.Tl-MainPart').offset();
   261     this.dragging_bounds = {
   216     this.dragging_bounds = {
   262         left: _o.left,
   217         left: _o.left,
   272     
   227     
   273     this.throttledDrawGrid = _.throttle(function() {
   228     this.throttledDrawGrid = _.throttle(function() {
   274         _this.drawGrid();
   229         _this.drawGrid();
   275     }, 150);
   230     }, 150);
   276     
   231     
   277     this.throttledDrawList = _.throttle(function() {
       
   278         _this.drawList();
       
   279     }, 150);
       
   280     
       
   281     this.setLevel(this.level);
   232     this.setLevel(this.level);
   282     
   233      
   283     this.$.find('.Tl-TopBar-Timescales>div').click(function() {
       
   284         _this.setLevel($(this).attr("data-level"));
       
   285     });
       
   286     
       
   287     this.$.find('.Tl-TopBar-SyncButton').click(function() {
       
   288         _this.sync_now = !_this.sync_now;
       
   289         _this.changeSpan();
       
   290     })
       
   291     
       
   292     this.$.find('.Tl-TopBar-PreviousButton').click(function() {
       
   293         _this.offsetTime(-_this.timescales[_this.level].span / 4);
       
   294     });
       
   295     
       
   296     this.$.find('.Tl-TopBar-NextButton').click(function() {
       
   297         _this.offsetTime(_this.timescales[_this.level].span / 4);
       
   298     });
       
   299     
       
   300     this.$.find('.Tl-MainPart').mousedown(function(_event) {
   234     this.$.find('.Tl-MainPart').mousedown(function(_event) {
   301         _this.onMouseDown(_event);
   235         _this.onMouseDown(_event);
   302         return false;
   236         return false;
   303     });
   237     });
   304     
   238     
   329     this.$.find('.Tl-Overlay-Box').mouseover(function(_event) {
   263     this.$.find('.Tl-Overlay-Box').mouseover(function(_event) {
   330         $(this).show();
   264         $(this).show();
   331     }).mouseout(function(_event) {
   265     }).mouseout(function(_event) {
   332         $(this).hide();
   266         $(this).hide();
   333     });
   267     });
   334         
   268     
   335     
       
   336     /* LIST */
       
   337     
       
   338     this.$.find("li.Ls-Critere").click(function() {
       
   339         Tlns.Utils.clickActiveProcess($(this));
       
   340         _this.throttledDrawList();
       
   341     });
       
   342     this.$.find(".Ls-Search").bind("keyup change click", function() {
       
   343         _this.throttledDrawList();
       
   344     });
       
   345     this.$.find(".Ls-From-Date, .Ls-To-Date").datepicker(
       
   346         {
       
   347             dateFormat: "dd/mm/yy",
       
   348             dayNames: [ "Dimanche", "Lundi", "Mardi", "Mercredi", "Jeudi", "Vendredi", "Samedi" ],
       
   349             dayNamesShort: [ "Dim", "Lun", "Mar", "Mer", "Jeu", "Ven", "Sam" ],
       
   350             dayNamesMin: [ "D", "L", "Ma", "Me", "J", "V", "S" ],
       
   351             monthNames:  [ "Janvier", "Février", "Mars", "Avril", "Mai", "Juin", "Juillet", "Août", "Septembre", "Octobre", "Novembre", "Décembre" ],
       
   352             monthNamesShort: [ "Jan", "Fév", "Mar", "Avr", "Mai", "Jun", "Jul", "Aoû", "Sep", "Oct", "Nov", "Déc" ],
       
   353             showOtherMonths: true,
       
   354             selectOtherMonths: true
       
   355         }
       
   356     ).change(function() {
       
   357         var _val = $(this).val();
       
   358         if (_val) {
       
   359             $(this).val(Tlns.Utils.dateFieldProcess( _val ).text);
       
   360         }
       
   361         _this.drawList();
       
   362     }).bind("keyup", function() {
       
   363         _this.throttledDrawList();
       
   364     });
       
   365     this.$.find(".Ls-From-Time, .Ls-To-Time").change(function() {
       
   366         var _val = $(this).val();
       
   367         if (_val) {
       
   368             $(this).val(Tlns.Utils.timeFieldProcess( _val ).text);
       
   369         }
       
   370         _this.throttledDrawList();
       
   371     }).bind("keyup", function() {
       
   372         _this.throttledDrawList();
       
   373     });
       
   374     this.$.find(".Ls-All").click(function() {
       
   375        _this.$.find(".Ls-Critere").addClass("Ls-Active");
       
   376        _this.throttledDrawList();
       
   377     });
       
   378     this.$.find(".Ls-None").click(function() {
       
   379        _this.$.find(".Ls-Critere").removeClass("Ls-Active");
       
   380        _this.throttledDrawList();
       
   381     });
       
   382     
       
   383     this.$.find(".Onglet-Tl").click(function() {
       
   384         _this.$.find(".Tl-Main").show();
       
   385         _this.$.find(".Ls-Main").hide();
       
   386         _this.$.find(".Onglet-Ls").removeClass("active");
       
   387         _this.$.find(".Onglet-Tl").addClass("active");
       
   388         _this.throttledDrawGrid();
       
   389     });
       
   390     
       
   391     this.$.find(".Onglet-Ls").click(function() {
       
   392         _this.$.find(".Ls-Main").show();
       
   393         _this.$.find(".Tl-Main").hide();
       
   394         _this.$.find(".Onglet-Tl").removeClass("active");
       
   395         _this.$.find(".Onglet-Ls").addClass("active");
       
   396         _this.throttledDrawList();
       
   397     });
       
   398        
   269        
   399     this.onUniversLoaded(this.linelabels);
   270     this.onUniversLoaded(this.linelabels);
   400     
   271     
   401 }
   272 }
   402 
   273 
   461     }
   332     }
   462     for(var _i = 0; _i < _data.length; _i++) {
   333     for(var _i = 0; _i < _data.length; _i++) {
   463         this.univers.push(new Tlns.Classes.Univers(_data[_i], this, _i));
   334         this.univers.push(new Tlns.Classes.Univers(_data[_i], this, _i));
   464     }
   335     }
   465     
   336     
   466     this.$.find(".Ls-Univers").html(
       
   467         Mustache.to_html(
       
   468             Tlns.Templates.Univers_List,
       
   469             {
       
   470                 univers: _(this.univers).map(function(_u) {
       
   471                     return {
       
   472                         id: _u.id,
       
   473                         title: _u.title.replace(/(^.{10,20})[\s].+$/m,'$1&hellip;')
       
   474                     }
       
   475                 })
       
   476             }
       
   477         )
       
   478     );
       
   479     var _this = this;
       
   480     this.$.find(".Ls-Univers li.Ls-Critere").click( function() {
       
   481         Tlns.Utils.clickActiveProcess($(this));
       
   482         _this.throttledDrawList();
       
   483     });
       
   484     this.loadOccurrences();
   337     this.loadOccurrences();
   485 }
   338 }
   486 
   339 
   487 Tlns.Classes.Timeline.prototype.offsetTime = function(_timeOffset) {
   340 Tlns.Classes.Timeline.prototype.offsetTime = function(_timeOffset) {
   488     this.setTime(this.central_time + _timeOffset);
   341     this.setTime(this.central_time + _timeOffset);
   494     this.changeSpan();
   347     this.changeSpan();
   495 }
   348 }
   496 
   349 
   497 Tlns.Classes.Timeline.prototype.setLevel = function(_level) {
   350 Tlns.Classes.Timeline.prototype.setLevel = function(_level) {
   498     if (_level >= 0 && _level < this.timescales.length) {
   351     if (_level >= 0 && _level < this.timescales.length) {
   499         this.$.find('.Tl-TopBar-Timescales>div').each(function() {
       
   500             var _el = $(this);
       
   501             if (_el.attr("data-level") == _level) {
       
   502                 _el.addClass("active");
       
   503             } else {
       
   504                 _el.removeClass("active");
       
   505             }
       
   506         });
       
   507         this.level = _level;
   352         this.level = _level;
   508         this.changeSpan();
   353         this.changeSpan();
   509     }
   354     }
   510 }
   355 }
   511 
   356 
   516     }
   361     }
   517     var _timescale = this.timescales[this.level];
   362     var _timescale = this.timescales[this.level];
   518     this.current_scale = this.main_width / (_timescale.span);
   363     this.current_scale = this.main_width / (_timescale.span);
   519     this.start_time = this.central_time - (_timescale.span / 2);
   364     this.start_time = this.central_time - (_timescale.span / 2);
   520     this.end_time = this.central_time + (_timescale.span / 2);
   365     this.end_time = this.central_time + (_timescale.span / 2);
   521     this.$.find(".Ls-From-Time").val(Tlns.Utils.dateFormat(this.start_time, '{{0hours}}:{{0minutes}}'));
       
   522     this.$.find(".Ls-From-Date").val(Tlns.Utils.dateFormat(this.start_time, '{{0dayOfMonth}}/{{0monthNumber}}/{{year}}'));
       
   523     this.$.find(".Ls-To-Time").val(Tlns.Utils.dateFormat(this.end_time, '{{0hours}}:{{0minutes}}'));
       
   524     this.$.find(".Ls-To-Date").val(Tlns.Utils.dateFormat(this.end_time, '{{0dayOfMonth}}/{{0monthNumber}}/{{year}}'));
       
   525     this.throttledDrawGrid();
   366     this.throttledDrawGrid();
   526     this.throttledDrawList();
       
   527 }
   367 }
   528 
   368 
   529 Tlns.Classes.Timeline.prototype.drawGrid = function() {
   369 Tlns.Classes.Timeline.prototype.drawGrid = function() {
   530     if (this.sync_now) {
       
   531         this.$.find('.Tl-TopBar-SyncButton').addClass("active");
       
   532     } else {
       
   533         this.$.find('.Tl-TopBar-SyncButton').removeClass("active");
       
   534     }
       
   535     var _now = new Date().valueOf(),
   370     var _now = new Date().valueOf(),
   536         _timescale = this.timescales[this.level],
   371         _timescale = this.timescales[this.level],
   537         _offset = new Date().getTimezoneOffset() * 60000,
   372         _offset = new Date().getTimezoneOffset() * 60000,
   538         _grid_width = Math.floor(_timescale.grid_interval * this.current_scale),
   373         _grid_width = Math.floor(_timescale.grid_interval * this.current_scale),
   539         _roundstart = Math.floor((this.start_time - _offset) / _timescale.grid_interval) * _timescale.grid_interval + _offset,
   374         _roundstart = Math.floor((this.start_time - _offset) / _timescale.grid_interval) * _timescale.grid_interval + _offset,
   540         _html = '';
   375         _html = '';
   541     this.$.find('.Tl-TopBar-TimeSpan').html(Tlns.Utils.dateFormat(this.start_time, _timescale.start_date_format) + ' - ' + Tlns.Utils.dateFormat(this.end_time, _timescale.end_date_format));
       
   542     for (var _t = _roundstart; _t < this.end_time; _t += _timescale.grid_interval) {
   376     for (var _t = _roundstart; _t < this.end_time; _t += _timescale.grid_interval) {
   543         var _x = this.current_scale * (_t - this.start_time);
   377         var _x = this.current_scale * (_t - this.start_time);
   544         if (_x > 0) {
   378         if (_x > 0) {
   545             _html += '<div class="Tl-Grid-Column" style="width:' + _grid_width + 'px; left: ' + _x + 'px">'
   379             _html += '<div class="Tl-Grid-Column" style="width:' + _grid_width + 'px; left: ' + _x + 'px">'
   546             + '<div class="Tl-Grid-Label">' + Tlns.Utils.dateFormat(_t, _timescale.grid_date_format) + '</div></div>';
   380             + '<div class="Tl-Grid-Label">' + Tlns.Utils.dateFormat(_t, _timescale.grid_date_format) + '</div></div>';
   571         this.createOrUpdateOccurrence(_data.data[_i]);
   405         this.createOrUpdateOccurrence(_data.data[_i]);
   572     }
   406     }
   573     if (!this.mouse_down) {
   407     if (!this.mouse_down) {
   574         this.drawOccurrences();
   408         this.drawOccurrences();
   575     }
   409     }
   576     this.$.find(".Ls-Formats").html(
       
   577         Mustache.to_html(
       
   578             Tlns.Templates.Formats_List,
       
   579             {
       
   580                 formats: _(this.occurrences).chain().pluck('format').unique().value()
       
   581             }
       
   582         )
       
   583     );
       
   584     var _this = this;
       
   585     this.$.find(".Ls-Formats li.Ls-Critere").click( function() {
       
   586         Tlns.Utils.clickActiveProcess($(this));
       
   587         _this.throttledDrawList();
       
   588     });
       
   589     this.throttledDrawList();
       
   590 }
   410 }
   591 
   411 
   592 Tlns.Classes.Timeline.prototype.deleteOccurrence = function(_id) {
   412 Tlns.Classes.Timeline.prototype.deleteOccurrence = function(_id) {
   593     this.occurrences = _(this.occurrences).reject(function(_occ) {
   413     this.occurrences = _(this.occurrences).reject(function(_occ) {
   594         return _occ.id == _id;
   414         return _occ.id == _id;
   761         }
   581         }
   762         _this.throttledDrawGrid();
   582         _this.throttledDrawGrid();
   763     })
   583     })
   764 }
   584 }
   765 
   585 
   766 Tlns.Classes.Timeline.prototype.drawList = function() {
       
   767     var _universfilter = this.$.find(".Ls-Univers li.Ls-Active").map(function(){return $(this).attr("data")}),
       
   768         _occtypefilter = this.$.find(".Ls-Occtypes li.Ls-Active").map(function(){return $(this).attr("data")}),
       
   769         _formatsfilter = this.$.find(".Ls-Formats li.Ls-Active").map(function(){return $(this).text()}),
       
   770         _statusfilter = this.$.find(".Ls-Occstatuses li.Ls-Active").map(function(){return $(this).attr("data")}),
       
   771         _jtfilter = this.$.find(".Ls-IsJt li.Ls-Active").map(function(){return !!+$(this).attr("data")}),
       
   772         _title = this.$.find(".Ls-Search").val() || "",
       
   773         _titleregexp = new RegExp( "(" + _title.replace(/(\W)/gm, "\\$1") + ")", "gim" ),
       
   774         _startdate = false,
       
   775         _enddate = false,
       
   776         _fromDate = this.$.find(".Ls-From-Date").val(),
       
   777         _toDate = this.$.find(".Ls-To-Date").val();
       
   778     if (_fromDate) {
       
   779         var _date = Tlns.Utils.dateFieldProcess(_fromDate),
       
   780             _time = Tlns.Utils.timeFieldProcess(this.$.find(".Ls-From-Time").val());
       
   781         _startdate = new Date(_date.year, _date.month - 1, _date.date, _time.hours, _time.minutes);
       
   782     }
       
   783     if (_toDate) {
       
   784         var _date = Tlns.Utils.dateFieldProcess(_toDate),
       
   785             _time = Tlns.Utils.timeFieldProcess(this.$.find(".Ls-To-Time").val());
       
   786         _enddate = new Date(_date.year, _date.month - 1, _date.date, _time.hours, _time.minutes);
       
   787     }
       
   788     this.$.find(".Ls-Occurrences").html(
       
   789         Mustache.to_html(
       
   790             Tlns.Templates.Occurrence_List,
       
   791             {
       
   792                 occurrences: _(this.occurrences).chain().filter(function(_occ) {
       
   793                     var _titletest = (!!_occ.title.match(_titleregexp)),
       
   794                         _keep = (
       
   795                                ( !_title || _titletest )
       
   796                             && _(_occtypefilter).include(_occ.type)
       
   797                             && _(_universfilter).include(_occ.univers_id)
       
   798                             && _(_statusfilter).include(_occ.status)
       
   799                             && _(_formatsfilter).include(_occ.format)
       
   800                             && _(_jtfilter).include(_occ.jt)
       
   801                             && ( !_fromDate || _occ.date >= _startdate )
       
   802                             && ( !_toDate || _occ.date <= _enddate )
       
   803                         );
       
   804                     return _keep;
       
   805                 }).sortBy(function(_occ) {
       
   806                     return _occ.date;
       
   807                 }).value()
       
   808             }
       
   809         )
       
   810     );
       
   811     if (_title) {
       
   812         this.$.find(".Ls-Occurrence-Title").each(function() {
       
   813             $(this).html($(this).text().replace(_titleregexp, "<span style='background:yellow'>$1</span>"));
       
   814         });
       
   815     }
       
   816     this.$.find(".Ls-Occurrence").click(function() {
       
   817         var _id = $(this).attr("data-id"),
       
   818             _data = {
       
   819                 id: _id.replace(/^.*_/,''),
       
   820                 typeOccurrence: "Occurrence" + _id.replace(/_.*$/,'').replace(/^./,function(_l) { return _l.toUpperCase()})
       
   821             }
       
   822         return false;
       
   823     });
       
   824 }
       
   825 
       
   826 Tlns.Classes.Timeline.prototype.getUnivers = function(_id) {
   586 Tlns.Classes.Timeline.prototype.getUnivers = function(_id) {
   827     return _(this.univers).find(function(_univ) {
   587     return _(this.univers).find(function(_univ) {
   828         return (_univ.id == _id);
   588         return (_univ.id == _id);
   829     });
   589     });
   830 }
   590 }
   843     this.$label = $('<li>').css({
   603     this.$label = $('<li>').css({
   844         height : _timeline.univers_height + "px"
   604         height : _timeline.univers_height + "px"
   845     }).html(Mustache.to_html(Tlns.Templates.Univers, this));
   605     }).html(Mustache.to_html(Tlns.Templates.Univers, this));
   846     
   606     
   847     _timeline.$.find('.Tl-UniversLabels').append(this.$label);
   607     _timeline.$.find('.Tl-UniversLabels').append(this.$label);
       
   608     
       
   609     var txtdiv = this.$label.find(".Tl-UniversText");
       
   610     txtdiv.css("margin-top", Math.floor((_timeline.univers_height - txtdiv.height()) / 2));
   848 }
   611 }
   849 
   612 
   850 /*
   613 /*
   851  * Occurrence
   614  * Occurrence
   852  */
   615  */