archive/theorangeone.net-legacy
Archived
1
Fork 0
Code Releases Packages Activity

Linted (allthethings)

Browse source
This commit is contained in:
Jake Howard 2015-11-23 18:46:11 +00:00
parent b84a0a2c42
commit aa9b3747be
4 changed files with 60 additions and 59 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
static/src/js/app.js
View file

@ -1,12 +1,14 @@
/* global $ */
var React = require('react'); var React = require('react');
var ProjectImagesTypes = require('./components/project-images-types'); var ProjectImagesTypes = require('./components/project-images-types');
var ProjectImagesMain = require('./components/project-images-main'); var ProjectImagesMain = require('./components/project-images-main');
$(function() { // https://css-tricks.com/snippets/jquery/smooth-scrolling/ $(function() { // https://css-tricks.com/snippets/jquery/smooth-scrolling/
$('a[href*=#]:not([href=#])').click(function() { $('a[href*=#]:not([href=#])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) { if (location.pathname.replace(/^\//, '') === this.pathname.replace(/^\//, '')
&& location.hostname === this.hostname) {
var target = $(this.hash); var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']'); target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
if (target.length) { if (target.length) {
$('html,body').animate({ $('html,body').animate({
scrollTop: target.offset().top scrollTop: target.offset().top
@ -17,8 +19,8 @@ $(function() { // https://css-tricks.com/snippets/jquery/smooth-scrolling/
}); });
}); });
$(window).load(function(){ $(window).load(function() {
$(window).trigger('scroll').trigger('resize'); $(window).trigger('scroll').trigger('resize');
}); });
React.render(<ProjectImagesTypes />, document.getElementById('project-images-types')); React.render(<ProjectImagesTypes />, document.getElementById('project-images-types'));

13
static/src/js/components/project-image.js
View file

@ -1,6 +1,5 @@
var React = require('react'); var React = require('react');
var ReactBootstrap = require('react-bootstrap'); var ReactBootstrap = require('react-bootstrap');
var Row = ReactBootstrap.Row;
var Col = ReactBootstrap.Col; var Col = ReactBootstrap.Col;
var projectImage = React.createClass({ var projectImage = React.createClass({
@ -8,17 +7,17 @@ var projectImage = React.createClass({
var animationClass = this.props.isHovered ? 'zoomIn' : 'zoomOut'; var animationClass = this.props.isHovered ? 'zoomIn' : 'zoomOut';
return ( return (
<Col sm={4} className="project-image"> <Col sm={4} className="project-image">
<div className={"wrapper " + this.props.data.className}> <div className={'wrapper ' + this.props.data.className}>
<div className="project" <div className="project"
onMouseOver={this.props.onHover} onMouseOver={this.props.onHover}
onMouseLeave={this.props.onLeave} > onMouseLeave={this.props.onLeave} >
<div className={"animated " + animationClass}> <div className={'animated ' + animationClass}>
<h4>{this.props.data.title}</h4> <h4>{this.props.data.title}</h4>
<p>{this.props.data.text}</p> <p>{this.props.data.text}</p>
<a href={this.props.data.link} className="btn btn-default btn-small"> <a href={this.props.data.link} className="btn btn-default btn-small">
Find out more Find out more
</a> </a>
</div> </div>
</div> </div>
</div> </div>
</Col> </Col>
@ -26,4 +25,4 @@ var projectImage = React.createClass({
} }
}); });
module.exports = projectImage; module.exports = projectImage;

60
static/src/js/components/project-images-main.js
View file

@ -5,61 +5,61 @@ var ProjectImage = require('./project-image');
const DATA = [ const DATA = [
{ {
className: "college", className: 'college',
title: "College", title: 'College',
text: "My time at college was where I learnt most about programming, and discovered my skill and passion for it.", text: 'My time at college was where I learnt most about programming, and discovered my skill and passion for it.',
link: "", link: '',
}, },
{ {
className: "personal", className: 'personal',
title: "Personal", title: 'Personal',
text: "I write code just to write code, but sometimes it serves a purpose.", text: 'I write code just to write code, but sometimes it serves a purpose.',
link: "", link: '',
}, },
{ {
className: "work", className: 'work',
title: "Work", title: 'Work',
text: "I'm an apprentice software developer at Dabapps, and this is what I've done.", text: 'I\'m an apprentice software developer at Dabapps, and this is what I\'ve done.',
link: "", link: '',
}, },
{ {
className: "college", className: 'college',
title: "College", title: 'College',
text: "My time at college was where I learnt most about programming, and discovered my skill and passion for it.", text: 'My time at college was where I learnt most about programming, and discovered my skill and passion for it.',
link: "", link: '',
}, },
{ {
className: "personal", className: 'personal',
title: "Personal", title: 'Personal',
text: "I write code just to write code, but sometimes it serves a purpose.", text: 'I write code just to write code, but sometimes it serves a purpose.',
link: "", link: '',
}, },
{ {
className: "work", className: 'work',
title: "Work", title: 'Work',
text: "I'm an apprentice software developer at Dabapps, and this is what I've done.", text: 'I\'m an apprentice software developer at Dabapps, and this is what I\'ve done.',
link: "", link: '',
} }
]; ];
var projectImagesMain = React.createClass({ var projectImagesMain = React.createClass({
keys: [[1,2,3],[4,5,6]], keys: [[1, 2, 3], [4, 5, 6]],
getInitialState: function () { getInitialState: function () {
return { return {
hover: 0, hover: 0,
}; };
}, },
setHovering: function (key, evt) { setHovering: function (key) {
this.setState({hover: key}); this.setState({hover: key});
}, },
render: function () { render: function () {
var generate_image = function (key) { var generate_image = function (key) {
return ( return (
<ProjectImage isHovered={this.state.hover == key} <ProjectImage isHovered={this.state.hover === key}
data={DATA[key - 1]} data={DATA[key - 1]}
onHover={this.setHovering.bind(this, key)} onHover={this.setHovering.bind(this, key)}
onLeave={this.setHovering.bind(this, 0)} /> onLeave={this.setHovering.bind(this, 0)} />
); );
}.bind(this); }.bind(this);
@ -78,4 +78,4 @@ var projectImagesMain = React.createClass({
} }
}); });
module.exports = projectImagesMain; module.exports = projectImagesMain;

36
static/src/js/components/project-images-types.js
View file

@ -5,43 +5,43 @@ var ProjectImage = require('./project-image');
const DATA = [ const DATA = [
{ {
className: "college", className: 'college',
title: "College", title: 'College',
text: "My time at college was where I learnt most about programming, and discovered my skill and passion for it.", text: 'My time at college was where I learnt most about programming, and discovered my skill and passion for it.',
link: "", link: '',
}, },
{ {
className: "personal", className: 'personal',
title: "Personal", title: 'Personal',
text: "I write code just to write code, but sometimes it serves a purpose.", text: 'I write code just to write code, but sometimes it serves a purpose.',
link: "", link: '',
}, },
{ {
className: "work", className: 'work',
title: "Work", title: 'Work',
text: "I'm an apprentice software developer at Dabapps, and this is what I've done.", text: 'I\'m an apprentice software developer at Dabapps, and this is what I\'ve done.',
link: "", link: '',
} }
]; ];
var projectImagesTypes = React.createClass({ var projectImagesTypes = React.createClass({
keys: [1,2,3], keys: [1, 2, 3],
getInitialState: function () { getInitialState: function () {
return { return {
hover: 0, hover: 0,
}; };
}, },
setHovering: function (key, evt) { setHovering: function (key) {
this.setState({hover: key}); this.setState({hover: key});
}, },
render: function () { render: function () {
var images = this.keys.map(function (key) { var images = this.keys.map(function (key) {
return ( return (
<ProjectImage isHovered={this.state.hover == key} <ProjectImage isHovered={this.state.hover === key}
data={DATA[key - 1]} data={DATA[key - 1]}
onHover={this.setHovering.bind(this, key)} onHover={this.setHovering.bind(this, key)}
onLeave={this.setHovering.bind(this, 0)} /> onLeave={this.setHovering.bind(this, 0)} />
); );
}.bind(this)); }.bind(this));
@ -56,4 +56,4 @@ var projectImagesTypes = React.createClass({
} }
}); });
module.exports = projectImagesTypes; module.exports = projectImagesTypes;