Revision 323832643465 () - Diff

Link to this snippet: https://friendpaste.com/3tgqGZVg2DU9UN0vkqbcLI
Embed:
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
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
		<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
        <script src="http://beebole.com/pure/version2/libs/prototype.js" type="text/javascript"></script>          
        <script src="http://beebole.com/pure/version2/libs/pure2.js" type="text/javascript"></script>          
        <script type="text/javascript">
            var template_Data = {
                teams : [
                    {
                        'id'              : 1,
                        'name'            : 'Alpha',
                        'team_number'     : 145,
                        'is_special_team' : false,
                        'summary'         : 'Phasellus blandit velit quis risus venenatis sed tempus turpis porta. Sed vitae dapibus mi. Nam et diam sit amet odio elementum semper. Suspendisse a turpis leo, et mollis ligula. Maecenas elementum dui eu urna tristique eget viverra justo blandit. Pellentesque laoreet bibendum pretium. Etiam id ipsum quis tortor luctus porta. Vestibulum a lacinia massa. Quisque eget erat eget urna pellentesque congue. Morbi nec sem dui. Vestibulum justo elit, imperdiet a ullamcorper et, blandit ut leo. Integer id velit turpis',
                        'types'           : [
                            { 'name' : 'Small', 'playtime' : 65 },
                            { 'name' : 'Large', 'playtime' : 40 }
                        ]
                    },
                    {
                        'id'              : 2,
                        'name'            : 'Beta',
                        'team_number'     : 12,
                        'is_special_team' : true,
                        'summary'         : 'Phasellus blandit velit quis risus venenatis sed tempus turpis porta. Sed vitae dapibus mi. Nam et diam sit amet odio elementum semper. Suspendisse a turpis leo, et mollis ligula. Maecenas elementum dui eu urna tristique eget viverra justo blandit. Pellentesque laoreet bibendum pretium. Etiam id ipsum quis tortor luctus porta. Vestibulum a lacinia massa. Quisque eget erat eget urna pellentesque congue. Morbi nec sem dui. Vestibulum justo elit, imperdiet a ullamcorper et, blandit ut leo. Integer id velit turpis',
                        'types'           : [
                            { 'name' : 'Large', 'playtime' : 40 }
                        ]
                    },
                    {
                        'id'              : 3,
                        'name'            : 'Delta',
                        'team_number'     : 32,
                        'is_special_team' : false,
                        'summary'         : 'Phasellus blandit velit quis risus venenatis sed tempus turpis porta. Sed vitae dapibus mi. Nam et diam sit amet odio elementum semper. Suspendisse a turpis leo, et mollis ligula. Maecenas elementum dui eu urna tristique eget viverra justo blandit. Pellentesque laoreet bibendum pretium. Etiam id ipsum quis tortor luctus porta. Vestibulum a lacinia massa. Quisque eget erat eget urna pellentesque congue. Morbi nec sem dui. Vestibulum justo elit, imperdiet a ullamcorper et, blandit ut leo. Integer id velit turpis',
                        'types'           : [
                            { 'name' : 'Small', 'playtime' : 30 },
                            { 'name' : 'Large', 'playtime' : 50 }
                        ]
                    }                                        
                ]
            };
            
            var template_Directive = {
                'div.team' : {    
                    'team <- teams' : {                      
                        '@id'    : 'team.id',
                        '@class+': function(args) {  return (args.pos % 2 == 0) ? ' even' : ' odd'; },

                        'div.header div.name'   : 'team.name',   
                        'div.header div.number' : function(args) {
                            return (args.item['is_special_team'] == 1) ? 'S' : args.item.team_number;
                        },                        
                        'div.header div.type'   : {
                            'type <- team.types' : {
                                '.'      : '#{type.name}'
                            }
                        },
            
                        'div.detailcontainer div.teamdetail p.summary'     : 'team.summary',
                        'div.detailcontainer div.teamdetail img.image@src' : function(args) {
                            if(args.item['default_image'] != '') {
                                return args.item['id'] + '.png';
                            }
                            else {
                                return 'blank.png';
                            }                                    
                        },                            
            
                        'div.detailcontainer div.typedetailcontainer' : {
                            'type <- team.types' : {
                                '@class+'                  :function(args) {  return (args.pos % 2 == 0) ? ' even' : ' odd'; },
                                'div.duration div.value'  : function(args) {
                                    if(args.item['playtime'] > 0) {
                                        return (args.item['playtime'] / 60) + " Minutes";
                                    }
                                    else {
                                        return "N/A";
                                    }
                                }
                            }
                        }
                    }
                }
            };
            
            var template;
            function compileTemplate() {
                template = $('content').compile(template_Directive);                
            }
            
            function renderTemplate() {
                $('content').render(template_Data, template);                
            }
        </script>
        <style type="text/css">
            #content .team {
                position: relative;
            }
            
            #content .team .header {
                height: 15px;
            }            
            
            #content .team .header div {
                float: left;
                padding-right: 20px;
            }

            #content .team .detailcontainer {
                position: relative;
            }

            #content .team .detailcontainer .typedetailcontainer {
                position: absolute;
                top: 60px;                
            }

            #content .team .detailcontainer .typedetailcontainer.even {
                left: 200px;
            }
            
            #content .team .detailcontainer .typedetailcontainer.odd {
                left: 450px;
            }            
        </style>        
    </head>
    <body onload="javascript:compileTemplate(); javascript:renderTemplate();">
        <div id="content">                
            <div class="team">
                <div class="header">
                    <div class="name"></div>
                    <div class="number"></div>
                    <div class="type"></div>
                </div>
                <div class="detailcontainer">
                    <div class="teamdetail">
                        <p class="summary"></p>
                        <img class="image" width="185" height="104" />
                    </div>
                    <div class="typedetailcontainer">
                        <div class="duration">
                            <div class="label">Duration:</div>
                            <div class="value"></div>
                        </div>
                    </div>
                </div>
                <br/><br/>
            </div>                                                        
        </div>
    </body>
</html>