SpiderBasic

Code: Select all

ExamineDesktops()
Global deskwidth.i = DesktopWidth(0)
Global deskheight.i = DesktopHeight(0)

Procedure OnResize()
  
  ExamineDesktops()
  deskwidth = DesktopWidth(0)
  deskheight = DesktopHeight(0)
  
  Debug "Resized W : " + Str(deskwidth)
  Debug "Resized H : " + Str(deskheight)
  
  ResizeWindow(0,#PB_Ignore,#PB_Ignore,deskwidth,deskheight)
  ResizeGadget(0,#PB_Ignore,#PB_Ignore,deskwidth,deskheight)
  
EndProcedure

Procedure AppendBody(content.s)
  !$("body").append(v_content);
EndProcedure

; Procedure AppendContent(component.i,content.s)
;     GID = GadgetID(component)
;     ! $(v_gid.div).append(v_content);
; EndProcedure

Procedure AppendContent(component.i,content.s, Position = #PB_Ignore)
  GID = GadgetID(component)
  If Position <> #PB_Ignore
    ! $(".card:eq(" + v_position + ")").prepend(v_content);
  Else
    ! $(v_gid.div).append(v_content);
  EndIf
EndProcedure

Procedure teste()
  Debug "asdas"
 AppendContent(0,"<div class='card' style='width: 18rem;'>" +
                  " <img class='card-img-top' src='https://baladapp.s3.amazonaws.com/evento/15735/foto_evento/34ff6d57e87b8b8db0ad9691a8f086c1.jpg' alt='Imagem de capa do card'>" +
                  " <div class='card-body'>" +
                  "   <h5 class='card-title'>0Título do card</h5>" +
                  "   <p class='card-text'>heuheheuheuheuheuheu </p>" +
                  "   <a href='#' class='btn btn-primary' onclick='f_teste()'>Visitar</a>" +
                  " </div>" +
                  "</div>", 0)
EndProcedure  

Procedure Main()
  
  OpenWindow(0, 0, 0, 600, 600, "",#PB_Window_Background)
  
  ScrollAreaGadget(0, 0, 0, deskwidth, deskheight,600,600) : CloseGadgetList()
  
  AppendContent(0,"<nav class='navbar navbar-expand-lg navbar-light bg-light'>"+
  "<a class='navbar-brand' href='#'>Navbar</a>"+
  "<button class='navbar-toggler' type='button' Data-toggle='collapse' Data-target='#navbarNavDropdown' aria-controls='navbarNavDropdown' aria-expanded='false' aria-label='Alterna navegação'>"+
  "  <span class='navbar-toggler-icon'></span>"+
  "</button>"+
  "<div class='collapse navbar-collapse' id='navbarNavDropdown'>"+
  "  <ul class='navbar-nav'>"+
  "    <li class='nav-item active'>"+
  "      <a class='nav-link' href='#'>Home <span class='sr-only'>(Página atual)</span></a>"+
  "    </li>"+
  "    <li class='nav-item'>"+
  "      <a class='nav-link' href='#'>Destaques</a>"+
  "    </li>"+
  "    <li class='nav-item'>"+
  "      <a class='nav-link' href='#'>Preços</a>"+
  "    </li>"+
  "    <li class='nav-item dropdown'>"+
  "      <a class='nav-link dropdown-toggle' href='#' id='navbarDropdownMenuLink' role='button' Data-toggle='dropdown' aria-haspopup='true' aria-expanded='false'>"+

  "      Link dropdown"+
  "      </a>"+
  "      <div class='dropdown-menu' aria-labelledby='navbarDropdownMenuLink'>"+
  "        <a class='dropdown-item' href='#'>Ação</a>"+
  "        <a class='dropdown-item' href='#'>Outra ação</a>"+
  "        <a class='dropdown-item' href='#'>Algo mais aqui</a>"+
  "      </div>"+
  "    </li>"+
  "  </ul>"+
  "</div>"+
"</nav>") 
  
  tmp$ = ""
  
  For i = 0 To 5
    
    tmp$ = tmp$ + "<div class='card' style='max-width:319px;'>" +
    " <img class='card-img-top' src='https://baladapp.s3.amazonaws.com/evento/15669/foto_evento/8fb1a4785ebf2f94ec8349a92e73790b.jpg' alt='Imagem de capa do card'> "+       
    "<div class='card-block text-center'>" +
    "		<h4 class='card-title'>id = "+Str(Random(99999,1))+"</h4>" +
    "		<p class='card-text'>My Example</p> " +
    "		<a href='http://mysite.com' class='btn btn-success'>Button</a>" +
    "	</div>" +
    "	</div>" +
    " "
    
  Next i
  
  For i = 0 To 5
    
    tmp$ = tmp$ + "<div class='card' style='max-width:319px;'>" +
    " <img class='card-img-top' src='https://baladapp.s3.amazonaws.com/evento/15644/foto_evento/ef1e667cf697899be9b1424a1e2e14df.jpg' alt='Imagem de capa do card'> "+       
    "<div class='card-block text-center'>" +
    "		<h4 class='card-title'>id = "+Str(Random(99999,1))+"</h4>" +
    "		<p class='card-text'>My Example</p> " +
    "		<a href='http://mysite.com' class='btn btn-success'>Button</a>" +
    "	</div>" +
    "	</div>" +
    " "
    
  Next i  
  
  ;https://baladapp.s3.amazonaws.com/evento/15644/foto_evento/ef1e667cf697899be9b1424a1e2e14df.jpg
  
  AppendContent(0,"<div class='container'> " + 
      "<div class='row'> " + 
      "  <div class='col-xs-12 col-sm-6 col-md-4 col-lg-3 col-xl-2 red'> " + 
      "    Hello world " + 
      "  </div> " + 

      "  <div class='col-xs-12 col-sm-6 col-md-4 col-lg-3 col-xl-2 green'> " + 
      "    Hello world " + 
      "  </div> " + 

      "  <div class='col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12'> " + 
      "  	<br /> " + 

      "  	<div class='card-columns'>" +

        tmp$ +
      
      " </div> " +
     " </div> " +
    "</div>") 

  
EndProcedure

Procedure init(URL$, Success)
    Debug "Script URL: " + URL$
    Debug "Loading status: " + Success
    
    ! $("<link rel='stylesheet' type='text/css'>").attr("href", "https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css").appendTo("head");

    ! require(["https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.bundle.min.js"], function() {
    Main()
    ! });
    
EndProcedure

BindEvent(#PB_Event_SizeDesktop,@OnResize())

LoadScript("custom.css", @init(), #PB_Script_CSS)

Code: Select all

[...]
    "      <a class='btn btn-success' onClick='f_buttonclick(" + i + ")' >Button</a>" +
[...]

Code: Select all

Procedure ButtonClick(index)
  MessageRequester("ButtonClick(" + index + ")")
EndProcedure