Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

add examples and some qol changes throughout #13

Merged
merged 1 commit into from
Nov 22, 2024
Merged

add examples and some qol changes throughout #13

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
44 changes: 44 additions & 0 deletions examples/tabs-htmx/content.gohtml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
<div class="container mt-5">
<!-- Tab Navigation -->
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item">
<span class="nav-link {{ ifRequestedSelect "active" "tab1" ""}}" style="cursor:pointer;" hx-get="/" hx-target="#content" x-select="tab1">Tab 1</span>
</li>
<li class="nav-item">
<span class="nav-link {{ ifRequestedSelect "active" "tab2"}}" style="cursor:pointer;" hx-get="/" hx-target="#content" x-select="tab2">Tab 2</span>
</li>
<li class="nav-item">
<span class="nav-link {{ ifRequestedSelect "active" "tab3"}}" style="cursor:pointer;" hx-get="/" hx-target="#content" x-select="tab3">Tab 3</span>
</li>
</ul>

<div class="mt-3">
{{ selection }}
</div>

<div class="mt-3">The handler:</div>

<pre class="mt-3 p-1" style="background-color: gray"><small>func (a *App) home(w http.ResponseWriter, r *http.Request) {
// the tabs for this page.
selectMap := map[string]*partial.Partial{
"tab1": partial.New("tab1.gohtml"),
"tab2": partial.New("tab2.gohtml"),
"tab3": partial.New("tab3.gohtml"),
}

// layout, footer, index could be abstracted away and shared over multiple handlers within the same module, for instance.
layout := a.PartialService.NewLayout()
footer := partial.NewID("footer", "footer.gohtml")
index := partial.NewID("index", "index.gohtml").WithOOB(footer)

content := partial.NewID("content", "content.gohtml").WithSelectMap("tab1", selectMap)

// set the layout content and wrap it with the main template
layout.Set(content).Wrap(index)

err := layout.WriteWithRequest(r.Context(), w, r)
if err != nil {
http.Error(w, fmt.Errorf("error rendering layout: %w", err).Error(), http.StatusInternalServerError)
}
}</small></pre>
</div>
1 change: 1 addition & 0 deletions examples/tabs-htmx/footer.gohtml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
<div id="footer" {{ if swapOOB }}hx-swap-oob="outerHTML"{{end}} class="container">{{ formatDate now "15:04:05" }} {{ if swapOOB }}- swapped with OOB{{end}}</div>
17 changes: 17 additions & 0 deletions examples/tabs-htmx/index.gohtml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>Tab Example</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<script src="https://unpkg.com/[email protected]"></script>
<script src="/js/htmx.partial.js"></script>
</head>

<body>
<div id="content">
{{ child "content" }}
</div>

{{ child "footer" }}
</body>
</html>
67 changes: 67 additions & 0 deletions examples/tabs-htmx/main.go
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,67 @@
package main

import (
"fmt"
"github.com/donseba/go-partial"
"log/slog"
"net/http"
)

type (
App struct {
PartialService *partial.Service
}
)

func main() {
logger := slog.Default()

app := &App{
PartialService: partial.NewService(&partial.Config{
PartialHeader: "HX-Target",
Logger: logger,
}),
}

mux := http.NewServeMux()

mux.Handle("GET /files/", http.StripPrefix("/files/", http.FileServer(http.Dir("./files"))))

mux.HandleFunc("GET /", app.home)

server := &http.Server{
Addr: ":8080",
Handler: mux,
}

logger.Info("starting server on :8080")
err := server.ListenAndServe()
if err != nil {
logger.Error("error starting server", "error", err)
}
}

