H5P Editor SelectButtons

Simple editor widget that can be used to display a select field not as a dropdown menu, but as a list of buttons.

Example of usage

In the library.json file of your content type, add the dependency.

"editorDependencies": [
  ... YOUR OTHER ENTRIES ...,
  {
    "machineName": "H5PEditor.SelectButtons",
    "majorVersion": 1,
    "minorVersion": 0
  }
]

In your semantics.json file, add "widget": "selectButtons".

{
  "name": "mySelectField",
  "type": "select",
  "label": "My select field",
  "widget": "selectButtons"
  "options": [
    {
      "value": "x",
      "label": "X"
    },
    {
      "value": "y",
      "label": "Y"
    }
  ],
  "default": "x"
},

Getting started with development

Clone this repository with git and check out the branch that you are interested in (or choose the branch first and then download the archive, but learning how to use git really makes sense).

Change to the repository directory and run

npm install

to install required modules. Afterwards, you can build the project using

npm run build

or, if you want to let everything be built continuously while you are making changes to the code, run

npm run watch

Before putting the code in production, you should always run npm run build.

Also, you should run

npm run lint

in order to check for coding style guide violations.

The build process will transpile ES6 to earlier versions in order to improve compatibility to older browsers. If you want to use particular functions that some browsers don't support, you'll have to add a polyfill.

The build process will also move the source files into one distribution file and minify the code.

In order to pack an H5P library, please install the H5P CLI tool instead of zipping everything manually. That tool will take care of a couple of things automatically that you will need to know otherwise.

In simple cases, something such as

h5p pack <your-repository-directory> my-awesome-library.h5p

will suffice.

For more information on how to use those distribution files in H5P, please have a look at https://youtu.be/xEgBJaRUBGg and the H5P developer guide at https://h5p.org/library-development.