-
Notifications
You must be signed in to change notification settings - Fork 48
/
04_programmatic_cards.html
109 lines (92 loc) · 4.35 KB
/
04_programmatic_cards.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
<html>
<head>
<meta name="viewport" content="initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; width=device-width" />
<link rel="stylesheet" href="assets/css/styles.css" type="text/css" />
<script src="assets/js/zepto.min.js"></script>
<script src="assets/js/mustache.js"></script>
</head>
<body>
<div class="content ">
</div>
<div class="header">
Cards in an HTML UI
</div>
<div class="footer">
All images copyright 2013 <a href="http://tricedesigns.com/" target="_blank">Andrew Trice</a>.
</div>
</body>
<!--- This is a Mustache.js template. This is used with JSON data to generate the HTML strings that will comprise the user interface --->
<script id="card-template" type="text/template">
<div class="card">
{{#image}}
<div class="card-image {{ image }}">
{{#banner}} <div class="banner"></div> {{/banner}}
{{#caption}} <h2>{{caption}}</h2> {{/caption}}
</div>
{{/image}}
{{#title}} <h1>{{title}}</h1> {{/title}}
{{#message}} <p>{{{message}}}</p> {{/message}}
</div>
</script>
<script>
var content, columns, compiledCardTemplate = undefined;
var MIN_COL_WIDTH = 300;
//data used to render the HTML templates
var cards_data = [
{ title:"This is a card!",
message:"In essence, a card is just a rectangular region which contains content. This content is just HTML. This could be <b>text</b>, <i>images</i>, <u>lists</u>, etc... The card UI methaphor dictates the interaction and layout of these regions." },
{ message:"Yep, just some simple content ecapsulated in this card.",
image:"image1"},
{ image:"image2",
banner:true,
caption:"Image, Banner & HTML",
message:"All standard HTML structures, styled with CSS."},
{ title:"This is another card!",
image:"image4",
message:"Here, you can see a more complex card. IT is all just layout of HTML structures.",
caption:"Look, it's Vegas!", },
{ message:"Yep, just some simple content ecapsulated in this card.",
image:"image5",
banner:true, },
{ image:"image6",
caption:"It's a college!",
message:"With HTML in the content.<ul><li>Bullet 1</li><li>Bullet 2</li><li>Bullet 3</li></ul>"},
{ image:"image1",
caption:"San Francisco City Hall",
message:"All of these photos were captured with a quadcopter and GoPro! Check out my blog <a href='http://tricedesigns.com'>http://tricedesigns.com</a> to learn more!"},
];
//page load initialization
Zepto(function($){
content = $(".content");
compiledCardTemplate = Mustache.compile( $("#card-template").html() );
layoutColumns();
$(window).resize(onResize);
})
//resize event handler
function onResize() {
var targetColumns = Math.floor( $(document).width()/MIN_COL_WIDTH );
if ( columns != targetColumns ) {
layoutColumns();
}
}
//function to layout the columns
function layoutColumns() {
content.detach();
content.empty();
columns = Math.floor( $(document).width()/MIN_COL_WIDTH );
var columns_dom = [];
for ( var x = 0; x < columns; x++ ) {
var col = $('<div class="column">');
col.css( "width", Math.floor(100/columns)+"%" );
columns_dom.push( col );
content.append(col);
}
for ( var x = 0; x < cards_data.length; x++ ) {
var html = compiledCardTemplate( cards_data[x] );
var targetColumn = x % columns_dom.length;
columns_dom[targetColumn].append( $(html) );
}
$("body").prepend (content);
}
</script>
</html>