11
/ *************************************************************************** ***********/ / *************************************************************************** ***********/ / *************************************************************************** ***********/ var cnst_city_selected_zoom_level = 17; function Cacher(url, icon) { var cnst_dictionary = { dict_cmd_choose_city:{bg:"Моля изберете град", en:"Please choose city"}, }; var self = this; var markers = []; // тук ще се пазят всички маркери които съм залепил по картата това е Array от обекти тип {marker:object, JSONData:object} - JSONData се използва за да пазя обекта с даните както е дошъл от сървара. var isLoaded = false; var cities = []; this.infoPanelID; //трябва ми за да си намеря панела при кликане в/у маркера и за да го скролирам до обекта, който е кликнат. this.map; this.Cities = function () { return cities; } //ще го напълня в PutMarkers и в него ще седят само градовете, които ще нахаквам в комбото с градовете. this.url = url; this.lang = "bg-bg"; //default value this.icon = icon; function L(){return self.lang.substring(0, 2).toLowerCase();} //============================ this.MarkersObjects = function () {return markers;} //============================ this.PutMarkers = function (callback) { if (!isLoaded) {// за да не бия постоянно json заявки към сървара, веднъж след като съм го заредил, само крия, показвам! затова ползвам isLoad cities = []; $.getJSON(url[L()] + "?d=" + (new Date().getTime()), function (data) { isLoaded = true; var counter = 0; if (!markers.length > 0) // някой вика асинхронно два пъти на onload json ама не мога да го хвана кой. За да оправим проблема проверяваме арея дали е празен и чак тогава стартираме $.each(data, function (i, e) { var pos = new google.maps.LatLng(e.lat, e.lng);

Post Bank_ javascript_by @zloban

  • Upload
    dogan

  • View
    71

  • Download
    1

Embed Size (px)

DESCRIPTION

в жълто са коментарите; в зелено са забавните такива. source: https://twitter.com/zloban/status/590757688553897984

Citation preview

Page 1: Post Bank_ javascript_by @zloban

/**************************************************************************************//**************************************************************************************//**************************************************************************************/var cnst_city_selected_zoom_level = 17;function Cacher(url, icon) { var cnst_dictionary = { dict_cmd_choose_city:{bg:"Моля изберете град", en:"Please choose city"}, }; var self = this; var markers = []; //тук ще се пазят всички маркери които съм залепил по картата това е Array от обекти тип {marker:object, JSONData:object} - JSONData се използва за да пазя обекта с даните както е дошъл от сървара. var isLoaded = false; var cities = []; this.infoPanelID; //трябва ми за да си намеря панела при кликане в/у маркера и за да го скролирам до обекта, който е кликнат. this.map; this.Cities = function () { return cities; } //ще го напълня в PutMarkers и в него ще седят само градовете, които ще нахаквам в комбото с градовете. this.url = url; this.lang = "bg-bg"; //default value this.icon = icon; function L(){return self.lang.substring(0, 2).toLowerCase();} //============================ this.MarkersObjects = function () {return markers;} //============================ this.PutMarkers = function (callback) { if (!isLoaded) {//за да не бия постоянно json заявки към сървара, веднъж след като съм го заредил, само крия, показвам! затова ползвам isLoad cities = []; $.getJSON(url[L()] + "?d=" + (new Date().getTime()), function (data) { isLoaded = true; var counter = 0; if (!markers.length > 0) //някой вика асинхронно два пъти на onload json ама не мога да го хвана кой. За да оправим проблема проверяваме арея дали е празен и чак тогава стартираме $.each(data, function (i, e) { var pos = new google.maps.LatLng(e.lat, e.lng); var m = new google.maps.Marker({ position: pos, map: self.map, icon: self.icon.icon, shadow: self.icon.shadow, draggable: false }); m["CustomPosition__"] = counter; //използваме малка простотия и си сетваме наш параметър на Google маркера //onclick marker google.maps.event.addListener(m, 'click', function () { var a = $("li div[markerID='" + this["CustomPosition__"] + "']"); a.click();

Page 2: Post Bank_ javascript_by @zloban

$("#" + self.infoPanelID).animate({ scrollTop: a[0].offsetTop - 10 }, 600); /*и както се вижда може да си го взема после*/ }); //ondoubleclick marker google.maps.event.addListener(m, 'dblclick', function () { if(this.getAnimation() != google.maps.Animation.BOUNCE) //правим чудесии от храброст, защото ondblclick изстрелва и clik, и става една мазня.. затова за гледам дали е отворен ако е .. не го пипам.. ако не е го отварям! { var a = $("li div[markerID='" + this["CustomPosition__"] + "']"); a.click();

