Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Example using TroopJS #120

Closed
wants to merge 12 commits into from
Closed

Example using TroopJS #120

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
245da36
TodoMVC demo application using TroopJS
mikaelkaron May 30, 2012
d1bad10
`ENTER` -> `ENTER_KEY`
mikaelkaron May 30, 2012
c9d5a8f
remove `EMPTY` constant
mikaelkaron May 30, 2012
6cbf9fc
`dfd` -> `defer`
mikaelkaron May 30, 2012
2df979e
removed constants
mikaelkaron May 30, 2012
974ae80
don't animate
mikaelkaron May 30, 2012
56e25fe
add 'left' to end of counter
mikaelkaron May 30, 2012
c22826a
use jquery from assets
mikaelkaron May 30, 2012
15aa048
use minified version of troopjs-bundle
mikaelkaron May 30, 2012
44ed919
move to labs
mikaelkaron May 30, 2012
37a4b5e
Bit the bullet. RequireJS 2.0 compatible application.
mikaelkaron Jun 1, 2012
dca5107
prevent simulated events to trigger
mikaelkaron Jun 1, 2012
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 4 additions & 16 deletions labs/architecture-examples/troopjs/css/app.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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
Open in desktop
Original file line number Diff line number Diff line change
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
Open in desktop
Original file line number Diff line number Diff line change
@@ -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();
});
});
});
Loading