(function (global, factory) {
if (typeof define === "function" && define.amd) {
define("/App/Travel", ["exports", "Site"], factory);
} else if (typeof exports !== "undefined") {
factory(exports, require("Site"));
} else {
var mod = {
exports: {}
};
factory(mod.exports, global.Site);
global.AppTravel = mod.exports;
}
})(this, function (_exports, _Site2) {
"use strict";
Object.defineProperty(_exports, "__esModule", {
value: true
});
_exports.run = run;
_exports.getInstance = getInstance;
_exports.default = _exports.AppTravel = void 0;
_Site2 = babelHelpers.interopRequireDefault(_Site2);
var Map =
/*#__PURE__*/
function () {
function Map() {
babelHelpers.classCallCheck(this, Map);
this.window = $(window);
this.$siteNavbar = $('.site-navbar');
this.$siteFooter = $('.site-footer');
this.$pageMain = $('.page-main');
this.handleMapHeight();
}
babelHelpers.createClass(Map, [{
key: "handleMapHeight",
value: function handleMapHeight() {
var footerH = this.$siteFooter.outerHeight();
var navbarH = this.$siteNavbar.outerHeight();
var mapH = this.window.height() - navbarH - footerH;
this.$pageMain.outerHeight(mapH);
}
}, {
key: "getMap",
value: function getMap() {
var mapLatlng = L.latLng(37.769, -122.446); // this accessToken, you can get it to here ==> [ https://www.mapbox.com ]
L.mapbox.accessToken = 'pk.eyJ1IjoiYW1hemluZ3N1cmdlIiwiYSI6ImNpaDVubzBoOTAxZG11dGx4OW5hODl2b3YifQ.qudwERFDdMJhFA-B2uO6Rg';
return L.mapbox.map('map', 'mapbox.light').setView(mapLatlng, 18);
}
}]);
return Map;
}();
var Markers =
/*#__PURE__*/
function () {
function Markers(spots, hotels, reviews, map) {
babelHelpers.classCallCheck(this, Markers);
this.spots = spots;
this.hotels = hotels;
this.reviews = reviews;
this.map = map;
this.markers = null;
this.allMarkers = [];
this.addMarkersByOption('spots');
}
babelHelpers.createClass(Markers, [{
key: "deleteMarkers",
value: function deleteMarkers() {
this.map.removeLayer(this.markers);
this.markers = null;
this.allMarkers.length = 0;
}
}, {
key: "addMarkersByOption",
value: function addMarkersByOption(option) {
/* add markercluster Plugin */
// this mapbox's Plugins,you can get it to here ==> [ https://github.com/Leaflet/Leaflet.markercluster.git ]
this.markers = new L.MarkerClusterGroup({
removeOutsideVisibleBounds: false,
polygonOptions: {
color: '#444'
}
});
this.initMarkers(this.markers, this["".concat(option)]);
this.map.addLayer(this.markers);
}
}, {
key: "initMarkers",
value: function initMarkers(markers, items) {
for (var i = 0; i < items.length; i++) {
var path = void 0;
var x = void 0;
if (i % 2 === 0) {
x = Number(Math.random());
} else {
x = -1 * Math.random();
}
var markerLatlng = L.latLng(37.769 + Math.random() / 170 * x, -122.446 + Math.random() / 150 * x);
path = $(items[i]).find('img').attr('src');
var divContent = "
\n
\n

\n
\n
");
var itemImg = L.divIcon({
html: divContent,
iconAnchor: [0, 0],
className: ''
});
/* create new marker and add to map */
var itemName = $(items[i]).find('.item-name').html();
var itemTitle = $(items[i]).find('.item-title').html();
var popupInfo = "\n \n ");
var marker = L.marker(markerLatlng, {
title: itemName,
icon: itemImg
}).bindPopup(popupInfo, {
closeButton: false
});
markers.addLayer(marker);
this.allMarkers.push(marker);
marker.on('popupopen', function () {
this._icon.className += ' marker-active';
this.setZIndexOffset(999);
});
marker.on('popupclose', function () {
if (this._icon) {
this._icon.className = 'leaflet-marker-icon leaflet-zoom-animated leaflet-clickable';
}
this.setZIndexOffset(450);
});
}
}
}, {
key: "getAllMarkers",
value: function getAllMarkers() {
return this.allMarkers;
}
}, {
key: "getMarkersInMap",
value: function getMarkersInMap() {
var inMapMarkers = [];
var allMarkers = this.getAllMarkers();
/* Get the object of all Markers in the map view */
for (var i = 0; i < allMarkers.length; i++) {
if (this.map.getBounds().contains(allMarkers[i].getLatLng())) {
inMapMarkers.push(allMarkers.indexOf(allMarkers[i]));
}
}
return inMapMarkers;
}
}]);
return Markers;
}();
var AppTravel =
/*#__PURE__*/
function (_Site) {
babelHelpers.inherits(AppTravel, _Site);
function AppTravel() {
babelHelpers.classCallCheck(this, AppTravel);
return babelHelpers.possibleConstructorReturn(this, babelHelpers.getPrototypeOf(AppTravel).apply(this, arguments));
}
babelHelpers.createClass(AppTravel, [{
key: "initialize",
value: function initialize() {
babelHelpers.get(babelHelpers.getPrototypeOf(AppTravel.prototype), "initialize", this).call(this);
this.window = $(window);
this.$pageAside = $('.page-aside');
this.$allSpots = $('.app-travel .spot-info');
this.allSpots = this.getAllListItems(this.$allSpots);
this.$allHotels = $('.app-travel .hotel-info');
this.allHotels = this.getAllListItems(this.$allHotels);
this.$allReviews = $('.app-travel .review-info');
this.allReviews = this.getAllListItems(this.$allReviews);
this.mapbox = new Map();
this.map = this.mapbox.getMap();
this.markers = new Markers(this.$allSpots, this.$allHotels, this.$allReviews, this.map);
this.allMarkers = this.markers.getAllMarkers();
this.markersInMap = null;
this.spotsNum = null;
this.hotelsNum = null;
this.reviewsNum = null; // states
this.states = {
mapChange: true,
listItemActive: false,
optionChange: 'spots'
};
}
}, {
key: "process",
value: function process() {
babelHelpers.get(babelHelpers.getPrototypeOf(AppTravel.prototype), "process", this).call(this);
this.handleResize();
this.steupListItem('spots');
this.steupListItem('hotels');
this.steupListItem('reviews');
this.steupMapChange();
this.setupTabChange();
this.handleSwitchClick();
this.handleSpotAction();
}
}, {
key: "getAllListItems",
value: function getAllListItems($allListItems) {
var allListItems = [];
$allListItems.each(function () {
allListItems.push(this);
});
return allListItems;
} // getDefaultState() {
// return Object.assign(super.getDefaultState(), {
// mapChange: true,
// listItemActive: false,
// optionChange: 'spots'
// });
// }
}, {
key: "optionChange",
value: function optionChange(change) {
var self = this;
this.states.optionChange = change;
if (change) {
console.log('tab change');
if (self.markers.markers) {
self.markers.deleteMarkers();
}
var tabOption = self.states.optionChange; // spots,hotels,reviews
self.markers.addMarkersByOption(tabOption);
self.changeListItemsByOption(tabOption);
}
}
}, {
key: "mapChange",
value: function mapChange(change) {
if (change) {
console.log('map change');
} else {
var tabOption = this.states.optionChange;
this.changeListItemsByOption(tabOption);
}
this.states.mapChange = change;
}
}, {
key: "listItemActive",
value: function listItemActive(active) {
if (active) {
var tabOption = this.states.optionChange;
this.changeMapOnListActiveByOption(tabOption);
} else {
console.log('listItem unactive');
}
this.states.listItemActive = active;
} // change list when map change
}, {
key: "changeListItems",
value: function changeListItems(allListItems) {
var itemsInList = [];
this.markersInMap = this.markers.getMarkersInMap();
for (var i = 0; i < this.allMarkers.length; i++) {
if (this.markersInMap.indexOf(i) === -1) {
$(allListItems[i]).hide();
} else {
$(allListItems[i]).show();
itemsInList.push($(allListItems[i]));
}
}
return itemsInList;
}
}, {
key: "onSpotsListChange",
value: function onSpotsListChange(spotsItemsInList) {
$('.clearfix.hidden-xl-down').remove();
for (var i = 0; i < spotsItemsInList.length; i++) {
if (i > 0 && (i + 1) % 2 === 0) {
var $clear = $('').addClass('clearfix hidden-xl-down');
spotsItemsInList[i].after($clear);
}
}
}
}, {
key: "onReviewsListChange",
value: function onReviewsListChange(reviewsItemsInList) {
var $lastReview = $('.last-review');
if ($lastReview.length > 0) {
$lastReview.removeClass('last-review');
}
var length = reviewsItemsInList.length;
if (length > 0) {
reviewsItemsInList[length - 1].addClass('last-review');
}
}
}, {
key: "changeListItemsByOption",
value: function changeListItemsByOption(option) {
var optionString = option.substring(0, 1).toUpperCase() + option.substring(1);
var itemsInList = this.changeListItems(this["all".concat(optionString)]);
this["on".concat(optionString, "ListChange")] ? this["on".concat(optionString, "ListChange")](itemsInList) : '';
this.window.trigger('resize');
} // end change list when map change
// change map on list change
}, {
key: "changeMapOnListActive",
value: function changeMapOnListActive(num) {
this.map.panTo(this.allMarkers[num].getLatLng());
this.allMarkers[num].openPopup();
}
}, {
key: "changeMapOnListActiveByOption",
value: function changeMapOnListActiveByOption(option) {
this.changeMapOnListActive(this["".concat(option, "Num")]);
} // end change map on list change
// bind
}, {
key: "steupListItem",
value: function steupListItem(option) {
var _this = this;
var self = this;
var optionString = option.substring(0, 1).toUpperCase() + option.substring(1);
this["$all".concat(optionString)].on('click', function () {
$('.rating').on('click', function (event) {
event.stopPropagation();
});
self["".concat(option, "Num")] = self["all".concat(optionString)].indexOf(this);
self.listItemActive(true);
});
this["$all".concat(optionString)].on('mouseup', function () {
_this.listItemActive(false);
});
}
}, {
key: "setupTabChange",
value: function setupTabChange() {
var self = this;
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
var href = $(e.target).attr('href'); // #spots,#travels,#reviews
if (href) {
var option = href.substring(1);
self.optionChange("".concat(option));
} // e.relatedTarget; /* previous active tab */
});
}
}, {
key: "steupMapChange",
value: function steupMapChange() {
var _this2 = this;
this.map.on('viewreset move', function () {
_this2.mapChange(true);
});
this.map.on('ready blur moveend dragend zoomend', function () {
_this2.mapChange(false);
});
}
}, {
key: "handleSwitchClick",
value: function handleSwitchClick() {
var self = this;
$(document).on('click', '.page-aside .page-aside-switch', function (event) {
if (self.$pageAside.hasClass('open')) {
var tabOption = self.states.optionChange;
self.changeListItemsByOption(tabOption);
} else {
event.stopPropagation();
}
});
}
}, {
key: "handleResize",
value: function handleResize() {
var _this3 = this;
this.window.on('resize', function () {
_this3.mapbox.handleMapHeight();
});
}
}, {
key: "handleSpotAction",
value: function handleSpotAction() {
$(document).on('click', '.card-actions', function () {
var $this = $(this);
$this.toggleClass('active');
});
} // end bind
}]);
return AppTravel;
}(_Site2.default);
_exports.AppTravel = AppTravel;
var instance = null;
function getInstance() {
if (!instance) {
instance = new AppTravel();
}
return instance;
}
function run() {
var app = getInstance();
app.run();
}
var _default = AppTravel;
_exports.default = _default;
});