Travel.js 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436
  1. (function (global, factory) {
  2. if (typeof define === "function" && define.amd) {
  3. define("/App/Travel", ["exports", "Site"], factory);
  4. } else if (typeof exports !== "undefined") {
  5. factory(exports, require("Site"));
  6. } else {
  7. var mod = {
  8. exports: {}
  9. };
  10. factory(mod.exports, global.Site);
  11. global.AppTravel = mod.exports;
  12. }
  13. })(this, function (_exports, _Site2) {
  14. "use strict";
  15. Object.defineProperty(_exports, "__esModule", {
  16. value: true
  17. });
  18. _exports.run = run;
  19. _exports.getInstance = getInstance;
  20. _exports.default = _exports.AppTravel = void 0;
  21. _Site2 = babelHelpers.interopRequireDefault(_Site2);
  22. var Map =
  23. /*#__PURE__*/
  24. function () {
  25. function Map() {
  26. babelHelpers.classCallCheck(this, Map);
  27. this.window = $(window);
  28. this.$siteNavbar = $('.site-navbar');
  29. this.$siteFooter = $('.site-footer');
  30. this.$pageMain = $('.page-main');
  31. this.handleMapHeight();
  32. }
  33. babelHelpers.createClass(Map, [{
  34. key: "handleMapHeight",
  35. value: function handleMapHeight() {
  36. var footerH = this.$siteFooter.outerHeight();
  37. var navbarH = this.$siteNavbar.outerHeight();
  38. var mapH = this.window.height() - navbarH - footerH;
  39. this.$pageMain.outerHeight(mapH);
  40. }
  41. }, {
  42. key: "getMap",
  43. value: function getMap() {
  44. var mapLatlng = L.latLng(37.769, -122.446); // this accessToken, you can get it to here ==> [ https://www.mapbox.com ]
  45. L.mapbox.accessToken = 'pk.eyJ1IjoiYW1hemluZ3N1cmdlIiwiYSI6ImNpaDVubzBoOTAxZG11dGx4OW5hODl2b3YifQ.qudwERFDdMJhFA-B2uO6Rg';
  46. return L.mapbox.map('map', 'mapbox.light').setView(mapLatlng, 18);
  47. }
  48. }]);
  49. return Map;
  50. }();
  51. var Markers =
  52. /*#__PURE__*/
  53. function () {
  54. function Markers(spots, hotels, reviews, map) {
  55. babelHelpers.classCallCheck(this, Markers);
  56. this.spots = spots;
  57. this.hotels = hotels;
  58. this.reviews = reviews;
  59. this.map = map;
  60. this.markers = null;
  61. this.allMarkers = [];
  62. this.addMarkersByOption('spots');
  63. }
  64. babelHelpers.createClass(Markers, [{
  65. key: "deleteMarkers",
  66. value: function deleteMarkers() {
  67. this.map.removeLayer(this.markers);
  68. this.markers = null;
  69. this.allMarkers.length = 0;
  70. }
  71. }, {
  72. key: "addMarkersByOption",
  73. value: function addMarkersByOption(option) {
  74. /* add markercluster Plugin */
  75. // this mapbox's Plugins,you can get it to here ==> [ https://github.com/Leaflet/Leaflet.markercluster.git ]
  76. this.markers = new L.MarkerClusterGroup({
  77. removeOutsideVisibleBounds: false,
  78. polygonOptions: {
  79. color: '#444'
  80. }
  81. });
  82. this.initMarkers(this.markers, this["".concat(option)]);
  83. this.map.addLayer(this.markers);
  84. }
  85. }, {
  86. key: "initMarkers",
  87. value: function initMarkers(markers, items) {
  88. for (var i = 0; i < items.length; i++) {
  89. var path = void 0;
  90. var x = void 0;
  91. if (i % 2 === 0) {
  92. x = Number(Math.random());
  93. } else {
  94. x = -1 * Math.random();
  95. }
  96. var markerLatlng = L.latLng(37.769 + Math.random() / 170 * x, -122.446 + Math.random() / 150 * x);
  97. path = $(items[i]).find('img').attr('src');
  98. var divContent = "<div class='in-map-markers'>\n <div class='marker-icon'>\n <img src='".concat(path, "'/>\n </div>\n </div>");
  99. var itemImg = L.divIcon({
  100. html: divContent,
  101. iconAnchor: [0, 0],
  102. className: ''
  103. });
  104. /* create new marker and add to map */
  105. var itemName = $(items[i]).find('.item-name').html();
  106. var itemTitle = $(items[i]).find('.item-title').html();
  107. var popupInfo = "<div class='marker-popup-info'>\n <div class='detail'>info</div>\n <h3>".concat(itemName, "</h3>\n <p>").concat(itemTitle, "</p>\n </div>\n <i class='icon wb-chevron-right-mini'>\n </i>");
  108. var marker = L.marker(markerLatlng, {
  109. title: itemName,
  110. icon: itemImg
  111. }).bindPopup(popupInfo, {
  112. closeButton: false
  113. });
  114. markers.addLayer(marker);
  115. this.allMarkers.push(marker);
  116. marker.on('popupopen', function () {
  117. this._icon.className += ' marker-active';
  118. this.setZIndexOffset(999);
  119. });
  120. marker.on('popupclose', function () {
  121. if (this._icon) {
  122. this._icon.className = 'leaflet-marker-icon leaflet-zoom-animated leaflet-clickable';
  123. }
  124. this.setZIndexOffset(450);
  125. });
  126. }
  127. }
  128. }, {
  129. key: "getAllMarkers",
  130. value: function getAllMarkers() {
  131. return this.allMarkers;
  132. }
  133. }, {
  134. key: "getMarkersInMap",
  135. value: function getMarkersInMap() {
  136. var inMapMarkers = [];
  137. var allMarkers = this.getAllMarkers();
  138. /* Get the object of all Markers in the map view */
  139. for (var i = 0; i < allMarkers.length; i++) {
  140. if (this.map.getBounds().contains(allMarkers[i].getLatLng())) {
  141. inMapMarkers.push(allMarkers.indexOf(allMarkers[i]));
  142. }
  143. }
  144. return inMapMarkers;
  145. }
  146. }]);
  147. return Markers;
  148. }();
  149. var AppTravel =
  150. /*#__PURE__*/
  151. function (_Site) {
  152. babelHelpers.inherits(AppTravel, _Site);
  153. function AppTravel() {
  154. babelHelpers.classCallCheck(this, AppTravel);
  155. return babelHelpers.possibleConstructorReturn(this, babelHelpers.getPrototypeOf(AppTravel).apply(this, arguments));
  156. }
  157. babelHelpers.createClass(AppTravel, [{
  158. key: "initialize",
  159. value: function initialize() {
  160. babelHelpers.get(babelHelpers.getPrototypeOf(AppTravel.prototype), "initialize", this).call(this);
  161. this.window = $(window);
  162. this.$pageAside = $('.page-aside');
  163. this.$allSpots = $('.app-travel .spot-info');
  164. this.allSpots = this.getAllListItems(this.$allSpots);
  165. this.$allHotels = $('.app-travel .hotel-info');
  166. this.allHotels = this.getAllListItems(this.$allHotels);
  167. this.$allReviews = $('.app-travel .review-info');
  168. this.allReviews = this.getAllListItems(this.$allReviews);
  169. this.mapbox = new Map();
  170. this.map = this.mapbox.getMap();
  171. this.markers = new Markers(this.$allSpots, this.$allHotels, this.$allReviews, this.map);
  172. this.allMarkers = this.markers.getAllMarkers();
  173. this.markersInMap = null;
  174. this.spotsNum = null;
  175. this.hotelsNum = null;
  176. this.reviewsNum = null; // states
  177. this.states = {
  178. mapChange: true,
  179. listItemActive: false,
  180. optionChange: 'spots'
  181. };
  182. }
  183. }, {
  184. key: "process",
  185. value: function process() {
  186. babelHelpers.get(babelHelpers.getPrototypeOf(AppTravel.prototype), "process", this).call(this);
  187. this.handleResize();
  188. this.steupListItem('spots');
  189. this.steupListItem('hotels');
  190. this.steupListItem('reviews');
  191. this.steupMapChange();
  192. this.setupTabChange();
  193. this.handleSwitchClick();
  194. this.handleSpotAction();
  195. }
  196. }, {
  197. key: "getAllListItems",
  198. value: function getAllListItems($allListItems) {
  199. var allListItems = [];
  200. $allListItems.each(function () {
  201. allListItems.push(this);
  202. });
  203. return allListItems;
  204. } // getDefaultState() {
  205. // return Object.assign(super.getDefaultState(), {
  206. // mapChange: true,
  207. // listItemActive: false,
  208. // optionChange: 'spots'
  209. // });
  210. // }
  211. }, {
  212. key: "optionChange",
  213. value: function optionChange(change) {
  214. var self = this;
  215. this.states.optionChange = change;
  216. if (change) {
  217. console.log('tab change');
  218. if (self.markers.markers) {
  219. self.markers.deleteMarkers();
  220. }
  221. var tabOption = self.states.optionChange; // spots,hotels,reviews
  222. self.markers.addMarkersByOption(tabOption);
  223. self.changeListItemsByOption(tabOption);
  224. }
  225. }
  226. }, {
  227. key: "mapChange",
  228. value: function mapChange(change) {
  229. if (change) {
  230. console.log('map change');
  231. } else {
  232. var tabOption = this.states.optionChange;
  233. this.changeListItemsByOption(tabOption);
  234. }
  235. this.states.mapChange = change;
  236. }
  237. }, {
  238. key: "listItemActive",
  239. value: function listItemActive(active) {
  240. if (active) {
  241. var tabOption = this.states.optionChange;
  242. this.changeMapOnListActiveByOption(tabOption);
  243. } else {
  244. console.log('listItem unactive');
  245. }
  246. this.states.listItemActive = active;
  247. } // change list when map change
  248. }, {
  249. key: "changeListItems",
  250. value: function changeListItems(allListItems) {
  251. var itemsInList = [];
  252. this.markersInMap = this.markers.getMarkersInMap();
  253. for (var i = 0; i < this.allMarkers.length; i++) {
  254. if (this.markersInMap.indexOf(i) === -1) {
  255. $(allListItems[i]).hide();
  256. } else {
  257. $(allListItems[i]).show();
  258. itemsInList.push($(allListItems[i]));
  259. }
  260. }
  261. return itemsInList;
  262. }
  263. }, {
  264. key: "onSpotsListChange",
  265. value: function onSpotsListChange(spotsItemsInList) {
  266. $('.clearfix.hidden-xl-down').remove();
  267. for (var i = 0; i < spotsItemsInList.length; i++) {
  268. if (i > 0 && (i + 1) % 2 === 0) {
  269. var $clear = $('<div></div>').addClass('clearfix hidden-xl-down');
  270. spotsItemsInList[i].after($clear);
  271. }
  272. }
  273. }
  274. }, {
  275. key: "onReviewsListChange",
  276. value: function onReviewsListChange(reviewsItemsInList) {
  277. var $lastReview = $('.last-review');
  278. if ($lastReview.length > 0) {
  279. $lastReview.removeClass('last-review');
  280. }
  281. var length = reviewsItemsInList.length;
  282. if (length > 0) {
  283. reviewsItemsInList[length - 1].addClass('last-review');
  284. }
  285. }
  286. }, {
  287. key: "changeListItemsByOption",
  288. value: function changeListItemsByOption(option) {
  289. var optionString = option.substring(0, 1).toUpperCase() + option.substring(1);
  290. var itemsInList = this.changeListItems(this["all".concat(optionString)]);
  291. this["on".concat(optionString, "ListChange")] ? this["on".concat(optionString, "ListChange")](itemsInList) : '';
  292. this.window.trigger('resize');
  293. } // end change list when map change
  294. // change map on list change
  295. }, {
  296. key: "changeMapOnListActive",
  297. value: function changeMapOnListActive(num) {
  298. this.map.panTo(this.allMarkers[num].getLatLng());
  299. this.allMarkers[num].openPopup();
  300. }
  301. }, {
  302. key: "changeMapOnListActiveByOption",
  303. value: function changeMapOnListActiveByOption(option) {
  304. this.changeMapOnListActive(this["".concat(option, "Num")]);
  305. } // end change map on list change
  306. // bind
  307. }, {
  308. key: "steupListItem",
  309. value: function steupListItem(option) {
  310. var _this = this;
  311. var self = this;
  312. var optionString = option.substring(0, 1).toUpperCase() + option.substring(1);
  313. this["$all".concat(optionString)].on('click', function () {
  314. $('.rating').on('click', function (event) {
  315. event.stopPropagation();
  316. });
  317. self["".concat(option, "Num")] = self["all".concat(optionString)].indexOf(this);
  318. self.listItemActive(true);
  319. });
  320. this["$all".concat(optionString)].on('mouseup', function () {
  321. _this.listItemActive(false);
  322. });
  323. }
  324. }, {
  325. key: "setupTabChange",
  326. value: function setupTabChange() {
  327. var self = this;
  328. $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  329. var href = $(e.target).attr('href'); // #spots,#travels,#reviews
  330. if (href) {
  331. var option = href.substring(1);
  332. self.optionChange("".concat(option));
  333. } // e.relatedTarget; /* previous active tab */
  334. });
  335. }
  336. }, {
  337. key: "steupMapChange",
  338. value: function steupMapChange() {
  339. var _this2 = this;
  340. this.map.on('viewreset move', function () {
  341. _this2.mapChange(true);
  342. });
  343. this.map.on('ready blur moveend dragend zoomend', function () {
  344. _this2.mapChange(false);
  345. });
  346. }
  347. }, {
  348. key: "handleSwitchClick",
  349. value: function handleSwitchClick() {
  350. var self = this;
  351. $(document).on('click', '.page-aside .page-aside-switch', function (event) {
  352. if (self.$pageAside.hasClass('open')) {
  353. var tabOption = self.states.optionChange;
  354. self.changeListItemsByOption(tabOption);
  355. } else {
  356. event.stopPropagation();
  357. }
  358. });
  359. }
  360. }, {
  361. key: "handleResize",
  362. value: function handleResize() {
  363. var _this3 = this;
  364. this.window.on('resize', function () {
  365. _this3.mapbox.handleMapHeight();
  366. });
  367. }
  368. }, {
  369. key: "handleSpotAction",
  370. value: function handleSpotAction() {
  371. $(document).on('click', '.card-actions', function () {
  372. var $this = $(this);
  373. $this.toggleClass('active');
  374. });
  375. } // end bind
  376. }]);
  377. return AppTravel;
  378. }(_Site2.default);
  379. _exports.AppTravel = AppTravel;
  380. var instance = null;
  381. function getInstance() {
  382. if (!instance) {
  383. instance = new AppTravel();
  384. }
  385. return instance;
  386. }
  387. function run() {
  388. var app = getInstance();
  389. app.run();
  390. }
  391. var _default = AppTravel;
  392. _exports.default = _default;
  393. });