// super simple example of how to use the partial service to render a layout with a content partial
func (a *App) home(w http.ResponseWriter, r *http.Request) {
// the tabs for this page.
selectMap := map[string]*partial.Partial{
"tab1": partial.New("tab1.gohtml"),
"tab2": partial.New("tab2.gohtml"),
"tab3": partial.New("tab3.gohtml"),
}

// layout, footer, index could be abstracted away and shared over multiple handlers within the same module, for instance.
layout := a.PartialService.NewLayout()
footer := partial.NewID("footer", "footer.gohtml")
index := partial.NewID("index", "index.gohtml").WithOOB(footer)

content := partial.NewID("content", "content.gohtml").WithSelectMap("tab1", selectMap)

// set the layout content and wrap it with the main template
layout.Set(content).Wrap(index)

err := layout.WriteWithRequest(r.Context(), w, r)
if err != nil {
http.Error(w, fmt.Errorf("error rendering layout: %w", err).Error(), http.StatusInternalServerError)
}
}
1 change: 1 addition & 0 deletions examples/tabs-htmx/tab1.gohtml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque pulvinar massa pulvinar eros molestie pellentesque. Mauris facilisis libero leo, non cursus ex facilisis a. Donec tempor metus non ex efficitur, in vestibulum nunc dapibus. Etiam pretium tortor magna, eget tempus lacus varius et. Sed vestibulum velit sed odio facilisis dignissim. Fusce in dolor ac enim consequat cursus et id lorem. Donec convallis lorem dignissim tristique pellentesque. Etiam ultricies sed mauris vitae hendrerit. Maecenas accumsan ligula vel libero faucibus, in lacinia justo ullamcorper. Etiam pulvinar ex ac odio posuere bibendum. Pellentesque ipsum justo, finibus in egestas ac, dignissim varius neque. Fusce laoreet consequat diam, ut imperdiet libero laoreet quis. Aenean tincidunt a tellus vel posuere. Aenean vel elementum mauris. Pellentesque erat tortor, lobortis ac ullamcorper vitae, sagittis vel arcu. Morbi malesuada, justo ut dignissim mollis, diam nunc consequat enim, nec facilisis ex felis ac dui.
1 change: 1 addition & 0 deletions examples/tabs-htmx/tab2.gohtml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
Suspendisse blandit, nisl ac porta auctor, mauris nisi elementum enim, non laoreet mauris justo eu sem. Cras eget urna id libero posuere luctus vitae ac lacus. Nunc varius iaculis leo, eu ultrices ligula aliquam non. Suspendisse lacinia magna enim, a ornare leo placerat in. Sed accumsan sapien ligula, sed maximus enim rutrum ut. Fusce leo purus, vestibulum nec dui accumsan, ullamcorper viverra risus. Duis fermentum orci augue, non sagittis orci tempor at. Praesent quis ipsum fermentum, consequat massa at, finibus eros. Praesent nec massa nisi. Proin sed feugiat eros.
1 change: 1 addition & 0 deletions examples/tabs-htmx/tab3.gohtml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
Morbi elementum varius suscipit. Phasellus congue feugiat sem, vel sodales odio varius eu. Fusce non ex nisi. Aenean nisi dui, tincidunt nec est quis, mollis tempus libero. Fusce placerat pharetra diam, ac mollis turpis bibendum ac. Nullam pulvinar venenatis lacinia. Nam vel quam non ante dignissim bibendum id et ex. Suspendisse potenti.
18 changes: 18 additions & 0 deletions examples/tabs/content.gohtml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
<div class="container mt-5">
<!-- Tab Navigation -->
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item">
<span class="nav-link {{ ifRequestedSelect "active" "tab1" ""}}" style="cursor:pointer;" x-get="/" x-partial="content" x-select="tab1">Tab 1</span>
</li>
<li class="nav-item">
<span class="nav-link {{ ifRequestedSelect "active" "tab2"}}" style="cursor:pointer;" x-get="/" x-partial="content" x-select="tab2">Tab 2</span>
</li>
<li class="nav-item">
<span class="nav-link {{ ifRequestedSelect "active" "tab3"}}" style="cursor:pointer;" x-get="/" x-partial="content" x-select="tab3">Tab 3</span>
</li>
</ul>

<div class="mt-3">
{{ selection }}
</div>
</div>
1 change: 1 addition & 0 deletions examples/tabs/footer.gohtml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
<div id="footer" {{ if swapOOB }}x-swap-oob="outerHTML"{{end}} class="container">footer time : {{ formatDate now "15:04:05" }} - {{ if swapOOB }}swapped with OOB{{else}}rendered on load{{end}}</div>
54 changes: 54 additions & 0 deletions examples/tabs/index.gohtml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,54 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>Tab Example</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<script type="application/javascript" src="/js/standalone.js"></script>
</head>

<body>
<div id="content">
{{ child "content" }}
</div>

<div class="mt-3 container">
<div>(rendered on load at : {{ formatDate now "15:04:05" }})</div>
<div class="mt-3">What the handler looks like: </div>

<pre class="mt-3 p-1" style="background-color: gray"><small>func (a *App) home(w http.ResponseWriter, r *http.Request) {
// the tabs for this page.
selectMap := map[string]*partial.Partial{
"tab1": partial.New("tab1.gohtml"),
"tab2": partial.New("tab2.gohtml"),
"tab3": partial.New("tab3.gohtml"),
}

// layout, footer, index could be abstracted away and shared over multiple handlers within the same module, for instance.
layout := a.PartialService.NewLayout()
footer := partial.NewID("footer", "footer.gohtml")
index := partial.NewID("index", "index.gohtml").WithOOB(footer)

content := partial.NewID("content", "content.gohtml").WithSelectMap("tab1", selectMap)

// set the layout content and wrap it with the main template
layout.Set(content).Wrap(index)

err := layout.WriteWithRequest(r.Context(), w, r)
if err != nil {
http.Error(w, fmt.Errorf("error rendering layout: %w", err).Error(), http.StatusInternalServerError)
}
}</small></pre>
</div>

{{ child "footer" }}

<script>
// Initialize the handler with optional configuration
const xP = new XPartial({
enableUrlParam: true, // Enable URL parameter setting
urlParamName: 'x-select', // Name of the query parameter (e.g., 'selected', 'tab')
replaceState: false // Use pushState (false) or replaceState (true) when updating the URL
});
</script>
</body>
</html>
66 changes: 66 additions & 0 deletions examples/tabs/main.go
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,66 @@
package main

