Skip to content

Commit

Permalink
Show source in the kitchen sink
Browse files Browse the repository at this point in the history
  • Loading branch information
@laffra
laffra committed Nov 13, 2023
1 parent 856b4a9 commit 9cebf83
Show file tree
Hide file tree
Showing 10 changed files with 202 additions and 189 deletions.
55 changes: 23 additions & 32 deletions examples/custom.py
View file
Original file line number Diff line number Diff line change
@@ -1,40 +1,31 @@
# LTK - Copyrights Reserved 2023 - chrislaffra.com - See LICENSE

import inspect
import ltk

# Create a new widget, based on VBox
class ImageWithLabel(ltk.VBox):
classes = [ "custom" ]

def __init__(self, src, label):
ltk.VBox.__init__(self,
# Add two widgets. Styling could be done in external CSS
ltk.Image(src)
# CSS selector would be ".custom .ltk-image"
.css("width", 196),
ltk.Text(label)
# CSS selector would be ".custom .ltk-text"
.css("width", "100%")
.css("text-align", "center")
)
def create():

class CustomWidget(ltk.VBox):
classes = [ "custom" ]

def __init__(self, src, label):
ltk.VBox.__init__(self,
ltk.Image(src).css("width", 196),
ltk.Text(label).css("width", "100%").css("text-align", "center")
)
self.element.css("border", "2px solid orange")

def create():
# Create the custom widget and add an orange border for clarity
custom_widget = ImageWithLabel(
"https://chrislaffra.com/chris.png",
"Chris laffra"
).css("border", "2px solid orange")

return ltk.VBox(
ltk.H2("Showing a Card with a custom widget inside of it"),
ltk.Card(custom_widget)
.css("width", 200)
.draggable(),
ltk.Text("For clarity, we marked the custom widget orange.")
.css("margin-top", 20),
ltk.H4("Tip: drag the card."),
ltk.Link(href="https://github.com/laffra/ltk/blob/main/examples/custom.py")
.attr("target", "_blank")
.text("source")
).attr("name", "Custom")
return (
ltk.VBox(
ltk.H2("Showing a Card with a custom widget inside of it"),
ltk.Card(
CustomWidget("https://chrislaffra.com/chris.png", "Chris laffra")
).css("width", 200).draggable(),
ltk.Text("For clarity, we marked the custom widget orange.").css("margin-top", 20),
ltk.H4("Tip: drag the card."),
)
.attr("name", "Custom") # example
.attr("src", inspect.getsource(create)) # example
)
16 changes: 7 additions & 9 deletions examples/helloworld.py
View file
Original file line number Diff line number Diff line change
@@ -1,17 +1,15 @@
# LTK - Copyrights Reserved 2023 - chrislaffra.com - See LICENSE

import inspect
import ltk


def create():
return (
ltk.VBox(
ltk.Text("Hello World 🎉")
.css("padding", 100)
.css("background-color", "orange")
.css("font-size", 42),
ltk.Link(href="https://github.com/laffra/ltk/blob/main/examples/helloworld.py")
.attr("target", "_blank")
.text("source")
).attr("name", "Hello World")
ltk.Text("Hello World 🎉")
.css("padding", "100px 10px")
.css("background-color", "orange")
.css("font-size", 42)
.attr("name", "Hello World") # example
.attr("src", inspect.getsource(create)) # example
)
87 changes: 33 additions & 54 deletions examples/table.py
View file
Original file line number Diff line number Diff line change
@@ -1,60 +1,8 @@
# LTK - Copyrights Reserved 2023 - chrislaffra.com - See LICENSE

import inspect
import ltk

# Create an HTML table to display country temperature data
# Use LTK widgets to generate the table structure

def create():
# In this example we construct the UI by iteratively appending to a container.
# Elements are added to the container using jQuery "append" and "appendTo" calls.
# The table itself is created with a more declarative creation pattern.
container = ltk.Container().attr("name", "HTML Tables")

# DOM elements can be created using ltk objects, or directly with HTML.
container.append(
ltk.create("""
<h1>
HTML Table created in Python
</h1>
""")
)

