Skip to content

Commit

Permalink
Make movie scores its own component
Browse files Browse the repository at this point in the history
  • Loading branch information
Stuk committed Dec 7, 2012
1 parent a382cf0 commit 45f6a50
Show file tree
Hide file tree
Showing 7 changed files with 173 additions and 127 deletions.
31 changes: 3 additions & 28 deletions ui/details.reel/details.css
Original file line number Diff line number Diff line change
Expand Up @@ -17,31 +17,21 @@
white-space: nowrap;
}

.details .score {
margin: 0 30px 0 2px;
padding: 4px 0px;
color: hsl(0,0%,100%);
}
.details .score:last-child {
margin: 0 0px 0 2px;
}

.scroller {
.details .scroller {
width: 650px;
margin: 0 auto;
height: 120px;
}

.description {
.details .description {
margin: 0;
text-align: left;
font-size: 16px;
line-height: 20px;

}


.action-buttons {
.details .action-buttons {
position: absolute;
top: 88px;
right: 40px;
Expand All @@ -65,18 +55,3 @@
.details .montage-Button:active {
background-color: hsl(210,100%,40%);
}


.rt-icon {
display: inline-block;
margin-left: 2px;
width: 25px;
height: 25px;
vertical-align: bottom;
background-size: 25px auto;
background-image: url(rt_lg.png);
background-repeat: no-repeat;
}



59 changes: 10 additions & 49 deletions ui/details.reel/details.html
Original file line number Diff line number Diff line change
Expand Up @@ -55,26 +55,6 @@
}
},

"dates": {
"prototype": "montage/ui/dynamic-text.reel",
"properties": {
"element": {"#": "dates-content"}
},
"bindings": {
"value": {"<-": "@owner.data.release_dates.theater" }
}
},

"runtime": {
"prototype": "montage/ui/dynamic-text.reel",
"properties": {
"element": {"#": "runtime-content"}
},
"bindings": {
"value": {"<-": "@owner.data.runtime" }
}
},

"rentButton": {
"prototype": "montage/ui/button.reel",
"properties": {
Expand All @@ -101,39 +81,27 @@
]
},

"audienceScore": {
"prototype": "montage/ui/dynamic-text.reel",
"scroller": {
"prototype": "montage/ui/scroller.reel",
"properties": {
"element": {"#": "audience-score-content"}
},
"bindings": {
"value": {"<-": "@owner.data.ratings.audience_score" }
"element": {"#": "scroller"},
"hasMomentum": true
}
},

"criticsScore": {
"prototype": "montage/ui/dynamic-text.reel",
"moviescores": {
"prototype": "ui/moviescores.reel",
"properties": {
"element": {"#": "critics-score-content"}
"element": {"#": "moviescores"}
},
"bindings": {
"value": {"<-": "@owner.data.ratings.critics_score" }
}
},

"scroller": {
"prototype": "montage/ui/scroller.reel",
"properties": {
"element": {"#": "scroller"},
"hasMomentum": true
"data": {"<-": "@owner.data" }
}
},

"owner": {
"properties": {
"element": {"#": "details"},
"cImage": {"#": "c-image"},
"aImage": {"#": "a-image"}
"element": {"#": "details"}
}
}
}
Expand All @@ -145,14 +113,7 @@

<section>
<h2 data-montage-id="title" class="title"></h2>
<p>
<time data-montage-id="dates-content" class="score"></time>
Runtime <span data-montage-id="runtime-content" class="score"></span>
Audience <span data-montage-id="a-image" class="rt-icon icon-audience"></span>
<span data-montage-id="audience-score-content" class="score"></span>
Critics <span data-montage-id="c-image" class="rt-icon icon-critics"></span>
<span data-montage-id="critics-score-content" class="score"></span>
</p>
<p data-montage-id="moviescores"></p>
<div data-montage-id="scroller" class="scroller">
<p data-montage-id="description" class="description"></p>
</div>
Expand Down
51 changes: 1 addition & 50 deletions ui/details.reel/details.js
Original file line number Diff line number Diff line change
Expand Up @@ -32,56 +32,7 @@ var Montage = require("montage/core/core").Montage,
Component = require("montage/ui/component").Component;

exports.Details = Montage.create(Component, {
_data: {
value: null
},

data: {
set: function(val){
this._data = val;
this.needsDraw = true;
},
get: function(){
return this._data;
}
},

draw: {
value: function(){
if( this.data ){
var audience = this.data.ratings.audience_rating,
critics = this.data.ratings.critics_rating;

if( audience == "Fresh" ){
this.aImage.style.backgroundPosition = '0px 0px'
}else if( audience == "Rotten" ){
this.aImage.style.backgroundPosition = '0px -25px'
}else if( audience == "Certified Fresh" ){
this.aImage.style.backgroundPosition = '0px -50px'
}else if( audience == "Upright" ){
this.aImage.style.backgroundPosition = '0px -75px'
}else if( audience == "Spilled" ){
this.aImage.style.backgroundPosition = '0px -125px'
}else{
this.aImage.style.backgroundPosition = '0px -100px'
}

if( critics == "Fresh" ){
this.cImage.style.backgroundPosition = '0px 0px'
}else if( critics == "Rotten" ){
this.cImage.style.backgroundPosition = '0px -25px'
}else if( critics == "Certified Fresh" ){
this.cImage.style.backgroundPosition = '0px -50px'
}else if( critics == "Upright" ){
this.cImage.style.backgroundPosition = '0px -75px'
}else if( critics == "Spilled" ){
this.cImage.style.backgroundPosition = '0px -125px'
}else{
this.cImage.style.backgroundPosition = '0px -100px'
}
}
}
},
data: { value: null },

handleRentButtonAction: {
value: function() {
Expand Down
30 changes: 30 additions & 0 deletions ui/moviescores.reel/moviescores.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
/* @override http://localhost:8082/montage-projects/ui/moviescores.reel/moviescores.css */

.moviescores {
position: relative;
text-align: center;
color: hsl(0,0%,60%);
}

.moviescores .score {
margin: 0 30px 0 2px;
padding: 4px 0px;
color: hsl(0,0%,100%);
}
.moviescores .score:last-child {
margin: 0 0px 0 2px;
}

.moviescores .rt-icon {
display: inline-block;
margin-left: 2px;
width: 25px;
height: 25px;
vertical-align: bottom;
background-size: 25px auto;
background-image: url(rt_lg.png);
background-repeat: no-repeat;
}



73 changes: 73 additions & 0 deletions ui/moviescores.reel/moviescores.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,73 @@
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="moviescores.css">

<script type="text/montage-serialization">
{

"dates": {
"prototype": "montage/ui/dynamic-text.reel",
"properties": {
"element": {"#": "dates-content"}
},
"bindings": {
"value": {"<-": "@owner.data.release_dates.theater" }
}
},

"runtime": {
"prototype": "montage/ui/dynamic-text.reel",
"properties": {
"element": {"#": "runtime-content"}
},
"bindings": {
"value": {"<-": "@owner.data.runtime" }
}
},

"audienceScore": {
"prototype": "montage/ui/dynamic-text.reel",
"properties": {
"element": {"#": "audience-score-content"}
},
"bindings": {
"value": {"<-": "@owner.data.ratings.audience_score" }
}
},

"criticsScore": {
"prototype": "montage/ui/dynamic-text.reel",
"properties": {
"element": {"#": "critics-score-content"}
},
"bindings": {
"value": {"<-": "@owner.data.ratings.critics_score" }
}
},

"owner": {
"properties": {
"element": {"#": "moviescores"},
"cImage": {"#": "c-image"},
"aImage": {"#": "a-image"}
}
}
}
</script>
</head>
<body>
<div id="moviescores" class="moviescores">
<div data-montage-id="scores-container" class="scores-container">
<p>
<time data-montage-id="dates-content" class="score"></time>
Runtime <span data-montage-id="runtime-content" class="score"></span>
Audience <span data-montage-id="a-image" class="rt-icon icon-audience"></span>
<span data-montage-id="audience-score-content" class="score"></span>
Critics <span data-montage-id="c-image" class="rt-icon icon-critics"></span>
<span data-montage-id="critics-score-content" class="score"></span>
</p>
</div>
</div>
</body>
</html>
56 changes: 56 additions & 0 deletions ui/moviescores.reel/moviescores.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
var Montage = require("montage/core/core").Montage,
Component = require("montage/ui/component").Component;

exports.Moviescores = Montage.create(Component, {
_data: {
value: null
},

data: {
set: function(val){
this._data = val;
this.needsDraw = true;
},
get: function(){
return this._data;
}
},

draw: {
value: function(){
if( this.data ){
var audience = this.data.ratings.audience_rating,
critics = this.data.ratings.critics_rating;

if( audience == "Fresh" ){
this.aImage.style.backgroundPosition = '0px 0px'
}else if( audience == "Rotten" ){
this.aImage.style.backgroundPosition = '0px -25px'
}else if( audience == "Certified Fresh" ){
this.aImage.style.backgroundPosition = '0px -50px'
}else if( audience == "Upright" ){
this.aImage.style.backgroundPosition = '0px -75px'
}else if( audience == "Spilled" ){
this.aImage.style.backgroundPosition = '0px -125px'
}else{
this.aImage.style.backgroundPosition = '0px -100px'
}

if( critics == "Fresh" ){
this.cImage.style.backgroundPosition = '0px 0px'
}else if( critics == "Rotten" ){
this.cImage.style.backgroundPosition = '0px -25px'
}else if( critics == "Certified Fresh" ){
this.cImage.style.backgroundPosition = '0px -50px'
}else if( critics == "Upright" ){
this.cImage.style.backgroundPosition = '0px -75px'
}else if( critics == "Spilled" ){
this.cImage.style.backgroundPosition = '0px -125px'
}else{
this.cImage.style.backgroundPosition = '0px -100px'
}
}
}
}

});
File renamed without changes

0 comments on commit 45f6a50

Please sign in to comment.