PageRenderTime 13ms CodeModel.GetById 2ms app.highlight 8ms RepoModel.GetById 1ms app.codeStats 0ms

/timeline/ext/planning/scripts/ether-painters.js

http://showslow.googlecode.com/
JavaScript | 176 lines | 141 code | 27 blank | 8 comment | 20 complexity | 08edb6e5459dc7cff644696f38f97440 MD5 | raw file
  1/*==================================================
  2 *  Planning Ether Painter
  3 *==================================================
  4 */
  5 
  6Timeline.PlanningEtherPainter = function(params, band, timeline) {
  7    this._params = params;
  8    this._intervalUnit = params.intervalUnit;
  9    this._multiple = ("multiple" in params) ? params.multiple : 1;
 10    this._theme = params.theme;
 11};
 12
 13Timeline.PlanningEtherPainter.prototype.initialize = function(band, timeline) {
 14    this._band = band;
 15    this._timeline = timeline;
 16    
 17    this._backgroundLayer = band.createLayerDiv(0);
 18    this._backgroundLayer.setAttribute("name", "ether-background"); // for debugging
 19    this._backgroundLayer.style.background = this._theme.ether.backgroundColors[band.getIndex()];
 20    
 21    this._markerLayer = null;
 22    this._lineLayer = null;
 23    
 24    var align = ("align" in this._params && typeof this._params.align == "string") ? this._params.align : 
 25        this._theme.ether.interval.marker[timeline.isHorizontal() ? "hAlign" : "vAlign"];
 26    var showLine = ("showLine" in this._params) ? this._params.showLine : 
 27        this._theme.ether.interval.line.show;
 28        
 29    this._intervalMarkerLayout = new Timeline.PlanningEtherMarkerLayout(
 30        this._timeline, this._band, this._theme, align, showLine);
 31        
 32    this._highlight = new Timeline.EtherHighlight(
 33        this._timeline, this._band, this._theme, this._backgroundLayer);
 34}
 35
 36Timeline.PlanningEtherPainter.prototype.setHighlight = function(startDate, endDate) {
 37    this._highlight.position(startDate, endDate);
 38}
 39
 40Timeline.PlanningEtherPainter.prototype.paint = function() {
 41    if (this._markerLayer) {
 42        this._band.removeLayerDiv(this._markerLayer);
 43    }
 44    this._markerLayer = this._band.createLayerDiv(100);
 45    this._markerLayer.setAttribute("name", "ether-markers"); // for debugging
 46    this._markerLayer.style.display = "none";
 47    
 48    if (this._lineLayer) {
 49        this._band.removeLayerDiv(this._lineLayer);
 50    }
 51    this._lineLayer = this._band.createLayerDiv(1);
 52    this._lineLayer.setAttribute("name", "ether-lines"); // for debugging
 53    this._lineLayer.style.display = "none";
 54    
 55    var minDate = Math.max(0, Math.ceil(Timeline.PlanningUnit.toNumber(this._band.getMinDate())));
 56    var maxDate = Math.floor(Timeline.PlanningUnit.toNumber(this._band.getMaxDate()));
 57    
 58    var hasMore = function() {
 59        return minDate < maxDate;
 60    };
 61    var change = 1;
 62    var multiple = this._multiple;
 63    switch (this._intervalUnit) {
 64        case Timeline.PlanningUnit.DAY:     change = 1; break;
 65        case Timeline.PlanningUnit.WEEK:    change = 7; break;
 66        case Timeline.PlanningUnit.MONTH:   change = 28; break;
 67        case Timeline.PlanningUnit.QUARTER: change = 28 * 3; break;
 68        case Timeline.PlanningUnit.YEAR:    change = 28 * 12; break;
 69    }
 70    var increment = function() {
 71        minDate += change * multiple;
 72    };
 73    
 74    var labeller = this._band.getLabeller();
 75    while (true) {
 76        this._intervalMarkerLayout.createIntervalMarker(
 77            Timeline.PlanningUnit.fromNumber(minDate), 
 78            labeller, 
 79            this._intervalUnit, 
 80            this._markerLayer, 
 81            this._lineLayer
 82        );
 83        if (hasMore()) {
 84            increment();
 85        } else {
 86            break;
 87        }
 88    }
 89    this._markerLayer.style.display = "block";
 90    this._lineLayer.style.display = "block";
 91};
 92
 93Timeline.PlanningEtherPainter.prototype.softPaint = function() {
 94};
 95
 96
 97/*==================================================
 98 *  Planning Ether Marker Layout
 99 *==================================================
100 */
101 
102Timeline.PlanningEtherMarkerLayout = function(timeline, band, theme, align, showLine) {
103    var horizontal = timeline.isHorizontal();
104    if (horizontal) {
105        if (align == "Top") {
106            this.positionDiv = function(div, offset) {
107                div.style.left = offset + "px";
108                div.style.top = "0px";
109            };
110        } else {
111            this.positionDiv = function(div, offset) {
112                div.style.left = offset + "px";
113                div.style.bottom = "0px";
114            };
115        }
116    } else {
117        if (align == "Left") {
118            this.positionDiv = function(div, offset) {
119                div.style.top = offset + "px";
120                div.style.left = "0px";
121            };
122        } else {
123            this.positionDiv = function(div, offset) {
124                div.style.top = offset + "px";
125                div.style.right = "0px";
126            };
127        }
128    }
129    
130    var markerTheme = theme.ether.interval.marker;
131    var lineTheme = theme.ether.interval.line;
132    
133    var stylePrefix = (horizontal ? "h" : "v") + align;
134    var labelStyler = markerTheme[stylePrefix + "Styler"];
135    var emphasizedLabelStyler = markerTheme[stylePrefix + "EmphasizedStyler"];
136    
137    this.createIntervalMarker = function(date, labeller, unit, markerDiv, lineDiv) {
138        var offset = Math.round(band.dateToPixelOffset(date));
139
140        if (showLine) {
141            var divLine = timeline.getDocument().createElement("div");
142            divLine.style.position = "absolute";
143            
144            if (lineTheme.opacity < 100) {
145                Timeline.Graphics.setOpacity(divLine, lineTheme.opacity);
146            }
147            
148            if (horizontal) {
149                divLine.style.borderLeft = "1px solid " + lineTheme.color;
150                divLine.style.left = offset + "px";
151                divLine.style.width = "1px";
152                divLine.style.top = "0px";
153                divLine.style.height = "100%";
154            } else {
155                divLine.style.borderTop = "1px solid " + lineTheme.color;
156                divLine.style.top = offset + "px";
157                divLine.style.height = "1px";
158                divLine.style.left = "0px";
159                divLine.style.width = "100%";
160            }
161            lineDiv.appendChild(divLine);
162        }
163        
164        var label = labeller.labelInterval(date, unit);
165        
166        var div = timeline.getDocument().createElement("div");
167        div.innerHTML = label.text;
168        div.style.position = "absolute";
169        (label.emphasized ? emphasizedLabelStyler : labelStyler)(div);
170        
171        this.positionDiv(div, offset);
172        markerDiv.appendChild(div);
173        
174        return div;
175    };
176};