Archive for March, 2008

Road to Code v0.2

Unfortunately, I been feeling sick all weekend so I didn’t have much time to work on stuff as I was expecting ~_~.

Name Change

I decided to change the name to “Slideshow Gallery”. I think you can figure out why when you abbreviate the previous name 😉

Redone the structure

I used the Extension wizard as the base and port over the stuff I had from v0.1. This is because I was learning from old v1 tutorials before and so I wanted an up to date kind of feel.

Pitfalls

Some tales to tell as I worked on v0.2

Click damn you!

I consider myself quite knowledgeable on XHTML and CSS. As I’m working in a browser window (as the email is rendered as a HTML page), I thought it will work just like a webpage. So I got the layout all setup and fine but now I want to have actions. I had little picture previews of the image attachments and when you click on it, I want it to display on-demand. But… it didn’t. I had an onclick attribute and it just won’t fire. I use the DOM inspector to check if it is there (it is) and it also worked in the DOM inspector for some reason. I was about to add either anchors (<A>) or change them to input buttons (ugly :S) but then I realized… wait a minute…. why would they allow javascript in email? Kinda like they disable images from SPAM message to prevent spammers to check if you read their emails. If they allowed javascript then a spammer could use events like the onmouseover (or worse onload) to check if you read their emails. So to work around that I used the AddEventListener() and lo and behold it works. I don’t know if this is the right way to do it so please let me know. As well I don’t know what the third parameter does. I just set it to true which was how I see it used when browsing MXR.

JSON

The Extension wizard formatted the JS file (overlay.js) in JSON (I believe is the term). I am not familar with javascript. I use frameworks for AJAX in my websites to basically encapsulate all the hard stuff. From the looks of it, it is like making a class so I went along it with. It makes sense because it organizes the code. I had members and methods and everything is going smoothly until….. back to the previous point. My “click” events won’t fire for some reason. I have no clue how to get it to work. So…. as it is due today, I just went back to original and change it all to functions and global variables (bad programming practice?) as I know it will work.

Hide!!

I had a function that basically walkthroughs the mail message by their tags. As previously stated, the mail just had a bunch of tags like…

<PRE>

<BR>

<HR>

etc…

But the original inline display of the images were not wrapped around in like a container. So I can’t just say, hide inline images by adding a simple CSS attribute. The reason I have to hide it so that on display, I show my slideshow but in PRINT I hide my slideshow and re-show the original inline images. So I have to go through the tags and add it to a <DIV> to contain it then set a CSS attribute (display) to hide it. But I couldn’t get it to work and pressed for time so I just removed it temporarly (will try for a v0.3 release).

Release v0.2

slideshowgallery.jpg

So what does release v0.2 bring. Well, after installing the extension, you currently have to manually start it in email with image attachments (will eventually make it onload). The commands are in the Tools menu and highlighted in Red, Please note the two commands (resume + pause) should only be used when it started. They are just there temporarily and will be removed eventually. This is again because I didn’t have time to put them in the Slideshow Box.

REAL Slideshow

Yup. It automatically changes the images every 10 seconds (will eventually be a Pref setting) and loops.

Transitions baby!

It currently has a Fade In/Out transition. More to come soon? Maybe…. How about you contribute 😉

So from the Game Plan v0.2 post. Here is what is done…

  • Have a box for the slideshow
  • The image container in the middle
  • Buttons to switch image (not buttons but previews! ^_^)
  • Timer button for play/pause (well should be in the box…. for v0.3)
  • Hide the current method of displaying images. Why hide? Because for printing an email. For printing I will hide my slideshow and show the images regularly. (not done -> for v0.3)
  • ADDED: Transitions!!! (well just one)

I plan to eventually use Canvas as I currently using just IMG tags and CSS. This will add more effects and make it look even more amazing!

Bugs

  • Only works in the Layout view (not working in the mail window when you open an email in a window) This is because I am not overlaying the XUL of it. I had no time to test it.
  • A small window (or big huge images) will break the layout

THE RELEASE

Here’s the link. Let me know what you think!

slideshowgalleryjosephcresencia.xpi

EDIT: Minor grammar and spelling fixes. Never do blogging late at night ~_~.

Lab – Creating an extension

Our lab last week was learning on making an extension. I, of course, already read about it for my v0.1 release but I used old tutorials. Many were the same so all is good. One site that would of made my life easier was Firefox/Thunderbird Extension Wizard that gives you a base XPI file for you to work with, with all you settings set for you. I had a base “Hello Thunderbird” made for v1 that I modified to v2/v3 style and had to manually change the settings.

While doing the lab, I was just doing Copy and Pasting since I read up on most of the extension stuff already and just had a few problems.

  • The Max Version was old (had IIRC a PreAlpha of v3.0) so I modified the Wiki to just be v3.0+
  • The code said to remove leading whitespace when Copying and Pasting code. So I modified the Wiki to have the leading whitespace already removed. So now you can easily copy and paste with no worries.

Other than that, the extension went fine. The “Hello World” statusbar and the “Relative Tab” Extension went without a hitch.

Game Plan v0.2

A simple list for what must be done for v0.2

  • Have a box for the slideshow
  • The image container in the middle
  • Buttons to switch image
  • Timer button for play/pause
  • Hide the current method of displaying images. Why hide? Because for printing an email. For printing I will hide my slideshow and show the images regularly.

That’s should be good for v0.2

Contributions

For contributions, I think the only thing I can think of is testing. Documentation is minimal as it is already easy to use (it is an extension). Other things maybe suggestions for future features. So brainstorming ideas that you would like to have for what you want in a v1.0 release. I will most likely not finish for v1.0 release as I am graduating (and depends on my free time after that). So anyone willing to take the job can have a list of TO DOs already 🙂