Skip to content

Commit

Permalink
define table in json
Browse files Browse the repository at this point in the history
  • Loading branch information
@AlexVipond
AlexVipond committed Sep 16, 2021
1 parent 18b7edf commit 537a05d
Showing 1 changed file with 132 additions and 106 deletions.
238 changes: 132 additions & 106 deletions guides/selector-reference.md
View file
Expand Up @@ -11,112 +11,7 @@ In the first table, you'll notice that the word "slug" appears a lot. A [slug](/

## Selectors

<table id="selectors-table" class="table border-bottom">
<tr>
<th class="text-left" style="width: 50%;">Selector</th>
<th class="text-left">What it selects</th>
</tr>
<tr>
<td><code>&#42;</code></th>
<td>All elements, connections, and loops</td>
</tr>
<tr>
<td><code>element</code></th>
<td>All elements</td>
</tr>
<tr>
<td><code>connection</code></th>
<td>All connections</td>
</tr>
<tr>
<td><code>loop</code></th>
<td>All loops</td>
</tr>
<tr>
<td><code>type-slug</code></th>
<td>All elements whose element type slug matches <code>type-slug</code></td>
</tr>
<tr>
<td><code>type-slug-connection</code></th>
<td>All connections whose connection type slug matches <code>type-slug</code></td>
</tr>
<tr>
<td><code>#label-slug</code></th>
<td>The item whose label slug matches <code>label-slug</code>. </td>
</tr>
<tr>
<td><code>#assigned-id-slug</code></th>
<td>The item whose <a href="/faq/how-do-I-avoid-duplicating-data.html">assigned ID</a> slug matches <code>assigned-id-slug</code>. </td>
</tr>
<tr>
<td><code>#system-id</code></th>
<td>The item whose system ID matches <code>system-id</code>. </td>
</tr>
<tr>
<td><code>.tag</code></th>
<td>All items whose Tags field contains <code>tag</code>. Note that this selector starts with a dot <code>.</code></td>
</tr>
<tr>
<td><code>["field name" operator "field value"]</code></th>
<td>All items that have a <a href="/overview/kumus-architecture.html#fields">field name and field value</a> that meet the condition of the <code>operator</code> (valid operators are listed below this table)</td>
</tr>
<tr>
<td><code>["field name"]</code></th>
<td>All items that have any value in the field whose name matches <code>field name</code></td>
</tr>
<tr>
<td><code>[!"field name"]</code></th>
<td>All items that have no value in the field whose name matches <code>field name</code></td>
</tr>
<tr>
<td><code>:from(selector)</code></th>
<td>All connections coming from an item that matches the <code>selector</code></td>
</tr>
<tr>
<td><code>:to(selector)</code></th>
<td>All connections going to an item that matches the <code>selector</code></td>
</tr>
<tr>
<td><code>:directed</code></th>
<td>All directed connections</td>
</tr>
<tr>
<td><code>:undirected</code></th>
<td>All undirected connections</td>
</tr>
<tr>
<td><code>:mutual</code></th>
<td>All mutual connections</td>
</tr>
<tr>
<td><code>:focus</code></th>
<td>All items at the root of a <a href="/guides/focus.html">focus setting</a></td>
</tr>
<tr>
<td><code>:orphan</code></th>
<td>All elements that have zero connections (including connections that have been filtered out)</td>
</tr>
<tr>
<td><code>:not(selector)</code></th>
<td>All items that do <b>not</b> match the <code>selector</code></td>
</tr>
<tr>
<td><code>this-selector --&gt; that-selector</code></th>
<td>All items matching <code>this-selector</code> connected to items that match <code>that-selector</code></td>
</tr>
<tr>
<td><code>this-selector &lt;-- that-selector</code></th>
<td>All items matching <code>this-selector</code> connected from items that match <code>that-selector</code></td>
</tr>
<tr>
<td><code>this-selector &lt;--&gt; that-selector</code></th>
<td>All items matching <code>this-selector</code> connected to or from items that match <code>that-selector</code></td>
</tr>
<tr>
<td><code>this-selector &lt;-connection-selector-&gt; that-selector</code></th>
<td>All items matching <code>this-selector</code> connected to or from items that match <code>that-selector</code> via connections that match <code>connection-selector</code></td>
</tr>
</table>
<table id="selectors-reference" class="table border-bottom"></table>