import (
"fmt"
"github.com/donseba/go-partial"
"log/slog"
"net/http"
)

type (
App struct {
PartialService *partial.Service
}
)

func main() {
logger := slog.Default()

app := &App{
PartialService: partial.NewService(&partial.Config{
Logger: logger,
}),
}

mux := http.NewServeMux()

mux.Handle("GET /js/", http.StripPrefix("/js/", http.FileServer(http.Dir("../../js"))))

mux.HandleFunc("GET /", app.home)

server := &http.Server{
Addr: ":8080",
Handler: mux,
}

logger.Info("starting server on :8080")
err := server.ListenAndServe()
if err != nil {
logger.Error("error starting server", "error", err)
}
}

// super simple example of how to use the partial service to render a layout with a content partial
func (a *App) home(w http.ResponseWriter, r *http.Request) {
// the tabs for this page.
selectMap := map[string]*partial.Partial{
"tab1": partial.New("tab1.gohtml"),
"tab2": partial.New("tab2.gohtml"),
"tab3": partial.New("tab3.gohtml"),
}

// layout, footer, index could be abstracted away and shared over multiple handlers within the same module, for instance.
layout := a.PartialService.NewLayout()
footer := partial.NewID("footer", "footer.gohtml")
index := partial.NewID("index", "index.gohtml").WithOOB(footer)

content := partial.NewID("content", "content.gohtml").WithSelectMap("tab1", selectMap)

// set the layout content and wrap it with the main template
layout.Set(content).Wrap(index)

err := layout.WriteWithRequest(r.Context(), w, r)
if err != nil {
http.Error(w, fmt.Errorf("error rendering layout: %w", err).Error(), http.StatusInternalServerError)
}
}
1 change: 1 addition & 0 deletions examples/tabs/tab1.gohtml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque pulvinar massa pulvinar eros molestie pellentesque. Mauris facilisis libero leo, non cursus ex facilisis a. Donec tempor metus non ex efficitur, in vestibulum nunc dapibus. Etiam pretium tortor magna, eget tempus lacus varius et. Sed vestibulum velit sed odio facilisis dignissim. Fusce in dolor ac enim consequat cursus et id lorem. Donec convallis lorem dignissim tristique pellentesque. Etiam ultricies sed mauris vitae hendrerit. Maecenas accumsan ligula vel libero faucibus, in lacinia justo ullamcorper. Etiam pulvinar ex ac odio posuere bibendum. Pellentesque ipsum justo, finibus in egestas ac, dignissim varius neque. Fusce laoreet consequat diam, ut imperdiet libero laoreet quis. Aenean tincidunt a tellus vel posuere. Aenean vel elementum mauris. Pellentesque erat tortor, lobortis ac ullamcorper vitae, sagittis vel arcu. Morbi malesuada, justo ut dignissim mollis, diam nunc consequat enim, nec facilisis ex felis ac dui.
1 change: 1 addition & 0 deletions examples/tabs/tab2.gohtml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
Suspendisse blandit, nisl ac porta auctor, mauris nisi elementum enim, non laoreet mauris justo eu sem. Cras eget urna id libero posuere luctus vitae ac lacus. Nunc varius iaculis leo, eu ultrices ligula aliquam non. Suspendisse lacinia magna enim, a ornare leo placerat in. Sed accumsan sapien ligula, sed maximus enim rutrum ut. Fusce leo purus, vestibulum nec dui accumsan, ullamcorper viverra risus. Duis fermentum orci augue, non sagittis orci tempor at. Praesent quis ipsum fermentum, consequat massa at, finibus eros. Praesent nec massa nisi. Proin sed feugiat eros.
1 change: 1 addition & 0 deletions examples/tabs/tab3.gohtml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
Morbi elementum varius suscipit. Phasellus congue feugiat sem, vel sodales odio varius eu. Fusce non ex nisi. Aenean nisi dui, tincidunt nec est quis, mollis tempus libero. Fusce placerat pharetra diam, ac mollis turpis bibendum ac. Nullam pulvinar venenatis lacinia. Nam vel quam non ante dignissim bibendum id et ex. Suspendisse potenti.
9 changes: 2 additions & 7 deletions js/htmx.partial.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,17 +1,12 @@
(function() {
htmx.on('htmx:configRequest', function(event) {
let element = event.detail.elt;
let partialValue = element.getAttribute('hx-partial');
if (partialValue !== null) {
event.detail.headers['X-Partial'] = partialValue;
}

let selectValue = element.getAttribute('hx-select');
let selectValue = element.getAttribute('x-select');
if (selectValue !== null) {
event.detail.headers['X-Select'] = selectValue;
}

let actionValue = element.getAttribute('hx-action');
let actionValue = element.getAttribute('x-action');
if (actionValue !== null) {
event.detail.headers['X-Action'] = actionValue;
}
Expand Down
Loading
Loading