From ee3f05243a189e04db72f056b7f3b101a1d36c42 Mon Sep 17 00:00:00 2001 From: vedatakd Date: Tue, 25 Feb 2020 12:05:17 +0300 Subject: [PATCH] add mask for all phone fields --- .../resources/js/jquery.maskedinput.js | 182 ++++++++++++++++++ .../base-theme/resources/js/phonefield.js | 21 +- .../addons/anomaly/users-module/register.twig | 1 + .../resources/views/partials/assets.twig | 1 + .../resources/assets/js/address.js | 31 +++ .../resources/assets/js/profile.js | 96 +++------ .../resources/views/address/create.twig | 5 + .../resources/views/address/edit.twig | 4 + .../resources/views/profile/detail.twig | 4 + .../Http/Controller/MyProfileController.php | 9 +- .../Profile/Profile/ProfileFormHandler.php | 6 +- .../Register2/Register2FormHandler.php | 4 +- 12 files changed, 284 insertions(+), 80 deletions(-) create mode 100644 addons/default/visiosoft/base-theme/resources/js/jquery.maskedinput.js create mode 100644 addons/default/visiosoft/profile-module/resources/assets/js/address.js diff --git a/addons/default/visiosoft/base-theme/resources/js/jquery.maskedinput.js b/addons/default/visiosoft/base-theme/resources/js/jquery.maskedinput.js new file mode 100644 index 000000000..4ac3cfc5f --- /dev/null +++ b/addons/default/visiosoft/base-theme/resources/js/jquery.maskedinput.js @@ -0,0 +1,182 @@ +/* + jQuery Masked Input Plugin + Copyright (c) 2007 - 2015 Josh Bush (digitalbush.com) + Licensed under the MIT license (http://digitalbush.com/projects/masked-input-plugin/#license) + Version: 1.4.1 +*/ +!function(factory) { + "function" == typeof define && define.amd ? define([ "jquery" ], factory) : factory("object" == typeof exports ? require("jquery") : jQuery); +}(function($) { + var caretTimeoutId, ua = navigator.userAgent, iPhone = /iphone/i.test(ua), chrome = /chrome/i.test(ua), android = /android/i.test(ua); + $.mask = { + definitions: { + "9": "[0-9]", + a: "[A-Za-z]", + "*": "[A-Za-z0-9]" + }, + autoclear: !0, + dataName: "rawMaskFn", + placeholder: "_" + }, $.fn.extend({ + caret: function(begin, end) { + var range; + if (0 !== this.length && !this.is(":hidden")) return "number" == typeof begin ? (end = "number" == typeof end ? end : begin, + this.each(function() { + this.setSelectionRange ? this.setSelectionRange(begin, end) : this.createTextRange && (range = this.createTextRange(), + range.collapse(!0), range.moveEnd("character", end), range.moveStart("character", begin), + range.select()); + })) : (this[0].setSelectionRange ? (begin = this[0].selectionStart, end = this[0].selectionEnd) : document.selection && document.selection.createRange && (range = document.selection.createRange(), + begin = 0 - range.duplicate().moveStart("character", -1e5), end = begin + range.text.length), + { + begin: begin, + end: end + }); + }, + unmask: function() { + return this.trigger("unmask"); + }, + mask: function(mask, settings) { + var input, defs, tests, partialPosition, firstNonMaskPos, lastRequiredNonMaskPos, len, oldVal; + if (!mask && this.length > 0) { + input = $(this[0]); + var fn = input.data($.mask.dataName); + return fn ? fn() : void 0; + } + return settings = $.extend({ + autoclear: $.mask.autoclear, + placeholder: $.mask.placeholder, + completed: null + }, settings), defs = $.mask.definitions, tests = [], partialPosition = len = mask.length, + firstNonMaskPos = null, $.each(mask.split(""), function(i, c) { + "?" == c ? (len--, partialPosition = i) : defs[c] ? (tests.push(new RegExp(defs[c])), + null === firstNonMaskPos && (firstNonMaskPos = tests.length - 1), partialPosition > i && (lastRequiredNonMaskPos = tests.length - 1)) : tests.push(null); + }), this.trigger("unmask").each(function() { + function tryFireCompleted() { + if (settings.completed) { + for (var i = firstNonMaskPos; lastRequiredNonMaskPos >= i; i++) if (tests[i] && buffer[i] === getPlaceholder(i)) return; + settings.completed.call(input); + } + } + function getPlaceholder(i) { + return settings.placeholder.charAt(i < settings.placeholder.length ? i : 0); + } + function seekNext(pos) { + for (;++pos < len && !tests[pos]; ) ; + return pos; + } + function seekPrev(pos) { + for (;--pos >= 0 && !tests[pos]; ) ; + return pos; + } + function shiftL(begin, end) { + var i, j; + if (!(0 > begin)) { + for (i = begin, j = seekNext(end); len > i; i++) if (tests[i]) { + if (!(len > j && tests[i].test(buffer[j]))) break; + buffer[i] = buffer[j], buffer[j] = getPlaceholder(j), j = seekNext(j); + } + writeBuffer(), input.caret(Math.max(firstNonMaskPos, begin)); + } + } + function shiftR(pos) { + var i, c, j, t; + for (i = pos, c = getPlaceholder(pos); len > i; i++) if (tests[i]) { + if (j = seekNext(i), t = buffer[i], buffer[i] = c, !(len > j && tests[j].test(t))) break; + c = t; + } + } + function androidInputEvent() { + var curVal = input.val(), pos = input.caret(); + if (oldVal && oldVal.length && oldVal.length > curVal.length) { + for (checkVal(!0); pos.begin > 0 && !tests[pos.begin - 1]; ) pos.begin--; + if (0 === pos.begin) for (;pos.begin < firstNonMaskPos && !tests[pos.begin]; ) pos.begin++; + input.caret(pos.begin, pos.begin); + } else { + for (checkVal(!0); pos.begin < len && !tests[pos.begin]; ) pos.begin++; + input.caret(pos.begin, pos.begin); + } + tryFireCompleted(); + } + function blurEvent() { + checkVal(), input.val() != focusText && input.change(); + } + function keydownEvent(e) { + if (!input.prop("readonly")) { + var pos, begin, end, k = e.which || e.keyCode; + oldVal = input.val(), 8 === k || 46 === k || iPhone && 127 === k ? (pos = input.caret(), + begin = pos.begin, end = pos.end, end - begin === 0 && (begin = 46 !== k ? seekPrev(begin) : end = seekNext(begin - 1), + end = 46 === k ? seekNext(end) : end), clearBuffer(begin, end), shiftL(begin, end - 1), + e.preventDefault()) : 13 === k ? blurEvent.call(this, e) : 27 === k && (input.val(focusText), + input.caret(0, checkVal()), e.preventDefault()); + } + } + function keypressEvent(e) { + if (!input.prop("readonly")) { + var p, c, next, k = e.which || e.keyCode, pos = input.caret(); + if (!(e.ctrlKey || e.altKey || e.metaKey || 32 > k) && k && 13 !== k) { + if (pos.end - pos.begin !== 0 && (clearBuffer(pos.begin, pos.end), shiftL(pos.begin, pos.end - 1)), + p = seekNext(pos.begin - 1), len > p && (c = String.fromCharCode(k), tests[p].test(c))) { + if (shiftR(p), buffer[p] = c, writeBuffer(), next = seekNext(p), android) { + var proxy = function() { + $.proxy($.fn.caret, input, next)(); + }; + setTimeout(proxy, 0); + } else input.caret(next); + pos.begin <= lastRequiredNonMaskPos && tryFireCompleted(); + } + e.preventDefault(); + } + } + } + function clearBuffer(start, end) { + var i; + for (i = start; end > i && len > i; i++) tests[i] && (buffer[i] = getPlaceholder(i)); + } + function writeBuffer() { + input.val(buffer.join("")); + } + function checkVal(allow) { + var i, c, pos, test = input.val(), lastMatch = -1; + for (i = 0, pos = 0; len > i; i++) if (tests[i]) { + for (buffer[i] = getPlaceholder(i); pos++ < test.length; ) if (c = test.charAt(pos - 1), + tests[i].test(c)) { + buffer[i] = c, lastMatch = i; + break; + } + if (pos > test.length) { + clearBuffer(i + 1, len); + break; + } + } else buffer[i] === test.charAt(pos) && pos++, partialPosition > i && (lastMatch = i); + return allow ? writeBuffer() : partialPosition > lastMatch + 1 ? settings.autoclear || buffer.join("") === defaultBuffer ? (input.val() && input.val(""), + clearBuffer(0, len)) : writeBuffer() : (writeBuffer(), input.val(input.val().substring(0, lastMatch + 1))), + partialPosition ? i : firstNonMaskPos; + } + var input = $(this), buffer = $.map(mask.split(""), function(c, i) { + return "?" != c ? defs[c] ? getPlaceholder(i) : c : void 0; + }), defaultBuffer = buffer.join(""), focusText = input.val(); + input.data($.mask.dataName, function() { + return $.map(buffer, function(c, i) { + return tests[i] && c != getPlaceholder(i) ? c : null; + }).join(""); + }), input.one("unmask", function() { + input.off(".mask").removeData($.mask.dataName); + }).on("focus.mask", function() { + if (!input.prop("readonly")) { + clearTimeout(caretTimeoutId); + var pos; + focusText = input.val(), pos = checkVal(), caretTimeoutId = setTimeout(function() { + input.get(0) === document.activeElement && (writeBuffer(), pos == mask.replace("?", "").length ? input.caret(0, pos) : input.caret(pos)); + }, 10); + } + }).on("blur.mask", blurEvent).on("keydown.mask", keydownEvent).on("keypress.mask", keypressEvent).on("input.mask paste.mask", function() { + input.prop("readonly") || setTimeout(function() { + var pos = checkVal(!0); + input.caret(pos), tryFireCompleted(); + }, 0); + }), chrome && android && input.off("input.mask").on("input.mask", androidInputEvent), + checkVal(); + }); + } + }); +}); \ No newline at end of file diff --git a/addons/default/visiosoft/base-theme/resources/js/phonefield.js b/addons/default/visiosoft/base-theme/resources/js/phonefield.js index 79aee3ece..745c12e80 100644 --- a/addons/default/visiosoft/base-theme/resources/js/phonefield.js +++ b/addons/default/visiosoft/base-theme/resources/js/phonefield.js @@ -1,9 +1,9 @@ // Personal Registration -var inputQueries = document.querySelectorAll("input[name=\"phone\"]"); +var inputQueries = document.querySelectorAll("input[name=\"phone\"],input[name='land_phone']"); inputQueries.forEach(function (inputQuery, key) { var iti = intlTelInput(inputQuery, { - hiddenInput: "full_phone", - class:"form-control", + hiddenInput: "full_phone_"+inputQuery.getAttribute('name'), + class: "form-control", initialCountry: "auto", geoIpLookup: function (success, failure) { $.get("https://ipinfo.io", function () { @@ -13,4 +13,17 @@ inputQueries.forEach(function (inputQuery, key) { }) } }) -}); \ No newline at end of file +}); + +$("input[name='phone'],input[name='land_phone']").on('countrychange', function (e) { + maskPhone($(this).attr('name')) +}); + +function maskPhone(name) { + var currentMask = $("input[name='" + name + "']").attr('placeholder'); + $("input[name='" + name + "']").mask(currentMask.replace(/[0-9+]/ig, '9'), { + autoclear: true, + clearIncomplete: true + }); + +} \ No newline at end of file diff --git a/addons/default/visiosoft/base-theme/resources/views/addons/anomaly/users-module/register.twig b/addons/default/visiosoft/base-theme/resources/views/addons/anomaly/users-module/register.twig index b5af2e2a7..3730a907e 100644 --- a/addons/default/visiosoft/base-theme/resources/views/addons/anomaly/users-module/register.twig +++ b/addons/default/visiosoft/base-theme/resources/views/addons/anomaly/users-module/register.twig @@ -78,5 +78,6 @@ {{ asset_add("styles.css", "visiosoft.theme.base::css/intlTelInput.css") }} {{ asset_add("styles.css", "visiosoft.theme.base::css/register.css") }} + {% endblock %} diff --git a/addons/default/visiosoft/base-theme/resources/views/partials/assets.twig b/addons/default/visiosoft/base-theme/resources/views/partials/assets.twig index 974c67e87..c605ff936 100644 --- a/addons/default/visiosoft/base-theme/resources/views/partials/assets.twig +++ b/addons/default/visiosoft/base-theme/resources/views/partials/assets.twig @@ -8,6 +8,7 @@ {{ asset_add("theme.js", "theme::js/modal_include.js") }} {{ asset_add("theme.js", "theme::js/select2.js") }} {{ asset_add("theme.js", "theme::js/params.js") }} +{{ asset_add("theme.js", "theme::js/jquery.maskedinput.js") }} {# Theme Scripts #} {#{{ asset_add("theme.js", "theme::js/plugins/*") }}#} diff --git a/addons/default/visiosoft/profile-module/resources/assets/js/address.js b/addons/default/visiosoft/profile-module/resources/assets/js/address.js new file mode 100644 index 000000000..9e5bef73c --- /dev/null +++ b/addons/default/visiosoft/profile-module/resources/assets/js/address.js @@ -0,0 +1,31 @@ +// Personal Registration +var inputQueries = document.querySelectorAll("input[name='adress_gsm_phone']"); +inputQueries.forEach(function (inputQuery, key) { + var iti = intlTelInput(inputQuery, { + hiddenInput: "full_phone_"+inputQuery.getAttribute('name'), + class: "form-control", + initialCountry: "auto", + geoIpLookup: function (success, failure) { + $.get("https://ipinfo.io", function () { + }, "jsonp").always(function (resp) { + var countryCode = (resp && resp.country) ? resp.country : ""; + success(countryCode); + }) + } + }) +}); + +maskPhone() + +$("input[name='adress_gsm_phone']").on('countrychange', function (e) { + maskPhone() +}); + +function maskPhone(name) { + var currentMask = $("input[name='adress_gsm_phone']").attr('placeholder'); + $("input[name='adress_gsm_phone']").mask(currentMask.replace(/[0-9+]/ig, '9'), { + autoclear: true, + clearIncomplete: true + }); + +} \ No newline at end of file diff --git a/addons/default/visiosoft/profile-module/resources/assets/js/profile.js b/addons/default/visiosoft/profile-module/resources/assets/js/profile.js index c4294e087..5a4f7c04f 100644 --- a/addons/default/visiosoft/profile-module/resources/assets/js/profile.js +++ b/addons/default/visiosoft/profile-module/resources/assets/js/profile.js @@ -1,72 +1,32 @@ -function goBack() { - window.history.back(); -} - -var defaultCSS = document.getElementById('bootstrap-css'); - -function changeCSS(css) { - if (css) $('head > link').filter(':first').replaceWith(''); - else $('head > link').filter(':first').replaceWith(defaultCSS); -} - -var ajaxVal = []; -var ControllerType; - - -var hash = window.location.hash; -if (hash != "") { - $(".user-menu").find('.active').removeClass('active'); - $(".tab-content").find('.active').removeClass('active'); - $("." + hash.substr(1)).addClass('active'); - $("#" + hash.substr(1)).addClass('active'); - if (hash.substr(1) == "myads") { - advs('advs');//ilan çağırma fonksiyonunu çalıştır - } - if (hash.substr(1) == "archived_ads") { - advs('archived'); - } - if (hash.substr(1) == "pending_ads") { - advs('pending'); - } -} -$('a[data-panel="my_adv"]').add('li[data-panel="my_adv"]').on('click', function () { - advs('advs'); +// Personal Registration +var inputQueries = document.querySelectorAll("input[name='gsm_phone'],input[name='office_phone'],input[name='land_phone']"); +inputQueries.forEach(function (inputQuery, key) { + var iti = intlTelInput(inputQuery, { + hiddenInput: "full_phone_" + inputQuery.getAttribute('name'), + class: "form-control", + initialCountry: "auto", + geoIpLookup: function (success, failure) { + $.get("https://ipinfo.io", function () { + }, "jsonp").always(function (resp) { + var countryCode = (resp && resp.country) ? resp.country : ""; + success(countryCode); + }) + } + }) }); +maskPhone('gsm_phone') +maskPhone('land_phone') +maskPhone('office_phone') +$("input[name='gsm_phone'],input[name='office_phone'],input[name='land_phone']").on('countrychange', function (e) { + maskPhone($(this).attr('name')) +}); +function maskPhone(name) { + var currentMask = $("input[name='" + name + "']").attr('placeholder'); + $("input[name='" + name + "']").mask(currentMask.replace(/[0-9+]/ig, '9'), { + autoclear: true, + clearIncomplete: true + }); - -function priceFormat(num) { - - var arr = num.split("."); - if (arr.length > 1) { - return parseInt(arr[0]).toFixed(2).replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1,').slice(0,-2)+arr[1] - } else { - return parseInt(num).toFixed(2).replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1,') - } - -} - - - -if(window.location.pathname == "/profile") -{ - $('input[name="gsm_phone"]').intlTelInput(); -} - -// $('a[data-target="#file-modal"]').on('click', function () { -// setInterval(addSubmitFileModal, 1000); -// -// }); - - -// function addSubmitFileModal() { -// $('a[data-file]').on('click', function () { -// setInterval(submitForm, 1000); -// }); -// } -// -// function submitForm() { -// $('form[data-name="profile"]').submit(); -// } - +} \ No newline at end of file diff --git a/addons/default/visiosoft/profile-module/resources/views/address/create.twig b/addons/default/visiosoft/profile-module/resources/views/address/create.twig index 3ea7e3e5f..79107e9cb 100644 --- a/addons/default/visiosoft/profile-module/resources/views/address/create.twig +++ b/addons/default/visiosoft/profile-module/resources/views/address/create.twig @@ -79,4 +79,9 @@ {{ asset_add("scripts.js", "visiosoft.module.profile::assets/js/country.js") }} + {{ asset_add("scripts.js", "visiosoft.theme.base::js/intlTelInput.min.js") }} + {{ asset_add("scripts.js", "visiosoft.theme.base::js/utils.js") }} + {{ asset_add("styles.css", "visiosoft.theme.base::css/intlTelInput.css") }} + {{ asset_add("scripts.js", "visiosoft.module.profile::assets/js/address.js") }} + {% endblock %} \ No newline at end of file diff --git a/addons/default/visiosoft/profile-module/resources/views/address/edit.twig b/addons/default/visiosoft/profile-module/resources/views/address/edit.twig index 4531b65fb..06b79512a 100644 --- a/addons/default/visiosoft/profile-module/resources/views/address/edit.twig +++ b/addons/default/visiosoft/profile-module/resources/views/address/edit.twig @@ -80,4 +80,8 @@ {{ asset_add("scripts.js", "visiosoft.module.profile::assets/js/country.js") }} + {{ asset_add("scripts.js", "visiosoft.theme.base::js/intlTelInput.min.js") }} + {{ asset_add("scripts.js", "visiosoft.theme.base::js/utils.js") }} + {{ asset_add("styles.css", "visiosoft.theme.base::css/intlTelInput.css") }} + {{ asset_add("scripts.js", "visiosoft.module.profile::assets/js/address.js") }} {% endblock %} \ No newline at end of file diff --git a/addons/default/visiosoft/profile-module/resources/views/profile/detail.twig b/addons/default/visiosoft/profile-module/resources/views/profile/detail.twig index b1c10a62d..5e96f5752 100644 --- a/addons/default/visiosoft/profile-module/resources/views/profile/detail.twig +++ b/addons/default/visiosoft/profile-module/resources/views/profile/detail.twig @@ -176,5 +176,9 @@ + {{ asset_add("scripts.js", "visiosoft.theme.base::js/intlTelInput.min.js") }} + {{ asset_add("scripts.js", "visiosoft.theme.base::js/utils.js") }} + {{ asset_add("scripts.js", "visiosoft.module.profile::assets/js/profile.js") }} + {{ asset_add("styles.css", "visiosoft.theme.base::css/intlTelInput.css") }} {{ asset_add("styles.css", "visiosoft.module.profile::assets/css/profile.css") }} {% endblock %} \ No newline at end of file diff --git a/addons/default/visiosoft/profile-module/src/Http/Controller/MyProfileController.php b/addons/default/visiosoft/profile-module/src/Http/Controller/MyProfileController.php index 21f9ae95e..4738a75ae 100644 --- a/addons/default/visiosoft/profile-module/src/Http/Controller/MyProfileController.php +++ b/addons/default/visiosoft/profile-module/src/Http/Controller/MyProfileController.php @@ -199,7 +199,8 @@ class MyProfileController extends PublicController $New_value = $request->all(); $New_value['country_id'] = $New_value['country']; - unset($New_value['_token'], $New_value['action'], $New_value['country']); + $New_value['adress_gsm_phone'] = $New_value['full_phone_adress_gsm_phone']; + unset($New_value['_token'], $New_value['action'], $New_value['country'], $New_value['full_phone_adress_gsm_phone']); $adressModel->getAdress($id)->update($New_value); $message = []; @@ -241,7 +242,8 @@ class MyProfileController extends PublicController return $message; } $new_adress = $request->request->all(); - unset($new_adress['action'], $new_adress['_token']); + $new_adress['adress_gsm_phone'] = $new_adress['full_phone_adress_gsm_phone']; + unset($new_adress['_token'], $new_adress['full_phone_adress_gsm_phone']); $new_adress['user_id'] = Auth::id(); $adressModel = new AdressModel(); @@ -264,7 +266,8 @@ class MyProfileController extends PublicController return $message; } $new_adress = $this->request->all(); - unset($new_adress['_token']); + $new_adress['adress_gsm_phone'] = $new_adress['full_phone_adress_gsm_phone']; + unset($new_adress['_token'], $new_adress['full_phone_adress_gsm_phone']); $address->update($new_adress); diff --git a/addons/default/visiosoft/profile-module/src/Profile/Profile/ProfileFormHandler.php b/addons/default/visiosoft/profile-module/src/Profile/Profile/ProfileFormHandler.php index a7a6f9b95..f1c89fa1a 100644 --- a/addons/default/visiosoft/profile-module/src/Profile/Profile/ProfileFormHandler.php +++ b/addons/default/visiosoft/profile-module/src/Profile/Profile/ProfileFormHandler.php @@ -17,9 +17,9 @@ class ProfileFormHandler } $parameters = [ - 'gsm_phone' => $builder->getPostValue('gsm_phone'), - 'office_phone' => $builder->getPostValue('office_phone'), - 'land_phone' => $builder->getPostValue('land_phone'), + 'gsm_phone' => $builder->getPostValue('full_phone_gsm_phone'), + 'office_phone' => $builder->getPostValue('full_phone_office_phone'), + 'land_phone' => $builder->getPostValue('full_phone_land_phone'), 'identification_number' => $builder->getPostValue('identification_number'), 'register_type' => $builder->getPostValue('register_type'), 'adv_listing_banner_id' => $builder->getPostValue('adv_listing_banner'), diff --git a/addons/default/visiosoft/profile-module/src/Profile/Register2/Register2FormHandler.php b/addons/default/visiosoft/profile-module/src/Profile/Register2/Register2FormHandler.php index fb12b6cbc..eb9f5c9d1 100644 --- a/addons/default/visiosoft/profile-module/src/Profile/Register2/Register2FormHandler.php +++ b/addons/default/visiosoft/profile-module/src/Profile/Register2/Register2FormHandler.php @@ -51,7 +51,7 @@ class Register2FormHandler $domain = str_replace('/', '', $domain); $domain = str_replace('www', '', $domain); - $profile_parameters['gsm_phone'] = $builder->getPostValue('full_phone'); + $profile_parameters['gsm_phone'] = $builder->getPostValue('full_phone_phone'); if (!setting_value('visiosoft.module.advs::register_email_field')) { $builder->setFormValue('email', $builder->getPostValue('username') . "@" . $domain); } @@ -59,7 +59,7 @@ class Register2FormHandler $fields = $builder->getPostData(); $fields['display_name'] = $fields['first_name'] . " " . $fields['last_name']; unset($fields['phone']); - unset($fields['full_phone']); + unset($fields['full_phone_phone']); $register = $users->create($fields);