Clickable phone number BBCode

Started by jernatety, May 17, 2018, 09:17:51 AM

Previous topic - Next topic

jernatety

Hi, thank you for the mod. Works great.

Hoping you can help with a formatting issue. I want to use my custom bbcode to wrap tags around phone numbers. However, I need to use (if possible) masking characters in the bbc html, because by default when the phone numbers are tagged, they all automatically change to the phone number in the BBC Html
<a href="tel:+1-555-555-5555">+1 (555) 555-5555</a>
I obviously can't have that because the phone number in the post has to remain the same but clickable on phones.

Any help is appreciated in order to format the HTML bbc so that it works properly.

Thanks in advance!

Chen Zhen




As far as I know the phone number in the href should be void of any hyphens.
What is displayed is up to you but the link should be void of those.
Also the only way I know to have proper behavior on both mobile & desktop is to invoke a Skype output with callto.
This will have it attempt to use skype on a desktop and on mobile it will ask the user if they want Skype or cell call.

proper cell:
<a href="tel://+15555555555">+1 (555) 555-5555</a>


invoke skype/cell:
<a href="callto://15555555555">+1 (555) 555-5555</a>

Chen Zhen

I was just thinking that another option may be to use jQuery/javascript to determine if the user's browser is mobile or not.
That way you can have it auto pick whether to use callto or tel.

Also desktop Gmail has a built in phone but without testing I am not sure if tel invokes it automatically.
On Chrome it may do so because that is developed by Google but perhaps not on other desktop browsers.

jernatety

Quote from: Chen Zhen on May 18, 2018, 09:04:00 AMAs far as I know the phone number in the href should be void of any hyphens.
What is displayed is up to you but the link should be void of those.
Also the only way I know to have proper behavior on both mobile & desktop is to invoke a Skype output with callto.
This will have it attempt to use skype on a desktop and on mobile it will ask the user if they want Skype or cell call.

proper cell:
<a href="tel://+15555555555">+1 (555) 555-5555</a>


invoke skype/cell:
<a href="callto://15555555555">+1 (555) 555-5555</a>

Ok, the problem is the output after the BBCode translates the phone number. It changes every phone number to +1 (555) 555-5555. If I wrap the phone number 18002335874 in the bbcode tags, after I click submit on the post the phone number changes to +1 (555) 555-5555. I think the bbc HTML needs masking characters so it knows not to change the phone number that is being embedded.

Chen Zhen

May 19, 2018, 12:40:40 AM #4 Last Edit: May 19, 2018, 01:09:45 AM by Chen Zhen
I'm not exactly sure how you are opting to filter the phone number for display.
Here is an example that you can mess around with to have it behave somewhat as you wish.

type: [tag]{content}[/tag]
parsing: {content} only

<script type="text/javascript">
var tel_id = Math.random().toString(36).replace(/[^a-z]+/g, '').substr(2, 10);
document.write('<div style="display: inline;" id="' + tel_id + '"></div>');
var link = document.createElement("a");
var tel_number1 = "{content}";
var tel_number2 = tel_number1;
var view_filter = /^((\+\d{1,3}(-| )?\(?\d\)?(-| )?\d{1,3})|(\(?\d{2,3}\)?))(-| )?(\d{3,4})(-| )?(\d{4})(( x| ext)\d{1,5}){0,1}$/g;
var tel_filter = /\D/g;
var tel_type = "tel://";
link.textContent = tel_number1.replace(view_filter, "");
link.href = tel_type + tel_number2.replace(tel_filter, "");
document.getElementById(tel_id).appendChild(link);
</script>

The regex in these variables can be altered:
view_filter -> what is displayed to members
tel_filter -> the number used in the clickable link

the type of call can also be altered:
tel_type -> ie. use "callto://" or "tel://"

If you are not familiar with (javascript) regex, simply search the internet for "javascript filter phone number" and it will show you many links that contain regex examples. stack overflow & site point are good resources for regex examples.

jernatety

Quote from: Chen Zhen on May 19, 2018, 12:40:40 AMI'm not exactly sure how you are opting to filter the phone number for display.
Here is an example that you can mess around with to have it behave somewhat as you wish.

type: [tag]{content}[/tag]
parsing: {content} only