# Resize options to be used for the first colum. We pass a Python dict
# to JavaScript and convert it to a map using the "to_js" function.
resize_options = ltk.to_js({
"handles": "e",
"alsoResize": ".country",
})

ltk.Table(
# Create a table with headers for country and temperature.
ltk.TableRow(
ltk.TableHeader("Country")
.css("border-right", "2px solid orange")
.resizable(resize_options),
ltk.TableHeader("Yearly Average Temperature")
),
# Populate the table rows with country and temperature data.
[
ltk.TableRow(
ltk.TableData(country).addClass("country"),
ltk.TableData(temperature),
)
for country, temperature in get_averages().items()
],
).appendTo(container)

container.append(
ltk.H4("Tip: resize the country column using the orange handle."),
ltk.Link(href="https://github.com/laffra/ltk/blob/main/examples/table.py")
.attr("target", "_blank")
.text("source")
)

return container


def get_averages():
return {
"Afghanistan": 12.6,
Expand All @@ -66,4 +14,35 @@ def get_averages():
"Argentina": 14.8,
"Armenia": 7.15,
"Australia": 21.65,
}
}

resize_options = ltk.to_js({
"handles": "e",
"alsoResize": ".country",
})


def create():
return (
ltk.Container(
ltk.create("<h1>HTML Table created in Python</h1>"),
ltk.Table(
ltk.TableRow(
ltk.TableHeader("Country")
.css("border-right", "2px solid orange")
.resizable(resize_options),
ltk.TableHeader("Yearly Average Temperature")
),
[
ltk.TableRow(
ltk.TableData(country).addClass("country"),
ltk.TableData(temperature),
)
for country, temperature in get_averages().items()
],
),
ltk.H4("Tip: resize the country column using the orange handle."),
)
.attr("name", "HTML Tables") # example
.attr("src", inspect.getsource(create)) # example
)
61 changes: 19 additions & 42 deletions examples/tictactoe.py
View file
Original file line number Diff line number Diff line change
@@ -1,25 +1,9 @@
# LTK - Copyrights Reserved 2023 - chrislaffra.com - See LICENSE

import inspect
import ltk

# Tic Tac Toe Game
#
# This implements a simple Tic Tac Toe game in PyScript using the LTK toolkit.
# It draws a Tic Tac Toe board that allows clicking squares to place X and O marks alternately.
#
# The UI uses LTK widget classes:
# - Container for each square
# - VBox and HBox to create the grid
# - Text for the X and O labels
#
# This provides an interactive grid layout without needing much explicit layout code.

