MapAppDoc - SVN

spongereasonInternet and Web Development

Nov 12, 2013 (3 years and 7 months ago)





the html page that will be loaded into the browser



folder containing Cascading Style Sheet files



CSS styles for Firefox



CSS styles for IE



CSS styles fo
r the jScrollPane jQuery plugin



folder containing images used in the project



folder containing the xml files



folder containing the JavaScript code



an uncompressed version of the jQuery library



a packed version of the jQuery library



the dimensions plugin



this plugin provides some animation effects

It is used by the ui.resizable.js



adds a c
ustom style for the <input type=”file”/> DOM elements



the minified version of the mousewheel plugin. It is used by the

jScrollPane plugin. It allows scrolling with the mouse wheel in a

customized scrollpane


used by ui.resizable.js



allow the resizing of a DOM element



a set of functions that allow the formatting of time strings in a

way similar to java.text.SimpleDateFormat class



the packed version of the above file



code that will be included in both Firefox and IE browsers



code that will be included in any browser besides IE



code that will be included only in IE

The Resizable Plugin (ui.resizable.js)

This plugin is used for allowing the resizing of the left and right panels, by dragging the bar that
separates it.

Use: $(selector).resizable(options)










Possible options:

handles {n, e, s, w, ne, se, sw, nw}

Each handle string (if specified) should be a jquery selector matching t
he child element of the resizable
to use as the handle. If the handle is not a child of the resizable, you can pass in the DOM node or a
valid jQuery object directly.

containment Element, Selector

Constrains resizing to within the bounds of the specif
ied element

can be a DOM element, 'parent',
'document' or a jQuery selector.

maxHeight Int

This is the maximum height the resizable should be allowed to resize to.

maxWidth Int

This is the maximum width the resizable should be allowed to resize t

minHeight Int

This is the minimum height the resizable should be allowed to resize to.

minWidth Int

This is the minimum width the resizable should be allowed to resize to.

proxy String

This is the css class that will be added to a proxy elem
ent to outline the resize during the drag of the
resize handle. Once the resize is complete, the element is sized.

destructive Boolean

Largely internal option. For elements that cannot have childnodes, it creates a wrapper div and all
handles by itself
, allowing to still control them via css. Try doing $('textarea').resizable() for an

proportionallyResize Array

Advanced option that allows other elements to get proportionally resized together with the original one.
Just specify jquery strin
g in this array or directly insert DOM nodes.

start Function(e, ui)

This function is called at the start of a resize operation.

resize Function(e, ui)

This function is called during the resize, on the drag of the resize handler.

stop Function(e,

This function is called at the end of a resize operation.

SimpleDateFormat functions (date.js)

getDateFromFormat( date_string , format_string )

This function takes a date string and a format string. It matches

If the date string matches the
format string, it returns the

getTime() of the date. If it does not match, it returns 0.

parseDate( date_string [, prefer_euro_format] )

This function takes a date string and tries to match it to a

number of possible date formats to get the value. I
t will try to

match against the following international formats, in this order:

d MMM d, y MMM d,y y
d d
y MMM d

M/d/y M
y M.d.y MMM
d M/d M

d/M/y d
y d.M.y d
MMM d/M d

A second argu
ment may be passed to instruct the method to search

for formats like d/M/y (european format) before M/d/y (American).

Returns a Date object or null if no patterns match.

formatDate (date_object, format)

Returns a date in the output format specified.

he format string uses the same abbreviations as in getDateFromFormat()


Compare two date strings to see which is greater.


1 if date1 is greater than date2

0 if date2 is greater than dat
e1 of if they are the same

1 if either of the dates is in an invalid format

Creating a customized input file DOM element

In order to create a custom input file DOM element you have two choices:


Put a picture in the position of the “Browse” butt
on of the element and set the opacity of the
element to 0.


Hide the input file, and trigger the click event on the browse button from another DOM element

The second method allows for the best visual appearance, but unfortunately you can only apply it in

Firefox probably considers this as a security issue.

For IE we chose the second method and for Firefox the first one.

For Firefox we used the jQuery File Style Plugin which sets the opacity of the input file to 0, positions
your chosen image under th
e browse button and creates the illusion of a custom styled input file.



image: "choose

imageheight : 20,

imagewidth : 80,

width : 230


In IE we
created a fake input file (from a text input and a button).
The real input file is hidden.

When the user clicks on the browse button the browse() function is
executed which triggers a click event on the real input file, thus
opening a browse window. If the

real input file changes its value the
setPath function is called which changes also the value of the fake
input. If the fake input receives focus, its value is cleared and the
real input is deleted and then recreated.

The Accordion

There are two acco
rdions in the project:

an accordion that allows choosing the xml file to be loaded and setting the log view options

an accordion inside the first one that allows selecting which categories and which loaded files will
be shown in the Log View

Each part o
f an accordion contains a head and a body.

When the head
is clicked the body is shown or hidden.

The size of the log view is recomputed taking into account the size of the current visible part of
the accordion.

The body parts of the second accordion c
annot be both closed at the same time as is the case of
the first accordion. This was done to prevent some problems during animation.

Custom Scrollbars

Custom scrollbars are obtained by using the jScollPane jQuery plugin.

By calling jScrollPane() up
on an element a div with the class jScrollPaneContainer is created.

This div wraps the element and contains the custom scrollbars.

The styles of the scrollPane and the scrollbars can be changed from jScrollPane.css

The $(document).ready() function

he $(document).ready() binds a function to be executed whenever
the DOM is ready to be traversed and manipulated.

This is a solid replacement for using window.onload, and attaching a function to that. By using
this method, your bound function will be call
ed the instant the DOM is ready to be read and

Please ensure you have no code in your <body> onload event handler, otherwise
$(document).ready() may not fire.

You can have as many $(document).ready events on your page as you like. The functio
ns are
then executed in the order they were added.

XML files

After an xml file has been chosen from the browse window and the
Load button is clicked the string containing the location of the file
is parsed to give only the name of the file and the fold
er in which
it is located (in our case “dir”). (the code can be found in
commonfunc.js starting with line 133)

The file is then loaded using

in a global
variable xmlDoc.

The xml is then parsed using

Three global arrays ar
e used to keep track of the already loaded
files, categories and titles.

The first td elements of any row (besides the first one) of the table with the id LoadedData (the
logView) have three additional attributes: timeInMilisec, latitude and longitude.

Thsese are the string formats supported:

The format string consists of the following abbreviations:


// Field | Full Form | Short Form


// Year | yyyy (4 digits) |
yy (2 digits), y (2 or 4 digits)

// Month | MMM (name or abbr.)| MM (2 digits), M (1 or 2 digits)

// | NNN (abbr.) |

// Day of Month | dd (2 digits) | d (1 or 2 digits)

// Day of Week | EE (name) | E (abbr)

// Hour

12) | hh (2 digits) | h (1 or 2 digits)

// Hour (0
23) | HH (2 digits) | H (1 or 2 digits)

// Hour (0
11) | KK (2 digits) | K (1 or 2 digits)

// Hour (1
24) | kk (2 digits) | k (1 or 2 digits)

// Minute | mm (2 digits)

| m (1 or 2 digits)

// Second | ss (2 digits) |