om-mediaworks / bcp47-picker Goto Github PK

View Code? Open in Web Editor NEW

3.0 1.0 1.0 13.07 MB

A pluggable BCP47 picker

Home Page: http://bcp47.mediaworks.global/

License: MIT License

TypeScript 92.74% CSS 7.26%

bcp47 language rdf

bcp47-picker's Introduction

BCP47 Language picker

A language picker which uses the BCP47. It uses the following standards: iso-3166, iso-639, iso-15924 and the un-m49. With this language picker you are sure you are using the right language codes for each specific language. It is even possible to add your own private use language codes such as the ROLV.

The widget uses Bootstrap for styles. If you do not likes this you have the ability to override the CSS classes and provide styles yourself.

You must make sure the CSS of Bootstrap is loaded by yourself.

Demo

Install

npm install bcp47-picker

Details

Datasets (it is possible to use totally different ones):

Core datasets and specs:

wooorm/bcp-47 — parse and stringify BCP 47 language tags
wooorm/iso-3166 — ISO 3166 codes
wooorm/iso-639-2 — ISO 639-2 codes
wooorm/iso-639-3 — ISO 639-3 codes
wooorm/iso-15924 — ISO 15924 codes
wooorm/un-m49 — UN M49 codes

Screenshots

bcp47-picker's People

Contributors

Stargazers

Watchers

Forkers

fonsp

bcp47-picker's Issues

npi for Nepali is missing

The code npi is missing. It might be that it is wrongly normalized away.

The normlization is done by https://github.com/wooorm/bcp-47-normalize but our implementation might also be faulty.

Add bcp47 registry hints to the options

The BCP47 registry has extra information for some language codes. This information states if the language is a macro code or not. Please incorporate this information so that users can make a better decision when choosing a language tag.

Removing language from other picker causes infinite loop

On the demo site https://bcp47.mediaworks.global/, removing the language from the first picker, while the second picker is in focus, creates an infinite loop that crashes the tab (stuck at 100% CPU). Might be related to #8.

Schermopname.2023-11-20.om.12.45.20.mov

Drupal widget

Implement a Drupal field widget so that Drupal users easily can select correct language codes.

Contact me (@danielbeeke) for publishing the module on drupal.org.

See:

https://www.drupal.org/docs/creating-custom-modules/creating-custom-field-types-widgets-and-formatters/create-a-custom-field-widget

Define as a form-associated custom element

Hey! A small enhancement would be to define the bcp47 element as a "form-associated custom element".

https://web.dev/articles/more-capable-form-controls#defining_a_form-associated_custom_element

This would allow for features including:

Clicking a <label> element can focus the bcp47 picker
A bcp47 picker included in a <form> will automatically be included in the form data
A bcp47 picker included in a <form> can be reset when the form is reset

Improve documentation

Why would an organization use this widget?
How can it help in the media landscape if we all have correct langcodes?

Document bootstrap dependency

Hey! Thanks for your work!

It might be nice to document that users should load bootstrap.css on their page for bcp47-picker to display correctly. (For our use case, it would be really nice to be able to use the component without having to load bootstrap globally, but we might be able to work around it.)

Cannot remove both languages from `multiple` picker

Hey! Really excited to use the BCP47 picker in our project!

I noticed that you cannot remove both languages from the multiple demo picker on https://bcp47.mediaworks.global/

Schermopname.2023-11-20.om.12.48.24.mov

Add a build that is fully compiled so it can be used via CDN

Cannot blur by clicking outside the picker

Hey! I love the BCP47 picker, super nice!

I noticed that you cannot blur the component by clicking outside of it, like you would expect from an <input> component.

Schermopname.2023-11-20.om.12.43.50.mov

WordPress widget

How can we integrate with WordPress? Are you a WordPress developer, please let us know how we can integrate this language picker into the WordPress in a way that makes it accessible to most WordPress users.