From b68de72f86b9f42490c3c18490ffba6f742862a9 Mon Sep 17 00:00:00 2001
From: Marion Muszynski <marion@antadis.com>
Date: Fri, 20 May 2016 10:48:35 +0200
Subject: [PATCH] add postcode autocomplete for mobile

---
 themes/site_mobile/address.tpl   | 284 +++++++++++++++++++++++++++++++
 themes/site_mobile/addresses.tpl |   3 +-
 themes/site_mobile/css/style.css |  48 ++++++
 3 files changed, 334 insertions(+), 1 deletion(-)

diff --git a/themes/site_mobile/address.tpl b/themes/site_mobile/address.tpl
index ac70c3e3..f28d3723 100755
--- a/themes/site_mobile/address.tpl
+++ b/themes/site_mobile/address.tpl
@@ -284,4 +284,288 @@ $(function(){ldelim}
 		<input type="submit" name="submitAddress" id="submitAddress" value="{l s='Save'}" class="exclusive" />
 		<br class="clear"/>
 	</p>
+	<script type="text/javascript">
+	<!--{literal}
+	var ctimeout = null;
+	var ctimeout_cleared = true;
+	var creq = null;
+
+	$(document).ready(function() {
+		$("#postcode, #city").keydown(function(e) {
+			if($("#address_ac").length > 0 && (e.keyCode == 13 || e.keyCode == 38 || e.keyCode == 40)) {
+				e.preventDefault();
+				return false;
+			}
+		});
+		$("#postcode").keyup(function(e) {
+			if($("#id_country").val() == 8) {
+				switch($("#postcode").val().substring(0, 3)) {
+					case "971":
+						try {
+							creq.abort();
+						} catch(e) {}
+						$("#address_ac").remove();
+						$("#id_country").val(98);
+						$("#postcode, #city").attr("autocomplete", "on");
+						return;
+						break;
+					case "972":
+						try {
+							creq.abort();
+						} catch(e) {}
+						$("#address_ac").remove();
+						$("#id_country").val(141);
+						$("#postcode, #city").attr("autocomplete", "on");
+						return;
+						break;
+					case "973":
+						try {
+							creq.abort();
+						} catch(e) {}
+						$("#address_ac").remove();
+						$("#id_country").val(241);
+						$("#postcode, #city").attr("autocomplete", "on");
+						return;
+						break;
+					case "974":
+						try {
+							creq.abort();
+						} catch(e) {}
+						$("#address_ac").remove();
+						$("#id_country").val(176);
+						$("#postcode, #city").attr("autocomplete", "on");
+						return;
+						break;
+					case "975":
+						try {
+							creq.abort();
+						} catch(e) {}
+						$("#address_ac").remove();
+						$("#id_country").val(183);
+						$("#postcode, #city").attr("autocomplete", "on");
+						return;
+						break;
+					case "976":
+						try {
+							creq.abort();
+						} catch(e) {}
+						$("#address_ac").remove();
+						$("#id_country").val(144);
+						$("#postcode, #city").attr("autocomplete", "on");
+						return;
+						break;
+					case "987":
+						try {
+							creq.abort();
+						} catch(e) {}
+						$("#address_ac").remove();
+						$("#id_country").val(242);
+						$("#postcode, #city").attr("autocomplete", "on");
+						return;
+						break;
+					case "988":
+						try {
+							creq.abort();
+						} catch(e) {}
+						$("#address_ac").remove();
+						$("#id_country").val(158);
+						$("#postcode, #city").attr("autocomplete", "on");
+						return;
+						break;
+					case "980":
+						try {
+							creq.abort();
+						} catch(e) {}
+						$("#address_ac").remove();
+						$("#id_country").val(148);
+						$("#postcode, #city").attr("autocomplete", "on");
+						return;
+						break;
+				}
+				switch($("#postcode").val().substring(0, 2)) {
+					case "AD":
+					case "ad":
+					case "Ad":
+						try {
+							creq.abort();
+						} catch(e) {}
+						$("#address_ac").remove();
+						$("#id_country").val(40);
+						$("#postcode, #city").attr("autocomplete", "on");
+						return;
+						break;
+					case "SP":
+					case "sp":
+					case "Sp":
+					case "00":
+						try {
+							creq.abort();
+						} catch(e) {}
+						$("#address_ac").remove();
+						$("#id_country").val(245);
+						$("#postcode, #city").attr("autocomplete", "on");
+						return;
+						break;
+				}
+
+				if($("#address_ac").length > 0 && (e.keyCode == 27)) {
+					$("#address_ac").remove();
+				} else if(e.keyCode == 13) {
+					e.preventDefault();
+					if($("#address_ac .active").length > 0) {
+						$("#address_ac .active").trigger("click");
+					}
+					return false;
+				} else if($("#address_ac").length > 0 && (e.keyCode == 38 || e.keyCode == 40)) {
+					if(e.keyCode == 38) {
+						$("#address_ac .active:not(:first-child)").removeClass("active").prev().addClass("active");
+					} else {
+						if($("#address_ac .active").length > 0) {
+							$("#address_ac .active:not(:last-child)").removeClass("active").next().addClass("active");
+						} else {
+							$("#address_ac li:first-child").addClass("active");
+						}
+					}
+				} else {
+					ctimeout = setTimeout(function() {
+						try {
+							creq.abort();
+						} catch(e) {}
+						$("#address_ac").remove();
+						$("#city").val("");
+						clearTimeout(ctimeout);
+						ctimeout_cleared = true;
+						var inval = $("<div />").text($("#postcode").val()).html();
+						if(inval != "") {
+							creq = $.getJSON("{/literal}{$base_dir_ssl}{literal}check_address.php?token={/literal}{$address_ac_token}{literal}&id_country=" + parseInt($("#id_country").val()) + "&postcode=" + inval, function(result) {
+								if(result) {
+									if(result.length == 1) {
+										$("#postcode").val(result[0].postcode);
+										$("#city").val(result[0].city);
+									} else {
+										var ac = $("<ul />").attr("id", "address_ac").css({
+											position: "absolute",
+											top: $("#postcode").position().top + $("#postcode").outerHeight(),
+											left: $("#postcode").position().left
+										});
+										for(i in result) {
+											$(ac).append($("<li />")
+												.attr("data-city", result[i].city)
+												.attr("data-postcode", result[i].postcode)
+												.html((result[i].postcode + " - " + result[i].city).replace(inval, "<strong>" + inval + "</strong>"))
+												.click(function() {
+													$("#postcode").val($(this).attr("data-postcode"));
+													$("#city").val($(this).attr("data-city"));
+													$("#address_ac").remove();
+												})
+											);
+										}
+										$("#postcode").parent().after($(ac));
+									}
+								}
+							});
+						}
+					}, 300);
+					ctimeout_cleared = false;
+				}
+			}
+		});
+		$("#city").keyup(function(e) {
+			if($("#id_country").val() == 8) {
+				if($("#address_ac").length > 0 && (e.keyCode == 27)) {
+					$("#address_ac").remove();
+				} else if(e.keyCode == 13) {
+					e.preventDefault();
+					if($("#address_ac .active").length > 0) {
+						$("#address_ac .active").trigger("click");
+					}
+					return false;
+				} else if($("#address_ac").length > 0 && (e.keyCode == 38 || e.keyCode == 40)) {
+					if(e.keyCode == 38) {
+						$("#address_ac .active:not(:first-child)").removeClass("active").prev().addClass("active");
+					} else {
+						if($("#address_ac .active").length > 0) {
+							$("#address_ac .active:not(:last-child)").removeClass("active").next().addClass("active");
+						} else {
+							$("#address_ac li:first-child").addClass("active");
+						}
+					}
+				} else {
+					ctimeout = setTimeout(function() {
+						try {
+							creq.abort();
+						} catch(e) {}
+						$("#address_ac").remove();
+						$("#postcode").val("");
+						clearTimeout(ctimeout);
+						ctimeout_cleared = true;
+						var inval = $("<div />").text($("#city").val()).html();
+						if(inval != "") {
+							creq = $.getJSON("{/literal}{$base_dir_ssl}{literal}check_address.php?token={/literal}{$address_ac_token}{literal}&id_country=" + parseInt($("#id_country").val()) + "&city=" + inval, function(result) {
+								if(result) {
+									if(result.length == 1) {
+										$("#postcode").val(result[0].postcode);
+										$("#city").val(result[0].city);
+									} else {
+										var ac = $("<ul />").attr("id", "address_ac").css({
+											position: "absolute",
+											top: $("#city").position().top + $("#city").outerHeight(),
+											left: $("#city").position().left
+										});
+										for(i in result) {
+											$(ac).append($("<li />")
+												.attr("data-city", result[i].city)
+												.attr("data-postcode", result[i].postcode)
+												.html((result[i].postcode + " - " + result[i].city).replace(inval, "<strong>" + inval + "</strong>"))
+												.click(function() {
+													$("#postcode").val($(this).attr("data-postcode"));
+													$("#city").val($(this).attr("data-city"));
+													$("#address_ac").remove();
+												})
+											);
+										}
+										$("#city").parent().after($(ac));
+									}
+								}
+							});
+						}
+					}, 300);
+					ctimeout_cleared = false;
+				}
+			}
+		});
+
+		var postcodeval = $("#postcode").val();
+		setInterval(function() {
+			if($("#postcode").is(":focus") && ctimeout_cleared && $("#postcode").val() != postcodeval) {
+				$("#postcode").trigger("keyup");
+			}
+			postcodeval = $("#postcode").val();
+		}, 1000);
+
+		var cityval = $("#city").val();
+		setInterval(function() {
+			if($("#city").is(":focus") && ctimeout_cleared && $("#city").val() != cityval) {
+				$("#city").trigger("keyup");
+			}
+			cityval = $("#city").val();
+		}, 1000);
+
+		$("#id_country").change(function() {
+			$("#postcode, #city").val("");
+			if($("#id_country").val() == 8) {
+				$("#postcode, #city").attr("autocomplete", "off");
+			} else {
+				$("#postcode, #city").attr("autocomplete", "on");
+			}
+		});
+
+		if($("#id_country").val() == 8) {
+			$("#postcode, #city").attr("autocomplete", "off");
+		} else {
+			$("#postcode, #city").attr("autocomplete", "on");
+		}
+	});
+	{/literal}-->
+	</script>
 </form>
diff --git a/themes/site_mobile/addresses.tpl b/themes/site_mobile/addresses.tpl
index 8f6ef7c2..937bf500 100755
--- a/themes/site_mobile/addresses.tpl
+++ b/themes/site_mobile/addresses.tpl
@@ -132,7 +132,8 @@
 {/if}
 
 <p class="footer_links">
-	<a class="back_account" href="{$link->getPageLink('my-account.php', true)}" class="button">
+	<a href="{$link->getPageLink('address.php', true)}" title="{l s='Add an address'}" class="button_large button">{l s='Add an address'}</a>
+	<a class="back_account button" href="{$link->getPageLink('my-account.php', true)}" class="button">
 		<i class="icon-user"></i><span>{l s='Back to my account'}</span>
 	</a>	
 </p>
\ No newline at end of file
diff --git a/themes/site_mobile/css/style.css b/themes/site_mobile/css/style.css
index eae6f040..60f3a1e8 100755
--- a/themes/site_mobile/css/style.css
+++ b/themes/site_mobile/css/style.css
@@ -4477,4 +4477,52 @@ body#order table#carrierTable tbody tr td.carrier_infos span.price {
 }
 #soflexibilite_speech{
   display: none!important
