Skip to content

Instantly share code, notes, and snippets.

@elreimundo

elreimundo/picker.css

Created March 2, 2014 21:01
Show Gist options
  • Save elreimundo/9313839 to your computer and use it in GitHub Desktop.
Save elreimundo/9313839 to your computer and use it in GitHub Desktop.
Download ZIP
A website to help demonstrate object-oriented design, created as part of a workshop I led for students at Dev Bootcamp
Raw
picker.css
body {
background-image: url('http://pcmreviews.com/news/wp-content/uploads/2012/01/Red-carpet.jpg');
background-size: cover;
background-repeat: no-repeat;
background-position: center;
color: white;
font-family: 'Parisienne', cursive;
}
.header{
text-align: center;
font-size: 2em;
width: 600px;
border-radius: 10px;
margin: 0 auto;
}
.glowing{
box-shadow: 0px 0px 10px yellow;
}
.main{
width: 800px;
margin: 0 auto;
background-color: rgba(256,256,256,0.7);
border-radius: 10px;
color: black;
padding: 10px;
text-align: center;
}
.nominee{
outline: 1px solid #777;
padding: 10px;
}
img.poster{
width: 130px;
height: 208px;
border:2px solid yellow;
}
ul {
list-style-type: none;
list-style-position: inside;
padding: 0;
}
li {
text-align: center;
}
.category-container{
text-align: left;
display: block;
width: 539;
}
.hovered{
background-color: rgba(50,150,50,0.2);
outline: 1px solid #494;
}
.selected{
background-color: rgba(50,150,50,0.6);
outline: 2px solid #262;
}
.hidden {
display:none;
}
Raw
picker.html
<!DOCTYPE html>
<html>
<head>
<title>
JavaScript Oscar Picker
</title>
<link href='http://fonts.googleapis.com/css?family=Parisienne' rel='stylesheet' type='text/css'>
<link rel='stylesheet' type='text/css' href='picker.css'>
</head>
<body>
<div class='hidden'>
<!-- preload images so that mouse hover is not the first call to the img -->
<img src='http://a.oscar.go.com/service/image/index/id/6dc44681-9aff-4db7-80af-13eb6314f7c0/dim/261x417.jpg'>
<img src='http://a.oscar.go.com/service/image/index/id/5d64bbed-8f06-4b3e-b3b7-a5be00e4c9de/dim/261x417.jpg'>
<img src='http://a.oscar.go.com/service/image/index/id/f663269e-827c-4c53-a64b-50d00fbdd10e/dim/261x417.jpg'>
<img src='http://a.oscar.go.com/service/image/index/id/d8e04815-2ecc-4e2b-8f14-712da10f20ee/dim/261x417.jpg'>
<img src='http://a.oscar.go.com/service/image/index/id/e3d536a7-21fa-4d48-ad65-a28d0e67b1d3/dim/261x417.jpg'>
<img src='http://blog.geektechbranding.com/wp-content/uploads/2014/02/Academy-Award-Oscar-.jpg'>
<img src='http://a.oscar.go.com/service/image/index/id/10973c5b-3f6e-4349-91cd-63f60bbfef3b/dim/261x417.jpg'>
<img src='http://a.oscar.go.com/service/image/index/id/e06950ca-0096-45a3-91c2-ed07838bf2a6/dim/261x417.jpg'>
<img src='http://a.oscar.go.com/service/image/index/id/21c69e4f-6cb2-4786-90d0-bb8a7f3a920d/dim/261x417.jpg'>
<img src= 'http://a.oscar.go.com/service/image/index/id/5b702203-5cf9-4b98-8b06-6dbbd3756e70/dim/261x417.jpg'>
</div>
<div class='header glowing'>
<h1>Oscar Picker</h1>
</div>
<div class='main'>
<img class='poster' src='http://blog.geektechbranding.com/wp-content/uploads/2014/02/Academy-Award-Oscar-.jpg'>
<div class='category-container'>
<ul class='nominees'>
<!-- our nominees will be appended here -->
</ul>
</div>
</div>
<script src='picker.js'></script>
</body>
</html>
Raw
picker.js
;(function(){
var POSTER = document.querySelector('.poster');
var images = {
amHustle: 'http://a.oscar.go.com/service/image/index/id/6dc44681-9aff-4db7-80af-13eb6314f7c0/dim/261x417.jpg',
captain: 'http://a.oscar.go.com/service/image/index/id/5d64bbed-8f06-4b3e-b3b7-a5be00e4c9de/dim/261x417.jpg',
dallas: 'http://a.oscar.go.com/service/image/index/id/f663269e-827c-4c53-a64b-50d00fbdd10e/dim/261x417.jpg',
gravity: 'http://a.oscar.go.com/service/image/index/id/d8e04815-2ecc-4e2b-8f14-712da10f20ee/dim/261x417.jpg',
her: 'http://a.oscar.go.com/service/image/index/id/e3d536a7-21fa-4d48-ad65-a28d0e67b1d3/dim/261x417.jpg',
oscar: 'http://blog.geektechbranding.com/wp-content/uploads/2014/02/Academy-Award-Oscar-.jpg',
nebraska: 'http://a.oscar.go.com/service/image/index/id/10973c5b-3f6e-4349-91cd-63f60bbfef3b/dim/261x417.jpg',
philomena: 'http://a.oscar.go.com/service/image/index/id/e06950ca-0096-45a3-91c2-ed07838bf2a6/dim/261x417.jpg',
slave: 'http://a.oscar.go.com/service/image/index/id/21c69e4f-6cb2-4786-90d0-bb8a7f3a920d/dim/261x417.jpg',
wolf: 'http://a.oscar.go.com/service/image/index/id/5b702203-5cf9-4b98-8b06-6dbbd3756e70/dim/261x417.jpg'
};
var nominees = {
amHustle: 'American Hustle',
captain: 'Captain Philips',
dallas: 'Dallas Buyers\' Club',
gravity: 'Gravity',
her: 'Her',
nebraska: 'Nebraska',
philomena: 'Philomena',
slave: '12 Years A Slave',
wolf: 'The Wolf Of Wall Street'
};
// class Selection
function Selection() {
this.bestPicture = undefined;
}
Selection.prototype.setSelection = function (text) {
this.bestPicture = text;
}
Selection.prototype.clearSelection = function() {
this.bestPicture = undefined;
}
Selection.prototype.isSelected = function() {
return !!this.bestPicture;
}
selection = new Selection
//class NomineeView
function NomineeView(text, key) {
NomineeView.nominees.push(this)
this.text = text;
this.key = key;
this.selected = false;
}
NomineeView.nominees = []
NomineeView.buildTemplate = function(queryString) {
// from a string like 'ul.thing li.a.b li.c.d'
// build <ul class='thing'><li class='a b'></li><li class='c d'></li></ul>
var elements = queryString.split(' ');
var outputElement;
for (var j = 0; j < elements.length; j++) {
var elClasses = elements[j].split('.');
var theElementType = elClasses[0];
var theElement = document.createElement(theElementType);
for (var i = 1; i < elClasses.length; i++) {
theElement.classList.add(elClasses[i]);
}
if (j === 0) {
outputElement = theElement;
}
else {
outputElement.appendChild(theElement);
}
}
return outputElement;
}
NomineeView.select = function(nominee) {
for (var i = 0; i < this.nominees.length; i++) {
this.nominees[i] === nominee ? nominee.select() : this.nominees[i].deselect();
}
POSTER.classList.toggle('has-selection',true);
selection.setSelection(nominee.key);
}
NomineeView.unHover = function() {
this.classList.remove('hovered');
}
// instance methods for NomineeView objects
NomineeView.prototype.setTemplate = function(queryString) {
this.template = NomineeView.buildTemplate(queryString);
this.template.innerText = this.text;
}
NomineeView.prototype.appendTo = function(queryString) {
document.querySelector(queryString).appendChild(this.template);
}
NomineeView.prototype.addListener = function(evtType, callback) {
this.template.addEventListener(evtType, callback);
}
NomineeView.prototype.hover = function() {
this.template.classList.add('hovered');
if (!POSTER.classList.contains('has-selection')) {
this.setImage();
}
}
NomineeView.prototype.pushSelect = function() {
this.selected ? this.deselect() : NomineeView.select(this);
}
NomineeView.prototype.deselect = function() {
this.selected = false;
POSTER.classList.toggle('has-selection', false);
this.template.classList.remove('selected');
selection.clearSelection();
}
NomineeView.prototype.select = function() {
this.selected = true
this.template.classList.add('selected');
this.setImage();
}
NomineeView.prototype.setImage = function() {
POSTER.src=images[this.key];
}
document.addEventListener('mouseover', function(e) {
var shouldTriggerChange = function(e) {
return !e.target.classList.contains('nominee') && !selection.isSelected()
}
if (shouldTriggerChange(e)) {
POSTER.src = images.oscar;
}
});
// finally ready to build all of the nominees
for (var key in nominees) {
var thisNominee = new NomineeView(nominees[key], key);
thisNominee.setTemplate('li.nominee');
thisNominee.addListener('mouseenter', thisNominee.hover.bind(thisNominee));
thisNominee.addListener('mouseleave', NomineeView.unHover);
thisNominee.addListener('click', thisNominee.pushSelect.bind(thisNominee));
thisNominee.appendTo('.nominees');
}
})();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment