Permalink
Browse files

frustration

  • Loading branch information...
1 parent 8a8ba80 commit 2f4110fd720e886e44daf376e06931c454df8cb8 @qoobaa committed Aug 25, 2011
Showing with 76 additions and 151 deletions.
  1. +49 −93 index.html
  2. +27 −58 lib/main.js
View
@@ -6,107 +6,63 @@
<link rel="stylesheet" href="css/main.css">
</head>
<body>
- <div class="wrap">
+ <script type="text/x-handlebars">
+ <div class="wrap">
- <header class="deck-header columns columns-opposite">
- <div class="first">
- <div class="dropdown"> <!-- Open: <div class="dropdown dropdown-open"> -->
- <a class="button button-dropdown" href=""><span>English vocabulary</span></a>
- <ul>
- <li class="selected"><a href="">English vocabulary</a></li>
- <li><a href="">Very long label goes here let’s see how it’s gonna look like</a></li>
- <li><a href="">One more</a></li>
- <li><a href="">Second deck name</a></li>
- <li class="new-deck"><a href="">New deck…</a></li>
- </ul>
+ <header class="deck-header columns columns-opposite">
+ <div class="first">
+ <div class="dropdown"> <!-- Open: <div class="dropdown dropdown-open"> -->
+ <a class="button button-dropdown" href=""><span>English vocabulary</span></a>
+ <ul>
+ <li class="selected"><a href="">English vocabulary</a></li>
+ <li><a href="">Very long label goes here let’s see how it’s gonna look like</a></li>
+ <li><a href="">One more</a></li>
+ <li><a href="">Second deck name</a></li>
+ <li class="new-deck"><a href="">New deck…</a></li>
+ </ul>
+ </div>
</div>
- </div>
- <div class="last">
- <div class="play-deck">
- <a class="button button-confirm button-play" href="">Play this deck</a>
+ <div class="last">
+ <div class="play-deck">
+ <a class="button button-confirm button-play" href="">Play this deck</a>
+ </div>
</div>
- </div>
- </header>
+ </header>
- <div class="main">
+ <div class="main">
- <div class="deck-divider">
- <span class="deck-count">4 cards</span>
+ <div class="deck-divider">
+ <span class="deck-count">4 cards</span>
+ </div>
+
+ {{#collection Ficha.CardsView class="cards"}}
+ {{/collection}}
</div>
- <ul class="cards">
- <li class="card card-editing">
- <div class="card-sides">
- <a class="card-edit-layer" href=""><span><span>Click to edit</span></span></a>
- <div class="card-side card-front">
- <a class="card-delete">X</a>
- <div class="card-button card-edit-flip"><a class="button" href="">Edit back of the card</a></div>
- <textarea name="" rows="2" cols="12">flibbertigibbet</textarea>
- <!--
- <script type="text/javascript">
- // Line breaks can be added only programatically
- document.getElementById('t').value = '\n' + document.getElementById('t').value;
- </script>
- -->
- </div>
- <div class="card-side card-back">
- <a class="card-delete">X</a>
- <textarea name="" rows="2" cols="12">a flighty or whimsical person, usually a young woman</textarea>
- <div class="card-button card-edit-flip-back"><a class="button button-confirm" href="">Done editing</a></div>
- </div>
- </div>
- </li>
- <li class="card">
- <div class="card-sides">
- <a class="card-edit-layer" href=""><span><span>Click to edit</span></span></a>
- <div class="card-side card-front">
- <a class="card-delete">X</a>
- <div class="card-button card-edit-flip"><a class="button" href="">Edit back of the card</a></div>
- <textarea name="" rows="2" cols="12">surreptitious</textarea>
- </div>
- <div class="card-side card-back">
- <a class="card-delete">X</a>
- <textarea name="" rows="2" cols="12">kept secret, esp. because it would not be approved of</textarea>
- <div class="card-button card-edit-flip-back"><a class="button button-confirm" href="">Done editing</a></div>
- </div>
- </div>
- </li>
- <li class="card">
- <div class="card-sides">
- <a class="card-edit-layer" href=""><span><span>Click to edit</span></span></a>
- <div class="card-side card-front">
- <a class="card-delete">X</a>
- <div class="card-button card-edit-flip"><a class="button" href="">Edit back of the card</a></div>
- <textarea name="" rows="2" cols="12">abstruse</textarea>
- </div>
- <div class="card-side card-back">
- <a class="card-delete">X</a>
- <textarea name="" rows="2" cols="12">difficult to understand; obscure</textarea>
- <div class="card-button card-edit-flip-back"><a class="button button-confirm" href="">Done editing</a></div>
- </div>
- </div>
- </li>
- <li class="card">
- <div class="card-sides">
- <a class="card-edit-layer" href=""><span><span>Click to edit</span></span></a>
- <div class="card-side card-front">
- <a class="card-delete">X</a>
- <div class="card-button card-edit-flip"><a class="button" href="">Edit back of the card</a></div>
- <textarea name="" rows="2" cols="12">obstreperous</textarea>
- </div>
- <div class="card-side card-back">
- <a class="card-delete">X</a>
- <textarea name="" rows="2" cols="12">noisy and difficult to control</textarea>
- <div class="card-button card-edit-flip-back"><a class="button button-confirm" href="">Done editing</a></div>
- </div>
- </div>
- </li>
- <li class="card card-new">
- <a href="">Add a card</a>
- </li>
- </ul>
</div>
+ </script>
+ </body>
+
+ <script type="text/x-handlebars" data-template-name="card-new">
+ <a href="">Add a card</a>
+ </script>
+ <script type="text/x-handlebars" data-template-name="card">
+ <div class="card-sides">
+ <a class="card-edit-layer" href=""><span><span>Click to edit</span></span></a>
+ <div class="card-side card-front">
+ <a class="card-delete">X</a>
+ <div class="card-button card-edit-flip"><a class="button" href="">Edit back of the card</a></div>
+ {{view Ficha.CardSideTextArea valueBinding="card.front"}}
+ </div>
+ <div class="card-side card-back">
+ <a class="card-delete">X</a>
+ {{view Ficha.CardSideTextArea valueBinding="card.back"}}
+ <div class="card-button card-edit-flip-back"><a class="button button-confirm" href="">Done editing</a></div>
+ </div>
</div>
- </body>
+ </script>
+
+ <script type="text/javascript" src="assets/bpm_libs.js"></script>
+ <script>spade.require("ficha");</script>
</html>
View
@@ -13,76 +13,45 @@ Ficha.Card = SC.Record.extend({
primaryKey: "id",
front: SC.Record.attr(String),
- back: SC.Record.attr(String),
-
- category: SC.Record.toOne("Ficha.Category", {
- inverse: "cards",
- isMaster: true,
- key: "category_id"
- })
+ back: SC.Record.attr(String)
});
-Ficha.Category = SC.Record.extend({
- primaryKey: "id",
-
- name: SC.Record.attr(String),
+Ficha.Card.FIXTURES = [
+ { id: "1", front: "flibbertigibbet", back: "a flighty or whimsical person, usually a young woman" },
+ { id: "2", front: "surreptitious", back: "kept secret, esp. because it would not be approved of" },
+ { id: "3", front: "abstruse", back: "difficult to understand; obscure" }
+];
- cards: SC.Record.toMany("Ficha.Card", {
- inverse: "group",
- isMaster: false
- })
+Ficha.cardsController = SC.ArrayController.create({
+ content: []
});
-Ficha.categoriesController = SC.ArrayController.create({
-
+Ficha.CardsView = SC.CollectionView.extend({
+ tagName: "ul",
+ contentBinding: "Ficha.cardsController.content",
+ itemClassView: Ficha.CardView
});
-Ficha.cardsController = SC.ArrayController.create({
- content: [],
-
- deleteCard: function (content) {
- this.removeObject(content.get("content"));
- }
+Ficha.NewCardView = SC.View.extend({
+ tagName: "li",
+ templateName: "card-new"
});
-Ficha.newCardController = SC.Object.create({
- isValid: function () {
- return this.get("front") !== "" && this.get("back") !== "";
- }.property("front", "back"),
-
- init: function () {
- this.reset();
- },
-
- reset: function () {
- this.setProperties({ front: "", back: "" });
- },
-
- create: function () {
- if (this.get("isValid")) {
- var card = Ficha.store.createRecord(Ficha.Card, {
- front: this.get("front"),
- back: this.get("back")
- });
-
- Ficha.cardsController.pushObject(card);
- this.reset();
- }
- }
+Ficha.CardView = SC.View.extend({
+ tagName: "li",
+ templateName: "card",
+ cardBinding: "content",
+ template: Handlebars.compile("dupa")
});
-Ficha.SideView = SC.TextField.extend({
- insertNewline: function () {
- this.get("parentView").sideViewInsertNewline();
- }
+Ficha.CardSideTextArea = SC.TextArea.extend({
+ attributeBindings: ["rows", "cols"],
+ rows: "2",
+ cols: "12"
});
-Ficha.CardView = SC.View.extend({
- templateName: "card",
+Ficha.cardController = SC.Object.create({
- sideViewInsertNewline: function () {
- Ficha.newCardController.create();
- SC.run.sync();
- this.$("input[type='text'][value='']:first").focus();
- }
});
+
+Ficha.cardsController.set("content", Ficha.store.find(Ficha.Card));

0 comments on commit 2f4110f

Please sign in to comment.