$("#" + self.infoPanelID).animate({ scrollTop: a[0].offsetTop - 10 }); /*и както се вижда може да си го взема после*/

$("li[markerID='" + this["CustomPosition__"] + "']").find(".items_title_target").click();

} });

markers.push({ marker: m, JSONData: e/*добавяме си цялата информация за офиса/бранча, за да не търсим после като идиоти в арея който сме изтеглили през json*/ }); if ($.inArray(e.city.toLowerCase(), cities) < 0) { var ctcfg = CityConfig[L()]; //ей тука събираме информацията от конфига в всеки град който намерим. ако Ники не е дефинирал JS конфига за градовете, то би трябвало тук да е UNDEFINED:) if (ctcfg && ctcfg[e.city.toLowerCase()]) cities[e.city.toLowerCase()] = { name: e.city.toLowerCase(), order: ctcfg[e.city.toLowerCase()].order, zoom: ctcfg[e.city.toLowerCase()].zoom }; else cities[e.city.toLowerCase()] = { name: e.city.toLowerCase(), order: 200, zoom: 14 }; } counter++; })//$.each if (callback && typeof (callback) === "function") callback(); //извиквам callback за да се знае, че съм свършил. getJSON се изпълнява асинхронно, но ние сме в него и затова тя ще се изпълни след като обработим всичко. }); } else { //тук просто ще си сменя арейте с които работя и ще изключа маркерите на всички, без този, който е активен/ for (var i = 0; i < markers.length; i++) markers[i].marker.setOptions({ visible: true }); if (callback && typeof (callback) === "function") callback(); } //else } this.ClearMarkers = function () {for (var i = 0; i < markers.length; i++) { markers[i].marker.setOptions({ visible: false }); }} //криенето //========================== this.getVisibleMarkers = function (_map) { var ret = []; for (var i = 0; i < markers.length; i++) if (_map.getBounds() && _map.getBounds().contains(markers[i].marker.getPosition())) ret.push({pos:i, marker:markers[i]}); //преди да ги върнем, ги сортираме по City return ret.sort(function (a, b) {

Page 3: Post Bank_ javascript_by @zloban

if (a.marker.JSONData.city.toLowerCase() < b.marker.JSONData.city.toLowerCase()) return -1; if (a.marker.JSONData.city.toLowerCase() > b.marker.JSONData.city.toLowerCase()) return 1; return 0; }); } //this.getVisibleMarkers = function //==========================}/**************************************************************************************//**************************************************************************************//**************************************************************************************//**************************************************************************************//**************************************************************************************/function Locations(_map, _lang, _obj, infoPanelID, MarkerReloadedCallback) { //тук малко конфиг стрингове var cnst_dictionary = { dict_work_time:{bg:"Работно време", en:"Working time"}, dict_work_workdays:{bg:"От понеделник до петък", en:"Monday to Friday"}, dict_work_saturday:{bg:"Събота", en:"Saturday"}, dict_work_sunday: { bg: "Неделя", en: "Sunday" }, dict_phone: { bg: "Телефон:", en: "Phone:" },

dict_cmd_zoom_city:{bg:"Вижте град", en:"Zoom city"}, dict_cmd_zoom_item:{bg:"Увеличи на картата", en:"Zoom object on map"} }; //тук малко конфиг стрингове свършват var map = _map, map_old_zoom, map_old_center; var maxBounds = map.getBounds(), maxCenter=map.getCenter(), maxZoom = map.getZoom(); //Ще пазим това за да можем да лимитираме клиента рамките на картата - това би трябвало да са инициализационните стойности var lang = _lang; var obj = _obj; for (var obb in _obj) { _obj[obb].lang = _lang;_obj[obb].infoPanelID = infoPanelID; _obj[obb].map = _map;} //извъртам всички арея с всички вътрешни обекти, за да им залепя lang и infoPanelID google.maps.event.addListener(map, 'bounds_changed', _SetInfoPanel); var panel = "#"+infoPanelID; var radios = keys(obj), //въртя из арея с обекти за да си генерирам ID на радио бутините в последствие, и да ги търся. currentObjectsList, _MarkerReloadedCallback = MarkerReloadedCallback; //======================================================= this.CurrentObject = function () { return currentObjectsList; }; function L() { return lang.substring(0, 2).toLowerCase(); }; //======================================================= function keys(who) {

