diff --git a/modules/docs/contribute.php b/modules/docs/contribute.php index a45a6b8..355e265 100644 --- a/modules/docs/contribute.php +++ b/modules/docs/contribute.php @@ -1,11 +1,12 @@ -
+ +
-

Contribute 💕

-

Have you found a problem om this page? Would you like to help make Vegvisir better?

+

Contribute? 💕

+

Have you found a problem om this page? Would you like to help make this little project a bit better?
\ No newline at end of file diff --git a/modules/docs/contribute/style.css b/modules/docs/contribute/style.css new file mode 100644 index 0000000..3cde112 --- /dev/null +++ b/modules/docs/contribute/style.css @@ -0,0 +1,15 @@ +section.contribute { + background-color: rgba(var(--primer-color-deep), .1); +} + +section.contribute container { + flex-direction: column; +} + +section.contribute ul { + display: flex; + padding-left: 0; + padding: var(--padding); + list-style: none; + gap: var(--padding); +} \ No newline at end of file diff --git a/modules/docs/legend-js.php b/modules/docs/legend-js.php index b142909..88e935f 100644 --- a/modules/docs/legend-js.php +++ b/modules/docs/legend-js.php @@ -1,5 +1,5 @@ \ No newline at end of file diff --git a/modules/snippet/snippets/docs/API/JS/Navigation/EVENTS/description-additional.js b/modules/snippet/snippets/docs/API/JS/Navigation/EVENTS/description-additional.js new file mode 100644 index 0000000..106a2c7 --- /dev/null +++ b/modules/snippet/snippets/docs/API/JS/Navigation/EVENTS/description-additional.js @@ -0,0 +1,3 @@ +{ + target: HTMLElement +} \ No newline at end of file diff --git a/modules/snippet/snippets/docs/API/JS/Navigation/EVENTS/description.js b/modules/snippet/snippets/docs/API/JS/Navigation/EVENTS/description.js new file mode 100644 index 0000000..b3ebdcd --- /dev/null +++ b/modules/snippet/snippets/docs/API/JS/Navigation/EVENTS/description.js @@ -0,0 +1,4 @@ +static Navigation.EVENTS = { + STARTED: "navstarted", + FINISHED: "navfinished" +} \ No newline at end of file diff --git a/modules/snippet/snippets/docs/API/JS/Navigation/EVENTS/example-0-0.js b/modules/snippet/snippets/docs/API/JS/Navigation/EVENTS/example-0-0.js new file mode 100644 index 0000000..e58f8c6 --- /dev/null +++ b/modules/snippet/snippets/docs/API/JS/Navigation/EVENTS/example-0-0.js @@ -0,0 +1,3 @@ +document.addEventListener(vegvisir.Navigation.EVENTS.STARTED, (event) => { + console.log(event.detail.target); +}); \ No newline at end of file diff --git a/modules/snippet/snippets/docs/API/JS/Navigation/MODE/description.js b/modules/snippet/snippets/docs/API/JS/Navigation/MODE/description.js new file mode 100644 index 0000000..06714d6 --- /dev/null +++ b/modules/snippet/snippets/docs/API/JS/Navigation/MODE/description.js @@ -0,0 +1,4 @@ +static Navigation.MODE = { + REPLACE: "replace", + INSERT: "insert" +} \ No newline at end of file diff --git a/modules/snippet/snippets/docs/API/JS/Navigation/POSITION/description.js b/modules/snippet/snippets/docs/API/JS/Navigation/POSITION/description.js new file mode 100644 index 0000000..45bba4a --- /dev/null +++ b/modules/snippet/snippets/docs/API/JS/Navigation/POSITION/description.js @@ -0,0 +1,6 @@ +static Navigation.POSITION = { + AFTEREND: "afterend", + BEFOREEND: "beforeend", + AFTERBEGIN: "afterbegin", + BEFOREBEGIN: "beforebegin" +} \ No newline at end of file diff --git a/modules/snippet/snippets/docs/API/JS/Navigation/TARGET/description.js b/modules/snippet/snippets/docs/API/JS/Navigation/TARGET/description.js new file mode 100644 index 0000000..3cbd36c --- /dev/null +++ b/modules/snippet/snippets/docs/API/JS/Navigation/TARGET/description.js @@ -0,0 +1,6 @@ +static Navigation.TARGET = { + TOP: "_top", + SELF: "_self", + BLANK: "_blank", + PARENT: "_parent" +}; \ No newline at end of file diff --git a/modules/snippet/snippets/docs/API/JS/Navigation/TARGET/example-0-0.php b/modules/snippet/snippets/docs/API/JS/Navigation/TARGET/example-0-0.php new file mode 100644 index 0000000..3f1b1de --- /dev/null +++ b/modules/snippet/snippets/docs/API/JS/Navigation/TARGET/example-0-0.php @@ -0,0 +1 @@ +Click here to replace this button with the contents of /some-page \ No newline at end of file diff --git a/modules/snippet/snippets/docs/API/JS/Navigation/TARGET/example-0-1.php b/modules/snippet/snippets/docs/API/JS/Navigation/TARGET/example-0-1.php new file mode 100644 index 0000000..6d9658f --- /dev/null +++ b/modules/snippet/snippets/docs/API/JS/Navigation/TARGET/example-0-1.php @@ -0,0 +1,4 @@ +
+

