You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
280 lines
10 KiB
280 lines
10 KiB
tag view-usage
|
|
<self>
|
|
<content-list>
|
|
<li><ul @click.stop=Goto($components)> 'Components'
|
|
<li @click.stop=Goto($ref)> 'ref'
|
|
<li @click.stop=Goto($toggle)> 'toggle'
|
|
<li @click.stop=Goto($router)> 'router'
|
|
<li><ul @click.stop=Goto($tips)> 'Pro-router tips'
|
|
<li @click.stop=Goto($param)> 'R.param'
|
|
<li @click.stop=Goto($write)> 'R.write'
|
|
<li @click.stop=Goto($gsetters)> 'Setters and getters'
|
|
<h2$components.gradient> "Components"
|
|
"This integration provides "
|
|
<b> 3
|
|
" components: "
|
|
<b> "router"
|
|
", "
|
|
<b> "ref"
|
|
" and "
|
|
<b> "toggle"
|
|
"."
|
|
<br>
|
|
<br>
|
|
<$router.bordered> "<pro-router>"
|
|
" displays current view."
|
|
<br>
|
|
<br>
|
|
"The simplest application would look like this:"
|
|
<imba-code file='src/main.imba'>
|
|
"""
|
|
imba{<c-op> '.'}mount {<c-tag> 'pro-router'}
|
|
"""
|
|
<br>
|
|
"A bit more complex example:"
|
|
<imba-code url="/{R.params.subview || ''}">
|
|
"""
|
|
{<c-tag-def> 'my-app'}
|
|
{<c-tag> 'self'}
|
|
{<c-tag> "pro-ref-f{<c-el> ' view'}{<c-op> '='}{<c-el> 'v'}"} {<c-op> 'for'} v {<c-op> 'in'} {<c-c> 'R'}{<c-op> '.'}views {<c-com> 'render menu'}
|
|
{<c-tag> "pro-router"} {<c-com> 'slot for current view'}
|
|
|
|
{<c-tag-def> 'view-hello'}
|
|
{<c-tag> 'self'} 'Hello World!'
|
|
|
|
{<c-tag-def> 'view-another-view'}
|
|
{<c-tag> 'self'} 'This is another view.'
|
|
|
|
imba{<c-op> '.'}mount {<c-tag> 'my-app'}
|
|
"""
|
|
<div[d:vcc h:140px] slot="live">
|
|
<example-menu[mb:30px]>
|
|
<{ "example-{R.param('subview')}" }>
|
|
<br>
|
|
"Notice that definition of a component with prefix {<.bordered> 'view-'} implies that there's a route."
|
|
<pro-tip>
|
|
"You can override current view and display another. For example defined by param from url:"
|
|
<imba-code>
|
|
<c-tag> "pro-router{<c-el> ' view'}{<c-op> '='}{<c-c> 'R'}{<c-op> '.'}param{<.c-br> '('}{<c-str> 'subview'}{<.c-br> ')'}"
|
|
<br>
|
|
<br>
|
|
<$ref.bordered> "<pro-ref>"
|
|
" generates a link with a proper address hooked to the router."
|
|
<br>
|
|
<br>
|
|
<b> "Examples:"
|
|
<br>
|
|
<imba-code url="/tips/about/usage/_local_value/1">
|
|
<c-el>
|
|
<c-tag> "pro-ref{<c-el> " go{<c-op> '='}{<c-str> '/exact/url'}"}"
|
|
" "
|
|
<c-com> "<a href=\"/exact/url\">"
|
|
<br>
|
|
<br>
|
|
<c-el>
|
|
<c-tag> "pro-ref{<c-el> " view{<c-op> '='}{<c-str> 'docs'}"}"
|
|
" "
|
|
<c-com> "<a href=\"/docs/about/usage\">"
|
|
<br>
|
|
<c-el>
|
|
<c-tag> "pro-ref-f{<c-el> " view{<c-op> '='}{<c-str> 'docs'}"}"
|
|
" "
|
|
<c-com> "<a href=\"/docs\">"
|
|
<br>
|
|
<br>
|
|
<c-el>
|
|
<c-tag> "pro-ref{<c-el> " view{<c-op> '='}{<c-str> 'docs'} params{<c-op> '='}{<.c-br> '{'} chapter{<c-op> ':'} {<c-c> 1}{<.c-br> '}'}"}"
|
|
" "
|
|
<c-com> "<a href=\"/docs/about/usage/chapter/1\">"
|
|
<br>
|
|
<c-el>
|
|
<c-tag> "pro-ref-f{<c-el> " view{<c-op> '='}{<c-str> 'docs'} params{<c-op> '='}{<.c-br> '{'} chapter{<c-op> ':'} {<c-c> 1}{<.c-br> '}'}"}"
|
|
" "
|
|
<c-com> "<a href=\"/docs/chapter/1\">"
|
|
<br>
|
|
<br>
|
|
<c-el>
|
|
<c-tag> "pro-ref{<c-el> " params{<c-op> '='}{<.c-br> '{'} chapter{<c-op> ':'} {<c-c> 1}{<.c-br> '}'}"}"
|
|
" "
|
|
<c-com> "<a href=\"/tips/about/usage/chapter/1\">"
|
|
<br>
|
|
<c-el>
|
|
<c-tag> "pro-ref-f{<c-el> " params{<c-op> '='}{<.c-br> '{'} chapter{<c-op> ':'} {<c-c> 1}{<.c-br> '}'}"}"
|
|
" "
|
|
<c-com> "<a href=\"/tips/chapter/1\">"
|
|
<br>
|
|
<br>
|
|
<c-com> "For external links use <a href=> directly:"
|
|
<br>
|
|
<c-tag> "a {<c-el> "href"}{<c-op> '='}{<c-str> 'https://example.com/link'}"
|
|
<br>
|
|
"As you can see you pass existing params further or forget them using "
|
|
<.bordered> "<pro-ref-f>"
|
|
"."
|
|
<br>
|
|
<pro-tip>
|
|
"Notice "
|
|
<b> "_local_value"
|
|
" in url."
|
|
<br>
|
|
"Pro-router treats underscore prefixed values as local and never pass it further."
|
|
<br>
|
|
<br>
|
|
<$toggle.bordered> "<pro-toggle>"
|
|
" generates switch on/off element writing to url flag with a given name."
|
|
<br>
|
|
<br>
|
|
<b> "Live examples:"
|
|
<imba-code url=R.to_path!>
|
|
<c-tag> "pro-toggle{<c-el> " param{<c-op> '='}{<c-str> 'zoomed'}"}"
|
|
" {<c-str> "Zoom in/out"}"
|
|
<br>
|
|
<c-tag> "pro-toggle{<c-el> " param{<c-op> '='}{<c-str> 'night'}"}"
|
|
" {<c-str> "Good night"}"
|
|
<br>
|
|
<c-tag> "pro-toggle{<c-el> " param{<c-op> '='}{<c-str> 'night'} disabled{<c-op> '='}{<c-c> true}"}"
|
|
" {<c-str> "Switch disabled"}"
|
|
<div[d:hcc jc:space-around my:20px us:none h:20px] slot='live'>
|
|
<pro-toggle.button param='zoomed'> 'Zoom in/out'
|
|
<pro-toggle.button param='night'> 'Good night'
|
|
<pro-toggle.button param='night' disabled=true> 'Switch disabled'
|
|
<br>
|
|
<h2$tips.gradient> "Pro-router tips"
|
|
"Further reading is not about functionalities provided by this package itself but the ones you will be using straight from pro-router."
|
|
<br>
|
|
<br>
|
|
<$param.example>
|
|
<code-inline> "{<c-c> 'R'}{<c-op> '.'}param{<.c-br> '('}{<c-str> 'key'}{<.c-br> ')'}"
|
|
<p>
|
|
"Use it to receive param value for given { <i> 'key' }."
|
|
<br>
|
|
"Value will be automatically processed with key { <b> 'getter' } if provided."
|
|
<br>
|
|
"It's awesome because you immidietaly work on a real object."
|
|
<br>
|
|
<pro-tip>
|
|
<.example>
|
|
<code-inline> "{<c-c> 'R'}{<c-op> '.'}params{<c-op> '.'}key"
|
|
<p> "You can ommit getter by going straight for the parameter."
|
|
<br>
|
|
<br>
|
|
<$write.example>
|
|
<code-inline> "{<c-c> 'R'}{<c-op> '.'}write{<.c-br> '('}{<c-str> 'key'}{<c-op> ','} value{<.c-br> ')'}"
|
|
<p>
|
|
"Use it to store the { <i> 'value' } under given param { <i> 'key' }."
|
|
<br>
|
|
"Value will be automatically processed with key { <b> 'setter' } if provided."
|
|
<br>
|
|
"It's awesome because you can easily store anything in a nice format this way."
|
|
<pro-tip>
|
|
"Writing doesn't change browser history. This way you can bind directly user input to url."
|
|
<imba-code url="/{("user-input/" + R.params['user-input'] if R.params['user-input']) || ''}">
|
|
<c-tag> "input{<c-c> '$v'} type{<c-op> '='}{<c-str> 'text'} value{<c-op> '='}{<c-c> 'R'}{<c-op> '.'}param{<.c-br> '('}{<c-str> 'user-input'}{<.c-br> ')'} {<c-op> '@keyup='}{<c-c> 'R'}{<c-op> '.'}write{<.c-br> '('}{<c-str> 'user-input'}{<c-op> ', '}{<c-c> '$v'}{<c-op> '.'}value{<.c-br> ')'}"
|
|
<div[d:vcc h:100px] slot="live">
|
|
<input$v type='text' value=R.param('user-input') @keyup=R.write('user-input', $v.value)>
|
|
<h3$gsetters.gradient> "Using getters and setters"
|
|
"This is very simple yet powerful feature which can fullfil many different functions."
|
|
<br>
|
|
<br>
|
|
<b> "Format a nice url:"
|
|
<imba-code url="/{("title/" + R.params.title if R.params.title) || ''}">
|
|
"{<c-c> 'R'}{<c-op> '.'}setters{<c-op> '.'}title {<c-op> '='} {<c-fl> 'do'} {<c-op> '|'}{<c-c> 'v' }{<c-op> '|'} v{<c-op> '.'}replaceAll{<.c-br> '('}{<c-str> ' '}{<c-op> ', '}{<c-str> '-'}{<.c-br> ')'}"
|
|
<br>
|
|
"{<c-c> 'R'}{<c-op> '.'}getters{<c-op> '.'}title {<c-op> '='} {<c-fl> 'do'} {<c-op> '|'}{<c-c> 'v' }{<c-op> '|'} v{<c-op> '.'}replaceAll{<.c-br> '('}{<c-str> '-'}{<c-op> ', '}{<c-str> ' '}{<.c-br> ')'}"
|
|
|
|
<div[d:vcc h:100px] slot="live">
|
|
<label> "Title: {R.param('title')}"
|
|
<input$v2 type='text' value=R.param('title') @keyup=R.write('title', $v2.value)>
|
|
<br>
|
|
<br>
|
|
<b> "Set default value:"
|
|
<imba-code url="/{("name/" + R.params.name if R.params.name) || ''}">
|
|
"{<c-c> 'R'}{<c-op> '.'}setters{<c-op> '.'}name {<c-op> '='} {<c-fl> 'do'} {<c-op> '|'}{<c-c> 'v' }{<c-op> '|'} v {<c-fl> 'if '}{<c-str> 'Johny'}{<c-op> '!='} v"
|
|
<br>
|
|
"{<c-c> 'R'}{<c-op> '.'}getters{<c-op> '.'}name {<c-op> '='} {<c-fl> 'do'} {<c-op> '|'}{<c-c> 'v' }{<c-op> '|'} v {<c-op> '||'} {<c-str> 'Johny'}"
|
|
|
|
<div[d:vcc h:100px] slot="live">
|
|
<label> "Hello {R.param('name')}!"
|
|
<input$v3 type='text' value=(R.params.name ? R.param('name') : '') @keyup=R.write('name', $v3.value)>
|
|
<br>
|
|
<br>
|
|
<b> "Give you right away a proper object:"
|
|
<imba-code url="/{("number/" + R.params.number if R.params.number) || ''}{("/cucumber/" + R.params.cucumber if R.params.cucumber) || ''}">
|
|
"{<c-c> 'R'}{<c-op> '.'}getters{<c-op> '.'}number {<c-op> '='} {<c-fl> 'do'} {<c-op> '|'}{<c-c> 'v' }{<c-op> '|'} {<c-c> 'Number'}{<.c-br> '('}v{<.c-br> ')'}"
|
|
|
|
<div[d:vcc h:150px] slot="live">
|
|
<[d:inline-block]>
|
|
<.button@click=(R.write 'number', R.param('number') - 1)> "-"
|
|
" With getter: {R.param('number')} "
|
|
<.button@click=(R.write 'number', R.param('number') + 1)> "+"
|
|
<br>
|
|
<[d:inlne-block]>
|
|
<.button@click=(R.write 'cucumber', R.param('cucumber') - 1)> "-"
|
|
" Without getter: {R.param('cucumber')} "
|
|
<.button@click=(R.write 'cucumber', R.param('cucumber') + 1)> "+"
|
|
<br>
|
|
<br>
|
|
<b> "Validates value:"
|
|
<imba-code url="/{("one2four/" + R.params.one2four if R.params.one2four) || ''}">
|
|
"""
|
|
{<c-tag-def> "valid{<.c-br> '('}{<c-el> 'v'}{<.c-br> ')'}"}
|
|
{<c-c> 0} {<c-op> '<'} v {<c-op> 'and'} v {<c-op> '<'} {<c-c> 4}
|
|
|
|
{<c-c> 'R'}{<c-op> '.'}setters{<c-op> '.'}one2four {<c-op> '='} {<c-fl> 'do'} {<c-op> '|'}v{<c-op> '|'} valid{<.c-br> '('}v{<.c-br> ')'} {<c-fl> '?'} v {<c-fl> ':'} {<c-c> 'R'}{<c-op> '.'}params{<c-op> '.'}one2four
|
|
{<c-c> 'R'}{<c-op> '.'}getters{<c-op> '.'}one2four {<c-op> '='} {<c-fl> 'do'} {<c-op> '|'}v{<c-op> '|'}
|
|
{<c-fl> 'if'} v
|
|
{<c-let> 'number'} {<c-op> '='} {<c-c> 'Number'}{<.c-br> '('}v{<.c-br> ')'}
|
|
{<c-fl> 'return'} number {<c-fl> 'if'} valid{<.c-br> '('}number{<.c-br> ')'}
|
|
{<c-c> 1}
|
|
"""
|
|
|
|
<div[d:vcc h:100px] slot="live">
|
|
<[d:inline-block]>
|
|
<.button@click=(R.write 'one2four', R.param('one2four') - 1)> "-"
|
|
<b> " {R.param('one2four')} "
|
|
<.button@click=(R.write 'one2four', R.param('one2four') + 1)> "+"
|
|
|
|
<br>
|
|
<a.button href='#/usage/'> "Reset playground"
|
|
<br>
|
|
<br>
|
|
<br>
|
|
"Complementary read: "
|
|
<a href="http://router.maniak.pro/#/docs"> 'router.maniak.pro/#/docs'
|
|
|
|
R.setters.title = do |v| v.replaceAll(' ', '-')
|
|
R.getters.title = do |v| v.replaceAll('-', ' ')
|
|
R.setters.name = do |v| v if "Johny" != v
|
|
R.getters.name = do |v| v || "Johny"
|
|
R.getters.number = do |v| Number(v)
|
|
|
|
def valid(v)
|
|
0 < v and v < 4
|
|
|
|
R.setters.one2four = do |v| valid(v) ? v : R.params.one2four
|
|
R.getters.one2four = do |v|
|
|
if v
|
|
let number = Number(v)
|
|
return number if valid(number)
|
|
1
|
|
css .example
|
|
d:htl
|
|
> mr: 10px
|
|
|
|
tag example-menu
|
|
<self>
|
|
<example-pro-ref-f.button params={}> "HELLO"
|
|
<example-pro-ref-f.button params={ subview: 'another-view' }> "ANOTHER-VIEW"
|
|
|
|
tag example-pro-ref-f < pro-ref-f
|
|
def render
|
|
let link = go || url
|
|
<self[d:inline].active=(R.to_path! == link) href=link @click.prevent=R.go(link)><slot>
|
|
|
|
tag example-hello
|
|
<self> 'Hello World!'
|
|
|
|
tag example-another-view
|
|
<self> 'This is another view.'
|
|
|
|
R.getters.subview = do |v| v || 'hello'
|