Tesserae - Pages Stack

Pages Stack

Description

A fanning stack of page thumbnails

PagesStack draws a few overlapping, slightly rotated pages that fan out when the pointer is over them, with a "+N" badge covering whatever the stack doesn't show. It is the preview rail of a search result (see OmniResult).

The stack sizes itself to the width it needs when fanned and pins the pages to the right edge of that reserved rail, so opening the fan never widens the row it lives in, and the lifted pages draw on top of whatever is beside them instead of pushing it around.

Pages are either image thumbnails (PagesStack(params string[] imageUrls)) or blank ruled placeholders (PagesStack(int pages)), for a document whose thumbnails haven't been generated, or aren't worth generating, yet. TotalPages sets how many pages the document actually has when the stack was given fewer thumbnails than that: the rest are counted by the badge. MaxVisible caps how many are drawn, and OnPageClick opens the document at the page that was clicked.

Samples

Blank pages with a total count

pages-stack-blank-sample.cs

using Transpose.Core;
using Tesserae;
using static Transpose.Core.dom;
using static Tesserae.UI;

namespace Tesserae.Tests
{
    internal static class App
    {
        private static void Main()
        {
            var component = PagesStack(4).TotalPages(18);

            document.body.style.overflow = "hidden";
            MountCenteredToBody(component.Padding(24.px()));
        }
    }
}

Beside a result row

pages-stack-result-sample.cs

using Transpose.Core;
using Tesserae;
using static Transpose.Core.dom;
using static Tesserae.UI;

namespace Tesserae.Tests
{
    internal static class App
    {
        private static void Main()
        {
            var component = OmniResult("uid-1", "Annual report 2024.pdf")
               .SetIcon(UIcons.FilePdf, Theme.Colors.Red500)
               .SetText("Consolidated results, segment reporting and the auditor's opinion.")
               .SetFooterEntries("Drive", "8.1 MB", "Apr 11, 2024")
               .SetPages(PagesStack(3).TotalPages(42));

            document.body.style.overflow = "hidden";
            MountCenteredToBody(component.WS().Padding(16.px()));
        }
    }
}

API reference

class

PagesStack

public sealed class PagesStack : ComponentBase<PagesStack, HTMLElement>

A macOS-Downloads-style stack of page thumbnails: a few overlapping, slightly rotated pages that fan out when the pointer is over them, with a "+N" badge covering whatever the stack doesn't show. It is meant as the preview rail of a search result (see OmniResult{T}), so it sizes itself to the width it needs when fanned and pins the stack to the right edge of that reserved rail: opening the fan never widens the row it lives in, and the lifted pages draw on top of whatever is beside them instead of pushing it around. Pages are either image thumbnails (PagesStack) or blank ruled placeholders (PagesStack), for a document whose thumbnails haven't been generated - or aren't worth generating - yet.

Namespace: Tesserae
Inheritance: ComponentBase<PagesStack, HTMLElement> → PagesStack

Constructors

Name	Description
PagesStack	Initializes a new instance of this class showing the given thumbnails, at most `MaxVisible` of them, each scaled to the same page size.

Constructor

PagesStack

Overload
PagesStack(string[])	Initializes a new instance of this class showing the given thumbnails, at most `MaxVisible` of them, each scaled to the same page size.
PagesStack(int)	Initializes a new instance of this class showing the given number of blank ruled pages, for a document with no thumbnails to show. Pass `TotalPages` as well when the document has more pages than the stack should draw.

PagesStack(string[])

public PagesStack(params string[] imageUrls) : this()

Initializes a new instance of this class showing the given thumbnails, at most MaxVisible of them, each scaled to the same page size.

Parameters

imageUrls string[]

PagesStack(int)

public PagesStack(int pages) : this()

Initializes a new instance of this class showing the given number of blank ruled pages, for a document with no thumbnails to show. Pass TotalPages as well when the document has more pages than the stack should draw.

Parameters

pages int

Properties

Name	Description
TotalPageCount	Gets the number of pages the document has, which is what the "+N" badge counts from - the same as the number of thumbnails unless `TotalPages` said otherwise.
VisiblePageCount	Gets the number of pages actually drawn in the stack. A stack given thumbnails draws only those (the pages past them are counted by the badge rather than faked as blank ones).
IsFanned	Returns a value indicating whether the stack is held open, i.e. fanned without the pointer being over it.

Property

PagesStack.TotalPageCount

