riot starRating

by jpeter06

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/riot/2.3.18/riot+compiler.min.js"></script>
<h4>
Rating
</h4>
<!--
<starRating  num=5 val=2></starRating>
<starRating  val=3></starRating>
<starRating></starRating>
-->
<rating></rating>

<script type="riot/tag">

<rating>
  	<table>
    	<tr each={item in items}>
      	<td>{item.title}</td>
        <td><starRating num=5 val={item.val}></starRating></td>
      </tr>
    </table>
    
    
		this.items=opts.items
    console.log(this)
    
</rating>
  

<starRating>
    	<span name='star' each={val,i in this.num} class={chosen(i)} onclick={ parent.clicked } 
            onmouseover={parent.over} >
      </span>
           
     <style>
 	   	starRating { display: block }
			starRating span{
 			width:20px; 
      height:20px;
  		display:inline-block; 
      cursor: pointer;
   		background-color: silver;
      
   -webkit-mask-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAUCAYAAABiS3YzAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAA9AAAAPQBFLZpEgAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAH/SURBVDiNrdHPa9NgGAfwt3azyzpFEawwVKQ6XDvdQDYQxIGC7OBBhIEIXvwbdvPibVd38iA7eNgOghvdDyZqulpNtJuNNdiCoBtt3JomNmFN86Zt3jevJ6WGsrxb9z0+78OH53leACiz/DH1mLaXKq/W0mM2Qs5ckh89MPSX+pslhBBJURcPBIwL4ijGjkMIIQhj583nzLW2UUlRV0hTCoq60BYY47jrCGOnGd3XtNHx8cPPYiuXeTF3R9b0VdIiJU1Prue+33vBJkfuT04edxs+Vsg8OHcqNBTo7Ax3+P1hJhAIH+lmGNoh6raNDRNu2RhtIuRsbGwX18F7UbxiWrViq4n2GtOqSe9E8RIAAIAFbm1YN6pb7YC6UZXmOW7ovzXeCkKkAuHmfsAqtPJJIRtpeZ/ZeDxa3qn83AtYgfDH609fLux6+OVUqm/HNAtUoGlux3j+PNWPypr2jQYt6XqeCrw1MRE0ILRoUBsh59HT571u45C78HDsdqSHYbpoBujw+303RwYHPNG+070X3bW6bVuSos5b9YbhfgudOBb1RI8Gg/9QhLFTLOuxRCYzfCZ08u4Sl+4vlNSpWqMB//b0dHX3e64kKcpLjB0ia3oiIYhXW/XMsOzZvKw8qTdsSy5rHzxRPpubZtNfb3g2AgDmVrkBPpubBgD4mut/APMGdRxuaiLDAAAAAElFTkSuQmCC');
			}
			starRating span.chosen { background: green; }
			starRating:hover span { background: silver; }
			starRating:hover span.hoverChosen { background: green; }
  	<style>
      this.num = new...

CSS

/** para soportar firefox **/
starRating span{   
    mask:url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="utf-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" [<!ENTITY ns_svg "http://www.w3.org/2000/svg"><!ENTITY ns_xlink "http://www.w3.org/1999/xlink">]><svg xmlns="&ns_svg;" xmlns:xlink="&ns_xlink;" width="20px" height="20px" viewBox="0 0 20 20" ><defs><mask id="maskid" maskUnits="objectBoundingBox"><polygon stroke="%23FFFFFF" fill="%23FFFFFF" stroke-miterlimit="10" points="10,0 13.09,6.583 20,7.639 15,12.764 16.18,20 10,16.583 3.82,20 5,12.764 0,7.639 6.91,6.583  "/></mask></defs><g><polygon stroke="%23FFFFFF" stroke-miterlimit="10" points="10,0 13.09,6.583 20,7.639 15,12.764 16.18,20 10,16.583 3.82,20 5,12.764 0,7.639 6.91,6.583 "/></g></svg>#maskid');
    }

JavaScript

//riot.mount('starRating', { num:10, val:2 })
riot.mount('rating',{'items':[{'title':'calidad','val':2},
    						{'title':'documentación','val':4}]})