Added: openoffice/ooo-site/trunk/content/scripts/simile-widget/timeline/2.3.1/scripts/detailed-painter.js URL: http://svn.apache.org/viewvc/openoffice/ooo-site/trunk/content/scripts/simile-widget/timeline/2.3.1/scripts/detailed-painter.js?rev=1791126&view=auto ============================================================================== --- openoffice/ooo-site/trunk/content/scripts/simile-widget/timeline/2.3.1/scripts/detailed-painter.js (added) +++ openoffice/ooo-site/trunk/content/scripts/simile-widget/timeline/2.3.1/scripts/detailed-painter.js Wed Apr 12 14:36:37 2017 @@ -0,0 +1,691 @@ +/*================================================== + * Detailed Event Painter + *================================================== + */ + +// Note: a number of features from original-painter +// are not yet implemented in detailed painter. +// Eg classname, id attributes for icons, labels, tapes + +Timeline.DetailedEventPainter = function(params) { + this._params = params; + this._onSelectListeners = []; + + this._filterMatcher = null; + this._highlightMatcher = null; + this._frc = null; + + this._eventIdToElmt = {}; +}; + +Timeline.DetailedEventPainter.prototype.initialize = function(band, timeline) { + this._band = band; + this._timeline = timeline; + + this._backLayer = null; + this._eventLayer = null; + this._lineLayer = null; + this._highlightLayer = null; + + this._eventIdToElmt = null; +}; + +Timeline.DetailedEventPainter.prototype.getType = function() { + return 'detailed'; +}; + +Timeline.DetailedEventPainter.prototype.addOnSelectListener = function(listener) { + this._onSelectListeners.push(listener); +}; + +Timeline.DetailedEventPainter.prototype.removeOnSelectListener = function(listener) { + for (var i = 0; i < this._onSelectListeners.length; i++) { + if (this._onSelectListeners[i] == listener) { + this._onSelectListeners.splice(i, 1); + break; + } + } +}; + +Timeline.DetailedEventPainter.prototype.getFilterMatcher = function() { + return this._filterMatcher; +}; + +Timeline.DetailedEventPainter.prototype.setFilterMatcher = function(filterMatcher) { + this._filterMatcher = filterMatcher; +}; + +Timeline.DetailedEventPainter.prototype.getHighlightMatcher = function() { + return this._highlightMatcher; +}; + +Timeline.DetailedEventPainter.prototype.setHighlightMatcher = function(highlightMatcher) { + this._highlightMatcher = highlightMatcher; +}; + +Timeline.DetailedEventPainter.prototype.paint = function() { + var eventSource = this._band.getEventSource(); + if (eventSource == null) { + return; + } + + this._eventIdToElmt = {}; + this._prepareForPainting(); + + var eventTheme = this._params.theme.event; + var trackHeight = Math.max(eventTheme.track.height, this._frc.getLineHeight()); + var metrics = { + trackOffset: Math.round(this._band.getViewWidth() / 2 - trackHeight / 2), + trackHeight: trackHeight, + trackGap: eventTheme.track.gap, + trackIncrement: trackHeight + eventTheme.track.gap, + icon: eventTheme.instant.icon, + iconWidth: eventTheme.instant.iconWidth, + iconHeight: eventTheme.instant.iconHeight, + labelWidth: eventTheme.label.width + } + + var minDate = this._band.getMinDate(); + var maxDate = this._band.getMaxDate(); + + var filterMatcher = (this._filterMatcher != null) ? + this._filterMatcher : + function(evt) { return true; }; + var highlightMatcher = (this._highlightMatcher != null) ? + this._highlightMatcher : + function(evt) { return -1; }; + + var iterator = eventSource.getEventReverseIterator(minDate, maxDate); + while (iterator.hasNext()) { + var evt = iterator.next(); + if (filterMatcher(evt)) { + this.paintEvent(evt, metrics, this._params.theme, highlightMatcher(evt)); + } + } + + this._highlightLayer.style.display = "block"; + this._lineLayer.style.display = "block"; + this._eventLayer.style.display = "block"; + // update the band object for max number of tracks in this section of the ether + this._band.updateEventTrackInfo(this._lowerTracks.length + this._upperTracks.length, + metrics.trackIncrement); +}; + +Timeline.DetailedEventPainter.prototype.softPaint = function() { +}; + +Timeline.DetailedEventPainter.prototype._prepareForPainting = function() { + var band = this._band; + + if (this._backLayer == null) { + this._backLayer = this._band.createLayerDiv(0, "timeline-band-events"); + this._backLayer.style.visibility = "hidden"; + + var eventLabelPrototype = document.createElement("span"); + eventLabelPrototype.className = "timeline-event-label"; + this._backLayer.appendChild(eventLabelPrototype); + this._frc = SimileAjax.Graphics.getFontRenderingContext(eventLabelPrototype); + } + this._frc.update(); + this._lowerTracks = []; + this._upperTracks = []; + + if (this._highlightLayer != null) { + band.removeLayerDiv(this._highlightLayer); + } + this._highlightLayer = band.createLayerDiv(105, "timeline-band-highlights"); + this._highlightLayer.style.display = "none"; + + if (this._lineLayer != null) { + band.removeLayerDiv(this._lineLayer); + } + this._lineLayer = band.createLayerDiv(110, "timeline-band-lines"); + this._lineLayer.style.display = "none"; + + if (this._eventLayer != null) { + band.removeLayerDiv(this._eventLayer); + } + this._eventLayer = band.createLayerDiv(110, "timeline-band-events"); + this._eventLayer.style.display = "none"; +}; + +Timeline.DetailedEventPainter.prototype.paintEvent = function(evt, metrics, theme, highlightIndex) { + if (evt.isInstant()) { + this.paintInstantEvent(evt, metrics, theme, highlightIndex); + } else { + this.paintDurationEvent(evt, metrics, theme, highlightIndex); + } +}; + +Timeline.DetailedEventPainter.prototype.paintInstantEvent = function(evt, metrics, theme, highlightIndex) { + if (evt.isImprecise()) { + this.paintImpreciseInstantEvent(evt, metrics, theme, highlightIndex); + } else { + this.paintPreciseInstantEvent(evt, metrics, theme, highlightIndex); + } +} + +Timeline.DetailedEventPainter.prototype.paintDurationEvent = function(evt, metrics, theme, highlightIndex) { + if (evt.isImprecise()) { + this.paintImpreciseDurationEvent(evt, metrics, theme, highlightIndex); + } else { + this.paintPreciseDurationEvent(evt, metrics, theme, highlightIndex); + } +} + +Timeline.DetailedEventPainter.prototype.paintPreciseInstantEvent = function(evt, metrics, theme, highlightIndex) { + var doc = this._timeline.getDocument(); + var text = evt.getText(); + + var startDate = evt.getStart(); + var startPixel = Math.round(this._band.dateToPixelOffset(startDate)); + var iconRightEdge = Math.round(startPixel + metrics.iconWidth / 2); + var iconLeftEdge = Math.round(startPixel - metrics.iconWidth / 2); + + var labelSize = this._frc.computeSize(text); + var iconTrack = this._findFreeTrackForSolid(iconRightEdge, startPixel); + var iconElmtData = this._paintEventIcon(evt, iconTrack, iconLeftEdge, metrics, theme); + + var labelLeft = iconRightEdge + theme.event.label.offsetFromLine; + var labelTrack = iconTrack; + + var iconTrackData = this._getTrackData(iconTrack); + if (Math.min(iconTrackData.solid, iconTrackData.text) >= labelLeft + labelSize.width) { // label on the same track, to the right of icon + iconTrackData.solid = iconLeftEdge; + iconTrackData.text = labelLeft; + } else { // label on a different track, below icon + iconTrackData.solid = iconLeftEdge; + + labelLeft = startPixel + theme.event.label.offsetFromLine; + labelTrack = this._findFreeTrackForText(iconTrack, labelLeft + labelSize.width, function(t) { t.line = startPixel - 2; }); + this._getTrackData(labelTrack).text = iconLeftEdge; + + this._paintEventLine(evt, startPixel, iconTrack, labelTrack, metrics, theme); + } + + var labelTop = Math.round( + metrics.trackOffset + labelTrack * metrics.trackIncrement + + metrics.trackHeight / 2 - labelSize.height / 2); + + var labelElmtData = this._paintEventLabel(evt, text, labelLeft, labelTop, labelSize.width, labelSize.height, theme); + + var self = this; + var clickHandler = function(elmt, domEvt, target) { + return self._onClickInstantEvent(iconElmtData.elmt, domEvt, evt); + }; + SimileAjax.DOM.registerEvent(iconElmtData.elmt, "mousedown", clickHandler); + SimileAjax.DOM.registerEvent(labelElmtData.elmt, "mousedown", clickHandler); + + this._createHighlightDiv(highlightIndex, iconElmtData, theme); + + this._eventIdToElmt[evt.getID()] = iconElmtData.elmt; +}; + +Timeline.DetailedEventPainter.prototype.paintImpreciseInstantEvent = function(evt, metrics, theme, highlightIndex) { + var doc = this._timeline.getDocument(); + var text = evt.getText(); + + var startDate = evt.getStart(); + var endDate = evt.getEnd(); + var startPixel = Math.round(this._band.dateToPixelOffset(startDate)); + var endPixel = Math.round(this._band.dateToPixelOffset(endDate)); + + var iconRightEdge = Math.round(startPixel + metrics.iconWidth / 2); + var iconLeftEdge = Math.round(startPixel - metrics.iconWidth / 2); + + var labelSize = this._frc.computeSize(text); + var iconTrack = this._findFreeTrackForSolid(endPixel, startPixel); + + var tapeElmtData = this._paintEventTape(evt, iconTrack, startPixel, endPixel, + theme.event.instant.impreciseColor, theme.event.instant.impreciseOpacity, metrics, theme); + var iconElmtData = this._paintEventIcon(evt, iconTrack, iconLeftEdge, metrics, theme); + + var iconTrackData = this._getTrackData(iconTrack); + iconTrackData.solid = iconLeftEdge; + + var labelLeft = iconRightEdge + theme.event.label.offsetFromLine; + var labelRight = labelLeft + labelSize.width; + var labelTrack; + if (labelRight < endPixel) { + labelTrack = iconTrack; + } else { + labelLeft = startPixel + theme.event.label.offsetFromLine; + labelRight = labelLeft + labelSize.width; + + labelTrack = this._findFreeTrackForText(iconTrack, labelRight, function(t) { t.line = startPixel - 2; }); + this._getTrackData(labelTrack).text = iconLeftEdge; + + this._paintEventLine(evt, startPixel, iconTrack, labelTrack, metrics, theme); + } + var labelTop = Math.round( + metrics.trackOffset + labelTrack * metrics.trackIncrement + + metrics.trackHeight / 2 - labelSize.height / 2); + + var labelElmtData = this._paintEventLabel(evt, text, labelLeft, labelTop, labelSize.width, labelSize.height, theme); + + var self = this; + var clickHandler = function(elmt, domEvt, target) { + return self._onClickInstantEvent(iconElmtData.elmt, domEvt, evt); + }; + SimileAjax.DOM.registerEvent(iconElmtData.elmt, "mousedown", clickHandler); + SimileAjax.DOM.registerEvent(tapeElmtData.elmt, "mousedown", clickHandler); + SimileAjax.DOM.registerEvent(labelElmtData.elmt, "mousedown", clickHandler); + + this._createHighlightDiv(highlightIndex, iconElmtData, theme); + + this._eventIdToElmt[evt.getID()] = iconElmtData.elmt; +}; + +Timeline.DetailedEventPainter.prototype.paintPreciseDurationEvent = function(evt, metrics, theme, highlightIndex) { + var doc = this._timeline.getDocument(); + var text = evt.getText(); + + var startDate = evt.getStart(); + var endDate = evt.getEnd(); + var startPixel = Math.round(this._band.dateToPixelOffset(startDate)); + var endPixel = Math.round(this._band.dateToPixelOffset(endDate)); + + var labelSize = this._frc.computeSize(text); + var tapeTrack = this._findFreeTrackForSolid(endPixel); + var color = evt.getColor(); + color = color != null ? color : theme.event.duration.color; + + var tapeElmtData = this._paintEventTape(evt, tapeTrack, startPixel, endPixel, color, 100, metrics, theme); + + var tapeTrackData = this._getTrackData(tapeTrack); + tapeTrackData.solid = startPixel; + + var labelLeft = startPixel + theme.event.label.offsetFromLine; + var labelTrack = this._findFreeTrackForText(tapeTrack, labelLeft + labelSize.width, function(t) { t.line = startPixel - 2; }); + this._getTrackData(labelTrack).text = startPixel - 2; + + this._paintEventLine(evt, startPixel, tapeTrack, labelTrack, metrics, theme); + + var labelTop = Math.round( + metrics.trackOffset + labelTrack * metrics.trackIncrement + + metrics.trackHeight / 2 - labelSize.height / 2); + + var labelElmtData = this._paintEventLabel(evt, text, labelLeft, labelTop, labelSize.width, labelSize.height, theme); + + var self = this; + var clickHandler = function(elmt, domEvt, target) { + return self._onClickDurationEvent(tapeElmtData.elmt, domEvt, evt); + }; + SimileAjax.DOM.registerEvent(tapeElmtData.elmt, "mousedown", clickHandler); + SimileAjax.DOM.registerEvent(labelElmtData.elmt, "mousedown", clickHandler); + + this._createHighlightDiv(highlightIndex, tapeElmtData, theme); + + this._eventIdToElmt[evt.getID()] = tapeElmtData.elmt; +}; + +Timeline.DetailedEventPainter.prototype.paintImpreciseDurationEvent = function(evt, metrics, theme, highlightIndex) { + var doc = this._timeline.getDocument(); + var text = evt.getText(); + + var startDate = evt.getStart(); + var latestStartDate = evt.getLatestStart(); + var endDate = evt.getEnd(); + var earliestEndDate = evt.getEarliestEnd(); + + var startPixel = Math.round(this._band.dateToPixelOffset(startDate)); + var latestStartPixel = Math.round(this._band.dateToPixelOffset(latestStartDate)); + var endPixel = Math.round(this._band.dateToPixelOffset(endDate)); + var earliestEndPixel = Math.round(this._band.dateToPixelOffset(earliestEndDate)); + + var labelSize = this._frc.computeSize(text); + var tapeTrack = this._findFreeTrackForSolid(endPixel); + var color = evt.getColor(); + color = color != null ? color : theme.event.duration.color; + + var impreciseTapeElmtData = this._paintEventTape(evt, tapeTrack, startPixel, endPixel, + theme.event.duration.impreciseColor, theme.event.duration.impreciseOpacity, metrics, theme); + var tapeElmtData = this._paintEventTape(evt, tapeTrack, latestStartPixel, earliestEndPixel, color, 100, metrics, theme); + + var tapeTrackData = this._getTrackData(tapeTrack); + tapeTrackData.solid = startPixel; + + var labelLeft = latestStartPixel + theme.event.label.offsetFromLine; + var labelTrack = this._findFreeTrackForText(tapeTrack, labelLeft + labelSize.width, function(t) { t.line = latestStartPixel - 2; }); + this._getTrackData(labelTrack).text = latestStartPixel - 2; + + this._paintEventLine(evt, latestStartPixel, tapeTrack, labelTrack, metrics, theme); + + var labelTop = Math.round( + metrics.trackOffset + labelTrack * metrics.trackIncrement + + metrics.trackHeight / 2 - labelSize.height / 2); + + var labelElmtData = this._paintEventLabel(evt, text, labelLeft, labelTop, labelSize.width, labelSize.height, theme); + + var self = this; + var clickHandler = function(elmt, domEvt, target) { + return self._onClickDurationEvent(tapeElmtData.elmt, domEvt, evt); + }; + SimileAjax.DOM.registerEvent(tapeElmtData.elmt, "mousedown", clickHandler); + SimileAjax.DOM.registerEvent(labelElmtData.elmt, "mousedown", clickHandler); + + this._createHighlightDiv(highlightIndex, tapeElmtData, theme); + + this._eventIdToElmt[evt.getID()] = tapeElmtData.elmt; +}; + +Timeline.DetailedEventPainter.prototype._findFreeTrackForSolid = function(solidEdge, softEdge) { + for (var i = 0; true; i++) { + if (i < this._lowerTracks.length) { + var t = this._lowerTracks[i]; + if (Math.min(t.solid, t.text) > solidEdge && (!(softEdge) || t.line > softEdge)) { + return i; + } + } else { + this._lowerTracks.push({ + solid: Number.POSITIVE_INFINITY, + text: Number.POSITIVE_INFINITY, + line: Number.POSITIVE_INFINITY + }); + + return i; + } + + if (i < this._upperTracks.length) { + var t = this._upperTracks[i]; + if (Math.min(t.solid, t.text) > solidEdge && (!(softEdge) || t.line > softEdge)) { + return -1 - i; + } + } else { + this._upperTracks.push({ + solid: Number.POSITIVE_INFINITY, + text: Number.POSITIVE_INFINITY, + line: Number.POSITIVE_INFINITY + }); + + return -1 - i; + } + } +}; + +Timeline.DetailedEventPainter.prototype._findFreeTrackForText = function(fromTrack, edge, occupiedTrackVisitor) { + var extendUp; + var index; + var firstIndex; + var result; + + if (fromTrack < 0) { + extendUp = true; + firstIndex = -fromTrack; + + index = this._findFreeUpperTrackForText(firstIndex, edge); + result = -1 - index; + } else if (fromTrack > 0) { + extendUp = false; + firstIndex = fromTrack + 1; + + index = this._findFreeLowerTrackForText(firstIndex, edge); + result = index; + } else { + var upIndex = this._findFreeUpperTrackForText(0, edge); + var downIndex = this._findFreeLowerTrackForText(1, edge); + + if (downIndex - 1 <= upIndex) { + extendUp = false; + firstIndex = 1; + index = downIndex; + result = index; + } else { + extendUp = true; + firstIndex = 0; + index = upIndex; + result = -1 - index; + } + } + + if (extendUp) { + if (index == this._upperTracks.length) { + this._upperTracks.push({ + solid: Number.POSITIVE_INFINITY, + text: Number.POSITIVE_INFINITY, + line: Number.POSITIVE_INFINITY + }); + } + for (var i = firstIndex; i < index; i++) { + occupiedTrackVisitor(this._upperTracks[i]); + } + } else { + if (index == this._lowerTracks.length) { + this._lowerTracks.push({ + solid: Number.POSITIVE_INFINITY, + text: Number.POSITIVE_INFINITY, + line: Number.POSITIVE_INFINITY + }); + } + for (var i = firstIndex; i < index; i++) { + occupiedTrackVisitor(this._lowerTracks[i]); + } + } + return result; +}; + +Timeline.DetailedEventPainter.prototype._findFreeLowerTrackForText = function(index, edge) { + for (; index < this._lowerTracks.length; index++) { + var t = this._lowerTracks[index]; + if (Math.min(t.solid, t.text) >= edge) { + break; + } + } + return index; +}; + +Timeline.DetailedEventPainter.prototype._findFreeUpperTrackForText = function(index, edge) { + for (; index < this._upperTracks.length; index++) { + var t = this._upperTracks[index]; + if (Math.min(t.solid, t.text) >= edge) { + break; + } + } + return index; +}; + +Timeline.DetailedEventPainter.prototype._getTrackData = function(index) { + return (index < 0) ? this._upperTracks[-index - 1] : this._lowerTracks[index]; +}; + +Timeline.DetailedEventPainter.prototype._paintEventLine = function(evt, left, startTrack, endTrack, metrics, theme) { + var top = Math.round(metrics.trackOffset + startTrack * metrics.trackIncrement + metrics.trackHeight / 2); + var height = Math.round(Math.abs(endTrack - startTrack) * metrics.trackIncrement); + + var lineStyle = "1px solid " + theme.event.label.lineColor; + var lineDiv = this._timeline.getDocument().createElement("div"); + lineDiv.style.position = "absolute"; + lineDiv.style.left = left + "px"; + lineDiv.style.width = theme.event.label.offsetFromLine + "px"; + lineDiv.style.height = height + "px"; + if (startTrack > endTrack) { + lineDiv.style.top = (top - height) + "px"; + lineDiv.style.borderTop = lineStyle; + } else { + lineDiv.style.top = top + "px"; + lineDiv.style.borderBottom = lineStyle; + } + lineDiv.style.borderLeft = lineStyle; + this._lineLayer.appendChild(lineDiv); +}; + +Timeline.DetailedEventPainter.prototype._paintEventIcon = function(evt, iconTrack, left, metrics, theme) { + var icon = evt.getIcon(); + icon = icon != null ? icon : metrics.icon; + + var middle = metrics.trackOffset + iconTrack * metrics.trackIncrement + metrics.trackHeight / 2; + var top = Math.round(middle - metrics.iconHeight / 2); + + var img = SimileAjax.Graphics.createTranslucentImage(icon); + var iconDiv = this._timeline.getDocument().createElement("div"); + iconDiv.style.position = "absolute"; + iconDiv.style.left = left + "px"; + iconDiv.style.top = top + "px"; + iconDiv.appendChild(img); + iconDiv.style.cursor = "pointer"; + + if(evt._title != null) + iconDiv.title = evt._title + + this._eventLayer.appendChild(iconDiv); + + return { + left: left, + top: top, + width: metrics.iconWidth, + height: metrics.iconHeight, + elmt: iconDiv + }; +}; + +Timeline.DetailedEventPainter.prototype._paintEventLabel = function(evt, text, left, top, width, height, theme) { + var doc = this._timeline.getDocument(); + + var labelBackgroundDiv = doc.createElement("div"); + labelBackgroundDiv.style.position = "absolute"; + labelBackgroundDiv.style.left = left + "px"; + labelBackgroundDiv.style.width = width + "px"; + labelBackgroundDiv.style.top = top + "px"; + labelBackgroundDiv.style.height = height + "px"; + labelBackgroundDiv.style.backgroundColor = theme.event.label.backgroundColor; + SimileAjax.Graphics.setOpacity(labelBackgroundDiv, theme.event.label.backgroundOpacity); + this._eventLayer.appendChild(labelBackgroundDiv); + + var labelDiv = doc.createElement("div"); + labelDiv.style.position = "absolute"; + labelDiv.style.left = left + "px"; + labelDiv.style.width = width + "px"; + labelDiv.style.top = top + "px"; + labelDiv.innerHTML = text; + labelDiv.style.cursor = "pointer"; + + if(evt._title != null) + labelDiv.title = evt._title; + + var color = evt.getTextColor(); + if (color == null) { + color = evt.getColor(); + } + if (color != null) { + labelDiv.style.color = color; + } + + this._eventLayer.appendChild(labelDiv); + + return { + left: left, + top: top, + width: width, + height: height, + elmt: labelDiv + }; +}; + +Timeline.DetailedEventPainter.prototype._paintEventTape = function( + evt, iconTrack, startPixel, endPixel, color, opacity, metrics, theme) { + + var tapeWidth = endPixel - startPixel; + var tapeHeight = theme.event.tape.height; + var middle = metrics.trackOffset + iconTrack * metrics.trackIncrement + metrics.trackHeight / 2; + var top = Math.round(middle - tapeHeight / 2); + + var tapeDiv = this._timeline.getDocument().createElement("div"); + tapeDiv.style.position = "absolute"; + tapeDiv.style.left = startPixel + "px"; + tapeDiv.style.width = tapeWidth + "px"; + tapeDiv.style.top = top + "px"; + tapeDiv.style.height = tapeHeight + "px"; + tapeDiv.style.backgroundColor = color; + tapeDiv.style.overflow = "hidden"; + tapeDiv.style.cursor = "pointer"; + + if(evt._title != null) + tapeDiv.title = evt._title; + + SimileAjax.Graphics.setOpacity(tapeDiv, opacity); + + this._eventLayer.appendChild(tapeDiv); + + return { + left: startPixel, + top: top, + width: tapeWidth, + height: tapeHeight, + elmt: tapeDiv + }; +} + +Timeline.DetailedEventPainter.prototype._createHighlightDiv = function(highlightIndex, dimensions, theme) { + if (highlightIndex >= 0) { + var doc = this._timeline.getDocument(); + var eventTheme = theme.event; + + var color = eventTheme.highlightColors[Math.min(highlightIndex, eventTheme.highlightColors.length - 1)]; + + var div = doc.createElement("div"); + div.style.position = "absolute"; + div.style.overflow = "hidden"; + div.style.left = (dimensions.left - 2) + "px"; + div.style.width = (dimensions.width + 4) + "px"; + div.style.top = (dimensions.top - 2) + "px"; + div.style.height = (dimensions.height + 4) + "px"; + div.style.background = color; + + this._highlightLayer.appendChild(div); + } +}; + +Timeline.DetailedEventPainter.prototype._onClickInstantEvent = function(icon, domEvt, evt) { + var c = SimileAjax.DOM.getPageCoordinates(icon); + this._showBubble( + c.left + Math.ceil(icon.offsetWidth / 2), + c.top + Math.ceil(icon.offsetHeight / 2), + evt + ); + this._fireOnSelect(evt.getID()); + + domEvt.cancelBubble = true; + SimileAjax.DOM.cancelEvent(domEvt); + return false; +}; + +Timeline.DetailedEventPainter.prototype._onClickDurationEvent = function(target, domEvt, evt) { + if ("pageX" in domEvt) { + var x = domEvt.pageX; + var y = domEvt.pageY; + } else { + var c = SimileAjax.DOM.getPageCoordinates(target); + var x = domEvt.offsetX + c.left; + var y = domEvt.offsetY + c.top; + } + this._showBubble(x, y, evt); + this._fireOnSelect(evt.getID()); + + domEvt.cancelBubble = true; + SimileAjax.DOM.cancelEvent(domEvt); + return false; +}; + +Timeline.DetailedEventPainter.prototype.showBubble = function(evt) { + var elmt = this._eventIdToElmt[evt.getID()]; + if (elmt) { + var c = SimileAjax.DOM.getPageCoordinates(elmt); + this._showBubble(c.left + elmt.offsetWidth / 2, c.top + elmt.offsetHeight / 2, evt); + } +}; + +Timeline.DetailedEventPainter.prototype._showBubble = function(x, y, evt) { + var div = document.createElement("div"); + var themeBubble = this._params.theme.event.bubble; + evt.fillInfoBubble(div, this._params.theme, this._band.getLabeller()); + + SimileAjax.WindowManager.cancelPopups(); + SimileAjax.Graphics.createBubbleForContentAndPoint(div, x, y, + themeBubble.width, null, themeBubble.maxHeight); +}; + +Timeline.DetailedEventPainter.prototype._fireOnSelect = function(eventID) { + for (var i = 0; i < this._onSelectListeners.length; i++) { + this._onSelectListeners[i](eventID); + } +};
Added: openoffice/ooo-site/trunk/content/scripts/simile-widget/timeline/2.3.1/scripts/ether-painters.js URL: http://svn.apache.org/viewvc/openoffice/ooo-site/trunk/content/scripts/simile-widget/timeline/2.3.1/scripts/ether-painters.js?rev=1791126&view=auto ============================================================================== --- openoffice/ooo-site/trunk/content/scripts/simile-widget/timeline/2.3.1/scripts/ether-painters.js (added) +++ openoffice/ooo-site/trunk/content/scripts/simile-widget/timeline/2.3.1/scripts/ether-painters.js Wed Apr 12 14:36:37 2017 @@ -0,0 +1,576 @@ +/*================================================== + * Gregorian Ether Painter + *================================================== + */ + +Timeline.GregorianEtherPainter = function(params) { + this._params = params; + this._theme = params.theme; + this._unit = params.unit; + this._multiple = ("multiple" in params) ? params.multiple : 1; +}; + +Timeline.GregorianEtherPainter.prototype.initialize = function(band, timeline) { + this._band = band; + this._timeline = timeline; + + this._backgroundLayer = band.createLayerDiv(0); + this._backgroundLayer.setAttribute("name", "ether-background"); // for debugging + this._backgroundLayer.className = 'timeline-ether-bg'; + // this._backgroundLayer.style.background = this._theme.ether.backgroundColors[band.getIndex()]; + + + this._markerLayer = null; + this._lineLayer = null; + + var align = ("align" in this._params && this._params.align != undefined) ? this._params.align : + this._theme.ether.interval.marker[timeline.isHorizontal() ? "hAlign" : "vAlign"]; + var showLine = ("showLine" in this._params) ? this._params.showLine : + this._theme.ether.interval.line.show; + + this._intervalMarkerLayout = new Timeline.EtherIntervalMarkerLayout( + this._timeline, this._band, this._theme, align, showLine); + + this._highlight = new Timeline.EtherHighlight( + this._timeline, this._band, this._theme, this._backgroundLayer); +} + +Timeline.GregorianEtherPainter.prototype.setHighlight = function(startDate, endDate) { + this._highlight.position(startDate, endDate); +} + +Timeline.GregorianEtherPainter.prototype.paint = function() { + if (this._markerLayer) { + this._band.removeLayerDiv(this._markerLayer); + } + this._markerLayer = this._band.createLayerDiv(100); + this._markerLayer.setAttribute("name", "ether-markers"); // for debugging + this._markerLayer.style.display = "none"; + + if (this._lineLayer) { + this._band.removeLayerDiv(this._lineLayer); + } + this._lineLayer = this._band.createLayerDiv(1); + this._lineLayer.setAttribute("name", "ether-lines"); // for debugging + this._lineLayer.style.display = "none"; + + var minDate = this._band.getMinDate(); + var maxDate = this._band.getMaxDate(); + + var timeZone = this._band.getTimeZone(); + var labeller = this._band.getLabeller(); + + SimileAjax.DateTime.roundDownToInterval(minDate, this._unit, timeZone, this._multiple, this._theme.firstDayOfWeek); + + var p = this; + var incrementDate = function(date) { + for (var i = 0; i < p._multiple; i++) { + SimileAjax.DateTime.incrementByInterval(date, p._unit); + } + }; + + while (minDate.getTime() < maxDate.getTime()) { + this._intervalMarkerLayout.createIntervalMarker( + minDate, labeller, this._unit, this._markerLayer, this._lineLayer); + + incrementDate(minDate); + } + this._markerLayer.style.display = "block"; + this._lineLayer.style.display = "block"; +}; + +Timeline.GregorianEtherPainter.prototype.softPaint = function() { +}; + +Timeline.GregorianEtherPainter.prototype.zoom = function(netIntervalChange) { + if (netIntervalChange != 0) { + this._unit += netIntervalChange; + } +}; + + +/*================================================== + * Hot Zone Gregorian Ether Painter + *================================================== + */ + +Timeline.HotZoneGregorianEtherPainter = function(params) { + this._params = params; + this._theme = params.theme; + + this._zones = [{ + startTime: Number.NEGATIVE_INFINITY, + endTime: Number.POSITIVE_INFINITY, + unit: params.unit, + multiple: 1 + }]; + for (var i = 0; i < params.zones.length; i++) { + var zone = params.zones[i]; + var zoneStart = SimileAjax.DateTime.parseGregorianDateTime(zone.start).getTime(); + var zoneEnd = SimileAjax.DateTime.parseGregorianDateTime(zone.end).getTime(); + + for (var j = 0; j < this._zones.length && zoneEnd > zoneStart; j++) { + var zone2 = this._zones[j]; + + if (zoneStart < zone2.endTime) { + if (zoneStart > zone2.startTime) { + this._zones.splice(j, 0, { + startTime: zone2.startTime, + endTime: zoneStart, + unit: zone2.unit, + multiple: zone2.multiple + }); + j++; + + zone2.startTime = zoneStart; + } + + if (zoneEnd < zone2.endTime) { + this._zones.splice(j, 0, { + startTime: zoneStart, + endTime: zoneEnd, + unit: zone.unit, + multiple: (zone.multiple) ? zone.multiple : 1 + }); + j++; + + zone2.startTime = zoneEnd; + zoneStart = zoneEnd; + } else { + zone2.multiple = zone.multiple; + zone2.unit = zone.unit; + zoneStart = zone2.endTime; + } + } // else, try the next existing zone + } + } +}; + +Timeline.HotZoneGregorianEtherPainter.prototype.initialize = function(band, timeline) { + this._band = band; + this._timeline = timeline; + + this._backgroundLayer = band.createLayerDiv(0); + this._backgroundLayer.setAttribute("name", "ether-background"); // for debugging + this._backgroundLayer.className ='timeline-ether-bg'; + //this._backgroundLayer.style.background = this._theme.ether.backgroundColors[band.getIndex()]; + + this._markerLayer = null; + this._lineLayer = null; + + var align = ("align" in this._params && this._params.align != undefined) ? this._params.align : + this._theme.ether.interval.marker[timeline.isHorizontal() ? "hAlign" : "vAlign"]; + var showLine = ("showLine" in this._params) ? this._params.showLine : + this._theme.ether.interval.line.show; + + this._intervalMarkerLayout = new Timeline.EtherIntervalMarkerLayout( + this._timeline, this._band, this._theme, align, showLine); + + this._highlight = new Timeline.EtherHighlight( + this._timeline, this._band, this._theme, this._backgroundLayer); +} + +Timeline.HotZoneGregorianEtherPainter.prototype.setHighlight = function(startDate, endDate) { + this._highlight.position(startDate, endDate); +} + +Timeline.HotZoneGregorianEtherPainter.prototype.paint = function() { + if (this._markerLayer) { + this._band.removeLayerDiv(this._markerLayer); + } + this._markerLayer = this._band.createLayerDiv(100); + this._markerLayer.setAttribute("name", "ether-markers"); // for debugging + this._markerLayer.style.display = "none"; + + if (this._lineLayer) { + this._band.removeLayerDiv(this._lineLayer); + } + this._lineLayer = this._band.createLayerDiv(1); + this._lineLayer.setAttribute("name", "ether-lines"); // for debugging + this._lineLayer.style.display = "none"; + + var minDate = this._band.getMinDate(); + var maxDate = this._band.getMaxDate(); + + var timeZone = this._band.getTimeZone(); + var labeller = this._band.getLabeller(); + + var p = this; + var incrementDate = function(date, zone) { + for (var i = 0; i < zone.multiple; i++) { + SimileAjax.DateTime.incrementByInterval(date, zone.unit); + } + }; + + var zStart = 0; + while (zStart < this._zones.length) { + if (minDate.getTime() < this._zones[zStart].endTime) { + break; + } + zStart++; + } + var zEnd = this._zones.length - 1; + while (zEnd >= 0) { + if (maxDate.getTime() > this._zones[zEnd].startTime) { + break; + } + zEnd--; + } + + for (var z = zStart; z <= zEnd; z++) { + var zone = this._zones[z]; + + var minDate2 = new Date(Math.max(minDate.getTime(), zone.startTime)); + var maxDate2 = new Date(Math.min(maxDate.getTime(), zone.endTime)); + + SimileAjax.DateTime.roundDownToInterval(minDate2, zone.unit, timeZone, zone.multiple, this._theme.firstDayOfWeek); + SimileAjax.DateTime.roundUpToInterval(maxDate2, zone.unit, timeZone, zone.multiple, this._theme.firstDayOfWeek); + + while (minDate2.getTime() < maxDate2.getTime()) { + this._intervalMarkerLayout.createIntervalMarker( + minDate2, labeller, zone.unit, this._markerLayer, this._lineLayer); + + incrementDate(minDate2, zone); + } + } + this._markerLayer.style.display = "block"; + this._lineLayer.style.display = "block"; +}; + +Timeline.HotZoneGregorianEtherPainter.prototype.softPaint = function() { +}; + +Timeline.HotZoneGregorianEtherPainter.prototype.zoom = function(netIntervalChange) { + if (netIntervalChange != 0) { + for (var i = 0; i < this._zones.length; ++i) { + if (this._zones[i]) { + this._zones[i].unit += netIntervalChange; + } + } + } +}; + +/*================================================== + * Year Count Ether Painter + *================================================== + */ + +Timeline.YearCountEtherPainter = function(params) { + this._params = params; + this._theme = params.theme; + this._startDate = SimileAjax.DateTime.parseGregorianDateTime(params.startDate); + this._multiple = ("multiple" in params) ? params.multiple : 1; +}; + +Timeline.YearCountEtherPainter.prototype.initialize = function(band, timeline) { + this._band = band; + this._timeline = timeline; + + this._backgroundLayer = band.createLayerDiv(0); + this._backgroundLayer.setAttribute("name", "ether-background"); // for debugging + this._backgroundLayer.className = 'timeline-ether-bg'; + // this._backgroundLayer.style.background = this._theme.ether.backgroundColors[band.getIndex()]; + + this._markerLayer = null; + this._lineLayer = null; + + var align = ("align" in this._params) ? this._params.align : + this._theme.ether.interval.marker[timeline.isHorizontal() ? "hAlign" : "vAlign"]; + var showLine = ("showLine" in this._params) ? this._params.showLine : + this._theme.ether.interval.line.show; + + this._intervalMarkerLayout = new Timeline.EtherIntervalMarkerLayout( + this._timeline, this._band, this._theme, align, showLine); + + this._highlight = new Timeline.EtherHighlight( + this._timeline, this._band, this._theme, this._backgroundLayer); +}; + +Timeline.YearCountEtherPainter.prototype.setHighlight = function(startDate, endDate) { + this._highlight.position(startDate, endDate); +}; + +Timeline.YearCountEtherPainter.prototype.paint = function() { + if (this._markerLayer) { + this._band.removeLayerDiv(this._markerLayer); + } + this._markerLayer = this._band.createLayerDiv(100); + this._markerLayer.setAttribute("name", "ether-markers"); // for debugging + this._markerLayer.style.display = "none"; + + if (this._lineLayer) { + this._band.removeLayerDiv(this._lineLayer); + } + this._lineLayer = this._band.createLayerDiv(1); + this._lineLayer.setAttribute("name", "ether-lines"); // for debugging + this._lineLayer.style.display = "none"; + + var minDate = new Date(this._startDate.getTime()); + var maxDate = this._band.getMaxDate(); + var yearDiff = this._band.getMinDate().getUTCFullYear() - this._startDate.getUTCFullYear(); + minDate.setUTCFullYear(this._band.getMinDate().getUTCFullYear() - yearDiff % this._multiple); + + var p = this; + var incrementDate = function(date) { + for (var i = 0; i < p._multiple; i++) { + SimileAjax.DateTime.incrementByInterval(date, SimileAjax.DateTime.YEAR); + } + }; + var labeller = { + labelInterval: function(date, intervalUnit) { + var diff = date.getUTCFullYear() - p._startDate.getUTCFullYear(); + return { + text: diff, + emphasized: diff == 0 + }; + } + }; + + while (minDate.getTime() < maxDate.getTime()) { + this._intervalMarkerLayout.createIntervalMarker( + minDate, labeller, SimileAjax.DateTime.YEAR, this._markerLayer, this._lineLayer); + + incrementDate(minDate); + } + this._markerLayer.style.display = "block"; + this._lineLayer.style.display = "block"; +}; + +Timeline.YearCountEtherPainter.prototype.softPaint = function() { +}; + +/*================================================== + * Quarterly Ether Painter + *================================================== + */ + +Timeline.QuarterlyEtherPainter = function(params) { + this._params = params; + this._theme = params.theme; + this._startDate = SimileAjax.DateTime.parseGregorianDateTime(params.startDate); +}; + +Timeline.QuarterlyEtherPainter.prototype.initialize = function(band, timeline) { + this._band = band; + this._timeline = timeline; + + this._backgroundLayer = band.createLayerDiv(0); + this._backgroundLayer.setAttribute("name", "ether-background"); // for debugging + this._backgroundLayer.className = 'timeline-ether-bg'; + // this._backgroundLayer.style.background = this._theme.ether.backgroundColors[band.getIndex()]; + + this._markerLayer = null; + this._lineLayer = null; + + var align = ("align" in this._params) ? this._params.align : + this._theme.ether.interval.marker[timeline.isHorizontal() ? "hAlign" : "vAlign"]; + var showLine = ("showLine" in this._params) ? this._params.showLine : + this._theme.ether.interval.line.show; + + this._intervalMarkerLayout = new Timeline.EtherIntervalMarkerLayout( + this._timeline, this._band, this._theme, align, showLine); + + this._highlight = new Timeline.EtherHighlight( + this._timeline, this._band, this._theme, this._backgroundLayer); +}; + +Timeline.QuarterlyEtherPainter.prototype.setHighlight = function(startDate, endDate) { + this._highlight.position(startDate, endDate); +}; + +Timeline.QuarterlyEtherPainter.prototype.paint = function() { + if (this._markerLayer) { + this._band.removeLayerDiv(this._markerLayer); + } + this._markerLayer = this._band.createLayerDiv(100); + this._markerLayer.setAttribute("name", "ether-markers"); // for debugging + this._markerLayer.style.display = "none"; + + if (this._lineLayer) { + this._band.removeLayerDiv(this._lineLayer); + } + this._lineLayer = this._band.createLayerDiv(1); + this._lineLayer.setAttribute("name", "ether-lines"); // for debugging + this._lineLayer.style.display = "none"; + + var minDate = new Date(0); + var maxDate = this._band.getMaxDate(); + + minDate.setUTCFullYear(Math.max(this._startDate.getUTCFullYear(), this._band.getMinDate().getUTCFullYear())); + minDate.setUTCMonth(this._startDate.getUTCMonth()); + + var p = this; + var incrementDate = function(date) { + date.setUTCMonth(date.getUTCMonth() + 3); + }; + var labeller = { + labelInterval: function(date, intervalUnit) { + var quarters = (4 + (date.getUTCMonth() - p._startDate.getUTCMonth()) / 3) % 4; + if (quarters != 0) { + return { text: "Q" + (quarters + 1), emphasized: false }; + } else { + return { text: "Y" + (date.getUTCFullYear() - p._startDate.getUTCFullYear() + 1), emphasized: true }; + } + } + }; + + while (minDate.getTime() < maxDate.getTime()) { + this._intervalMarkerLayout.createIntervalMarker( + minDate, labeller, SimileAjax.DateTime.YEAR, this._markerLayer, this._lineLayer); + + incrementDate(minDate); + } + this._markerLayer.style.display = "block"; + this._lineLayer.style.display = "block"; +}; + +Timeline.QuarterlyEtherPainter.prototype.softPaint = function() { +}; + +/*================================================== + * Ether Interval Marker Layout + *================================================== + */ + +Timeline.EtherIntervalMarkerLayout = function(timeline, band, theme, align, showLine) { + var horizontal = timeline.isHorizontal(); + if (horizontal) { + if (align == "Top") { + this.positionDiv = function(div, offset) { + div.style.left = offset + "px"; + div.style.top = "0px"; + }; + } else { + this.positionDiv = function(div, offset) { + div.style.left = offset + "px"; + div.style.bottom = "0px"; + }; + } + } else { + if (align == "Left") { + this.positionDiv = function(div, offset) { + div.style.top = offset + "px"; + div.style.left = "0px"; + }; + } else { + this.positionDiv = function(div, offset) { + div.style.top = offset + "px"; + div.style.right = "0px"; + }; + } + } + + var markerTheme = theme.ether.interval.marker; + var lineTheme = theme.ether.interval.line; + var weekendTheme = theme.ether.interval.weekend; + + var stylePrefix = (horizontal ? "h" : "v") + align; + var labelStyler = markerTheme[stylePrefix + "Styler"]; + var emphasizedLabelStyler = markerTheme[stylePrefix + "EmphasizedStyler"]; + var day = SimileAjax.DateTime.gregorianUnitLengths[SimileAjax.DateTime.DAY]; + + this.createIntervalMarker = function(date, labeller, unit, markerDiv, lineDiv) { + var offset = Math.round(band.dateToPixelOffset(date)); + + if (showLine && unit != SimileAjax.DateTime.WEEK) { + var divLine = timeline.getDocument().createElement("div"); + divLine.className = "timeline-ether-lines"; + + if (lineTheme.opacity < 100) { + SimileAjax.Graphics.setOpacity(divLine, lineTheme.opacity); + } + + if (horizontal) { + //divLine.className += " timeline-ether-lines-vertical"; + divLine.style.left = offset + "px"; + } else { + //divLine.className += " timeline-ether-lines-horizontal"; + divLine.style.top = offset + "px"; + } + lineDiv.appendChild(divLine); + } + if (unit == SimileAjax.DateTime.WEEK) { + var firstDayOfWeek = theme.firstDayOfWeek; + + var saturday = new Date(date.getTime() + (6 - firstDayOfWeek - 7) * day); + var monday = new Date(saturday.getTime() + 2 * day); + + var saturdayPixel = Math.round(band.dateToPixelOffset(saturday)); + var mondayPixel = Math.round(band.dateToPixelOffset(monday)); + var length = Math.max(1, mondayPixel - saturdayPixel); + + var divWeekend = timeline.getDocument().createElement("div"); + divWeekend.className = 'timeline-ether-weekends' + + if (weekendTheme.opacity < 100) { + SimileAjax.Graphics.setOpacity(divWeekend, weekendTheme.opacity); + } + + if (horizontal) { + divWeekend.style.left = saturdayPixel + "px"; + divWeekend.style.width = length + "px"; + } else { + divWeekend.style.top = saturdayPixel + "px"; + divWeekend.style.height = length + "px"; + } + lineDiv.appendChild(divWeekend); + } + + var label = labeller.labelInterval(date, unit); + + var div = timeline.getDocument().createElement("div"); + div.innerHTML = label.text; + + + + div.className = 'timeline-date-label' + if(label.emphasized) div.className += ' timeline-date-label-em' + + this.positionDiv(div, offset); + markerDiv.appendChild(div); + + return div; + }; +}; + +/*================================================== + * Ether Highlight Layout + *================================================== + */ + +Timeline.EtherHighlight = function(timeline, band, theme, backgroundLayer) { + var horizontal = timeline.isHorizontal(); + + this._highlightDiv = null; + this._createHighlightDiv = function() { + if (this._highlightDiv == null) { + this._highlightDiv = timeline.getDocument().createElement("div"); + this._highlightDiv.setAttribute("name", "ether-highlight"); // for debugging + this._highlightDiv.className = 'timeline-ether-highlight' + + var opacity = theme.ether.highlightOpacity; + if (opacity < 100) { + SimileAjax.Graphics.setOpacity(this._highlightDiv, opacity); + } + + backgroundLayer.appendChild(this._highlightDiv); + } + } + + this.position = function(startDate, endDate) { + this._createHighlightDiv(); + + var startPixel = Math.round(band.dateToPixelOffset(startDate)); + var endPixel = Math.round(band.dateToPixelOffset(endDate)); + var length = Math.max(endPixel - startPixel, 3); + if (horizontal) { + this._highlightDiv.style.left = startPixel + "px"; + this._highlightDiv.style.width = length + "px"; + this._highlightDiv.style.height = (band.getViewWidth() - 4) + "px"; + } else { + this._highlightDiv.style.top = startPixel + "px"; + this._highlightDiv.style.height = length + "px"; + this._highlightDiv.style.width = (band.getViewWidth() - 4) + "px"; + } + } +}; Added: openoffice/ooo-site/trunk/content/scripts/simile-widget/timeline/2.3.1/scripts/ethers.js URL: http://svn.apache.org/viewvc/openoffice/ooo-site/trunk/content/scripts/simile-widget/timeline/2.3.1/scripts/ethers.js?rev=1791126&view=auto ============================================================================== --- openoffice/ooo-site/trunk/content/scripts/simile-widget/timeline/2.3.1/scripts/ethers.js (added) +++ openoffice/ooo-site/trunk/content/scripts/simile-widget/timeline/2.3.1/scripts/ethers.js Wed Apr 12 14:36:37 2017 @@ -0,0 +1,305 @@ +/*================================================== + * An "ether" is a object that maps date/time to pixel coordinates. + *================================================== + */ + +/*================================================== + * Linear Ether + *================================================== + */ + +Timeline.LinearEther = function(params) { + this._params = params; + this._interval = params.interval; + this._pixelsPerInterval = params.pixelsPerInterval; +}; + +Timeline.LinearEther.prototype.initialize = function(band, timeline) { + this._band = band; + this._timeline = timeline; + this._unit = timeline.getUnit(); + + if ("startsOn" in this._params) { + this._start = this._unit.parseFromObject(this._params.startsOn); + } else if ("endsOn" in this._params) { + this._start = this._unit.parseFromObject(this._params.endsOn); + this.shiftPixels(-this._timeline.getPixelLength()); + } else if ("centersOn" in this._params) { + this._start = this._unit.parseFromObject(this._params.centersOn); + this.shiftPixels(-this._timeline.getPixelLength() / 2); + } else { + this._start = this._unit.makeDefaultValue(); + this.shiftPixels(-this._timeline.getPixelLength() / 2); + } +}; + +Timeline.LinearEther.prototype.setDate = function(date) { + this._start = this._unit.cloneValue(date); +}; + +Timeline.LinearEther.prototype.shiftPixels = function(pixels) { + var numeric = this._interval * pixels / this._pixelsPerInterval; + this._start = this._unit.change(this._start, numeric); +}; + +Timeline.LinearEther.prototype.dateToPixelOffset = function(date) { + var numeric = this._unit.compare(date, this._start); + return this._pixelsPerInterval * numeric / this._interval; +}; + +Timeline.LinearEther.prototype.pixelOffsetToDate = function(pixels) { + var numeric = pixels * this._interval / this._pixelsPerInterval; + return this._unit.change(this._start, numeric); +}; + +Timeline.LinearEther.prototype.zoom = function(zoomIn) { + var netIntervalChange = 0; + var currentZoomIndex = this._band._zoomIndex; + var newZoomIndex = currentZoomIndex; + + if (zoomIn && (currentZoomIndex > 0)) { + newZoomIndex = currentZoomIndex - 1; + } + + if (!zoomIn && (currentZoomIndex < (this._band._zoomSteps.length - 1))) { + newZoomIndex = currentZoomIndex + 1; + } + + this._band._zoomIndex = newZoomIndex; + this._interval = + SimileAjax.DateTime.gregorianUnitLengths[this._band._zoomSteps[newZoomIndex].unit]; + this._pixelsPerInterval = this._band._zoomSteps[newZoomIndex].pixelsPerInterval; + netIntervalChange = this._band._zoomSteps[newZoomIndex].unit - + this._band._zoomSteps[currentZoomIndex].unit; + + return netIntervalChange; +}; + + +/*================================================== + * Hot Zone Ether + *================================================== + */ + +Timeline.HotZoneEther = function(params) { + this._params = params; + this._interval = params.interval; + this._pixelsPerInterval = params.pixelsPerInterval; + this._theme = params.theme; +}; + +Timeline.HotZoneEther.prototype.initialize = function(band, timeline) { + this._band = band; + this._timeline = timeline; + this._unit = timeline.getUnit(); + + this._zones = [{ + startTime: Number.NEGATIVE_INFINITY, + endTime: Number.POSITIVE_INFINITY, + magnify: 1 + }]; + var params = this._params; + for (var i = 0; i < params.zones.length; i++) { + var zone = params.zones[i]; + var zoneStart = this._unit.parseFromObject(zone.start); + var zoneEnd = this._unit.parseFromObject(zone.end); + + for (var j = 0; j < this._zones.length && this._unit.compare(zoneEnd, zoneStart) > 0; j++) { + var zone2 = this._zones[j]; + + if (this._unit.compare(zoneStart, zone2.endTime) < 0) { + if (this._unit.compare(zoneStart, zone2.startTime) > 0) { + this._zones.splice(j, 0, { + startTime: zone2.startTime, + endTime: zoneStart, + magnify: zone2.magnify + }); + j++; + + zone2.startTime = zoneStart; + } + + if (this._unit.compare(zoneEnd, zone2.endTime) < 0) { + this._zones.splice(j, 0, { + startTime: zoneStart, + endTime: zoneEnd, + magnify: zone.magnify * zone2.magnify + }); + j++; + + zone2.startTime = zoneEnd; + zoneStart = zoneEnd; + } else { + zone2.magnify *= zone.magnify; + zoneStart = zone2.endTime; + } + } // else, try the next existing zone + } + } + + if ("startsOn" in this._params) { + this._start = this._unit.parseFromObject(this._params.startsOn); + } else if ("endsOn" in this._params) { + this._start = this._unit.parseFromObject(this._params.endsOn); + this.shiftPixels(-this._timeline.getPixelLength()); + } else if ("centersOn" in this._params) { + this._start = this._unit.parseFromObject(this._params.centersOn); + this.shiftPixels(-this._timeline.getPixelLength() / 2); + } else { + this._start = this._unit.makeDefaultValue(); + this.shiftPixels(-this._timeline.getPixelLength() / 2); + } +}; + +Timeline.HotZoneEther.prototype.setDate = function(date) { + this._start = this._unit.cloneValue(date); +}; + +Timeline.HotZoneEther.prototype.shiftPixels = function(pixels) { + this._start = this.pixelOffsetToDate(pixels); +}; + +Timeline.HotZoneEther.prototype.dateToPixelOffset = function(date) { + return this._dateDiffToPixelOffset(this._start, date); +}; + +Timeline.HotZoneEther.prototype.pixelOffsetToDate = function(pixels) { + return this._pixelOffsetToDate(pixels, this._start); +}; + +Timeline.HotZoneEther.prototype.zoom = function(zoomIn) { + var netIntervalChange = 0; + var currentZoomIndex = this._band._zoomIndex; + var newZoomIndex = currentZoomIndex; + + if (zoomIn && (currentZoomIndex > 0)) { + newZoomIndex = currentZoomIndex - 1; + } + + if (!zoomIn && (currentZoomIndex < (this._band._zoomSteps.length - 1))) { + newZoomIndex = currentZoomIndex + 1; + } + + this._band._zoomIndex = newZoomIndex; + this._interval = + SimileAjax.DateTime.gregorianUnitLengths[this._band._zoomSteps[newZoomIndex].unit]; + this._pixelsPerInterval = this._band._zoomSteps[newZoomIndex].pixelsPerInterval; + netIntervalChange = this._band._zoomSteps[newZoomIndex].unit - + this._band._zoomSteps[currentZoomIndex].unit; + + return netIntervalChange; +}; + +Timeline.HotZoneEther.prototype._dateDiffToPixelOffset = function(fromDate, toDate) { + var scale = this._getScale(); + var fromTime = fromDate; + var toTime = toDate; + + var pixels = 0; + if (this._unit.compare(fromTime, toTime) < 0) { + var z = 0; + while (z < this._zones.length) { + if (this._unit.compare(fromTime, this._zones[z].endTime) < 0) { + break; + } + z++; + } + + while (this._unit.compare(fromTime, toTime) < 0) { + var zone = this._zones[z]; + var toTime2 = this._unit.earlier(toTime, zone.endTime); + + pixels += (this._unit.compare(toTime2, fromTime) / (scale / zone.magnify)); + + fromTime = toTime2; + z++; + } + } else { + var z = this._zones.length - 1; + while (z >= 0) { + if (this._unit.compare(fromTime, this._zones[z].startTime) > 0) { + break; + } + z--; + } + + while (this._unit.compare(fromTime, toTime) > 0) { + var zone = this._zones[z]; + var toTime2 = this._unit.later(toTime, zone.startTime); + + pixels += (this._unit.compare(toTime2, fromTime) / (scale / zone.magnify)); + + fromTime = toTime2; + z--; + } + } + return pixels; +}; + +Timeline.HotZoneEther.prototype._pixelOffsetToDate = function(pixels, fromDate) { + var scale = this._getScale(); + var time = fromDate; + if (pixels > 0) { + var z = 0; + while (z < this._zones.length) { + if (this._unit.compare(time, this._zones[z].endTime) < 0) { + break; + } + z++; + } + + while (pixels > 0) { + var zone = this._zones[z]; + var scale2 = scale / zone.magnify; + + if (zone.endTime == Number.POSITIVE_INFINITY) { + time = this._unit.change(time, pixels * scale2); + pixels = 0; + } else { + var pixels2 = this._unit.compare(zone.endTime, time) / scale2; + if (pixels2 > pixels) { + time = this._unit.change(time, pixels * scale2); + pixels = 0; + } else { + time = zone.endTime; + pixels -= pixels2; + } + } + z++; + } + } else { + var z = this._zones.length - 1; + while (z >= 0) { + if (this._unit.compare(time, this._zones[z].startTime) > 0) { + break; + } + z--; + } + + pixels = -pixels; + while (pixels > 0) { + var zone = this._zones[z]; + var scale2 = scale / zone.magnify; + + if (zone.startTime == Number.NEGATIVE_INFINITY) { + time = this._unit.change(time, -pixels * scale2); + pixels = 0; + } else { + var pixels2 = this._unit.compare(time, zone.startTime) / scale2; + if (pixels2 > pixels) { + time = this._unit.change(time, -pixels * scale2); + pixels = 0; + } else { + time = zone.startTime; + pixels -= pixels2; + } + } + z--; + } + } + return time; +}; + +Timeline.HotZoneEther.prototype._getScale = function() { + return this._interval / this._pixelsPerInterval; +}; Added: openoffice/ooo-site/trunk/content/scripts/simile-widget/timeline/2.3.1/scripts/event-utils.js URL: http://svn.apache.org/viewvc/openoffice/ooo-site/trunk/content/scripts/simile-widget/timeline/2.3.1/scripts/event-utils.js?rev=1791126&view=auto ============================================================================== --- openoffice/ooo-site/trunk/content/scripts/simile-widget/timeline/2.3.1/scripts/event-utils.js (added) +++ openoffice/ooo-site/trunk/content/scripts/simile-widget/timeline/2.3.1/scripts/event-utils.js Wed Apr 12 14:36:37 2017 @@ -0,0 +1,64 @@ +/*================================================== + * Event Utils + *================================================== + */ +Timeline.EventUtils = {}; + +Timeline.EventUtils.getNewEventID = function() { + // global across page + if (this._lastEventID == null) { + this._lastEventID = 0; + } + + this._lastEventID += 1; + return "e" + this._lastEventID; +}; + +Timeline.EventUtils.decodeEventElID = function(elementID) { + /*================================================== + * + * Use this function to decode an event element's id on a band (label div, + * tape div or icon img). + * + * Returns {band: <bandObj>, evt: <eventObj>} + * + * To enable a single event listener to monitor everything + * on a Timeline, a set format is used for the id's of the + * elements on the Timeline-- + * + * element id format for labels, icons, tapes: + * labels: label-tl-<timelineID>-<band_index>-<evt.id> + * icons: icon-tl-<timelineID>-<band_index>-<evt.id> + * tapes: tape1-tl-<timelineID>-<band_index>-<evt.id> + * tape2-tl-<timelineID>-<band_index>-<evt.id> + * // some events have more than one tape + * highlight: highlight1-tl-<timelineID>-<band_index>-<evt.id> + * highlight2-tl-<timelineID>-<band_index>-<evt.id> + * // some events have more than one highlight div (future) + * Note: use split('-') to get array of the format's parts + * + * You can then retrieve the timeline object and event object + * by using Timeline.getTimeline, Timeline.getBand, or + * Timeline.getEvent and passing in the element's id + * + *================================================== + */ + + var parts = elementID.split('-'); + if (parts[1] != 'tl') { + alert("Internal Timeline problem 101, please consult support"); + return {band: null, evt: null}; // early return + } + + var timeline = Timeline.getTimelineFromID(parts[2]); + var band = timeline.getBand(parts[3]); + var evt = band.getEventSource.getEvent(parts[4]); + + return {band: band, evt: evt}; +}; + +Timeline.EventUtils.encodeEventElID = function(timeline, band, elType, evt) { + // elType should be one of {label | icon | tapeN | highlightN} + return elType + "-tl-" + timeline.timelineID + + "-" + band.getIndex() + "-" + evt.getID(); +}; \ No newline at end of file
