diff --git a/shared/common_template/callout.vtl b/shared/common_template/callout.vtl index a2ac2991644fc8c0645a51878e10a9fb9e0aba5e..c9cfb0104c7399bfc60fc3df2d8624201f04dff5 100644 --- a/shared/common_template/callout.vtl +++ b/shared/common_template/callout.vtl @@ -31,31 +31,31 @@ var html = "<div class='canr-callout-content no-print $!{callout.contentType.nam "<div class='image-wrapper'>" + "<figure class='embed-image'>" + #if($!{callout.contentType.name} == 'Article') - "<a href='https://www.canr.msu.edu/news/$callout.urlTitle' data-gtmconversions='callout-article'>" + + "<a href='/news/$callout.urlTitle' data-gtmconversions='callout-article'>" + #end #if($!{callout.contentType.name} == 'Event') - "<a href='https://www.canr.msu.edu/events/$callout.urlTitle' data-gtmconversions='callout-event'>" + + "<a href='/events/$callout.urlTitle' data-gtmconversions='callout-event'>" + #end #if($!{callout.contentType.name} == 'Person') - "<a href='https://www.canr.msu.edu/people/$callout.urlTitle' data-gtmconversions='callout-person'>" + + "<a href='/people/$callout.urlTitle' data-gtmconversions='callout-person'>" + #end #if($!{callout.contentType.name} == 'Digital Document') - "<a href='https://www.canr.msu.edu/resources/$callout.urlTitle' data-gtmconversions='callout-digitaldocument'>" + + "<a href='/resources/$callout.urlTitle' data-gtmconversions='callout-digitaldocument' >" + #end #if($!{callout.contentType.name} == 'Publication Issue') - "<a href='https://www.canr.msu.edu/publications/$callout.urlTitle' data-gtmconversions='callout-publication'>" + + "<a href='/publications/$callout.urlTitle' data-gtmconversions='callout-publication'>" + #end #if($!{callout.contentType.name} == 'Audio Object') - "<a href='https://www.canr.msu.edu/podcasts/$callout.urlTitle' data-gtmconversions='callout-audioobject'>" + + "<a href='/podcasts/$callout.urlTitle' data-gtmconversions='callout-audioobject'>" + #end #if($!{callout.contentType.name} == 'Job') - "<a href='https://www.canr.msu.edu/jobs/$callout.urlTitle' data-gtmconversions='callout-jobs'>" + + "<a href='/jobs/$callout.urlTitle' data-gtmconversions='callout-jobs'>" + #end #if($!{callout.contentType.name} == 'Course') - "<a href='https://www.canr.msu.edu/courses/$callout.urlTitle' data-gtmconversions='callout-course'>" + + "<a href='/courses/$callout.urlTitle' data-gtmconversions='callout-course'>" + #end #if($!{callout.contentType.name} == 'Scholarship') - "<a href='https://www.canr.msu.edu/scholarships/$callout.urlTitle' data-gtmconversions='callout-scholarhip'>" + + "<a href='/scholarships/$callout.urlTitle' data-gtmconversions='callout-scholarhip'>" + #end #if($!{callout.contentType.name} == 'In The News') "<a href='$callout.link' data-gtmconversions='callout-inthenews'>" + @@ -73,9 +73,9 @@ var html = "<div class='canr-callout-content no-print $!{callout.contentType.nam "<a href='$callout.url' data-gtmconversions='callout-series'>" + #end #if($!{callout.contentType.name} == 'Person') - "<img src='https://www.canr.msu.edu/contentAsset/image/$!{imagefield}/fileAsset/filter/Resize/resize_w/200' alt='$!{imageDescription}'>" + + "<img src='/contentAsset/image/$!{imagefield}/fileAsset/filter/Resize/resize_w/200' alt='$!{imageDescription}'>" + #else - "<img src='https://www.canr.msu.edu/contentAsset/image/$!{imagefield}/fileAsset/filter/Resize/resize_w/300/resize_h/200' alt='$!{imageDescription}'>" + + "<img src='/contentAsset/image/$!{imagefield}/fileAsset/filter/Resize/resize_w/300/resize_h/200' alt='$!{imageDescription}'>" + #end "</a>" + "</figure>" + @@ -84,31 +84,31 @@ var html = "<div class='canr-callout-content no-print $!{callout.contentType.nam "<div class='text-wrapper'>" + "<h3>" + #if($!{callout.contentType.name} == 'Article') - "<a href='https://www.canr.msu.edu/news/$callout.urlTitle' data-gtmconversions='callout-article'>$!{callout.title}</a>" + + "<a href='/news/$callout.urlTitle' data-gtmconversions='callout-article'>$!{callout.title}</a>" + #end #if($!{callout.contentType.name} == 'Event') - "<a href='https://www.canr.msu.edu/events/$callout.urlTitle' data-gtmconversions='callout-event'>$!{callout.title}</a>" + + "<a href='/events/$callout.urlTitle' data-gtmconversions='callout-event'>$!{callout.title}</a>" + #end #if($!{callout.contentType.name} == 'Person') - "<a href='https://www.canr.msu.edu/people/${callout.urlTitle}' data-gtmconversions='callout-person'>$!{callout.givenName} $!{callout.familyName} $!{callout.honorificSuffix}</a>" + + "<a href='/people/${callout.urlTitle}' data-gtmconversions='callout-person'>$!{callout.givenName} $!{callout.familyName} $!{callout.honorificSuffix}</a>" + #end #if($!{callout.contentType.name} == 'Digital Document') - "<a href='https://www.canr.msu.edu/resources/$callout.urlTitle' data-gtmconversions='callout-digitaldocument'>$!{callout.title}</a>" + + "<a href='/resources/$callout.urlTitle' data-gtmconversions='callout-digitaldocument'>$!{callout.title}</a>" + #end #if($!{callout.contentType.name} == 'Publication Issue') - "<a href='https://www.canr.msu.edu/publications/$callout.urlTitle' data-gtmconversions='callout-publication'>$!{callout.title}</a>" + + "<a href='/publications/$callout.urlTitle' data-gtmconversions='callout-publication'>$!{callout.title}</a>" + #end #if($!{callout.contentType.name} == 'Audio Object') - "<a href='https://www.canr.msu.edu/podcasts/$callout.urlTitle' data-gtmconversions='callout-audioobject'>$!{callout.title}</a>" + + "<a href='/podcasts/$callout.urlTitle' data-gtmconversions='callout-audioobject'>$!{callout.title}</a>" + #end #if($!{callout.contentType.name} == 'Jobs') - "<a href='https://www.canr.msu.edu/jobs/$callout.urlTitle' data-gtmconversions='callout-jobs'>$!{callout.title}</a>" + + "<a href='/jobs/$callout.urlTitle' data-gtmconversions='callout-jobs'>$!{callout.title}</a>" + #end #if($!{callout.contentType.name} == 'Course') - "<a href='https://www.canr.msu.edu/courses/$callout.urlTitle' data-gtmconversions='callout-course'>$!{callout.title}</a>" + + "<a href='/courses/$callout.urlTitle' data-gtmconversions='callout-course'>$!{callout.title}</a>" + #end #if($!{callout.contentType.name} == 'Scholarship') - "<a href='https://www.canr.msu.edu/scholarships/$callout.urlTitle' data-gtmconversions='callout-scholarship'>$!{callout.title}</a>" + + "<a href='/scholarships/$callout.urlTitle' data-gtmconversions='callout-scholarship'>$!{callout.title}</a>" + #end #if($!{callout.contentType.name} == 'In The News') "<a href='$callout.link' data-gtmconversions='callout-inthenews'>$!{callout.title}</a>" + @@ -135,7 +135,7 @@ var html = "<div class='canr-callout-content no-print $!{callout.contentType.nam "<p>" + "$!{callout.description}" + "</p>" + - "<a class='button' href='https://www.canr.msu.edu/news/$!callout.urlTitle' target='_parent' data-gtmconversions='callout-article'>READ MORE</a>" + + "<a class='button' href='$!callout.urlTitle' target='_parent' data-gtmconversions='callout-article' data-eventvalue='10'>READ MORE</a>" + #end ## ## pulls in content for Event content type @@ -144,7 +144,7 @@ var html = "<div class='canr-callout-content no-print $!{callout.contentType.nam "$date.format('MMMM d, yyyy', $!callout.startDate) $date.format('h:mma', $!callout.startDate) - $date.format('h:mma', $!callout.endDate)" + "</p>" + #if($callout.link) - "<a class='button no-print' href='https://www.canr.msu.edu/events/$callout.link' data-gtmconversions='callout-event-register'>REGISTER</a>" + + "<a class='button no-print' href='$callout.link' data-gtmconversions='callout-event-register' data-eventvalue='80'>REGISTER</a>" + #end #end ## @@ -154,7 +154,7 @@ var html = "<div class='canr-callout-content no-print $!{callout.contentType.nam "<p>$!callout.description</p>" + #end #if($callout.file) - "<a class='button' href='https://www.canr.msu.edu/resources/$!callout.urlTitle' data-gtmconversions='inline-callout-download'>DOWNLOAD FILE</a>" + + "<a class='button' href='$callout.file.uri' data-gtmconversions='inline-callout-download' data-eventvalue='30'>DOWNLOAD FILE</a>" + #end #end ## @@ -167,14 +167,14 @@ var html = "<div class='canr-callout-content no-print $!{callout.contentType.nam "$!{callout.jobTitle}" + #end #if($UtilMethods.isSet($primaryRoleOrg)) - "<br><a href='https://www.canr.msu.edu/$!primaryRoleOrg.url' data-gtmconversions='callout-person-organization'>$!primaryRoleOrg.title</a>" + + "<br><a href='$!primaryRoleOrg.url' data-gtmconversions='callout-person-organization'>$!primaryRoleOrg.title</a>" + #elseif($UtilMethods.isSet($worksForMain)) - "<br><a href='https://www.canr.msu.edu/$!worksForMain.url' data-gtmconversions='callout-person-organization'>$!worksForMain.title</a>" + + "<br><a href='$!worksForMain.url' data-gtmconversions='callout-person-organization'>$!worksForMain.title</a>" + #elseif($UtilMethods.isSet($callout.organization)) "<br>$!callout.organization" + #end #if($!{callout.email}) - "<br><a href='mailto:$!{callout.email}' data-gtmconversions='callout-person'>$!{callout.email}</a>" + + "<br><a href='mailto:$!{callout.email}' data-gtmconversions='callout-person' data-eventvalue='40'>$!{callout.email}</a>" + #end #if($UtilMethods.isSet($primaryRole.telephone) && $primaryRole.telephone != '') "<br><a href='tel:$!primaryRole.telephone' data-gtmconversions='callout-person-telephone'>$!primaryRole.telephone</a>" + @@ -218,7 +218,7 @@ var html = "<div class='canr-callout-content no-print $!{callout.contentType.nam "<strong>Application Deadline:</strong> $date.format('MMMM d, yyyy', $callout.availibilityEnds)" + "</p>" + #if($callout.url) - "<a class='button no-print' href='$callout.url' data-gtmconversions='callout-scholarship-apply'>APPLY</a>" + + "<a class='button no-print' href='$callout.url' data-gtmconversions='callout-scholarship-apply' data-eventvalue='60'>APPLY</a>" + #end #end ## @@ -359,6 +359,7 @@ canrStyles.innerHTML = #end "padding: 25px 0 0 0;" + #else + "margin: 0 0 2.1rem;" + "padding: 15px 0 0 0;" + "width: 100%;" + "text-align: center;" + diff --git a/shared/js/audioClickTracker.js b/shared/js/audioClickTracker.js new file mode 100644 index 0000000000000000000000000000000000000000..5e13939ffae20182e3ddbfe9f307c6e103343868 --- /dev/null +++ b/shared/js/audioClickTracker.js @@ -0,0 +1,16 @@ +var audioObj = document.getElementsByTagName("audio"); + +var i; +for (i = 0; i < audioObj.length; i++) { + var source = audioObj[i].getElementsByTagName("source")[0].getAttribute("src"); + audioObj[i].addEventListener("play", gaTrackPlay); + // audioObj[i].addEventListener("ended", gaTrackPlay); +} + +function gaTrackPlay() { + gtag('event', 'Play', { + 'event_category': 'value-multimedia', + 'event_label': source, + 'value': 20 +}); +} diff --git a/shared/js/d3DrawChart.js b/shared/js/d3DrawChart.js new file mode 100644 index 0000000000000000000000000000000000000000..da2bb13de94116fb115ff9c0f55ce67c601896a2 --- /dev/null +++ b/shared/js/d3DrawChart.js @@ -0,0 +1,146 @@ +// javascript + +const charts = document.getElementsByClassName("d3-chart"); +var width = 975; +var height = 500; + +// function drawVerticalBar() { +// +// } +// +// function drawHorizontalBar() { +// +// } + +async function drawGroupedBar() { + var containerData = document.getElementById("js-d3-chart-" + i); + var containerSvg = d3.select("#js-d3-chart-" + i); + var data = Object.assign(await d3.csv(containerData.dataset.graphCsv, d3.autoType), {y: containerData.dataset.yAxisLabel}); + + var groupKey = data.columns[0], + keys = data.columns.slice(1), + margin = ({top: 10, right: 10, bottom: 20, left: 50}); + + var xScale0 = d3.scaleBand() + .domain(data.map(d => { return d[groupKey]; } )) + .rangeRound([margin.left, width - margin.right]) + .paddingInner(0.1); + + var xScale1 = d3.scaleBand() + .domain(keys) + .rangeRound([0, xScale0.bandwidth()]) + .padding(0.05); + + var yScale = d3.scaleLinear() + .domain([0, d3.max(data, d => d3.max(keys, key => d[key]))]).nice() + .rangeRound([height - margin.bottom, margin.top]); + + var xAxis = d => d + .attr("transform", `translate(0,${height - margin.bottom})`) + .call(d3.axisBottom(xScale0).tickSizeOuter(0)) + .call(d => d.select(".domain")) + .attr("font-size", 20); + + var yAxis = d => d + .attr("transform", `translate(${margin.left},0)`) + .call(d3.axisLeft(yScale).ticks(null, "s")) + .attr("font-size", 20) + .call(d => d.select(".domain")) + .attr("font-size", 20) + .call(d => d.select(".tick:last-of-type text").clone() + .attr("x", 3) + .attr("text-anchor", "start") + .attr("font-weight", "bold") + .attr("font-size", 20) + .text(data.y)); + + legend = svg => { + const g = svg + .attr("transform", `translate(${width},0)`) + .attr("text-anchor", "end") + .attr("font-family", "sans-serif") + .attr("font-size", 20) + .selectAll("g") + .data(color.domain().slice().reverse()) + .enter() + .append("g") + .attr("transform", (d, i) => `translate(0,${i * 20})`); + + g.append("rect") + .attr("x", -19) + .attr("width", 19) + .attr("height", 19) + .attr("fill", color); + + g.append("text") + .attr("x", -24) + .attr("y", 9.5) + .attr("dy", "0.35em") + .text(d => d); + } + + var color = d3.scaleOrdinal() + .range(["#d1de3f", "#94ae4a", "#0db14b", "#cb5a28", "#f08521", "#c89a58", "#e8d9b5"]); + + var klass = "groupedBar"; + + const svg = containerSvg + .append("svg") + .attr("class", klass) + .attr("height", height) + .attr("width", width) + .attr("viewBox", [0, 0, width, height]) + .attr("style", "width: 100%;"); + + svg.selectAll("g") + .data(data) + .enter() + .append("g") + .attr("transform", d => `translate(${xScale0( d[groupKey])},0)`) + .selectAll("rect") + .data(d => keys.map(key => ({key, value: d[key]}))) + .enter() + .append("rect") + .attr("x", d => xScale1(d.key)) + .attr("y", d => yScale(d.value)) + .attr("width", xScale1.bandwidth()) + .attr("height", d => yScale(0) - yScale(d.value)) + .attr("fill", d => color(d.key)); + + svg.append("g") + .call(xAxis); + + svg.append("g") + .call(yAxis); + + svg.append("g") + .call(legend); + + // var table = d3.select(containerData) + // .append('table'); + // + // + // table.append('thead').append('tr') + // .selectAll('th') + // .data(data.columns).enter() + // .append('th') + // .text(d => d); + // + // table.append('tbody') + // .selectAll('tr') + // .data(data) + // .enter() + // .append('tr'); +} + +for(var i = 0; i < charts.length; i++) { + if (charts[i].dataset.graphType == "grouped-bar") { + drawGroupedBar(); + } else if (charts[i].dataset.graphType == "vertical-bar") { + console.log("vertical bar chart"); + } else if (charts[i].dataset.graphType == "pie") { + console.log("pie chart"); + } +} +// drawVerticalBar(); +// drawHorizontalBar();