...

+ Click here to replace this button and its siblings with /some-page + \ No newline at end of file diff --git a/modules/snippet/snippets/docs/API/JS/Navigation/abort/description.js b/modules/snippet/snippets/docs/API/JS/Navigation/abort/description.js new file mode 100644 index 0000000..08afca9 --- /dev/null +++ b/modules/snippet/snippets/docs/API/JS/Navigation/abort/description.js @@ -0,0 +1 @@ +Navigation.abort: AbortController \ No newline at end of file diff --git a/modules/snippet/snippets/docs/API/JS/Navigation/bindElements/description.js b/modules/snippet/snippets/docs/API/JS/Navigation/bindElements/description.js new file mode 100644 index 0000000..e02da3b --- /dev/null +++ b/modules/snippet/snippets/docs/API/JS/Navigation/bindElements/description.js @@ -0,0 +1 @@ +static Navigation.bindElements(): void \ No newline at end of file diff --git a/modules/snippet/snippets/docs/API/JS/Navigation/bindElements/example-0-0.js b/modules/snippet/snippets/docs/API/JS/Navigation/bindElements/example-0-0.js new file mode 100644 index 0000000..e31c81f --- /dev/null +++ b/modules/snippet/snippets/docs/API/JS/Navigation/bindElements/example-0-0.js @@ -0,0 +1,5 @@ +// The programatically appended anchor tag will not have Vegvisir event listeners on it yet +document.body.appendChild(document.createElement("a")); + +// It will have Vegvisir event listeners after this method is called +vegvisir.Navigation.bindElements(); \ No newline at end of file diff --git a/modules/snippet/snippets/docs/API/JS/Navigation/constructor/description.js b/modules/snippet/snippets/docs/API/JS/Navigation/constructor/description.js new file mode 100644 index 0000000..b42d7a7 --- /dev/null +++ b/modules/snippet/snippets/docs/API/JS/Navigation/constructor/description.js @@ -0,0 +1,4 @@ +new globalThis.vegvisir.Navigation( + URL|String url = window.location, + Object options = vegvisir.Navigation.options +): Navigation \ No newline at end of file diff --git a/modules/snippet/snippets/docs/API/JS/Navigation/constructor/example-0-0.js b/modules/snippet/snippets/docs/API/JS/Navigation/constructor/example-0-0.js new file mode 100644 index 0000000..6494008 --- /dev/null +++ b/modules/snippet/snippets/docs/API/JS/Navigation/constructor/example-0-0.js @@ -0,0 +1,2 @@ +// Pathname string with leading slash +const nav = new vegvisir.Navigation("/some-page"); \ No newline at end of file diff --git a/modules/snippet/snippets/docs/API/JS/Navigation/constructor/example-0-1.js b/modules/snippet/snippets/docs/API/JS/Navigation/constructor/example-0-1.js new file mode 100644 index 0000000..7e8d07a --- /dev/null +++ b/modules/snippet/snippets/docs/API/JS/Navigation/constructor/example-0-1.js @@ -0,0 +1,2 @@ +// Pathname string without leading slash and a search parameter +const nav = new vegvisir.Navigation("some-page?foo=bar"); \ No newline at end of file diff --git a/modules/snippet/snippets/docs/API/JS/Navigation/constructor/example-0-2.js b/modules/snippet/snippets/docs/API/JS/Navigation/constructor/example-0-2.js new file mode 100644 index 0000000..a45cada --- /dev/null +++ b/modules/snippet/snippets/docs/API/JS/Navigation/constructor/example-0-2.js @@ -0,0 +1,6 @@ +// URL object with a pathname and search parameter +const url = new URL(window.location); +url.pathname = "/some-page"; +url.searchParams.set("foo", "bar"); + +const nav = new vegvisir.Navigation(url); \ No newline at end of file diff --git a/modules/snippet/snippets/docs/API/JS/Navigation/navigate/0.js b/modules/snippet/snippets/docs/API/JS/Navigation/navigate/0.js new file mode 100644 index 0000000..02e89ef --- /dev/null +++ b/modules/snippet/snippets/docs/API/JS/Navigation/navigate/0.js @@ -0,0 +1,4 @@ +const nav = new vegvisir.Navigation("/some-page"); + +// Will navigate the top shell to /some-page +nav.navigate(); \ No newline at end of file diff --git a/modules/snippet/snippets/docs/API/JS/Navigation/navigate/1.js b/modules/snippet/snippets/docs/API/JS/Navigation/navigate/1.js new file mode 100644 index 0000000..970bf78 --- /dev/null +++ b/modules/snippet/snippets/docs/API/JS/Navigation/navigate/1.js @@ -0,0 +1,5 @@ +const target = document.querySelector("#target"); +const nav = new vegvisir.Navigation("/some-page"); + +// Will replace the contents of an element with id #target with the contents of /some-page +nav.navigate(target); \ No newline at end of file diff --git a/modules/snippet/snippets/docs/API/JS/Navigation/navigate/2.js b/modules/snippet/snippets/docs/API/JS/Navigation/navigate/2.js new file mode 100644 index 0000000..1ce57bd --- /dev/null +++ b/modules/snippet/snippets/docs/API/JS/Navigation/navigate/2.js @@ -0,0 +1,8 @@ +const target = document.querySelector("#target"); +const nav = new vegvisir.Navigation("/some-page"); + +// Will place the contents of /some-page after the target element as a sibling +nav.navigate(target, vegvisir.Navigation.POSITION.AFTEREND); + +// Tip: You can also pass an insertAdjacentElement position string directly +nav.navigate(target, "afterend"); \ No newline at end of file diff --git a/modules/snippet/snippets/docs/API/JS/Navigation/navigate/description.js b/modules/snippet/snippets/docs/API/JS/Navigation/navigate/description.js new file mode 100644 index 0000000..1714708 --- /dev/null +++ b/modules/snippet/snippets/docs/API/JS/Navigation/navigate/description.js @@ -0,0 +1,5 @@ +Navigation.navigate( + target: HTMLELement = Navigation.#rootShellElement + position: Navigation.POSITION = Navigation.POSITION.BEFOREEND, + mode: Navigation.MODE = Navigation.MODE.REPLACE +): void \ No newline at end of file diff --git a/modules/snippet/snippets/docs/API/JS/Navigation/navigate/example-0-0.js b/modules/snippet/snippets/docs/API/JS/Navigation/navigate/example-0-0.js new file mode 100644 index 0000000..54c9df6 --- /dev/null +++ b/modules/snippet/snippets/docs/API/JS/Navigation/navigate/example-0-0.js @@ -0,0 +1,6 @@ +const target = document.querySelector("#update-this-element"); +const button = document.querySelector("#click-me-to-refresh"); + +const nav = new vegvisir.Navigation("/page-with-new-content"); + +button.addEventListener("click", () => nav.navigate(target)); \ No newline at end of file diff --git a/modules/snippet/snippets/docs/API/JS/Navigation/options/description.js b/modules/snippet/snippets/docs/API/JS/Navigation/options/description.js new file mode 100644 index 0000000..c2bc5aa --- /dev/null +++ b/modules/snippet/snippets/docs/API/JS/Navigation/options/description.js @@ -0,0 +1,3 @@ +{ + pushHistory: boolean +} \ No newline at end of file diff --git a/modules/snippet/snippets/docs/API/PHP/VV/embed/example-1-0.css b/modules/snippet/snippets/docs/API/PHP/VV/embed/example-1-0.css deleted file mode 100644 index 0d2c803..0000000 --- a/modules/snippet/snippets/docs/API/PHP/VV/embed/example-1-0.css +++ /dev/null @@ -1,6 +0,0 @@ -/* File: /var/www/my-website/public/assets/css/style.css */ - -p { - color: blue; - background-color: red; -} \ No newline at end of file diff --git a/modules/snippet/snippets/docs/API/PHP/VV/embed/example-1-0.php b/modules/snippet/snippets/docs/API/PHP/VV/embed/example-1-0.php new file mode 100644 index 0000000..c1826be --- /dev/null +++ b/modules/snippet/snippets/docs/API/PHP/VV/embed/example-1-0.php @@ -0,0 +1,3 @@ +/* File: /var/www/my-website/public/assets/media/logo.svg */ + +... \ No newline at end of file diff --git a/modules/snippet/snippets/docs/API/PHP/VV/embed/example-1-1.php b/modules/snippet/snippets/docs/API/PHP/VV/embed/example-1-1.php index dfb160d..5c07fee 100644 --- a/modules/snippet/snippets/docs/API/PHP/VV/embed/example-1-1.php +++ b/modules/snippet/snippets/docs/API/PHP/VV/embed/example-1-1.php @@ -1,4 +1,5 @@ -// File: /var/www/my-website/public/index.php +// File: /var/www/my-website/shells/document.php - -

