Customer Banners (Ads) - SpiceUp. AX and SpotfireX Disclaimer



If you find this site useful and you want to support, buy me a coffee   to keep this site alive and without ads.

star rating widget




html

<div  id='rating1'></div>
<div  id="dp1"><SpotfireControl id="3611e2f370ae4c2ab6786da2afd8c5e0" />
</div>

js

//script parameters
dp="dp1"
id="rating1"
options="1,2,3,4,5"
icon="★"


let inputs=[]
options.split(",").reverse().forEach((el,i)=>{
let anInput = `
    <input type="radio" name="rate_${options.split(",").join("")}" id="star${i}" value="${el}" />
<label for="star${i}" title="${el} rating">${el} rating</label>
`
inputs.push(anInput)
})


document.getElementById(id).innerHTML  = `
  <div class="rate_${id}">
${inputs.join("")}
  </div> 
  <span style="clear:both"> </span>
  
  <style>  
.rate_${id} {
float: left;
height: 50px;
padding: 0 0 0 54px;
}
.rate_${id}:not(:checked) > input {
position:absolute;
top:-9999px;
}
.rate_${id}:not(:checked) > label {
float:right;
width:1em;
overflow:hidden;
white-space:nowrap;
cursor:pointer;
font-size:30px; 
color:#ccc;
}
.rate_${id}:not(:checked) > label:before {
content: '${icon}';
padding:8px;
}
.rate_${id} > input:checked ~ label {
color: #ffc700;    
}
.rate_${id}:not(:checked) > label:hover,
.rate_${id}:not(:checked) > label:hover ~ label {
color: #deb217;  
}
.rate_${id} > input:checked + label:hover,
.rate_${id} > input:checked + label:hover ~ label,
.rate_${id} > input:checked ~ label:hover,
.rate_${id} > input:checked ~ label:hover ~ label,
.rate_${id} > label:hover ~ input:checked ~ label {
color: #c59b08;
}

  </style>`;

document.querySelectorAll(`.rate_${id} input`).forEach(e => {
e.addEventListener('click',(ev) => {
sfInput = document.querySelector("#"+dp+" input")
sfInput.value=ev.srcElement.value
sfInput.focus()
sfInput.blur()
});
})

1 comment:

Edoardo said...

Hi Jose, I needed to hide the Spotfire document properties, so I added "display:none" to it, but the DP value doesn't update anymore.

Do you have any suggestions?

Thank you!
Edoardo