public int TotalPageCount

Gets the number of pages the document has, which is what the "+N" badge counts from - the same as the number of thumbnails unless TotalPages said otherwise.

Property

PagesStack.VisiblePageCount

public int VisiblePageCount

Gets the number of pages actually drawn in the stack. A stack given thumbnails draws only those (the pages past them are counted by the badge rather than faked as blank ones).

Property

PagesStack.IsFanned

public bool IsFanned

Returns a value indicating whether the stack is held open, i.e. fanned without the pointer being over it.

Methods

Name	Description
Render	Renders the component's root HTML element.
SetPages	Replaces the pages with the given thumbnails. The page count - and so the "+N" badge - follows the number of urls unless `TotalPages` is called afterwards.
TotalPages	Sets how many pages the document has in total, for a stack given fewer thumbnails than that: the pages past the ones drawn are counted by the "+N" badge over the top-right of the stack.
MaxVisible	Sets how many pages are drawn before the rest collapse into the "+N" badge. Five by default - enough for the stack to read as a stack, few enough that the fan stays narrow.
PageSize	Sets the size every page is drawn at. All pages share one size, whatever their thumbnails' aspect ratios are (a thumbnail is cropped to fill), so the stack reads as one document.
Fanned	Holds the stack open (or lets it close again), for a host that wants the fan to follow hovering something larger than the stack itself - the result row it sits in, say, which is what `OmniResult{T}` does by default.
OnPageClick	Makes each drawn page clickable, handing the handler the page's index (0-based) - so opening a document at the page the user pointed at is one call. The click is the page's alone: it does not also count as a click on the row the stack sits in. Each page takes a tab stop of its own and answers Enter and Space. Pass null to make the pages plain again.

Method

PagesStack.Render

public override HTMLElement Render()

Renders the component's root HTML element.

Method

PagesStack.SetPages

Overload
SetPages(string[])	Replaces the pages with the given thumbnails. The page count - and so the "+N" badge - follows the number of urls unless `TotalPages` is called afterwards.
SetPages(int)	Replaces the pages with the given number of blank ruled pages.

SetPages(string[])

public PagesStack SetPages(params string[] imageUrls)

Replaces the pages with the given thumbnails. The page count - and so the "+N" badge - follows the number of urls unless TotalPages is called afterwards.

Parameters

imageUrls string[]

SetPages(int)

public PagesStack SetPages(int pages)

Replaces the pages with the given number of blank ruled pages.

Parameters

pages int

Method

PagesStack.TotalPages

public PagesStack TotalPages(int pages)

Sets how many pages the document has in total, for a stack given fewer thumbnails than that: the pages past the ones drawn are counted by the "+N" badge over the top-right of the stack.

Method

PagesStack.MaxVisible

public PagesStack MaxVisible(int count)

Sets how many pages are drawn before the rest collapse into the "+N" badge. Five by default - enough for the stack to read as a stack, few enough that the fan stays narrow.

Method

PagesStack.PageSize

public PagesStack PageSize(int width, int height)

Sets the size every page is drawn at. All pages share one size, whatever their thumbnails' aspect ratios are (a thumbnail is cropped to fill), so the stack reads as one document.

Method

PagesStack.Fanned

public PagesStack Fanned(bool value = true)

Holds the stack open (or lets it close again), for a host that wants the fan to follow hovering something larger than the stack itself - the result row it sits in, say, which is what OmniResult{T} does by default.

Method

PagesStack.OnPageClick

public PagesStack OnPageClick(Action<int> onPageClick)

Makes each drawn page clickable, handing the handler the page's index (0-based) - so opening a document at the page the user pointed at is one call. The click is the page's alone: it does not also count as a click on the row the stack sits in. Each page takes a tab stop of its own and answers Enter and Space. Pass null to make the pages plain again.

Pages Stack

Description

Samples

Blank pages with a total count

Beside a result row

API reference

Constructors

PagesStack

PagesStack(string[])

Parameters

PagesStack(int)

Parameters

Properties

PagesStack.TotalPageCount

PagesStack.VisiblePageCount

PagesStack.IsFanned

Methods

PagesStack.Render

PagesStack.SetPages

SetPages(string[])

Parameters

SetPages(int)

Parameters

PagesStack.TotalPages

PagesStack.MaxVisible

PagesStack.PageSize

PagesStack.Fanned

PagesStack.OnPageClick

See also