Skip to content

Commit 6ebbf8a

Browse files
ritz078ritz078
committed
added handlebars for templating
1 parent 1a033b1 commit 6ebbf8a

4 files changed

Lines changed: 98 additions & 84 deletions

File tree

‎app/examples.html‎

Lines changed: 26 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -44,63 +44,32 @@
4444
</nav>
4545
</header>
4646
<div class="container">
47-
<div class="example basic">
48-
<h4>Basic Example</h4>
49-
<a href="http://codepen.io/ritz078/pen/QjZded" target="_blank">
50-
<button class="codepen"><i class="fa fa-codepen"></i> &nbsp;Edit on CodePen</button>
51-
</a>
52-
<button class="codepen code-toggle"><i class="fa fa-code"></i></button>
53-
<div class="demo-wrap">
54-
<div class="text">
55-
<span class="tag">&lt;div id="<b>basic-result</b>"&gt;</span>
56-
Pellentesque habitant morbi tristique senectus :smile: et netus buff.ly/1NU7Mnk et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, http://riteshkr.com/embed.js tempor :) sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies bit.ly/1NSYCaf mi vitae est. Mauris placerat eleifend leo.
57-
58-
<span class="tag">&lt;/div&gt;</span>
59-
</div>
60-
<div class="code">
61-
<pre>
62-
<code>/*JAVASCRIPT*/
63-
var basicDemo = new EmbedJS({
64-
element: document.getElementById('basic-result')
65-
});
66-
basicDemo.render();
67-
</code></pre>
68-
</div>
69-
<div id="basic-result" class="result">
70-
Pellentesque habitant morbi tristique senectus :smile: et netus buff.ly/1NU7Mnk et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, http://riteshkr.com/embed.js tempor :) sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies bit.ly/1NSYCaf mi vitae est. Mauris placerat eleifend leo.
71-
</div>
47+
</div>
48+
</body>
49+
<script id="template" type="text/x-handlebars-template">
50+
{{#each data}}
51+
<div class="example {{id}}" id="{{id}}">
52+
<h4>{{title}}</h4>
53+
<a href="{{codepen}}" target="_blank">
54+
<button class="codepen"><i class="fa fa-codepen"></i> &nbsp;Edit on CodePen</button>
55+
</a>
56+
<button class="codepen code-toggle"><i class="fa fa-code"></i></button>
57+
<div class="demo-wrap">
58+
<div class="text">
59+
<span class="tag">&lt;div id="<b>{{id}}-text</b>"&gt;</span> {{text}}
60+
<span class="tag">&lt;/div&gt;</span>
7261
</div>
73-
</div>
74-
75-
<div class="example youtube" id="youtube-example">
76-
<h4>Basic Example</h4>
77-
<a href="http://codepen.io/ritz078/pen/QjZded" target="_blank">
78-
<button class="codepen"><i class="fa fa-codepen"></i> &nbsp;Edit on CodePen</button>
79-
</a>
80-
<button class="codepen code-toggle"><i class="fa fa-code"></i></button>
81-
<div class="demo-wrap">
82-
<div class="text">
83-
<span class="tag">&lt;div id="<b>basic-result</b>"&gt;</span>
84-
Pellentesque habitant morbi tristique senectus :smile: et netus buff.ly/1NU7Mnk et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, http://riteshkr.com/embed.js tempor :) sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies bit.ly/1NSYCaf mi vitae est. Mauris placerat eleifend leo.
85-
86-
<span class="tag">&lt;/div&gt;</span>
87-
</div>
88-
<div class="code">
89-
<pre>
90-
<code>/*JAVASCRIPT*/
91-
var basicDemo = new EmbedJS({
92-
element: document.getElementById('basic-result')
93-
});
94-
basicDemo.render();
95-
</code></pre>
96-
</div>
97-
<div id="youtube" class="result">
98-
Pellentesque habitant morbi tristique senectus :smile: et netus buff.ly/1NU7Mnk et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, http://riteshkr.com/embed.js tempor :) sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies bit.ly/1NSYCaf mi vitae est. Mauris placerat eleifend leo.
99-
</div>
62+
<div class="code">
63+
<pre><code>{{jsCode}}</code></pre>
64+
</div>
65+
<div id="{{id}}-text" class="result">
66+
{{text}}
10067
</div>
10168
</div>
10269
</div>
103-
</body>
70+
{{/each}}
71+
</script>
72+
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.4/handlebars.min.js"></script>
10473
<script src="/bower_components/jquery/dist/jquery.js"></script>
10574
<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.5/marked.min.js"></script>
10675
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.4/highlight.min.js"></script>
@@ -115,7 +84,7 @@ <h4>Basic Example</h4>
11584
=======================================*/
11685

11786
var basicDemo = new EmbedJS({
118-
element: document.getElementById('basic-result')
87+
element: document.getElementById('basic-text')
11988
});
12089
basicDemo.render();
12190

@@ -125,14 +94,13 @@ <h4>Basic Example</h4>
12594
= Youtube video =
12695
=====================================*/
12796
var ytDemo = new EmbedJS({
128-
element: document.getElementById('youtube'),
129-
googleAuthKey : 'AIzaSyCqFouT8h5DKAbxlrTZmjXEmNBjC69f0ts'
97+
element: document.getElementById('youtube-text'),
98+
googleAuthKey: 'AIzaSyCqFouT8h5DKAbxlrTZmjXEmNBjC69f0ts'
13099
});
131-
// ytDemo.render();
100+
ytDemo.render();
132101

133102

134103
/*===== End of Youtube video ======*/
135-
136104
</script>
137105

138106
</html>

‎app/scripts/examples.js‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,36 @@
1+
var context = {
2+
data: [{
3+
'id': 'basic',
4+
'title':'Basic Example',
5+
'codepen':'http://codepen.io/ritz078/pen/QjZded',
6+
'text':'Pellentesque habitant morbi tristique senectus :smile: et netus buff.ly/1NU7Mnk et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, http://riteshkr.com/embed.js tempor :) sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies bit.ly/1NSYCaf mi vitae est. Mauris placerat eleifend leo.',
7+
'jsCode':
8+
`var basicDemo = new EmbedJS({
9+
element: document.getElementById('basic-result')
10+
});
11+
basicDemo.render();`
12+
},{
13+
'id': 'youtube',
14+
'title': 'Youtube with Preview',
15+
'codepen': 'http://codepen.io/ritz078/pen/JYmJML',
16+
'text': 'Pellentesque habitant morbi tristique senectus :smile: et netus buff.ly/1NU7Mnk et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, http://riteshkr.com/embed.js tempor :) sit amet, https://www.youtube.com/watch?v=sMXMKz7TunQ ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies bit.ly/1NSYCaf mi vitae est. Mauris placerat eleifend leo.',
17+
'jsCode':
18+
`var ytDemo = new EmbedJS({
19+
element: document.getElementById('youtube'),
20+
googleAuthKey : 'xxxxxxxxxxxxxxx'
21+
});
22+
ytDemo.render();`
23+
}]
24+
25+
}
26+
27+
let source = $('#template').html();
28+
let template = Handlebars.compile(source);
29+
let html = template(context);
30+
31+
$('.container').append(html);
32+
33+
134
$('.code-toggle').click(function() {
235
let $parent = $(this).parent('.example')
336
$parent.find('.tag').fadeToggle().parent('.text').toggleClass('opened')

‎app/scripts/main.js‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ class Banner {
2020
];
2121

2222
this.strings = [
23+
'MARKDOWN',
2324
'SOUNDCLOUD.',
2425
'MP4 VIDEOS.',
2526
'SPOTIFY.',
@@ -68,17 +69,17 @@ class Banner {
6869
let $typed = $('.typed');
6970
let self = this;
7071
setInterval(() => {
71-
$typed.fadeOut('slow',function(){
72+
$typed.fadeOut('slow', function() {
7273
$(this).html(self.strings[i]).fadeIn();
7374
});
74-
i === this.strings.length ? i=0 : i++;
75+
i === this.strings.length ? i = 0 : i++;
7576
}, 2000);
7677
}
7778
}
7879

7980
var banner = new Banner();
8081
banner.process();
8182

82-
$(window).resize(function(){
83+
$(window).resize(function() {
8384
banner.process();
8485
})

‎app/styles/examples.scss‎

Lines changed: 35 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -11,31 +11,42 @@ header {
1111
padding-top: 80px;
1212
}
1313

14-
iframe {
15-
border: 1px solid #eee;
16-
margin: 30px 0;
17-
}
18-
1914
.text {
2015
color: #555;
2116
background-color: #f8f8f8;
22-
.tag{
23-
display: none;
24-
}
25-
span{
26-
font-weight: bold;
27-
b{
28-
color:green;
29-
}
17+
span {
18+
font-weight: bold;
19+
b {
20+
color: green;
21+
}
3022
}
3123
}
3224

33-
.opened{
34-
background-color: #fff;
25+
.tag {
26+
display: none;
3527
}
3628

37-
.example{
38-
margin-bottom: 50px;
29+
.html-tag,
30+
.js-tag {
31+
position: absolute;
32+
right: 10px;
33+
background-color: #008AEC;
34+
padding: 0px 10px;
35+
bottom: 10px;
36+
color: #fff;
37+
border-radius: 2px;
38+
text-transform: uppercase;
39+
}
40+
.js-tag{
41+
background-color: #B7A000;
42+
}
43+
44+
.opened {
45+
background-color: #fff;
46+
}
47+
48+
.example {
49+
margin-bottom: 50px;
3950
}
4051

4152
.demo-wrap {
@@ -44,9 +55,9 @@ iframe {
4455
width: 100%;
4556
float: none;
4657
overflow: hidden;
47-
48-
div {
58+
&>div {
4959
padding: 20px;
60+
position: relative;
5061
}
5162
}
5263

@@ -69,8 +80,9 @@ h4 {
6980
background-color: #000;
7081
color: #fff;
7182
}
72-
&:active,&:focus{
73-
color:#fff;
83+
&:active,
84+
&:focus {
85+
color: #fff;
7486
}
7587
}
7688

@@ -79,8 +91,8 @@ code {
7991
font-family: consolas;
8092
}
8193

82-
pre{
83-
margin-bottom: 0;
94+
pre {
95+
margin-bottom: 0;
8496
}
8597

8698
.html .hljs {

0 commit comments

Comments
 (0)