def choose(event):
#
# This event handler is attached to each square container:
# - The handler checks if the square is empty
# - If empty, it adds an X or O text label based on whose turn it is
#
square = ltk.find(event.target)
if not square.text():
square.append(
Expand All @@ -29,37 +13,30 @@ def choose(event):


def enter(event):
# First erase all existing squares
ltk.find(".square").css("background", "white")

# Highlight the current square, but only if does not contain a choice already
square = ltk.jQuery(event.target)
if not square.text():
square.css("background", "lightblue")


def create():
# Set up the game board:
# - Create a 3x3 grid of Container widgets to represent the board squares
# - Attach a click handler to each square container
# - Add the grid containers into a nested VBox/HBox layout
# - Render the layout into the #example div
return ltk.Div(
ltk.H2("Tic Tac Toe Game"),
ltk.VBox(
ltk.HBox(
ltk.Container()
.addClass("square")
.on("click", ltk.proxy(choose))
.on("mouseenter", ltk.proxy(enter))
for column in range(3)
)
for row in range(3)
),
ltk.H4("Tip: Click inside the squares."),
ltk.Link(href="https://github.com/laffra/ltk/blob/main/examples/tictactoe.py")
.attr("target", "_blank")
.text("source")
).attr("name", "Tic Tac Toe")
return (
ltk.Div(
ltk.H2("Tic Tac Toe Game"),
ltk.VBox(
ltk.HBox(
ltk.Container()
.addClass("square")
.on("click", ltk.proxy(choose))
.on("mouseenter", ltk.proxy(enter))
for column in range(3)
)
for row in range(3)
),
ltk.H4("Tip: Click inside the squares."),
)
.attr("name", "Tic Tac Toe") # example
.attr("src", inspect.getsource(create)) # example
)

ltk.inject(__file__, "tictactoe.css")
7 changes: 1 addition & 6 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,11 +38,6 @@ <h1>The PyScript LTK Kitchen Sink</h1>
</py-config>

<!-- Create all the examples and add them to the DOM -->
<py-script>
import ltk, examples
ltk.body.append(
ltk.Tabs(examples.elements)
)
</py-script>
<py-script src="main.py"></py-script>
</body>
</html>
85 changes: 43 additions & 42 deletions ltk/__init__.py
View file
Original file line number Diff line number Diff line change
@@ -1,61 +1,62 @@
# LTK - Copyrights Reserved 2023 - chrislaffra.com - See LICENSE

from ltk.jquery import find
from ltk.jquery import body
from ltk.jquery import console
from ltk.jquery import create
from ltk.jquery import delete
from ltk.jquery import document
from ltk.jquery import find
from ltk.jquery import find_list
from ltk.jquery import time
from ltk.jquery import number
from ltk.jquery import schedule
from ltk.jquery import repeat
from ltk.jquery import repeat
from ltk.jquery import get
from ltk.jquery import delete
from ltk.jquery import get_url_parameter
from ltk.jquery import head
from ltk.jquery import inject
from ltk.jquery import inject_css
from ltk.jquery import inject_script
from ltk.jquery import jQuery
from ltk.jquery import local_storage
from ltk.jquery import number
from ltk.jquery import parse_float
from ltk.jquery import parse_int
from ltk.jquery import post
from ltk.jquery import proxy
from ltk.jquery import get_url_parameter
from ltk.jquery import set_url_parameter
from ltk.jquery import push_state
from ltk.jquery import repeat
from ltk.jquery import repeat
from ltk.jquery import schedule
from ltk.jquery import set_url_parameter
from ltk.jquery import time
from ltk.jquery import to_js
from ltk.jquery import inject


from ltk.jquery import jQuery
from ltk.jquery import console
from ltk.jquery import window
from ltk.jquery import document
from ltk.jquery import body
from ltk.jquery import head
from ltk.jquery import parse_int
from ltk.jquery import parse_float
from ltk.jquery import local_storage


from ltk.widgets import HBox
from ltk.widgets import VBox
from ltk.widgets import Div
from ltk.widgets import Container
from ltk.widgets import Card
from ltk.widgets import Preformatted
from ltk.widgets import Text
from ltk.widgets import Input
from ltk.widgets import Button
from ltk.widgets import Tabs
from ltk.widgets import Card
from ltk.widgets import Code
from ltk.widgets import Container
from ltk.widgets import Div
from ltk.widgets import File
from ltk.widgets import Link
from ltk.widgets import Table
from ltk.widgets import TableRow
from ltk.widgets import TableHeader
from ltk.widgets import TableData
from ltk.widgets import Image
from ltk.widgets import MenuBar
from ltk.widgets import MenuLabel
from ltk.widgets import Menu
from ltk.widgets import Popup
from ltk.widgets import MenuPopup
from ltk.widgets import MenuItem
from ltk.widgets import H1
from ltk.widgets import H2
from ltk.widgets import H3
from ltk.widgets import H4
from ltk.widgets import HBox
from ltk.widgets import Image
from ltk.widgets import Input
from ltk.widgets import Link
from ltk.widgets import Menu
from ltk.widgets import MenuBar
from ltk.widgets import MenuItem
from ltk.widgets import MenuLabel
from ltk.widgets import MenuPopup
from ltk.widgets import Popup
from ltk.widgets import Preformatted
from ltk.widgets import Table
from ltk.widgets import TableData
from ltk.widgets import TableHeader
from ltk.widgets import TableRow
from ltk.widgets import Tabs
from ltk.widgets import Text
from ltk.widgets import TextArea
from ltk.widgets import VBox

inject(__file__, "ltk.js", "ltk.css")
Loading

0 comments on commit 9cebf83

Please sign in to comment.