From 257e65e1dd63e376bde2d1e4be7e97f4cd5dea79 Mon Sep 17 00:00:00 2001 From: Sam Date: Sun, 13 Nov 2016 04:35:45 -0800 Subject: [PATCH 1/4] SYNQ chat integration --- index.html | 46 +++++++++++++++++++++++++--------------------- 1 file changed, 25 insertions(+), 21 deletions(-) diff --git a/index.html b/index.html index 82d21e9..93b0dca 100644 --- a/index.html +++ b/index.html @@ -18,7 +18,7 @@ - + @@ -30,7 +30,7 @@ - +

FastPokeMap

@@ -41,7 +41,7 @@

Gotta Track'em All

Thank you and happy hunting!

- @@ -55,39 +55,43 @@

Gotta Track'em All

  • Privacy Policy
    • -
    +

    NEARBY

    - +
    -
    - +
    -
    - +
    - + - + - +
    +
    - +

    Search

    Find your location

    @@ -97,30 +101,30 @@

    Search

    -
    - +

    Filter (Remove)

    -
    - +
    - + - + From b5bb67c1a6e163ed7c9e5d7c4e2de3bed1b35b96 Mon Sep 17 00:00:00 2001 From: Sam Date: Sun, 13 Nov 2016 04:59:18 -0800 Subject: [PATCH 2/4] disable map when over chat, plus right panel slide --- script.js | 21 +++++++++++++++++++++ style.css | 23 +++++++++++++++-------- 2 files changed, 36 insertions(+), 8 deletions(-) diff --git a/script.js b/script.js index 74e4dcd..6883c76 100644 --- a/script.js +++ b/script.js @@ -9,6 +9,7 @@ var PokemonIdList={"BULBASAUR":1,"IVYSAUR":2,"VENUSAUR":3,"CHARMANDER":4,"CHARME var pokemonNames={1:'Bulbasaur',2:'Ivysaur',3:'Venusaur',4:'Charmander',5:'Charmeleon',6:'Charizard',7:'Squirtle',8:'Wartortle',9:'Blastoise',10:'Caterpie',11:'Metapod',12:'Butterfree',13:'Weedle',14:'Kakuna',15:'Beedrill',16:'Pidgey',17:'Pidgeotto',18:'Pidgeot',19:'Rattata',20:'Raticate',21:'Spearow',22:'Fearow',23:'Ekans',24:'Arbok',25:'Pikachu',26:'Raichu',27:'Sandshrew',28:'Sandslash',29:'Nidoran F',30:'Nidorina',31:'Nidoqueen',32:'Nidoran M',33:'Nidorino',34:'Nidoking',35:'Clefairy',36:'Clefable',37:'Vulpix',38:'Ninetales',39:'Jigglypuff',40:'Wigglytuff',41:'Zubat',42:'Golbat',43:'Oddish',44:'Gloom',45:'Vileplume',46:'Paras',47:'Parasect',48:'Venonat',49:'Venomoth',50:'Diglett',51:'Dugtrio',52:'Meowth',53:'Persian',54:'Psyduck',55:'Golduck',56:'Mankey',57:'Primeape',58:'Growlithe',59:'Arcanine',60:'Poliwag',61:'Poliwhirl',62:'Poliwrath',63:'Abra',64:'Kadabra',65:'Alakazam',66:'Machop',67:'Machoke',68:'Machamp',69:'Bellsprout',70:'Weepinbell',71:'Victreebel',72:'Tentacool',73:'Tentacruel',74:'Geodude',75:'Graveler',76:'Golem',77:'Ponyta',78:'Rapidash',79:'Slowpoke',80:'Slowbro',81:'Magnemite',82:'Magneton',83:'Farfetch\'d',84:'Doduo',85:'Dodrio',86:'Seel',87:'Dewgong',88:'Grimer',89:'Muk',90:'Shellder',91:'Cloyster',92:'Gastly',93:'Haunter',94:'Gengar',95:'Onix',96:'Drowzee',97:'Hypno',98:'Krabby',99:'Kingler',100:'Voltorb',101:'Electrode',102:'Exeggcute',103:'Exeggutor',104:'Cubone',105:'Marowak',106:'Hitmonlee',107:'Hitmonchan',108:'Lickitung',109:'Koffing',110:'Weezing',111:'Rhyhorn',112:'Rhydon',113:'Chansey',114:'Tangela',115:'Kangaskhan',116:'Horsea',117:'Seadra',118:'Goldeen',119:'Seaking',120:'Staryu',121:'Starmie',122:'Mr. Mime',123:'Scyther',124:'Jynx',125:'Electabuzz',126:'Magmar',127:'Pinsir',128:'Tauros',129:'Magikarp',130:'Gyarados',131:'Lapras',132:'Ditto',133:'Eevee',134:'Vaporeon',135:'Jolteon',136:'Flareon',137:'Porygon',138:'Omanyte',139:'Omastar',140:'Kabuto',141:'Kabutops',142:'Aerodactyl',143:'Snorlax',144:'Articuno',145:'Zapdos',146:'Moltres',147:'Dratini',148:'Dragonair',149:'Dragonite',150:'Mewtwo',151:'Mew',}; var filterdict = {}; var isLoading = false; +var mapEventsDisabled = false; L.HtmlIcon = L.Icon.extend({ options: {}, @@ -311,6 +312,7 @@ function initmap() { credits.addAttribution('Powered by Esri, HERE, DeLorme, NGA, USGS'); map.on("click", function(event) { + if (mapEventsDisabled) return; var lat = event.latlng.lat; var lng = event.latlng.lng; var cp = new L.LatLng(lat, lng); @@ -336,6 +338,7 @@ function initmap() { throttledLoadCache(cp); }); map.on("dblclick", function(event) { + if (mapEventsDisabled) return; var cp = new L.LatLng(event.latlng.lat, event.latlng.lng); marker.setLatLng(cp); }); @@ -645,6 +648,24 @@ $(function() { $("body").css({ height: $(window).height() + }); + + $('#openChat').on('click', function() { + $('#chat,.right').toggleClass('slide-in'); + }); + + $('#chat').on('mouseover', function(e) { + mapEventsDisabled = true; + map.dragging.disable(); + map.doubleClickZoom.disable(); + map.scrollWheelZoom.disable(); + }); + + $('#chat').on('mouseout', function(e) { + mapEventsDisabled = false; + map.dragging.enable(); + map.doubleClickZoom.enable(); + map.scrollWheelZoom.enable(); }); }); diff --git a/style.css b/style.css index 34dc05f..e498402 100644 --- a/style.css +++ b/style.css @@ -249,9 +249,10 @@ noscript a { /* height: 190px; */ width: 60px; z-index: 1001; + transition: transform 0.3s ease-in-out; } -button:not(.searchbutton) { +button.round:not(.searchbutton) { background: #eff7ee none repeat scroll 0 0; border: 2px solid #217B86; border-radius: 100px; @@ -268,7 +269,7 @@ button:not(.searchbutton) { text-align: left; } -button:not(.searchbutton):before { +button.round:not(.searchbutton):before { content: " "; display: block; background: #eff7ee; @@ -283,7 +284,7 @@ button:not(.searchbutton):before { opacity: 0.6; } -button:active, button:active:before { +button.round:active, button:active:before { background: #BAEAAE; } @@ -308,7 +309,7 @@ button.notifications img { /* <----------------- NEW! */ margin-left: 8px; } -button.close, button#applyfilter{ +button.round.close, button#applyfilter{ margin-top: 15px; text-align: center; font-size: 17px; @@ -318,22 +319,22 @@ button.close, button#applyfilter{ margin-bottom: 0px; } -button.close:before, button#applyfilter:before { +button.round.close:before, button#applyfilter:before { width: 40px; height: 40px; } -button.scan { +button.round.scan { height: 70px; width: 70px; } -button.scan:before { +button.round.scan:before { height: 80px; width: 80px; } -button.scan img { +button.round.scan img { width: 32px; height: 32px; margin-left: 17px; @@ -573,3 +574,9 @@ input[type='checkbox']:checked { .filteritem label { vertical-align: middle; } +#chat.slide-in { + transform: translateX(0px); +} +.right.slide-in { + transform: translateX(-400px); +} From 5813d8f6c72389369e788ebcad9b08014ab1283b Mon Sep 17 00:00:00 2001 From: Sam Date: Wed, 16 Nov 2016 03:42:02 -0800 Subject: [PATCH 3/4] optimize layout for mobile browsers --- index.html | 3 ++- script.js | 6 +++++- style.css | 6 ------ 3 files changed, 7 insertions(+), 8 deletions(-) diff --git a/index.html b/index.html index 93b0dca..639ebd1 100644 --- a/index.html +++ b/index.html @@ -89,9 +89,10 @@

    NEARBY

    -
    +
    +

    Search

    Find your location

    diff --git a/script.js b/script.js index 6883c76..576c608 100644 --- a/script.js +++ b/script.js @@ -650,10 +650,14 @@ $(function() { height: $(window).height() }); + let $animated = $('#chat,.right,.slicknav_menu,.adroom,#map'); + $('#openChat').on('click', function() { - $('#chat,.right').toggleClass('slide-in'); + $animated.toggleClass('slide-in'); }); + $animated.addClass('animated'); + $('#chat').on('mouseover', function(e) { mapEventsDisabled = true; map.dragging.disable(); diff --git a/style.css b/style.css index e498402..7a0f9aa 100644 --- a/style.css +++ b/style.css @@ -574,9 +574,3 @@ input[type='checkbox']:checked { .filteritem label { vertical-align: middle; } -#chat.slide-in { - transform: translateX(0px); -} -.right.slide-in { - transform: translateX(-400px); -} From 8fe15e88e7211f33aa0cb910a0c53d2306301682 Mon Sep 17 00:00:00 2001 From: Sam Date: Fri, 18 Nov 2016 07:08:01 -0800 Subject: [PATCH 4/4] handle quirks in various mobile browsers --- index.html | 2 +- script.js | 26 ++++++++++++++++++++++++-- 2 files changed, 25 insertions(+), 3 deletions(-) diff --git a/index.html b/index.html index 639ebd1..f2147f1 100644 --- a/index.html +++ b/index.html @@ -5,7 +5,7 @@ FastPokeMap - Gotta Track'em All - + diff --git a/script.js b/script.js index 576c608..380e47f 100644 --- a/script.js +++ b/script.js @@ -653,19 +653,41 @@ $(function() { let $animated = $('#chat,.right,.slicknav_menu,.adroom,#map'); $('#openChat').on('click', function() { + $('html,body,#map,#chat').toggleClass('no-scroll'); $animated.toggleClass('slide-in'); }); $animated.addClass('animated'); - $('#chat').on('mouseover', function(e) { + $('#chat').on('mouseover touchstart', function(e) { mapEventsDisabled = true; map.dragging.disable(); map.doubleClickZoom.disable(); map.scrollWheelZoom.disable(); }); - $('#chat').on('mouseout', function(e) { + $(document.body).on('focusin', '.conversation textarea, .conversation input', function(e) { + $('#chat').addClass('with-keyboard'); + document.body.scrollTop = 0; + setTimeout(() => { + $('.message-area').animate({ scrollTop: $('.message-area')[0].scrollHeight }); + }, 100); + + }); + + // tag chrome on iOS so we can target specific media query + if(/CriOS/i.test(navigator.userAgent) && /iphone|ipod|ipad/i.test(navigator.userAgent)) { + $('body').addClass('chrome-ios'); + } + if(/Android/i.test(navigator.userAgent)) { + $('body').addClass('chrome-android'); + } + + $(document.body).on('focusout', "textarea, input", function(e) { + $('#chat').removeClass('with-keyboard'); + }); + + $('#chat').on('mouseout touchend', function(e) { mapEventsDisabled = false; map.dragging.enable(); map.doubleClickZoom.enable();