README
Shooting-Star ApostropheCMS Schema :star2: :star2: :star2: :star: :star:
An ApostropheCMS Custom Schema for your own shooting star (Rating) field.
Install
From within your apostrophe project npm install --save shooting-star
Include in app.js:
// In app.js
modules: {
'shooting-star': {},
// ... other modules
}
Enable Shooting Star Schema
Simple :
addFields : [
{
type : 'shooting-star',
name : 'rating',
label : 'Rate Your Picture'
}
]
shooting-star
Value
Widget.html Get This shooting-star schema returns an object.
{
priority : '<low|medium|high>',
value : '<float value>'
}
If you did an example above , in widget.html
you can simply get an object like this :
{{ data.widget.rating.priority }}
{{ data.widget.rating.value }}
or you can simply use apos.log()
to see what's available on shooting-star
objects :
{{ apos.log(data.widget.rating) }}
priority
works and what does it for ?
How For example , let say we have 5 stars in total. But we have 3 rates available which is low
, medium
and high
. Each star will be divided on each rates available so that you can use your nunjucks grouping each element OR you can put some inline style css on each rate. For example
<div style="{% if data.widget.rating.priority === 'medium' %}width : 66.67%;{% elif data.widget.rating.priority === 'high' %}width : 100%;{% endif %}">
Shooting Star Options Available
// in lib/modules/shooting-star/index.js
module.exports = {
star : {
size : "<Number or String>", // Star Size - Default : 30px
color : "<String>", // Star Base Color - Default : #ddd
highlightColor : "<String>", // Star Color when Click - Default : #FFD700
hoverColor : "<String>" // Star Color when Hover - Default : #FFED85
total : "<Number>" // Total Number Of Stars - Default : 5
}
}
How to Override/Change Existing Rate Tooltip ?
Easy , make sure the name of the rate is similar to default rate. Here is the default rate & tooltip(Mouse Hover Tooltip) :
// In lib/modules/shooting-star/index.js
module.exports = {
star : {
tooltip : [
{
rate: "low",
value: "Low - $ Star"
}, {
rate: "medium",
value: "Medium - $ Star"
}, {
rate: "high",
value: "High - $ Star"
}
]
}
}
Once Hover your mouse on stars , you will see the tooltip :smile: