Mobile UI Style Attribute

[Ken]

This works

Code: Select all

ButtonMobile(#title, "Hello World")
SetMobileAttribute(#title, "style", "margin:25px;color:red;") ; 
Debug GetMobileAttribute(#title, "style")

This do not work

Code: Select all

TextMobile(#title, "Hello World")
SetMobileAttribute(#title, "style", "margin:25px;color:red;") ; 
Debug GetMobileAttribute(#title, "style")

Error is: Cannot read properties of undefined(reading 'attr')

(I am using 3.1. Actually 3.2 does not work with Mobile UI. I have windows 10)

[bembulak]

I've investigated a little.

TextMobile() creates a <DIV> with no id, class, style or whatsoever in the generated HTML/JS.

Example:

Code: Select all

Enumeration
  #title
  #text  
EndEnumeration


If ContainerMobile(#PB_Any, #PB_Mobile_Page)
  
; Works:
ButtonMobile(#title, "Hello World")
SetMobileAttribute(#title, "id", "my_title")

; Does not work
TextMobile(#text , "MyText", #PB_Mobile_Center)
SetMobileAttribute(#text, "id", "my_text")

CloseMobileContainer()
EndIf

I'm not sure if it's working as intended (Text being just text) or it's a bug.
Either way: If we were able to set an ID to the text, we could fiddle with it using inline JS.

However, using HTMLMobile() at least gives us a way to fiddle with it.

Code: Select all

HtmlMobile("<div id='my_text' class='list-item__subtitle'>My Text 2</div>")

We can access the element via inline JS.

[Ken]

HtmlMobile is solid solution but I think it will break the layout in three slot containers easily.

But anyway you would think that you could add style to TextMobile (and same problem is with IconMobile) using Spiderbasic syntax because it is available. Thinks gets complicated if you all the time need to use javascript or html to fix something. The point using Spiderbasic vanish. We want to use Spiderbasic to solve problems.

[Ken]

Did concentrate to IconMobile now.
Obviously this would be the simplest option (the Spiderbasic way) but it do not work:

Code: Select all

 ; Create the icon and store its ID
    IconMobile(1, "fa-fighter-jet", #PB_Mobile_Left)
    SetMobileAttribute(1, "size", "35px")  ; Set the size attribute

Anyway when we use different icons we can use this approach:

Code: Select all

IconMobile(1, "fa-fighter-jet", #PB_Mobile_Left)
    ; Find the icon by its icon attribute and set size
    ! var icon = document.querySelector('ons-icon[icon="fa-fighter-jet"]');
    ! if (icon) icon.setAttribute('size', '35px');
    ! if (icon) icon.setAttribute('spin','');
    ! if (icon) icon.setAttribute('style', "color:red;");

If you have multiple the same name then just the last one:

Code: Select all

 IconMobile(1, "fa-fighter-jet", #PB_Mobile_Left)
    
    ; Get all md-face icons and modify the last one added (index -1 means last)
    ! var icons = document.querySelectorAll('ons-icon[icon="fa-fighter-jet"]');
    ! if (icons.length > 0) icons[icons.length - 1].setAttribute('size', '35px');

Or if you want cleaner code using event handler

Code: Select all

Procedure InitUI()
  ! var icon = document.querySelector('ons-icon[icon="fa-fighter-jet"]');
  ! if (icon) icon.setAttribute('size', '35px');
EndProcedure

If ContainerMobile(#PB_Any, #PB_Mobile_Page)
  ListMobile(0)
  
  If AddListMobileItem(0, "", #PB_Mobile_Container)
    IconMobile(1, "fa-fighter-jet", #PB_Mobile_Left)
    
    If ContainerMobile(#PB_Any, #PB_Mobile_Section, "", "")
      TextMobile(#PB_Any, "Nice fighterjet", #PB_Mobile_Left)
      HtmlMobile("<span style='font-size:0.9em; color:#999;'>On the Internet</span>")
      CloseMobileContainer()
    EndIf
    
    CloseMobileContainer()
  EndIf
  
  CloseMobileContainer()
EndIf

; Call after UI creation
InitUI()

And if you have timing requirements:

Code: Select all

If ContainerMobile(#PB_Any, #PB_Mobile_Page)
  ListMobile(0)
  
  If AddListMobileItem(0, "", #PB_Mobile_Container)
    IconMobile(1, "fa-fighter-jet", #PB_Mobile_Left)
    
    ; Use JavaScript setTimeout to delay execution
    ! setTimeout(function() {
    !   var icon = document.querySelector('ons-icon[icon="fa-fighter-jet"]');
    !   if (icon) icon.setAttribute('size', '35px');
    ! }, 2000);
    
    If ContainerMobile(#PB_Any, #PB_Mobile_Section, "", "")
      TextMobile(#PB_Any, "Nice fighterjet", #PB_Mobile_Left)
      HtmlMobile("<span style='font-size:0.9em; color:#999;'>On the Internet</span>")
      CloseMobileContainer()
    EndIf
    
    CloseMobileContainer()
  EndIf
  
  CloseMobileContainer()
EndIf

And if you need click event and some animation:

Code: Select all

Enumeration
  #MyList
EndEnumeration

If ContainerMobile(#PB_Any, #PB_Mobile_Page)
  ListMobile(#MyList)
  
  If AddListMobileItem(#MyList, "", #PB_Mobile_Container | #PB_Mobile_Tappable)
    IconMobile(1, "md-thumb-up", #PB_Mobile_Left)
    
    ! setTimeout(function() {
    !   var icon = document.querySelector('ons-icon[icon="md-thumb-up"]');
    !   if (icon) icon.setAttribute('size', '35px');
    ! }, 100);
    
    ; Add CSS for click animation
    ! var style = document.createElement('style');
    ! style.textContent = '@keyframes clickBounce { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.5); } }';
    ! document.head.appendChild(style);
    
    If ContainerMobile(#PB_Any, #PB_Mobile_Section, "", "")
      TextMobile(#PB_Any, "I like Spiderbasic", #PB_Mobile_Left)
      HtmlMobile("<span style='font-size:0.9em; color:#999;'>Tap to like</span>")
      CloseMobileContainer()
    EndIf
    
    CloseMobileContainer()
  EndIf
  
  CloseMobileContainer()
EndIf

Procedure MobileEvents()
  Select EventMobile()
    Case #MyList
      ; Animate icon on click
      ! var icon = document.querySelector('ons-icon[icon="md-thumb-up"]');
      ! if (icon) {
      !   icon.style.animation = 'none';
      !   setTimeout(function() {
      !     icon.style.animation = 'clickBounce 0.5s ease';
      !   }, 10);
      ! }
  EndSelect
EndProcedure

BindEvent(#PB_Event_Mobile, @MobileEvents())