@lemonadejs/rating 5.0.0 → 5.2.0

package/dist/index.d.ts

@@ -14,15 +14,29 @@ declare namespace Rating {
         name?: string;
         /** Current value */
         value?: number;
+        /** Tooltips displayed on hover */
+        tooltip?: [] | 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;
+        /** 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,105 @@ 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);
+            }
+            // Toggle value
+            if (index === current) {
+                index = 0;
+            }
+            // 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 methdo
+            if (events !== false) {
+                Dispatch.call(self, change, 'change', {
+                    instance: self,
+                    value: index,
+                });
+            }
+        }
+
+        const click = function(e, s) {
+            let index = self.stars.indexOf(s) + 1;
+            val(index);
+        }
+
+        const mouseover = function(e, s) {
+            let index = self.stars.indexOf(s);
+            for (let i = 0; i < self.number; i++) {
+                if (i <= index) {
+                    self.stars[i].hover = 1;
+                } else {
+                    self.stars[i].hover = 0;
                 }
             }
         }
 
-        self.onchange = function(prop) {
+        const mouseout = function(e, s) {
+            for (let i = 0; i < self.number; i++) {
+                self.stars[i].hover = 0;
+            }
+        }
+
+        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.getValue = function () {
+            return Number(self.value);
+        }
 
-            if (typeof(change) === 'function') {
-                change(index+1, s);
-            }
+        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 render => render`<div class="lm-rating" value="{{self.value}}" number="{{self.number}}" name="{{self.name}}" data-size="{{self.size}}" :loop="self.stars" :ref="self.component"  onmouseout="${mouseout}">
+            <i class="material-symbols-outlined material-icons" data-selected="{{self.selected}}" data-hover="{{self.hover}}" title="{{self.title}}" onclick="${click}" onmouseover="${mouseover}">star</i>
         </div>`;
     }
 

package/dist/style.css

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

package/package.json

@@ -15,9 +15,9 @@
         "javascript plugins"
     ],
     "dependencies": {
-        "lemonadejs": "^5.0.3"
+        "lemonadejs": "^5.2.0"
     },
     "main": "dist/index.js",
     "types": "dist/index.d.ts",
-    "version": "5.0.0"
+    "version": "5.2.0"
 }