232 lines
6.9 KiB
HTML
232 lines
6.9 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="utf-8"/>
|
||
|
|
<title>
|
||
|
|
[urlparams]: Creating Query Strings
|
||
|
|
</title>
|
||
|
|
<style>
|
||
|
|
/* Page tweaks */
|
||
|
|
.preview-page {
|
||
|
|
margin-top: 64px;
|
||
|
|
margin-bottom: 21px;
|
||
|
|
}
|
||
|
|
/* User-content tweaks */
|
||
|
|
.timeline-comment-wrapper > .timeline-comment:after,
|
||
|
|
.timeline-comment-wrapper > .timeline-comment:before {
|
||
|
|
content: none;
|
||
|
|
}
|
||
|
|
/* User-content overrides */
|
||
|
|
.discussion-timeline.wide {
|
||
|
|
width: 920px;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
<link href="style.css" rel="stylesheet"/>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div class="page">
|
||
|
|
<div class="preview-page" data-autorefresh-url="" id="preview-page">
|
||
|
|
<main id="js-repo-pjax-container">
|
||
|
|
<div class="clearfix new-discussion-timeline container-xl px-3 px-md-4 px-lg-5">
|
||
|
|
<div class="repository-content">
|
||
|
|
<div class="clearfix">
|
||
|
|
<div class="Layout Layout--flowRow-until-md Layout--sidebarPosition-end Layout--sidebarPosition-flowRow-end">
|
||
|
|
<div class="Layout-main">
|
||
|
|
<div class="Box md Box--responsive" id="readme">
|
||
|
|
<div class="Box-header d-flex border-bottom-0 flex-items-center flex-justify-between color-bg-default rounded-top-2">
|
||
|
|
<div class="d-flex flex-items-center">
|
||
|
|
<h2 class="Box-title">
|
||
|
|
[urlparams]: Creating Query Strings
|
||
|
|
</h2>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="Box-body px-5 pb-5">
|
||
|
|
<article class="markdown-body entry-content container-lg" id="grip-content">
|
||
|
|
<p>
|
||
|
|
<code>
|
||
|
|
[urlparams]
|
||
|
|
</code>
|
||
|
|
is an object for creating query strings. It takes a series of key/value pairs at its inlet and outputs these as one symbol. Special characters in both key and value are URL encoded.
|
||
|
|
</p>
|
||
|
|
<h2>
|
||
|
|
<a aria-hidden="true" class="anchor" href="#storing-data-with-add" id="user-content-storing-data-with-add">
|
||
|
|
<span aria-hidden="true" class="octicon octicon-link">
|
||
|
|
</span>
|
||
|
|
</a>
|
||
|
|
Storing Data with
|
||
|
|
<code>
|
||
|
|
[add(
|
||
|
|
</code>
|
||
|
|
</h2>
|
||
|
|
<p>
|
||
|
|
The
|
||
|
|
<code>
|
||
|
|
[add(
|
||
|
|
</code>
|
||
|
|
message needs at least two parameters: key and value. Any additional parameters are concatenated to the value with a space. A key/value pair is output with a
|
||
|
|
<code>
|
||
|
|
=
|
||
|
|
</code>
|
||
|
|
separator, while all key/value pairs are concatenated with a
|
||
|
|
<code>
|
||
|
|
&
|
||
|
|
</code>
|
||
|
|
. Special characters will be URL encoded.
|
||
|
|
</p>
|
||
|
|
<p>
|
||
|
|
Adding a value with an already stored key will result in overwriting the existing value.
|
||
|
|
</p>
|
||
|
|
<p>
|
||
|
|
<strong>
|
||
|
|
Examples:
|
||
|
|
</strong>
|
||
|
|
</p>
|
||
|
|
<ul>
|
||
|
|
<li>
|
||
|
|
<code>
|
||
|
|
[add key 1(
|
||
|
|
</code>
|
||
|
|
will store
|
||
|
|
<code>
|
||
|
|
key=1
|
||
|
|
</code>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<code>
|
||
|
|
[add name My Name(
|
||
|
|
</code>
|
||
|
|
will store
|
||
|
|
<code>
|
||
|
|
name=My%20Name
|
||
|
|
</code>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<code>
|
||
|
|
[add key 1(
|
||
|
|
</code>
|
||
|
|
,
|
||
|
|
<code>
|
||
|
|
[add name My Name(
|
||
|
|
</code>
|
||
|
|
,
|
||
|
|
<code>
|
||
|
|
[add key 2(
|
||
|
|
</code>
|
||
|
|
will store
|
||
|
|
<code>
|
||
|
|
key=2&name=My%20Name
|
||
|
|
</code>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<code>
|
||
|
|
[add key @me with #hashtag(
|
||
|
|
</code>
|
||
|
|
will store
|
||
|
|
<code>
|
||
|
|
key=%40me%20with%20%23hashtag
|
||
|
|
</code>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
<h2>
|
||
|
|
<a aria-hidden="true" class="anchor" href="#outputting-and-clearing-data" id="user-content-outputting-and-clearing-data">
|
||
|
|
<span aria-hidden="true" class="octicon octicon-link">
|
||
|
|
</span>
|
||
|
|
</a>
|
||
|
|
Outputting And Clearing Data
|
||
|
|
</h2>
|
||
|
|
<p>
|
||
|
|
Issuing a
|
||
|
|
<code>
|
||
|
|
[bang(
|
||
|
|
</code>
|
||
|
|
message to
|
||
|
|
<code>
|
||
|
|
[urlparams]
|
||
|
|
</code>
|
||
|
|
will output the stored key/value pairs as string on its only outlet. If no data is stored, an empty symbol is sent.
|
||
|
|
</p>
|
||
|
|
<p>
|
||
|
|
You can clear the stored object with the
|
||
|
|
<code>
|
||
|
|
[clear(
|
||
|
|
</code>
|
||
|
|
method.
|
||
|
|
</p>
|
||
|
|
</article>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</main>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<script>
|
||
|
|
function showCanonicalImages() {
|
||
|
|
var images = document.getElementsByTagName('img');
|
||
|
|
if (!images) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
for (var index = 0; index < images.length; index++) {
|
||
|
|
var image = images[index];
|
||
|
|
if (image.getAttribute('data-canonical-src') && image.src !== image.getAttribute('data-canonical-src')) {
|
||
|
|
image.src = image.getAttribute('data-canonical-src');
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function scrollToHash() {
|
||
|
|
if (location.hash && !document.querySelector(':target')) {
|
||
|
|
var element = document.getElementById('user-content-' + location.hash.slice(1));
|
||
|
|
if (element) {
|
||
|
|
element.scrollIntoView();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function autorefreshContent(eventSourceUrl) {
|
||
|
|
var initialTitle = document.title;
|
||
|
|
var contentElement = document.getElementById('grip-content');
|
||
|
|
var source = new EventSource(eventSourceUrl);
|
||
|
|
var isRendering = false;
|
||
|
|
|
||
|
|
source.onmessage = function(ev) {
|
||
|
|
var msg = JSON.parse(ev.data);
|
||
|
|
if (msg.updating) {
|
||
|
|
isRendering = true;
|
||
|
|
document.title = '(Rendering) ' + document.title;
|
||
|
|
} else {
|
||
|
|
isRendering = false;
|
||
|
|
document.title = initialTitle;
|
||
|
|
contentElement.innerHTML = msg.content;
|
||
|
|
showCanonicalImages();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
source.onerror = function(e) {
|
||
|
|
if (e.readyState === EventSource.CLOSED && isRendering) {
|
||
|
|
isRendering = false;
|
||
|
|
document.title = initialTitle;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
window.onhashchange = function() {
|
||
|
|
scrollToHash();
|
||
|
|
}
|
||
|
|
|
||
|
|
window.onload = function() {
|
||
|
|
scrollToHash();
|
||
|
|
}
|
||
|
|
|
||
|
|
showCanonicalImages();
|
||
|
|
|
||
|
|
var autorefreshUrl = document.getElementById('preview-page').getAttribute('data-autorefresh-url');
|
||
|
|
if (autorefreshUrl) {
|
||
|
|
autorefreshContent(autorefreshUrl);
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|