pakkajs
Version:
The idea is to provide few pakka simple UI tools.
172 lines (151 loc) • 5.43 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>
<span>Simple Todo App</span>
<a href="todo2app.html">Todo App 2</a>
</nav>
<article id="todoapp" class="markdown-body entry-content" itemprop="text">
<h1>Simple todo app</h1>
<p>This is a normal Todo Application.</p>
<p>Following are additional 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>
</ul>
<div>
<button click-handle="addItem">Add</button>
<button click-handle="clearAll">Clear All</button>
<button click-handle="selectAll">Select All</button>
<button click-handle="invertSelection">Invert Selection</button>
<button click-handle="deselectAll">Deselect All</button>
</div>
<div bind-components="todoItems">
</div>
</article>
<script type="text/template" id="todo-item-template">
<div>
<input type="checkbox" bind-property="isSelected">
<div class="text-box" bind-element="inputElement" keydown-handle="checkKey" bind-class="stateClass" contenteditable="true" bind-property="text"></div>
<button class="remove-button" click-handle="remove">×</button>
</div>
</script>
<style type="text/css">
.todo-item {
padding-top: 10px;
}
.todo-item .remove-button {
visibility: hidden;
}
.todo-item:hover .remove-button {
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;
}
.todo-item .text-box.selected {
color: #cccccc;
text-decoration: line-through;
}
.todo-item .text-box:hover {
border-bottom: 2px solid #dddddd;
}
</style>
<script type="text/javascript" src="lodash.js"></script>
<script type="text/javascript" src="pakka.js"></script>
<script type="text/javascript" src="todoapp.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>