point.lat) != (coords[j].lat > point.lat)) &&
344 | (point.lng < (coords[j].lng - coords[i].lng) * (point.lat - coords[i].lat) / (coords[j].lat - coords[i].lat) + coords[i].lng)) {
345 | inside = !inside;
346 | }
347 |
348 | j = i;
349 | }
350 |
351 | if(inside) {pip = true};
352 |
353 | } else {
354 | if(t.inPolygon(polygon, pip)) {pip = true;}
355 | }
356 |
357 | })
358 |
359 | }
360 |
361 | return pip;
362 |
363 | },
364 | keyCheck: function(keys) {
365 | keys = Array.isArray(keys) == false ? [keys]: keys;
366 | var myKey = this.properties.key;
367 | var inc = false;
368 | myKey = Array.isArray(myKey) == false ? [myKey]: myKey;
369 | for(var i = 0; i < myKey.length; i++) {
370 | if(keys.indexOf(myKey[i]) != -1) {
371 | inc = true;
372 | break;
373 | }
374 | }
375 | return inc;
376 | }
377 |
378 | })
379 |
380 | L.siteMarker = function(latlng, options, properties, parent) {
381 | return new L.SiteMarker(latlng, options, properties, parent)
382 | }
--------------------------------------------------------------------------------
/www/js/netassess-shiny.js:
--------------------------------------------------------------------------------
1 | netAssess.shinyBindings = {};
2 |
3 | netAssess.shinyBindings.customAnchor = new Shiny.InputBinding();
4 | $.extend(netAssess.shinyBindings.customAnchor, {
5 | find: function(scope) {
6 | return $(scope).find(".shiny-custom-anchor");
7 | },
8 | getValue: function(el) {
9 | return $(el).data("anchorData");
10 | },
11 | setValue: function(el, value) {
12 | $(el).data("anchorData", value)
13 | $(el).trigger("anchorupdate");
14 | },
15 | subscribe: function(el, callback) {
16 | $(el).on("anchorupdate", callback)
17 | },
18 | unsubscribe: function(el) {
19 | $(el).off("anchorupdate")
20 | },
21 | initialize: function(el) {
22 | el.updateAnchor = function(data) {
23 | $(this).data("shinyInputBinding").setValue(this, data);
24 | }
25 | }
26 |
27 | })
28 | Shiny.inputBindings.register(netAssess.shinyBindings.customAnchor);
29 |
30 | Shiny.addCustomMessageHandler("updateVisibleMonitors", function(data) {
31 | netAssess.layerGroups.sites.setVisibleSites(data);
32 | })
33 |
34 | Shiny.addCustomMessageHandler("displayPredefinedArea", function(data) {
35 |
36 | var x = L.featureGroup(null);
37 | for(var i = 0; i < data.coords.length; i++) {
38 | L.polygon(data.coords[i], {fill: false}).addTo(x)
39 | }
40 |
41 | netAssess.draw.disable();
42 | netAssess.setAOI(x);
43 |
44 | });
45 |
46 | Shiny.addCustomMessageHandler("updateAreaServed", function(data) {
47 |
48 | var areaServed = netAssess.layerGroups.areaServed;
49 | areaServed.clearLayers();
50 |
51 | var areaSelectStyle = {fillColor: '#666', weight: 2, opacity: 0.75, color: 'white', dashArray: '3', fillOpacity: 0.4}
52 |
53 | for(var i = 0; i < data.length; i++) {
54 |
55 | if(data[i].coords.length == 1) {
56 | var a = L.polygon(data[i].coords[0], {id: data[i].id}).addTo(areaServed)
57 | } else {
58 | var a = L.multiPolygon([data[i].coords], {id: data[i].id}).addTo(areaServed)
59 | }
60 |
61 | a.setStyle(areaSelectStyle)
62 | .on("mouseover", function(e) {
63 | var layer = e.target;
64 | layer.setStyle({
65 | weight: 5,
66 | color: '#666',
67 | dashArray: '',
68 | fillOpacity: 0.7
69 | });
70 | if(!L.Browser.id && !L.Browser.opera) {
71 | layer.bringToFront();
72 | netAssess.layerGroups.sites.bringToFront();
73 | netAssess.layerGroups.newSites.bringToFront();
74 | netAssess.layerGroups.rembias.bringToFront();
75 | netAssess.layerGroups.cormap.bringToFront();
76 | }
77 | })
78 | .on("mouseout", function(e) {
79 | e.target.setStyle(areaSelectStyle);
80 | })
81 | .on("click", function(e) {
82 | var layer = e.target;
83 | if(layer.hasOwnProperty("options")) {
84 | document.getElementById("clickedAreaServed").updateAnchor(layer.options.id);
85 | } else if(layer.hasOwnProperty("_options")) {
86 | document.getElementById("clickedAreaServed").updateAnchor(layer._options.id);
87 | }
88 | var $param = $("#paramOfInterest").val();
89 | var $thresh = $("#areaServedThreshold");
90 | if($param == "44201") {
91 | $thresh.html("(" + $("#ozoneNAAQS").val() + ")");
92 | } else if(["88101", "88502"].indexOf($param) != -1) {
93 | $thresh.html("(35μg/m3)");
94 | } else {
95 | $thresh.html("");
96 | }
97 | netAssess.floaters.areaServed.open();
98 | $("#map").trigger("areaClick")
99 | })
100 |
101 | netAssess.layerGroups.sites.bringToFront();
102 | netAssess.layerGroups.newSites.bringToFront();
103 | netAssess.layerGroups.rembias.bringToFront();
104 | netAssess.layerGroups.cormap.bringToFront();
105 | netAssess.loading.hide();
106 |
107 | }
108 |
109 | })
110 |
111 | Shiny.addCustomMessageHandler("updateTrendChart", function(data) {
112 | $(".popup-trend").find("img").attr("src", data)
113 | })
114 |
115 | Shiny.addCustomMessageHandler("rembiasUpdate", function(data) {
116 | netAssess.updateBiasLayer(data);
117 | })
118 |
119 | Shiny.addCustomMessageHandler("showCormat", function(data) {
120 | netAssess.loading.hide();
121 | netAssess.floaters.cormat.open();
122 | })
123 |
124 | Shiny.addCustomMessageHandler("loading", function(data) {
125 | if(data == "show") {
126 | netAssess.loading.show();
127 | } else {
128 | netAssess.loading.hide();
129 | }
130 | })
131 |
132 | Shiny.addCustomMessageHandler("updateCorMap", function(data) {
133 | netAssess.updateCorLayer(data)
134 | })
135 |
136 | Shiny.addCustomMessageHandler("showAlert", function(data) {
137 | netAssess.showAlert(data.header, data.body)
138 | })
--------------------------------------------------------------------------------
/www/js/tour.js:
--------------------------------------------------------------------------------
1 | netAssess.tour = {slides: [], slideCount: 0, width: 400, height: 300, active: true}
2 |
3 | netAssess.tour.makeSlide = function(options) {
4 |
5 | options = $.extend({
6 | position: "center",
7 | title: "NetAssess",
8 | text: "Welcome to NetAssess!",
9 | target: "#map",
10 | runbefore: function() {},
11 | runafter: function() {}
12 | }, options)
13 |
14 | netAssess.tour.slides.push(options)
15 |
16 | }
17 |
18 | netAssess.tour.makeSlide({text: "This tool is meant to assist with 5-year Network Assessments as required by 40 CFR §58.10(d).
You can start by running through this quick tour, or close this box with the 'x' in the top right corner and jump right in to the tool. You can also refer to the NetAssess Documentation Site for more detailed information about the App.
"})
19 |
20 | netAssess.tour.makeSlide({title: "Menu Bar",
21 | text: "Above is the menu bar. The menu bar is how you will access most of the functionality of the tool. Each icon above is a button that gives you access to a tool or function of the NetAssess App.
",
22 | target: "#menuControls",
23 | position: "below"
24 | })
25 |
26 | netAssess.tour.makeSlide({title: "Layers",
27 | text: "This is the Layers control. Use the Layers control to switch between different base maps and to turn different tool layers on and off.
Basemaps are the background map. Right now, the grey basemap is displayed, there is also a streets basemap, and satellite basemap from which to choose. The grey basemap is best for viewing output from the NetAssess Tools.
Tool layers give you the ability to hide the output of tools when you are done with them and bring it back later if you need to.
",
28 | target: ".leaflet-control-layers-toggle",
29 | position: "right"
30 | })
31 |
32 | netAssess.tour.makeSlide({title: "More Options",
33 | text: "These buttons open side panels that offer additional settings and information.",
34 | target: ".leaflet-top.leaflet-right",
35 | position: "left"
36 | })
37 |
38 | netAssess.tour.makeSlide({title: "Legend",
39 | text: "This is the legend. The legend explains what the symbols on the map mean. Pay attention to the legend because it will change depending on which tools your are using, and which layers you have displayed.",
40 | target: "#legendFloater",
41 | position: "above"
42 | })
43 |
44 | netAssess.tour.makeSlide({title: "Using NetAssess",
45 | text: "Now we will cover how to get started using the tools.
Important
The following steps do not require you to make any selections. The app will make appropriate selections to illustrate the functionality. Please only press the 'Next' button when you are ready to move to the next step."
46 | })
47 | netAssess.tour.makeSlide({title: "Parameter of Interest",
48 | text: "The first step in the assessment process should be selecting a parameter of interest. You do that with the parameter selection dropdown to the right. You can scroll through the list to find your parameter or use the search box to search by name or AQS code. Once you select a parameter the map will update to show the locations of known sites monitoring for that parameter. We have selected 44201 - OZONE for this example.",
49 | target: "#s2id_paramOfInterest",
50 | position: "left",
51 | runbefore:
52 | function() {
53 | if($("#paramOfInterest").select2("val") != "44201") {
54 | $("#paramOfInterest").select2("val", "44201");
55 | $("#paramOfInterest").trigger("change");
56 | }
57 | }
58 | })
59 |
60 | netAssess.tour.makeSlide({title: "Sites",
61 | text: "Once a parameter of interest is selected, all the sites that monitor that parameter will be displayed as red circles on the map. You can click on a site to open a popup that contains basic information about that site including the AQS Site ID, the address, basic information about what is monitored there, and, if you have selected a criteria pollutant, a graph depicting the last ten years of design values for that site."
62 | })
63 |
64 | netAssess.tour.makeSlide({title: "Area of Interest",
65 | text: "Next, you will need to select an Area of Interest. Your Area of Interest focuses your analysis on a specific area of the country. You open the Area of Interest dialog by clicking the button above.",
66 | target: "#aoiButton",
67 | position: "below",
68 | runafter: netAssess.floaters.aoi.open});
69 |
70 | netAssess.tour.makeSlide({title: "Area of Interest",
71 | text: "From the Area of Interest dialog you can select an area of interest in several ways. You can draw an area free-hand, with the 'Draw an Area of Interest' controls. | Allows you to draw a many-sided polygon by clicking the map where vertices should be. Click the location of your first vertex to close the polygon and finalize the shape. |
 | Allows you to define a rectangular area by clicking a dragging over the area you are interested in on the map. |
 | If you start a drawing and change you mind, this allows you to cancel the drawing. |
",
72 | target: "#cancelDrawButton",
73 | position: "right"})
74 |
75 | netAssess.tour.makeSlide({title: "Area of Interest",
76 | text: "Or you can also select a predefined area such as a State, CBSA, or CSA. - Click the cicle to the left of the Area Type you want.
- The dropdown will update to reflect your choice.
- Use the dropdown to select the specific area you are interested in.
You can scroll through the list to locate your area, or use the text box to filter your choices. For this example, the state of North Dakota has been selected.",
77 | target: "#areaSelect",
78 | position: "right",
79 | runbefore:
80 | function() {
81 | $("[name='areaSelect'][value='State']").trigger("click");
82 | setTimeout(function() {
83 | $("#areaSelectSelect").select2("val", "38");
84 | $("#areaSelectSelect").trigger("change");
85 | }, 500)
86 | },
87 | runafter: netAssess.floaters.aoi.close
88 | })
89 |
90 | netAssess.tour.makeSlide({title: "Site Selection",
91 | text: "Notice the sites within the area of interest (North Dakota) have gotten brighter and larger to indicate they are selected. You can also right-click on sites to open a menu that allows you to select, deselect, or hide those sites individually."
92 | })
93 |
94 | netAssess.tour.makeSlide({title: "New Sites",
95 | text: "At this point, you may want to add new sites to your monitoring network. This can be done with the new sites tool. Click this button, then click the location on the map where you want the new monitor to be placed. The NetAssess App will then determine the state, county, and census tract of the location selected and ask you for a name, and which pollutants should be monitored. New sites are depicted as green circles and are treated just like regular sites for the purposes of Area Served calculations.",
96 | target: "#newSiteButton",
97 | position: "below"
98 | })
99 |
100 | netAssess.tour.makeSlide({title: "Area Served",
101 | text: "Area Served provides information about the area surrounding monitors in you area of interest. Clicking the button will calculate the Area Served by each monitor and draw polygons on the map representing those areas. You can then click on a polygon to get more information about that area.",
102 | target: "#areaServedButton",
103 | position: "below",
104 | runafter: function() {
105 | $("#areaServedButton").trigger("click");
106 | }
107 | })
108 |
109 | netAssess.tour.makeSlide({title: "Area Served",
110 | text: "In a moment, grey polygons will appear around the selected sites. Each grey polygon represents the area that is closer to the monitor within it than any other monitor in the network. Clicking on a polygon will open a new dialog with information about that area.",
111 | runafter: function() {
112 | var key = Object.keys(netAssess.layerGroups.areaServed._layers)[1];
113 | netAssess.layerGroups.areaServed._layers[key].fire("click");
114 | }
115 | })
116 |
117 | netAssess.tour.makeSlide({title: "Area Served Information",
118 | text: "The Area Served Information window will appear to the right. The Area Served Information window gives you geographic and demographic information about the area you clicked.",
119 | target: "#areaServedFloater",
120 | position: "left"
121 | })
122 |
123 | netAssess.tour.makeSlide({title: "Area Served Information",
124 | text: "This includes charts that break the population down by age and race, for potental environmental justice analysis. You can click these plots to see larger versions.",
125 | target: "#areaServedAgePlot",
126 | position: "left"
127 | })
128 | netAssess.tour.makeSlide({title: "Area Served Information",
129 | text: "If you have selected Ozone or PM2.5 you will also be given the exceedence probability of the census tract with the highest exceedence probability found within the area served by the site.",
130 | target: "#naaqsProb",
131 | position: "left",
132 | runafter: netAssess.floaters.areaServed.close
133 | })
134 | netAssess.tour.makeSlide({title: "Correlation Matrix",
135 | text: "The correlation matrix gives you information about how concentrations at monitors within your area of interest compare to one another. This tool currently only works with
- 44201 - OZONE
- 88101 - PM2.5 - LOCAL CONDITIONS
- 88502 - ACCEPTABLE PM2.5 AQI & SPECIATION MASS
",
136 | target: "#cormatButton",
137 | position: "below",
138 | runafter:
139 | function() {
140 | $("#cormatButton").trigger("click");
141 | }
142 | })
143 |
144 | netAssess.tour.makeSlide({title: "Correlation Matrix",
145 | text: "The correlation matrix will open to the left. Each monitor-monitor comparison is represented by an ellipse. The eccentricity (flatness) of the ellipse represents the correlation between the monitors. (Flatter equals more correlation), the color of the ellipse represents the average relative difference between the monitors, and the number inside the ellipse is the distance, in kilometers, between the two monitors.",
146 | target: "#cormatFloater",
147 | position: "right",
148 | runafter: netAssess.floaters.cormat.close
149 | });
150 |
151 | netAssess.tour.makeSlide({title: "Exceedance Probabilities",
152 | text: "Exceedance Probabilities have been calculated for ozone and PM2.5. This information is available by census tract for all of the continental United States. You can view this information on the map by turning on the 'Ozone Probability' or 'PM2.5 Probability' layers from the Layers Control. The PM2.5 probability layer is currently displayed. Notice that the legend has added a scale describing what the colors represent.",
153 | target: ".leaflet-control-layers-toggle",
154 | position: "right",
155 | runbefore: function() {netAssess.map.addLayer(netAssess.overlays.pm25)},
156 | runafter: function() {netAssess.map.removeLayer(netAssess.overlays.pm25)}
157 | })
158 |
159 | netAssess.tour.makeSlide({title: "Removal Bias",
160 | text: "The removal bias tool finds the nearest neighbors to each selected monitor and then uses the concentrations at that those sites to interpolate the concentration at the monitoring site using an inverse distance weighted average. It then compares that interpolation to the actual concentrations measured at the site. If there is little difference (low bias) that may indicate that the monitor is redundant and could be removed. This tool is only available for: - 44201 - OZONE
- 88101 - PM2.5 - LOCAL CONDITIONS
- 88502 - ACCEPTABLE PM2.5 AQI & SPECIATION MASS
.",
161 | target: "#rembiasButton",
162 | position: "below",
163 | runbefore: function() {
164 | $("#rembiasButton").trigger("click");
165 | }
166 | })
167 | netAssess.tour.makeSlide({title: "Removal Bias",
168 | text: "Once the tool has run, the sites with data available will become larger and colored differently. The color represents the mean removal bias calculated for that site. Shades of red represent positive bias, while blues represent negative bias. The darker the color, the more removal bias. Refer to the legend for interpretation of the colors. Clicking on a site will open a popup that gives more information about the removal bias at that location."
169 | })
170 |
171 | netAssess.tour.makeSlide({title: "Zoom to Area of Interest",
172 | text: "This button can be used to zoom in to your area of interest, once you have defined one.",
173 | target: "#aoiZoomButton",
174 | position: "below"
175 | })
176 |
177 | netAssess.tour.makeSlide({title: "Navigation",
178 | text: "This button will zoom you out to view the entire continental United States.",
179 | target: "#fullExtentButton",
180 | position: "below"
181 | })
182 |
183 | netAssess.tour.makeSlide({title: "Download Data",
184 | text: "All data calculated by the NetAssess app is available for download as csv files. Clicking this button will open a dialog where you can choose the data you want to download.",
185 | target: "#downloadDataButton",
186 | position: "below",
187 | runafter: netAssess.floaters.download.open
188 | })
189 |
190 | netAssess.tour.makeSlide({title: "Download Data",
191 | text: "Click the download icon next to a data type to download that data. If the data type is greyed out that mean that you haven't made sufficient selections to generate that data yet.",
192 | target: "#downloadFloater",
193 | position: "below",
194 | runafter: netAssess.floaters.download.close
195 | })
196 |
197 |
198 | netAssess.tour.makeSlide({title: "Reset App",
199 | text: "This button will reset the app to its beginning state. All calculated layers will be erased all selections will be removed, and all settings will be restored to their default.",
200 | target: "#resetAppButton",
201 | position: "below",
202 | })
203 |
204 | netAssess.tour.makeSlide({title: "Settings",
205 | text: "There are several options you can set that will change aspects of how the NetAssess App will function. You can access these options in the Settings sidebar.",
206 | runbefore: function() {netAssess.sidebars.settings.show()}
207 | })
208 |
209 | netAssess.tour.makeSlide({title: "Area Served",
210 | text: "By default, the area served tool clips the polygons it creates on the U.S. border. There may be times when you will want to clip the polygons on your area of interest (e.g. your state) or you may not want to clip at all. You can adjust that here.",
211 | target: "#areaServedSettings",
212 | position: "left"
213 | })
214 |
215 | netAssess.tour.makeSlide({title: "Exceedance Probability",
216 | text: "For ozone, you can adjust what threshold the NetAssess App uses when calculating exceedance probability.",
217 | target: "#exceedanceProbabilitySettings",
218 | position: "left"
219 | })
220 |
221 | netAssess.tour.makeSlide({title: "PM2.5 Options",
222 | text: "AQS Code 88101 can contain both Federal Reference Method (FRM) and Federal Equivalence Method (FEM) data. This setting lets you decide which data to use when calculating correlations.",
223 | target: "#pm25Settings",
224 | position: "left",
225 | runafter: function() {netAssess.sidebars.settings.hide()}
226 | })
227 |
228 | netAssess.tour.makeSlide({title: "Conclusion",
229 | text: "This concludes the tour. If you feel we have left something out, please let us know.You can check the 'Don't show again' box below to prevent this tour from opening automatically the next time you visit the app. You can always reopen it from the 'Help' sidebar to the right.",
230 | runbefore: function() {netAssess.resetApp()}
231 | })
232 |
233 | $(document).ready(function() {
234 |
235 | var name = "showtour"
236 | var showTour = "true";
237 | var ca = document.cookie.split(';');
238 | for(var i=0; i < ca.length; i++) {
239 | var c = ca[i];
240 | while (c.charAt(0)==' ') c = c.substring(1);
241 | if (c.indexOf(name) != -1) showTour = c.substring(name.length+1,c.length);
242 | }
243 |
244 | if(showTour == "true") {
245 | netAssess.tour.active = true;
246 | document.getElementById("tourGone").checked = false;
247 | } else {
248 | netAssess.tour.active = false;
249 | document.getElementById("tourGone").checked = true;
250 | }
251 |
252 | if(netAssess.tour.active) {
253 | netAssess.tour.advance()
254 | }
255 |
256 | })
257 |
258 | netAssess.tour.setPosition = function(target, position) {
259 |
260 | var rect = $(target)[0].getBoundingClientRect();
261 |
262 | var rect_center = {x: (rect.width / 2) + rect.left,
263 | y: (rect.height / 2) + rect.top
264 | }
265 |
266 | var arrowPos = {
267 | "left": "",
268 | "top": "",
269 | "display": "none",
270 | "border-left-color": "transparent",
271 | "border-top-color": "transparent",
272 | "border-right-color": "transparent",
273 | "border-bottom-color": "transparent"
274 | }
275 |
276 | switch(position) {
277 | case "center":
278 | var position = {
279 | top: rect_center.y - (netAssess.tour.height / 2),
280 | left: rect_center.x - (netAssess.tour.width / 2),
281 | display: "block"
282 | }
283 | arrowPos.top = "";
284 | arrowPos.left = "";
285 | arrowPos.display = "none";
286 | var arrowBorderPos = {};
287 | $.extend(arrowBorderPos, arrowPos);
288 | break;
289 |
290 | case "above":
291 | var position = {
292 | top: rect.top - (netAssess.tour.height + 15),
293 | left: rect_center.x - (netAssess.tour.width / 2),
294 | display: "block"
295 | };
296 | arrowPos.top = netAssess.tour.height - 5;
297 | arrowPos.left = netAssess.tour.width / 2;
298 | arrowPos.display = "block";
299 | arrowPos["border-top-color"] = "#EFEFEF";
300 | var arrowBorderPos = {};
301 | $.extend(arrowBorderPos, arrowPos);
302 | arrowBorderPos.top = arrowBorderPos.top + 2.5
303 | arrowBorderPos["border-top-color"] = "black";
304 | break;
305 |
306 | case "below":
307 | var position = {
308 | top: rect.bottom + 15,
309 | left: rect_center.x - (netAssess.tour.width / 2),
310 | display: "block"
311 | };
312 | arrowPos.top = -20;
313 | arrowPos.left = (netAssess.tour.width / 2) - 10;
314 | arrowPos.display = "block";
315 | arrowPos["border-bottom-color"] = "#EFEFEF";
316 | var arrowBorderPos = {};
317 | $.extend(arrowBorderPos, arrowPos);
318 | arrowBorderPos.top = arrowBorderPos.top - 2.5
319 | arrowBorderPos["border-bottom-color"] = "black";
320 | break;
321 |
322 | case "left":
323 | var position = {
324 | top: rect_center.y - (netAssess.tour.height / 2),
325 | left: rect.left - (netAssess.tour.width + 15),
326 | display: "block"
327 | }
328 | arrowPos.top = (netAssess.tour.height / 2) - 10;
329 | arrowPos.left = netAssess.tour.width - 5;
330 | arrowPos.display = "block";
331 | arrowPos["border-left-color"] = "#EFEFEF";
332 | var arrowBorderPos = {};
333 | $.extend(arrowBorderPos, arrowPos);
334 | arrowBorderPos.left = arrowBorderPos.left + 2.5;
335 | arrowBorderPos["border-left-color"] = "black";
336 | break;
337 |
338 | case "right":
339 | var position = {
340 | top: rect_center.y - (netAssess.tour.height / 2),
341 | left: rect.right + 15,
342 | display: "block"
343 | }
344 | arrowPos.top = (netAssess.tour.height / 2) - 10;
345 | arrowPos.left = -20;
346 | arrowPos.display = "block";
347 | arrowPos["border-right-color"] = "#EFEFEF";
348 | var arrowBorderPos = {};
349 | $.extend(arrowBorderPos, arrowPos);
350 | arrowBorderPos.left = arrowBorderPos.left - 2.5;
351 | arrowBorderPos["border-right-color"] = "black";
352 | break;
353 |
354 | default:
355 | console.log("Unrecognized 'position' to setPosition function.")
356 | }
357 |
358 | var w = window.innerWidth;
359 | var h = window.innerHeight;
360 |
361 | if(position.left < 0) {
362 | var offset_x = 5 + (position.left + netAssess.tour.width);
363 | } else if((position.left + netAssess.tour.width) > w) {
364 | var offset_x = 5 + ((position.left + netAssess.tour.width) - w);
365 | } else {
366 | var offset_x = 0;
367 | }
368 |
369 | position.left = parseInt(position.left - offset_x, 10) + "px";
370 | arrowPos.left = parseInt(arrowPos.left + offset_x, 10) + "px";
371 | arrowBorderPos.left = parseInt(arrowBorderPos.left + offset_x, 10) + "px";
372 |
373 | if(position.top < 0) {
374 | var offset_y = 5 - position.top;
375 | } else if((position.top + netAssess.tour.height) > h) {
376 | var offset_y = (position.top + netAssess.tour.height) - h;
377 | } else {
378 | var offset_y = 0;
379 | }
380 |
381 | position.top = parseInt(position.top + offset_y, 10) + "px";
382 | arrowPos.top = parseInt(arrowPos.top - offset_y, 10) + "px";
383 | arrowBorderPos.top = parseInt(arrowBorderPos.top - offset_y, 10) + "px";
384 |
385 | var $tour = $("#tour");
386 | $tour.css(position);
387 | $tour.find(".tour-arrow").css(arrowPos);
388 | $tour.find(".tour-arrow-border").css(arrowBorderPos);
389 |
390 | }
391 |
392 | netAssess.tour.advance = function() {
393 |
394 | var tour = netAssess.tour;
395 | var $tour = $("#tour");
396 |
397 | var cnt = tour.slideCount;
398 |
399 | if(cnt > 0) tour.slides[cnt - 1].runafter();
400 | tour.slides[cnt].runbefore();
401 |
402 | $tour.find(".header").html(tour.slides[cnt].title);
403 | $tour.find(".content")[0].scrollTop = 0;
404 | $tour.find(".content").html(tour.slides[cnt].text);
405 | tour.setPosition(tour.slides[cnt].target, tour.slides[cnt].position);
406 |
407 |
408 |
409 | tour.slideCount++
410 |
411 | }
412 |
413 | netAssess.tour.close = function() {
414 | netAssess.tour.active = false;
415 | $("#tour").css("display", "none")
416 | $("*").off(".tour");
417 | }
418 |
419 | $("#tourNext").on("click", function() {
420 |
421 | if(netAssess.tour.slideCount == netAssess.tour.slides.length - 1) {
422 | $("#tourNext").text("Close")
423 | } else {
424 | $("#tourNext").text("Next")
425 | }
426 | if(netAssess.tour.slideCount == netAssess.tour.slides.length) {
427 | netAssess.tour.close()
428 | } else {
429 | netAssess.tour.advance()
430 | }
431 |
432 | })
433 |
434 | $("#tour .close").on("click", netAssess.tour.close);
435 |
436 | $("#tour #tourGone").on("click", function(e) {
437 | var d = new Date();
438 | d.setTime(d.getTime() + (60*24*60*60*1000));
439 | var expires = "expires="+d.toUTCString();
440 |
441 | if(this.checked) {
442 | document.cookie = "showtour=false; " + expires
443 | } else {
444 | document.cookie = "showtour=true; " + expires
445 | }
446 |
447 | })
448 |
449 | $("#openTour").on("click", function() {
450 | if(netAssess.tour.active == false) {
451 | netAssess.tour.slideCount = 0;
452 | netAssess.tour.active = true;
453 | netAssess.tour.advance();
454 | netAssess.sidebars.help.hide();
455 | }
456 | })
457 |
458 | // Disabled the Next button until the page has a chance to load to avoid the
459 | // user clicking it too early and messing everything up...
460 | $("#tourNext").attr("disabled", true);
461 | $(document).ready(function() {
462 | setTimeout(function() {$("#tourNext").attr("disabled", false)}, 1500)
463 | })
--------------------------------------------------------------------------------
70 | 
82 | 
388 | 
394 | 
400 |
415 |