<script type="text/javascript">
var tel_id = Math.random().toString(36).replace(/[^a-z]+/g, '').substr(2, 10);
document.write('<div style="display: inline;" id="' + tel_id + '"></div>');
var link = document.createElement("a");
var tel_number1 = "{content}";
var tel_number2 = tel_number1;
var view_filter = /^((\+\d{1,3}(-| )?\(?\d\)?(-| )?\d{1,3})|(\(?\d{2,3}\)?))(-| )?(\d{3,4})(-| )?(\d{4})(( x| ext)\d{1,5}){0,1}$/g;
var tel_filter = /\D/g;
var tel_type = "tel://";
link.textContent = tel_number1.replace(view_filter, "");
link.href = tel_type + tel_number2.replace(tel_filter, "");
document.getElementById(tel_id).appendChild(link);
</script>

The regex in these variables can be altered:
view_filter -> what is displayed to members
tel_filter -> the number used in the clickable link

the type of call can also be altered:
tel_type -> ie. use "callto://" or "tel://"

If you are not familiar with (javascript) regex, simply search the internet for "javascript filter phone number" and it will show you many links that contain regex examples. stack overflow & site point are good resources for regex examples.

I put that script in the BBC html field and followed the other setting but nothing shows up when test is clicked.

Chen Zhen


At the moment javascript will not work for testing on that admin page.
You will have to test it by posting content perhaps in a board only admins can see or maybe the recycle bin if you have that enabled.
Remember that the post must also contain text other than the single bbcode.

ie.
Quotetesting...
[tel]+1(555)-555-5555[/tel]

jernatety

Ok, I saved it. I went to my board and put the [phone][/phone] tags around a phone number and saved. The phone number disappears.

Chen Zhen

May 20, 2018, 02:20:34 PM #8 Last Edit: May 20, 2018, 02:24:00 PM by Chen Zhen
Make sure parsing is set to content only.
[attach name=phone-bbcode-settings.png type=image/png]249[/attach]

jernatety

Yup, that's what I have. When I put the tags around a phone number in a post, the phone number disappears.

Chen Zhen

May 20, 2018, 02:49:03 PM #10 Last Edit: May 20, 2018, 02:52:50 PM by Chen Zhen
Here is a test of entering 1-555-555-5555 in the discussed bbcode:

Phone: [phone]1(555)555-5555[/phone]

above is entered as:
Here is a test of entering 1-555-555-5555 in the discussed bbcode:

Phone: [phone]1(555)555-5555[/phone]

It works for me locally & live on this site.

.. I also tested this on my mobile using chrome browser.

jernatety

May 20, 2018, 02:55:23 PM #11 Last Edit: May 20, 2018, 03:13:10 PM by Chen Zhen Reason: changed phone number to 555 example
Quote from: Chen Zhen on May 20, 2018, 02:49:03 PMHere is a test of entering 1-555-555-5555 in the discussed bbcode:

Phone: [phone]1(555)555-5555[/phone]

above is entered as:
Here is a test of entering 1-555-555-5555 in the discussed bbcode:

Phone: [phone]1(555)555-5555[/phone]

It works for me locally & live on this site.

.. I also tested this on my mobile using chrome browser.

Ok, it works now. My number was (555)555-5555. I changed it to 1-555-555-5555 and put the tags on and it works now. GREAT! Thanks for your help and great mod.

Chen Zhen

You're welcome.

If it isn't working unless the 1 is entered then it is an improper regex command.
I didn't thoroughly test the regex I gave you but I did give you the info you need to find other regex examples.
You'll just need to try other regex until you get the behavior you want.

var view_filter = /^((\+\d{1,3}(-| )?\(?\d\)?(-| )?\d{1,3})|(\(?\d{2,3}\)?))(-| )?(\d{3,4})(-| )?(\d{4})(( x| ext)\d{1,5}){0,1}$/g;
var tel_filter = /\D/g;

Chen Zhen

Note: The forementioned bbcode has been disabled and was only used at the time as an example.

jernatety

Quote from: Chen Zhen on May 20, 2018, 03:10:11 PMNote: The forementioned bbcode has been disabled and was only used at the time as a

Do you mean on your site?