## Operators
Expand Down Expand Up @@ -167,4 +62,135 @@ In the first table, you'll notice that the word "slug" appears a lot. A [slug](/
</tr>
</table>

<script
type="text/javascript"
src="https://unpkg.com/@alexvipond/kumu-docs-extracted@0.0.0/lib/index.umd.js"
></script>
<script>
const selectorReference = [
{
'Selector': `&#42;`,
'What it selects': `All elements, connections, and loops`,
},
{
'Selector': `element`,
'What it selects': `All elements`,
},
{
'Selector': `connection`,
'What it selects': `All connections`,
},
{
'Selector': `loop`,
'What it selects': `All loops`,
},
{
'Selector': `type-slug`,
'What it selects': `All elements whose element type slug matches <code>type-slug</code>`,
},
{
'Selector': `type-slug-connection`,
'What it selects': `All connections whose connection type slug matches <code>type-slug</code>`,
},
{
'Selector': `#label-slug`,
'What it selects': `The item whose label slug matches <code>label-slug</code>. `,
},
{
'Selector': `#assigned-id-slug`,
'What it selects': `The item whose <a href="/faq/how-do-I-avoid-duplicating-data.html">assigned ID</a> slug matches <code>assigned-id-slug</code>. `,
},
{
'Selector': `#system-id`,
'What it selects': `The item whose system ID matches <code>system-id</code>. `,
},
{
'Selector': `.tag`,
'What it selects': `All items whose Tags field contains <code>tag</code>. Note that this selector starts with a dot <code>.</code>`,
},
{
'Selector': `["field name" operator "field value"]`,
'What it selects': `All items that have a <a href="/overview/kumus-architecture.html#fields">field name and field value</a> that meet the condition of the <code>operator</code> (valid operators are listed below this table)`,
},
{
'Selector': `["field name"]`,
'What it selects': `All items that have any value in the field whose name matches <code>field name</code>`,
},
{
'Selector': `[!"field name"]`,
'What it selects': `All items that have no value in the field whose name matches <code>field name</code>`,
},
{
'Selector': `:from(selector)`,
'What it selects': `All connections coming from an item that matches the <code>selector</code>`,
},
{
'Selector': `:to(selector)`,
'What it selects': `All connections going to an item that matches the <code>selector</code>`,
},
{
'Selector': `:directed`,
'What it selects': `All directed connections`,
},
{
'Selector': `:undirected`,
'What it selects': `All undirected connections`,
},
{
'Selector': `:mutual`,
'What it selects': `All mutual connections`,
},
{
'Selector': `:focus`,
'What it selects': `All items at the root of a <a href="/guides/focus.html">focus setting</a>`,
},
{
'Selector': `:orphan`,
'What it selects': `All elements that have zero connections (including connections that have been filtered out)`,
},
{
'Selector': `:not(selector)`,
'What it selects': `All items that do <b>not</b> match the <code>selector</code>`,
},
{
'Selector': `:loop(selector)`,
'What it selects': `All items that are part of a loop matching <code>selector</code>`,
},
{
'Selector': `this-selector --&gt; that-selector`,
'What it selects': `All items matching <code>this-selector</code> connected to items that match <code>that-selector</code>`,
},
{
'Selector': `this-selector &lt;-- that-selector`,
'What it selects': `All items matching <code>this-selector</code> connected from items that match <code>that-selector</code>`,
},
{
'Selector': `this-selector &lt;--&gt; that-selector`,
'What it selects': `All items matching <code>this-selector</code> connected to or from items that match <code>that-selector</code>`,
},
{
'Selector': `this-selector &lt;-connection-selector-&gt; that-selector`,
'What it selects': `All items matching <code>this-selector</code> connected to or from items that match <code>that-selector</code> via connections that match <code>connection-selector</code>`,
}
]

KumuDocsExtracted.appendTable(
{ id: 'selector-reference', reference: selectorReference },
{
transforms: {
Selector: selector => `<code>${selector}</code>`,
},
effects: {
th: {
DEFAULT: th => th.classList.add('text-left'),
Selector: th => {
th.classList.add('text-left');
th.style.width = '50%';
},
},
},
}
);
</script>

<span class="edit-link"><a href="https://github.com/kumu/docs/blob/master/guides/selector-reference.md" target="_blank"><i class="fa fa-github"></i> edit this page</a></span>

0 comments on commit 537a05d

Please sign in to comment.