Skip to content

Commit

Permalink
Close tastejsGH-120: Example using TroopJS.
Browse files Browse the repository at this point in the history
  • Loading branch information
@mikaelkaron @sindresorhus
mikaelkaron authored and sindresorhus committed Jun 1, 2012
1 parent 9d5419d commit e9c365d
Show file tree
Hide file tree
Showing 16 changed files with 399 additions and 13,995 deletions.
20 changes: 4 additions & 16 deletions labs/architecture-examples/troopjs/css/app.css
View file
@@ -1,21 +1,9 @@
@import url("../../../../assets/base.css");

/* base.css overrides */
#todo-list li .prepare {
#footer, #main {
display: none;
position: absolute;
top: 20px;
right: 35px;
cursor: pointer;
width: 20px;
height: 20px;
background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2RpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo3ODkwNzY1QzM1QUVFMDExOUI0MDg3MzJEODFDNjBGNyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpEODdBM0JBQ0I3MDAxMUUwQjBBMUMzMUU4NTAwRDVFRSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpEODdBM0JBQkI3MDAxMUUwQjBBMUMzMUU4NTAwRDVFRSIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M1IFdpbmRvd3MiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDoxQTFDMDFENjAwQjdFMDExQTVFMUI2QkYyMkQyMTM0OSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo3ODkwNzY1QzM1QUVFMDExOUI0MDg3MzJEODFDNjBGNyIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PstLE0sAAAD3SURBVHjanNLBCgFBHMdxO22urh6AB1BSHkAJ7UE2OeDg6kr2CSgHt5WLA6VwIhd3LyFOrh5AKeU39d+apml2Zv/1qTW7vu0244RhmEowJ6jR9RUaboLICjzhdx0uzDKSg65ivWoT4oEX/wz4SPcc09AUNnCEmyJ2YIaRCV17itgaOq5FJCXFfCjAnS8yy4gYa0cRXUgX4TOHrbjAEkRmMJYXWYJIoLohhkp0Vr62ETk0pAd9RUwbEUNZKMMOzlIsNsInOkd9WMIP0pCBN+1MYHL0Gf1xAE8YwQMq0DSNRG/Ugjws6LgX6W2sxqXd6sFes2Ox8xdgAFvzNQf5podzAAAAAElFTkSuQmCC') no-repeat center center;
}

#todo-list li:hover .prepare {
display: block;
}

#todo-list li {
padding-right: 60px;
.filter-active .completed,
.filter-completed .active {
display: none;
}
61 changes: 40 additions & 21 deletions labs/architecture-examples/troopjs/index.html
View file
Expand Up @@ -2,36 +2,55 @@
<html lang="en">
<head>
<meta charset="utf-8">
<title>Troop.js</title>
<link rel="stylesheet" href="css/app.css" type="text/css" media="screen" charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Troop.js • TodoMVC</title>
<link rel="stylesheet" href="../../../assets/base.css">
<!-- CSS overrides - remove if you don't need it -->
<link rel="stylesheet" href="css/app.css">
<!--[if IE]>
<script src="../../../assets/ie.js"></script>
<![endif]-->
</head>
<body>
<div id="todoapp">
<header>
<h1>Todos</h1>
<input id="new-todo" type="text" placeholder="What needs to be done?" data-weave="widget/create">
<section id="todoapp">
<header id="header">
<h1>todos</h1>
<input id="new-todo" placeholder="What needs to be done?" autofocus data-weave="widget/create">
</header>
<!-- this section is hidden by default and you be shown when there are todos and hidden when not -->
<!-- This section should be hidden by default and shown when there are todos -->
<section id="main" data-weave="widget/display">
<input id="toggle-all" type="checkbox" data-weave="widget/mark">
<label for="toggle-all">Mark all as complete</label>
<ul id="todo-list" data-weave="widget/list"></ul>
</section>

<!-- This footer should hidden by default and shown when there are todos -->
<footer id="footer" data-weave="widget/display">
<div id="todo-count" data-weave="widget/count"></div>
<a id="clear-completed" data-weave="widget/clear">Clear completed</a>
<!-- This should be `0 items left` by default -->
<span id="todo-count" data-weave="widget/count"><strong>0</strong> items left</span>
<!-- Remove this if you don't implement routing -->
<ul id="filters" data-weave="widget/filters">
<li>
<a href="#/">All</a>
</li>
<li>
<a href="#/active">Active</a>
</li>
<li>
<a href="#/completed">Completed</a>
</li>
</ul>
<button id="clear-completed" data-weave="widget/clear">Clear completed (0)</button>
</footer>

</div>
<div id="instructions">
Double click to edit a todo.
</div>
<div id="credits">
<p>Created by <a href="http://troopjs.com/">Mikael Karon</a>.</p>
<p>Part of <a href="http://todomvc.com/">TodoMVC</a>.</p>
</div>
<!-- scripts here -->
<script type="text/javascript" data-main="js/app.js" src="js/lib/require.js"></script>
</section>
<footer id="info">
<p>Double-click to edit a todo</p>
<p>Template by <a href="http://github.com/sindresorhus">Sindre Sorhus</a></p>
<!-- Change this out with your name and url ↓ -->
<p>Created by <a href="http://github.com/mikaelkaron">Mikael Karon</a></p>
<p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
</footer>
<!-- Scripts here. Don't remove this ↓ -->
<script src="../../../assets/base.js"></script>
<script type="text/javascript" data-main="js/app.js" src="../../../assets/require.min.js"></script>
</body>
</html>
23 changes: 16 additions & 7 deletions labs/architecture-examples/troopjs/js/app.js
View file
@@ -1,12 +1,21 @@
require({
"baseUrl" : "js",
"paths" : {
"jquery" : "lib/jquery",
"troopjs-bundle" : "lib/troopjs-bundle"
"jquery" : "../../../../assets/jquery.min",
"troopjs-bundle" : "lib/troopjs-bundle.min"
},
"priority": [ "jquery", "config", "troopjs-bundle" ]
}, [ "jquery" ], function App(jQuery) {
jQuery(document).ready(function ready($) {
$(this.body).find("[data-weave]").weave();
}, [ "require", "jquery", "troopjs-bundle" ], function Deps(parentRequire, jQuery) {

// Application and plug-ins
parentRequire([
"widget/application",
"troopjs-jquery/weave",
"troopjs-jquery/destroy",
"troopjs-jquery/hashchange",
"troopjs-jquery/action" ], function App(Application) {

// Hook ready
jQuery(document).ready(function ready($) {
Application($(this.body), "app/todos").start();
});
});
});

0 comments on commit e9c365d

Please sign in to comment.