Olives + Emily Frameworks proposal #114

Closed
wants to merge 33 commits into
from
Commits
Jump to file or symbol
Failed to load files and symbols.
+322 −435
Split
@@ -0,0 +1,6 @@
+# Olives • [TodoMVC](http://todomvc.com)
+
+[Olives](http://flams.github.com/olives/) is a JS framework for creating real-time web applications, in no time.
+
+Check out the [Wiki](https://github.com/flams/olives/wiki) for more information!
+
@@ -0,0 +1,7 @@
+#main, #footer, #clear-completed {
+ display: none;
+}
+
+.show {
+ display: block !important;
+}
@@ -1,212 +0,0 @@
-html,
-body {
- margin: 0;
- padding: 0;
-}
-
-body {
- font: 14px "Helvetica Neue", Helvetica, Arial, sans-serif;
- line-height: 1.4em;
- background: #eeeeee;
- color: #333333;
- width: 520px;
- margin: 0 auto;
- -webkit-font-smoothing: antialiased;
-}
-
-#main {
- display: none;
-}
-
-.show {
- display: block !important;
-}
-
-#todoapp {
- background: #fff;
- padding: 20px;
- margin-bottom: 40px;
- -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 2px 6px 0;
- -moz-box-shadow: rgba(0, 0, 0, 0.2) 0 2px 6px 0;
- -ms-box-shadow: rgba(0, 0, 0, 0.2) 0 2px 6px 0;
- -o-box-shadow: rgba(0, 0, 0, 0.2) 0 2px 6px 0;
- box-shadow: rgba(0, 0, 0, 0.2) 0 2px 6px 0;
- -webkit-border-radius: 0 0 5px 5px;
- -moz-border-radius: 0 0 5px 5px;
- -ms-border-radius: 0 0 5px 5px;
- -o-border-radius: 0 0 5px 5px;
- border-radius: 0 0 5px 5px;
-}
-
-#todoapp h1 {
- font-size: 36px;
- font-weight: bold;
- text-align: center;
- padding: 0 0 10px 0;
-}
-
-#todoapp input[type="text"] {
- width: 466px;
- font-size: 24px;
- font-family: inherit;
- line-height: 1.4em;
- border: 0;
- outline: none;
- padding: 6px;
- border: 1px solid #999999;
- -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset;
- -moz-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset;
- -ms-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset;
- -o-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset;
- box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset;
-}
-
-#todoapp input::-webkit-input-placeholder {
- font-style: italic;
-}
-
-#todo-list {
- margin: 10px 0;
- padding: 0;
- list-style: none;
-}
-
-#todo-list li {
- padding: 18px 20px 18px 0;
- position: relative;
- font-size: 24px;
- border-bottom: 1px solid #cccccc;
-}
-
-#todo-list li:last-child {
- border-bottom: none;
-}
-
-#todo-list li.done label {
- color: #777777;
- text-decoration: line-through;
-}
-
-#todo-list li .destroy {
- display: none;
- position: absolute;
- top: 20px;
- right: 10px;
- cursor: pointer;
- width: 20px;
- height: 20px;
- background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUBAMAAAB/pwA+AAAABGdBTUEAALGPC/xhBQAAACdQTFRFzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMAAAA////zMzMhnu0WAAAAAt0Uk5T5u3pqtV3jFQEKAC0bVelAAAAfUlEQVQI12NYtWpFsc8R865VqxhWrZpyBgg8QcylZ8AgCsjMgTCPrWJYfgYKqhjWwJgaDDVnzpw+c2bPmTPHGWzOnNm95/TuM2cOM/AARXfvBooeZAAp270bRCIz4QoOIGtDMqwJZoUEQzvCYrhzuhhWtUKYEahOX7UK6iEA3A6NUGwCTZIAAAAASUVORK5CYII=') no-repeat center center;
-}
-
-#todo-list li:hover .destroy {
- display: block;
-}
-
-#todo-list li.editing {
- border-bottom: none;
- margin-top: -1px;
- padding: 0;
-}
-
-#todo-list li.editing:last-child {
- margin-bottom: -1px;
-}
-
-#todo-list li.editing .edit {
- display: block;
- width: 444px;
- padding: 13px 15px 14px 20px;
- margin: 0;
-}
-
-#todo-list li.editing .view {
- display: none;
-}
-
-#todo-list li .view label {
- word-break: break-word;
-}
-
-#todo-list li .edit {
- display: none;
-}
-
-#todoapp footer {
- display: none;
- margin: 0 -20px -20px -20px;
- overflow: hidden;
- color: #555555;
- background: #f4fce8;
- border-top: 1px solid #ededed;
- padding: 0 20px;
- line-height: 37px;
- -webkit-border-radius: 0 0 5px 5px;
- -moz-border-radius: 0 0 5px 5px;
- -ms-border-radius: 0 0 5px 5px;
- -o-border-radius: 0 0 5px 5px;
- border-radius: 0 0 5px 5px;
-}
-
-#clear-completed {
- display: none;
- float: right;
- line-height: 20px;
- text-decoration: none;
- background: rgba(0, 0, 0, 0.1);
- color: #555555;
- font-size: 11px;
- margin-top: 8px;
- margin-bottom: 8px;
- padding: 0 10px 1px;
- cursor: pointer;
- -webkit-border-radius: 12px;
- -moz-border-radius: 12px;
- -ms-border-radius: 12px;
- -o-border-radius: 12px;
- border-radius: 12px;
- -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 0 0;
- -moz-box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 0 0;
- -ms-box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 0 0;
- -o-box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 0 0;
- box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 0 0;
-}
-
-#clear-completed:hover {
- background: rgba(0, 0, 0, 0.15);
- -webkit-box-shadow: rgba(0, 0, 0, 0.3) 0 -1px 0 0;
- -moz-box-shadow: rgba(0, 0, 0, 0.3) 0 -1px 0 0;
- -ms-box-shadow: rgba(0, 0, 0, 0.3) 0 -1px 0 0;
- -o-box-shadow: rgba(0, 0, 0, 0.3) 0 -1px 0 0;
- box-shadow: rgba(0, 0, 0, 0.3) 0 -1px 0 0;
-}
-
-#clear-completed:active {
- position: relative;
- top: 1px;
-}
-
-#todo-count span {
- font-weight: bold;
-}
-
-#instructions {
- margin: 10px auto;
- color: #777777;
- text-shadow: rgba(255, 255, 255, 0.8) 0 1px 0;
- text-align: center;
-}
-
-#instructions a {
- color: #336699;
-}
-
-#credits {
- margin: 30px auto;
- color: #999;
- text-shadow: rgba(255, 255, 255, 0.8) 0 1px 0;
- text-align: center;
-}
-
-#credits a {
- color: #888;
-}
@@ -2,56 +2,50 @@
<html lang="en">
<head>
<meta charset="utf-8">
- <title>Olives + Emily - TodoMVC</title>
- <link rel="stylesheet" href="css/base.css" />
+ <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+ <title>Olives • TodoMVC</title>
+ <link rel="stylesheet" href="../../../assets/base.css">
+ <link rel="stylesheet" href="css/app.css">
</head>
<body>
- <div id="todoapp">
- <header>
+ <section id="todoapp">
+ <header id="header">
<h1>Todos</h1>
- <input type="text" placeholder="What needs to be done?" data-event="listen:keydown,add">
+ <input id="new-todo" placeholder="What needs to be done?" autofocus data-event="listen:keydown,addTask">
</header>
- <!-- this section is hidden by default and you be shown when there are todos and hidden when not -->
<section id="main" data-stats="bind:toggleClass,nbItems,show">
- <input id="toggle-all" type="checkbox" data-stats="bind:checked,allChecked">
+ <input id="toggle-all" type="checkbox" data-event="listen:click,toggleAll" data-stats="bind:toggleCheck,nbCompleted">
<label for="toggle-all">Mark all as complete</label>
-
<ul id="todo-list" data-model="foreach">
- <li data-model="bind:toggleClass,completed,done; bind:toggleClass,edit,editing">
- <div class="view">
+ <li data-model="bind:toggleClass,completed,completed;">
+ <div class="view" data-event="listen:dblclick,startEdit">
<input class="toggle" type="checkbox" data-model="bind:checked,completed">
- <label data-model="bind:innerHTML,name" data-event="listen:dblclick,edit;" ></label>
- <a class="destroy" data-event="listen:click,remove"></a>
+ <label data-model="bind:innerHTML,title"></label>
+ <button class="destroy" data-event="listen:click,remove"></button>
</div>
- <input class="edit" type="text" data-model="bind:value,name" data-event="listen:keydown,edit; listen:blur,edit" />
+ <input class="edit" data-model="bind:value,title" data-event="listen:keydown,stopEdit; listen:blur,stopEdit">
</li>
</ul>
</section>
- <!-- this footer needs to be shown with JS when there are todos and hidden when not -->
- <footer data-stats="bind:toggleClass,nbItems,show">
- <span class="todo-count">
- <strong data-stats="bind:innerHTML,uncompleted"></strong>
- <span data-stats="bind:innerHTML,uncompletedWord"></span> left.
- </span>
-
- <span class="todo-clear">
- <a href="#" data-event="listen:click,clear;" id="clear-completed" data-stats="bind:toggleClass,completed,show">
- Clear <strong data-stats="bind:innerHTML,completed"></strong>
- completed <span data-stats="bind:innerHTML,completedWord">item</span></a>
- </span>
+ <footer id="footer" data-stats="bind:toggleClass,nbItems,show">
+ <span id="todo-count"><strong data-stats="bind:innerHTML,nbLeft">0</strong> <span data-stats="bind:innerHTML,plural"></span> left</span>
+ <button id="clear-completed" data-event="listen:click,delAll" data-stats="bind:toggleClass,nbCompleted,show">Clear completed (<span data-stats="bind:innerHTML,nbCompleted"></span>)</button>
</footer>
- </div>
- <div id="instructions">
- Double-Click to edit a todo.
- </div>
- <div id="credits">
- <p>Created by <a href="http://github.com/podefr/">Olivier Scherrer</a>.</p>
+ </section>
+ <footer id="info">
+ <p>Double-click to edit a todo</p>
+ <p>Template by <a href="http://sindresorhus.com">Sindre Sorhus</a></p>
+ <p>Created by <a href="http://github.com/podefr">Olivier Scherrer</a></p>
<p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
- </div>
- <!-- scripts here -->
- <script src="js/libs/require.js"></script>
- <script src="js/libs/Emily.js"></script>
- <script src="js/libs/Olives.js"></script>
- <script src="js/app.js"></script>
+ </footer>
+ <script src="../../../assets/base.js"></script>
+ <script src="js/lib/require.js"></script>
+ <script src="js/lib/Emily.js"></script>
+ <script src="js/lib/Olives.js"></script>
+ <script src="js/lib/Tools.js"></script>
+ <script src="js/uis/Input.js"></script>
+ <script src="js/uis/List.js"></script>
+ <script src="js/uis/Controls.js"></script>
+ <script src="js/app.js"></script>
</body>
</html>
Oops, something went wrong.