Create a gist now

Instantly share code, notes, and snippets.

anonymous /component.css
Created Dec 3, 2013

title
@import url(http://fonts.googleapis.com/css?family=Lato:300);
body {
background-color: #2d2d2d;
font-family: 'Lato';
color: white;
font-weight: 300;
}
h1 {
font-weight: 300;
text-transform: uppercase;
font-size: 42px;
}
.navigation {
width: 200px;
text-transform: uppercase;
float: right;
}
.navigation ul {
background-color: #37383a;
list-style: none;
padding: 0;
margin: 0;
width: 100%;
}
.navigation .header {
padding: 15px;
background-color: #4e5053;
}
.navigation li {
padding: 15px;
}
.navigation .selected {
background-color: #9061b2;
}
.score {
font-size: 36px;
margin: 15px;
color: #afb3b9;
}
.title {
font-size: 18px;
}
.title a {
text-decoration: none;
color: #fff;
}
.author {
font-size: 16px;
}
.author span {
color: #afb3b9;
}
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>MFiddle</title>
<script type="text/montage-serialization">{
"owner": {
"properties": {
"element": {"#": "component"}
},
"bindings": {
"selectedSub": {"<-": "@rep.selection.0.data.url"}
}
},
"rep": {
"prototype": "montage/ui/repetition.reel",
"properties": {
"element": {"#": "items"},
"isSelectionEnabled": true
},
"bindings": {
"content": {"<-": "@owner.subs.sorted{-data.subscribers}"}
}
},
"item": {
"prototype": "montage/ui/text.reel",
"properties": {
"element": {"#": "item"}
},
"bindings": {
"value": {"<-": "@rep.objectAtCurrentIteration.data.display_name"}
}
},
"currentsub": {
"prototype": "montage/ui/text.reel",
"properties": {
"element": {"#": "currentsub"}
},
"bindings": {
"value": {"<-": "@rep.selection.0.data.display_name ?? 'Please Select a Sub'"}
}
},
"stories": {
"prototype": "montage/ui/repetition.reel",
"properties": {
"element": { "#": "stories" }
},
"bindings": {
"content": { "<-": "@owner.stories" }
}
},
"title": {
"prototype": "matte/ui/anchor.reel",
"properties": {
"element": { "#": "title" }
},
"bindings": {
"textContent": { "<-": "@stories.objectAtCurrentIteration.data.title" },
"href": { "<-": "@stories.objectAtCurrentIteration.data.url" }
}
},
"author": {
"prototype": "montage/ui/text.reel",
"properties": {
"element": { "#": "author" }
},
"bindings": {
"value": { "<-": "@stories.objectAtCurrentIteration.data.author" }
}
},
"score": {
"prototype": "montage/ui/text.reel",
"properties": {
"element": { "#": "score" }
},
"bindings": {
"value": { "<-": "@stories.objectAtCurrentIteration.data.score" }
}
}
}</script></head>
<body>
<div data-montage-id="component">
<h1 data-montage-id="currentsub"></h1>
<div class="navigation">
<div class="header">Navigation</div>
<ul data-montage-id="items">
<li data-montage-id="item"></li>
</ul>
</div>
<table data-montage-id="stories">
<tbody><tr>
<td>
<p class="score" data-montage-id="score"></p>
</td>
<td>
<p class="title"><a data-montage-id="title"></a></p>
<p class="author">Posted by <span data-montage-id="author"></span></p>
</td>
</tr></tbody>
</table>
</div>
</body>
</html>
var Component = require("montage/ui/component").Component;
exports.Owner = Component.specialize({
templateDidLoad: {
value: function() {
var cbname = "fn" + Date.now();
var script = document.createElement("script");
script.src = "http://www.reddit.com/reddits.json?jsonp=" + cbname;
var component = this;
window[cbname] = function(jsonData) {
component.subs = jsonData.data.children;
};
document.head.appendChild(script);
}
},
selectedSub: {
set: function(path) {
if (path) {
var cbname = "fn" + Date.now();
var script = document.createElement("script");
script.src = "http://www.reddit.com/" + path + ".json?sort=top&t=month&jsonp=" + cbname;
var component = this;
window[cbname] = function(jsonData) {
component.stories = jsonData.data.children;
};
document.head.appendChild(script);
}
}
},
subs: { value: [] },
stories: { value: [] }
});
{"version":1}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment