• View
• Edit
• History
• Attach
• Print
• Backlinks

InputStar

Input control shaped like a group of 5 stars.

Description

This extension adds a "star" input field:

Rate page: (:input star rate:)

Under the hood, this markup is transformed into a group of 5 radio buttons with the same name, with values from 1 to 5. Clicking on a star selects one of the radio buttons and that value would then be submitted with the form.

The stars, colors, and interactivity, are only enabled via CSS (no JavaScript). The 5 radio buttons are wrapped in a <span> element to allow styling.

Installation

This extension requires ExtensionHub.

Place InputStar-2024-04-06a.zip in the pmwiki/extensions directory on your server. Optionally you can unzip it.

Alternatively, you can clone the Git repo into pmwiki/extensions with such a command line:
git clone --depth=1 https://github.com/5ko/InputStar.git

Configuration

To enable the extension, navigate to SiteAdmin.ExtensionHub, locate the "InputStar" row and press "Edit". On the new page, check the checkbox "Enable configuration" and near the bottom press "Save".

Internationalization

Not applicable.

Usage

In a wiki page, use the input markup similarly to (:input radio name:):

Basic directive: (:input star vote1:)

Also possible: (:input star name=vote2:)

Pre-filled value: (:input star vote3 5:)

Also possible: (:input star name=vote4 value=2:)

Default value:
(:input default vote5 4:)
(:input star vote5:)

Value from a PTV:
(:MyStarRate:3:)
(:input default source={*$FullName}:)
(:input star $:MyStarRate:)

Notes

• There is no standard "star" input element; the PmWiki markup outputs a group of 5 radio buttons with emoji star labels and some CSS to style the "selected", "unselected" and "hover" colors.
• The 5 radio buttons are wrapped in a <span> element to allow styling.
• Attributes "id" "title", "checked", and label in the directive are ignored and replaced with values that apply to the individual radio buttons.
• All other input star attributes are reapplied to the individual radio buttons in the group.
• In JavaScript, to get the selected value, do something like:

  var star = document.querySelector('input[name="yourstarname"]:checked');
  var starvalue = star? star.value: "";
  

• In JavaScript, attach "change" events to each radio input in the group.

To do / some day / maybe

If you have future plans or wishes for this recipe.

Change log / Release notes

• 2024-04-06a: Add readme, hub form page, wording, fix release date.
• 2024-04-06 First public release, ready to be tested.

See also

Contributors

PmWiki extension written and maintained by Petko.

Comments

See discussion at InputStar-Talk?