Removing Time from Bubble

[Laura Dunn]

I am sure that the answer to this question is somewhere in this wiki
but I have searched and searched to no avail. I am wanting to alter
the display of the bubble basically. I have save the sources.js file
and load that up in my html file and have played a little bit with it
so I know that it is actually loading it.
My next step is that I want to format the date displayed so that it
never includes the time. I like the remainder of the date format
(Day, DD MMM YYYY).

Any suggestions would be greatly appreciated.
Cheers,
Laura

[Adrien Di Mascio]

Hi Laura,

On Mon, Sep 15, 2008 at 8:45 AM, Laura Dunn <laura...@gmail.com> wrote:
>
> I am sure that the answer to this question is somewhere in this wiki
> but I have searched and searched to no avail. I am wanting to alter
> the display of the bubble basically. I have save the sources.js file
> and load that up in my html file and have played a little bit with it
> so I know that it is actually loading it.
> My next step is that I want to format the date displayed so that it
> never includes the time. I like the remainder of the date format
> (Day, DD MMM YYYY).

`fillInfoBubble` calls `fillTime` which in turn use the labeller to return
the date as a string. So I think one way to go is to define a custom
labeller and override the `labelPrecise()` method. For example :

bandInfo = Timeline.createBandInfo({ ... your data ...});
bandInfo.labeller = new MyLabeller();

where `MyLabeller` could be defined like :

MyLabeller = function() {
Timeline.GregorianDateLabeller.apply(this, arguments);
}

MyLabeller.labelPrecise = function(date) {
return "your custom formatted date";
}

Never tested this, so it might not work or have some side-effects
on other printed dates.

Cheers,
Adrien.

[Laura Dunn]

Thanks Adrian.
Unfortunately my java scripting knowledge is poor to non-existant so I
guess I was looking for something a little more specific. Lazy I know
but I guess I was hoping that someone else had attempted this and had
a working example.

So I attempted what you suggested but wasn't sure what to put in the
brackets of Timeline.GregorianDateLabeller.apply()
plus I don't know what kind of formatting if wants where you suggested
"your custom formatted date". I tried a few things and always ended
up with a blank timeline.

Anyone out there have any more ideas?

Cheers.
Laura

On Sep 15, 8:21 pm, "Adrien Di Mascio" <adima...@gmail.com> wrote:
> Hi Laura,
>

[Tim Sherratt]

Laura,

I've done something similar - see

http://naa.gov.au/collection/explore/federation/constitution-timeline.aspx

I created a new fillTime function (see below) and just inserted in the
page to overwrite the existing one. It calls another function to
insert en dashes between dates.

Hope this helps.

Cheers, Tim

Timeline.DefaultEventSource.Event.prototype.fillTime = function(elmt,
labeller) {
var startDate = this._start;
var endDate = this._end;
var startString = startDate.getDate() + " " +
month[startDate.getMonth()] + " " + startDate.getFullYear();
var endString = endDate.getDate() + " " +
month[endDate.getMonth()]
+ " " + endDate.getFullYear();
if (this._instant) {
if (this.isImprecise()) {

elmt.appendChild(elmt.ownerDocument.createTextNode(startString + " " +
entity('&ndash;') + " " + endString));
} else {

elmt.appendChild(elmt.ownerDocument.createTextNode(startString));
}
} else {
if (this.isImprecise()) {
elmt.appendChild(elmt.ownerDocument.createTextNode(
this.getProperty("start") + " ~ " +
this.getProperty("latestStart")));
elmt.appendChild(elmt.ownerDocument.createElement("br"));
elmt.appendChild(elmt.ownerDocument.createTextNode(
this.getProperty("earliestEnd") + " ~ " +
this.getProperty("end")));
} else {

elmt.appendChild(elmt.ownerDocument.createTextNode(startString + " " +
entity('&ndash;') + " " + endString));
}
}
};

function entity(str, mode) {
str = (str) ? str : "";
mode = (mode) ? mode : "string";

var e = document.createElement("div");
e.innerHTML = str;

if (mode == "numeric") {
return "&#" + e.innerHTML.charCodeAt(0) + ";";
}
else if (mode == "utf16") {
var un = e.innerHTML.charCodeAt(0).toString(16);
while (un.length < 4) un = "0" + un;
return "\\u" + un;
}
else return e.innerHTML;
}

--
Tim Sherratt (t...@discontents.com.au)
http://www.discontents.com.au

[Laura Dunn]

Hi Tim
I guess I should have provided more information. I am calling :
<script src="http://simile.mit.edu/timeline/api/timeline-api.js"
type="text/javascript"></script>
whereas you are using version 2.0.
This causes a problem in that it doesn't seem to understand
month[startDate.getMonth()].
If I just do startDate.getMonth() then it is a number so I am guessing
that the month[] changes that into a three letter word which is what I
would like. Unfortunately if I use this then no date shows up at all.

