Location.js 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333
  1. (function (global, factory) {
  2. if (typeof define === "function" && define.amd) {
  3. define("/App/Location", ["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.AppLocation = 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.AppLocation = 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(friends, map) {
  55. babelHelpers.classCallCheck(this, Markers);
  56. this.friends = friends;
  57. this.map = map;
  58. this.allMarkers = [];
  59. this.handleMarkers();
  60. }
  61. babelHelpers.createClass(Markers, [{
  62. key: "handleMarkers",
  63. value: function handleMarkers() {
  64. /* add markercluster Plugin */
  65. // this mapbox's Plugins,you can get it to here ==> [ https://github.com/Leaflet/Leaflet.markercluster.git ]
  66. var markers = new L.markerClusterGroup({
  67. removeOutsideVisibleBounds: false,
  68. polygonOptions: {
  69. color: '#444444'
  70. }
  71. });
  72. for (var i = 0; i < this.friends.length; i++) {
  73. var path = void 0;
  74. var x = void 0;
  75. if (i % 2 === 0) {
  76. x = Number(Math.random());
  77. } else {
  78. x = -1 * Math.random();
  79. }
  80. var markerLatlng = L.latLng(37.769 + Math.random() / 170 * x, -122.446 + Math.random() / 150 * x);
  81. path = $(this.friends[i]).find('img').attr('src');
  82. var divContent = "<div class='in-map-markers'><div class='friend-icon'><img src='".concat(path, "' /></div></div>");
  83. var friendImg = L.divIcon({
  84. html: divContent,
  85. iconAnchor: [0, 0],
  86. className: ''
  87. });
  88. /* create new marker and add to map */
  89. var popupInfo = "<div class='friend-popup-info'><div class='detail'>info</div><h3>".concat($(this.friends[i]).find('.friend-name').html(), "</h3><p>").concat($(this.friends[i]).find('.friend-title').html(), "</p></div><i class='icon wb-chevron-right-mini'></i>");
  90. var marker = L.marker(markerLatlng, {
  91. title: $(this.friends[i]).find('friend-name').html(),
  92. icon: friendImg
  93. }).bindPopup(popupInfo, {
  94. closeButton: false
  95. });
  96. markers.addLayer(marker);
  97. this.allMarkers.push(marker);
  98. marker.on('popupopen', function () {
  99. this._icon.className += ' marker-active';
  100. this.setZIndexOffset(999);
  101. });
  102. marker.on('popupclose', function () {
  103. if (this._icon) {
  104. this._icon.className = 'leaflet-marker-icon leaflet-zoom-animated leaflet-clickable';
  105. }
  106. this.setZIndexOffset(450);
  107. });
  108. }
  109. this.map.addLayer(markers);
  110. }
  111. }, {
  112. key: "getAllMarkers",
  113. value: function getAllMarkers() {
  114. return this.allMarkers;
  115. }
  116. }, {
  117. key: "getMarkersInMap",
  118. value: function getMarkersInMap() {
  119. var inMapMarkers = [];
  120. var allMarkers = this.getAllMarkers();
  121. /* Get the object of all Markers in the map view */
  122. for (var i = 0; i < allMarkers.length; i++) {
  123. if (this.map.getBounds().contains(allMarkers[i].getLatLng())) {
  124. inMapMarkers.push(allMarkers.indexOf(allMarkers[i]));
  125. }
  126. }
  127. return inMapMarkers;
  128. }
  129. }]);
  130. return Markers;
  131. }();
  132. var AppLocation =
  133. /*#__PURE__*/
  134. function (_Site) {
  135. babelHelpers.inherits(AppLocation, _Site);
  136. function AppLocation() {
  137. babelHelpers.classCallCheck(this, AppLocation);
  138. return babelHelpers.possibleConstructorReturn(this, babelHelpers.getPrototypeOf(AppLocation).apply(this, arguments));
  139. }
  140. babelHelpers.createClass(AppLocation, [{
  141. key: "initialize",
  142. value: function initialize() {
  143. babelHelpers.get(babelHelpers.getPrototypeOf(AppLocation.prototype), "initialize", this).call(this);
  144. this.window = $(window);
  145. this.$listItem = $('.app-location .page-aside .list-group');
  146. this.$allFriends = $('.app-location .friend-info');
  147. this.allFriends = this.getAllFriends();
  148. this.mapbox = new Map();
  149. this.map = this.mapbox.getMap();
  150. this.markers = new Markers(this.$allFriends, this.map);
  151. this.allMarkers = this.markers.getAllMarkers();
  152. this.markersInMap = null;
  153. this.friendNum = null; // states
  154. this.states = {
  155. mapChanged: true,
  156. listItemActive: false
  157. };
  158. }
  159. }, {
  160. key: "process",
  161. value: function process() {
  162. babelHelpers.get(babelHelpers.getPrototypeOf(AppLocation.prototype), "process", this).call(this);
  163. this.handleResize();
  164. this.steupListItem();
  165. this.steupMapChange();
  166. this.handleSearch();
  167. }
  168. }, {
  169. key: "getDefaultState",
  170. value: function getDefaultState() {
  171. return Object.assign(babelHelpers.get(babelHelpers.getPrototypeOf(AppLocation.prototype), "getDefaultState", this).call(this), {
  172. mapChange: true,
  173. listItemActive: false
  174. });
  175. }
  176. }, {
  177. key: "mapChange",
  178. value: function mapChange(change) {
  179. if (change) {
  180. console.log('map change');
  181. } else {
  182. var friendsInList = [];
  183. this.markersInMap = this.markers.getMarkersInMap();
  184. for (var i = 0; i < this.allMarkers.length; i++) {
  185. if (this.markersInMap.indexOf(i) === -1) {
  186. $(this.allFriends[i]).hide();
  187. } else {
  188. $(this.allFriends[i]).show();
  189. friendsInList.push($(this.allFriends[i]));
  190. }
  191. }
  192. this.friendsInList = friendsInList;
  193. }
  194. this.states.mapChanged = change;
  195. }
  196. }, {
  197. key: "listItemActive",
  198. value: function listItemActive(active) {
  199. if (active) {
  200. this.map.panTo(this.allMarkers[this.friendNum].getLatLng());
  201. this.allMarkers[this.friendNum].openPopup();
  202. } else {
  203. console.log('listItem unactive');
  204. }
  205. this.states.listItemActived = active;
  206. }
  207. }, {
  208. key: "getAllFriends",
  209. value: function getAllFriends() {
  210. var allFriends = [];
  211. this.$allFriends.each(function () {
  212. allFriends.push(this);
  213. });
  214. return allFriends;
  215. }
  216. }, {
  217. key: "steupListItem",
  218. value: function steupListItem() {
  219. var _this = this;
  220. var self = this;
  221. this.$allFriends.on('click', function () {
  222. $('.list-inline').on('click', function (event) {
  223. event.stopPropagation();
  224. });
  225. self.friendNum = self.allFriends.indexOf(this);
  226. self.listItemActive(true);
  227. });
  228. this.$allFriends.on('mouseup', function () {
  229. _this.listItemActive(false);
  230. });
  231. }
  232. }, {
  233. key: "steupMapChange",
  234. value: function steupMapChange() {
  235. var _this2 = this;
  236. this.map.on('viewreset move', function () {
  237. _this2.mapChange(true);
  238. });
  239. this.map.on('ready blur moveend dragend zoomend', function () {
  240. _this2.mapChange(false);
  241. });
  242. }
  243. }, {
  244. key: "handleResize",
  245. value: function handleResize() {
  246. var _this3 = this;
  247. this.window.on('resize', function () {
  248. _this3.mapbox.handleMapHeight();
  249. });
  250. }
  251. }, {
  252. key: "handleSearch",
  253. value: function handleSearch() {
  254. var self = this;
  255. $('.search-friends input').on('focus', function () {
  256. $(this).on('keyup', function () {
  257. var inputName = $('.search-friends input').val();
  258. for (var i = 0; i < self.friendsInList.length; i++) {
  259. var friendName = self.friendsInList[i].find('.friend-name').html();
  260. if (inputName.length <= friendName.length) {
  261. for (var j = 1; j <= inputName.length; j++) {
  262. if (inputName.substring(0, j).toLowerCase() === friendName.substring(0, j).toLowerCase()) {
  263. self.friendsInList[i].show();
  264. } else {
  265. self.friendsInList[i].hide();
  266. }
  267. }
  268. } else {
  269. self.friendsInList[i].hide();
  270. }
  271. }
  272. if (inputName === '') {
  273. for (var _i = 0; _i < self.friendsInList.length; _i++) {
  274. self.friendsInList[_i].show();
  275. }
  276. }
  277. });
  278. });
  279. $('.search-friends input').on('focusout', function () {
  280. $(this).off('keyup');
  281. });
  282. }
  283. }]);
  284. return AppLocation;
  285. }(_Site2.default);
  286. _exports.AppLocation = AppLocation;
  287. var instance = null;
  288. function getInstance() {
  289. if (!instance) {
  290. instance = new AppLocation();
  291. }
  292. return instance;
  293. }
  294. function run() {
  295. var app = getInstance();
  296. app.run();
  297. }
  298. var _default = AppLocation;
  299. _exports.default = _default;
  300. });