B4J Code Snippet [ABMaterial] Star Ratings custom component

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.

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
 
Top