Some content...

\ No newline at end of file +
+ +
\ No newline at end of file diff --git a/modules/snippet/snippets/docs/API/PHP/VV/include/example-1-0.css b/modules/snippet/snippets/docs/API/PHP/VV/include/example-1-0.css deleted file mode 100644 index 0d2c803..0000000 --- a/modules/snippet/snippets/docs/API/PHP/VV/include/example-1-0.css +++ /dev/null @@ -1,6 +0,0 @@ -/* File: /var/www/my-website/public/assets/css/style.css */ - -p { - color: blue; - background-color: red; -} \ No newline at end of file diff --git a/modules/snippet/snippets/docs/API/PHP/VV/include/example-1-0.php b/modules/snippet/snippets/docs/API/PHP/VV/include/example-1-0.php new file mode 100644 index 0000000..1fbceb6 --- /dev/null +++ b/modules/snippet/snippets/docs/API/PHP/VV/include/example-1-0.php @@ -0,0 +1,5 @@ +/* File: /var/www/my-website/modules/banner.php */ + + +

Important text!

+ \ No newline at end of file diff --git a/modules/snippet/snippets/docs/API/PHP/VV/include/example-1-1.php b/modules/snippet/snippets/docs/API/PHP/VV/include/example-1-1.php index dfb160d..777ce4e 100644 --- a/modules/snippet/snippets/docs/API/PHP/VV/include/example-1-1.php +++ b/modules/snippet/snippets/docs/API/PHP/VV/include/example-1-1.php @@ -1,4 +1,6 @@ // File: /var/www/my-website/public/index.php - -

