Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Refactor non-reactive attributes #73

Merged
merged 2 commits into from
Mar 7, 2019
Merged

Refactor non-reactive attributes #73

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
35de910
Refactor non-reactive attributes
sdreher Mar 6, 2019
eb9bea4
* iconUrls are attributes not functions
sdreher Mar 6, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 1 addition & 2 deletions ahemap/templates/clientside/google_map_template.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{% verbatim %}
<script type="text/x-template" id="google-map-template">
<div>
<form action='.' method='GET' name="search" id="maincontent">
<form action='.' method='GET' name="search" id="maincontent" v-if="sites.length > 0">
<h1 class="sr-only sr-only-focusable">Search Schools</h1>
<div class="advanced-filters">
<div class="search-criteria collapse show">
Expand Down Expand Up @@ -173,7 +173,6 @@ <h6 class="mb-1">
</ul>
</div>
</div>
<ul style="display: none"><li v-for="site in sites">{{site.id}}</li></ul>
<div class="google-map" :id="mapName"></div>
</div>
</script>
Expand Down
54 changes: 23 additions & 31 deletions media/js/src/components/gmapvue.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,22 +8,18 @@ define(libs, function($, multiselect, utils) {
},
data: function() {
return {
map: null,
mapName: 'the-map',
selectedSite: null,
sites: [],
searchTerm: '',
searchResults: null,
searchResultHeight: 0,
bounds: null,
states: utils.states,
state: null,
graduationRates: utils.graduationRates,
graduationRate: null,
twoYear: null,
fourYear: null,
center: null,
zoom: 5
fourYear: null
};
},
methods: {
Expand Down Expand Up @@ -63,8 +59,7 @@ define(libs, function($, multiselect, utils) {
return;
}
// reset the icon to the site's category
const url = this.siteIconUrl(this.selectedSite);
this.selectedSite.marker.setIcon(url);
this.selectedSite.marker.setIcon(this.siteIconUrl);
this.selectedSite = null;
},
getSiteById: function(siteId) {
Expand All @@ -76,12 +71,6 @@ define(libs, function($, multiselect, utils) {
});
return result;
},
siteIconUrl: function(site) {
return AHE.staticUrl + 'png/marker.png';
},
selectedIconUrl: function(site) {
return AHE.staticUrl + 'png/marker-selected.png';
},
markerOpacity: function(opacity) {
this.sites.forEach((site) => {
if (site.marker) {
Expand Down Expand Up @@ -110,8 +99,7 @@ define(libs, function($, multiselect, utils) {

this.clearSelectedSite();

const url = this.selectedIconUrl();
site.marker.setIcon(url);
site.marker.setIcon(this.selectedIconUrl);
this.selectedSite = site;
this.markerShow(site.marker);
},
Expand Down Expand Up @@ -187,14 +175,14 @@ define(libs, function($, multiselect, utils) {
}
},
created: function() {
const url = AHE.baseUrl + 'api/institution/';
$.getJSON(url, (data) => {
this.sites = data;
});
this.bounds = null;
this.zoom = 5;
this.center = new google.maps.LatLng(37.0902, -95.7129);
this.siteIconUrl = AHE.staticUrl + 'png/marker.png';
this.selectedIconUrl = AHE.staticUrl + 'png/marker-selected.png';
},
mounted: function() {
let elt = document.getElementById(this.mapName);
this.center = new google.maps.LatLng(37.0902, -95.7129);
this.map = new google.maps.Map(elt, {
mapTypeControl: false,
clickableIcons: false,
Expand All @@ -219,27 +207,31 @@ define(libs, function($, multiselect, utils) {
// eslint-disable-next-line scanjs-rules/call_addEventListener
window.addEventListener('resize', this.resize);

this.$watch('twoYear', this.changeCriteria);
this.$watch('fourYear', this.changeCriteria);
this.$watch('graduationRate', this.changeCriteria);
this.$watch('state', this.changeCriteria);
},
updated: function() {
this.sites.forEach((site) => {
if (!site.marker) {
const url = AHE.baseUrl + 'api/institution/';
$.getJSON(url, (data) => {
this.sites = data;
this.sites.forEach((site) => {
const position = new google.maps.LatLng(site.lat, site.lng);
const marker = new google.maps.Marker({
position: position,
map: this.map,
icon: this.siteIconUrl(site)
icon: this.siteIconUrl
});
site.marker = marker;
site.iconUrl = this.siteIconUrl(site);
site.iconUrl = this.siteIconUrl;
google.maps.event.addListener(marker, 'click', (e) => {
this.selectSite(site);
});
}
});

// now watch search criteria
this.$watch('twoYear', this.changeCriteria);
this.$watch('fourYear', this.changeCriteria);
this.$watch('graduationRate', this.changeCriteria);
this.$watch('state', this.changeCriteria);
});
},
updated: function() {
this.searchResultHeight = utils.visibleContentHeight();
}
};
Expand Down