/timeline/scripts/overview-painter.js

  1/*==================================================
  2 *  Overview Event Painter
  3 *==================================================
  4 */
  5
  6Timeline.OverviewEventPainter = function(params) {
  7    this._params = params;
  8    this._onSelectListeners = [];
  9    
 10    this._filterMatcher = null;
 11    this._highlightMatcher = null;
 12};
 13
 14Timeline.OverviewEventPainter.prototype.initialize = function(band, timeline) {
 15    this._band = band;
 16    this._timeline = timeline;
 17    
 18    this._eventLayer = null;
 19    this._highlightLayer = null;
 20};
 21
 22Timeline.OverviewEventPainter.prototype.getType = function() {
 23    return 'overview';
 24};
 25
 26Timeline.OverviewEventPainter.prototype.addOnSelectListener = function(listener) {
 27    this._onSelectListeners.push(listener);
 28};
 29
 30Timeline.OverviewEventPainter.prototype.removeOnSelectListener = function(listener) {
 31    for (var i = 0; i < this._onSelectListeners.length; i++) {
 32        if (this._onSelectListeners[i] == listener) {
 33            this._onSelectListeners.splice(i, 1);
 34            break;
 35        }
 36    }
 37};
 38
 39Timeline.OverviewEventPainter.prototype.getFilterMatcher = function() {
 40    return this._filterMatcher;
 41};
 42
 43Timeline.OverviewEventPainter.prototype.setFilterMatcher = function(filterMatcher) {
 44    this._filterMatcher = filterMatcher;
 45};
 46
 47Timeline.OverviewEventPainter.prototype.getHighlightMatcher = function() {
 48    return this._highlightMatcher;
 49};
 50
 51Timeline.OverviewEventPainter.prototype.setHighlightMatcher = function(highlightMatcher) {
 52    this._highlightMatcher = highlightMatcher;
 53};
 54
 55Timeline.OverviewEventPainter.prototype.paint = function() {
 56    var eventSource = this._band.getEventSource();
 57    if (eventSource == null) {
 58        return;
 59    }
 60    
 61    this._prepareForPainting();
 62    
 63    var eventTheme = this._params.theme.event;
 64    var metrics = {
 65        trackOffset:    eventTheme.overviewTrack.offset,
 66        trackHeight:    eventTheme.overviewTrack.height,
 67        trackGap:       eventTheme.overviewTrack.gap,
 68        trackIncrement: eventTheme.overviewTrack.height + eventTheme.overviewTrack.gap
 69    }
 70    
 71    var minDate = this._band.getMinDate();
 72    var maxDate = this._band.getMaxDate();
 73    
 74    var filterMatcher = (this._filterMatcher != null) ? 
 75        this._filterMatcher :
 76        function(evt) { return true; };
 77    var highlightMatcher = (this._highlightMatcher != null) ? 
 78        this._highlightMatcher :
 79        function(evt) { return -1; };
 80    
 81    var iterator = eventSource.getEventReverseIterator(minDate, maxDate);
 82    while (iterator.hasNext()) {
 83        var evt = iterator.next();
 84        if (filterMatcher(evt)) {
 85            this.paintEvent(evt, metrics, this._params.theme, highlightMatcher(evt));
 86        }
 87    }
 88    
 89    this._highlightLayer.style.display = "block";
 90    this._eventLayer.style.display = "block";
 91    // update the band object for max number of tracks in this section of the ether
 92    this._band.updateEventTrackInfo(this._tracks.length, metrics.trackIncrement); 
 93};
 94
 95Timeline.OverviewEventPainter.prototype.softPaint = function() {
 96};
 97
 98Timeline.OverviewEventPainter.prototype._prepareForPainting = function() {
 99    var band = this._band;
100        
101    this._tracks = [];
102    
103    if (this._highlightLayer != null) {
104        band.removeLayerDiv(this._highlightLayer);
105    }
106    this._highlightLayer = band.createLayerDiv(105, "timeline-band-highlights");
107    this._highlightLayer.style.display = "none";
108    
109    if (this._eventLayer != null) {
110        band.removeLayerDiv(this._eventLayer);
111    }
112    this._eventLayer = band.createLayerDiv(110, "timeline-band-events");
113    this._eventLayer.style.display = "none";
114};
115
116Timeline.OverviewEventPainter.prototype.paintEvent = function(evt, metrics, theme, highlightIndex) {
117    if (evt.isInstant()) {
118        this.paintInstantEvent(evt, metrics, theme, highlightIndex);
119    } else {
120        this.paintDurationEvent(evt, metrics, theme, highlightIndex);
121    }
122};
123
124Timeline.OverviewEventPainter.prototype.paintInstantEvent = function(evt, metrics, theme, highlightIndex) {
125    var startDate = evt.getStart();
126    var startPixel = Math.round(this._band.dateToPixelOffset(startDate));
127    
128    var color = evt.getColor(),
129        klassName = evt.getClassName();
130    if (klassName) {
131      color = null;
132    } else {
133      color = color != null ? color : theme.event.duration.color;
134    }
135    
136    var tickElmtData = this._paintEventTick(evt, startPixel, color, 100, metrics, theme);
137    
138    this._createHighlightDiv(highlightIndex, tickElmtData, theme);
139};
140
141Timeline.OverviewEventPainter.prototype.paintDurationEvent = function(evt, metrics, theme, highlightIndex) {
142    var latestStartDate = evt.getLatestStart();
143    var earliestEndDate = evt.getEarliestEnd();
144    
145    var latestStartPixel = Math.round(this._band.dateToPixelOffset(latestStartDate));
146    var earliestEndPixel = Math.round(this._band.dateToPixelOffset(earliestEndDate));
147    
148    var tapeTrack = 0;
149    for (; tapeTrack < this._tracks.length; tapeTrack++) {
150        if (earliestEndPixel < this._tracks[tapeTrack]) {
151            break;
152        }
153    }
154    this._tracks[tapeTrack] = earliestEndPixel;
155    
156    var color = evt.getColor(),
157        klassName = evt.getClassName();
158    if (klassName) {
159      color = null;
160    } else {
161      color = color != null ? color : theme.event.duration.color;
162    }
163    
164    var tapeElmtData = this._paintEventTape(evt, tapeTrack, latestStartPixel, earliestEndPixel,
165      color, 100, metrics, theme, klassName);
166    
167    this._createHighlightDiv(highlightIndex, tapeElmtData, theme);
168};
169
170Timeline.OverviewEventPainter.prototype._paintEventTape = function(
171    evt, track, left, right, color, opacity, metrics, theme, klassName) {
172    
173    var top = metrics.trackOffset + track * metrics.trackIncrement;
174    var width = right - left;
175    var height = metrics.trackHeight;
176    
177    var tapeDiv = this._timeline.getDocument().createElement("div");
178    tapeDiv.className = 'timeline-small-event-tape'
179    if (klassName) {tapeDiv.className += ' small-' + klassName;}
180    tapeDiv.style.left = left + "px";
181    tapeDiv.style.width = width + "px";
182    tapeDiv.style.top = top + "px";
183    tapeDiv.style.height = height + "px";
184    
185    if (color) {
186      tapeDiv.style.backgroundColor = color; // set color here if defined by event. Else use css
187    }
188 //   tapeDiv.style.overflow = "hidden";   // now set in css
189 //   tapeDiv.style.position = "absolute";
190    if(opacity<100) SimileAjax.Graphics.setOpacity(tapeDiv, opacity);
191    
192    this._eventLayer.appendChild(tapeDiv);
193    
194    return {
195        left:   left,
196        top:    top,
197        width:  width,
198        height: height,
199        elmt:   tapeDiv
200    };
201}
202
203Timeline.OverviewEventPainter.prototype._paintEventTick = function(
204    evt, left, color, opacity, metrics, theme) {
205    
206    var height = theme.event.overviewTrack.tickHeight;
207    var top = metrics.trackOffset - height;
208    var width = 1;
209    
210    var tickDiv = this._timeline.getDocument().createElement("div");
211	  tickDiv.className = 'timeline-small-event-icon'
212    tickDiv.style.left = left + "px";
213    tickDiv.style.top = top + "px";
214  //  tickDiv.style.width = width + "px";
215  //  tickDiv.style.position = "absolute";
216  //  tickDiv.style.height = height + "px";
217  //  tickDiv.style.backgroundColor = color;
218  //  tickDiv.style.overflow = "hidden";
219
220    var klassName = evt.getClassName()
221    if (klassName) {tickDiv.className +=' small-' + klassName};
222	
223    if(opacity<100) {SimileAjax.Graphics.setOpacity(tickDiv, opacity)};
224    
225    this._eventLayer.appendChild(tickDiv);
226    
227    return {
228        left:   left,
229        top:    top,
230        width:  width,
231        height: height,
232        elmt:   tickDiv
233    };
234}
235
236Timeline.OverviewEventPainter.prototype._createHighlightDiv = function(highlightIndex, dimensions, theme) {
237    if (highlightIndex >= 0) {
238        var doc = this._timeline.getDocument();
239        var eventTheme = theme.event;
240        
241        var color = eventTheme.highlightColors[Math.min(highlightIndex, eventTheme.highlightColors.length - 1)];
242        
243        var div = doc.createElement("div");
244        div.style.position = "absolute";
245        div.style.overflow = "hidden";
246        div.style.left =    (dimensions.left - 1) + "px";
247        div.style.width =   (dimensions.width + 2) + "px";
248        div.style.top =     (dimensions.top - 1) + "px";
249        div.style.height =  (dimensions.height + 2) + "px";
250        div.style.background = color;
251        
252        this._highlightLayer.appendChild(div);
253    }
254};
255
256Timeline.OverviewEventPainter.prototype.showBubble = function(evt) {
257    // not implemented
258};