<?= VV::include("modules/snippet/Snippet.php") ?>
<?php // General information ?>
<section class="md">
	<container>
		<p>(Vegvisir 3)</p>
		<h1><code>vegvisir.Navigation.EVENTS</code></h1>
		<p>Various navigation <a href="https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent" target="_blank"><code>CustomEvent</code></a>s that can be listened for.</p>
	</container>
</section>
<section class="md">
	<container>
		<h1>Description</h1>
		<?= Snippet::put("docs/API/JS/Navigation/EVENTS/description", Snippet::JAVASCRIPT) ?>
		<p>All events will also fire on <a href="https://developer.mozilla.org/en-US/docs/Web/API/Document" target="_blank"><code>document</code></a> as a catch-all interface.</p>
	</container>
</section>

<?php // Method parameters ?>
<section class="md">
	<container>
		<h2>Values</h2>
	</container>
</section>
<section class="md inset">
	<container>
		<h3><code>navstarted</code></h3>
		<p>This <a href=""><code>CustomEvent</code></a> will be fired on the navigation <a href=""><code>target</code></a> and <a href="https://developer.mozilla.org/en-US/docs/Web/API/Document" target="_blank"><code>document</code></a> when a navigation is started with <a href=""><code>.navigate()</code></a>.</p>
	</container>
</section>
<section class="md inset">
	<container>
		<h3><code>navfinished</code></h3>
		<p>This <a href=""><code>CustomEvent</code></a> will be fired on the navigation <a href=""><code>target</code></a> and <a href="https://developer.mozilla.org/en-US/docs/Web/API/Document" target="_blank"><code>document</code></a> when a navigation with <a href=""><code>.navigate()</code></a> has finished completely.</p>
		<p>A navigation is considered finished when the page has been fully loaded and all <a href="">element attributes</a> have been updated.</p>
	</container>
</section>

<section class="md">
	<container>
		<h1><code>CustomEvent.detail</code> property</h1>
		<?= Snippet::put("docs/API/JS/Navigation/EVENTS/description-additional", Snippet::JAVASCRIPT) ?>
		<p>Accessing the <a href="https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/detail" target="_blank"><code>.detail</code></a> property on a captured Vegvisir event will contain the following object.</p>
	</container>
</section>

<?php // Method parameters ?>
<section class="md">
	<container>
		<h2>Values</h2>
	</container>
</section>
<section class="md inset">
	<container>
		<h3><code>target</code></h3>
		<p>The <a href=""><code>target</code></a> element that is used/was used for the navigation.</p>
	</container>
</section>

<?php // Examples ?>
<section class="md">
	<container>
		<h1>Examples</h1>
	</container>
</section>
<section class="md inset">
	<container>
		<h2>Basic usage</h2>
		<p>This example logs the <a href=""><code>target</code></a> element of all navigations on this page.</p>
		<?= Snippet::put("docs/API/JS/Navigation/EVENTS/example-0-0", Snippet::JAVASCRIPT) ?>
	</container>
</section>

<?php // Contribute ?>

<?= VV::shell("shells/docs") ?>