From cb06709eb23f938ab5706644885c3e2e5b5430be Mon Sep 17 00:00:00 2001 From: Steve Sutton Date: Fri, 24 Mar 2017 09:14:16 -0400 Subject: [PATCH] Update code for the map locations. Use class instead of the id. Give each anchor a data attribute that can be used. --- js/front.js | 405 +-------------------------------- js/frontSave.js | 403 ++++++++++++++++++++++++++++++++ views/front/apis/schedule.html | 16 +- 3 files changed, 415 insertions(+), 409 deletions(-) create mode 100644 js/frontSave.js diff --git a/js/front.js b/js/front.js index 896da02..64004fe 100644 --- a/js/front.js +++ b/js/front.js @@ -1,403 +1,6 @@ jQuery(document).ready(function($){ - initGoogleMap(); - - function initGoogleMap() - { - if ($("#google-map-link1").length > 0) { - var gmapLink1 = document.getElementById("google-map-link1"); - gmapLink1.onclick = function(){ - createGoogleForm(1); - return false; - } - } - if ($("#google-map-link2").length > 0) { - var gmapLink2 = document.getElementById("google-map-link2"); - gmapLink2.onclick = function(){ - createGoogleForm(2); - return false; - } - } - if ($("#google-map-link3").length > 0) { - var gmapLink3 = document.getElementById("google-map-link3"); - gmapLink3.onclick = function(){ - createGoogleForm(3); - return false; - } - } - if ($("#google-map-link4").length > 0) { - var gmapLink4 = document.getElementById("google-map-link4"); - gmapLink4.onclick = function(){ - createGoogleForm(4); - return false; - } - } - if ($("#google-div").length > 0) { - var body = document.getElementById("google-div"); - body.style.display = 'none'; - } - return true; - } - - function mySubmit(event) - { - var gid = document.getElementById('toHide').value; - var fromAddress = document.getElementById('drive-from-address' + gid); - var url = 'maps.google.com/maps?'; - var myTo = document.getElementById('toaddress'); - if (typeof event == "undefined") - { - event = window.event; - } - - var target = getEventTarget(event); - - while (target.nodeName.toLowerCase() != "input") - { - target = target.parentNode; - } - - var value = target.getAttribute("value"); - - var dialog = target; - - while (dialog.className != "customDialog") - { - dialog = dialog.parentNode; - } - - var resultFrom = myTo.value.replace(/[\f\n\r\t\v]|,/,'+'); - var goUrl = url + 'daddr=' + fromAddress.value + '&saddr=' + resultFrom + '&om=1'; - var external = window.open('http://' + goUrl); - closeDialog(dialog,gid); - return true; - } - - function createGoogleForm( gid ) - { - try - { - if ($("#google-div").length > 0) { - var body = document.getElementById("google-div"); - body.innerHTML = ''; - body.style.display = ''; - } - - var dialog = document.createElement("div"); - dialog.className = "customDialog"; - dialog.style.visibility = "hidden"; - dialog.style.position = "relative"; - - var dialogTitle = document.createElement("h2"); - var hTitle = 'Get Driving Directions to '; - switch( gid ) { - case 1: - hTitle += 'Main Dock - St. Ignace'; - break; - case 2: - hTitle += 'Railroad Dock - St. Ignace'; - break; - case 3: - hTitle += 'Mackinaw City Dock'; - break; - case 4: - hTitle += 'Winter Dock - St. Ignace'; - break; - } - dialogTitle.appendChild(document.createTextNode(hTitle)); - dialog.appendChild(dialogTitle); - - var dialogInput2 = document.createElement("input"); - dialogInput2.setAttribute("id", "toaddress"); - dialogInput2.setAttribute("type", "text"); - dialogInput2.setAttribute("size", "40"); - dialogInput2.setAttribute("value", "Your Address City,State Zip"); - attachEventListener(dialogInput2, "change", mySubmit, false); - attachEventListener(dialogInput2, "click", checkLink, false); - dialog.appendChild(dialogInput2); - - var hiddenInput = document.createElement("input"); - hiddenInput.setAttribute("id", "toHide"); - hiddenInput.setAttribute("type", "hidden"); - hiddenInput.setAttribute("value", gid); - dialog.appendChild(hiddenInput); - - var dialogButton = document.createElement("input"); - dialogButton.setAttribute("type", "button"); - dialogButton.setAttribute("value", "Get Directions"); - attachEventListener(dialogButton, "click", mySubmit, false); - dialog.appendChild(dialogButton); - - if ($("#google-div").length > 0) { - body.appendChild(dialog); - } - - var scrollingPosition = getScrollingPosition(); - var viewportSize = getViewportSize(); - - dialog.style.left = 0;//scrollingPosition[0] + parseInt(viewportSize[0] / 2) - parseInt(dialog.offsetWidth / 2) + "px"; - dialog.style.top = 0;//scrollingPosition[1] + parseInt(viewportSize[1] / 2) - parseInt(dialog.offsetHeight / 2) + "px"; - dialog.style.visibility = "visible"; - if ($("#google-map-link1").length > 0) { - var gmapLink = document.getElementById("google-map-link1"); - parent1 = gmapLink.parentNode; - } - if ($("#google-map-link2").length > 0) { - var gmapLink2 = document.getElementById("google-map-link2"); - parent2 = gmapLink2.parentNode; - } - if ($("#google-map-link3").length > 0) { - var gmapLink3 = document.getElementById("google-map-link3"); - parent3 = gmapLink3.parentNode; - } - if ($("#google-map-link4").length > 0) { - var gmapLink4 = document.getElementById("google-map-link4"); - parent4 = gmapLink4.parentNode; - } - switch( gid ) { - case 1: - if ($("#google-map-link1").length > 0) { - parent1.style.backgroundColor = '#71B9DE'; - } - if ($("#google-map-link2").length > 0) { - parent2.style.backgroundColor = '#D1E4EE'; - } - if ($("#google-map-link3").length > 0) { - parent3.style.backgroundColor = '#D1E4EE'; - } - if ($("#google-map-link4").length > 0) { - parent4.style.backgroundColor = '#D1E4EE'; - } - break; - case 2: - if ($("#google-map-link1").length > 0) { - parent1.style.backgroundColor = '#D1E4EE'; - } - if ($("#google-map-link2").length > 0) { - parent2.style.backgroundColor = '#71B9DE'; - } - if ($("#google-map-link3").length > 0) { - parent3.style.backgroundColor = '#D1E4EE'; - } - if ($("#google-map-link4").length > 0) { - parent4.style.backgroundColor = '#D1E4EE'; - } - break; - case 3: - if ($("#google-map-link1").length > 0) { - parent1.style.backgroundColor = '#D1E4EE'; - } - if ($("#google-map-link2").length > 0) { - parent2.style.backgroundColor = '#D1E4EE'; - } - if ($("#google-map-link3").length > 0) { - parent3.style.backgroundColor = '#71B9DE'; - } - if ($("#google-map-link4").length > 0) { - parent4.style.backgroundColor = '#D1E4EE'; - } - break; - case 4: - if ($("#google-map-link1").length > 0) { - parent1.style.backgroundColor = '#D1E4EE'; - } - if ($("#google-map-link2").length > 0) { - parent2.style.backgroundColor = '#D1E4EE'; - } - if ($("#google-map-link3").length > 0) { - parent3.style.backgroundColor = '#D1E4EE'; - } - if ($("#google-map-link4").length > 0) { - parent4.style.backgroundColor = '#71B9DE'; - } - break; - } - - dialogButton.focus(); - } - catch(err) - { - for (var i in err) - { - //console.log(i + ':' + err[i]); - //alert(i + ': ' + err[i]); - } - return true; - } - - return false; - } - function checkLink() - { - var toAddress = document.getElementById('toaddress'); - if( toAddress.value == 'Your Address City,State Zip') - { - toAddress.value = ''; - } - return false; - } - function closeDialog(dialog,gid) - { - dialog.parentNode.removeChild(dialog); - - if ($("#google-map-link1").length > 0) { - var gmapLink1 = document.getElementById("google-map-link1"); - gmapLink1.onclick = function(){ - createGoogleForm(1); - return false; - } - } - if ($("#google-map-link2").length > 0) { - var gmapLink2 = document.getElementById("google-map-link2"); - gmapLink2.onclick = function(){ - createGoogleForm(2); - return false; - } - } - if ($("#google-map-link3").length > 0) { - var gmapLink3 = document.getElementById("google-map-link3"); - gmapLink3.onclick = function(){ - createGoogleForm(3); - return false; - } - } - if ($("#google-map-link4").length > 0) { - var gmapLink4 = document.getElementById("google-map-link4"); - gmapLink4.onclick = function(){ - createGoogleForm(4); - return false; - } - } - if ($("#google-div").length > 0) { - var body = document.getElementById("google-div"); - body.style.display = 'none'; - } - return true; - } - - function attachEventListener(target, eventType, functionRef, capture) - { - if (typeof target.addEventListener != "undefined") - { - target.addEventListener(eventType, functionRef, capture); - } - else if (typeof target.attachEvent != "undefined") - { - target.attachEvent("on" + eventType, functionRef); - } - else - { - eventType = "on" + eventType; - - if (typeof target[eventType] == "function") - { - var oldListener = target[eventType]; - - target[eventType] = function() - { - oldListener(); - - return functionRef(); - } - } - else - { - target[eventType] = functionRef; - } - } - - return true; - } - - function getEventTarget(event) - { - var targetElement = null; - - if (typeof event.target != "undefined") - { - targetElement = event.target; - } - else - { - targetElement = event.srcElement; - } - - while (targetElement.nodeType == 3 && targetElement.parentNode != null) - { - targetElement = targetElement.parentNode; - } - - return targetElement; - } - - function getScrollingPosition() - { - //array for X and Y scroll position - var position = [0, 0]; - - //if the window.pageYOffset property is supported - if (typeof window.pageYOffset != 'undefined') - { - //store position values - position = [ - window.pageXOffset, - window.pageYOffset - ]; - } - - //if the documentElement.scrollTop property is supported - //and the value is greater than zero - if (typeof document.documentElement.scrollTop != 'undefined' - && document.documentElement.scrollTop > 0) - { - //store position values - position = [ - document.documentElement.scrollLeft, - document.documentElement.scrollTop - ]; - } - - //if the body.scrollTop property is supported - else if(typeof document.body.scrollTop != 'undefined') - { - //store position values - position = [ - document.body.scrollLeft, - document.body.scrollTop - ]; - } - - //return the array - return position; - } - - function getViewportSize() - { - var size = [0,0]; - - if (typeof window.innerWidth != 'undefined') - { - size = [ - window.innerWidth, - window.innerHeight - ]; - } - else if (typeof document.documentElement != 'undefined' - && typeof document.documentElement.clientWidth != 'undefined' - && document.documentElement.clientWidth != 0) - { - size = [ - document.documentElement.clientWidth, - document.documentElement.clientHeight - ]; - } - else - { - size = [ - document.getElementsByTagName('body')[0].clientWidth, - document.getElementsByTagName('body')[0].clientHeight - ]; - } - - return size; - } + $("a.google-map-link").on("click",function(){ + var address = $(this).data('location'); + window.open('https://maps.google.com/?q=' + address, '_blank'); + }); }); diff --git a/js/frontSave.js b/js/frontSave.js new file mode 100644 index 0000000..896da02 --- /dev/null +++ b/js/frontSave.js @@ -0,0 +1,403 @@ +jQuery(document).ready(function($){ + initGoogleMap(); + + function initGoogleMap() + { + if ($("#google-map-link1").length > 0) { + var gmapLink1 = document.getElementById("google-map-link1"); + gmapLink1.onclick = function(){ + createGoogleForm(1); + return false; + } + } + if ($("#google-map-link2").length > 0) { + var gmapLink2 = document.getElementById("google-map-link2"); + gmapLink2.onclick = function(){ + createGoogleForm(2); + return false; + } + } + if ($("#google-map-link3").length > 0) { + var gmapLink3 = document.getElementById("google-map-link3"); + gmapLink3.onclick = function(){ + createGoogleForm(3); + return false; + } + } + if ($("#google-map-link4").length > 0) { + var gmapLink4 = document.getElementById("google-map-link4"); + gmapLink4.onclick = function(){ + createGoogleForm(4); + return false; + } + } + if ($("#google-div").length > 0) { + var body = document.getElementById("google-div"); + body.style.display = 'none'; + } + return true; + } + + function mySubmit(event) + { + var gid = document.getElementById('toHide').value; + var fromAddress = document.getElementById('drive-from-address' + gid); + var url = 'maps.google.com/maps?'; + var myTo = document.getElementById('toaddress'); + if (typeof event == "undefined") + { + event = window.event; + } + + var target = getEventTarget(event); + + while (target.nodeName.toLowerCase() != "input") + { + target = target.parentNode; + } + + var value = target.getAttribute("value"); + + var dialog = target; + + while (dialog.className != "customDialog") + { + dialog = dialog.parentNode; + } + + var resultFrom = myTo.value.replace(/[\f\n\r\t\v]|,/,'+'); + var goUrl = url + 'daddr=' + fromAddress.value + '&saddr=' + resultFrom + '&om=1'; + var external = window.open('http://' + goUrl); + closeDialog(dialog,gid); + return true; + } + + function createGoogleForm( gid ) + { + try + { + if ($("#google-div").length > 0) { + var body = document.getElementById("google-div"); + body.innerHTML = ''; + body.style.display = ''; + } + + var dialog = document.createElement("div"); + dialog.className = "customDialog"; + dialog.style.visibility = "hidden"; + dialog.style.position = "relative"; + + var dialogTitle = document.createElement("h2"); + var hTitle = 'Get Driving Directions to '; + switch( gid ) { + case 1: + hTitle += 'Main Dock - St. Ignace'; + break; + case 2: + hTitle += 'Railroad Dock - St. Ignace'; + break; + case 3: + hTitle += 'Mackinaw City Dock'; + break; + case 4: + hTitle += 'Winter Dock - St. Ignace'; + break; + } + dialogTitle.appendChild(document.createTextNode(hTitle)); + dialog.appendChild(dialogTitle); + + var dialogInput2 = document.createElement("input"); + dialogInput2.setAttribute("id", "toaddress"); + dialogInput2.setAttribute("type", "text"); + dialogInput2.setAttribute("size", "40"); + dialogInput2.setAttribute("value", "Your Address City,State Zip"); + attachEventListener(dialogInput2, "change", mySubmit, false); + attachEventListener(dialogInput2, "click", checkLink, false); + dialog.appendChild(dialogInput2); + + var hiddenInput = document.createElement("input"); + hiddenInput.setAttribute("id", "toHide"); + hiddenInput.setAttribute("type", "hidden"); + hiddenInput.setAttribute("value", gid); + dialog.appendChild(hiddenInput); + + var dialogButton = document.createElement("input"); + dialogButton.setAttribute("type", "button"); + dialogButton.setAttribute("value", "Get Directions"); + attachEventListener(dialogButton, "click", mySubmit, false); + dialog.appendChild(dialogButton); + + if ($("#google-div").length > 0) { + body.appendChild(dialog); + } + + var scrollingPosition = getScrollingPosition(); + var viewportSize = getViewportSize(); + + dialog.style.left = 0;//scrollingPosition[0] + parseInt(viewportSize[0] / 2) - parseInt(dialog.offsetWidth / 2) + "px"; + dialog.style.top = 0;//scrollingPosition[1] + parseInt(viewportSize[1] / 2) - parseInt(dialog.offsetHeight / 2) + "px"; + dialog.style.visibility = "visible"; + if ($("#google-map-link1").length > 0) { + var gmapLink = document.getElementById("google-map-link1"); + parent1 = gmapLink.parentNode; + } + if ($("#google-map-link2").length > 0) { + var gmapLink2 = document.getElementById("google-map-link2"); + parent2 = gmapLink2.parentNode; + } + if ($("#google-map-link3").length > 0) { + var gmapLink3 = document.getElementById("google-map-link3"); + parent3 = gmapLink3.parentNode; + } + if ($("#google-map-link4").length > 0) { + var gmapLink4 = document.getElementById("google-map-link4"); + parent4 = gmapLink4.parentNode; + } + switch( gid ) { + case 1: + if ($("#google-map-link1").length > 0) { + parent1.style.backgroundColor = '#71B9DE'; + } + if ($("#google-map-link2").length > 0) { + parent2.style.backgroundColor = '#D1E4EE'; + } + if ($("#google-map-link3").length > 0) { + parent3.style.backgroundColor = '#D1E4EE'; + } + if ($("#google-map-link4").length > 0) { + parent4.style.backgroundColor = '#D1E4EE'; + } + break; + case 2: + if ($("#google-map-link1").length > 0) { + parent1.style.backgroundColor = '#D1E4EE'; + } + if ($("#google-map-link2").length > 0) { + parent2.style.backgroundColor = '#71B9DE'; + } + if ($("#google-map-link3").length > 0) { + parent3.style.backgroundColor = '#D1E4EE'; + } + if ($("#google-map-link4").length > 0) { + parent4.style.backgroundColor = '#D1E4EE'; + } + break; + case 3: + if ($("#google-map-link1").length > 0) { + parent1.style.backgroundColor = '#D1E4EE'; + } + if ($("#google-map-link2").length > 0) { + parent2.style.backgroundColor = '#D1E4EE'; + } + if ($("#google-map-link3").length > 0) { + parent3.style.backgroundColor = '#71B9DE'; + } + if ($("#google-map-link4").length > 0) { + parent4.style.backgroundColor = '#D1E4EE'; + } + break; + case 4: + if ($("#google-map-link1").length > 0) { + parent1.style.backgroundColor = '#D1E4EE'; + } + if ($("#google-map-link2").length > 0) { + parent2.style.backgroundColor = '#D1E4EE'; + } + if ($("#google-map-link3").length > 0) { + parent3.style.backgroundColor = '#D1E4EE'; + } + if ($("#google-map-link4").length > 0) { + parent4.style.backgroundColor = '#71B9DE'; + } + break; + } + + dialogButton.focus(); + } + catch(err) + { + for (var i in err) + { + //console.log(i + ':' + err[i]); + //alert(i + ': ' + err[i]); + } + return true; + } + + return false; + } + function checkLink() + { + var toAddress = document.getElementById('toaddress'); + if( toAddress.value == 'Your Address City,State Zip') + { + toAddress.value = ''; + } + return false; + } + function closeDialog(dialog,gid) + { + dialog.parentNode.removeChild(dialog); + + if ($("#google-map-link1").length > 0) { + var gmapLink1 = document.getElementById("google-map-link1"); + gmapLink1.onclick = function(){ + createGoogleForm(1); + return false; + } + } + if ($("#google-map-link2").length > 0) { + var gmapLink2 = document.getElementById("google-map-link2"); + gmapLink2.onclick = function(){ + createGoogleForm(2); + return false; + } + } + if ($("#google-map-link3").length > 0) { + var gmapLink3 = document.getElementById("google-map-link3"); + gmapLink3.onclick = function(){ + createGoogleForm(3); + return false; + } + } + if ($("#google-map-link4").length > 0) { + var gmapLink4 = document.getElementById("google-map-link4"); + gmapLink4.onclick = function(){ + createGoogleForm(4); + return false; + } + } + if ($("#google-div").length > 0) { + var body = document.getElementById("google-div"); + body.style.display = 'none'; + } + return true; + } + + function attachEventListener(target, eventType, functionRef, capture) + { + if (typeof target.addEventListener != "undefined") + { + target.addEventListener(eventType, functionRef, capture); + } + else if (typeof target.attachEvent != "undefined") + { + target.attachEvent("on" + eventType, functionRef); + } + else + { + eventType = "on" + eventType; + + if (typeof target[eventType] == "function") + { + var oldListener = target[eventType]; + + target[eventType] = function() + { + oldListener(); + + return functionRef(); + } + } + else + { + target[eventType] = functionRef; + } + } + + return true; + } + + function getEventTarget(event) + { + var targetElement = null; + + if (typeof event.target != "undefined") + { + targetElement = event.target; + } + else + { + targetElement = event.srcElement; + } + + while (targetElement.nodeType == 3 && targetElement.parentNode != null) + { + targetElement = targetElement.parentNode; + } + + return targetElement; + } + + function getScrollingPosition() + { + //array for X and Y scroll position + var position = [0, 0]; + + //if the window.pageYOffset property is supported + if (typeof window.pageYOffset != 'undefined') + { + //store position values + position = [ + window.pageXOffset, + window.pageYOffset + ]; + } + + //if the documentElement.scrollTop property is supported + //and the value is greater than zero + if (typeof document.documentElement.scrollTop != 'undefined' + && document.documentElement.scrollTop > 0) + { + //store position values + position = [ + document.documentElement.scrollLeft, + document.documentElement.scrollTop + ]; + } + + //if the body.scrollTop property is supported + else if(typeof document.body.scrollTop != 'undefined') + { + //store position values + position = [ + document.body.scrollLeft, + document.body.scrollTop + ]; + } + + //return the array + return position; + } + + function getViewportSize() + { + var size = [0,0]; + + if (typeof window.innerWidth != 'undefined') + { + size = [ + window.innerWidth, + window.innerHeight + ]; + } + else if (typeof document.documentElement != 'undefined' + && typeof document.documentElement.clientWidth != 'undefined' + && document.documentElement.clientWidth != 0) + { + size = [ + document.documentElement.clientWidth, + document.documentElement.clientHeight + ]; + } + else + { + size = [ + document.getElementsByTagName('body')[0].clientWidth, + document.getElementsByTagName('body')[0].clientHeight + ]; + } + + return size; + } +}); diff --git a/views/front/apis/schedule.html b/views/front/apis/schedule.html index 4a27607..5bf63df 100644 --- a/views/front/apis/schedule.html +++ b/views/front/apis/schedule.html @@ -45,22 +45,22 @@ jQuery(document).ready(function(){ }); var dropdown_mapLink1 = $('#dropdown-google-map-link1'); dropdown_mapLink1.click(function(){ - window.location = '{$schedulePage}/?mapLink=1'; + window.location = '{$schedulePage}?mapLink=1'; return false; }); var dropdown_mapLink2 = $('#dropdown-google-map-link2'); dropdown_mapLink2.click(function(){ - window.location = '{$schedulePage}/?mapLink=2'; + window.location = '{$schedulePage}?mapLink=2'; return false; }); var dropdown_mapLink3 = $('#dropdown-google-map-link3'); dropdown_mapLink3.click(function(){ - window.location = '{$schedulePage}/?mapLink=3'; + window.location = '{$schedulePage}?mapLink=3'; return false; }); var dropdown_mapLink4 = $('#dropdown-google-map-link4'); dropdown_mapLink4.click(function(){ - window.location = '{$schedulePage}/?mapLink=4'; + window.location = '{$schedulePage}?mapLink=4'; return false; }); {/if} @@ -95,22 +95,22 @@ jQuery(document).ready(function(){ }); var offcanvas_mapLink1 = $('#offcanvas-google-map-link1'); offcanvas_mapLink1.click(function(){ - window.location = '{$schedulePage}/?mapLink=1'; + window.location = '{$schedulePage}?mapLink=1'; return false; }); var offcanvas_mapLink2 = $('#offcanvas-google-map-link2'); offcanvas_mapLink2.click(function(){ - window.location = '{$schedulePage}/?mapLink=2'; + window.location = '{$schedulePage}?mapLink=2'; return false; }); var offcanvas_mapLink3 = $('#offcanvas-google-map-link3'); offcanvas_mapLink3.click(function(){ - window.location = '{$schedulePage}/?mapLink=3'; + window.location = '{$schedulePage}?mapLink=3'; return false; }); var offcanvas_mapLink4 = $('#offcanvas-google-map-link4'); offcanvas_mapLink4.click(function(){ - window.location = '{$schedulePage}/?mapLink=4'; + window.location = '{$schedulePage}?mapLink=4'; return false; }); {/if} -- 2.17.1