Page 4: Post Bank_ javascript_by @zloban

var keys = []; for (var k in who) if (who.hasOwnProperty(k)) {keys.push(k);} return keys; }; //======================================================= this.pickMarker = function (i) { var mrkrs = currentObjectsList.MarkersObjects();

for (var c = 0; c < mrkrs.length; c++) { var mrkr = mrkrs[c].marker; if (c == i) { //namerili sme markera if (mrkr.getAnimation() != google.maps.Animation.BOUNCE) //и сега ако скача го спираме, ако е спрял го пускаме да скача { mrkr.setAnimation(google.maps.Animation.BOUNCE); } else { mrkr.setAnimation(null); } } else { if (mrkr.getAnimation() == google.maps.Animation.BOUNCE) mrkr.setAnimation(null); //не изключвам всички маркери, за да не ми примигва кофти. } }

//map.setCenter(mrkr.getPosition())

} //======================================================= this.togle = function (who, callback) { var r = $(who).children("[type=radio]"); //запазваме си този, който е кликнат. for (var i = 0; i < radios.length; i++) { //след това извъртаме всички за да им угасим маркерите! var keyName = radios[i], curr = $("#" + keyName); if (curr.attr("id") == r.attr("id")) {//tuk sme w radioto, koeto sme kliknali curr.attr("checked", true); currentObjectsList = obj[keyName]; } else { //tuk във всички останали curr.attr("checked", false); obj[keyName].ClearMarkers(); } } //for currentObjectsList.PutMarkers(this.markersReloaded); } //this.togle = function (who) //===================================================== //Тук се генерира HTML за info_panel function generateInfoHTML(_visibleMarkers) { var bfr = []; //now put bulgaria bfr.push("<ul>"); var oldCity = "----", citiesInPane = 0; for (var i = 0; i < _visibleMarkers.length; i++) { var cssSelected=""; var currMarker = _visibleMarkers[i].marker; if (currMarker.marker.getAnimation() == google.maps.Animation.BOUNCE) cssSelected = "selected";

Page 5: Post Bank_ javascript_by @zloban

if (oldCity.toLowerCase() != currMarker.JSONData.city.toLowerCase()) { //малко игра за да сложим при всеки нов град H1 - арея с маркерите е сортиран по градове ;) bfr.push("<H1><a title='" +cnst_dictionary.dict_cmd_zoom_city[L()]+ "' onclick=\"$('#cityselect').val('" +currMarker.JSONData.city+ "').trigger('chosen:updated').change();\">" + currMarker.JSONData.city + "</a></H1>"); oldCity = currMarker.JSONData.city; citiesInPane++; //боим си колко градове има в пането.! }

bfr.push("<li class='" + cssSelected + "' markerID='" + _visibleMarkers[i].pos + "'>"); bfr.push("<span class='items_title_buttons'>"); bfr.push("<a class='items_title_city' onclick=\"$('#cityselect').val('" +currMarker.JSONData.city+ "').trigger('chosen:updated').change();\" title='" +cnst_dictionary.dict_cmd_zoom_city[L()]+ "'></a>"); bfr.push("<a title='" +cnst_dictionary.dict_cmd_zoom_item[L()]+ "' class='items_title_target' onclick='zoomTo(new google.maps.LatLng(" + currMarker.JSONData.lat + "," + currMarker.JSONData.lng + "), " +cnst_city_selected_zoom_level+ ");'></a>"); bfr.push("</span>"); bfr.push("<div class='city_item " + cssSelected + "' markerID='" + _visibleMarkers[i].pos + "' onclick=\"if(typeof eval(locationPicked) == 'function') locationPicked(" + _visibleMarkers[i].pos + "); $('.city_item').not(this).removeClass('selected').parent().removeClass('selected').find('.items_details').slideUp(400);$(this).toggleClass('selected'); $(this).parent().toggleClass('selected'); $(this).find('.items_details').slideToggle(400);\"' >"); bfr.push("<a class='items_title " + currMarker.JSONData.type.toLowerCase() + "' >" + currMarker.JSONData.Name + "</a>"); if(currMarker.marker.getAnimation() == google.maps.Animation.BOUNCE){ //ако маркера е бил селектнат и подскача, ще го оставиме разтегнат! bfr.push("<div class='items_details' style='display:inline-block'>"); } else { bfr.push("<div class='items_details' style='display:none'>"); }

bfr.push("<div class='it_address'>" + currMarker.JSONData.address + "</div>");

if ( currMarker.JSONData.workTime/* && (currMarker.JSONData.workTime.workDays.to || currMarker.JSONData.workTime.workDays.from) && (currMarker.JSONData.workTime.workSaturday.to || currMarker.JSONData.workTime.workSaturday.from) && (currMarker.JSONData.workTime.workSunday.to || currMarker.JSONData.workTime.workSunday.from)*/ ) { bfr.push("<div class='working_time'>"); bfr.push("<div class='it_working_time_title'>" + cnst_dictionary.dict_work_time[L()] + "</div>");

Page 6: Post Bank_ javascript_by @zloban

if (currMarker.JSONData.workTime.workDays.to || currMarker.JSONData.workTime.workDays.from) bfr.push("<div class='working_time_item mon'><label>" + cnst_dictionary.dict_work_workdays[L()] + "</label>" + currMarker.JSONData.workTime.workDays.from + " - " + currMarker.JSONData.workTime.workDays.to + "</div>"); if (currMarker.JSONData.workTime.workSaturday.isWorking) bfr.push("<div class='working_time_item sat'><label>" + cnst_dictionary.dict_work_saturday[L()] + "</label>" + currMarker.JSONData.workTime.workSaturday.from + " - " + currMarker.JSONData.workTime.workSaturday.to + "</div>"); if (currMarker.JSONData.workTime.workSunday.isWorking) bfr.push("<div class='working_time_item sun'><label>" + cnst_dictionary.dict_work_sunday[L()] + "</label>" + currMarker.JSONData.workTime.workSunday.from + " - " + currMarker.JSONData.workTime.workSunday.to + "</div>"); bfr.push("</div>") } /*fc, id, lat,lng,Name,type, phone*/ if (currMarker.JSONData.phone) bfr.push("<div class='phone'><label>" + cnst_dictionary.dict_phone[L()] + "</label>" + currMarker.JSONData.phone + "</div>"); bfr.push("</div>"); bfr.push("</div>"); bfr.push("</li>"); } bfr.push("</ul>"); if(citiesInPane ==0 || citiesInPane >1) $('#cityselect').val('').trigger('chosen:updated');//ako nqmame grad, ili imame poweche ot edin grad ще направим комбото да няма избран град ;)

else $('#cityselect').val(oldCity).trigger('chosen:updated'); //ако е само един град, го избираме в комбото. return bfr.join(""); } //===================================================== this.SetInfoPanel = function () { _SetInfoPanel(); } //===================================================== function _SetInfoPanel() { if(!self.maxBounds){ self.maxBounds = map.getBounds(); self.maxZoom = map.getZoom();self.maxCenter=map.getCenter();}//т.к картата не е ясно кога става готова, то ако е ! ot undefined си го сетваме макс и разчитаме, че повече няма да го променяме.

window.status = "map-zoom-level:" + map.getZoom(); if(self.maxBounds && (!self.maxBounds.contains(map.getBounds().getSouthWest()) || !self.maxBounds.contains(map.getBounds().getNorthEast())) ) { if(map.getZoom() == self.maxZoom) //ако някой е по границата и се опитва да zoom -out не още... но на практика излиза от видимото пространство то ще го позиционираме на началното зареждане zoomTo(self.maxCenter, self.maxZoom); else zoomTo(map_old_center, map_old_zoom); }

else{

Page 7: Post Bank_ javascript_by @zloban

var vsblMarkers = currentObjectsList.getVisibleMarkers(map);

$(panel).html(generateInfoHTML(vsblMarkers)).show(); map_old_zoom = map.getZoom(); map_old_center =

map.getCenter();}

//$(panel).mCustomScrollbar('update'); } //=====================================================

this.markersReloaded = function () { _SetInfoPanel(); if (_MarkerReloadedCallback && typeof (_MarkerReloadedCallback) === "function") _MarkerReloadedCallback(currentObjectsList, L()); }; //=====================================================

} //function Locations

/**************************************************************************************//**************************************************************************************//**************************************************************************************//**************************************************************************************//**************************************************************************************/function initCities(who, lng) { var choose = "Моля изберете град..."; if(lng=="en") choose = "Please choose city..." //проблема, е че Cities e асоциативен арей (демек Dictionary) и не можем да го сортираме...затова Ще го прехвърлим в арей в арей ;) var tuples = []; for (var val in who.Cities()) tuples.push([val, who.Cities()[val]]); //и след това ще го сортираме като попове! tuples.sort(function (a, b) { a = a[1].name.toLowerCase(); b = b[1].name.toLowerCase(); return a < b ? -1 : (a > b ? 1 : 0); //първо по име }) .sort(function (a, b) { a = a[1].order; b = b[1].order; return a < b ? -1 : (a > b ? 1 : 0); }); //след това по ордер!

//хайде най-накрая да направим комбото! var s = $("#cityselect"); s.empty(); $('<option />', { value: "", text: choose }).appendTo(s); for (var i = 0; i < tuples.length; i++ ) { var ct = tuples[i][1].name; ct = ct.charAt(0).toUpperCase() + ct.slice(1); $('<option mapZoomLevel="'+ tuples[i][1].zoom + '">' + ct + "</option>").appendTo(s); }

Page 8: Post Bank_ javascript_by @zloban

//хайде сега да го направим търсещо.. //и сега ако е дошъл QRY string var vc = getParameterByName("c").toLowerCase(); if (vc.length > 2 && vc.length < 20) { var opt = s.find("option").filter(function () { return $(this).text().toLowerCase() === vc.toLowerCase(); }); //хващаме го case insensitive po text! if (opt.length > 0) { //ако сме хванали някой град, направо шием SetFocus s.val(vc.charAt(0).toUpperCase() + vc.slice(1)); //е естествено сетваме и комбото ;) SetFocusToCity(vc, opt.first().attr("mapZoomLevel")); //да не забравяме и да викнем функцията за позициониране на картата. } } s.chosen({ disable_search_threshold: 10, placeholder_text_single: choose }); //и тук най-нагло си го правим търсещо ;)}//==================================================================================function locationPicked(i) { top.locations.pickMarker(i);}

//==================================================================================function map_initialize(who) { //infowindow = new google.maps.InfoWindow({ content: "Object..."

}); // инициализиране на картата var styles = [ { stylers: [ { hue: "#004357" }, { saturation: 0 } ] },{ featureType: "road", elementType: "geometry", stylers: [ { lightness: 5 }, { visibility: "simplified" } ] } /*,{ featureType: "administrative", elementType: "labels", stylers: [ { color: "#FF0000", weight:"3px" } ] } */]; var map = new google.maps.Map(document.getElementById(who), { mapTypeControlOptions: { mapTypeIds: [google.maps.MapTypeId.ROADMAP, google.maps.MapTypeId.HYBRID] }, zoom: 7, center: new google.maps.LatLng(42.7500, 25.5000), // styles:styles, mapTypeId: google.maps.MapTypeId.ROADMAP }); return map;}//==================================================================================function zoomTo(who, zoom) {

map.setCenter(who);map.setZoom(zoom);

}

Page 9: Post Bank_ javascript_by @zloban

//==================================================================================// DDL onchange functionfunction SetFocusToCity(cityName, zoom) { var geocoder = new google.maps.Geocoder(); var country = 'България,'; var city = cityName; var ind_city = jQuery('#cityselect').val(); if (ind_city.length > 0) { var address = country + city; //geocoder.geocode({ address: address }, focusPoint); geocoder.geocode( { 'address': address}, function(results, status) { if (status == google.maps.GeocoderStatus.OK) { map.setCenter(results[0].geometry.location); map.setZoom(zoom*1); //var marker = new google.maps.Marker({ map: map, position: results[0].geometry.location }); } else { } }); } else { // nocity selected var Abs_center_position = new google.maps.LatLng(42.7500, 25.5000); map.setCenter(Abs_center_position); map.setZoom(7); }} // function

//==================================================================================function getParameterByName(name) { name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]"); var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"), results = regex.exec(location.search); return results == null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));}//==================================================================================