Javascript Timeline?

[amberpeddicord]

Hello all!

I'm opening this issue here because it pertains to the project, but let me know if I should open one on the class page as well! Basically, I was wondering if it were possible to add javascript to SVG? I want to make an SVG file for our timeline on the website and make javascript that would allow the user to click a certain part of the timeline to bring up the text of what happened in that year, etc. Is this possible, and if so how would I go about starting that process?

[ebeshero]

@amberpeddicord Yes indeed! And this is one option for JavaScript Ex 2, by the way, so you're in good shape for that assignment. Start by plotting the timeline itself: Do you want to set the dates on the line proportionally? This will take something called "date arithmetic": It's easiest to plot dates proportionally along a line based simply on numbers of years apart. You can plot circles along the line for specific events that go with certain years. And you can plot SVG text elements as labels next to those years. After that, we'll play with JavaScript so that on-click the text shows up, or disappears.

[ebeshero]

@amberpeddicord I updated this to finish my explanation.

[amberpeddicord]

@ebeshero I would like to plot them proportionally, so that would be great. Thank you!

[ebeshero]

@amberpeddicord Do you want to plot months and days? Or are years okay? Let me explain:

With years, you can treat one year as like one whole number: 1518 to 1519 is the difference of 1 * $spacer.

If you want to get super precise with dates inside a year (like March 5, 1519) we can do a little "date arithmetic" with an XPath function here: You'll need to start with a whole number, the year, and add to it a proportion representing the number of days from the start of the year. To figure that out, let's start by finding out the number of days from the start of the year: There is an XPath function for that, which you may have seen before on an XPath homework exercise in this course: format-date(). Read about this in the Michael Kay book, pp. 781-788 or online from the WWW consortium here. One of those format-date "picture strings" will give you the number of days into the year that was your date.

Then, if March 15 was, say the 45th day out of let's round it at 365, you can turn that into a decimal by calculating 45 div 365 and adding that to the whole number value you assign the year 1519.

Okay, about assigning the years numerical values: how do you do that? Well, find your minimum year: that can be year 0 or 1. And your maximum year is the latest year. Subtract the minimum from the maximum to roughly determine the length of your line.

[ebeshero]

Think if you want your line to be vertical or horizontal! Either way is fine--that's a design decision. :-)

[amberpeddicord]

@ebeshero We only have years listed, so we don't need to worry about months or days thankfully! Should I just plot the dates on the timeline for now and add the text in when I add javascript, or should that be included in the SVG as well?

[haggis78]

Sorry to interrupt the fun, but if I push to Github right now, will I cause any conflicts? I've just been working on CharterCollation.xml, and I think I moved an html file (an XSLT-generated output) into a different folder.

[alnopa9]

@haggis78 I've been pushing to the repo frequently tonight and I know Amber updated a file. I would d a git pull.

[ebeshero]

@haggis78 Pull before you push! Can you do a git pull?

[haggis78]

Sure -- that's not going to overwrite/do a merge conflict on my file at this end? Sorry, paranoid.

[ebeshero]

@amberpeddicord I think you should add the text with this SVG because it's part of the SVG plot. (There's another approach in JavaScript where you can add something called write innerHTML where you can add some HTML elements in a space on click or mouse-enter etc., but I don't think there's such a thing as adding innerSVG.) So what we do is plot the whole thing as if it's all visible, then do some magic in CSS and JavaScript to make a property invisible until the visitor clicks on something. For right now, plot everything, and then let's think about what parts you want to always show, and what parts you want to hide until a click.

[alnopa9]

@haggis78 If it's a file you didn't edit locally, they should just update. If you changed a file that has been updated on the repo, you'll see that when you do a git pull it'll be aborted, stopping your local files from being changed. Your work will be safe. If in doubt, save the files somewhere else on your laptop, do a git pull, and then you can add the files back to the repo and push them up.

[ebeshero]

@haggis78 Well, if you're worried, do a git add and a git commit right now, and then git pull.

[amberpeddicord]

@ebeshero Sounds good, thank you!

[haggis78]

Following the "if in doubt" advice.

[ebeshero]

@haggis78 The reason for that is, you can add and commit your changes right now so they're part of the git commit history on your local repo. Then when you pull, see if your computer is able to reconcile your commit with the ones made by your team! If it can't, well, you'll have to deal with the merge conflict (and we'll help)! Let us know what happens here.

[alnopa9]

@amberpeddicord Not to sound like a broken record, but can you update the server again?

[ebeshero]

@alnopa9 I think you and I and Kiara are all members of each project team (we're members of the group that can edit the webspace), so you could get into the server, but I can imagine it's safest to have one member of the team controlling the web space...

[amberpeddicord]

@alnopa9 Updated again!

[ebeshero]

@amberpeddicord You and @ChinoyIndustries (and @alnopa9 ) should git pull as well!

[ebeshero]

Is everyone okay? Any merge conflicts?

[alnopa9]

@ebeshero all is clear on my end.

[amberpeddicord]

@ebeshero I'm good as well

[haggis78]

Pushed. Done for tonight and out of your way. Carry on!

[haggis78]

(Actually pushed like 10 minutes ago and the comment didn't load.)