Skip to content

Instantly share code, notes, and snippets.

@Jehu
Forked from anonymous/README.md
Last active Jan 18, 2017
Embed
What would you like to do?
basic navigation component with marko (v4) and koa (v3)
// Say lasso what files we want clientside for this layout
// /views/layouts/browser.json
{
"dependencies": [
{ "type":"js", "url":"https://code.jquery.com/jquery-3.1.1.min.js", "external":true},
{ "type":"css", "url":"https://cdn.jsdelivr.net/semantic-ui/2.2.6/semantic.min.css", "external":true },
{ "type":"js", "url":"https://cdn.jsdelivr.net/semantic-ui/2.2.6/semantic.min.js", "external":true },
"require: ../components/nav-main"
]
}
// /views/components/nav-main/index.marko
<script>
let config = {
caseSensitive: true
};
/**
* borrowed partially from https://github.com/zimme/meteor-active-route
* Thanks!
*/
let test = function(value, input) {
var result
if ((input === "/" && value === "/")) {
return true
} else if(input === "/") {
return false
}
let pattern = new RegExp(input)
if (value.match(pattern)) {
result = value.search(pattern);
result = result > -1
} else if (value.search(pattern)) {
if (!config.caseSensitive) {
value = value.toLowerCase()
}
result = value === input
}
return result != null ? result : result = false
}
let isActive = function(input, path) {
return test(input, path)
}
module.exports = {
state: {
path: '/'
},
onInput(input) {
return {
path: input.path,
items: input.items
}
}
}
</script>
<nav class="ui secondary pointing menu">
<for(item in data.items)>
<a class="${isActive(data.path, item.path) ? 'active' : ''} item" href="${item.path}">
${item.name}
</a>
</for>
<div class="right menu">
<a class="ui item">
Logout
</a>
</div>
</nav>
<!-- /views/layouts/layout.marko -->
<lasso-page package-path="./browser.json" />
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Site</title>
<lasso-head />
</head>
<body>
<div class="ui container">
<header>
<!--
HERE WE USE OUR NAVIGATION COMPONENT
notice the use of global variables from the route middleware
-->
<nav-main path="${out.global.url.pathname}" items="${out.global.navigation.main}" />
</header>
<main>
<if(data.content)>
<include(data.content) />
</if>
<else>
<p>no contents</p>
</else>
</main>
</div>
<lasso-body />
<init-widgets />
<browser-refresh enabled="true" />
</body>
</html>
// ...
router.use(function (ctx, next) {
// add Url object to global context
ctx.global.url = url.parse(ctx.request.url);
next()
})
router.use(function(ctx, next) {
// add navigation link config to global context
// navigation config could be loaded from yml file, app config.json or database
ctx.global.navigation = {
main: [
{
name: 'Home',
path: '/',
children: []
}, {
name: 'Linkname #1',
path: '/a-path'
}, {
name: 'Linkname #2',
path: '/another-path'
}, {
name: 'Linkname #3',
path: '/a-path/like/this'
}
]
}
next()
})
// ...
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment