pakkajs
Version:
The idea is to provide few pakka simple UI tools.
196 lines (172 loc) • 6.77 kB
HTML
<html lang="en" class="no-js">
<head>
<meta charset="utf-8" />
<title>Pakka JS</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta content="width=device-width, initial-scale=1" name="viewport" />
<meta content="" name="description" />
<meta content="Bhaskara Rama Sai Busam" name="author" />
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/4.2.0/normalize.min.css" integrity="sha256-K3Njjl2oe0gjRteXwX01fQD5fkk9JFFBdUHy/h38ggY=" crossorigin="anonymous" />
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<style type="text/css">
body {
font-family: 'Roboto', sans-serif;
box-sizing: border-box;
padding: 20px 40px;
line-height: 1.8;
}
.entry-content {
position: relative;
}
.entry-content > p,
.entry-content > pre,
.entry-content > blockquote {
margin-left: 40px;
}
.entry-content .anchor {
display: inline-block;
visibility: hidden;
margin-right: 5px;
}
.entry-content h1:hover .anchor,
.entry-content h2:hover .anchor,
.entry-content h3:hover .anchor,
.entry-content h4:hover .anchor,
.entry-content h5:hover .anchor,
.entry-content h6:hover .anchor {
display: inline-block;
visibility: visible;
}
.entry-content blockquote p {
margin: 0;
color: #777;
}
.entry-content blockquote {
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
border-left: 4px solid rgba(0, 0, 0, 0.1);
padding: 10px;
}
.entry-content code {
padding: 1px 3px;
background-color: rgba(0, 0, 0, 0.04);
border-radius: 3px;
}
.entry-content pre code {
display: block;
padding: 10px;
background-color: rgba(0, 0, 0, 0.04);
border-radius: 3px;
}
.entry-content button {
color: rgb(63, 81, 181);
border: none;
border-radius: 3px;
background-color: rgba(0, 0, 0, 0);
transition: all 0.2s;
}
.entry-content button:hover {
background-color: rgba(158, 158, 158, .2);
}
</style>
</head>
<body>
<nav>
<a href="index.html">Documentation</a>
<a href="todoapp.html">Simple Todo App</a>
<span>Todo App 2</span>
</nav>
<article id="todoapp" class="markdown-body entry-content" itemprop="text">
<h1>Todo App 2</h1>
<p>This is an advanced Todo Application.</p>
<p>Following are interesting keyboard functions...</p>
<ul>
<li><strong><code>Enter/Return</code></strong> creates a new note next to it.</li>
<li><strong><code>Backspace/Delete</code></strong> removes present note when text becomes empty.</li>
<li><strong><code>Tab</code></strong> makes the focussed note to be child/sub-note of its previous note.</li>
<li><strong><code>Shift + Tab</code></strong> makes the focussed note to be next sibiling of the parent note.</li>
<li><strong><code>Up arrow</code></strong> focusses the previous note.</li>
<li><strong><code>Down arrow</code></strong> focusses the next note.</li>
<li><strong><code>Shift + Up arrow</code></strong> moves focussed note in upward direction among notes of same level.</li>
<li><strong><code>Shift + Down arrow</code></strong> moves focussed note in downward direction among notes of same level.</li>
<li><strong><code>Shift + Space bar</code></strong> toggles the focussed note's state(checked/unchecked).</li>
</ul>
<p>The todo items you enter would get saved too. <br>(does not work if you are on incognito or private browser window)</p>
<div>
<button click-handle="addItem">Add Item</button>
</div>
<div bind-components="todoItems">
</div>
</article>
<script type="text/template" id="todo-item-template">
<div class="hoverable-area">
<input class="show-on-hover" type="checkbox" bind-property="data.isSelected">
<div class="text-box" bind-element="inputElement" keydown-handle="checkKey" bind-class="stateClass" contenteditable="true" bind-property="data.text"></div>
<button class="show-on-hover" click-handle="copyToClipboard">Copy</button>
<button class="show-on-hover remove-button" click-handle="remove">×</button>
</div>
<div class="child-components">
<div bind-components="todoItems"></div>
</div>
</script>
<style type="text/css">
.todo-item {
padding-top: 10px;
}
.todo-item.child-components {
padding-left: 40px;
}
.todo-item.child-components > div {
border-left: 1px solid #dddddd;
}
.todo-item.child-components > div > .hoverable-area {
font-size: 90%;
line-height: 0.8em;
}
.todo-item.hoverable-area .show-on-hover {
visibility: hidden;
}
.todo-item.hoverable-area:hover .show-on-hover {
visibility: visible;
}
.todo-item .text-box {
display: inline-block;
border: none;
border-bottom: 2px solid rgba(0, 0, 0, 0);
outline: none;
min-width: 200px;
margin-right: 20px;
margin-left: 20px;
/*min-height: 1.8em;*/
}
.todo-item .text-box.selected {
color: #cccccc;
text-decoration: line-through;
}
.todo-item .text-box:hover,
.todo-item .text-box:focus {
border-bottom: 2px solid #dddddd;
/*min-height: 1.8em;*/
}
</style>
<script type="text/javascript" src="lodash.js"></script>
<script type="text/javascript" src="pakka.js"></script>
<script type="text/javascript" src="todo2app.js"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-89794627-1', 'auto');
ga('send', 'pageview');
</script>
</body>
</html>