Adapt Learning Community: Customising .jsx

Hi all,

I've made a fair few custom .hbs files for components. The most common mods (which I use regularly) are the addition of a 'banner' div and a 'footer' div. We now seem to be moving towards .jsx and I have no idea how to achieve the same effect! So I was wondering if anyone out there could help.

As an example, the changes I made to the accordion component are shown below, with the attached image showing the end result. I'd be so grateful if someone more capable than I could show me how I would go about setting this up in the .jsx version!

THE .HBS FILE:

{{#if _banner}}
   <div class="accordion__banner">
       <img src="{{_banner.src}}" {{#if _banner.alt}} aria-label="{{_banner.alt}}" tabindex="0"{{else}} class="a11y-ignore" aria-hidden="true" tabindex="-1"{{/if}}/>
   </div>
   {{/if}}
   {{#if _banner.attribution}}
      <div class="banner__attribution">{{{_banner.attribution}}}</div>
    {{/if}}

and

{{#if _footer}}
<div class="accordion__footer">{{{_footer}}}</div>
{{/if}}

THE JSON:

 
        "_footer": "This text appears in the footer <div>",
        "_banner": {
            "src": "course/en/images/ph-banner.jpg",
            "alt": "",
            "attribution": "You can use the <b>Accordion</b> component to present learners with a series of headings which, once selected, expand to reveal associated text. Select each of the headings below to find out more about how accordions can be used.<br><br>These components can be either single or spanned. If spanned they can also contain a graphic.<br><br><span class=\"inline-instruction\">Select the headings to find out more.</span>"
        },

Hi Chris,

Read https://reactjs.org/docs/introducing-jsx.html familiarise yourself with jsx.

Have a look at one of the existing jsx templates https://github.com/adaptlearning/adapt-contrib-accordion/blob/master/templates/accordion.jsx

And copy it to the theme/extension as you would before. Make your changes and voila. It should work.

A side note on jsx vs handlebars:

Handlebars is a string replacement library that produces a javascript string of html.

JSX is a shorthand for node declarations, each html(ish) node describes a node, with attributes and children. You can't do this any more:

{{#if _banner.alt}} aria-label="{{_banner.alt}}" tabindex="0"{{else}} class="a11y-ignore" aria-hidden="true" tabindex="-1"{{/if}}

But you can do this:

aria-label={_banner?.alt || undefined} className={!_banner?.alt && 'a11y-ignore} aria-hidden={!_banner?.alt ? true : undefined} tabindex={_banner?.alt ? 0 : -1}

Those curly brance sections are javascript expressions.

Show parent | Reply

Thanks Ollie. I'll take a look.

Show parent | Reply