I also tried simkply calling version 2.0 instead (without changing
anything else) but this means that my timeline does not show at all.
As there seems to be little information regarding the implementation
of version 2.0 I don't know what the differences are.

Any more suggestions or help would still be appreciated!

Cheers,
Laura

[jcorreia]

Hi Laura,
I´m using timeline 2 from svn.
What I did was to change the function filltime directly in timeline-
bundle.js (I´m using the bundle version)

Find :
}},fillTime:function(A,B){

and delete everything between that and

}}},fillInfoBubble:function(A,E,M){var K=A.ownerDocument;

replace with the following code :

var startLabPrec =B.labelPrecise(this._start);var endLabPrec
=B.labelPrecise(this._end);
var fStart = new Date(startLabPrec);var fEnd = new Date(endLabPrec);
var fStartString = fStart.getDate() + "." + (fStart.getMonth()+1) +
"." + fStart.getFullYear();
var fEndString = fEnd.getDate() + "." + (fEnd.getMonth()+1) + "." +
fEnd.getFullYear();
if(this._instant){if(this.isImprecise())
{A.appendChild(A.ownerDocument.createTextNode(fStartString+" -
"+fEndString));
A.appendChild(A.ownerDocument.createElement("br"));
}else{A.appendChild(A.ownerDocument.createTextNode(fStartString));
}}else{if(this.isImprecise())
{A.appendChild(A.ownerDocument.createTextNode(B.labelPrecise(this._earliestStart)
+" ~ "+B.labelPrecise(this._latestStart)));
A.appendChild(A.ownerDocument.createElement("br"));
A.appendChild(A.ownerDocument.createTextNode(B.labelPrecise(this._earliestEnd)
+" ~ "+B.labelPrecise(this._latestEnd)));
}else{A.appendChild(A.ownerDocument.createTextNode(fStartString +" -
"+fEndString));
A.appendChild(A.ownerDocument.createElement("br"));


Hope it helped ;)

[Laura Dunn]

Thanks for this code. This gave me the dates in format dd/mm/yyyy
which was a great start. Unfortunately what I really wanted was Day,
dd mmm yyyy ( for eg. Mon, 15 Sep 2008). After much searching I have
found a solution that can be used in version 1.3 if you don't want to
download the whole simile program.

Basically you need to get the sources.js file and save it and add that
to the list of scripts you call at the beginning of your html. Make
sure you call it after

<script src="http://simile.mit.edu/timeline/api/timeline-api.js"
type="text/javascript"></script>

so that is overrules the sources.js file that it calls from there.

I essentially used the same code as jcorreia sent me above with a few
things adjusted:

This is what I now have inside fillTime: function(elmt, labeller){
var sDate = this._start;
var eDate = this._end;
var sDated = new Date(sDate);
var eDated = new Date(eDate);
Date.MONTH_NAMES =
["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];
Date.prototype.getMonthName = function() {return
Date.MONTH_NAMES[this.getMonth()];}
Date.WEEKDAY_NAMES = ["Sun","Mon","Tue","Wed","Thu","Fri","Sat"];
Date.prototype.getWeekday = function() {return
Date.WEEKDAY_NAMES[this.getDay()];}
var startString = sDated.getWeekday() + ", " + sDated.getDate() + "
" + sDated.getMonthName() + " " + sDated.getFullYear();
var endString = sDated.getWeekday() + ", " + eDated.getDate() + " "
+ sDated.getMonthName() + " " + eDated.getFullYear();

if (this._instant) {
if (this.isImprecise()) {

elmt.appendChild(elmt.ownerDocument.createTextNode(startString+ " - "
+endString));

}
else {

elmt.appendChild(elmt.ownerDocument.createTextNode(startString));
}
}
else {
if (this.isImprecise()) {

elmt.appendChild(elmt.ownerDocument.createTextNode(labeller.labelPrecise(this._start)
+ " ~ " + labeller.labelPrecise(this._latestStart)));

elmt.appendChild(elmt.ownerDocument.createElement("br"));

elmt.appendChild(elmt.ownerDocument.createTextNode(labeller.labelPrecise(this._earliestEnd)
+ " ~ " + labeller.labelPrecise(this._end)));
}
else {

elmt.appendChild(elmt.ownerDocument.createTextNode(startString+ " - "
+endString));

elmt.appendChild(elmt.ownerDocument.createElement("br"));
}
}
}

Thanks for everyones help! Much appreciated and I hope that this can
help someone else out in the future!

[Laura Dunn]

Sorry minor fine-tuning.
The variable endString had some typos. This is what it should be!
var endString = eDated.getWeekday() + ", " + eDated.getDate() + " " +
eDated.getMonthName() + " " + eDated.getFullYear();

Cheers! :-)

[LarryK]

Hi Laura,

I suggest that you use the current software if possible. It has and
will continue to be enhanced. The old software version will not be
changing.

Regards,

Larry