knight/datahub
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[view/timeline][s]: workarounds so that timeline can be init-ed automatically if created with a dom element.

Browse Source 
* This means you don't have to do view.trigger('view:show') after creating if the view element already in the dom.
* Verite Timeline is a bit problematic in that it cannot be passed a dom element but insists on being passed an id it looks up.
This commit is contained in:
Rufus Pollock 2012-06-10 15:15:57 +01:00
parent d2ce46cc42
commit 80d3576a6c
2 changed files with 33 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
dist/recline.js vendored
View File

@ -2755,12 +2755,17 @@ this.recline = this.recline || {};
this.recline.View = this.recline.View || {};
(function($, my) {
// ## Timeline
//
// Timeline view using http://timeline.verite.co/
my.Timeline = Backbone.View.extend({
tagName: 'div',
className: 'recline-timeline',
template: ' \
<div id="vmm-timeline-id"></div> \
<div class="recline-timeline"> \
<div id="vmm-timeline-id"></div> \
</div> \
',
// These are the default (case-insensitive) names of field that are used if found.
@ -2775,6 +2780,7 @@ my.Timeline = Backbone.View.extend({
this.timeline = new VMM.Timeline();
this._timelineIsInitialized = false;
this.bind('view:show', function() {
// only call _initTimeline once view in DOM as Timeline uses $ internally to look up element
if (self._timelineIsInitialized === false) {
self._initTimeline();
}
@ -2794,6 +2800,11 @@ my.Timeline = Backbone.View.extend({
this.state = new recline.Model.ObjectState(stateData);
this._setupTemporalField();
this.render();
// can only call _initTimeline once view in DOM as Timeline uses $
// internally to look up element
if ($(this.elementId).length > 0) {
this._initTimeline();
}
},
render: function() {
@ -2803,9 +2814,9 @@ my.Timeline = Backbone.View.extend({
},
_initTimeline: function() {
var $timeline = this.el.find(this.elementId);
// set width explicitly o/w timeline goes wider that screen for some reason
this.el.find(this.elementId).width(this.el.parent().width());
// only call _initTimeline once view in DOM as Timeline uses $ internally to look up element
$timeline.width(this.el.parent().width());
var config = {};
var data = this._timelineJSON();
this.timeline.init(data, this.elementId, config);
@ -2854,6 +2865,9 @@ my.Timeline = Backbone.View.extend({
},
_parseDate: function(date) {
if (!date) {
return null;
}
var out = date.trim();
out = out.replace(/(\d)th/g, '$1');
out = out.replace(/(\d)st/g, '$1');

19
src/view.timeline.js
View File

@ -4,12 +4,17 @@ this.recline = this.recline || {};
this.recline.View = this.recline.View || {};
(function($, my) {
// ## Timeline
//
// Timeline view using http://timeline.verite.co/
my.Timeline = Backbone.View.extend({
tagName: 'div',
className: 'recline-timeline',
template: ' \
<div id="vmm-timeline-id"></div> \
<div class="recline-timeline"> \
<div id="vmm-timeline-id"></div> \
</div> \
',
// These are the default (case-insensitive) names of field that are used if found.
@ -24,6 +29,7 @@ my.Timeline = Backbone.View.extend({
this.timeline = new VMM.Timeline();
this._timelineIsInitialized = false;
this.bind('view:show', function() {
// only call _initTimeline once view in DOM as Timeline uses $ internally to look up element
if (self._timelineIsInitialized === false) {
self._initTimeline();
}
@ -43,6 +49,11 @@ my.Timeline = Backbone.View.extend({
this.state = new recline.Model.ObjectState(stateData);
this._setupTemporalField();
this.render();
// can only call _initTimeline once view in DOM as Timeline uses $
// internally to look up element
if ($(this.elementId).length > 0) {
this._initTimeline();
}
},
render: function() {
@ -52,9 +63,9 @@ my.Timeline = Backbone.View.extend({
},
_initTimeline: function() {
var $timeline = this.el.find(this.elementId);
// set width explicitly o/w timeline goes wider that screen for some reason
this.el.find(this.elementId).width(this.el.parent().width());
// only call _initTimeline once view in DOM as Timeline uses $ internally to look up element
$timeline.width(this.el.parent().width());
var config = {};
var data = this._timelineJSON();
this.timeline.init(data, this.elementId, config);