MapAppDoc - SVN

spongereasonInternet and Web Development

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

114 views

Files


index.html





-

the html page that will be loaded into the browser

css





-

folder containing Cascading Style Sheet files


styles.css




-

CSS styles for Firefox


stylesIE.css




-

CSS styles for IE


jScrollPane




-

CSS styles fo
r the jScrollPane jQuery plugin

images





-

folder containing images used in the project

dir






-

folder containing the xml files

js





-

folder containing the JavaScript code


jquery
-
1.2.1.js


-

an uncompressed version of the jQuery library


jquery
-
1.2.1.pack.js


-

a packed version of the jQuery library


jquery.dimensions.js


-

the dimensions plugin


jquery.easing.js


-

this plugin provides some animation effects








It is used by the ui.resizable.js


jquery.filestyle.js


-

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



jquery.mousewheel.min.js

-

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


ui.mo
use.js



-

used by ui.resizable.js


ui.resizable.js



-

allow the resizing of a DOM element


date.js




-

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






way similar to java.text.SimpleDateFormat class


dateCompact.js


-

the packed version of the above file



commonfunc.js


-

code that will be included in both Firefox and IE browsers


script.js



-

code that will be included in any browser besides IE


scriptIE.js



-

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)

example:
$
(
'#LeftPanel'
).
resizable
({

handles
:{

e
:
"#resizeHandle"
},







minWidth
:
290
,







maxWidth
:
600
,







stop
:
function
(
e
,
ui
){








setDimension();








}






});

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
o.


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
example.


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,
ui)

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:


y
-
M
-
d MMM d, y MMM d,y y
-
MMM
-
d d
-
MMM
-
y MMM d


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


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


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.


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


compareDates(date1,date1format,date2,date2format)


Compare two date strings to see which is greater.


Returns:


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:

1.

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

2.

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
IE.

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.


Example


$("input[type=file]").stylefile({










image: "choose
-
file.gif",










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



T
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
manipulated


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
loadXML(location)

in a global
variable xmlDoc.


The xml is then parsed using
processXML()
.


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

(1
-
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) |