|
// retoor <retoor@molodetz.nl>
|
|
|
|
import "jinja" for Environment, DictLoader
|
|
|
|
System.print("=" * 60)
|
|
System.print("JINJA MACROS - Reusable Template Components")
|
|
System.print("=" * 60)
|
|
|
|
var templates = {
|
|
"macro_simple": "{\% macro greet(name) \%}Hello, {{ name }}!{\% endmacro \%}
|
|
{{ greet(\"World\") }}
|
|
{{ greet(\"Alice\") }}
|
|
{{ greet(\"Bob\") }}",
|
|
|
|
"macro_default_args": "{\% macro button(text, type=\"primary\", size=\"medium\", disabled=false) \%}
|
|
<button class=\"btn btn-{{ type }} btn-{{ size }}\"{{ \" disabled\" if disabled else \"\" }}>{{ text }}</button>
|
|
{\% endmacro \%}
|
|
{{ button(\"Submit\") }}
|
|
{{ button(\"Cancel\", \"secondary\") }}
|
|
{{ button(\"Delete\", \"danger\", \"small\") }}
|
|
{{ button(\"Disabled\", \"primary\", \"medium\", true) }}",
|
|
|
|
"macro_with_content": "{\% macro card(title, footer=\"\") \%}
|
|
<div class=\"card\">
|
|
<div class=\"card-header\">{{ title }}</div>
|
|
<div class=\"card-body\">
|
|
{\% for item in content \%}{{ item }}{\% endfor \%}
|
|
</div>
|
|
{\% if footer \%}<div class=\"card-footer\">{{ footer }}</div>{\% endif \%}
|
|
</div>
|
|
{\% endmacro \%}
|
|
{{ card(\"My Card\", \"Footer text\") }}",
|
|
|
|
"macro_input": "{\% macro input(name, type, value, placeholder, required, label) \%}
|
|
<div class=\"form-group\">
|
|
{\% if label \%}<label for=\"{{ name }}\">{{ label }}{\% if required \%} *{\% endif \%}</label>{\% endif \%}
|
|
<input type=\"{{ type|default(\"text\") }}\" id=\"{{ name }}\" name=\"{{ name }}\" value=\"{{ value }}\" placeholder=\"{{ placeholder }}\"{\% if required \%} required{\% endif \%} class=\"form-control\">
|
|
</div>
|
|
{\% endmacro \%}
|
|
{{ input(\"username\", \"text\", \"\", \"Enter username\", true, \"Username\") }}
|
|
{{ input(\"email\", \"email\", \"\", \"\", true, \"Email Address\") }}
|
|
{{ input(\"password\", \"password\", \"\", \"\", true, \"Password\") }}
|
|
{{ input(\"bio\", \"text\", \"\", \"Tell us about yourself\", false, \"\") }}",
|
|
|
|
"macro_select": "{\% macro select(name, options, selected=\"\", label=\"\", required=false) \%}
|
|
<div class=\"form-group\">
|
|
{\% if label \%}<label for=\"{{ name }}\">{{ label }}{\% if required \%} *{\% endif \%}</label>{\% endif \%}
|
|
<select id=\"{{ name }}\" name=\"{{ name }}\" class=\"form-control\"{\% if required \%} required{\% endif \%}>
|
|
<option value=\"\">-- Select --</option>
|
|
{\% for opt in options \%}
|
|
<option value=\"{{ opt.value }}\"{{ \" selected\" if opt.value == selected else \"\" }}>{{ opt.label }}</option>
|
|
{\% endfor \%}
|
|
</select>
|
|
</div>
|
|
{\% endmacro \%}
|
|
{{ select(\"country\", countries, \"us\", \"Country\", true) }}",
|
|
|
|
"macro_table": "{\% macro table(headers, rows, striped=true, bordered=true) \%}
|
|
<table class=\"table{\% if striped \%} table-striped{\% endif \%}{\% if bordered \%} table-bordered{\% endif \%}\">
|
|
<thead>
|
|
<tr>
|
|
{\% for header in headers \%}
|
|
<th>{{ header }}</th>
|
|
{\% endfor \%}
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{\% for row in rows \%}
|
|
<tr>
|
|
{\% for cell in row \%}
|
|
<td>{{ cell }}</td>
|
|
{\% endfor \%}
|
|
</tr>
|
|
{\% else \%}
|
|
<tr><td colspan=\"{{ headers|length }}\">No data available</td></tr>
|
|
{\% endfor \%}
|
|
</tbody>
|
|
</table>
|
|
{\% endmacro \%}
|
|
{{ table(headers, data) }}",
|
|
|
|
"macro_pagination": "{\% macro pagination(current, total, url_pattern=\"?page=\") \%}
|
|
<nav class=\"pagination\">
|
|
{\% if current > 1 \%}
|
|
<a href=\"{{ url_pattern }}{{ current - 1 }}\" class=\"prev\">« Previous</a>
|
|
{\% endif \%}
|
|
|
|
{\% for page in range(1, total + 1) \%}
|
|
{\% if page == current \%}
|
|
<span class=\"current\">{{ page }}</span>
|
|
{\% else \%}
|
|
<a href=\"{{ url_pattern }}{{ page }}\">{{ page }}</a>
|
|
{\% endif \%}
|
|
{\% endfor \%}
|
|
|
|
{\% if current < total \%}
|
|
<a href=\"{{ url_pattern }}{{ current + 1 }}\" class=\"next\">Next »</a>
|
|
{\% endif \%}
|
|
</nav>
|
|
{\% endmacro \%}
|
|
{{ pagination(3, 5) }}",
|
|
|
|
"macro_breadcrumb": "{\% macro breadcrumb(items) \%}
|
|
<nav class=\"breadcrumb\">
|
|
{\% for item in items \%}
|
|
{\% if loop.last \%}
|
|
<span class=\"current\">{{ item.label }}</span>
|
|
{\% else \%}
|
|
<a href=\"{{ item.url }}\">{{ item.label }}</a>
|
|
<span class=\"separator\">/</span>
|
|
{\% endif \%}
|
|
{\% endfor \%}
|
|
</nav>
|
|
{\% endmacro \%}
|
|
{{ breadcrumb(crumbs) }}",
|
|
|
|
"macro_alert": "{\% macro alert(message, type=\"info\", title=\"\", dismissible=true) \%}
|
|
<div class=\"alert alert-{{ type }}{\% if dismissible \%} alert-dismissible{\% endif \%}\" role=\"alert\">
|
|
{\% if dismissible \%}<button type=\"button\" class=\"close\">×</button>{\% endif \%}
|
|
{\% if title \%}<strong>{{ title }}:</strong> {\% endif \%}{{ message }}
|
|
</div>
|
|
{\% endmacro \%}
|
|
{{ alert(\"Operation completed successfully!\", \"success\", \"Success\") }}
|
|
{{ alert(\"Please check your input.\", \"warning\", \"Warning\") }}
|
|
{{ alert(\"An error occurred.\", \"danger\", \"Error\") }}
|
|
{{ alert(\"Here is some helpful information.\", \"info\") }}",
|
|
|
|
"macro_user_card": "{\% macro user_card(user) \%}
|
|
<div class=\"user-card\">
|
|
<div class=\"avatar\">
|
|
<img src=\"{{ user.avatar|default(\"/default-avatar.png\") }}\" alt=\"{{ user.name }}\">
|
|
</div>
|
|
<div class=\"info\">
|
|
<h4>{{ user.name|title }}</h4>
|
|
<p class=\"role\">{{ user.role|default(\"Member\")|title }}</p>
|
|
{\% if user.email \%}<p class=\"email\">{{ user.email }}</p>{\% endif \%}
|
|
{\% if user.bio \%}<p class=\"bio\">{{ user.bio|truncate(100) }}</p>{\% endif \%}
|
|
<div class=\"stats\">
|
|
<span>{{ user.posts|default(0) }} posts</span>
|
|
<span>{{ user.followers|default(0) }} followers</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{\% endmacro \%}
|
|
{\% for user in users \%}
|
|
{{ user_card(user) }}
|
|
{\% endfor \%}",
|
|
|
|
"macro_nav_menu": "{\% macro nav_menu(items, current_path) \%}
|
|
<nav class=\"main-nav\">
|
|
<ul class=\"nav-list\">
|
|
{\% for item in items \%}
|
|
<li class=\"nav-item{\% if item.url == current_path \%} active{\% endif \%}{\% if item.children \%} has-children{\% endif \%}\">
|
|
<a href=\"{{ item.url }}\" class=\"nav-link\">
|
|
{\% if item.icon \%}<i class=\"icon-{{ item.icon }}\"></i> {\% endif \%}
|
|
{{ item.label }}
|
|
</a>
|
|
{\% if item.children \%}
|
|
<ul class=\"sub-menu\">
|
|
{\% for child in item.children \%}
|
|
<li class=\"nav-item{\% if child.url == current_path \%} active{\% endif \%}\">
|
|
<a href=\"{{ child.url }}\" class=\"nav-link\">{{ child.label }}</a>
|
|
</li>
|
|
{\% endfor \%}
|
|
</ul>
|
|
{\% endif \%}
|
|
</li>
|
|
{\% endfor \%}
|
|
</ul>
|
|
</nav>
|
|
{\% endmacro \%}
|
|
{{ nav_menu(menu_items, \"/products\") }}",
|
|
|
|
"macro_form": "{\% macro form_start(action, method=\"POST\", id=\"\", classes=\"\") \%}
|
|
<form action=\"{{ action }}\" method=\"{{ method }}\"{\% if id \%} id=\"{{ id }}\"{\% endif \%}{\% if classes \%} class=\"{{ classes }}\"{\% endif \%}>
|
|
{\% endmacro \%}
|
|
|
|
{\% macro form_end() \%}
|
|
</form>
|
|
{\% endmacro \%}
|
|
|
|
{\% macro hidden(name, value) \%}
|
|
<input type=\"hidden\" name=\"{{ name }}\" value=\"{{ value }}\">
|
|
{\% endmacro \%}
|
|
|
|
{\% macro submit(text=\"Submit\", type=\"primary\") \%}
|
|
<button type=\"submit\" class=\"btn btn-{{ type }}\">{{ text }}</button>
|
|
{\% endmacro \%}
|
|
|
|
{{ form_start(\"/api/contact\", \"POST\", \"contact-form\", \"contact-form\") }}
|
|
{{ hidden(\"csrf_token\", token) }}
|
|
<div class=\"form-row\">
|
|
<label>Name: <input type=\"text\" name=\"name\" required></label>
|
|
</div>
|
|
<div class=\"form-row\">
|
|
<label>Email: <input type=\"email\" name=\"email\" required></label>
|
|
</div>
|
|
<div class=\"form-row\">
|
|
<label>Message: <textarea name=\"message\" rows=\"4\"></textarea></label>
|
|
</div>
|
|
{{ submit(\"Send Message\", \"success\") }}
|
|
{{ form_end() }}",
|
|
|
|
"macro_star_rating": "{\% macro stars(rating, max=5) \%}
|
|
<div class=\"star-rating\" title=\"{{ rating }}/{{ max }}\">
|
|
{\% for i in range(1, max + 1) \%}
|
|
{\% if i <= rating \%}
|
|
<span class=\"star filled\">★</span>
|
|
{\% else \%}
|
|
<span class=\"star empty\">☆</span>
|
|
{\% endif \%}
|
|
{\% endfor \%}
|
|
</div>
|
|
{\% endmacro \%}
|
|
Rating 1: {{ stars(1) }}
|
|
Rating 3: {{ stars(3) }}
|
|
Rating 5: {{ stars(5) }}
|
|
Rating 4/10: {{ stars(4, 10) }}",
|
|
|
|
"macro_progress": "{\% macro progress(value, max=100, label=\"\", color=\"primary\") \%}
|
|
{\% set percentage = (value / max * 100)|round \%}
|
|
<div class=\"progress-container\">
|
|
{\% if label \%}<label>{{ label }}: {{ value }}/{{ max }}</label>{\% endif \%}
|
|
<div class=\"progress\">
|
|
<div class=\"progress-bar bg-{{ color }}\" style=\"width: {{ percentage }}\%\">
|
|
{{ percentage }}\%
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{\% endmacro \%}
|
|
{{ progress(25, 100, \"Downloads\") }}
|
|
{{ progress(75, 100, \"Upload\", \"success\") }}
|
|
{{ progress(50, 100, \"Processing\", \"warning\") }}
|
|
{{ progress(3, 10, \"Steps\", \"info\") }}"
|
|
}
|
|
|
|
var env = Environment.new(DictLoader.new(templates))
|
|
|
|
System.print("\n" + "-" * 60)
|
|
System.print("1. SIMPLE MACRO")
|
|
System.print("-" * 60)
|
|
System.print(env.getTemplate("macro_simple").render({}))
|
|
|
|
System.print("\n" + "-" * 60)
|
|
System.print("2. MACRO WITH DEFAULT ARGUMENTS")
|
|
System.print("-" * 60)
|
|
System.print(env.getTemplate("macro_default_args").render({}))
|
|
|
|
System.print("\n" + "-" * 60)
|
|
System.print("3. FORM INPUT MACRO")
|
|
System.print("-" * 60)
|
|
System.print(env.getTemplate("macro_input").render({}))
|
|
|
|
System.print("\n" + "-" * 60)
|
|
System.print("4. SELECT DROPDOWN MACRO")
|
|
System.print("-" * 60)
|
|
System.print(env.getTemplate("macro_select").render({
|
|
"countries": [
|
|
{"value": "us", "label": "United States"},
|
|
{"value": "uk", "label": "United Kingdom"},
|
|
{"value": "ca", "label": "Canada"},
|
|
{"value": "au", "label": "Australia"}
|
|
]
|
|
}))
|
|
|
|
System.print("\n" + "-" * 60)
|
|
System.print("5. TABLE MACRO")
|
|
System.print("-" * 60)
|
|
System.print(env.getTemplate("macro_table").render({
|
|
"headers": ["ID", "Name", "Email", "Status"],
|
|
"data": [
|
|
[1, "Alice", "alice@example.com", "Active"],
|
|
[2, "Bob", "bob@example.com", "Active"],
|
|
[3, "Charlie", "charlie@example.com", "Inactive"]
|
|
]
|
|
}))
|
|
|
|
System.print("\n" + "-" * 60)
|
|
System.print("6. PAGINATION MACRO")
|
|
System.print("-" * 60)
|
|
System.print(env.getTemplate("macro_pagination").render({}))
|
|
|
|
System.print("\n" + "-" * 60)
|
|
System.print("7. BREADCRUMB MACRO")
|
|
System.print("-" * 60)
|
|
System.print(env.getTemplate("macro_breadcrumb").render({
|
|
"crumbs": [
|
|
{"label": "Home", "url": "/"},
|
|
{"label": "Products", "url": "/products"},
|
|
{"label": "Electronics", "url": "/products/electronics"},
|
|
{"label": "Laptops", "url": "/products/electronics/laptops"}
|
|
]
|
|
}))
|
|
|
|
System.print("\n" + "-" * 60)
|
|
System.print("8. ALERT MACRO")
|
|
System.print("-" * 60)
|
|
System.print(env.getTemplate("macro_alert").render({}))
|
|
|
|
System.print("\n" + "-" * 60)
|
|
System.print("9. USER CARD MACRO")
|
|
System.print("-" * 60)
|
|
System.print(env.getTemplate("macro_user_card").render({
|
|
"users": [
|
|
{
|
|
"name": "alice smith",
|
|
"role": "admin",
|
|
"email": "alice@example.com",
|
|
"avatar": "/avatars/alice.jpg",
|
|
"bio": "Software engineer with 10 years of experience in web development and cloud architecture.",
|
|
"posts": 42,
|
|
"followers": 1250
|
|
},
|
|
{
|
|
"name": "bob jones",
|
|
"email": "bob@example.com",
|
|
"posts": 15,
|
|
"followers": 300
|
|
}
|
|
]
|
|
}))
|
|
|
|
System.print("\n" + "-" * 60)
|
|
System.print("10. NAVIGATION MENU MACRO (RECURSIVE)")
|
|
System.print("-" * 60)
|
|
System.print(env.getTemplate("macro_nav_menu").render({
|
|
"menu_items": [
|
|
{"label": "Home", "url": "/", "icon": "home"},
|
|
{
|
|
"label": "Products",
|
|
"url": "/products",
|
|
"icon": "box",
|
|
"children": [
|
|
{"label": "Electronics", "url": "/products/electronics"},
|
|
{"label": "Clothing", "url": "/products/clothing"},
|
|
{"label": "Books", "url": "/products/books"}
|
|
]
|
|
},
|
|
{"label": "About", "url": "/about", "icon": "info"},
|
|
{"label": "Contact", "url": "/contact", "icon": "envelope"}
|
|
]
|
|
}))
|
|
|
|
System.print("\n" + "-" * 60)
|
|
System.print("11. FORM HELPERS")
|
|
System.print("-" * 60)
|
|
System.print(env.getTemplate("macro_form").render({
|
|
"token": "abc123xyz789"
|
|
}))
|
|
|
|
System.print("\n" + "-" * 60)
|
|
System.print("12. STAR RATING MACRO")
|
|
System.print("-" * 60)
|
|
System.print(env.getTemplate("macro_star_rating").render({}))
|
|
|
|
System.print("\n" + "-" * 60)
|
|
System.print("13. PROGRESS BAR MACRO")
|
|
System.print("-" * 60)
|
|
System.print(env.getTemplate("macro_progress").render({}))
|
|
|
|
System.print("\n" + "=" * 60)
|
|
System.print("End of Macros Demo")
|
|
System.print("=" * 60)
|