<?= VV::include("modules/snippet/Snippet.php") ?>
<?php // General information ?>
<section class="md">
	<container>
		<p>(Vegvisir 2, Vegvisir 3)</p>
		<h1><code>Navigation.navigate()</code></h1>
		<p>Perform a soft-navigation on an element.</p>
	</container>
</section>
<section class="md">
	<container>
		<h1>Description</h1>
		<?= Snippet::put("docs/API/JS/Navigation/navigate/description", Snippet::JAVASCRIPT) ?>
	</container>
</section>

<?php // Method parameters ?>
<section class="md">
	<container>
		<h2>Parameters</h2>
	</container>
</section>
<section class="md inset">
	<container>
		<h3><code>target</code></h3>
		<p>An optional instance of an <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement" target="_blank"><code>HTMLElement</code></a> which will be the target of this navigation.</p>
		<p><a href=""><code>Vegivisr.rootShellElement</code></a> will be used if no argument is passed to this parameter.</p>
		<details>
			<summary>Examples</summary>
			<p>Passing nothing to this parameter will target the top shell. This would be equivalent to clicking a link.</p>
			<?= Snippet::put("docs/API/JS/Navigation/navigate/0", Snippet::JAVASCRIPT) ?>
			<p>Passing an <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement" target="_blank"><code>HTMLElement</code></a> to this parameter would in this example with no other arguments changed, replace the innerHTML of the target element with the response from <code>/some-page</code>.</p>
			<?= Snippet::put("docs/API/JS/Navigation/navigate/1", Snippet::JAVASCRIPT) ?>
		</details>
	</container>
</section>
<section class="md inset">
	<container>
		<h3><code>position</code></h3>
		<p>This parameter takes an optional <a href=""><code>Navigation.POSITION</code></a> string which can be used to change where content from the destination URL should be placed relative to the <a href=""><code>target</code></a> element.</p>
		<details>
			<summary>Examples</summary>
			<p>Passing nothing to this parameter will replace the innerHTML of <a href=""><code>target</code></a>.</p>
			<?= Snippet::put("docs/API/JS/Navigation/navigate/1", Snippet::JAVASCRIPT) ?>
			<p>Passing an position string will in this example place the contents afterEnd from target.</p>
			<?= Snippet::put("docs/API/JS/Navigation/navigate/2", Snippet::JAVASCRIPT) ?>
		</details>
	</container>
</section>
<section class="md inset">
	<container>
		<h3><code>mode</code></h3>
		<p>This parameter takes an optional <a href=""><code>Navigation.MODE</code></a> string which can be used to change how the contents of the destination URL should be placed relative to existing content around the <a href=""><code>target</code></a> element.</p>
	</container>
</section>

<?php // Method return values ?>
<section class="md">
	<container>
		<h2>Return values</h2>
	</container>
</section>
<section class="md inset">
	<container>
		<p>This method will not return anything, but a navigation in progress can be aborted with <a href=""><code>Navigation.abort</code></a>.</p>
	</container>
</section>

<?php // Examples ?>
<section class="md">
	<container>
		<h1>Examples</h1>
	</container>
</section>
<section class="md inset">
	<container>
		<h2>Basic usage</h2>
		<p>Programmatically invoke a top navigation - as if a user clicked a link.</p>
		<?= Snippet::put("docs/API/JS/Navigation/navigate/0", Snippet::JAVASCRIPT) ?>
	</container>
</section>
<section class="md inset">
	<container>
		<h2>Click to refresh</h2>
		<p>An example how a simple "click to refresh" button can be implemented.</p>
		<?= Snippet::put("docs/API/JS/Navigation/navigate/example-0-0", Snippet::JAVASCRIPT) ?>
	</container>
</section>

<?php // Contribute ?>

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