diff --git a/pom.xml b/pom.xml
index b277531ca2d362b7cdcee9beed221ee2d233829d..e4d3eb5e6c35e6f2e5eee725aba88f81b536479d 100644
--- a/pom.xml
+++ b/pom.xml
@@ -259,6 +259,13 @@
<include>${basedir}/target/jquery/jquery/openolat/jquery.statistics.chart.min.js</include>
</includes>
</aggregation>
+ <aggregation>
+ <output>${basedir}/src/main/webapp/static/js/jquery/openolat/jquery.timeline.min.js</output>
+ <removeIncluded>false</removeIncluded>
+ <includes>
+ <include>${basedir}/target/jquery/jquery/openolat/jquery.timeline.min.js</include>
+ </includes>
+ </aggregation>
</aggregations>
</configuration>
</execution>
diff --git a/src/main/java/org/olat/modules/portfolio/ui/AbstractPageListController.java b/src/main/java/org/olat/modules/portfolio/ui/AbstractPageListController.java
index 145cdd05bc1bc5d0806c05e57925c24dc4458b6f..5e36551f66fbee4c30a5a8e0dbe7c93afcfdb181 100644
--- a/src/main/java/org/olat/modules/portfolio/ui/AbstractPageListController.java
+++ b/src/main/java/org/olat/modules/portfolio/ui/AbstractPageListController.java
@@ -122,7 +122,7 @@ implements Activateable2, TooledController, FlexiTableComponentDelegate {
@Override
protected void initForm(FormItemContainer formLayout, Controller listener, UserRequest ureq) {
timelineEl = new TimelineElement("timeline");
- timelineEl.setContainerId("o_portfolio_entries_timeline");
+ timelineEl.setContainerId("o_portfolio_entries_timeline_" + timelineEl.getComponent().getDispatchID());
formLayout.add("timeline", timelineEl);
initTimeline();
diff --git a/src/main/java/org/olat/modules/portfolio/ui/_content/binder_pages.html b/src/main/java/org/olat/modules/portfolio/ui/_content/binder_pages.html
index 331e19095f1cd6bf8577539695326a9ed224b6e4..1447ece05297593989d1366cc23cd4784178c384 100644
--- a/src/main/java/org/olat/modules/portfolio/ui/_content/binder_pages.html
+++ b/src/main/java/org/olat/modules/portfolio/ui/_content/binder_pages.html
@@ -32,7 +32,7 @@
#if($timelineSwitch)
<div class="o_portfolio_timeline">
- <div id="o_portfolio_entries_timeline">$r.render("timeline")</div>
+ <div id='o_portfolio_entries_timeline_${r.getComponent("timeline").getDispatchID()}'>$r.render("timeline")</div>
</div>
#end
</div>
\ No newline at end of file
diff --git a/src/main/java/org/olat/modules/portfolio/ui/_content/my_pages.html b/src/main/java/org/olat/modules/portfolio/ui/_content/my_pages.html
index 198a0c61ed5ae3f86228b630dd3876820a0d929c..7af68fa21e5c31ad7bd140e269d729a15cb75900 100644
--- a/src/main/java/org/olat/modules/portfolio/ui/_content/my_pages.html
+++ b/src/main/java/org/olat/modules/portfolio/ui/_content/my_pages.html
@@ -13,7 +13,7 @@
#if($timelineSwitch)
<div class="o_portfolio_timeline">
- <div id="o_portfolio_entries_timeline">$r.render("timeline")</div>
+ <div id='o_portfolio_entries_timeline_${r.getComponent("timeline").getDispatchID()}'>$r.render("timeline")</div>
</div>
#end
</div>
\ No newline at end of file
diff --git a/src/main/java/org/olat/modules/portfolio/ui/component/TimelineComponent.java b/src/main/java/org/olat/modules/portfolio/ui/component/TimelineComponent.java
index 36259b6e253dce955b949c58e96e64f94a61baa4..22c1f1c06f3d4d84b1b56add04eabe4e6667ac30 100644
--- a/src/main/java/org/olat/modules/portfolio/ui/component/TimelineComponent.java
+++ b/src/main/java/org/olat/modules/portfolio/ui/component/TimelineComponent.java
@@ -30,7 +30,6 @@ import org.olat.core.gui.components.form.flexible.impl.FormBaseComponentImpl;
import org.olat.core.gui.render.ValidationResult;
import org.olat.core.helpers.Settings;
import org.olat.core.util.Formatter;
-import org.olat.core.util.StringHelper;
/**
*
@@ -96,36 +95,17 @@ public class TimelineComponent extends FormBaseComponentImpl {
return formattedDate;
}
- @Override
- protected void doDispatchRequest(UserRequest ureq) {
- String slideCmd = ureq.getParameter("slide");
- if(StringHelper.containsNonWhitespace(slideCmd)) {
- if("up".equals(slideCmd)) {
- slideUp();
- } else if("down".equals(slideCmd)) {
- slideDown();
- }
- }
- }
-
- private void slideUp() {
-
- }
-
- private void slideDown() {
-
- }
-
@Override
public void validate(UserRequest ureq, ValidationResult vr) {
super.validate(ureq, vr);
if(Settings.isDebuging()) {
vr.getJsAndCSSAdder().addRequiredStaticJsFile("js/d3/d3.js");
+ vr.getJsAndCSSAdder().addRequiredStaticJsFile("js/jquery/openolat/jquery.timeline.js");
} else {
vr.getJsAndCSSAdder().addRequiredStaticJsFile("js/d3/d3.min.js");
+ vr.getJsAndCSSAdder().addRequiredStaticJsFile("js/jquery/openolat/jquery.timeline.min.js");
}
- vr.getJsAndCSSAdder().addRequiredStaticJsFile("js/jquery/openolat/jquery.timeline.js");
}
@Override
diff --git a/src/main/java/org/olat/modules/portfolio/ui/component/TimelineComponentRenderer.java b/src/main/java/org/olat/modules/portfolio/ui/component/TimelineComponentRenderer.java
index a5ea3011b0ba982ddca53105029a9bacde9aa8d4..eaa3766976ed02c983120a27da57759581cacf21 100644
--- a/src/main/java/org/olat/modules/portfolio/ui/component/TimelineComponentRenderer.java
+++ b/src/main/java/org/olat/modules/portfolio/ui/component/TimelineComponentRenderer.java
@@ -41,13 +41,12 @@ public class TimelineComponentRenderer extends DefaultComponentRenderer {
RenderResult renderResult, String[] args) {
TimelineComponent cmp = (TimelineComponent)source;
- //Translator translator = cmp.getTranslator();
- sb.append("<div id='timeline'></div>");
+ String dispatchId = cmp.getDispatchID();
+ sb.append("<div id='timeline_").append(dispatchId).append("'></div>");
sb.append("<script type='text/javascript'>\n")
.append("/* <![CDATA[ */ \n")
- .append("jQuery(function() {\n");
-
- sb.append(" jQuery('#timeline').timeline({")
+ .append("jQuery(function() {\n")
+ .append(" jQuery('#timeline_").append(dispatchId).append("').timeline({")
.append(" parentContainerId: '").append(cmp.getContainerId()).append("',\n");
if(cmp.getStartTime() != null && cmp.getEndTime() != null) {
sb.append(" startTime: ").append(cmp.getStartTime().getTime()).append(",\n")
diff --git a/src/main/webapp/static/js/jquery/openolat/jquery.timeline.js b/src/main/webapp/static/js/jquery/openolat/jquery.timeline.js
index d1688017d776897432e409ce2a971ead7e0b7bf8..6812beb7a90b456d335d577e25506c1ee24f3ddc 100644
--- a/src/main/webapp/static/js/jquery/openolat/jquery.timeline.js
+++ b/src/main/webapp/static/js/jquery/openolat/jquery.timeline.js
@@ -1,31 +1,26 @@
(function ($) {
$.fn.timeline = function(options) {
- var settings = $.extend({
- parentContainerId:'',
- startTime: null,
- endTime: null,
- dateFormat: '%d.%m.%y',
- dateLabel: 'Date',
- status: { draft: "Draft", published: "Published", inRevision: "In revision", closed: "Closed", deleted: "Deleted"},
- values: []
- }, options );
-
-
- createButtons(this, settings);
- createGraph(this, settings);
-
- timelineItems(this, settings);
- addHandlers(this, settings);
-
+ var settings = this.data("data-oo-timeline");
+ if(typeof timeline === "undefined") {
+ settings = $.extend({
+ parentContainerId:'',
+ startTime: null,
+ endTime: null,
+ dateFormat: '%d.%m.%y',
+ dateLabel: 'Date',
+ status: { draft: "Draft", published: "Published", inRevision: "In revision", closed: "Closed", deleted: "Deleted"},
+ values: []
+ }, options );
+
+ this.data("data-oo-timeline", settings);
+ createButtons(this, settings);
+ createGraph(this, settings);
+ timelineItems(this, settings);
+ addHandlers(this, settings);
+ }
return this;
};
-
- createButtons = function($obj, settings) {
- var parentContainer = jQuery('#' + settings.parentContainerId);
- parentContainer.prepend( "<div class='o_timeline_up'><a href='javascript:;' onclick=''><i class='o_icon o_icon-lg o_icon o_icon_slide_up'> </i></a></div>" );
- parentContainer.append("<div class='o_timeline_down'><a href='javascript:;' onclick=''><i class='o_icon o_icon-lg o_icon o_icon_slide_down'> </i></a></div>")
- }
-
+
var svg;
var maxCurveY = 10;
var x, y, xAxis, yAxis;
@@ -36,6 +31,13 @@
var data, statusTranslations;
var slideDelta = (183 * 24 * 60 * 60 * 1000);//six month in milliseconds
var sliding = false;
+
+ createButtons = function($obj, settings) {
+ sliding = false;
+ var parentContainer = jQuery('#' + settings.parentContainerId);
+ parentContainer.prepend( "<div class='o_timeline_up'><a href='javascript:;' onclick=''><i class='o_icon o_icon-lg o_icon o_icon_slide_up'> </i></a></div>" );
+ parentContainer.append("<div class='o_timeline_down'><a href='javascript:;' onclick=''><i class='o_icon o_icon-lg o_icon o_icon_slide_down'> </i></a></div>")
+ }
createGraph = function($obj, settings) {
diff --git a/src/main/webapp/static/js/jquery/openolat/jquery.timeline.min.js b/src/main/webapp/static/js/jquery/openolat/jquery.timeline.min.js
new file mode 100644
index 0000000000000000000000000000000000000000..31ba6093b6f43193c3907ee133b079952a72c622
--- /dev/null
+++ b/src/main/webapp/static/js/jquery/openolat/jquery.timeline.min.js
@@ -0,0 +1 @@
+(function(f){f.fn.timeline=function(w){var x=this.data("data-oo-timeline");if(typeof timeline==="undefined"){x=f.extend({parentContainerId:"",startTime:null,endTime:null,dateFormat:"%d.%m.%y",dateLabel:"Date",status:{draft:"Draft",published:"Published",inRevision:"In revision",closed:"Closed",deleted:"Deleted"},values:[]},w);this.data("data-oo-timeline",x);createButtons(this,x);createGraph(this,x);timelineItems(this,x);addHandlers(this,x)}return this};var o;var d=10;var j,i,h,b;var l,r,n;var g,q,p,c,a;var t;var m,e;var v,u;var k=(183*24*60*60*1000);var s=false;createButtons=function(y,w){s=false;var x=jQuery("#"+w.parentContainerId);x.prepend("<div class='o_timeline_up'><a href='javascript:;' onclick=''><i class='o_icon o_icon-lg o_icon o_icon_slide_up'> </i></a></div>");x.append("<div class='o_timeline_down'><a href='javascript:;' onclick=''><i class='o_icon o_icon-lg o_icon o_icon_slide_down'> </i></a></div>")};createGraph=function(C,z){this.parentContainer=jQuery("#"+z.parentContainerId);var B=parentContainer.width();C.width(B);var A=C.height();if(parentContainer.height()<500){A=500}C.height(A);v=z.values;e=z.endTime;m=z.startTime;u=z.status;l={top:10,right:60,bottom:40,left:80};r=B-l.left-l.right;n=A-l.top-l.bottom;var y=d3.time.format(z.dateFormat);t=function(D){return y(new Date(D))};j=d3.scale.linear().domain([0,1]).range([0,r]);h=d3.svg.axis().scale(j).ticks(0).orient("bottom");var w=z.startTime==null?d3.min(v,function(D){return D.time}):z.startTime;var x=z.endTime==null?d3.max(v,function(D){return D.time}):z.endTime;i=d3.scale.linear().domain([w,x]).range([n,0]);b=d3.svg.axis().scale(i).orient("left").ticks(5).tickFormat(t).tickSize(-r,5);o=d3.select("#"+C.attr("id")).append("svg").attr("width",r+l.left+l.right).attr("height",n+l.top+l.bottom).append("g").attr("transform","translate("+l.left+","+l.top+")");q=d3.scale.linear().domain([0,1]).range([0,r]);p=d3.scale.linear().domain([0,d]).range([n,0]);a=d3.scale.linear().domain([w,x]).range([0,d]);g=d3.svg.line().x(function(D){return q(curvedX(D.y))}).y(function(D){return p(D.y)}).interpolate("linear")};addHandlers=function(x,w){jQuery("#"+w.parentContainerId+" .o_timeline_up a").on("click",function(){slideUp()});jQuery("#"+w.parentContainerId+" .o_timeline_down a").on("click",function(){slideDown()})};slideUp=function(){if(s){return}s=true;e=e+k;m=m+k;updateTimeline(true)};slideDown=function(){if(s){return}s=true;e=e-k;m=m-k;updateTimeline(false)};updateTimeline=function(w){try{a.domain([m,e]);i.domain([m,e]);drawAxis();drawDots(w)}catch(x){if(window.console){console.log(x)}}};drawAxis=function(){o.select(".y").call(b)};drawDots=function(w){var x=o.selectAll(".dot").data(v,idKey);x.transition().duration(1000).ease("linear").attrTween("cx",function(y){return function(z){var B=(1-z)*k;var A=w?(y.time+B):(y.time-B);return q(curvedX(a(A)))}}).attr("cy",function(y){return i(y.time)}).each("end",function(){s=false})};timelineItems=function(B,y){o.append("g").attr("class","x axis").attr("transform","translate(0,"+n+")").call(h);o.append("g").attr("class","y axis").call(b).append("text").attr("class","label").attr("transform","rotate(-90)").attr("y",6).attr("dy",".71em").attr("dx","-.71em").style("text-anchor","end").text("Date");var A=[];for(var x=0;x<(d*20);x++){A.push({y:(x==0?0:x/20)})}var w=o.append("path").data([A]).attr("d",g).attr("class","o_timeline_curve");var z=o.selectAll(".dot").data(v,idKey);z.enter().append("g").append("circle").attr("r",function(C){return(7+Math.floor(Math.random()*5))}).attr("id",idKey).attr("class",function(C){return"dot o_pf_status_"+C.status}).attr("cx",function(C){return q(curvedX(a(C.time)))}).attr("cy",function(C){return i(C.time)});jQuery("g .dot").tooltip({html:true,container:"body",title:function(){var F=jQuery(this).attr("id");var E;for(var D=v.length;D-->0;){if(F==v[D].id){E=v[D]}}var C=u[E.status];return"<p>"+E.title+"<br>Status: "+C+"</p>"}});z.exit()};idKey=function(w){return w.id};curvedX=function(w){return(1.5+Math.sin(w*1.1))/3}}(jQuery));
\ No newline at end of file