Custom complex HTML code in the Discourse Header

Support
1

Hey Discourse Community!

Finally I have more time and working on a big revamp of my Dark Theme in combination with a Dark/Light Switcher, which become a bit popular.

This time I wanted to utilize the Discourse Header and found couple of great examples how to add links in there.

However, my question is, how well can I utilize this “helper.h” function with other HTML code than an <a> tag?

I want this for example in the Discourse Header:

<div class="toggle_switch">
  <input type="checkbox" class="switch_3">
   <svg class="checkbox" xmlns="http://www.w3.org/2000/svg" style="isolation:isolate" viewBox="0 0 168 80">
      <path class="outer-ring" d="M41.534 9h88.932c17.51 0 31.724 13.658 31.724 30.482 0 16.823-14.215 30.48-31.724 30.48H41.534c-17.51 0-31.724-13.657-31.724-30.48C9.81 22.658 24.025 9 41.534 9z" fill="none" stroke="#233043" stroke-width="3" stroke-linecap="square" stroke-miterlimit="3"/>
      <path class="is_checked" d="M17 39.482c0-12.694 10.306-23 23-23s23 10.306 23 23-10.306 23-23 23-23-10.306-23-23z"/>
      <path class="is_unchecked" d="M132.77 22.348c7.705 10.695 5.286 25.617-5.417 33.327-2.567 1.85-5.38 3.116-8.288 3.812 7.977 5.03 18.54 5.024 26.668-.83 10.695-7.706 13.122-22.634 5.418-33.33-5.855-8.127-15.88-11.474-25.04-9.23 2.538 1.582 4.806 3.676 6.66 6.25z"/>
   </svg>
</div>

So I tried something like this

api.decorateWidget('header-buttons:before', helper => {
    const showExtraInfo = helper.attrs.topic;
    
    if(!showExtraInfo) {

        return helper.h('div.toggle_switch', [
            helper.h('input.switch_3', [
                type:'checkbox'
            ]),
            helper.h('svg.checkbox', [
                xmlns:'http://www.w3.org/2000/svg',
                style:'isolation:isolate',
                viewBox:'0 0 168 80',
                helper.h('path.outer-ring', {
                    d:'M41.534 9h88.932c17.51 0 31.724 13.658 31.724 30.482 0 16.823-14.215 30.48-31.724 30.48H41.534c-17.51 0-31.724-13.657-31.724-30.48C9.81 22.658 24.025 9 41.534 9z', 
                    fill:'none',
                    stroke:'#233043',
                    stroke-width:'3',
                    stroke-linecap:'square',
                    stroke-miterlimit:'3'
                }),
                helper.h('path.is_checked', {
                    d:'M17 39.482c0-12.694 10.306-23 23-23s23 10.306 23 23-10.306 23-23 23-23-10.306-23-23z'
                }),
                helper.h('path.is_unchecked', {
                    d:'M132.77 22.348c7.705 10.695 5.286 25.617-5.417 33.327-2.567 1.85-5.38 3.116-8.288 3.812 7.977 5.03 18.54 5.024 26.668-.83 10.695-7.706 13.122-22.634 5.418-33.33-5.855-8.127-15.88-11.474-25.04-9.23 2.538 1.582 4.806 3.676 6.66 6.25z' 
                })
            ])
        ]);

    }
});

But I get an error on the “d:‘xxx’” part I think.

image

TL;DR: Is the helper.h function only accepting stuff like inputs and <a> tags or how can I cascade more complex HTML tags?

Any help is appreciated! :slight_smile:

2

After a lot of search crawling I found the solution. Thanks to @vinothkannans :slight_smile:
That post helped me!

Somehow the svg didn’t work overall, but I just used a less hipster variant of a checkbox switch :wink:

Check out the totally revamped Alien Theme here:

3 Likes
3

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.