Hi,I built a custom star ratings component, you can simply set or read the color, font size and ratings.
May be someone would like to use it on their webapp.
May be someone would like to use it on their webapp.
B4X:
Sub Class_Globals
Public ABMComp As ABMCustomComponent
Private myColor As String
Private myFontSize As String
Private myRatings As String
End Sub
'Initializes the object. You can add parameters To this method If needed.
Public Sub Initialize(InternalPage As ABMPage, ID As String, initColor As String, initFontSize As String, initRatings As String)
myColor=initColor
myFontSize=initFontSize
myRatings=initRatings
Dim CSS As String
CSS=":root {" & _
"--my-ratings: " & myRatings & ";" & _
"--my-color: " & myColor & ";" & _
"--my-font-size: " & myFontSize & ";" & _
"}"
CSS=CSS & $"
.stars-container {
font-family:"FontAwesome";
position: relative;
display: inline-block;
color: transparent;
//font-size: 40px;
font-size:var(--my-font-size);
}
.stars-container:before {
position: absolute;
top: 0;
left: 0;
color: #eff0f5;
content: '\\f005\\f005\\f005\\f005\\f005';
}
.stars-container:after {
position: absolute;
top: 0;
left: 0;
content:'\\f005\\f005\\f005\\f005\\f005';
overflow: hidden;
//color:#faca51;
color: var(--my-color);
width: var(--my-ratings);
}
"$
ABMComp.Initialize("ABMComp", Me, InternalPage, ID,CSS)
End Sub
Sub ABMComp_Build(InternalPage As ABMPage, internalID As String) As String
'Return "<div id='my_div' class=" & "'" & myClass & "'>" & Chr(61445) & Chr(61445) & Chr(61445) & Chr(61445) & Chr(61445) & "</div>"
Return "<div class='stars-container'>" & Chr(61445) & Chr(61445) & Chr(61445) & Chr(61445) & Chr(61445) & "</div>"
End Sub
public Sub GetRating(InternalPage As ABMPage) As String
Dim script As String
script=$"
var style = getComputedStyle(document.body);
return style.getPropertyValue('--my-ratings');
"$
Dim ret As Future = InternalPage.ws.EvalWithResult(script, Null)
InternalPage.ws.Flush
Return ret.Value
End Sub
public Sub GetFontSize(InternalPage As ABMPage) As String
Dim script As String
script=$"
var style = getComputedStyle(document.body);
return style.getPropertyValue('--my-font-size');
"$
Dim ret As Future = InternalPage.ws.EvalWithResult(script, Null)
InternalPage.ws.Flush
Return ret.Value
End Sub
public Sub GetColor(InternalPage As ABMPage) As String
Dim script As String
script=$"
var style = getComputedStyle(document.body);
return style.getPropertyValue('--my-color');
"$
Dim ret As Future = InternalPage.ws.EvalWithResult(script, Null)
InternalPage.ws.Flush
Return ret.Value
End Sub
public Sub SetRating(InternalPage As ABMPage, value As String) {
Dim script As String
script="document.documentElement.style.setProperty('--my-ratings'," & "'" & value & "'" & "); "
InternalPage.ws.Eval(script, Null)
InternalPage.ws.Flush
End Sub
public Sub SetFontSize(InternalPage As ABMPage, value As String) {
Dim script As String
script="document.documentElement.style.setProperty('--my-font-size'," & "'" & value & "'" & "); "
InternalPage.ws.Eval(script, Null)
InternalPage.ws.Flush
End Sub
public Sub SetColor(InternalPage As ABMPage, value As String) {
Dim script As String
script="document.documentElement.style.setProperty('--my-color'," & "'" & value & "'" & "); "
InternalPage.ws.Eval(script, Null)
InternalPage.ws.Flush
End Sub