/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Very basic Marko navigation component

<nav-main path="${out.global.url.pathname}" items="${out.global.navigation.main}" />
Requirements


Marko Templating
Lasso module bundler, asset pipeline and optimizer
Koa Framework
** koa-router


## browser.json
// 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"
  ]
}

## index.html
// /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>

## layout.html
<!-- /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>

## routes.js
// ...

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()
})

// ...
	// 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()
	})

	// ...