@lemonadejs/rating 5.0.0 → 5.8.0

package/README.md

@@ -1,169 +1,169 @@
-# LemonadeJS Rating
-
-[Official website and documentation is here](https://lemonadejs.net/components/rating)
-
-Compatible with Vanilla JavaScript, LemonadeJS, React, Vue or Angular.
-
-The LemonadeJS star rating plugin is a micro JavaScript component that implements the five star rating.  
-
-## Features
-
--   Lightweight: The JavaScript rating is only about 2 KBytes;
--   Integration: It can be used as a standalone library or integrated with any modern framework;
-
-## Getting Started
-
-You can install using NPM or using directly from a CDN.
-
-### npm Installation
-
-To install it in your project using npm, run the following command:
-
-```bash
-$ npm install @lemonadejs/rating
-```
-
-### CDN
-
-To use rating via a CDN, include the following script tags in your HTML file:
-
-```html
-<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/lemonadejs/dist/lemonade.min.js"></script>
-<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@lemonadejs/rating/dist/index.min.js"></script>
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@lemonadejs/rating/dist/style.min.css" />
-```
-
-### Usage
-
-Quick example with Lemonade
-
-```javascript
-// For installation: % npm install @lemonadejs/rating
-// Add to your HTML: <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
-import lemonade from "lemonadejs";
-import Rating from "@lemonadejs/rating";
-
-export default function Component() {
-    const self = this;
-
-    self.plus = () => {
-        self.number++;
-    }
-    self.minus = () => {
-        self.number--;
-    }
-    self.reset = () => {
-        self.value = 1;
-    }
-    self.change = (newValue) => {
-        console.log('New value', newValue);
-    }
-
-    self.number = 5;
-    self.value = 3;
-
-    return `<div>
-        <p><Rating :value="self.value" :number="self.number" onchange="self.change" /></p>
-        <input type="button" value="Value=1" onclick="self.reset" />
-        <input type="button" value="Add star" onclick="self.plus" />
-        <input type="button" value="Remove star" onclick="self.minus" />
-    </div>`;
-}
-```
-
-Quick example with React
-
-```jsx
-import React, { useRef, useState } from "react";
-import Rating from "@lemonadejs/rating/dist/react";
-
-export default function App() {
-    const ratingRef = useRef();
-    const [number, setNumber] = useState(5);
-    const [value, setValue] = useState(3);
-
-    const plus = () => {
-        setNumber(number+1)
-    };
-
-    const minus = () => {
-        setNumber(number-1)
-    };
-
-    const reset = () => {
-        setValue(1);
-    };
-
-    const change = (newValue) => {
-        console.log('New value', newValue);
-    };
-
-    return (
-        <>
-            <Rating value={value} number={number} onchange={change} ref={ratingRef} />
-            <input type="button" value="Value=1" onClick={reset} />
-            <input type="button" value="Add star" onClick={plus} />
-            <input type="button" value="Remove star" onClick={minus} />
-        </>
-    );
-}
-```
-
-Quick example with React
-
-```vue
-<template>
-    <Rating :value="1" :number="5" :onchange="handleChange" ref="component" />
-    <button @click="reset">Value=1</button>
-    <button @click="plus">Add Star</button>
-    <button @click="minus">Remove Star</button>
-</template>
-
-<script>
-import Rating from '@lemonadejs/rating/dist/vue';
-
-export default {
-name: 'App',
-components: {
-    Rating,
-},
-methods: {
-    reset: function () {
-        this.$refs.component.current.value = 1;
-    },
-    plus: function () {
-        this.$refs.component.current.number++;
-    },
-    minus: function () {
-        this.$refs.component.current.number--;
-    },
-    handleChange: function (v) {
-        console.log('New value: ', v)
-    }
-}
-};
-</script>
-```
-
-### Attributes
-
-| Attribute | Type | Description |
-| --- | --- | --- |
-| name? | String | The name of the component |
-| number? | Number | The number of stars. Default 5. |
-| value? | Number | The initial value. Default null. |
-
-### Events
-
-| Attribute | Description |
-| --- | --- |
-| onchange? | When the value of the component changes. |
-
-## License
-
-The [LemonadeJS](https://lemonadejs.net) LemonadeJS Rating is released under the MIT.
-
-## Other Tools
-
--   [jSuites Plugins](https://jsuites.net/docs)
--   [Jspreadsheet Data Grid](https://jspreadsheet.com)
+# LemonadeJS Rating
+
+[Official website and documentation is here](https://lemonadejs.net/components/rating)
+
+Compatible with Vanilla JavaScript, LemonadeJS, React, Vue or Angular.
+
+The LemonadeJS star rating plugin is a micro JavaScript component that implements the five star rating.
+
+## Features
+
+-   Lightweight: The JavaScript rating is only about 2 KBytes;
+-   Integration: It can be used as a standalone library or integrated with any modern framework;
+
+## Getting Started
+
+You can install using NPM or using directly from a CDN.
+
+### npm Installation
+
+To install it in your project using npm, run the following command:
+
+```bash
+$ npm install @lemonadejs/rating
+```
+
+### CDN
+
+To use rating via a CDN, include the following script tags in your HTML file:
+
+```html
+<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/lemonadejs/dist/lemonade.min.js"></script>
+<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@lemonadejs/rating/dist/index.min.js"></script>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@lemonadejs/rating/dist/style.min.css" />
+```
+
+### Usage
+
+Quick example with Lemonade
+
+```javascript
+// For installation: % npm install @lemonadejs/rating
+// Add to your HTML: <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+import lemonade from 'lemonadejs';
+import Rating from '@lemonadejs/rating';
+
+export default function Component() {
+    const self = this;
+
+    self.plus = () => {
+        self.number++;
+    };
+    self.minus = () => {
+        self.number--;
+    };
+    self.reset = () => {
+        self.value = 1;
+    };
+    self.change = (newValue) => {
+        console.log('New value', newValue);
+    };
+
+    self.number = 5;
+    self.value = 3;
+
+    return `<div>
+        <p><Rating :value="self.value" :number="self.number" onchange="self.change" /></p>
+        <input type="button" value="Value=1" onclick="self.reset" />
+        <input type="button" value="Add star" onclick="self.plus" />
+        <input type="button" value="Remove star" onclick="self.minus" />
+    </div>`;
+}
+```
+
+Quick example with React
+
+```jsx
+import React, { useRef, useState } from 'react';
+import Rating from '@lemonadejs/rating/dist/react';
+
+export default function App() {
+    const ratingRef = useRef();
+    const [number, setNumber] = useState(5);
+    const [value, setValue] = useState(3);
+
+    const plus = () => {
+        setNumber(number + 1);
+    };
+
+    const minus = () => {
+        setNumber(number - 1);
+    };
+
+    const reset = () => {
+        setValue(1);
+    };
+
+    const change = (newValue) => {
+        console.log('New value', newValue);
+    };
+
+    return (
+        <>
+            <Rating value={value} number={number} onchange={change} ref={ratingRef} />
+            <input type="button" value="Value=1" onClick={reset} />
+            <input type="button" value="Add star" onClick={plus} />
+            <input type="button" value="Remove star" onClick={minus} />
+        </>
+    );
+}
+```
+
+Quick example with React
+
+```vue
+<template>
+    <Rating :value="1" :number="5" :onchange="handleChange" ref="component" />
+    <button @click="reset">Value=1</button>
+    <button @click="plus">Add Star</button>
+    <button @click="minus">Remove Star</button>
+</template>
+
+<script>
+import Rating from '@lemonadejs/rating/dist/vue';
+
+export default {
+    name: 'App',
+    components: {
+        Rating,
+    },
+    methods: {
+        reset: function () {
+            this.$refs.component.current.value = 1;
+        },
+        plus: function () {
+            this.$refs.component.current.number++;
+        },
+        minus: function () {
+            this.$refs.component.current.number--;
+        },
+        handleChange: function (v) {
+            console.log('New value: ', v);
+        },
+    },
+};
+</script>
+```
+
+### Attributes
+
+| Attribute | Type   | Description                      |
+| --------- | ------ | -------------------------------- |
+| name?     | String | The name of the component        |
+| number?   | Number | The number of stars. Default 5.  |
+| value?    | Number | The initial value. Default null. |
+
+### Events
+
+| Attribute | Description                              |
+| --------- | ---------------------------------------- |
+| onchange? | When the value of the component changes. |
+
+## License
+
+The [LemonadeJS](https://lemonadejs.net) LemonadeJS Rating is released under the MIT.
+
+## Other Tools
+
+-   [jSuites Plugins](https://jsuites.net/docs)
+-   [Jspreadsheet Data Grid](https://jspreadsheet.com)

package/dist/index.d.ts

@@ -14,15 +14,29 @@ declare namespace Rating {
         name?: string;
         /** Current value */
         value?: number;
+        /** Tooltips displayed on hover */
+        tooltip?: string | string[];
+        /** Size */
+        size?: 'default' | 'small';
         /** Onchange Event */
-        onchange?: (newValue: number) => void;
+        onchange?: (instance: Instance, newValue: number) => void;
     }
 
     interface Instance {
         /** Number of stars */
         number: number;
+        /** Form element name */
+        name?: string;
         /** Current value */
         value: number;
+        /** Tooltips displayed on hover */
+        tooltip?: string | string[];
+        /** Size */
+        size?: 'default' | 'small';
+        /** Gets the current value */
+        getValue: () => number;
+        /** Sets the value */
+        setValue: (index: number) => void;
     }
 }
 

package/dist/index.js

@@ -8,16 +8,48 @@ if (!lemonade && typeof (require) === 'function') {
     global.Rating = factory();
 }(this, (function () {
 
-    const Rating = function() {
+    class CustomEvents extends Event {
+        constructor(type, props, options) {
+            super(type, {
+                bubbles: true,
+                composed: true,
+                ...options,
+            });
+
+            if (props) {
+                for (const key in props) {
+                    // Avoid assigning if property already exists anywhere on `this`
+                    if (! (key in this)) {
+                        this[key] = props[key];
+                    }
+                }
+            }
+        }
+    }
+
+    // Dispatcher
+    const Dispatch = function(method, type, options) {
+        // Try calling the method directly if provided
+        if (typeof method === 'function') {
+            let a = Object.values(options);
+            return method(...a);
+        } else if (this.tagName) {
+            this.dispatchEvent(new CustomEvents(type, options));
+        }
+    }
+
+    const Rating = function(children, { onchange, onload }) {
         let self = this;
 
+        // Event
+        let change = self.onchange;
+        self.onchange = null;
+
         if (! self.number) {
             self.number = 5;
         }
-        self.stars = [];
 
-        // Event
-        let change = self.onchange;
+        self.stars = [];
 
         // Current self star
         let current = null;
@@ -25,7 +57,7 @@ if (!lemonade && typeof (require) === 'function') {
         /**
          * Update the number of stars
          */
-        const len = function() {
+        const len = function () {
             // Remove stars
             if (self.number < self.stars.length) {
                 self.stars.splice(self.number, self.stars.length);
@@ -37,66 +69,126 @@ if (!lemonade && typeof (require) === 'function') {
             for (let i = 0; i < self.number; i++) {
                 if (! self.stars[i]) {
                     self.stars[i] = {
-                        icon: 'star_outline',
+                        icon: 'star',
                     };
+                    if (self.tooltip[i]) {
+                        self.stars[i].title = self.tooltip[i];
+                    }
                 }
             }
             // Refresh
             self.refresh('stars');
         }
 
-        const val = function() {
-            // Update value
-            if (self.value > 0) {
-                let t = self.stars[self.value-1];
-                if (t) {
-                    self.click(null, t);
+        const val = function (index, events) {
+            if (typeof(index) === 'string') {
+                index = Number(index);
+            }
+            // Apply value to the selected property in each star
+            for (let i = 0; i < self.number; i++) {
+                self.stars[i].selected = i <= index - 1 ? 1 : 0;
+            }
+            // Keep current value
+            current = index;
+            // Dispatch method
+            if (events !== false) {
+                Dispatch.call(self, change, 'change', {
+                    instance: self,
+                    value: index,
+                });
+            }
+        }
+
+        const getElementPosition = function(child) {
+            if (child.tagName === 'I') {
+                let root = self.el;
+                for (let i = 0; i < root.children.length; i++) {
+                    let c = root.children[i];
+                    if (c === child) {
+                        return i;
+                    }
+                }
+            }
+            return -1;
+        }
+
+        const click = function(e, s) {
+            let ret = getElementPosition(e.target);
+            if (ret !== -1) {
+                let index = ret + 1;
+                if (index === current) {
+                    index = 0;
                 }
+                self.value = index;
+            }
+        }
+
+        const mouseover = function(e, s) {
+            let index = getElementPosition(e.target);
+            if (index !== -1) {
+                for (let i = 0; i < self.number; i++) {
+                    if (i <= index) {
+                        self.stars[i].hover = 1;
+                    } else {
+                        self.stars[i].hover = 0;
+                    }
+                }
+            }
+        }
+
+        const mouseout = function(e, s) {
+            for (let i = 0; i < self.number; i++) {
+                self.stars[i].hover = 0;
             }
         }
 
-        self.onchange = function(prop) {
+        onchange((prop) => {
             if (prop === 'number') {
                 len();
             } else if (prop === 'value') {
-                val();
+                val(self.value);
+            } else if (prop === 'tooltip') {
+                if (typeof(self.tooltip) === 'string') {
+                    self.tooltip = self.tooltip.split(',')
+                }
+                len();
             }
-        }
+        })
 
-        self.onload = function() {
+        onload(() => {
             // Bind global method to be compatible with LemonadeJS forms
-            self.el.val = function(v) {
-                if (typeof(v) === 'undefined') {
+            self.el.val = function (v) {
+                if (typeof (v) === 'undefined') {
                     return self.value;
                 } else {
                     self.value = v;
                 }
             }
 
+            if (self.tooltip && typeof(self.tooltip) === 'string') {
+                self.tooltip = self.tooltip.split(',')
+            } else {
+                self.tooltip = '';
+            }
             len();
-            val();
-        }
+            // Ignore events
+            val(self.value, false);
 
-        self.click = function(e, s) {
-            if (! s.selected) {
-                current = null;
-            }
-            let index = self.stars.indexOf(s);
-            for (let i = 0; i < self.number; i++) {
-                let selected = i <= index && s !== current ? 1 : 0;
-                self.stars[i].selected = selected;
-                self.stars[i].el.style.color = selected ? 'red' : '';
-                self.stars[i].icon = selected ? 'star' : 'star_outline';
-            }
-            current = s;
+            self.el.addEventListener('click', click);
+            self.el.addEventListener('mouseout', mouseout);
+            self.el.addEventListener('mouseover', mouseover);
+        });
 
-            if (typeof(change) === 'function') {
-                change(index+1, s);
-            }
+        self.getValue = function () {
+            return Number(self.value);
+        }
+
+        self.setValue = function (index) {
+            self.value = index;
         }
 
-        return `<div value="{{self.value}}" number="{{self.number}}" name="{{self.name}}" :loop="self.stars" :ref="self.component" style="cursor: pointer">
-            <i class="material-icons" onclick="self.parent.click">{{self.icon}}</i>
+        return `<div class="lm-rating" value="{{self.value}}" number="{{self.number}}" name="{{self.name}}" data-size="{{self.size}}" :loop="self.stars">
+            <i class="material-symbols-outlined material-icons" data-selected="{{self.selected}}" data-hover="{{self.hover}}" title="{{self.title}}">star</i>
         </div>`;
     }
 

package/dist/style.css

@@ -0,0 +1,24 @@
+.lm-rating i {
+    color: lightgray;
+    cursor: pointer;
+    user-select: none;
+    -webkit-user-drag: none;
+}
+
+.lm-rating[data-size="small"] {
+    height: 16px;
+    line-height: 16px;
+    font-size: 16px;
+}
+
+.lm-rating[data-size="small"] i {
+    font-size: 16px;
+}
+
+.lm-rating i[data-hover="1"] {
+    color: gray;
+}
+
+.lm-rating i[data-selected="1"] {
+    color: red;
+}

package/package.json

@@ -1,23 +1,23 @@
-{
-    "name": "@lemonadejs/rating",
-    "title": "LemonadeJS star rating javascript plugin",
-    "description": "LemonadeJS star rating plugin",
-    "author": {
-        "name": "Contact <contact@lemonadejs.net>",
-        "url": "https://lemonadejs.net"
-    },
-    "keywords": [
-        "javascript star rating",
-        "javascript rating",
-        "lemonadejs plugins",
-        "js",
-        "library",
-        "javascript plugins"
-    ],
-    "dependencies": {
-        "lemonadejs": "^5.0.3"
-    },
-    "main": "dist/index.js",
-    "types": "dist/index.d.ts",
-    "version": "5.0.0"
-}
+{
+    "name": "@lemonadejs/rating",
+    "title": "LemonadeJS star rating javascript plugin",
+    "description": "LemonadeJS star rating plugin",
+    "author": {
+        "name": "Contact <contact@lemonadejs.net>",
+        "url": "https://lemonadejs.net"
+    },
+    "keywords": [
+        "javascript star rating",
+        "javascript rating",
+        "lemonadejs plugins",
+        "js",
+        "library",
+        "javascript plugins"
+    ],
+    "dependencies": {
+        "lemonadejs": "^5.8.0"
+    },
+    "main": "dist/index.js",
+    "types": "dist/index.d.ts",
+    "version": "5.8.0"
+}