Skip to content

Commit b3b4dd4

Browse files
prateekjadhwaniprateekjadhwani
committed
Merge pull request #39 from prateekjadhwani/new-episode
New episode element
2 parents 856b31f + 7e714f4 commit b3b4dd4

File tree

8 files changed

+85
-21
lines changed

8 files changed

+85
-21
lines changed

‎app/content.json‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
[
2+
{
3+
"title": "53: Diving into Angular 2",
4+
"title2": "53: Diving into Angular 2"
5+
},
6+
{
7+
"title": "53: Diving into Angular 2",
8+
"title2": "53: Diving into Angular 2"
9+
}
10+
]

‎app/elements/elements.html‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,8 @@
1414
<link rel="import" href="../bower_components/iron-pages/iron-pages.html">
1515
<link rel="import" href="../bower_components/iron-selector/iron-selector.html">
1616
<link rel="import" href="../bower_components/iron-image/iron-image.html">
17+
<link rel="import" href="../bower_components/iron-ajax/iron-ajax.html">
18+
<link rel="import" href="../bower_components/iron-localstorage/iron-localstorage.html">
1719

1820
<!-- Paper elements -->
1921
<link rel="import" href="../bower_components/paper-drawer-panel/paper-drawer-panel.html">
@@ -37,12 +39,14 @@
3739

3840
<!-- Other public elements -->
3941
<link rel="import" href="../bower_components/universal-footer/universal-footer.html" />
42+
<link rel="import" href="../bower_components/podcast-player/podcast-player.html" />
4043

4144
<!-- Add your elements here -->
4245
<link rel="import" href="../styles/app-theme.html">
4346
<link rel="import" href="new-episode/new-episode.html">
4447
<link rel="import" href="previous-episodes/previous-episodes.html">
4548
<link rel="import" href="about-us/about-us.html">
4649

50+
4751
<!-- Configure your routes here -->
4852
<link rel="import" href="routing.html">

‎app/elements/new-episode/new-episode.html‎

Lines changed: 45 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -5,22 +5,59 @@
55
:host {
66
height: 100%;
77
width: 100%;
8+
display: block;
9+
position: relative;
10+
}
11+
.playerloc {
12+
position: relative;
13+
display: block;
14+
height: 150px;
15+
margin-top: 50px;
16+
}
17+
podcast-player {
18+
position: absolute;
19+
bottom: 0;
20+
}
21+
.episode-info {
22+
padding: 50px;
823
}
924
</style>
1025
<template>
11-
<h1>New Episode Page</h1>
12-
<p>New Episode Page</p>
13-
<p>New Episode Page</p>
14-
<p>New Episode Page</p>
15-
<p>New Episode Page</p>
16-
<p>New Episode Page</p>
17-
<p>New Episode Page</p>
26+
<iron-localstorage name="content" value="{{localstoragecontent}}" autoSaveDisabled="true"></iron-localstorage>
27+
<paper-material class="episode-info" elevation="0">
28+
<h1>{{content.title}}</h1>
29+
<p>New Episode Page</p>
30+
<p>New Episode Page</p>
31+
<p>New Episode Page</p>
32+
<p>New Episode Page</p>
33+
<p>New Episode Page</p>
34+
</paper-material>
35+
<div class="playerloc">
36+
<podcast-player
37+
src="http://traffic.libsyn.com/thewebplatform/episode-53_diving-into-angular-2.mp3"
38+
name="Diving into Angular 2"
39+
coverart="http://assets.libsyn.com/content/9454132"
40+
episode="53"></podcast-player>
41+
</div>
1842
</template>
1943
</dom-module>
2044
<script>
2145
( function() {
2246
Polymer({
23-
is: 'new-episode'
47+
is: 'new-episode',
48+
properties: {
49+
localstoragecontent: {
50+
type: Object,
51+
observer: '_updateContent'
52+
},
53+
content: {
54+
type: Object,
55+
value: []
56+
}
57+
},
58+
_updateContent: function () {
59+
this.content = this.localstoragecontent[0];
60+
}
2461
});
2562
})();
2663
</script>