Some content...

\ No newline at end of file +
+

Some header content

+ +
\ No newline at end of file diff --git a/public/assets/css/document.css b/public/assets/css/document.css index 2b7b5c5..5f1da0f 100644 --- a/public/assets/css/document.css +++ b/public/assets/css/document.css @@ -66,8 +66,6 @@ h3 { font-size: 18px; } -/* ## Sections */ - /* ## Container */ container { @@ -113,6 +111,10 @@ button.solid { background-color: var(--color-deep); } +button.shade { + background-color: rgba(0, 0, 0, .05); +} + @media (hover: hover) { button:hover { background-color: rgba(0, 0, 0, .05); @@ -126,6 +128,21 @@ button.solid { /* # Content */ +/* ## Runners */ + +:is(header, footer) ul { + display: flex; + padding-left: 0; + list-style: none; + gap: var(--padding); +} + +:is(header, footer) ul:last-child { + margin-left: auto; +} + +/* ### Header */ + header { --border-width: 2px; @@ -144,21 +161,18 @@ header .logo { background-color: var(--color-deep); } -header ul { - display: flex; - padding-left: 0; - list-style: none; - gap: var(--padding); -} - -header ul:last-child { - margin-left: auto; -} - [vv-top-page="/help"] header a[href="/help"] button, [vv-top-page^="/docs"] header a[href="/docs"] button, [vv-top-page="/demos"] header a[href="/demos"] button, [vv-top-page="/why"] header a[href="/why"] button { font-weight: bold; background-color: rgba(0, 0, 0, .05); +} + +/* ### Footer */ + +footer { + padding: var(--padding); + color: var(--color-light); + background-color: var(--color-deep); } \ No newline at end of file diff --git a/public/assets/css/shells/docs.css b/public/assets/css/shells/docs.css index 5510227..810322f 100644 --- a/public/assets/css/shells/docs.css +++ b/public/assets/css/shells/docs.css @@ -1,3 +1,7 @@ +body { + background-color: rgba(var(--primer-color-deep), .01); +} + [vv-shell-id="/"] { display: grid; min-height: calc(100svh - var(--running-size) - var(--border-style-width)); diff --git a/public/docs/API/JS/Navigation/EVENTS.php b/public/docs/API/JS/Navigation/EVENTS.php new file mode 100644 index 0000000..5e685c1 --- /dev/null +++ b/public/docs/API/JS/Navigation/EVENTS.php @@ -0,0 +1,76 @@ + + +
+ +

(Vegvisir 3)

+

vegvisir.Navigation.EVENTS

+

Various navigation CustomEvents that can be listened for.

+ +
+
+ +

Description

+ +

All events will also fire on document as a catch-all interface.

+ +
+ + +
+ +

Values

+ +
+
+ +

navstarted

+

This CustomEvent will be fired on the navigation target and document when a navigation is started with .navigate().

+ +
+
+ +

navfinished

+

This CustomEvent will be fired on the navigation target and document when a navigation with .navigate() has finished completely.

+

A navigation is considered finished when the page has been fully loaded and all element attributes have been updated.

+ +
+ +
+ +

CustomEvent.detail property

+ +

Accessing the .detail property on a captured Vegvisir event will contain the following object.

+ +
+ + +
+ +

Values

+ +
+
+ +

target

+

The target element that is used/was used for the navigation.

+ +
+ + +
+ +

Examples

+ +
+
+ +

Basic usage

+

This example logs the target element of all navigations on this page.

+ + +
+ + + + + \ No newline at end of file diff --git a/public/docs/API/JS/Navigation/MODE.php b/public/docs/API/JS/Navigation/MODE.php new file mode 100644 index 0000000..bf831cb --- /dev/null +++ b/public/docs/API/JS/Navigation/MODE.php @@ -0,0 +1,52 @@ + + +
+ +

(Vegvisir 3)

+

vegvisir.Navigation.MODE

+

Change if content should be replaced or inserted when used in .navigate().

+ +
+
+ +

Description

+ + +
+ + +
+ +

Values

+ +
+
+ +

REPLACE

+

Content of the destination URL will replace the content at vegvisir.Navigation.POSITION.

+
    +

  • Position: beforebegin = Replace the target element itself.

    • +

  • Position: afterbegin = Replace the inner contents of the target element.

    • +

  • Position: beforeend = Replace the inner contents of the target element.

    • +

  • Position: afterend = Replace the target element itself.

    • +
+ +
+
+ +

INSERT

+

Content of the destination URL will append/prepend to the existing content at vegvisir.Navigation.POSITION.

+

Setting the mode to INSERT will make .navigate() behave exactly like HTMLElement.insertAdjacentElement().

+
    +

  • Position: beforebegin = Prepend before the target element itself.

    • +

  • Position: afterbegin = Prepend just inside the target element, before its first child.

    • +

  • Position: beforeend = Append just inside the target element, after its last child.

    • +

  • Position: afterend = Append after the target element itself.

    • +
+ +
+ + + + + \ No newline at end of file diff --git a/public/docs/API/JS/Navigation/POSITION.php b/public/docs/API/JS/Navigation/POSITION.php new file mode 100644 index 0000000..cd13220 --- /dev/null +++ b/public/docs/API/JS/Navigation/POSITION.php @@ -0,0 +1,66 @@ + + +
+ +

(Vegvisir 3)

+

vegvisir.Navigation.POSITION

+

Change where content should be placed when .navigate() is used.

+ +
+
+ +

Description

+ + +
+ + +
+ +

Values

+

The effect of Navigation.POSITION depend on the Navigation.MODE used for the current navigation.

+

The default Navigation.POSITION for .navigate() is beforeend and the default mode is replace.

+ +
+
+ +

afterend

+
    +

  • Mode: replace = Replace the target element itself.

    • +

  • Mode: insert = Append after the target element itself.

    • +
+ +
+
+ +

beforeend

+

This is the default position for .navigate().

+
    +

  • Mode: replace = Replace the inner contents of the target element.

    • +

  • Mode: insert = Append just inside the target element, after its last child.

    • +
+ +
+
+ +

afterbegin

+
    +

  • Mode: replace = Replace the inner contents of the target element.

    • +

  • Mode: insert = Prepend just inside the target element, before its first child.

    • +
+ +
+
+ +

beforebegin

+
    +

  • Mode: replace = Replace the target element itself.

    • +

  • Mode: insert = Prepend before the target element itself.

    • +
+ +
+ + + + + \ No newline at end of file diff --git a/public/docs/API/JS/Navigation/TARGET.php b/public/docs/API/JS/Navigation/TARGET.php new file mode 100644 index 0000000..1f992b0 --- /dev/null +++ b/public/docs/API/JS/Navigation/TARGET.php @@ -0,0 +1,78 @@ + + +
+ +

(Vegvisir 3)

+

vegvisir.Navigation.TARGET

+

Defines the target element of a navigation triggered from a bound element.

+ +
+
+ +

Description

+ +

This object follows the same syntax as the target attribute of HTMLAnchorElement.

+

If a string is provided to a target attribute of the bound element that isn't in this enumerable, the string will be treated as a CSS selector.

+ +
+ + +
+ +

Values

+

These values correspond to the value of a target attribute on a bound element.

+ +
+
+ +

_top

+

Target vegvisir.Navigation.rootShellElement. This is the same as performing a normal soft-navigation.

+

This is the default behavior if a target attribute is omitted or equals an empty string.

+ +
+
+ +

_self

+

Target the bound element itself with the defaults vegvisir.Navigation.POSITION.BEFOREEND and vegvisir.Navigation.MODE.REPLACE, which will replace the bound element itself with the contents of the destination URL.

+

The default position and mode behavior can be overridden with by setting a vv-position and vv-mode attribute on the bound element respectivly.

+ +
+
+ +

_blank

+

Default browser behavior. The destination URL will open in a new tab or window.

+ +
+
+ +

_parent

+

Target the closest parent HTMLElement that has a vv-page attribute.

+

vegvisir.Navigation.rootShellElement will become the target if no parent is found.

+ +
+
+ +

default

+

The value of the bound element's target attribute will be treated as a CSS selector if the string value does not equal an entry in this enumerable.

+ +
+ + +
+ +

Examples

+ +
+
+ +

Basic usage

+

Here's an example that uses a native anchor tag to do various navigations.

+ + + +
+ + + + + \ No newline at end of file diff --git a/public/docs/API/JS/Navigation/abort.php b/public/docs/API/JS/Navigation/abort.php new file mode 100644 index 0000000..ebc8b68 --- /dev/null +++ b/public/docs/API/JS/Navigation/abort.php @@ -0,0 +1,34 @@ + + +
+ +

(Vegvisir 2, Vegvisir 3)

+

Navigation.abort

+

Interrupt a navigation started with .navigate().

+ +
+
+ +

Description

+ +

Navigation.abort is an instance of AbortController which gets contructed automatically with new vegvisir.Navigation instances.

+ +
+ + +
+ +

Parameters

+ +
+
+ +

.abort()

+

Call Navigation.abort.abort() to interrupt a Vegvisir navigation in progress.

+ +
+ + + + + \ No newline at end of file diff --git a/public/docs/API/JS/Navigation/bindElements.php b/public/docs/API/JS/Navigation/bindElements.php new file mode 100644 index 0000000..a4ad72f --- /dev/null +++ b/public/docs/API/JS/Navigation/bindElements.php @@ -0,0 +1,36 @@ + + +
+ +

(Vegvisir 2, Vegvisir 3)

+

vegvisir.Navigation.bindElements()

+

Trigger automatic binding of unbound tags.

+ +
+
+ +

Description

+ +

Bind event listeners for HTMLAnchorElement tags and other tags with a vv attribute that haven't already been bound.

+

This method is runned automatically after a finished Vegvisir navigation.

+ +
+ + +
+ +

Examples

+ +
+
+ +

Basic usage

+

In this example we will programatically create and append an anchor tag to the DOM and use this method to bind it.

+ + +
+ + + + + \ No newline at end of file diff --git a/public/docs/API/JS/Navigation/constructor.php b/public/docs/API/JS/Navigation/constructor.php new file mode 100644 index 0000000..6f39aba --- /dev/null +++ b/public/docs/API/JS/Navigation/constructor.php @@ -0,0 +1,70 @@ + + +
+ +

(Vegvisir 2, Vegvisir 3)

+

vegvisir.Navigation() constructor

+

The Vegvisir navigation constructor is used to create a new instance of Navigation. This is the first step to creating a custom navigation.

+ +
+
+ +

Description

+ + +
+ + +
+ +

Parameters

+ +
+
+ +

url

+

A URL object or string with to a location on the same origin as the initiator.

+ +
+
+ +

options

+

An optional object containing vegvisir.Navigation.options overrides.

+ +
+ + +
+ +

Return values

+ +
+
+ +

Navigation instance

+

A Navigation object instance. Use the instance method .navigate() to navigate an, or many element(s) in the DOM.

+ +
+ + +
+ +

Examples

+ +
+
+ +

Basic usage

+

Different ways to initialize vegvisir.Navigation with a location that will open /public/some-page.php relative from project root.

+

With strings:

+ + +

With URL objects:

+ + +
+ + + + + \ No newline at end of file diff --git a/public/docs/API/JS/Navigation/index.php b/public/docs/API/JS/Navigation/index.php new file mode 100644 index 0000000..d822b2f --- /dev/null +++ b/public/docs/API/JS/Navigation/index.php @@ -0,0 +1,13 @@ +
+ +

vegvisir.Navigation

+

The Vegvisir Navigation class contains APIs for triggering navigations of any element programmatically.

+ +
+
+ +

Quickstart

+

A new navigation can be initialized by constructing the vegvisir.Navigation class.

+ +
+ \ No newline at end of file diff --git a/public/docs/API/JS/Navigation/navigate.php b/public/docs/API/JS/Navigation/navigate.php new file mode 100644 index 0000000..9ddfb05 --- /dev/null +++ b/public/docs/API/JS/Navigation/navigate.php @@ -0,0 +1,93 @@ + + +
+ +

(Vegvisir 2, Vegvisir 3)

+

Navigation.navigate()

+

Perform a soft-navigation on an element.

+ +
+
+ +

Description

+ + +
+ + +
+ +

Parameters

+ +
+
+ +

target

+

An optional instance of an HTMLElement which will be the target of this navigation.

+

Vegivisr.rootShellElement will be used if no argument is passed to this parameter.

+
+ Examples +

Passing nothing to this parameter will target the top shell. This would be equivalent to clicking a link.

+ +

Passing an HTMLElement to this parameter would in this example with no other arguments changed, replace the innerHTML of the target element with the response from /some-page.

+ +
+ +
+
+ +

position

+

This parameter takes an optional Navigation.POSITION string which can be used to change where content from the destination URL should be placed relative to the target element.

+
+ Examples +

Passing nothing to this parameter will replace the innerHTML of target.

+ +

Passing an position string will in this example place the contents afterEnd from target.

+ +
+ +
+
+ +

mode

+

This parameter takes an optional Navigation.MODE string which can be used to change how the contents of the destination URL should be placed relative to existing content around the target element.

+ +
+ + +
+ +

Return values

+ +
+
+ +

This method will not return anything, but a navigation in progress can be aborted with Navigation.abort.

+ +
+ + +
+ +

Examples

+ +
+
+ +

Basic usage

+

Programmatically invoke a top navigation - as if a user clicked a link.

+ + +
+
+ +

Click to refresh

+

An example how a simple "click to refresh" button can be implemented.

+ + +
+ + + + + \ No newline at end of file diff --git a/public/docs/API/JS/Navigation/options.php b/public/docs/API/JS/Navigation/options.php new file mode 100644 index 0000000..3dd1f7a --- /dev/null +++ b/public/docs/API/JS/Navigation/options.php @@ -0,0 +1,65 @@ + + +
+ +

(Vegvisir 2, Vegvisir 3)

+

Navigation.options

+

Override default Vegvisir navigation behavior.

+ +
+
+ +

Description

+ +

This object should be passed as the second argument when constructing a vegvisir.Navigation instance.

+ +
+ + +
+ +

Parameters

+ +
+
+ +

pushHistory

+

This option has no default value:

+

The default behavior of any Vegvisir top navigation is to push the new URL to the history stack. Ie. History API entry and browser pathname changes.

+

Any navigation that is not a top navigation will not push to the history stack.

+
+

By setting the pushHistory option to:

+
    +
  • +

    true

    +

    Force all navigations with .navigate() on this instance will push to the history stack. Including non-top navigations.

    +
    • +
  • +

    false

    +

    Force no navigations with .navigate() on this instance will push to the history stack. Including top navigations.

    +
    • +
+ +
+ + +
+ +

Examples

+ +
+
+ +

Basic usage

+

Here is an example the embeds an SVG file directly on a page.

+

This can come in handy for inlining small vector icons.

+ + +

By using VV::css() inside a style, we've enabled this stylesheet for that specific page.

+ +
+ + + + + \ No newline at end of file diff --git a/public/docs/API/JS/index.php b/public/docs/API/JS/index.php index 0df0de9..11ef6b1 100644 --- a/public/docs/API/JS/index.php +++ b/public/docs/API/JS/index.php @@ -1 +1,14 @@ +
+ +

JavaScript Cheat Sheet

+

Vegvisir will automatically bind HTMLAnchorElement tags and perform soft-navigation between pages on the same origin.

+

The Navigation lets you interact with, and expand Vegvisirs front-end behavior.

+ +
+
+ +

Manual pages

+ + +
\ No newline at end of file diff --git a/public/docs/API/PHP/VV/embed.php b/public/docs/API/PHP/VV/embed.php index 8efca7f..e06fece 100644 --- a/public/docs/API/PHP/VV/embed.php +++ b/public/docs/API/PHP/VV/embed.php @@ -59,9 +59,9 @@

Basic usage

Here is an example the embeds an SVG file directly on a page.

-

This can come in handy for small icons stored in a separate directory as an example.

- - +

This can come in handy for inlining small vector icons.

+ +

By using VV::css() inside a style, we've enabled this stylesheet for that specific page.
diff --git a/public/docs/API/PHP/VV/include.php b/public/docs/API/PHP/VV/include.php index b95e5e7..4a492f0 100644 --- a/public/docs/API/PHP/VV/include.php +++ b/public/docs/API/PHP/VV/include.php @@ -64,10 +64,11 @@

Basic usage

-

Let's take the following CSS stylesheet file and put it into a page.

- - -

By using VV::css() inside a style, we've enabled this stylesheet for that specific page.

+

Consider the following page snippet

+ +

Let's put this snippet into another page

+ +

By importing the snippet with VV::include() we have placed the banner tag and its contents into another page.
diff --git a/public/docs/index.php b/public/docs/index.php index 4a37ffd..6e8f4e7 100644 --- a/public/docs/index.php +++ b/public/docs/index.php @@ -12,4 +12,5 @@

The older versions of Vegvisir can be found here. They lack proper documentation and function a bit differently than Vegvisir 3 which has been largely rewritten from scratch. The main addition to version 3 are what I call "shells".

+ \ No newline at end of file diff --git a/public/docs/installation.php b/public/docs/installation.php index 3640e61..536e649 100644 --- a/public/docs/installation.php +++ b/public/docs/installation.php @@ -82,4 +82,5 @@

Let's add the following location block to our NGINX virtual host that we set up in Step X.

+ \ No newline at end of file diff --git a/shells/document.php b/shells/document.php index 9c9db22..83ca7bc 100644 --- a/shells/document.php +++ b/shells/document.php @@ -57,6 +57,17 @@ + \ No newline at end of file