CS142 Project #6: Javascript and Events

Problem 1: Javascript Calendar (20 points)

Create a new directory project6 with a subdirectory p1 that will contain the solution for this problem. Within that subdirectory, create a file Calendar.js that implements a Javascript class named Calendar that can be used as in the following example:

var calendar = new Calendar("div1");
calendar.render(new Date("July 4, 1776"));

The constructor takes a single argument consisting of the id attribute for a div, and the render method takes one argument consisting of a Date object that selects a particular month (the object can refer to any time within the month). When render is invoked it replaces the contents of the calendar's div with HTML that displays a small one-month calendar such as those you might see in an airline reservation Web site:

The calendar must display the days of the selected month in a grid with one line for each week and one column for each day of the week.
Weeks run from Sunday on the left to Saturday on the right. The calendar must contain a header row displaying abbreviations for the days of the week, such as "Su", "Mo", etc.
Each day of the month is displayed as a number.
Some weeks may contain days not in the selected month. These days should be displayed as the number in their month, but in a dimmed fashion to indicate they are not part of the current month.
The calendar must display the name of the month and year at the top of the calendar. In addition, it must display controls such as "<" and ">" that can be clicked to change the calendar's display to the previous or next month. Hint: you may find the following form of <a> useful for these controls:
```
<a href="javascript: ...">
```

The calendar does not need to do anything if the user clicks on a particular date; all it needs to do is display one month and allow the month to be changed by clicking on the controls.

Once you have created the Javascript class, create an HTML file calendar.html that uses the Javascript class to display two different calendar divs. One of the calendars should initially display the current month and the other should display the month of January, 2009. It should be possible to change the month of each calendar independently, using the controls on that calendar.

Problem 2: Photo Tagging (40 points)

In this project you will extend your work on Project #5 by implementing a tagging mechanism that allows users to identify people in the photos of your photo-sharing Web site. Here is a rough sketch of the way this new feature should behave:

Users can tag a photo by selecting a rectangular region of the photo and identifying the person in the selected region.
The rectangle is selected by dragging the mouse across the photo. As the user drags out the region the rectangle must stretch and shrink, with visual feedback on the screen showing the current rectangle. The user must be able to drag in any direction, and the feedback must remain visible after the drag is complete.
If the user tries to extend the rectangle outside the range of the image, you must clip the rectangle to the boundaries of the image.
If the user doesn't like the rectangle they have selected, they can select another to replace it.
The user is selected using a drop-down menu (<select> element) displaying the first and last names of all the users currently registered.
The user can submit this information, which causes the tag to be recorded in the database.
There can be multiple tags for a single photo, each with its own rectangle and user names.
The application must provide a mechanism for displaying a photo with all of its tags: the rectangle for each tag should be displayed over the photo, and when the mouse moves over the rectangle the first and last names of the user should be displayed on the page.

To get started, copy the directory tree for Project #5 to a new subdirectory p2 in the project6 directory. Do all of your work for this problem in the new directory.

Is up to you to choose how to implement photo tagging in your application, based on the description above. You can decide whether to use existing pages or add new ones, how to structure any forms that are needed, and so on.

However, you must implement and use a Javascript "class" named Tagger to select the photo region:

To use the class, invoke the constructor method with six arguments containing HTML element ids. The first id is for the element in which dragging will occur (the feedback rectangle will be displayed over this element). The second id is for the feedback <div>, which must be a child of the first id's element; the Tagger class will reposition this element during drags, and you can set CSS for this element to control the appearance of the feedback. The last four ids are for hidden form elements that will be filled in by the Tagger class.
Once you have created a Tagger object, the Tagger class implements the drag mechanism, displaying and moving the feedback <div> in response to mouse actions, and filling in the four hidden form elements with the x and y coordinates, width, and height of the selected region.
All of the dragging functions must be encapsulated inside the Tagger methods (functions declared in the Tagger prototype object): you must not use any global functions except for the Tagger constructor function and all data must be stored in the object returned by the Tagger constructor.
The constructor parameters described above should provide all the information needed for implementing the Tagger class, but you may add additional constructor parameters if your implementation of the Tagger class requires additional information.
The idea behind these restrictions is for you to create a reusable dragging mechanism that could potentially be used for other purposes besides this one. The Tagger implementation should not depend on information that is specific to the photo-tagging application; for example, it should not reference any HTML elements except those passed in explicitly and/or elements created by the Tagger class (if any).

Style Points (10 points)

The most important criteria for these points are whether or not your Calendar and Tagger implementations are reusable. In addition, your Javascript must be clean (appropriate use of classes, no global variables). We will also consider the usual issues of MVC decomposition, Rails conventions, validation, overall cleanliness of your code and templates, and the appearance and convenience of your Web pages.

Additional Requirements, Hints, etc.

You will need to modify the database schema for this project, since the schema from Project #5 does not support tags. You must use the Rails migration mechanism to make your schema changes. Note: don't use x and y as attribute names in your models: y is a predefined method in ActiveRecord and you will see weird errors if you use it as an attribute name.
If you want to position one <div> element at particular pixel coordinates inside another <div>, you must set the position style attribute in the parent <div> to "relative", and you must set the position style attribute in the child <div> to "absolute". Setting the position of the parent creates a new "positioning context" in the parent, so that the child's coordinates are interpreted relative to the parent. If you don't set the position of the parent than the coordinates of the child will be interpreted relative to the page, not the parent <div>; this will probably be much less convenient. For more information on positioning contexts and the position style attribute, see Online Section V of the book Dynamic HTML, available at http://cdn.oreilly.com/books/9780596527402/9780596527402_supp.pdf.
For some HTML elements the browser provides default event handlers. If you want to disable the default handler for an event, create your own handler for the event and return false from that handler.
Your forms must contain enough labels and other text so that an average Stanford student or professor can understand how to use them.

Deliverables

Use the standard class submission mechanism to submit the entire project6 directory. As always, your HTML files should pass XHTML validation.