mirror of
https://github.com/Theodor-Springmann-Stiftung/kgpz_web.git
synced 2025-10-28 16:45:32 +00:00
Page target navigation
This commit is contained in:
Simon Martens
212
CLAUDE.md
212
CLAUDE.md
@@ -46,6 +46,8 @@ go fmt ./...
|
||||
go vet ./...
|
||||
```
|
||||
|
||||
**Note**: The project maintainer handles all Go compilation, testing, and error reporting. Claude Code should not run Go build commands or tests - any Go-related errors will be reported directly by the maintainer.
|
||||
|
||||
### Frontend Assets (from views/ directory)
|
||||
```bash
|
||||
cd views/
|
||||
@@ -124,6 +126,8 @@ views/
|
||||
│ ├── kategorie/ # Category pages
|
||||
│ ├── kontakt/ # Contact pages
|
||||
│ ├── ort/ # Places pages
|
||||
│ ├── piece/ # Multi-issue piece pages
|
||||
│ │ └── components/ # Piece-specific components (_piece_inhaltsverzeichnis, _piece_sequential_layout)
|
||||
│ ├── search/ # Search pages
|
||||
│ └── zitation/ # Citation pages
|
||||
├── assets/ # Compiled output assets
|
||||
@@ -228,4 +232,210 @@ The application follows a **logic-in-Go, presentation-in-templates** approach:
|
||||
### Adding New Template Logic
|
||||
1. **First**: Add business logic to view models in Go
|
||||
2. **Second**: Create reusable template helper functions if needed
|
||||
3. **Last**: Use pre-processed data in templates for presentation only
|
||||
3. **Last**: Use pre-processed data in templates for presentation only
|
||||
|
||||
## Multi-Issue Piece View (/beitrag/)
|
||||
|
||||
The application supports viewing pieces/articles that span multiple issues through a dedicated piece view interface that aggregates content chronologically.
|
||||
|
||||
### URL Structure & Routing
|
||||
|
||||
**URL Pattern**: `/beitrag/:id` where ID format is `YYYY-NNN-PPP` (year-issue-page)
|
||||
- **Example**: `/beitrag/1768-020-079` (piece starting at year 1768, issue 20, page 79)
|
||||
- **Route Definition**: `PIECE_URL = "/beitrag/:id"` in `app/kgpz.go`
|
||||
- **Controller**: `controllers.GetPiece(k.Library)` handles piece lookup and rendering
|
||||
|
||||
### Architecture & Components
|
||||
|
||||
**Controller** (`controllers/piece_controller.go`):
|
||||
- Parses YYYY-NNN-PPP ID format using regex pattern matching
|
||||
- Looks up pieces by year/issue/page when XML IDs aren't reliable
|
||||
- Handles piece aggregation across multiple issues
|
||||
- Returns 404 for invalid IDs or non-existent pieces
|
||||
|
||||
**View Model** (`viewmodels/piece_view.go`):
|
||||
- `PieceVM` struct aggregates data from multiple issues
|
||||
- `AllIssueRefs []xmlmodels.IssueRef` - chronologically ordered issue references
|
||||
- `AllPages []PiecePageEntry` - sequential page data with image paths
|
||||
- Pre-processes page icons, grid layouts, and visibility flags
|
||||
- Resolves image paths using registry system
|
||||
|
||||
**Template System** (`views/routes/piece/`):
|
||||
- `body.gohtml` - Two-column layout with Inhaltsverzeichnis and sequential pages
|
||||
- `head.gohtml` - Page metadata and title generation
|
||||
- `components/_piece_inhaltsverzeichnis.gohtml` - Table of contents with piece content
|
||||
- `components/_piece_sequential_layout.gohtml` - Chronological page display
|
||||
|
||||
### Key Features
|
||||
|
||||
**Multi-Issue Aggregation**:
|
||||
- Pieces spanning multiple issues are unified in a single view
|
||||
- Chronological ordering preserves reading sequence across issue boundaries
|
||||
- Issue context (year/number) displayed with each page for reference
|
||||
|
||||
**Component Reuse**:
|
||||
- Reuses `_inhaltsverzeichnis_eintrag` template for consistent content display
|
||||
- Integrates with existing `_newspaper_layout` components for single-page viewer
|
||||
- Shares highlighting system and navigation patterns with issue view
|
||||
|
||||
**Sequential Layout**:
|
||||
- Two-column responsive design: Inhaltsverzeichnis (1/3) + Page Layout (2/3)
|
||||
- Left-aligned page indicators with format: `[icon] YYYY Nr. XX, PageNum`
|
||||
- No grid constraints - simple sequential flow for multi-issue reading
|
||||
|
||||
**Highlighting System Integration**:
|
||||
- Uses same intersection observer system as issue view (`main.js`)
|
||||
- Page links in Inhaltsverzeichnis turn red when corresponding page is visible
|
||||
- Page indicators above images also highlight during scroll
|
||||
- Automatic scroll-to-highlighted functionality
|
||||
|
||||
### Template Integration
|
||||
|
||||
**Helper Functions** (`templating/engine.go`):
|
||||
- `GetPieceURL(year, issueNum, page int) string` - generates piece URLs
|
||||
- Reuses existing `PageIcon()` for consistent icon display
|
||||
- `getImagePathFromRegistry()` for proper image path resolution
|
||||
|
||||
**Data Attributes for JavaScript**:
|
||||
- `data-page-container` on page containers for scroll detection
|
||||
- `data-page-number` on Inhaltsverzeichnis links for highlighting
|
||||
- `newspaper-page-container` class for intersection observer
|
||||
- `inhalts-entry` class for hover and highlighting behavior
|
||||
|
||||
**Responsive Behavior**:
|
||||
- Mobile: Single column with collapsible Inhaltsverzeichnis
|
||||
- Desktop: Fixed two-column layout with sticky table of contents
|
||||
- Single-page viewer integration with proper navigation buttons
|
||||
|
||||
### Usage Examples
|
||||
|
||||
**Linking to Pieces**:
|
||||
```gohtml
|
||||
<a href="{{ GetPieceURL $piece.Reference.When.Year $piece.Reference.Nr $piece.Reference.Von }}">
|
||||
gesamten beitrag anzeigen
|
||||
</a>
|
||||
```
|
||||
|
||||
**Page Navigation in Inhaltsverzeichnis**:
|
||||
```gohtml
|
||||
<a href="/{{ $pageEntry.IssueYear }}/{{ $pageEntry.IssueNumber }}/{{ $pageEntry.PageNumber }}"
|
||||
class="page-number-inhalts" data-page-number="{{ $pageEntry.PageNumber }}">
|
||||
{{ $issueRef.When.Day }}.{{ $issueRef.When.Month }}.{{ $issueRef.When.Year }} [Nr. {{ $pageEntry.IssueNumber }}], {{ $pageEntry.PageNumber }}
|
||||
</a>
|
||||
```
|
||||
|
||||
### Error Handling
|
||||
|
||||
**Invalid IDs**: Returns 404 for malformed YYYY-NNN-PPP format
|
||||
**Missing Pieces**: Returns 404 when piece lookup fails in XML data
|
||||
**Missing Images**: Graceful fallback with "Keine Bilder verfügbar" message
|
||||
**Cross-Issue Navigation**: Handles pieces spanning non-consecutive issues
|
||||
|
||||
## Direct Page Navigation System
|
||||
|
||||
The application provides a direct page navigation system that allows users to jump directly to any page by specifying year and page number, regardless of which issue contains that page.
|
||||
|
||||
### URL Structure
|
||||
|
||||
**New URL Format**: All page links now use path parameters instead of hash fragments:
|
||||
- **Before**: `/1771/42#page-166`
|
||||
- **After**: `/1771/42/166`
|
||||
|
||||
This change applies to all page links throughout the application, including:
|
||||
- Page sharing/citation links
|
||||
- Inhaltsverzeichnis page navigation
|
||||
- Single page viewer navigation
|
||||
|
||||
### Page Jump Interface
|
||||
|
||||
**Location**: Available on year overview pages (`/jahrgang/:year`)
|
||||
|
||||
**Features**:
|
||||
- **Year Selection**: Dropdown with all available years (1764-1779)
|
||||
- **Page Input**: Numeric input with validation
|
||||
- **HTMX Integration**: Real-time error feedback without page reload
|
||||
- **Auto-redirect**: Successful lookups redirect to `/year/issue/page`
|
||||
|
||||
**URL Patterns**:
|
||||
- **Form Submission**: `POST /jump` with form data
|
||||
- **Direct URL**: `GET /jump/:year/:page` (redirects to found issue)
|
||||
|
||||
### Error Handling
|
||||
|
||||
**Comprehensive Validation**:
|
||||
- **Invalid Year**: Years outside 1764-1779 range
|
||||
- **Invalid Page**: Non-numeric or negative page numbers
|
||||
- **Page Not Found**: Page doesn't exist in any issue of specified year
|
||||
- **Form Preservation**: Error responses maintain user input for correction
|
||||
|
||||
**HTMX Error Responses**:
|
||||
- Form replaced with error version showing red borders and error messages
|
||||
- Specific error targeting (year field vs. page field)
|
||||
- Graceful degradation with clear user feedback
|
||||
|
||||
### Auto-Scroll Implementation
|
||||
|
||||
**URL-Based Navigation**:
|
||||
- Pages accessed via `/year/issue/page` auto-scroll to target page
|
||||
- JavaScript detects path-based page numbers (not hash fragments)
|
||||
- Smooth scrolling with proper timing for layout initialization
|
||||
- Automatic highlighting in Inhaltsverzeichnis
|
||||
|
||||
**Technical Implementation**:
|
||||
```javascript
|
||||
// Auto-scroll on page load if targetPage is specified
|
||||
const pathParts = window.location.pathname.split('/');
|
||||
if (pathParts.length >= 4 && !isNaN(pathParts[pathParts.length - 1])) {
|
||||
const pageNumber = pathParts[pathParts.length - 1];
|
||||
// Scroll to page container and highlight
|
||||
}
|
||||
```
|
||||
|
||||
### Controller Architecture
|
||||
|
||||
**Page Jump Controller** (`controllers/page_jump_controller.go`):
|
||||
- `FindIssueByYearAndPage()` - Lookup function for issue containing specific page
|
||||
- `GetPageJump()` - Handles direct URL navigation (`/jump/:year/:page`)
|
||||
- `GetPageJumpForm()` - Handles form submissions (`POST /jump`)
|
||||
- Error rendering with HTML form generation
|
||||
|
||||
**Issue Controller Updates** (`controllers/ausgabe_controller.go`):
|
||||
- Enhanced to handle optional page parameter in `/:year/:issue/:page?`
|
||||
- Page validation against issue page ranges
|
||||
- Target page passed to template for auto-scroll JavaScript
|
||||
|
||||
### Link Generation Updates
|
||||
|
||||
**JavaScript Functions** (`views/transform/main.js`):
|
||||
- `copyPagePermalink()` - Generates `/year/issue/page` URLs
|
||||
- `generatePageCitation()` - Uses new URL format for citations
|
||||
- `scrollToPageFromURL()` - URL-based navigation (replaces hash-based)
|
||||
|
||||
**Template Integration**:
|
||||
- Page links updated throughout templates to use new URL format
|
||||
- Maintains backward compatibility for beilage/supplement pages (still uses hash)
|
||||
- HTMX navigation preserved with new URL structure
|
||||
|
||||
### Usage Examples
|
||||
|
||||
**Direct Page Access**:
|
||||
```
|
||||
http://127.0.0.1:8080/1771/42/166 # Direct link to page 166
|
||||
```
|
||||
|
||||
**Page Jump Form**:
|
||||
```html
|
||||
<form hx-post="/jump" hx-swap="outerHTML">
|
||||
<select name="year">...</select>
|
||||
<input type="number" name="page" />
|
||||
<button type="submit">Zur Seite springen</button>
|
||||
</form>
|
||||
```
|
||||
|
||||
**Link Generation**:
|
||||
```javascript
|
||||
// New format for regular pages
|
||||
const pageUrl = `/${year}/${issue}/${pageNumber}`;
|
||||
// Old format still used for beilage pages
|
||||
const beilageUrl = `${window.location.pathname}#beilage-1-page-${pageNumber}`;
|
||||
```
|
||||
10
app/kgpz.go
10
app/kgpz.go
@@ -37,6 +37,10 @@ const (
|
||||
AGENTS_OVERVIEW_URL = "/akteure/:letterorid"
|
||||
CATEGORY_OVERVIEW_URL = "/kategorie/:category"
|
||||
|
||||
PIECE_URL = "/beitrag/:id"
|
||||
PIECE_PAGE_URL = "/beitrag/:id/:page"
|
||||
PAGE_JUMP_URL = "/jump/:year/:page"
|
||||
PAGE_JUMP_FORM_URL = "/jump"
|
||||
ISSSUE_URL = "/:year/:issue/:page?"
|
||||
ADDITIONS_URL = "/:year/:issue/beilage/:page?"
|
||||
)
|
||||
@@ -147,6 +151,12 @@ func (k *KGPZ) Routes(srv *fiber.App) error {
|
||||
srv.Get(PLACE_OVERVIEW_URL, controllers.GetPlace(k.Library))
|
||||
srv.Get(CATEGORY_OVERVIEW_URL, controllers.GetCategory(k.Library))
|
||||
srv.Get(AGENTS_OVERVIEW_URL, controllers.GetAgents(k.Library))
|
||||
srv.Get(PIECE_PAGE_URL, controllers.GetPieceWithPage(k.Library))
|
||||
srv.Get(PIECE_URL, controllers.GetPiece(k.Library))
|
||||
|
||||
// Page jump routes for direct navigation
|
||||
srv.Get(PAGE_JUMP_URL, controllers.GetPageJump(k.Library))
|
||||
srv.Post(PAGE_JUMP_FORM_URL, controllers.GetPageJumpForm(k.Library))
|
||||
|
||||
// TODO: YEAR_OVERVIEW_URL being /:year is a bad idea, since it captures basically everything,
|
||||
// probably creating problems with static files, and also in case we add a front page later.
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
package controllers
|
||||
|
||||
import (
|
||||
"fmt"
|
||||
"strconv"
|
||||
|
||||
"github.com/Theodor-Springmann-Stiftung/kgpz_web/helpers/logging"
|
||||
@@ -30,6 +31,18 @@ func GetIssue(kgpz *xmlmodels.Library) fiber.Handler {
|
||||
return c.SendStatus(fiber.StatusNotFound)
|
||||
}
|
||||
|
||||
// Handle optional page parameter
|
||||
pageParam := c.Params("page")
|
||||
var targetPage int
|
||||
if pageParam != "" {
|
||||
pi, err := strconv.Atoi(pageParam)
|
||||
if err != nil || pi < 1 {
|
||||
logging.Error(err, "Page is not a valid number")
|
||||
return c.SendStatus(fiber.StatusNotFound)
|
||||
}
|
||||
targetPage = pi
|
||||
}
|
||||
|
||||
issue, err := viewmodels.NewSingleIssueView(yi, di, kgpz)
|
||||
|
||||
if err != nil {
|
||||
@@ -37,6 +50,14 @@ func GetIssue(kgpz *xmlmodels.Library) fiber.Handler {
|
||||
return c.SendStatus(fiber.StatusNotFound)
|
||||
}
|
||||
|
||||
return c.Render("/ausgabe/", fiber.Map{"model": issue, "year": yi, "issue": di}, "fullwidth")
|
||||
// If a page was specified, validate it exists in this issue
|
||||
if targetPage > 0 {
|
||||
if targetPage < issue.Issue.Von || targetPage > issue.Issue.Bis {
|
||||
logging.Debug(fmt.Sprintf("Page %d not found in issue %d/%d (range: %d-%d)", targetPage, yi, di, issue.Issue.Von, issue.Issue.Bis))
|
||||
return c.SendStatus(fiber.StatusNotFound)
|
||||
}
|
||||
}
|
||||
|
||||
return c.Render("/ausgabe/", fiber.Map{"model": issue, "year": yi, "issue": di, "targetPage": targetPage}, "fullwidth")
|
||||
}
|
||||
}
|
||||
|
||||
227
controllers/page_jump_controller.go
Normal file
227
controllers/page_jump_controller.go
Normal file
@@ -0,0 +1,227 @@
|
||||
package controllers
|
||||
|
||||
import (
|
||||
"fmt"
|
||||
"strconv"
|
||||
|
||||
"github.com/Theodor-Springmann-Stiftung/kgpz_web/helpers/logging"
|
||||
"github.com/Theodor-Springmann-Stiftung/kgpz_web/xmlmodels"
|
||||
"github.com/gofiber/fiber/v2"
|
||||
)
|
||||
|
||||
// FindIssueByYearAndPage finds the first issue in a given year that contains the specified page
|
||||
func FindIssueByYearAndPage(year, page int, library *xmlmodels.Library) (*xmlmodels.Issue, error) {
|
||||
library.Issues.Lock()
|
||||
defer library.Issues.Unlock()
|
||||
|
||||
var foundIssues []xmlmodels.Issue
|
||||
|
||||
// Find all issues in the given year that contain the page
|
||||
for _, issue := range library.Issues.Array {
|
||||
if issue.Datum.When.Year == year && page >= issue.Von && page <= issue.Bis {
|
||||
foundIssues = append(foundIssues, issue)
|
||||
}
|
||||
}
|
||||
|
||||
if len(foundIssues) == 0 {
|
||||
return nil, fmt.Errorf("no issue found containing page %d in year %d", page, year)
|
||||
}
|
||||
|
||||
// Return the first issue chronologically (by issue number)
|
||||
firstIssue := foundIssues[0]
|
||||
for _, issue := range foundIssues {
|
||||
if issue.Number.No < firstIssue.Number.No {
|
||||
firstIssue = issue
|
||||
}
|
||||
}
|
||||
|
||||
return &firstIssue, nil
|
||||
}
|
||||
|
||||
func GetPageJump(kgpz *xmlmodels.Library) fiber.Handler {
|
||||
return func(c *fiber.Ctx) error {
|
||||
// Parse year parameter
|
||||
yearStr := c.Params("year")
|
||||
year, err := strconv.Atoi(yearStr)
|
||||
if err != nil || year < MINYEAR || year > MAXYEAR {
|
||||
logging.Debug("Invalid year for page jump: " + yearStr)
|
||||
return c.Status(fiber.StatusBadRequest).SendString(`
|
||||
<div id="year-error" class="text-red-600 text-sm mt-1">
|
||||
Ungültiges Jahr. Bitte wählen Sie ein Jahr zwischen ` + strconv.Itoa(MINYEAR) + ` und ` + strconv.Itoa(MAXYEAR) + `.
|
||||
</div>
|
||||
`)
|
||||
}
|
||||
|
||||
// Parse page parameter
|
||||
pageStr := c.Params("page")
|
||||
page, err := strconv.Atoi(pageStr)
|
||||
if err != nil || page < 1 {
|
||||
logging.Debug("Invalid page for page jump: " + pageStr)
|
||||
return c.Status(fiber.StatusBadRequest).SendString(`
|
||||
<div id="page-error" class="text-red-600 text-sm mt-1">
|
||||
Ungültige Seitenzahl. Bitte geben Sie eine positive Zahl ein.
|
||||
</div>
|
||||
`)
|
||||
}
|
||||
|
||||
// Find the issue containing this page
|
||||
issue, err := FindIssueByYearAndPage(year, page, kgpz)
|
||||
if err != nil {
|
||||
logging.Debug(fmt.Sprintf("Page %d not found in year %d: %v", page, year, err))
|
||||
return c.Status(fiber.StatusNotFound).SendString(`
|
||||
<div id="page-error" class="text-red-600 text-sm mt-1">
|
||||
Seite ` + pageStr + ` wurde in Jahr ` + yearStr + ` nicht gefunden.
|
||||
</div>
|
||||
`)
|
||||
}
|
||||
|
||||
// Construct the redirect URL
|
||||
redirectURL := fmt.Sprintf("/%d/%d/%d", year, issue.Number.No, page)
|
||||
|
||||
logging.Debug(fmt.Sprintf("Page jump: %s -> %s", c.OriginalURL(), redirectURL))
|
||||
|
||||
// Return HTMX redirect
|
||||
c.Set("HX-Redirect", redirectURL)
|
||||
return c.SendStatus(fiber.StatusOK)
|
||||
}
|
||||
}
|
||||
|
||||
// GetPageJumpForm handles POST requests for the page jump form
|
||||
func GetPageJumpForm(kgpz *xmlmodels.Library) fiber.Handler {
|
||||
return func(c *fiber.Ctx) error {
|
||||
// Parse form data
|
||||
yearStr := c.FormValue("year")
|
||||
pageStr := c.FormValue("page")
|
||||
|
||||
// Validate year
|
||||
year, err := strconv.Atoi(yearStr)
|
||||
if err != nil || year < MINYEAR || year > MAXYEAR {
|
||||
logging.Debug("Invalid year in form: " + yearStr)
|
||||
// Get available years for dropdown (simplified for error case)
|
||||
availableYears := []int{}
|
||||
for y := MINYEAR; y <= MAXYEAR; y++ {
|
||||
availableYears = append(availableYears, y)
|
||||
}
|
||||
|
||||
return c.Status(fiber.StatusBadRequest).SendString(renderPageJumpFormWithError(
|
||||
fmt.Sprintf("Ungültiges Jahr. Bitte wählen Sie ein Jahr zwischen %d und %d.", MINYEAR, MAXYEAR),
|
||||
"",
|
||||
availableYears,
|
||||
MINYEAR,
|
||||
pageStr,
|
||||
))
|
||||
}
|
||||
|
||||
// Validate page
|
||||
page, err := strconv.Atoi(pageStr)
|
||||
if err != nil || page < 1 {
|
||||
logging.Debug("Invalid page in form: " + pageStr)
|
||||
// Get available years for dropdown
|
||||
availableYears := []int{}
|
||||
for y := MINYEAR; y <= MAXYEAR; y++ {
|
||||
availableYears = append(availableYears, y)
|
||||
}
|
||||
|
||||
return c.Status(fiber.StatusBadRequest).SendString(renderPageJumpFormWithError(
|
||||
"",
|
||||
"Ungültige Seitenzahl. Bitte geben Sie eine positive Zahl ein.",
|
||||
availableYears,
|
||||
year,
|
||||
"",
|
||||
))
|
||||
}
|
||||
|
||||
// Find the issue containing this page
|
||||
issue, err := FindIssueByYearAndPage(year, page, kgpz)
|
||||
if err != nil {
|
||||
logging.Debug(fmt.Sprintf("Page %d not found in year %d: %v", page, year, err))
|
||||
// Get available years for dropdown
|
||||
availableYears := []int{}
|
||||
for y := MINYEAR; y <= MAXYEAR; y++ {
|
||||
availableYears = append(availableYears, y)
|
||||
}
|
||||
|
||||
return c.Status(fiber.StatusNotFound).SendString(renderPageJumpFormWithError(
|
||||
"",
|
||||
fmt.Sprintf("Seite %s wurde in Jahr %s nicht gefunden.", pageStr, yearStr),
|
||||
availableYears,
|
||||
year,
|
||||
pageStr,
|
||||
))
|
||||
}
|
||||
|
||||
// Construct the redirect URL
|
||||
redirectURL := fmt.Sprintf("/%d/%d/%d", year, issue.Number.No, page)
|
||||
|
||||
logging.Debug(fmt.Sprintf("Page jump form: year=%s, page=%s -> %s", yearStr, pageStr, redirectURL))
|
||||
|
||||
// Return HTMX redirect
|
||||
c.Set("HX-Redirect", redirectURL)
|
||||
return c.SendStatus(fiber.StatusOK)
|
||||
}
|
||||
}
|
||||
|
||||
// renderPageJumpFormWithError generates the page jump form HTML with error messages
|
||||
func renderPageJumpFormWithError(yearError, pageError string, availableYears []int, currentYear int, pageValue string) string {
|
||||
html := `<form hx-post="/jump" hx-swap="outerHTML" class="space-y-4">
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<!-- Year Selection -->
|
||||
<div>
|
||||
<label for="jump-year" class="block text-sm font-medium text-slate-700 mb-1">Jahr</label>
|
||||
<select id="jump-year" name="year" class="w-full px-3 py-2 border `
|
||||
|
||||
if yearError != "" {
|
||||
html += `border-red-300`
|
||||
} else {
|
||||
html += `border-slate-300`
|
||||
}
|
||||
|
||||
html += ` rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">`
|
||||
|
||||
for _, year := range availableYears {
|
||||
html += fmt.Sprintf(`<option value="%d"`, year)
|
||||
if year == currentYear {
|
||||
html += ` selected`
|
||||
}
|
||||
html += fmt.Sprintf(`>%d</option>`, year)
|
||||
}
|
||||
|
||||
html += `</select>`
|
||||
|
||||
if yearError != "" {
|
||||
html += fmt.Sprintf(`<div class="text-red-600 text-sm mt-1">%s</div>`, yearError)
|
||||
}
|
||||
|
||||
html += `</div>
|
||||
|
||||
<!-- Page Input -->
|
||||
<div>
|
||||
<label for="jump-page" class="block text-sm font-medium text-slate-700 mb-1">Seite</label>
|
||||
<input type="number" id="jump-page" name="page" min="1" placeholder="z.B. 42" value="` + pageValue + `" class="w-full px-3 py-2 border `
|
||||
|
||||
if pageError != "" {
|
||||
html += `border-red-300`
|
||||
} else {
|
||||
html += `border-slate-300`
|
||||
}
|
||||
|
||||
html += ` rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">`
|
||||
|
||||
if pageError != "" {
|
||||
html += fmt.Sprintf(`<div class="text-red-600 text-sm mt-1">%s</div>`, pageError)
|
||||
}
|
||||
|
||||
html += `</div>
|
||||
</div>
|
||||
|
||||
<!-- Submit Button -->
|
||||
<div class="text-center">
|
||||
<button type="submit" class="inline-flex items-center px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-md shadow-sm transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
|
||||
<i class="ri-arrow-right-line mr-2"></i>
|
||||
Zur Seite springen
|
||||
</button>
|
||||
</div>
|
||||
</form>`
|
||||
|
||||
return html
|
||||
}
|
||||
141
controllers/piece_controller.go
Normal file
141
controllers/piece_controller.go
Normal file
@@ -0,0 +1,141 @@
|
||||
package controllers
|
||||
|
||||
import (
|
||||
"fmt"
|
||||
"strconv"
|
||||
"strings"
|
||||
|
||||
"github.com/Theodor-Springmann-Stiftung/kgpz_web/helpers/logging"
|
||||
"github.com/Theodor-Springmann-Stiftung/kgpz_web/viewmodels"
|
||||
"github.com/Theodor-Springmann-Stiftung/kgpz_web/xmlmodels"
|
||||
"github.com/gofiber/fiber/v2"
|
||||
)
|
||||
|
||||
func GetPiece(kgpz *xmlmodels.Library) fiber.Handler {
|
||||
return func(c *fiber.Ctx) error {
|
||||
id := c.Params("id")
|
||||
if id == "" {
|
||||
logging.Error(nil, "Piece ID is missing")
|
||||
return c.SendStatus(fiber.StatusNotFound)
|
||||
}
|
||||
|
||||
// Parse the generated ID format: YYYY-NNN-PPP
|
||||
var piece *xmlmodels.Piece
|
||||
if strings.Contains(id, "-") {
|
||||
parts := strings.Split(id, "-")
|
||||
if len(parts) == 3 {
|
||||
year, yearErr := strconv.Atoi(parts[0])
|
||||
issueNum, issueErr := strconv.Atoi(parts[1])
|
||||
page, pageErr := strconv.Atoi(parts[2])
|
||||
|
||||
if yearErr == nil && issueErr == nil && pageErr == nil {
|
||||
piece = findPieceByYearIssuePage(kgpz, year, issueNum, page)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Fallback to original ID lookup if generated ID doesn't work
|
||||
if piece == nil {
|
||||
piece = kgpz.Pieces.Item(id)
|
||||
}
|
||||
|
||||
if piece == nil {
|
||||
logging.Error(nil, "Piece could not be found with ID: "+id)
|
||||
return c.SendStatus(fiber.StatusNotFound)
|
||||
}
|
||||
|
||||
pieceView, err := viewmodels.NewPieceView(*piece, kgpz)
|
||||
if err != nil {
|
||||
logging.Error(err, "Piece view could not be created")
|
||||
return c.SendStatus(fiber.StatusInternalServerError)
|
||||
}
|
||||
|
||||
return c.Render("/piece/", fiber.Map{"model": pieceView, "pieceId": id}, "fullwidth")
|
||||
}
|
||||
}
|
||||
|
||||
// GetPieceWithPage handles piece URLs with optional page parameter: /beitrag/:id/:page?
|
||||
func GetPieceWithPage(kgpz *xmlmodels.Library) fiber.Handler {
|
||||
return func(c *fiber.Ctx) error {
|
||||
id := c.Params("id")
|
||||
if id == "" {
|
||||
logging.Error(nil, "Piece ID is missing")
|
||||
return c.SendStatus(fiber.StatusNotFound)
|
||||
}
|
||||
|
||||
// Handle optional page parameter
|
||||
pageParam := c.Params("page")
|
||||
var targetPage int
|
||||
if pageParam != "" {
|
||||
pi, err := strconv.Atoi(pageParam)
|
||||
if err != nil || pi < 1 {
|
||||
logging.Error(err, "Page is not a valid number")
|
||||
return c.SendStatus(fiber.StatusNotFound)
|
||||
}
|
||||
targetPage = pi
|
||||
}
|
||||
|
||||
// Parse the generated ID format: YYYY-NNN-PPP
|
||||
var piece *xmlmodels.Piece
|
||||
if strings.Contains(id, "-") {
|
||||
parts := strings.Split(id, "-")
|
||||
if len(parts) == 3 {
|
||||
year, yearErr := strconv.Atoi(parts[0])
|
||||
issueNum, issueErr := strconv.Atoi(parts[1])
|
||||
page, pageErr := strconv.Atoi(parts[2])
|
||||
|
||||
if yearErr == nil && issueErr == nil && pageErr == nil {
|
||||
piece = findPieceByYearIssuePage(kgpz, year, issueNum, page)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Fallback to original ID lookup if generated ID doesn't work
|
||||
if piece == nil {
|
||||
piece = kgpz.Pieces.Item(id)
|
||||
}
|
||||
|
||||
if piece == nil {
|
||||
logging.Error(nil, "Piece could not be found with ID: "+id)
|
||||
return c.SendStatus(fiber.StatusNotFound)
|
||||
}
|
||||
|
||||
pieceView, err := viewmodels.NewPieceView(*piece, kgpz)
|
||||
if err != nil {
|
||||
logging.Error(err, "Piece view could not be created")
|
||||
return c.SendStatus(fiber.StatusInternalServerError)
|
||||
}
|
||||
|
||||
// If a page was specified, validate it exists in this piece
|
||||
if targetPage > 0 {
|
||||
pageExists := false
|
||||
for _, pageEntry := range pieceView.AllPages {
|
||||
if pageEntry.PageNumber == targetPage {
|
||||
pageExists = true
|
||||
break
|
||||
}
|
||||
}
|
||||
if !pageExists {
|
||||
logging.Debug(fmt.Sprintf("Page %d not found in piece %s", targetPage, id))
|
||||
return c.SendStatus(fiber.StatusNotFound)
|
||||
}
|
||||
}
|
||||
|
||||
return c.Render("/piece/", fiber.Map{"model": pieceView, "pieceId": id, "targetPage": targetPage}, "fullwidth")
|
||||
}
|
||||
}
|
||||
|
||||
// findPieceByYearIssuePage finds a piece that starts on the given year, issue, and page
|
||||
func findPieceByYearIssuePage(kgpz *xmlmodels.Library, year, issueNum, page int) *xmlmodels.Piece {
|
||||
kgpz.Pieces.Lock()
|
||||
defer kgpz.Pieces.Unlock()
|
||||
|
||||
for _, piece := range kgpz.Pieces.Array {
|
||||
for _, issueRef := range piece.IssueRefs {
|
||||
if issueRef.When.Year == year && issueRef.Nr == issueNum && issueRef.Von == page {
|
||||
return &piece
|
||||
}
|
||||
}
|
||||
}
|
||||
return nil
|
||||
}
|
||||
@@ -53,11 +53,35 @@ func PageIcon(iconType string) template.HTML {
|
||||
return template.HTML(`<i class="ri-file-text-line text-black text-sm" style="margin-left: 2px; transform: scaleX(-1); display: inline-block;"></i><i class="ri-file-text-line text-slate-400 text-sm"></i>`)
|
||||
case "odd":
|
||||
return template.HTML(`<i class="ri-file-text-line text-slate-400 text-sm" style="margin-left: 2px; transform: scaleX(-1); display: inline-block;"></i><i class="ri-file-text-line text-black text-sm" ></i>`)
|
||||
case "single":
|
||||
return template.HTML(`<i class="ri-file-text-line text-black text-sm"></i>`)
|
||||
default:
|
||||
return template.HTML(`<i class="ri-file-text-line text-black text-sm"></i>`)
|
||||
}
|
||||
}
|
||||
|
||||
// GetPieceURL generates a piece view URL from year, issue number, and page
|
||||
func GetPieceURL(year, issueNum, page int) string {
|
||||
pieceID := fmt.Sprintf("%d-%03d-%03d", year, issueNum, page)
|
||||
return "/beitrag/" + pieceID
|
||||
}
|
||||
|
||||
// IssueContext formats an issue reference into a readable context string
|
||||
func IssueContext(issueRef interface{}) string {
|
||||
// Handle both direct IssueRef and map formats
|
||||
switch ref := issueRef.(type) {
|
||||
case map[string]interface{}:
|
||||
if year, ok := ref["year"].(int); ok {
|
||||
if nr, ok := ref["nr"].(int); ok {
|
||||
return fmt.Sprintf("%d Nr. %d", year, nr)
|
||||
}
|
||||
}
|
||||
return "Unbekannte Ausgabe"
|
||||
default:
|
||||
return "Unbekannte Ausgabe"
|
||||
}
|
||||
}
|
||||
|
||||
func (e *Engine) funcs() error {
|
||||
e.mu.Lock()
|
||||
e.mu.Unlock()
|
||||
@@ -114,6 +138,10 @@ func (e *Engine) funcs() error {
|
||||
// Page icons for ausgabe templates
|
||||
e.AddFunc("PageIcon", PageIcon)
|
||||
|
||||
// Piece view helpers
|
||||
e.AddFunc("GetPieceURL", GetPieceURL)
|
||||
e.AddFunc("IssueContext", IssueContext)
|
||||
|
||||
return nil
|
||||
}
|
||||
|
||||
|
||||
206
viewmodels/piece_view.go
Normal file
206
viewmodels/piece_view.go
Normal file
@@ -0,0 +1,206 @@
|
||||
package viewmodels
|
||||
|
||||
import (
|
||||
"fmt"
|
||||
"sort"
|
||||
|
||||
"github.com/Theodor-Springmann-Stiftung/kgpz_web/xmlmodels"
|
||||
)
|
||||
|
||||
type PiecePageEntry struct {
|
||||
PageNumber int
|
||||
IssueYear int
|
||||
IssueNumber int
|
||||
ImagePath string
|
||||
IsContinuation bool
|
||||
IssueContext string // "1764 Nr. 37" for display
|
||||
Available bool
|
||||
}
|
||||
|
||||
type PieceImages struct {
|
||||
AllPages []IssuePage // Sequential list of all pages across issues
|
||||
HasImages bool
|
||||
}
|
||||
|
||||
type PieceVM struct {
|
||||
xmlmodels.Piece
|
||||
AllIssueRefs []xmlmodels.IssueRef // All issues containing this piece
|
||||
AllPages []PiecePageEntry // Flattened chronological page list
|
||||
ContinuousPages IndividualPiecesByPage // For template compatibility
|
||||
Images PieceImages // All page images across issues
|
||||
TotalPageCount int
|
||||
Title string // Extracted piece title
|
||||
MainCategory string // Primary category
|
||||
IssueContexts []string // List of issue contexts for display
|
||||
}
|
||||
|
||||
func NewPieceView(piece xmlmodels.Piece, lib *xmlmodels.Library) (*PieceVM, error) {
|
||||
pvm := &PieceVM{
|
||||
Piece: piece,
|
||||
AllIssueRefs: piece.IssueRefs,
|
||||
AllPages: []PiecePageEntry{},
|
||||
IssueContexts: []string{},
|
||||
}
|
||||
|
||||
// Extract title from piece
|
||||
if len(piece.Title) > 0 {
|
||||
pvm.Title = piece.Title[0]
|
||||
}
|
||||
|
||||
// Extract main category
|
||||
if len(piece.CategoryRefs) > 0 {
|
||||
pvm.MainCategory = piece.CategoryRefs[0].Ref
|
||||
}
|
||||
|
||||
// Sort issue refs chronologically
|
||||
sort.Slice(pvm.AllIssueRefs, func(i, j int) bool {
|
||||
refA := pvm.AllIssueRefs[i]
|
||||
refB := pvm.AllIssueRefs[j]
|
||||
|
||||
if refA.When.Year != refB.When.Year {
|
||||
return refA.When.Year < refB.When.Year
|
||||
}
|
||||
return refA.Nr < refB.Nr
|
||||
})
|
||||
|
||||
// Process each issue reference
|
||||
for partIndex, issueRef := range pvm.AllIssueRefs {
|
||||
issueContext := fmt.Sprintf("%d Nr. %d", issueRef.When.Year, issueRef.Nr)
|
||||
pvm.IssueContexts = append(pvm.IssueContexts, issueContext)
|
||||
|
||||
// Add pages for this issue reference
|
||||
for pageNum := issueRef.Von; pageNum <= issueRef.Bis; pageNum++ {
|
||||
pageEntry := PiecePageEntry{
|
||||
PageNumber: pageNum,
|
||||
IssueYear: issueRef.When.Year,
|
||||
IssueNumber: issueRef.Nr,
|
||||
IsContinuation: pageNum > issueRef.Von || partIndex > 0,
|
||||
IssueContext: issueContext,
|
||||
Available: true, // Will be updated when we load images
|
||||
}
|
||||
|
||||
// Get actual image path from registry
|
||||
pageEntry.ImagePath = getImagePathFromRegistry(issueRef.When.Year, pageNum)
|
||||
|
||||
pvm.AllPages = append(pvm.AllPages, pageEntry)
|
||||
}
|
||||
}
|
||||
|
||||
pvm.TotalPageCount = len(pvm.AllPages)
|
||||
|
||||
// Load images and update availability
|
||||
if err := pvm.loadImages(); err != nil {
|
||||
return nil, fmt.Errorf("failed to load images: %w", err)
|
||||
}
|
||||
|
||||
// Create template-compatible structure
|
||||
if err := pvm.createContinuousPages(lib); err != nil {
|
||||
return nil, fmt.Errorf("failed to create continuous pages: %w", err)
|
||||
}
|
||||
|
||||
return pvm, nil
|
||||
}
|
||||
|
||||
// loadImages loads and validates all page images for the piece
|
||||
func (pvm *PieceVM) loadImages() error {
|
||||
// Initialize image registry if needed
|
||||
if err := initImageRegistry(); err != nil {
|
||||
return err
|
||||
}
|
||||
|
||||
issuePages := []IssuePage{}
|
||||
hasAnyImages := false
|
||||
|
||||
for i, pageEntry := range pvm.AllPages {
|
||||
// Create IssuePage for template compatibility
|
||||
issuePage := IssuePage{
|
||||
PageNumber: pageEntry.PageNumber,
|
||||
ImagePath: pageEntry.ImagePath,
|
||||
Available: true, // Assume available for now
|
||||
PageIcon: "single", // Simplified icon for piece view
|
||||
}
|
||||
|
||||
// Check if image actually exists using the registry
|
||||
key := fmt.Sprintf("%d-%d", pageEntry.IssueYear, pageEntry.PageNumber)
|
||||
if imageRegistry != nil {
|
||||
if _, exists := imageRegistry.ByYearPage[key]; exists {
|
||||
hasAnyImages = true
|
||||
} else {
|
||||
issuePage.Available = false
|
||||
pvm.AllPages[i].Available = false
|
||||
}
|
||||
}
|
||||
|
||||
issuePages = append(issuePages, issuePage)
|
||||
}
|
||||
|
||||
pvm.Images = PieceImages{
|
||||
AllPages: issuePages,
|
||||
HasImages: hasAnyImages,
|
||||
}
|
||||
|
||||
return nil
|
||||
}
|
||||
|
||||
// createContinuousPages creates the template-compatible IndividualPiecesByPage structure
|
||||
func (pvm *PieceVM) createContinuousPages(lib *xmlmodels.Library) error {
|
||||
individual := IndividualPiecesByPage{
|
||||
Items: make(map[int][]IndividualPieceByIssue),
|
||||
Pages: []int{},
|
||||
}
|
||||
|
||||
// Create a virtual piece entry for each page
|
||||
for _, pageEntry := range pvm.AllPages {
|
||||
// Create IssueRef for this specific page
|
||||
issueRef := xmlmodels.IssueRef{
|
||||
Nr: pageEntry.IssueNumber,
|
||||
Von: pageEntry.PageNumber,
|
||||
Bis: pageEntry.PageNumber,
|
||||
}
|
||||
issueRef.When.Year = pageEntry.IssueYear
|
||||
|
||||
// Create PieceByIssue
|
||||
pieceByIssue := PieceByIssue{
|
||||
Piece: pvm.Piece,
|
||||
Reference: issueRef,
|
||||
IsContinuation: pageEntry.IsContinuation,
|
||||
}
|
||||
|
||||
// Create IndividualPieceByIssue
|
||||
individualPiece := IndividualPieceByIssue{
|
||||
PieceByIssue: pieceByIssue,
|
||||
IssueRefs: pvm.AllIssueRefs,
|
||||
PageIcon: "single", // Simplified icon for piece view
|
||||
}
|
||||
|
||||
// Add to the page map
|
||||
if individual.Items[pageEntry.PageNumber] == nil {
|
||||
individual.Items[pageEntry.PageNumber] = []IndividualPieceByIssue{}
|
||||
individual.Pages = append(individual.Pages, pageEntry.PageNumber)
|
||||
}
|
||||
individual.Items[pageEntry.PageNumber] = append(individual.Items[pageEntry.PageNumber], individualPiece)
|
||||
}
|
||||
|
||||
// Sort pages
|
||||
sort.Ints(individual.Pages)
|
||||
|
||||
pvm.ContinuousPages = individual
|
||||
return nil
|
||||
}
|
||||
|
||||
// getImagePathFromRegistry gets the actual image path from the image registry
|
||||
func getImagePathFromRegistry(year, page int) string {
|
||||
// Initialize registry if needed
|
||||
if err := initImageRegistry(); err != nil {
|
||||
return ""
|
||||
}
|
||||
|
||||
// Look up the image by year and page
|
||||
key := fmt.Sprintf("%d-%d", year, page)
|
||||
if imageFile, exists := imageRegistry.ByYearPage[key]; exists {
|
||||
return imageFile.Path
|
||||
}
|
||||
|
||||
// Fallback: generate a default path (though this probably won't exist)
|
||||
return fmt.Sprintf("/static/pictures/%d/seite_%d.jpg", year, page)
|
||||
}
|
||||
@@ -1,25 +1,25 @@
|
||||
const L = "script[xslt-onload]", w = "xslt-template", E = "xslt-transformed", y = /* @__PURE__ */ new Map();
|
||||
const A = "script[xslt-onload]", w = "xslt-template", L = "xslt-transformed", y = /* @__PURE__ */ new Map();
|
||||
function v() {
|
||||
let o = htmx.findAll(L);
|
||||
let o = htmx.findAll(A);
|
||||
for (let t of o)
|
||||
q(t);
|
||||
E(t);
|
||||
}
|
||||
function q(o) {
|
||||
if (o.getAttribute(E) === "true" || !o.hasAttribute(w))
|
||||
function E(o) {
|
||||
if (o.getAttribute(L) === "true" || !o.hasAttribute(w))
|
||||
return;
|
||||
let t = "#" + o.getAttribute(w), e = y.get(t);
|
||||
if (!e) {
|
||||
let a = htmx.find(t);
|
||||
if (a) {
|
||||
let s = a.innerHTML ? new DOMParser().parseFromString(a.innerHTML, "application/xml") : a.contentDocument;
|
||||
e = new XSLTProcessor(), e.importStylesheet(s), y.set(t, e);
|
||||
let s = htmx.find(t);
|
||||
if (s) {
|
||||
let a = s.innerHTML ? new DOMParser().parseFromString(s.innerHTML, "application/xml") : s.contentDocument;
|
||||
e = new XSLTProcessor(), e.importStylesheet(a), y.set(t, e);
|
||||
} else
|
||||
throw new Error("Unknown XSLT template: " + t);
|
||||
}
|
||||
let n = new DOMParser().parseFromString(o.innerHTML, "application/xml"), i = e.transformToFragment(n, document), r = new XMLSerializer().serializeToString(i);
|
||||
o.outerHTML = r;
|
||||
}
|
||||
function k() {
|
||||
function q() {
|
||||
document.querySelectorAll("template[simple]").forEach((t) => {
|
||||
let e = t.getAttribute("id"), n = t.content;
|
||||
customElements.define(
|
||||
@@ -31,8 +31,8 @@ function k() {
|
||||
connectedCallback() {
|
||||
let i = [];
|
||||
this.slots.forEach((r) => {
|
||||
let a = r.getAttribute("name"), s = this.querySelector(`[slot="${a}"]`);
|
||||
s && (r.replaceWith(s.cloneNode(!0)), i.push(s));
|
||||
let s = r.getAttribute("name"), a = this.querySelector(`[slot="${s}"]`);
|
||||
a && (r.replaceWith(a.cloneNode(!0)), i.push(a));
|
||||
}), i.forEach((r) => {
|
||||
r.remove();
|
||||
});
|
||||
@@ -46,12 +46,12 @@ window.currentPageContainers = window.currentPageContainers || [];
|
||||
window.currentActiveIndex = window.currentActiveIndex || 0;
|
||||
window.pageObserver = window.pageObserver || null;
|
||||
window.scrollTimeout = window.scrollTimeout || null;
|
||||
function B() {
|
||||
function k() {
|
||||
window.highlightObserver && (window.highlightObserver.disconnect(), window.highlightObserver = null);
|
||||
const o = document.querySelectorAll(".newspaper-page-container");
|
||||
window.highlightObserver = new IntersectionObserver(
|
||||
(t) => {
|
||||
C();
|
||||
P();
|
||||
},
|
||||
{
|
||||
rootMargin: "-20% 0px -70% 0px"
|
||||
@@ -60,14 +60,14 @@ function B() {
|
||||
window.highlightObserver.observe(t);
|
||||
});
|
||||
}
|
||||
function C() {
|
||||
function P() {
|
||||
const o = [];
|
||||
document.querySelectorAll(".newspaper-page-container").forEach((e) => {
|
||||
const n = e.getBoundingClientRect(), i = window.innerHeight, r = Math.max(n.top, 0), a = Math.min(n.bottom, i), s = Math.max(0, a - r), l = n.height, g = s / l >= 0.5, u = e.querySelector("img[data-page]"), f = u ? u.getAttribute("data-page") : "unknown";
|
||||
g && u && f && !o.includes(f) && o.push(f);
|
||||
}), M(o), o.length > 0 && I(o);
|
||||
const n = e.getBoundingClientRect(), i = window.innerHeight, r = Math.max(n.top, 0), s = Math.min(n.bottom, i), a = Math.max(0, s - r), l = n.height, u = a / l >= 0.5, g = e.querySelector("img[data-page]"), p = g ? g.getAttribute("data-page") : "unknown";
|
||||
u && g && p && !o.includes(p) && o.push(p);
|
||||
}), $(o), o.length > 0 && S(o);
|
||||
}
|
||||
function M(o) {
|
||||
function $(o) {
|
||||
document.querySelectorAll(".continuation-entry").forEach((t) => {
|
||||
t.style.display = "none";
|
||||
}), o.forEach((t) => {
|
||||
@@ -75,9 +75,9 @@ function M(o) {
|
||||
e && e.querySelectorAll(".continuation-entry").forEach((i) => {
|
||||
i.style.display = "";
|
||||
});
|
||||
}), H(o), N();
|
||||
}), B(o), M();
|
||||
}
|
||||
function H(o) {
|
||||
function B(o) {
|
||||
document.querySelectorAll(".work-title").forEach((t) => {
|
||||
const e = t.getAttribute("data-short-title");
|
||||
e && (t.textContent = e);
|
||||
@@ -89,7 +89,7 @@ function H(o) {
|
||||
});
|
||||
});
|
||||
}
|
||||
function N() {
|
||||
function M() {
|
||||
document.querySelectorAll(".page-entry").forEach((o) => {
|
||||
const t = o.querySelectorAll(".inhalts-entry");
|
||||
let e = !1;
|
||||
@@ -98,10 +98,10 @@ function N() {
|
||||
}), e ? o.style.display = "" : o.style.display = "none";
|
||||
});
|
||||
}
|
||||
function S(o) {
|
||||
I([o]);
|
||||
function C(o) {
|
||||
S([o]);
|
||||
}
|
||||
function I(o) {
|
||||
function S(o) {
|
||||
console.log("markCurrentPagesInInhaltsverzeichnis called with:", o), document.querySelectorAll("[data-page-container]").forEach((e) => {
|
||||
e.hasAttribute("data-beilage") ? (e.classList.remove("border-red-500"), e.classList.add("border-amber-400")) : (e.classList.remove("border-red-500"), e.classList.add("border-slate-300"));
|
||||
}), document.querySelectorAll(".page-number-inhalts").forEach((e) => {
|
||||
@@ -125,20 +125,20 @@ function I(o) {
|
||||
const i = document.querySelector(`[data-page-container="${e}"]`);
|
||||
i && (i.classList.remove("border-slate-300", "border-amber-400"), i.classList.add("border-red-500"));
|
||||
const r = n.closest(".page-entry");
|
||||
r && (r.querySelectorAll(".inhalts-entry").forEach((s) => {
|
||||
s.classList.remove("hover:bg-slate-100"), s.style.cursor = "default";
|
||||
}), r.querySelectorAll('a[href*="/"]').forEach((s) => {
|
||||
s.getAttribute("aria-current") === "page" && (s.style.textDecoration = "none", s.style.pointerEvents = "none", s.classList.add("no-underline"), s.classList.remove("hover:bg-blue-100"));
|
||||
r && (r.querySelectorAll(".inhalts-entry").forEach((a) => {
|
||||
a.classList.remove("hover:bg-slate-100"), a.style.cursor = "default";
|
||||
}), r.querySelectorAll('a[href*="/"]').forEach((a) => {
|
||||
a.getAttribute("aria-current") === "page" && (a.style.textDecoration = "none", a.style.pointerEvents = "none", a.classList.add("no-underline"), a.classList.remove("hover:bg-blue-100"));
|
||||
}));
|
||||
}
|
||||
}), t.length > 0 && $(t[0]), document.querySelectorAll(".page-indicator").forEach((e) => {
|
||||
}), t.length > 0 && N(t[0]), document.querySelectorAll(".page-indicator").forEach((e) => {
|
||||
e.classList.remove("text-red-600", "font-bold"), e.classList.add("text-slate-600", "font-semibold"), e.classList.contains("bg-amber-50") || e.classList.add("bg-blue-50");
|
||||
}), o.forEach((e) => {
|
||||
const n = document.querySelector(`.page-indicator[data-page="${e}"]`);
|
||||
n && (n.classList.remove("text-slate-600"), n.classList.add("text-red-600", "font-bold"));
|
||||
});
|
||||
}
|
||||
function $(o) {
|
||||
function N(o) {
|
||||
const t = o.closest(".lg\\:overflow-y-auto");
|
||||
if (t) {
|
||||
const e = t.getBoundingClientRect(), n = o.getBoundingClientRect(), i = n.top < e.top, r = n.bottom > e.bottom;
|
||||
@@ -148,19 +148,19 @@ function $(o) {
|
||||
});
|
||||
}
|
||||
}
|
||||
function R(o, t, e) {
|
||||
function H(o, t, e) {
|
||||
let n = document.querySelector("single-page-viewer");
|
||||
n || (n = document.createElement("single-page-viewer"), document.body.appendChild(n));
|
||||
const i = o.closest('[data-beilage="true"]') !== null;
|
||||
n.show(o.src, o.alt, t, i);
|
||||
const i = o.closest('[data-beilage="true"]') !== null, r = window.templateData && window.templateData.targetPage ? window.templateData.targetPage : 0;
|
||||
n.show(o.src, o.alt, t, i, r);
|
||||
}
|
||||
function T() {
|
||||
function I() {
|
||||
document.getElementById("pageModal").classList.add("hidden");
|
||||
}
|
||||
function O() {
|
||||
function R() {
|
||||
if (window.pageObserver && (window.pageObserver.disconnect(), window.pageObserver = null), window.currentPageContainers = Array.from(
|
||||
document.querySelectorAll(".newspaper-page-container")
|
||||
), window.currentActiveIndex = 0, p(), document.querySelector(".newspaper-page-container")) {
|
||||
), window.currentActiveIndex = 0, h(), document.querySelector(".newspaper-page-container")) {
|
||||
let t = /* @__PURE__ */ new Set();
|
||||
window.pageObserver = new IntersectionObserver(
|
||||
(e) => {
|
||||
@@ -168,8 +168,8 @@ function O() {
|
||||
const i = window.currentPageContainers.indexOf(n.target);
|
||||
i !== -1 && (n.isIntersecting ? t.add(i) : t.delete(i));
|
||||
}), t.size > 0) {
|
||||
const i = Array.from(t).sort((r, a) => r - a)[0];
|
||||
i !== window.currentActiveIndex && (window.currentActiveIndex = i, p());
|
||||
const i = Array.from(t).sort((r, s) => r - s)[0];
|
||||
i !== window.currentActiveIndex && (window.currentActiveIndex = i, h());
|
||||
}
|
||||
},
|
||||
{
|
||||
@@ -180,13 +180,13 @@ function O() {
|
||||
});
|
||||
}
|
||||
}
|
||||
function K() {
|
||||
function O() {
|
||||
if (window.currentActiveIndex > 0) {
|
||||
let o = -1;
|
||||
const t = [];
|
||||
window.currentPageContainers.forEach((n, i) => {
|
||||
const r = n.getBoundingClientRect(), a = window.innerHeight, s = Math.max(r.top, 0), l = Math.min(r.bottom, a), c = Math.max(0, l - s), g = r.height;
|
||||
c / g >= 0.3 && t.push(i);
|
||||
const r = n.getBoundingClientRect(), s = window.innerHeight, a = Math.max(r.top, 0), l = Math.min(r.bottom, s), c = Math.max(0, l - a), u = r.height;
|
||||
c / u >= 0.3 && t.push(i);
|
||||
});
|
||||
const e = Math.min(...t);
|
||||
for (let n = e - 1; n >= 0; n--)
|
||||
@@ -198,17 +198,17 @@ function K() {
|
||||
behavior: "smooth",
|
||||
block: "start"
|
||||
}), setTimeout(() => {
|
||||
p();
|
||||
h();
|
||||
}, 100));
|
||||
}
|
||||
}
|
||||
function V() {
|
||||
function D() {
|
||||
if (window.currentActiveIndex < window.currentPageContainers.length - 1) {
|
||||
let o = -1;
|
||||
const t = [];
|
||||
window.currentPageContainers.forEach((n, i) => {
|
||||
const r = n.getBoundingClientRect(), a = window.innerHeight, s = Math.max(r.top, 0), l = Math.min(r.bottom, a), c = Math.max(0, l - s), g = r.height;
|
||||
c / g >= 0.3 && t.push(i);
|
||||
const r = n.getBoundingClientRect(), s = window.innerHeight, a = Math.max(r.top, 0), l = Math.min(r.bottom, s), c = Math.max(0, l - a), u = r.height;
|
||||
c / u >= 0.3 && t.push(i);
|
||||
});
|
||||
const e = Math.max(...t);
|
||||
for (let n = e + 1; n < window.currentPageContainers.length; n++)
|
||||
@@ -220,12 +220,12 @@ function V() {
|
||||
behavior: "smooth",
|
||||
block: "start"
|
||||
}), setTimeout(() => {
|
||||
p();
|
||||
h();
|
||||
}, 100));
|
||||
}
|
||||
}
|
||||
function z() {
|
||||
if (A()) {
|
||||
function K() {
|
||||
if (T()) {
|
||||
const t = document.querySelector("#newspaper-content .newspaper-page-container");
|
||||
t && t.scrollIntoView({
|
||||
behavior: "smooth",
|
||||
@@ -239,11 +239,11 @@ function z() {
|
||||
});
|
||||
}
|
||||
}
|
||||
function A() {
|
||||
function T() {
|
||||
const o = [];
|
||||
window.currentPageContainers.forEach((t, e) => {
|
||||
const n = t.getBoundingClientRect(), i = window.innerHeight, r = Math.max(n.top, 0), a = Math.min(n.bottom, i), s = Math.max(0, a - r), l = n.height;
|
||||
s / l >= 0.3 && o.push(e);
|
||||
const n = t.getBoundingClientRect(), i = window.innerHeight, r = Math.max(n.top, 0), s = Math.min(n.bottom, i), a = Math.max(0, s - r), l = n.height;
|
||||
a / l >= 0.3 && o.push(e);
|
||||
});
|
||||
for (const t of o) {
|
||||
const e = window.currentPageContainers[t];
|
||||
@@ -252,19 +252,19 @@ function A() {
|
||||
}
|
||||
return !1;
|
||||
}
|
||||
function p() {
|
||||
function h() {
|
||||
const o = document.getElementById("prevPageBtn"), t = document.getElementById("nextPageBtn"), e = document.getElementById("beilageBtn");
|
||||
if (o && (window.currentActiveIndex <= 0 ? o.style.display = "none" : o.style.display = "flex"), t && (window.currentActiveIndex >= window.currentPageContainers.length - 1 ? t.style.display = "none" : t.style.display = "flex"), e) {
|
||||
const n = A(), i = e.querySelector("i");
|
||||
const n = T(), i = e.querySelector("i");
|
||||
n ? (e.title = "Zur Hauptausgabe", e.className = "w-14 h-10 lg:w-16 lg:h-12 px-2 py-1 bg-gray-100 hover:bg-gray-200 text-gray-700 hover:text-gray-800 border border-gray-300 transition-colors duration-200 flex items-center justify-center cursor-pointer", i && (i.className = "ri-file-text-line text-lg lg:text-xl")) : (e.title = "Zu Beilage", e.className = "w-14 h-10 lg:w-16 lg:h-12 px-2 py-1 bg-amber-100 hover:bg-amber-200 text-amber-700 hover:text-amber-800 border border-amber-300 transition-colors duration-200 flex items-center justify-center cursor-pointer", i && (i.className = "ri-attachment-line text-lg lg:text-xl"));
|
||||
}
|
||||
}
|
||||
function j() {
|
||||
function V() {
|
||||
const o = document.getElementById("shareLinkBtn");
|
||||
let t = "";
|
||||
if (window.currentActiveIndex !== void 0 && window.currentPageContainers && window.currentPageContainers[window.currentActiveIndex]) {
|
||||
const i = window.currentPageContainers[window.currentActiveIndex].querySelector("[data-page]");
|
||||
i && (t = `#page-${i.getAttribute("data-page")}`);
|
||||
i && (t = `/${i.getAttribute("data-page")}`);
|
||||
}
|
||||
const e = window.location.origin + window.location.pathname + t;
|
||||
navigator.share ? navigator.share({
|
||||
@@ -294,8 +294,11 @@ function x(o, t) {
|
||||
}
|
||||
}
|
||||
}
|
||||
function D() {
|
||||
const o = document.getElementById("citationBtn"), t = document.title || "KGPZ", e = window.location.href, n = (/* @__PURE__ */ new Date()).toLocaleDateString("de-DE"), i = `Königsberger Gelehrte und Politische Zeitung (KGPZ). ${t}. Digital verfügbar unter: ${e} (Zugriff: ${n}).`;
|
||||
function z() {
|
||||
const o = document.getElementById("citationBtn"), t = document.title || "KGPZ";
|
||||
let e = window.location.origin + window.location.pathname;
|
||||
e.includes("#") && (e = e.split("#")[0]);
|
||||
const n = (/* @__PURE__ */ new Date()).toLocaleDateString("de-DE"), i = `Königsberger Gelehrte und Politische Zeitung (KGPZ). ${t}. Digital verfügbar unter: ${e} (Zugriff: ${n}).`;
|
||||
if (navigator.clipboard)
|
||||
navigator.clipboard.writeText(i).then(() => {
|
||||
d(o, "Zitation kopiert!");
|
||||
@@ -306,8 +309,8 @@ function D() {
|
||||
const r = document.createElement("textarea");
|
||||
r.value = i, document.body.appendChild(r), r.select();
|
||||
try {
|
||||
const a = document.execCommand("copy");
|
||||
d(o, a ? "Zitation kopiert!" : "Kopieren fehlgeschlagen");
|
||||
const s = document.execCommand("copy");
|
||||
d(o, s ? "Zitation kopiert!" : "Kopieren fehlgeschlagen");
|
||||
} catch {
|
||||
d(o, "Kopieren fehlgeschlagen");
|
||||
} finally {
|
||||
@@ -333,10 +336,10 @@ function d(o, t) {
|
||||
transition: opacity 0.2s ease;
|
||||
white-space: nowrap;
|
||||
`;
|
||||
const i = o.getBoundingClientRect(), r = window.innerHeight, a = window.innerWidth;
|
||||
let s = i.left - 10, l = i.bottom + 8;
|
||||
const c = 120, g = 32;
|
||||
s + c > a && (s = i.right - c + 10), l + g > r && (l = i.top - g - 8), n.style.left = Math.max(5, s) + "px", n.style.top = Math.max(5, l) + "px", document.body.appendChild(n), setTimeout(() => {
|
||||
const i = o.getBoundingClientRect(), r = window.innerHeight, s = window.innerWidth;
|
||||
let a = i.left - 10, l = i.bottom + 8;
|
||||
const c = 120, u = 32;
|
||||
a + c > s && (a = i.right - c + 10), l + u > r && (l = i.top - u - 8), n.style.left = Math.max(5, a) + "px", n.style.top = Math.max(5, l) + "px", document.body.appendChild(n), setTimeout(() => {
|
||||
n.style.opacity = "1";
|
||||
}, 10), setTimeout(() => {
|
||||
n.style.opacity = "0", setTimeout(() => {
|
||||
@@ -344,39 +347,42 @@ function d(o, t) {
|
||||
}, 200);
|
||||
}, 2e3);
|
||||
}
|
||||
function P() {
|
||||
const o = window.location.hash;
|
||||
let t = "", e = null;
|
||||
if (o.startsWith("#page-")) {
|
||||
if (t = o.replace("#page-", ""), e = document.getElementById(`page-${t}`), !e) {
|
||||
function j() {
|
||||
let o = "", t = null;
|
||||
const e = window.location.pathname.split("/");
|
||||
if (e.length >= 4 && !isNaN(e[e.length - 1])) {
|
||||
if (o = e[e.length - 1], t = document.getElementById(`page-${o}`), !t) {
|
||||
const n = document.querySelectorAll(".newspaper-page-container[data-pages]");
|
||||
for (const i of n) {
|
||||
const r = i.getAttribute("data-pages");
|
||||
if (r && r.split(",").includes(t)) {
|
||||
e = i;
|
||||
if (r && r.split(",").includes(o)) {
|
||||
t = i;
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
e || (e = document.getElementById(`beilage-1-page-${t}`) || document.getElementById(`beilage-2-page-${t}`) || document.querySelector(`[id*="beilage"][id*="page-${t}"]`));
|
||||
} else if (o.startsWith("#beilage-")) {
|
||||
const n = o.match(/#beilage-(\d+)-page-(\d+)/);
|
||||
if (n) {
|
||||
const i = n[1];
|
||||
t = n[2], e = document.getElementById(`beilage-${i}-page-${t}`);
|
||||
}
|
||||
t || (t = document.getElementById(`beilage-1-page-${o}`) || document.getElementById(`beilage-2-page-${o}`) || document.querySelector(`[id*="beilage"][id*="page-${o}"]`));
|
||||
}
|
||||
e && t && setTimeout(() => {
|
||||
e.scrollIntoView({
|
||||
t && o && setTimeout(() => {
|
||||
t.scrollIntoView({
|
||||
behavior: "smooth",
|
||||
block: "start"
|
||||
}), S(t);
|
||||
}), C(o);
|
||||
}, 300);
|
||||
}
|
||||
function b(o, t, e = !1) {
|
||||
let n = "";
|
||||
e ? n = `#beilage-1-page-${o}` : n = `#page-${o}`;
|
||||
const i = window.location.origin + window.location.pathname + n;
|
||||
if (e)
|
||||
n = window.location.origin + window.location.pathname + `#beilage-1-page-${o}`;
|
||||
else {
|
||||
const r = window.location.pathname.split("/");
|
||||
if (r.length >= 3) {
|
||||
const s = r[1], a = r[2];
|
||||
n = `${window.location.origin}/${s}/${a}/${o}`;
|
||||
} else
|
||||
n = window.location.origin + window.location.pathname + `/${o}`;
|
||||
}
|
||||
const i = n;
|
||||
if (navigator.clipboard)
|
||||
navigator.clipboard.writeText(i).then(() => {
|
||||
d(t, "Link kopiert!");
|
||||
@@ -387,8 +393,8 @@ function b(o, t, e = !1) {
|
||||
const r = document.createElement("textarea");
|
||||
r.value = i, document.body.appendChild(r), r.select();
|
||||
try {
|
||||
const a = document.execCommand("copy");
|
||||
d(t, a ? "Link kopiert!" : "Kopieren fehlgeschlagen");
|
||||
const s = document.execCommand("copy");
|
||||
d(t, s ? "Link kopiert!" : "Kopieren fehlgeschlagen");
|
||||
} catch {
|
||||
d(t, "Kopieren fehlgeschlagen");
|
||||
} finally {
|
||||
@@ -397,58 +403,65 @@ function b(o, t, e = !1) {
|
||||
}
|
||||
}
|
||||
function m(o, t) {
|
||||
const e = document.title || "KGPZ", n = `${window.location.origin}${window.location.pathname}#page-${o}`, i = (/* @__PURE__ */ new Date()).toLocaleDateString("de-DE"), r = `Königsberger Gelehrte und Politische Zeitung (KGPZ). ${e}, Seite ${o}. Digital verfügbar unter: ${n} (Zugriff: ${i}).`;
|
||||
const e = document.title || "KGPZ", n = window.location.pathname.split("/");
|
||||
let i;
|
||||
if (n.length >= 3) {
|
||||
const l = n[1], c = n[2];
|
||||
i = `${window.location.origin}/${l}/${c}/${o}`;
|
||||
} else
|
||||
i = `${window.location.origin}${window.location.pathname}/${o}`;
|
||||
const r = i, s = (/* @__PURE__ */ new Date()).toLocaleDateString("de-DE"), a = `Königsberger Gelehrte und Politische Zeitung (KGPZ). ${e}, Seite ${o}. Digital verfügbar unter: ${r} (Zugriff: ${s}).`;
|
||||
if (navigator.clipboard)
|
||||
navigator.clipboard.writeText(r).then(() => {
|
||||
navigator.clipboard.writeText(a).then(() => {
|
||||
d(t, "Zitation kopiert!");
|
||||
}).catch((a) => {
|
||||
}).catch((l) => {
|
||||
d(t, "Kopieren fehlgeschlagen");
|
||||
});
|
||||
else {
|
||||
const a = document.createElement("textarea");
|
||||
a.value = r, document.body.appendChild(a), a.select();
|
||||
const l = document.createElement("textarea");
|
||||
l.value = a, document.body.appendChild(l), l.select();
|
||||
try {
|
||||
const s = document.execCommand("copy");
|
||||
d(t, s ? "Zitation kopiert!" : "Kopieren fehlgeschlagen");
|
||||
const c = document.execCommand("copy");
|
||||
d(t, c ? "Zitation kopiert!" : "Kopieren fehlgeschlagen");
|
||||
} catch {
|
||||
d(t, "Kopieren fehlgeschlagen");
|
||||
} finally {
|
||||
document.body.removeChild(a);
|
||||
document.body.removeChild(l);
|
||||
}
|
||||
}
|
||||
}
|
||||
function h() {
|
||||
B(), O(), window.addEventListener("scroll", function() {
|
||||
function f() {
|
||||
k(), R(), window.addEventListener("scroll", function() {
|
||||
clearTimeout(window.scrollTimeout), window.scrollTimeout = setTimeout(() => {
|
||||
C(), p();
|
||||
P(), h();
|
||||
}, 50);
|
||||
}), P(), window.addEventListener("hashchange", P), document.addEventListener("keydown", function(o) {
|
||||
o.key === "Escape" && T();
|
||||
}), j(), document.addEventListener("keydown", function(o) {
|
||||
o.key === "Escape" && I();
|
||||
});
|
||||
}
|
||||
window.enlargePage = R;
|
||||
window.closeModal = T;
|
||||
window.scrollToPreviousPage = K;
|
||||
window.scrollToNextPage = V;
|
||||
window.scrollToBeilage = z;
|
||||
window.shareCurrentPage = j;
|
||||
window.generateCitation = D;
|
||||
window.enlargePage = H;
|
||||
window.closeModal = I;
|
||||
window.scrollToPreviousPage = O;
|
||||
window.scrollToNextPage = D;
|
||||
window.scrollToBeilage = K;
|
||||
window.shareCurrentPage = V;
|
||||
window.generateCitation = z;
|
||||
window.copyPagePermalink = b;
|
||||
window.generatePageCitation = m;
|
||||
function _() {
|
||||
v(), k(), document.querySelector(".newspaper-page-container") && h(), htmx.on("htmx:load", function(o) {
|
||||
v(), q(), document.querySelector(".newspaper-page-container") && f(), htmx.on("htmx:load", function(o) {
|
||||
v();
|
||||
}), document.body.addEventListener("htmx:afterSwap", function(o) {
|
||||
setTimeout(() => {
|
||||
document.querySelector(".newspaper-page-container") && h();
|
||||
document.querySelector(".newspaper-page-container") && f();
|
||||
}, 100);
|
||||
}), document.body.addEventListener("htmx:afterSettle", function(o) {
|
||||
setTimeout(() => {
|
||||
document.querySelector(".newspaper-page-container") && h();
|
||||
document.querySelector(".newspaper-page-container") && f();
|
||||
}, 200);
|
||||
}), document.body.addEventListener("htmx:load", function(o) {
|
||||
setTimeout(() => {
|
||||
document.querySelector(".newspaper-page-container") && h();
|
||||
document.querySelector(".newspaper-page-container") && f();
|
||||
}, 100);
|
||||
});
|
||||
}
|
||||
@@ -481,7 +494,7 @@ class Z extends HTMLElement {
|
||||
<!-- Page indicator with icon -->
|
||||
<div id="page-indicator" class="text-slate-800 flex items-center gap-3">
|
||||
<span id="page-icon" class="text-lg"></span>
|
||||
<span id="page-number" class="text-2xl font-serif font-bold"></span>
|
||||
<span id="page-number" class="text-lg font-bold bg-blue-50 px-2 py-1 rounded flex items-center gap-1"></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -552,11 +565,19 @@ class Z extends HTMLElement {
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
show(t, e, n, i = !1) {
|
||||
const r = this.querySelector("#single-page-image"), a = this.querySelector("#page-number"), s = this.querySelector("#page-icon");
|
||||
this.querySelector("#page-indicator"), r.src = t, r.alt = e, this.currentPageNumber = n, this.currentIsBeilage = i, a.textContent = n;
|
||||
const l = this.determinePageIconType(n, i);
|
||||
s.innerHTML = this.getPageIconHTML(l), this.updateNavigationButtons(), this.style.display = "block", document.body.style.overflow = "hidden", S(n);
|
||||
show(t, e, n, i = !1, r = 0) {
|
||||
const s = this.querySelector("#single-page-image"), a = this.querySelector("#page-number"), l = this.querySelector("#page-icon");
|
||||
this.querySelector("#page-indicator"), s.src = t, s.alt = e, this.currentPageNumber = n, this.currentIsBeilage = i;
|
||||
const c = this.getIssueContext(n);
|
||||
if (a.innerHTML = c ? `${c}, ${n}` : `${n}`, r && n === r) {
|
||||
a.style.position = "relative";
|
||||
const g = a.querySelector(".target-page-dot");
|
||||
g && g.remove();
|
||||
const p = document.createElement("span");
|
||||
p.className = "target-page-dot absolute -top-1 -right-1 w-3 h-3 bg-red-500 rounded-full z-10", p.title = "verlinkte Seite", a.appendChild(p);
|
||||
}
|
||||
const u = this.determinePageIconType(n, i);
|
||||
l.innerHTML = this.getPageIconHTML(u), this.updateNavigationButtons(), this.style.display = "block", document.body.style.overflow = "hidden", C(n);
|
||||
}
|
||||
close() {
|
||||
this.style.display = "none", document.body.style.overflow = "";
|
||||
@@ -573,8 +594,8 @@ class Z extends HTMLElement {
|
||||
}).filter((l) => l !== null).sort((l, c) => l - c);
|
||||
if (r.length === 0)
|
||||
return "first";
|
||||
const a = r[0], s = r[r.length - 1];
|
||||
return t === a ? "first" : t === s ? "last" : t === a + 1 ? "even" : t === s - 1 ? "odd" : t % 2 === 0 ? "even" : "odd";
|
||||
const s = r[0], a = r[r.length - 1];
|
||||
return t === s ? "first" : t === a ? "last" : t === s + 1 ? "even" : t === a - 1 ? "odd" : t % 2 === 0 ? "even" : "odd";
|
||||
}
|
||||
// Generate page icon HTML based on type (same as Go PageIcon function)
|
||||
getPageIconHTML(t) {
|
||||
@@ -617,15 +638,15 @@ class Z extends HTMLElement {
|
||||
this.currentIsBeilage ? t = '.newspaper-page-container[data-beilage="true"]' : t = ".newspaper-page-container:not([data-beilage])";
|
||||
const e = Array.from(document.querySelectorAll(t));
|
||||
console.log("Found containers:", e.length, "for", this.currentIsBeilage ? "beilage" : "main");
|
||||
const n = e.map((s) => {
|
||||
const l = s.getAttribute("data-page-container"), c = l ? parseInt(l) : null;
|
||||
const n = e.map((a) => {
|
||||
const l = a.getAttribute("data-page-container"), c = l ? parseInt(l) : null;
|
||||
return console.log("Container page:", l, "parsed:", c), c;
|
||||
}).filter((s) => s !== null).sort((s, l) => s - l);
|
||||
}).filter((a) => a !== null).sort((a, l) => a - l);
|
||||
console.log("All pages found:", n), console.log("Current page:", this.currentPageNumber);
|
||||
const i = n.indexOf(this.currentPageNumber);
|
||||
console.log("Current index:", i);
|
||||
let r = null, a = null;
|
||||
return i > 0 && (r = n[i - 1]), i < n.length - 1 && (a = n[i + 1]), console.log("Adjacent pages - prev:", r, "next:", a), { prevPage: r, nextPage: a };
|
||||
let r = null, s = null;
|
||||
return i > 0 && (r = n[i - 1]), i < n.length - 1 && (s = n[i + 1]), console.log("Adjacent pages - prev:", r, "next:", s), { prevPage: r, nextPage: s };
|
||||
}
|
||||
// Navigate to previous page
|
||||
goToPreviousPage() {
|
||||
@@ -650,6 +671,35 @@ class Z extends HTMLElement {
|
||||
const t = this.querySelector("#sidebar-spacer"), e = this.querySelector("#sidebar-toggle-btn"), n = e.querySelector("i"), i = t.classList.contains("w-0");
|
||||
console.log("Current state - isCollapsed:", i), console.log("Current classes:", t.className), i ? (t.classList.remove("w-0"), t.classList.add("lg:w-1/4", "xl:w-1/5"), e.className = "w-10 h-10 bg-slate-100 hover:bg-slate-200 text-slate-700 border border-slate-300 rounded flex items-center justify-center transition-colors duration-200 cursor-pointer", n.className = "ri-sidebar-unfold-line text-lg font-bold", e.title = "Inhaltsverzeichnis ausblenden", console.log("Expanding sidebar")) : (t.classList.remove("lg:w-1/4", "xl:w-1/5"), t.classList.add("w-0"), e.className = "w-10 h-10 bg-orange-100 hover:bg-orange-200 text-orange-700 border border-orange-300 rounded flex items-center justify-center transition-colors duration-200 cursor-pointer", n.className = "ri-sidebar-fold-line text-lg font-bold", e.title = "Inhaltsverzeichnis einblenden", console.log("Collapsing sidebar")), console.log("New classes:", t.className);
|
||||
}
|
||||
// Extract issue context from document title, URL, or page container
|
||||
getIssueContext(t) {
|
||||
const e = window.location.pathname, n = e.includes("/beitrag/");
|
||||
if (n) {
|
||||
const s = document.querySelector(`[data-page-container="${t}"]`);
|
||||
if (s) {
|
||||
const c = s.querySelector(".page-indicator");
|
||||
if (c) {
|
||||
const g = c.textContent.trim().match(/(\d{4})\s+Nr\.\s+(\d+)/);
|
||||
if (g)
|
||||
return `${g[1]} Nr. ${g[2]}`;
|
||||
}
|
||||
}
|
||||
const l = document.title.match(/(\d{4}).*Nr\.\s*(\d+)/);
|
||||
if (l)
|
||||
return `${l[1]} Nr. ${l[2]}`;
|
||||
} else
|
||||
return "";
|
||||
const i = e.match(/\/(\d{4})\/(\d+)/);
|
||||
if (i)
|
||||
return n ? `${i[1]} Nr. ${i[2]}` : "";
|
||||
const r = document.querySelector(".page-indicator");
|
||||
if (r) {
|
||||
const a = r.textContent.trim().match(/(\d{4})\s+Nr\.\s+(\d+)/);
|
||||
if (a)
|
||||
return `${a[1]} Nr. ${a[2]}`;
|
||||
}
|
||||
return "KGPZ";
|
||||
}
|
||||
}
|
||||
customElements.define("single-page-viewer", Z);
|
||||
document.body.addEventListener("htmx:beforeRequest", function(o) {
|
||||
|
||||
File diff suppressed because one or more lines are too long
@@ -28,10 +28,11 @@
|
||||
{{ end }}</span
|
||||
>
|
||||
<a
|
||||
href="#page-{{ $page }}"
|
||||
class="page-number-inhalts font-bold text-slate-700 bg-slate-100 px-2 py-1 rounded text-sm transition-colors duration-200 hover:bg-slate-200 no-underline"
|
||||
href="/{{ $model.Year }}/{{ $model.Number.No }}/{{ $page }}"
|
||||
class="page-number-inhalts font-bold text-slate-700 bg-slate-100 px-2 py-1 rounded text-sm transition-colors duration-200 hover:bg-slate-200 no-underline relative"
|
||||
data-page-number="{{ $page }}">
|
||||
<span class="page-label">{{ $page }}</span>
|
||||
{{ template "_page_link_indicator" (dict "pageNumber" $page "targetPage" $.targetPage) }}
|
||||
</a>
|
||||
</div>
|
||||
<button
|
||||
@@ -73,21 +74,38 @@
|
||||
{{ end }}">
|
||||
<span class="text-black text-xs font-bold">{{ add $index 1 }}</span>
|
||||
<span class="w-px h-3 bg-slate-300 mx-1"></span>
|
||||
<span class="{{- if and (eq $issue.Nr $model.Number.No) (eq $issue.When.Year $model.Datum.When.Year) -}}
|
||||
text-red-700 pointer-events-none
|
||||
{{ end }}"
|
||||
{{- if and (eq $issue.Nr $model.Number.No) (eq $issue.When.Year
|
||||
$model.Datum.When.Year)
|
||||
-}}
|
||||
aria-current="page"
|
||||
{{ end }}>
|
||||
<span
|
||||
class="{{- if and (eq $issue.Nr $model.Number.No) (eq $issue.When.Year $model.Datum.When.Year) -}}
|
||||
text-red-700 pointer-events-none
|
||||
{{ end }}"
|
||||
{{- if and (eq $issue.Nr $model.Number.No) (eq $issue.When.Year
|
||||
$model.Datum.When.Year)
|
||||
-}}
|
||||
aria-current="page"
|
||||
{{ end }}>
|
||||
{{ template "_citation" $issue }}
|
||||
</span>
|
||||
</div>
|
||||
{{ end }}
|
||||
<!-- Link zum gesamten Beitrag anzeigen -->
|
||||
{{ if and (not $individualPiece.PieceByIssue.IsContinuation) (gt (len $individualPiece.IssueRefs) 1) }}
|
||||
<div
|
||||
class="inline-flex items-center gap-1 px-2 py-1 bg-blue-50
|
||||
hover:bg-blue-100 text-blue-700 hover:text-blue-800 border border-blue-200
|
||||
hover:border-blue-300 rounded text-xs font-medium transition-colors
|
||||
duration-200">
|
||||
<i class="ri-file-copy-2-line text-xs"></i>
|
||||
<a
|
||||
href="{{ GetPieceURL $individualPiece.PieceByIssue.Reference.When.Year $individualPiece.PieceByIssue.Reference.Nr $individualPiece.PieceByIssue.Reference.Von }}"
|
||||
class="">
|
||||
Alle
|
||||
</a>
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
|
||||
</div>
|
||||
{{ end }}
|
||||
{{ else }}
|
||||
@@ -191,21 +209,38 @@
|
||||
{{ end }}">
|
||||
<span class="text-black text-xs font-bold">{{ add $index 1 }}</span>
|
||||
<span class="w-px h-3 bg-slate-300 mx-1"></span>
|
||||
<span class="{{- if and (eq $issue.Nr $model.Number.No) (eq $issue.When.Year $model.Datum.When.Year) -}}
|
||||
text-red-700 pointer-events-none
|
||||
{{ end }}"
|
||||
{{- if and (eq $issue.Nr $model.Number.No) (eq $issue.When.Year
|
||||
$model.Datum.When.Year)
|
||||
-}}
|
||||
aria-current="page"
|
||||
{{ end }}>
|
||||
<span
|
||||
class="{{- if and (eq $issue.Nr $model.Number.No) (eq $issue.When.Year $model.Datum.When.Year) -}}
|
||||
text-red-700 pointer-events-none
|
||||
{{ end }}"
|
||||
{{- if and (eq $issue.Nr $model.Number.No) (eq $issue.When.Year
|
||||
$model.Datum.When.Year)
|
||||
-}}
|
||||
aria-current="page"
|
||||
{{ end }}>
|
||||
{{ template "_citation" $issue }}
|
||||
</span>
|
||||
</div>
|
||||
{{ end }}
|
||||
<!-- Link zum gesamten Beitrag anzeigen -->
|
||||
{{ if and (not $individualPiece.PieceByIssue.IsContinuation) (gt (len $individualPiece.IssueRefs) 1) }}
|
||||
<div
|
||||
class="inline-flex items-center gap-1 px-2 py-1 bg-blue-50
|
||||
hover:bg-blue-100 text-blue-700 hover:text-blue-800 border border-blue-200
|
||||
hover:border-blue-300 rounded text-xs font-medium transition-colors
|
||||
duration-200">
|
||||
<i class="ri-file-copy-2-line text-xs"></i>
|
||||
<a
|
||||
href="{{ GetPieceURL $individualPiece.PieceByIssue.Reference.When.Year $individualPiece.PieceByIssue.Reference.Nr $individualPiece.PieceByIssue.Reference.Von }}"
|
||||
class="">
|
||||
Alle
|
||||
</a>
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
|
||||
</div>
|
||||
{{ end }}
|
||||
{{ else }}
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
|
||||
<!-- Historical printing layout grid -->
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
{{ template "_historical_layout" (dict "pages" $pages "pageCount" $pageCount "isBeilage" false) }}
|
||||
{{ template "_historical_layout" (dict "pages" $pages "pageCount" $pageCount "isBeilage" false "targetPage" $.targetPage) }}
|
||||
</div>
|
||||
{{ end }}
|
||||
|
||||
@@ -27,7 +27,7 @@
|
||||
|
||||
<!-- Historical printing layout grid for Beilage -->
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
{{ template "_historical_layout" (dict "pages" $beilagePages "pageCount" $pageCount "isBeilage" true) }}
|
||||
{{ template "_historical_layout" (dict "pages" $beilagePages "pageCount" $pageCount "isBeilage" true "targetPage" $.targetPage) }}
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
@@ -56,50 +56,51 @@
|
||||
{{ $pages := .pages }}
|
||||
{{ $pageCount := .pageCount }}
|
||||
{{ $isBeilage := .isBeilage }}
|
||||
{{ $targetPage := .targetPage }}
|
||||
|
||||
{{ if eq $pageCount 2 }}
|
||||
<!-- 2 pages: [1] [2] -->
|
||||
{{ template "_render_page" (dict "page" (index $pages 0) "position" "left" "isBeilage" $isBeilage) }}
|
||||
{{ template "_render_page" (dict "page" (index $pages 1) "position" "right" "isBeilage" $isBeilage) }}
|
||||
{{ template "_render_page" (dict "page" (index $pages 0) "position" "left" "isBeilage" $isBeilage "targetPage" $targetPage) }}
|
||||
{{ template "_render_page" (dict "page" (index $pages 1) "position" "right" "isBeilage" $isBeilage "targetPage" $targetPage) }}
|
||||
{{ else if eq $pageCount 4 }}
|
||||
<!-- 4 pages: [1] [_] \n [2] [3] \n [_] [4] -->
|
||||
{{ template "_render_page" (dict "page" (index $pages 0) "position" "left" "isBeilage" $isBeilage) }}
|
||||
{{ template "_render_page" (dict "page" (index $pages 0) "position" "left" "isBeilage" $isBeilage "targetPage" $targetPage) }}
|
||||
{{ template "_render_empty" "" }}
|
||||
{{ template "_render_page" (dict "page" (index $pages 1) "position" "left" "isBeilage" $isBeilage) }}
|
||||
{{ template "_render_page" (dict "page" (index $pages 2) "position" "right" "isBeilage" $isBeilage) }}
|
||||
{{ template "_render_page" (dict "page" (index $pages 1) "position" "left" "isBeilage" $isBeilage "targetPage" $targetPage) }}
|
||||
{{ template "_render_page" (dict "page" (index $pages 2) "position" "right" "isBeilage" $isBeilage "targetPage" $targetPage) }}
|
||||
{{ template "_render_empty" "" }}
|
||||
{{ template "_render_page" (dict "page" (index $pages 3) "position" "right" "isBeilage" $isBeilage) }}
|
||||
{{ template "_render_page" (dict "page" (index $pages 3) "position" "right" "isBeilage" $isBeilage "targetPage" $targetPage) }}
|
||||
{{ else if eq $pageCount 6 }}
|
||||
<!-- 6 pages: [1] [_] \n [2] [3] \n [_] [4] \n [5] [6] -->
|
||||
{{ template "_render_page" (dict "page" (index $pages 0) "position" "left" "isBeilage" $isBeilage) }}
|
||||
{{ template "_render_page" (dict "page" (index $pages 0) "position" "left" "isBeilage" $isBeilage "targetPage" $targetPage) }}
|
||||
{{ template "_render_empty" "" }}
|
||||
{{ template "_render_page" (dict "page" (index $pages 1) "position" "left" "isBeilage" $isBeilage) }}
|
||||
{{ template "_render_page" (dict "page" (index $pages 2) "position" "right" "isBeilage" $isBeilage) }}
|
||||
{{ template "_render_page" (dict "page" (index $pages 1) "position" "left" "isBeilage" $isBeilage "targetPage" $targetPage) }}
|
||||
{{ template "_render_page" (dict "page" (index $pages 2) "position" "right" "isBeilage" $isBeilage "targetPage" $targetPage) }}
|
||||
{{ template "_render_empty" "" }}
|
||||
{{ template "_render_page" (dict "page" (index $pages 3) "position" "right" "isBeilage" $isBeilage) }}
|
||||
{{ template "_render_page" (dict "page" (index $pages 4) "position" "left" "isBeilage" $isBeilage) }}
|
||||
{{ template "_render_page" (dict "page" (index $pages 5) "position" "right" "isBeilage" $isBeilage) }}
|
||||
{{ template "_render_page" (dict "page" (index $pages 3) "position" "right" "isBeilage" $isBeilage "targetPage" $targetPage) }}
|
||||
{{ template "_render_page" (dict "page" (index $pages 4) "position" "left" "isBeilage" $isBeilage "targetPage" $targetPage) }}
|
||||
{{ template "_render_page" (dict "page" (index $pages 5) "position" "right" "isBeilage" $isBeilage "targetPage" $targetPage) }}
|
||||
{{ else if eq $pageCount 8 }}
|
||||
<!-- 8 pages: [1] [_] \n [2] [3] \n [4] [5] \n [6] [_] \n [_] [7] \n [8] [_] -->
|
||||
{{ template "_render_page" (dict "page" (index $pages 0) "position" "left" "isBeilage" $isBeilage) }}
|
||||
{{ template "_render_page" (dict "page" (index $pages 0) "position" "left" "isBeilage" $isBeilage "targetPage" $targetPage) }}
|
||||
{{ template "_render_empty" "" }}
|
||||
{{ template "_render_page" (dict "page" (index $pages 1) "position" "left" "isBeilage" $isBeilage) }}
|
||||
{{ template "_render_page" (dict "page" (index $pages 2) "position" "right" "isBeilage" $isBeilage) }}
|
||||
{{ template "_render_page" (dict "page" (index $pages 3) "position" "left" "isBeilage" $isBeilage) }}
|
||||
{{ template "_render_page" (dict "page" (index $pages 4) "position" "right" "isBeilage" $isBeilage) }}
|
||||
{{ template "_render_page" (dict "page" (index $pages 5) "position" "left" "isBeilage" $isBeilage) }}
|
||||
{{ template "_render_page" (dict "page" (index $pages 1) "position" "left" "isBeilage" $isBeilage "targetPage" $targetPage) }}
|
||||
{{ template "_render_page" (dict "page" (index $pages 2) "position" "right" "isBeilage" $isBeilage "targetPage" $targetPage) }}
|
||||
{{ template "_render_page" (dict "page" (index $pages 3) "position" "left" "isBeilage" $isBeilage "targetPage" $targetPage) }}
|
||||
{{ template "_render_page" (dict "page" (index $pages 4) "position" "right" "isBeilage" $isBeilage "targetPage" $targetPage) }}
|
||||
{{ template "_render_page" (dict "page" (index $pages 5) "position" "left" "isBeilage" $isBeilage "targetPage" $targetPage) }}
|
||||
{{ template "_render_empty" "" }}
|
||||
{{ template "_render_empty" "" }}
|
||||
{{ template "_render_page" (dict "page" (index $pages 6) "position" "right" "isBeilage" $isBeilage) }}
|
||||
{{ template "_render_page" (dict "page" (index $pages 7) "position" "left" "isBeilage" $isBeilage) }}
|
||||
{{ template "_render_page" (dict "page" (index $pages 6) "position" "right" "isBeilage" $isBeilage "targetPage" $targetPage) }}
|
||||
{{ template "_render_page" (dict "page" (index $pages 7) "position" "left" "isBeilage" $isBeilage "targetPage" $targetPage) }}
|
||||
{{ template "_render_empty" "" }}
|
||||
{{ else }}
|
||||
<!-- Fallback: side by side layout for other page counts -->
|
||||
{{ range $index, $page := $pages }}
|
||||
{{ if eq (mod $index 2) 0 }}
|
||||
{{ template "_render_page" (dict "page" $page "position" "left" "isBeilage" $isBeilage) }}
|
||||
{{ template "_render_page" (dict "page" $page "position" "left" "isBeilage" $isBeilage "targetPage" $targetPage) }}
|
||||
{{ else }}
|
||||
{{ template "_render_page" (dict "page" $page "position" "right" "isBeilage" $isBeilage) }}
|
||||
{{ template "_render_page" (dict "page" $page "position" "right" "isBeilage" $isBeilage "targetPage" $targetPage) }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
@@ -110,21 +111,18 @@
|
||||
{{ $page := .page }}
|
||||
{{ $position := .position }}
|
||||
{{ $isBeilage := .isBeilage }}
|
||||
{{ $targetPage := .targetPage }}
|
||||
{{ $isLeft := eq $position "left" }}
|
||||
{{ $borderColor := "border-slate-200" }}
|
||||
{{ $hoverColor := "hover:border-slate-300" }}
|
||||
{{ $bgColor := "bg-blue-50" }}
|
||||
{{ $idPrefix := "page" }}
|
||||
{{ $linkPrefix := "" }}
|
||||
|
||||
{{ if $isBeilage }}
|
||||
{{ $borderColor = "border-amber-200" }}
|
||||
{{ $hoverColor = "hover:border-amber-300" }}
|
||||
{{ $bgColor = "bg-amber-50" }}
|
||||
{{ $idPrefix = "beilage-1-page" }}
|
||||
{{ $linkPrefix = "#beilage-1-page-" }}
|
||||
{{ else }}
|
||||
{{ $linkPrefix = "#page-" }}
|
||||
{{ end }}
|
||||
|
||||
<div class="newspaper-page-container" id="{{ $idPrefix }}-{{ $page.PageNumber }}" data-page-container="{{ $page.PageNumber }}"{{ if $isBeilage }} data-beilage="true"{{ end }}>
|
||||
@@ -141,15 +139,17 @@
|
||||
<button onclick="enlargePage(document.querySelector('#{{ $idPrefix }}-{{ $page.PageNumber }} .newspaper-page-image'), {{ $page.PageNumber }}, false)" class="w-6 h-6 bg-purple-100 hover:bg-purple-200 text-purple-700 border border-purple-300 rounded flex items-center justify-center transition-colors duration-200 cursor-pointer" title="Seite {{ $page.PageNumber }} vergrößern">
|
||||
<i class="ri-zoom-in-line text-xs"></i>
|
||||
</button>
|
||||
<span class="page-indicator text-sm font-bold text-slate-600 {{ $bgColor }} px-2 py-1 rounded transition-all duration-300 shadow-sm flex items-center gap-1" data-page="{{ $page.PageNumber }}">
|
||||
<span class="page-indicator text-sm font-bold text-slate-600 {{ $bgColor }} px-2 py-1 rounded transition-all duration-300 shadow-sm flex items-center gap-1 relative" data-page="{{ $page.PageNumber }}">
|
||||
{{ $page.PageNumber }}
|
||||
<i class="ri-file-text-line {{ if $isBeilage }}text-amber-600{{ else }}text-black{{ end }} text-sm scale-x-[-1]"></i>
|
||||
{{ template "_page_link_indicator" (dict "pageNumber" $page.PageNumber "targetPage" $targetPage) }}
|
||||
</span>
|
||||
{{ else }}
|
||||
<!-- Right page: page number then buttons -->
|
||||
<span class="page-indicator text-sm font-bold text-slate-600 {{ $bgColor }} px-2 py-1 rounded transition-all duration-300 shadow-sm flex items-center gap-1" data-page="{{ $page.PageNumber }}">
|
||||
<span class="page-indicator text-sm font-bold text-slate-600 {{ $bgColor }} px-2 py-1 rounded transition-all duration-300 shadow-sm flex items-center gap-1 relative" data-page="{{ $page.PageNumber }}">
|
||||
<i class="ri-file-text-line {{ if $isBeilage }}text-amber-600{{ else }}text-black{{ end }} text-sm"></i>
|
||||
{{ $page.PageNumber }}
|
||||
{{ template "_page_link_indicator" (dict "pageNumber" $page.PageNumber "targetPage" $targetPage) }}
|
||||
</span>
|
||||
<button onclick="copyPagePermalink('{{ $page.PageNumber }}', this{{ if $isBeilage }}, true{{ end }})" class="w-6 h-6 bg-blue-100 hover:bg-blue-200 text-blue-700 border border-blue-300 rounded flex items-center justify-center transition-colors duration-200 cursor-pointer" title="Link zu Seite {{ $page.PageNumber }} kopieren">
|
||||
<i class="ri-share-line text-xs"></i>
|
||||
|
||||
@@ -1 +1,32 @@
|
||||
<title>KGPZ – Ausgabe {{ .model.Number.No }} / {{ .model.Year }}</title>
|
||||
|
||||
<script>
|
||||
// Make template data available to JavaScript
|
||||
window.templateData = {
|
||||
targetPage: {{ if .targetPage }}{{ .targetPage }}{{ else }}0{{ end }}
|
||||
};
|
||||
</script>
|
||||
|
||||
{{ if .targetPage }}
|
||||
<script>
|
||||
// Auto-scroll to target page when page loads
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// Wait for newspaper layout to be initialized
|
||||
setTimeout(function() {
|
||||
const targetPage = {{ .targetPage }};
|
||||
const pageContainer = document.querySelector('[data-page-container="' + targetPage + '"]');
|
||||
if (pageContainer) {
|
||||
pageContainer.scrollIntoView({
|
||||
behavior: 'smooth',
|
||||
block: 'start'
|
||||
});
|
||||
|
||||
// Highlight the page in the Inhaltsverzeichnis
|
||||
if (typeof markCurrentPageInInhaltsverzeichnis === 'function') {
|
||||
markCurrentPageInInhaltsverzeichnis(targetPage);
|
||||
}
|
||||
}
|
||||
}, 500); // Give time for layout initialization
|
||||
});
|
||||
</script>
|
||||
{{ end }}
|
||||
|
||||
@@ -14,6 +14,48 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Page Jump Form -->
|
||||
<div class="mt-8 w-full">
|
||||
<div class="mx-auto max-w-md bg-slate-50 p-6 rounded-lg border border-slate-200">
|
||||
<h3 class="text-lg font-semibold text-slate-800 mb-4 text-center">Direkt zu Seite springen</h3>
|
||||
|
||||
<form hx-post="/jump" hx-swap="outerHTML" class="space-y-4">
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<!-- Year Selection -->
|
||||
<div>
|
||||
<label for="jump-year" class="block text-sm font-medium text-slate-700 mb-1">Jahr</label>
|
||||
<select id="jump-year" name="year" value="{{ $y }}" class="w-full px-3 py-2 border border-slate-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
|
||||
{{ range $year := .model.AvailableYears }}
|
||||
<option value="{{ $year }}" {{ if eq $year $y }}selected{{ end }}>{{ $year }}</option>
|
||||
{{ end }}
|
||||
</select>
|
||||
<div id="year-error"></div>
|
||||
</div>
|
||||
|
||||
<!-- Page Input -->
|
||||
<div>
|
||||
<label for="jump-page" class="block text-sm font-medium text-slate-700 mb-1">Seite</label>
|
||||
<input type="number" id="jump-page" name="page" min="1" placeholder="z.B. 42" class="w-full px-3 py-2 border border-slate-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
|
||||
<div id="page-error"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Submit Button -->
|
||||
<div class="text-center">
|
||||
<button type="submit" class="inline-flex items-center px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-md shadow-sm transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
|
||||
<i class="ri-arrow-right-line mr-2"></i>
|
||||
Zur Seite springen
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<!-- Instructions -->
|
||||
<div class="mt-4 text-sm text-slate-600 text-center">
|
||||
<p>Geben Sie Jahr und Seitenzahl ein, um direkt zur entsprechenden Ausgabe zu springen.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-11 gap-x-2 gap-y-4 pt-8">
|
||||
{{ range $index, $month := .model.Issues }}
|
||||
|
||||
|
||||
@@ -21,7 +21,7 @@
|
||||
{{- if $issue.Beilage -}}
|
||||
#beilage-{{ $issue.Beilage }}-page-{{ $issue.Von }}
|
||||
{{- else -}}
|
||||
#page-{{ $issue.Von }}
|
||||
/{{ $issue.Von }}
|
||||
{{- end -}}
|
||||
{{- end -}}"
|
||||
class="citation-link text-slate-700 no-underline hover:text-slate-900"
|
||||
@@ -45,7 +45,28 @@ function updateCitationLinks() {
|
||||
|
||||
citationLinks.forEach(link => {
|
||||
const citationUrl = link.getAttribute('data-citation-url');
|
||||
let isCurrentPage = false;
|
||||
|
||||
// Check for exact match
|
||||
if (citationUrl === currentPath) {
|
||||
isCurrentPage = true;
|
||||
} else {
|
||||
// Check if current path is an issue with page number that matches this citation
|
||||
const currentPathMatch = currentPath.match(/^\/(\d{4})\/(\d+)(?:\/(\d+))?$/);
|
||||
const citationUrlMatch = citationUrl.match(/^\/(\d{4})\/(\d+)$/);
|
||||
|
||||
if (currentPathMatch && citationUrlMatch) {
|
||||
const [, currentYear, currentIssue, currentPage] = currentPathMatch;
|
||||
const [, citationYear, citationIssue] = citationUrlMatch;
|
||||
|
||||
// If year and issue match, this citation refers to the current issue
|
||||
if (currentYear === citationYear && currentIssue === citationIssue) {
|
||||
isCurrentPage = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (isCurrentPage) {
|
||||
// Style as current page: red text, no underline, not clickable
|
||||
link.classList.remove('text-slate-700', 'hover:text-slate-900');
|
||||
link.classList.add('text-red-700', 'pointer-events-none');
|
||||
|
||||
33
views/routes/components/_page_jump_form_error.gohtml
Normal file
33
views/routes/components/_page_jump_form_error.gohtml
Normal file
@@ -0,0 +1,33 @@
|
||||
<form hx-post="/jump" hx-swap="outerHTML" class="space-y-4">
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<!-- Year Selection -->
|
||||
<div>
|
||||
<label for="jump-year" class="block text-sm font-medium text-slate-700 mb-1">Jahr</label>
|
||||
<select id="jump-year" name="year" class="w-full px-3 py-2 border {{ if .YearError }}border-red-300{{ else }}border-slate-300{{ end }} rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
|
||||
{{ range $year := .AvailableYears }}
|
||||
<option value="{{ $year }}" {{ if eq $year $.CurrentYear }}selected{{ end }}>{{ $year }}</option>
|
||||
{{ end }}
|
||||
</select>
|
||||
{{ if .YearError }}
|
||||
<div class="text-red-600 text-sm mt-1">{{ .YearError }}</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
|
||||
<!-- Page Input -->
|
||||
<div>
|
||||
<label for="jump-page" class="block text-sm font-medium text-slate-700 mb-1">Seite</label>
|
||||
<input type="number" id="jump-page" name="page" min="1" placeholder="z.B. 42" value="{{ .PageValue }}" class="w-full px-3 py-2 border {{ if .PageError }}border-red-300{{ else }}border-slate-300{{ end }} rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
|
||||
{{ if .PageError }}
|
||||
<div class="text-red-600 text-sm mt-1">{{ .PageError }}</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Submit Button -->
|
||||
<div class="text-center">
|
||||
<button type="submit" class="inline-flex items-center px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-md shadow-sm transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
|
||||
<i class="ri-arrow-right-line mr-2"></i>
|
||||
Zur Seite springen
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
17
views/routes/components/_page_link_indicator.gohtml
Normal file
17
views/routes/components/_page_link_indicator.gohtml
Normal file
@@ -0,0 +1,17 @@
|
||||
{{- /*
|
||||
Red dot indicator for directly linked pages
|
||||
Usage: {{ template "_page_link_indicator" (dict "pageNumber" $page "targetPage" $targetPage) }}
|
||||
|
||||
Parameters:
|
||||
- pageNumber (int): The page number being displayed
|
||||
- targetPage (int): The target page from URL (0 if none)
|
||||
|
||||
Shows a red dot with tooltip when pageNumber matches targetPage
|
||||
*/ -}}
|
||||
|
||||
{{ $pageNumber := .pageNumber }}
|
||||
{{ $targetPage := .targetPage }}
|
||||
|
||||
{{ if and $targetPage (eq $pageNumber $targetPage) }}
|
||||
<span class="absolute -top-1 -right-1 w-3 h-3 bg-red-500 rounded-full z-10" title="verlinkte Seite"></span>
|
||||
{{ end }}
|
||||
31
views/routes/piece/body.gohtml
Normal file
31
views/routes/piece/body.gohtml
Normal file
@@ -0,0 +1,31 @@
|
||||
{{ $model := .model }}
|
||||
|
||||
{{ if $model.Images.HasImages }}
|
||||
<!-- Container with proper padding -->
|
||||
<div class="">
|
||||
<!-- Two-column layout for piece view -->
|
||||
<div class="flex flex-col lg:flex-row gap-6 w-full min-h-screen">
|
||||
<!-- Column 1: Table of Contents ONLY -->
|
||||
<div class="lg:w-1/3 xl:w-1/4 flex-shrink-0 bg-slate-50 px-8 py-4">
|
||||
<div class="lg:sticky lg:top-8 lg:overflow-y-auto">
|
||||
{{ template "_piece_inhaltsverzeichnis" . }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Column 2: Sequential Page Layout -->
|
||||
<div class="lg:w-2/3 xl:w-3/4 flex-1 py-4">
|
||||
{{ template "_piece_sequential_layout" . }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{ else }}
|
||||
<!-- No images fallback -->
|
||||
<div class="container mx-auto px-4 py-8">
|
||||
<div class="bg-yellow-50 border border-yellow-200 rounded-lg p-6">
|
||||
<h2 class="text-xl font-semibold text-yellow-800 mb-2">Keine Bilder verfügbar</h2>
|
||||
<p class="text-yellow-700">
|
||||
Für diesen Beitrag sind derzeit keine Seitenbilder verfügbar.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
@@ -0,0 +1,61 @@
|
||||
{{ $model := .model }}
|
||||
|
||||
<div class="w-full hyphens-auto">
|
||||
<div class="space-y-4">
|
||||
<!-- Header with icon and type (small) -->
|
||||
<div class="flex items-center gap-2 mb-2">
|
||||
<i class="ri-file-text-line text-slate-600"></i>
|
||||
<h3 class="text-sm font-medium text-slate-600">Einzelbeitrag</h3>
|
||||
</div>
|
||||
|
||||
<!-- Main piece entry -->
|
||||
<div class="mb-6">
|
||||
<!-- Get the first page to generate the actual content description -->
|
||||
{{ if $model.ContinuousPages.Pages }}
|
||||
{{ $firstPageNum := index $model.ContinuousPages.Pages 0 }}
|
||||
{{ $firstPageEntries := index $model.ContinuousPages.Items $firstPageNum }}
|
||||
{{ if $firstPageEntries }}
|
||||
{{ $firstPiece := index $firstPageEntries 0 }}
|
||||
<!-- Actual piece content description (larger) -->
|
||||
<div class="mb-3">
|
||||
<div class="text-base font-semibold text-slate-800 leading-snug">
|
||||
{{ template "_inhaltsverzeichnis_eintrag" $firstPiece.PieceByIssue }}
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
|
||||
<!-- Summary with boxed numbers -->
|
||||
<div class="mb-4">
|
||||
<p class="text-sm text-slate-600">
|
||||
<span class="inline-flex items-center gap-1">
|
||||
<span class="bg-slate-800 text-white px-1.5 py-0.5 rounded text-xs font-bold">{{ $model.TotalPageCount }}</span>
|
||||
Seiten in
|
||||
<span class="bg-slate-800 text-white px-1.5 py-0.5 rounded text-xs font-bold">{{ len $model.IssueContexts }}</span>
|
||||
Ausgaben gefunden:
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Issue and page links with highlighting data attributes -->
|
||||
<div class="space-y-1">
|
||||
{{ range $pageEntry := $model.AllPages }}
|
||||
<!-- Find the issue ref for this page to get date -->
|
||||
{{ range $issueRef := $model.AllIssueRefs }}
|
||||
{{ if and (eq $issueRef.When.Year $pageEntry.IssueYear) (eq $issueRef.Nr $pageEntry.IssueNumber) (le $issueRef.Von $pageEntry.PageNumber) (ge $issueRef.Bis $pageEntry.PageNumber) }}
|
||||
<div class="inhalts-entry issue-link-entry pl-4 border-l-4 border-slate-300 hover:bg-slate-100">
|
||||
<a href="/{{ $pageEntry.IssueYear }}/{{ $pageEntry.IssueNumber }}/{{ $pageEntry.PageNumber }}"
|
||||
class="page-number-inhalts text-slate-700 hover:text-red-700 text-sm hover:underline transition-colors duration-200 bg-blue-50 hover:bg-blue-100 relative"
|
||||
data-page-number="{{ $pageEntry.PageNumber }}">
|
||||
{{ if $issueRef.When.Day }}{{ $issueRef.When.Day }}.{{ end }}{{ if $issueRef.When.Month }}{{ $issueRef.When.Month }}.{{ end }}{{ $issueRef.When.Year }} [Nr. {{ $pageEntry.IssueNumber }}], {{ $pageEntry.PageNumber }}
|
||||
{{ template "_page_link_indicator" (dict "pageNumber" $pageEntry.PageNumber "targetPage" $.targetPage) }}
|
||||
</a>
|
||||
</div>
|
||||
{{ break }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,85 @@
|
||||
{{ $model := .model }}
|
||||
|
||||
<!-- Sequential page layout for piece view -->
|
||||
|
||||
<div class="space-y-8 h-full relative" id="piece-content">
|
||||
{{ if $model.Images.AllPages }}
|
||||
<!-- Two-column newspaper layout -->
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
{{ range $pageIndex, $page := $model.Images.AllPages }}
|
||||
{{ $pageEntry := index $model.AllPages $pageIndex }}
|
||||
{{ $issueContext := printf "%d Nr. %d" $pageEntry.IssueYear $pageEntry.IssueNumber }}
|
||||
|
||||
<!-- Page container -->
|
||||
<div class="piece-page-container newspaper-page-container" id="piece-page-{{ $page.PageNumber }}" data-page-container="{{ $page.PageNumber }}">
|
||||
<!-- Page indicator row -->
|
||||
<div class="flex justify-start items-center gap-2 mb-3">
|
||||
<span class="page-indicator text-sm font-bold text-slate-600 bg-blue-50 px-2 py-1 rounded transition-all duration-300 flex items-center gap-1 relative" data-page="{{ $page.PageNumber }}">
|
||||
{{ PageIcon "single" }}
|
||||
{{ $issueContext }}, {{ $page.PageNumber }}
|
||||
{{ template "_page_link_indicator" (dict "pageNumber" $page.PageNumber "targetPage" $.targetPage) }}
|
||||
</span>
|
||||
|
||||
<!-- Action buttons -->
|
||||
<button onclick="copyPagePermalink('{{ $page.PageNumber }}', this)"
|
||||
class="w-6 h-6 bg-blue-100 hover:bg-blue-200 text-blue-700 border border-blue-300 rounded flex items-center justify-center transition-colors duration-200 cursor-pointer"
|
||||
title="Link zu Seite {{ $page.PageNumber }} kopieren">
|
||||
<i class="ri-share-line text-xs"></i>
|
||||
</button>
|
||||
|
||||
<button onclick="generatePageCitation('{{ $page.PageNumber }}', this)"
|
||||
class="w-6 h-6 bg-green-100 hover:bg-green-200 text-green-700 border border-green-300 rounded flex items-center justify-center transition-colors duration-200 cursor-pointer"
|
||||
title="Zitation für Seite {{ $page.PageNumber }} generieren">
|
||||
<i class="ri-file-text-line text-xs"></i>
|
||||
</button>
|
||||
|
||||
<button onclick="enlargePage(document.querySelector('#piece-page-{{ $page.PageNumber }} .piece-page-image'), {{ $page.PageNumber }}, false)"
|
||||
class="w-6 h-6 bg-purple-100 hover:bg-purple-200 text-purple-700 border border-purple-300 rounded flex items-center justify-center transition-colors duration-200 cursor-pointer"
|
||||
title="Seite {{ $page.PageNumber }} vergrößern">
|
||||
<i class="ri-zoom-in-line text-xs"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Page image -->
|
||||
<div class="single-page bg-white p-4 rounded border border-slate-200 hover:border-slate-300 transition-colors duration-200">
|
||||
{{ if $page.Available }}
|
||||
<img src="{{ $page.ImagePath }}"
|
||||
alt="Seite {{ $page.PageNumber }} ({{ $issueContext }})"
|
||||
class="piece-page-image newspaper-page-image cursor-zoom-in rounded-sm hover:scale-[1.02] transition-transform duration-200 w-full"
|
||||
onclick="enlargePage(this, {{ $page.PageNumber }}, false)"
|
||||
data-page="{{ $page.PageNumber }}"
|
||||
loading="lazy" />
|
||||
{{ else }}
|
||||
<div class="bg-slate-100 border border-slate-200 rounded p-8 text-center">
|
||||
<i class="ri-image-line text-4xl text-slate-400 mb-2 block"></i>
|
||||
<p class="text-slate-500">Bild nicht verfügbar</p>
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
{{ else }}
|
||||
<!-- No pages available -->
|
||||
<div class="text-center text-slate-500 py-16">
|
||||
<i class="ri-file-list-line text-6xl mb-4 block"></i>
|
||||
<h3 class="text-xl font-semibold mb-2">Keine Seiten verfügbar</h3>
|
||||
<p>Für diesen Beitrag sind derzeit keine Seitenbilder verfügbar.</p>
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
|
||||
<!-- Modal for enlarged view - reuse existing modal -->
|
||||
<div
|
||||
id="pageModal"
|
||||
class="absolute inset-0 bg-black bg-opacity-75 hidden z-50 flex items-center justify-center backdrop-blur-sm"
|
||||
onclick="closeModal()">
|
||||
<div class="relative max-w-full max-h-full p-4">
|
||||
<img id="modalImage" src="" alt="" class="max-w-full max-h-full object-contain rounded-lg" />
|
||||
<button
|
||||
onclick="closeModal()"
|
||||
class="absolute top-2 right-2 text-white bg-slate-800 bg-opacity-80 rounded-full w-10 h-10 flex items-center justify-center hover:bg-opacity-100 transition-all duration-200">
|
||||
<i class="ri-close-line text-xl"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
32
views/routes/piece/head.gohtml
Normal file
32
views/routes/piece/head.gohtml
Normal file
@@ -0,0 +1,32 @@
|
||||
<title>KGPZ – {{ if .model.Title }}{{ .model.Title }}{{ else }}Beitrag{{ end }} ({{ len .model.IssueContexts }} Teil{{ if gt (len .model.IssueContexts) 1 }}e{{ end }})</title>
|
||||
|
||||
<script>
|
||||
// Make template data available to JavaScript
|
||||
window.templateData = {
|
||||
targetPage: {{ if .targetPage }}{{ .targetPage }}{{ else }}0{{ end }}
|
||||
};
|
||||
</script>
|
||||
|
||||
{{ if .targetPage }}
|
||||
<script>
|
||||
// Auto-scroll to target page when page loads
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// Wait for newspaper layout to be initialized
|
||||
setTimeout(function() {
|
||||
const targetPage = {{ .targetPage }};
|
||||
const pageContainer = document.querySelector('[data-page-container="' + targetPage + '"]');
|
||||
if (pageContainer) {
|
||||
pageContainer.scrollIntoView({
|
||||
behavior: 'smooth',
|
||||
block: 'start'
|
||||
});
|
||||
|
||||
// Highlight the page in the Inhaltsverzeichnis if function exists
|
||||
if (typeof markCurrentPageInInhaltsverzeichnis === 'function') {
|
||||
markCurrentPageInInhaltsverzeichnis(targetPage);
|
||||
}
|
||||
}
|
||||
}, 500); // Give time for layout initialization
|
||||
});
|
||||
</script>
|
||||
{{ end }}
|
||||
@@ -379,8 +379,11 @@ function enlargePage(imgElement, pageNumber, isFromSpread) {
|
||||
// Determine if this is a beilage page
|
||||
const isBeilage = imgElement.closest('[data-beilage="true"]') !== null;
|
||||
|
||||
// Get target page from template data if available
|
||||
const targetPage = window.templateData && window.templateData.targetPage ? window.templateData.targetPage : 0;
|
||||
|
||||
// Show the page in the viewer
|
||||
viewer.show(imgElement.src, imgElement.alt, pageNumber, isBeilage);
|
||||
viewer.show(imgElement.src, imgElement.alt, pageNumber, isBeilage, targetPage);
|
||||
}
|
||||
|
||||
function closeModal() {
|
||||
@@ -659,7 +662,7 @@ function shareCurrentPage() {
|
||||
const pageElement = activeContainer.querySelector("[data-page]");
|
||||
if (pageElement) {
|
||||
const pageNumber = pageElement.getAttribute("data-page");
|
||||
pageInfo = `#page-${pageNumber}`;
|
||||
pageInfo = `/${pageNumber}`;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -715,11 +718,18 @@ function generateCitation() {
|
||||
|
||||
// Get current page and issue information
|
||||
const issueInfo = document.title || "KGPZ";
|
||||
const currentUrl = window.location.href;
|
||||
|
||||
// Use clean URL without hash fragments
|
||||
let cleanUrl = window.location.origin + window.location.pathname;
|
||||
|
||||
// Remove any hash fragments that might still exist
|
||||
if (cleanUrl.includes('#')) {
|
||||
cleanUrl = cleanUrl.split('#')[0];
|
||||
}
|
||||
|
||||
// Basic citation format (can be expanded later)
|
||||
const currentDate = new Date().toLocaleDateString("de-DE");
|
||||
const citation = `Königsberger Gelehrte und Politische Zeitung (KGPZ). ${issueInfo}. Digital verfügbar unter: ${currentUrl} (Zugriff: ${currentDate}).`;
|
||||
const citation = `Königsberger Gelehrte und Politische Zeitung (KGPZ). ${issueInfo}. Digital verfügbar unter: ${cleanUrl} (Zugriff: ${currentDate}).`;
|
||||
|
||||
// Copy to clipboard
|
||||
if (navigator.clipboard) {
|
||||
@@ -821,14 +831,15 @@ function showSimplePopup(button, message) {
|
||||
}, 2000);
|
||||
}
|
||||
|
||||
// Hash navigation functions
|
||||
function scrollToPageFromHash() {
|
||||
const hash = window.location.hash;
|
||||
// URL navigation functions
|
||||
function scrollToPageFromURL() {
|
||||
let pageNumber = "";
|
||||
let targetContainer = null;
|
||||
|
||||
if (hash.startsWith("#page-")) {
|
||||
pageNumber = hash.replace("#page-", "");
|
||||
// Check if URL ends with a page number (e.g., /1768/42/166)
|
||||
const pathParts = window.location.pathname.split('/');
|
||||
if (pathParts.length >= 4 && !isNaN(pathParts[pathParts.length - 1])) {
|
||||
pageNumber = pathParts[pathParts.length - 1];
|
||||
|
||||
// Try to find exact page container first
|
||||
targetContainer = document.getElementById(`page-${pageNumber}`);
|
||||
@@ -853,14 +864,6 @@ function scrollToPageFromHash() {
|
||||
document.getElementById(`beilage-2-page-${pageNumber}`) ||
|
||||
document.querySelector(`[id*="beilage"][id*="page-${pageNumber}"]`);
|
||||
}
|
||||
} else if (hash.startsWith("#beilage-")) {
|
||||
// Handle beilage-specific hashes like #beilage-1-page-101
|
||||
const match = hash.match(/#beilage-(\d+)-page-(\d+)/);
|
||||
if (match) {
|
||||
const beilageNum = match[1];
|
||||
pageNumber = match[2];
|
||||
targetContainer = document.getElementById(`beilage-${beilageNum}-page-${pageNumber}`);
|
||||
}
|
||||
}
|
||||
|
||||
if (targetContainer && pageNumber) {
|
||||
@@ -878,14 +881,26 @@ function scrollToPageFromHash() {
|
||||
|
||||
// Page-specific utilities
|
||||
function copyPagePermalink(pageNumber, button, isBeilage = false) {
|
||||
let pageFragment = "";
|
||||
let pageUrl = "";
|
||||
if (isBeilage) {
|
||||
pageFragment = `#beilage-1-page-${pageNumber}`;
|
||||
// For beilage pages, still use hash for now until beilage URLs are updated
|
||||
pageUrl = window.location.origin + window.location.pathname + `#beilage-1-page-${pageNumber}`;
|
||||
} else {
|
||||
pageFragment = `#page-${pageNumber}`;
|
||||
// For regular pages, use the new URL format
|
||||
const pathParts = window.location.pathname.split('/');
|
||||
if (pathParts.length >= 3) {
|
||||
// Current URL format: /year/issue or /year/issue/page
|
||||
// New format: /year/issue/page
|
||||
const year = pathParts[1];
|
||||
const issue = pathParts[2];
|
||||
pageUrl = `${window.location.origin}/${year}/${issue}/${pageNumber}`;
|
||||
} else {
|
||||
// Fallback to current URL with page appended
|
||||
pageUrl = window.location.origin + window.location.pathname + `/${pageNumber}`;
|
||||
}
|
||||
}
|
||||
|
||||
const currentUrl = window.location.origin + window.location.pathname + pageFragment;
|
||||
const currentUrl = pageUrl;
|
||||
|
||||
// Copy to clipboard
|
||||
if (navigator.clipboard) {
|
||||
@@ -917,7 +932,19 @@ function copyPagePermalink(pageNumber, button, isBeilage = false) {
|
||||
function generatePageCitation(pageNumber, button) {
|
||||
// Get current issue information
|
||||
const issueInfo = document.title || "KGPZ";
|
||||
const currentUrl = `${window.location.origin}${window.location.pathname}#page-${pageNumber}`;
|
||||
|
||||
// Generate page URL in new format
|
||||
const pathParts = window.location.pathname.split('/');
|
||||
let pageUrl;
|
||||
if (pathParts.length >= 3) {
|
||||
const year = pathParts[1];
|
||||
const issue = pathParts[2];
|
||||
pageUrl = `${window.location.origin}/${year}/${issue}/${pageNumber}`;
|
||||
} else {
|
||||
pageUrl = `${window.location.origin}${window.location.pathname}/${pageNumber}`;
|
||||
}
|
||||
|
||||
const currentUrl = pageUrl;
|
||||
|
||||
// Basic citation format for specific page
|
||||
const currentDate = new Date().toLocaleDateString("de-DE");
|
||||
@@ -967,9 +994,8 @@ function initializeNewspaperLayout() {
|
||||
}, 50);
|
||||
});
|
||||
|
||||
// Initialize hash handling
|
||||
scrollToPageFromHash();
|
||||
window.addEventListener("hashchange", scrollToPageFromHash);
|
||||
// Initialize URL-based page navigation
|
||||
scrollToPageFromURL();
|
||||
|
||||
// Set up keyboard shortcuts
|
||||
document.addEventListener("keydown", function (e) {
|
||||
@@ -1065,7 +1091,7 @@ class SinglePageViewer extends HTMLElement {
|
||||
<!-- Page indicator with icon -->
|
||||
<div id="page-indicator" class="text-slate-800 flex items-center gap-3">
|
||||
<span id="page-icon" class="text-lg"></span>
|
||||
<span id="page-number" class="text-2xl font-serif font-bold"></span>
|
||||
<span id="page-number" class="text-lg font-bold bg-blue-50 px-2 py-1 rounded flex items-center gap-1"></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1137,7 +1163,7 @@ class SinglePageViewer extends HTMLElement {
|
||||
`;
|
||||
}
|
||||
|
||||
show(imgSrc, imgAlt, pageNumber, isBeilage = false) {
|
||||
show(imgSrc, imgAlt, pageNumber, isBeilage = false, targetPage = 0) {
|
||||
const img = this.querySelector('#single-page-image');
|
||||
const pageNumberSpan = this.querySelector('#page-number');
|
||||
const pageIconSpan = this.querySelector('#page-icon');
|
||||
@@ -1150,8 +1176,26 @@ class SinglePageViewer extends HTMLElement {
|
||||
this.currentPageNumber = pageNumber;
|
||||
this.currentIsBeilage = isBeilage;
|
||||
|
||||
// Set page number
|
||||
pageNumberSpan.textContent = pageNumber;
|
||||
// Get issue context from document title or URL
|
||||
const issueContext = this.getIssueContext(pageNumber);
|
||||
|
||||
// Set page number with issue context in the box
|
||||
pageNumberSpan.innerHTML = issueContext ? `${issueContext}, ${pageNumber}` : `${pageNumber}`;
|
||||
|
||||
// Add red dot if this is the target page
|
||||
if (targetPage && pageNumber === targetPage) {
|
||||
pageNumberSpan.style.position = 'relative';
|
||||
// Remove any existing red dot
|
||||
const existingDot = pageNumberSpan.querySelector('.target-page-dot');
|
||||
if (existingDot) {
|
||||
existingDot.remove();
|
||||
}
|
||||
// Add new red dot
|
||||
const redDot = document.createElement('span');
|
||||
redDot.className = 'target-page-dot absolute -top-1 -right-1 w-3 h-3 bg-red-500 rounded-full z-10';
|
||||
redDot.title = 'verlinkte Seite';
|
||||
pageNumberSpan.appendChild(redDot);
|
||||
}
|
||||
|
||||
// Set page icon based on position and type
|
||||
const iconType = this.determinePageIconType(pageNumber, isBeilage);
|
||||
@@ -1415,6 +1459,60 @@ class SinglePageViewer extends HTMLElement {
|
||||
|
||||
console.log('New classes:', sidebarSpacer.className);
|
||||
}
|
||||
|
||||
// Extract issue context from document title, URL, or page container
|
||||
getIssueContext(pageNumber) {
|
||||
// Determine if we're in a piece view (beitrag) or issue view (ausgabe)
|
||||
const path = window.location.pathname;
|
||||
const isPieceView = path.includes('/beitrag/');
|
||||
|
||||
if (isPieceView) {
|
||||
// For piece view: Return full format "1765 Nr. 2"
|
||||
// Try to get context from page container first (for piece view)
|
||||
const pageContainer = document.querySelector(`[data-page-container="${pageNumber}"]`);
|
||||
if (pageContainer) {
|
||||
// Look for existing page indicator with context
|
||||
const pageIndicator = pageContainer.querySelector('.page-indicator');
|
||||
if (pageIndicator) {
|
||||
const text = pageIndicator.textContent.trim();
|
||||
// Extract year and issue from text like "1768 Nr. 20, 79"
|
||||
const match = text.match(/(\d{4})\s+Nr\.\s+(\d+)/);
|
||||
if (match) {
|
||||
return `${match[1]} Nr. ${match[2]}`;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Fallback: Try to extract from document title
|
||||
const title = document.title;
|
||||
const titleMatch = title.match(/(\d{4}).*Nr\.\s*(\d+)/);
|
||||
if (titleMatch) {
|
||||
return `${titleMatch[1]} Nr. ${titleMatch[2]}`;
|
||||
}
|
||||
} else {
|
||||
// For issue view: Return just empty string (page number only)
|
||||
return '';
|
||||
}
|
||||
|
||||
// Final fallback: Try to extract from URL path
|
||||
const urlMatch = path.match(/\/(\d{4})\/(\d+)/);
|
||||
if (urlMatch) {
|
||||
return isPieceView ? `${urlMatch[1]} Nr. ${urlMatch[2]}` : '';
|
||||
}
|
||||
|
||||
// Fallback - try to get from any visible page context
|
||||
const anyPageIndicator = document.querySelector('.page-indicator');
|
||||
if (anyPageIndicator) {
|
||||
const text = anyPageIndicator.textContent.trim();
|
||||
const match = text.match(/(\d{4})\s+Nr\.\s+(\d+)/);
|
||||
if (match) {
|
||||
return `${match[1]} Nr. ${match[2]}`;
|
||||
}
|
||||
}
|
||||
|
||||
// Ultimate fallback
|
||||
return "KGPZ";
|
||||
}
|
||||
}
|
||||
|
||||
// Register the web component
|
||||
|
||||
Reference in New Issue
Block a user