‎app/elements/routing.html‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
<script>
1313
window.addEventListener('WebComponentsReady', function() {
1414

15-
// We use Page.js for routing. This is a Micro
15+
// We use Page.js for routing. This is a Micro
1616
// client-side router inspired by the Express router
1717
// More info: https://visionmedia.github.io/page.js/
1818
page('/', function () {
@@ -36,6 +36,5 @@
3636
page({
3737
hashbang: true
3838
});
39-
4039
});
4140
</script>

‎app/index.html‎

Lines changed: 13 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -57,13 +57,17 @@
5757

5858
<body unresolved class="fullbleed layout vertical">
5959
<span id="browser-sync-binding"></span>
60-
<template is="dom-bind" id="app">
6160

61+
<template is="dom-bind" id="app">
6262
<paper-header-panel main mode="standard" class="tall">
63-
63+
<iron-ajax id="contentservice"
64+
auto
65+
url="content.json"
66+
handle-as="json"
67+
on-response="handleContentResponse"></iron-ajax>
6468
<!-- Main Toolbar -->
6569
<paper-toolbar id="mainToolbar" class="tall layout vertical">
66-
70+
6771
<span class="flex"></span>
6872

6973
<!-- Toolbar icons -->
@@ -102,7 +106,12 @@ <h3 class="paper-font-display2 flex center">The Web Platform Today</h3>
102106

103107
<div multicol class="credits">
104108
<div col center>
105-
Made with <iron-icon class="crimson" icon="icons:favorite"></iron-icon> and <iron-icon class="mediumpurple" icon="icons:polymer"></iron-icon> by <paper-button raised class="webplatform-button" onclick="window.open('https://github.com/orgs/thewebplatform/people', '_blank');">The Web Platform Team</paper-button>
109+
<div row>
110+
Made with <iron-icon class="crimson" icon="icons:favorite"></iron-icon> and <iron-icon class="mediumpurple" icon="icons:polymer"></iron-icon> by
111+
</div>
112+
<div row>
113+
<paper-button raised class="webplatform-button" onclick="window.open('https://github.com/orgs/thewebplatform/people', '_blank');">The Web Platform Today Team</paper-button>
114+
</div>
106115
</div>
107116
</div>
108117
<div copyright-center>© 2015 The Web Platform Today</div>

‎app/scripts/app.js‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,9 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
1313
// Grab a reference to our auto-binding template
1414
// and give it some initial binding values
1515
// Learn more about auto-binding templates at http://goo.gl/Dx1u2g
16-
var app = document.querySelector('#app');
16+
var app = document.querySelector('#app'),
17+
content = [];
18+
1719

1820
app.displayInstalledToast = function() {
1921
document.querySelector('#caching-complete').show();
@@ -38,4 +40,9 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
3840
}
3941
};
4042

43+
// For Content service
44+
app.handleContentResponse = function(e, detail) {
45+
content = e.detail.response;
46+
localStorage.setItem("content", JSON.stringify(content));
47+
};
4148
})(document);

‎app/styles/app-theme.html‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -201,10 +201,6 @@
201201
left: 0px !important;
202202
};
203203
}
204-
205-
iron-pages {
206-
padding: 48px 62px;
207-
}
208204

209205
.multicol.universal-footer [multicol] > [col] {
210206
flex: 1;

‎bower.json‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,10 +24,12 @@
2424
"neon-elements": "PolymerElements/neon-elements#1.0.0",
2525
"page": "visionmedia/page.js#~1.6.3",
2626
"universal-footer": "*",
27-
"podcast-player": "~1.0.1",
27+
"podcast-player": "~1.0.5",
2828
"iron-image": "PolymerElements/iron-image#~1.0.2",
2929
"paper-tabs": "PolymerElements/paper-tabs#~1.0.1",
30-
"paper-button": "PolymerElements/paper-button#~1.0.3"
30+
"paper-button": "PolymerElements/paper-button#~1.0.3",
31+
"iron-ajax": "PolymerElements/iron-ajax#~1.0.3",
32+
"iron-localstorage": "PolymerElements/iron-localstorage#~1.0.4"
3133
},
3234
"devDependencies": {
3335
"web-component-tester": "*",

0 commit comments

Comments
 (0)