Skip to content

Commit 7a7b8f9

Browse files
CatWinchesterCatWinchester
committed
add toggle template
1 parent cc34c1a commit 7a7b8f9

2 files changed

Lines changed: 38 additions & 23 deletions

File tree

‎index.html‎

Lines changed: 25 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -11,46 +11,57 @@
1111
</head>
1212
<body>
1313
<div id="content">
14-
<div class="section group" id="top_row" data-bind="template: { name: getTemplate, foreach:topRowPosts, afterRender: postRendered }"></div>
14+
<div class="section group" id="top_row" data-bind="template: { name: getPostTemplate, foreach:topRowPosts, afterRender: postRendered }"></div>
1515

16-
<div class="section group" id="main_row" data-bind="template: { name: getTemplate, foreach: mainRowPosts, afterRender: postRendered }"></div>
16+
<div class="section group" id="main_row" data-bind="template: { name: getPostTemplate, foreach: mainRowPosts, afterRender: postRendered }"></div>
1717

18-
<div class="section group" id="bottom_row" data-bind="template: { name: getTemplate, foreach: bottomRowPosts, afterRender: postRendered }"></div>
18+
<div class="section group" id="bottom_row" data-bind="template: { name: getPostTemplate, foreach: bottomRowPosts, afterRender: postRendered }"></div>
1919
</div>
2020

2121
<canvas id="background"></canvas>
2222

2323
<div style="clear:both;"></div>
2424

25-
<script type="text/html" id="imagePost">
25+
<script type="text/html" id="smallPost">
2626
<div class="col span_1_of_4">
2727
<div class="post">
2828
<div class="post_content">
2929
<h2 data-bind="text: day"></h2>
30-
<img data-bind="attr: { src: image }" />
30+
<div data-bind="template: { name: $data.contentTemplate, data: $data }"></div>
3131
<p data-bind="text: description"></p>
32+
<div class="read_more_link" data-bind="if: isExpandable">
33+
<a href="#" data-bind="click: $root.changePostSize.bind($data)">Read more </a>
34+
</div>
3235
</div>
3336
</div>
3437
</div>
3538
</script>
3639

37-
<script type="text/html" id="canvasPost">
38-
<div class="col span_1_of_4">
40+
<script type="text/html" id="bigPost">
41+
<div class="col span_3_of_4">
3942
<div class="post">
4043
<div class="post_content">
4144
<h2 data-bind="text: day"></h2>
42-
<div class="contentPicture">
43-
<canvas data-bind="attr: { 'id': canvasId }" width=150 class="bezierCanvas" tabindex="1"></canvas>
44-
<button id="addCurveButton" class="canvasButtonAdd">+</button>
45-
</div>
45+
<div data-bind="template: { name: $data.contentTemplate, data: $data }"></div>
4646
<p data-bind="text: description"></p>
47-
48-
<div class="read_more_link">
47+
<div class="read_more_link" data-bind="if: isExpandable">
4948
<a href="#" data-bind="click: $root.changePostSize.bind($data)">Read more </a>
5049
</div>
51-
</div>
5250
</div>
5351
</div>
52+
</div>
5453
</script>
54+
55+
<script type="text/html" id="canvasPostContent">
56+
<div class="contentPicture">
57+
<canvas data-bind="attr: { 'id': canvasId }" width=150 class="bezierCanvas" tabindex="1"></canvas>
58+
<button id="addCurveButton" class="canvasButtonAdd">+</button>
59+
</div>
60+
</script>
61+
62+
<script type="text/html" id="imagePostContent">
63+
<img data-bind="attr: { src: image }" />
64+
</script>
65+
5566
</body>
5667
</html>

‎js/koModule.js‎

Lines changed: 13 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,24 @@
11
define(['jquery', 'knockout', './bezierModule'],
22
function ($, ko, bezierModule) {
3-
function Post(day, header, description, template) {
3+
function Post(day, header, description, contentTemplate, isExpandable) {
4+
var post = this;
45
this.day = day;
56
this.header = header;
67
this.description = description;
7-
this.template = template;
8+
this.contentTemplate = contentTemplate;
9+
this.isExpandable = isExpandable;
10+
this.isExpanded = ko.observable(false);
811
}
912

1013
function ImagePost(day, header, description, image) {
11-
Post.call(this, day, header, description, 'imagePost');
12-
14+
Post.call(this, day, header, description, 'imagePostContent', false);
1315
this.image = image;
1416
}
1517

1618
ImagePost.prototype = Object.create(new Post());
1719

1820
function CanvasPost(day, header, description, canvasId) {
19-
Post.call(this, day, header, description, 'canvasPost');
20-
21+
Post.call(this, day, header, description, 'canvasPostContent', true);
2122
this.canvasId = canvasId;
2223
}
2324

@@ -32,10 +33,11 @@ define(['jquery', 'knockout', './bezierModule'],
3233

3334
self.posts = ko.observableArray();
3435

35-
self.getTemplate = function (post) {
36-
return post.template;
36+
self.getPostTemplate = function (post) {
37+
return post.isExpanded() ? "bigPost"
38+
: "smallPost";
3739
}
38-
40+
3941
self.getRowPosts = function (rowIndex) {
4042
var foundPosts = [];
4143

@@ -108,6 +110,8 @@ define(['jquery', 'knockout', './bezierModule'],
108110
}
109111

110112
self.changePostSize = function (post) {
113+
if(post)
114+
post.isExpanded(!post.isExpanded());
111115
}
112116
}
113117

0 commit comments

Comments
 (0)