search

lcvriend / wc-multi-selector

Web component that lets a user select multiple options from an arbitrarily nestable hierarchy within a drop-down menu
GNU General Public License v3.0
1 stars 0 forks source link

Possibility to translate default text using options #3

Closed itajackass closed 8 months ago

itajackass commented 8 months ago

Hi, if you can, i'd like to suggest new options for translating default strings without editing the code (i'm italian). I suggest option to replace default text string for:

Thanks

lcvriend commented 8 months ago

Are you hosting the js for the component yourself? If so, you can look for the MultiSelector class and change these settings:

  settings = {
      labels: {
          all: "All items",
          selection: "Filtered items",
          placeholder_search: "Search...",
      },
      titles: {
          unfold_groups: "unfold groups: ctrl-]",
          fold_groups: "fold groups: ctrl-[",
          show_selected: "show selected: ctrl-\\",
          clear_filter: "clear filter",
      }
  }
itajackass commented 8 months ago

Yes. But on next plugin update I've to remember to re-edit the code.

Any chance to have a initilization like this?

 <multi-selector
      src="data/countries.json"
      labels_all="All items" labels_selection="Filtered items" ...... titles_unfold_groups="..." .....
      name="countries">
 </multi-selector>
 <script src="src/wc-multi-selector.js"></script>

Or a solution like this?

  <multi-selector
      id="my-multi-selector"
      src="data/countries.json"
      name="countries">
 </multi-selector>
 <script src="src/wc-multi-selector.js"></script>
 <script>
 $(document).ready(function(){
      $("#my-multi-selector").wcmultiselector({
            labels: {
               all: "All items",
               selection: "...",
               ....
            }
      }); 
  });
 </script>
lcvriend commented 8 months ago

Could something like this work for you:

<html>
<body>
    <multi-selector-dutch name="kleuren">
        <option>Rood</option>
        <option>Geel</option>
        <option>Groen</option>
        <option>Blauw</option>
    </multi-selector-dutch>
</body>
<script src="../src/wc-multi-selector.js"></script>
<script>
    class MultiSelectorDutch extends MultiSelector {
        settings = {
            "labels": {
                all: "Alle items",
                selection: "Geselecteerde items",
                placeholder_search: "Zoeken..."
            },
            titles: {
                unfold_groups: "groepen openvouwen: ctrl-]",
                fold_groups: "groepen dichtklappen: ctrl-[",
                show_selected: "toon geselecteerde items: ctrl-\\",
                clear_filter: "zoekopdracht leegmaken",
            }
        }
    }
    window.customElements.define('multi-selector-dutch', MultiSelectorDutch)
</script>
</html>
itajackass commented 8 months ago

Hi thanks it works great! All is ok! Only one question: is it possible to keep the element tag-name"multi-selector name=kleuren" instead "multi-selector-dutch name=kleuren"?

because i have created some custom css based on multi-selector tag that I use in differents pages.

I tried to keep "multi-selector" and rewrite window.customElements.define('multi-selector-dutch', MultiSelectorDutch) to window.customElements.define('multi-selector', MultiSelectorDutch) but it doesn't work.

If it is not possible no problem... i'll update my css adding different multi-selector-xxx

lcvriend commented 8 months ago

I made a change so that you can now use your own translations by setting multiSelectorSettings before loading the web component:

<html>
<body>
    <multi-selector name="kleuren">
        <option>Red</option>
        <option>Yellow</option>
        <option>Green</option>
        <option>Blue</option>
    </multi-selector>
</body>
<script>
    window.multiSelectorSettings = {
        labels: {
            all: "Alle items",
            selection: "Geselecteerde items",
            placeholder_search: "Zoeken..."
        },
        titles: {
            unfold_groups: "groepen openvouwen: ctrl-]",
            fold_groups: "groepen dichtklappen: ctrl-[",
            show_selected: "toon geselecteerde items: ctrl-\\",
            clear_filter: "zoekopdracht leegmaken",
        }
    }
</script>
<script src="src/wc-multi-selector.js"></script>
</html>
itajackass commented 8 months ago

Perfect thanks