npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

ionic1-star-rating

v1.2.13

Published

This is a StarRating component which provides a complete set of features based on modern web technologies. The js part is written in typescript and well tested. Nearly all logic depending on the visual state is developed over css3 techniques. The js part

Downloads

20

Readme

Ionic1 Star Rating ⭐⭐⭐⭐⭐

⭐ Ionic 1 Component written in typescript, based on css only techniques. ⭐

License Bower Version NPM Version
Standard Version
Build Status NPM

NPM Package Quality

Ionic1 Star Rating is a Ionic specific Angular1.6 component written in typescript.
It is based on css-star-rating, a fully featured and customizable css only star rating component written in scss.

Ionic1-Star-Rating

##Related Projects

| Css | Angular 1 | Angular | Ionic 1 | |--- |--- |--- |--- | | | | | | | Css Star Rating | Angular1 Star Rating | Angular Star Rating |Ionic1 Star Rating |

Features

Beside all other features listed below it is optimized for mobile which means it implements touch gestures over ionics built in gestures. This module implements all Features from CSS-STAR-RATING. It also provides callbacks for all calculation functions used in the component as well as all possible event emitters.

  • [x] id - The html id attribute of the star rating
  • [x] rating - The actual Star rating
  • [x] showHalfStars - To display half stars or not
  • [x] numOfStars - The max number of stars you can rate
  • [x] size - The different sizes of the component
  • [x] space - The space between stars
  • [x] staticColor - A static color for the stars
  • [x] disabled - Component is in disabled mode
  • [x] starType - Stars can be displayed as svg, character or icon-font like fontawesome, glyphicons or ionicons
  • [x] labelText - The value of the label text
  • [x] labelVisible - If the label is visible or not
  • [x] labelPosition - The position of the label
  • [x] speed - The duration of the animation
  • [x] direction - The direction of the component i.e. right to left
  • [x] readOnly - Click event is disabled
  • [x] getColor - Custom function to calculate the color for a rating
  • [x] getHalfStarVisible - Custom function to calculate value for displaying half stars or not
  • [x] onClick - Event emitter for onClick action
  • [x] onRatingChange - Event emitter for onRatingChange event
  • [x] onHover - Event emitter for touch/drag gestures

Browser support

| IE | Firefox | Chrome | Safari | Opera | |--- |--- |--- |--- |---| | > 11 | > 50 | > 55 | > 10 | > 41 | | | | | | |

Install

*Get Ionic1 Star Rating:

  • clone & build this repository
  • download as .zip
  • via npm: by running $ npm install ionic1-star-rating from your console
  • via bower: by running $ bower install ionic1-star-rating from your console
  • via cdn: by adding the git-cdn reference in your index.html
    <script src="https://cdn.rawgit.com/BioPhoton/ionic1-star-rating/v1.2.11/dist/index.js"></script>

Load library as minified js file

<script src="[bower or npm folder or git-cdn path]/ionic1-star-rating/dist/index.js"></script>

*Load library as ts module

    import angularStars = require('ionic1-star-rating/dist/index.js');

Inject it into angular

angular.module('myApp', ['star-rating'])

Use it

<star-rating-comp rating="'3.0'"></star-rating-comp>

Component Properties

Input (< bindings)

id: string (Optional)
The html id attribute of the star rating
Default: undefined

<star-rating-comp id="'my-id'"></star-rating-comp>

rating: number (Optional)
The actual star rating value
Default: 0

<star-rating-comp rating="3"></star-rating-comp>

showHalfStars: boolean (Optional) To show half stars or not
Options: true, false
Default: false

<star-rating-comp show-half-stars="true"></star-rating-comp>

numOfStars: number (Optional)
The possible number of stars to choose from
Default: 5

<star-rating-comp num-of-stars="6"></star-rating-comp>

label-text: string (Optional)
The label text next to the stars.
Default: undefined

<star-rating-comp label-text="'My text!'"></star-rating-comp>

labelPosition: starRatingPosition (Optional)
The position of the label
Options: top, right, bottom, left
Default: left

<star-rating-comp label-position="'top'"></star-rating-comp>

space: starRatingStarSpace (Optional)
If the start use the whole space or not. Options: no, between, around Default: no

<star-rating-comp space="'around'"></star-rating-comp>

size: starRatingSizes (Optional)
The height and width of the stars.
Options: small, medium, large
Default: ok

<star-rating-comp size="'small'"></star-rating-comp>

color: starRatingColors (Optional)
Possible color names for the stars.
Options: default, negative, ok, positive
Default: undefined

<star-rating-comp color="'positive'"></star-rating-comp>

disabled: boolean (Optional)
The click callback is disabled, colors are transparent
Default: false

<star-rating-comp disabled="true"></star-rating-comp>

direction: string (Optional)
The direction of the stars and label.
Options: rtl, ltr
Default: rtl

<star-rating-comp direction="'ltr'"></star-rating-comp>

readOnly: boolean (Optional)
The click callback is disabled
Default: false

<star-rating-comp read-only="true"></star-rating-comp>

speed: starRatingSpeed (Optional)
The duration of the animation in ms.
Options: immediately, noticeable, slow
Default: noticeable

<star-rating-comp speed="'slow'"></star-rating-comp>

starType: starRatingStarTypes (Optional)
The type of start resource to use.
Options: svg, icon, custom-icon Default: svg

<star-rating-comp star-type="'icon'"></star-rating-comp>

getColor: Function (Optional)
Calculation of the color by rating.
Params: rating, numOfStars, staticColor
Return: colorName as string

<star-rating-comp get-color="parentCtrl.getColor(rating, numOfStars, staticColor)"></star-rating-comp>

getHalfStarVisible: Function (Optional)
Calculation for adding the "half" class or not, depending on the rating value.
Params: rating
Return: boolean

<star-rating-comp get-half-star-visible="parentCtrl.getHalfStarVisible(rating)" rating="3.1"></star-rating-comp>
function getHalfStarVisible(rating) {
    var absDiff = Math.abs(rating % 1);
    
    if(absDiff == 0.1) {
        return false;
    }
    
    return absDiff > 0;
}

Output (& bindings)

onClick: Function (Optional)
Callback function for star click event Params: $event

<star-rating-comp on-click="parentCtrl.onClick($event)"></star-rating-comp>
function onClick($event) {
    parent.clickCount = parent.clickCount + 1;
}

onRatingChange: Function (Optional)
Callback function for rating update event Params: $event

<star-rating-comp on-rating-change="parentCtrl.onRatingChange($event)"></star-rating-comp>
function onRatingChange($event) {
    parent.rating = $event.rating;
}