starry-rating
Version:
JavaScript star rating system
383 lines (339 loc) • 11.8 kB
HTML
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Starry star rating 🌟🌃💖</title>
<meta name="author" content="Andre Sieverding" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<link rel="stylesheet" href="./css/normalize.css" type="text/css" />
<link rel="stylesheet" href="./css/style.css" type="text/css" />
<link rel="stylesheet" href="./css/Pixels.css" type="text/css" />
<link rel="stylesheet" href="./css/starry.min.css" type="text/css" />
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400&display=swap" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.18.1/styles/ocean.min.css" rel="stylesheet" />
<link rel="shortcut icon" href="./assets/icons/hover_large.svg" type="image/svg+xml" />
</head>
<body>
<div id="particles-js" class="head">
<div class="menu">
<ul>
<li>
<a href="./playground.html" class="smooth"><i class="px px-beaker"></i> Playground</a>
</li>
<li>
<a href="https://github.com/Teddy95/Starry/releases/latest" class="smooth"><i class="px px-cloud-download"></i> Download</a>
</li>
<li>
<a href="https://github.com/Teddy95/Starry" class="smooth"><i class="fa fa-github"></i> GitHub</a>
</li>
</ul>
</div>
<div class="logo">
<i class="px px-star"></i>
</div>
<div class="space">
<h1>
<p>Starry</p>
<small>
Simple modern JavaScript star rating system.
<br />
Written in Vanilla.js with ECMAScript 6 & compiled with babel.
</small>
</h1>
</div>
<div class="star-rating">
<div>
<div id="Starry"></div>
<br />
<a class="github-button" href="https://github.com/Teddy95/Starry" data-icon="octicon-star" data-show-count="true" aria-label="Star Teddy95/Starry on GitHub" data-size="large">Star</a>
<a class="github-button" href="https://github.com/Teddy95/Starry/archive/master.zip" data-icon="octicon-download" aria-label="Download Teddy95/Starry on GitHub" data-size="large">Download</a>
</div>
</div>
</div>
<div id="landing" class="content">
<h1>
<p>Installation</p>
<small>Let's get started! Download Starry from <a class="smooth" href="https://github.com/Teddy95/Starry/releases/latest" target="_blank">here</a> or install it as a Node dependency.</small>
</h1>
<div>
<pre><code class="bash">
npm install starry-rating
</code></pre>
</div>
<br />
<h1>
<p>Include Starry into your code</p>
</h1>
<h2>
<p>Import Starry module</p>
<small>Use the following JavaScript code for importing Starry.</small>
</h2>
<pre><code class="javascript">
import Starry from 'starry-rating'
// or with require...
const Starry = require('starry-rating')
</code></pre>
<br />
<h2>
<p>SASS source code</p>
<small>Include the following sass code into your stylesheet.</small>
</h2>
<pre><code class="scss">
// Include Starry stylesheet
@import "~starry-rating/src/style/Starry.scss";
</code></pre>
<br />
<h2>
<p>Distributed files</p>
<small>You can also use the compiled js code & css stylesheet. Copy Starry js & css to your project and include the files in your html DOM.</small>
</h2>
<pre><code class="html">
<link rel="stylesheet" type="text/css" href="/dist/starry.min.css" />
</code></pre>
<pre><code class="html">
<script language="javascript" type="text/javascript" href="/dist/starry.min.js"></script>
</code></pre>
<br />
<h1>
<p>How to use</p>
<small>The simplest way to use Starry.</small>
</h1>
<h2>
<p>HTML</p>
</h2>
<pre><code class="html">
<!-- Starry DOM element -->
<div id="star-rating"></div>
</code></pre>
<br />
<h2>
<p>JavaScript</p>
</h2>
<pre><code class="javascript">
var starRatingEl = document.getElementById('star-rating');
var starRating = new Starry(starRatingEl);
</code></pre>
<br />
<h2>
<p>More complex example</p>
<small>More complex example of a star rating with tooltips and custom icons, which is logging the rating to console. Tooltips have to be rendered in <code>onRender()</code> method by any tooltip library. In this example we use Bootstrap tooltips with jQuery & Popper.js.</small>
</h2>
<pre><code class="javascript">
var starRatingId = 'ExampleRating'; // Html DOM id + star rating element name
var starRatingEl = document.getElementById(starRatingId);
var starRating = new Starry(starRatingEl, {
	name: starRatingId, // Use a name to determine tooltips for only this Starry element
	labels: [
		'Low',
		'Nice to have',
		'Very nice',
		'Perfect',
		'Excellent'
	],
	onClear: function () {
		$('[data-name="' + starRatingId + '"] [data-tooltip]').tooltip('dispose');
	},
	onRender: function () {
		$('[data-name="' + starRatingId + '"] [data-tooltip]').tooltip({
			trigger: 'hover',
			placement: 'top'
		});
	},
	onRate: function (rating) {
		console.log(rating)
	},
	icons: {
		// File path, uri or base64 string for `src` attribute
		blank: './dist/icons/blank.svg',
		hover: './dist/icons/hover.svg',
		active: './dist/icons/active.svg'
	}
});
</code></pre>
<br />
<h1>
<p>Configurations</p>
<small>Try out our awesome <a class="smooth" href="./playground.html">Starry playground configurator</a>!</small>
</h1>
<div>
<table>
<thead>
<tr>
<th>Option</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>name</td>
<td>String</td>
<td></td>
<td>Name of star rating element. This option is required, if multi rating is disabled.</td>
</tr>
<tr>
<td>stars</td>
<td>Integer</td>
<td><code>5</code></td>
<td>Number of rating stars.</td>
</tr>
<tr>
<td>multiRating</td>
<td>Boolean</td>
<td><code>true</code></td>
<td>Determines whether the user can submit several ratings.</td>
</tr>
<tr>
<td>beginWith</td>
<td>Float</td>
<td><code>0</code></td>
<td>Preloaded rating in percentage.</td>
</tr>
<tr>
<td>readOnly</td>
<td>Boolean</td>
<td><code>false</code></td>
<td>Read only rating stars.</td>
</tr>
<tr>
<td>staticActiveRating</td>
<td>Boolean</td>
<td><code>true</code></td>
<td>Show current rating while hovering over rating stars.</td>
</tr>
<tr>
<td>setStarsAfterRating</td>
<td>Boolean</td>
<td><code>true</code></td>
<td>Update rating stars after rating to new value.</td>
</tr>
<tr>
<td>labels</td>
<td>Array / Boolean</td>
<td><code>false</code></td>
<td>Labels / tooltips for the stars. Render tooltips in onRender method. </td>
</tr>
<tr>
<td>onRate</td>
<td>Function</td>
<td><code>(rating) => true</code></td>
<td>Called on rating event.</td>
</tr>
<tr>
<td>onClear</td>
<td>Function</td>
<td><code>undefined</code></td>
<td>Called each time when Starry is being destroyed or rebuilt.</td>
</tr>
<tr>
<td>onRender</td>
<td>Function</td>
<td><code>undefined</code></td>
<td>Called each time when Starry is build / rendered in html DOM.</td>
</tr>
<tr>
<td>icons</td>
<td>Object</td>
<td>Default <a class="smooth" href="https://github.com/Teddy95/Starry/tree/master/dist/icons" target="_blank">Starry icons</a>.</td>
<td>Icon images. Object with properties `blank`, `active` and `hover`. Use a string for each image source.</td>
</tr>
</tbody>
</table>
</div>
<!-- <p class="notice">
<span class="info-icon">*</span> are required options!
</p> -->
<br />
<h1>
<p>Methods</p>
</h1>
<h2>
<p>Get current rating <code>getCurrentRating()</code></p>
</h2>
<pre><code class="javascript">
console.log(starRating.getCurrentRating()) // => 5 i.e.
</code></pre>
<br />
<h2>
<p>Destroy Starry <code>clear()</code></p>
</h2>
<pre><code class="javascript">
starRating.clear()
</code></pre>
<br />
<h2>
<p>Update Starry with new configurations <code>update(config)</code></p>
<small>Starry will merge the new configurations into the old ones.</small>
</h2>
<pre><code class="javascript">
starRating.update({
	readOnly: true,
	beginWith: 50
})
</code></pre>
<br />
<h2>
<p>Attach event listener <code>on(eventName, callbackFunction)</code></p>
<small>Attach an event listener to the star rating.</small>
</h2>
<pre><code class="javascript">
starRating.on('rate', function (rating) {
	console.log('Rating: ' + rating)
})
</code></pre>
<br />
<h1>
<p>Events</p>
</h1>
<div>
<table>
<thead>
<tr>
<th>Name</th>
<th>Arguments</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>rate</td>
<td><code>rating</code></td>
<td>Fired on rating.</td>
</tr>
<tr>
<td>render</td>
<td></td>
<td>Fired on rendering.</td>
</tr>
<tr>
<td>clear</td>
<td></td>
<td>Fired on destroying.</td>
</tr>
</tbody>
</table>
</div>
</div>
<footer>
<div class="footer">
<div>
<i class="px px-code"></i> with <i class="px px-heart-full" style="color: #B61F15;"></i> in Damme, Germany.
</div>
</div>
</footer>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js" language="javascript"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" language="javascript"></script>
<script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" language="javascript"></script>
<script async defer src="https://buttons.github.io/buttons.js"></script>
<script src="./js/starry.min.js" type="text/javascript" language="javascript"></script>
<script src="./js/star-rating.js" type="text/javascript" language="javascript"></script>
<script src="https://cdn.jsdelivr.net/npm/particles.js@2.0.0/particles.min.js" type="text/javascript" language="javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.18.1/highlight.min.js" type="text/javascript" language="javascript"></script>
<script type="text/javascript" language="javascript">
particlesJS.load('particles-js', './particles.json');
hljs.initHighlightingOnLoad();
</script>
</body>
</html>