+}
+
+/******** Button add address ************/
+body#addresses #center_column p.footer_links a.button{
+	border: 0;
+    display: block;
+    height: 40px;
+    line-height: 40px;
+    text-align: center;
+    padding: 0px 5%;
+    color: #f0f0f0;
+    font-size: 12px;
+    text-transform: uppercase;
+    background: #565485;
+}
+body#addresses #center_column p.footer_links a.button.back_account {
+	margin-top: 20px;
+	background: #e36ea2;
+}
+/******** Address autocomplete **********/
+#address_ac {
+    z-index: 5;
+    background: #FFF;
+    border-left: 1px solid #e4e4e4;
+    border-right: 1px solid #e4e4e4;
+    border-bottom: 1px solid #e4e4e4;
+    margin: 1px 0px 0px 0px;
+    min-width: 278px;
+    -moz-box-shadow: 2px 10px 10px -8px rgba(0, 0, 0, .5);
+    -webkit-box-shadow: 2px 10px 10px -8px rgba(0, 0, 0, .5);
+    -ms-box-shadow: 2px 10px 10px -8px rgba(0, 0, 0, .5);
+    -o-box-shadow: 2px 10px 10px -8px rgba(0, 0, 0, .5);
+    box-shadow: 2px 10px 10px -8px rgba(0, 0, 0, .5));
+    list-style: outside none;
+    overflow: auto;
+    max-height: 300px;
+}
+#address_ac li {
+    font-size: 12px;
+    line-height: 1.4em;
+    padding: 5px 20px 5px 10px;
+    cursor: pointer;
+}
+#address_ac li:hover {
+    background: #EEE;
+}
+#address_ac strong {
+    padding: 0px 1px;
 }
\ No newline at end of file