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 ProjectImagesTypes = require('./components/project-images-types');
var ProjectImagesMain = require('./components/project-images-main');
$(function() { // https://css-tricks.com/snippets/jquery/smooth-scrolling/
$('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);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top
@ -17,8 +19,8 @@ $(function() { // https://css-tricks.com/snippets/jquery/smooth-scrolling/
});
});
$(window).load(function(){
$(window).trigger('scroll').trigger('resize');
$(window).load(function() {
$(window).trigger('scroll').trigger('resize');
});
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 ReactBootstrap = require('react-bootstrap');
var Row = ReactBootstrap.Row;
var Col = ReactBootstrap.Col;
var projectImage = React.createClass({
@ -8,17 +7,17 @@ var projectImage = React.createClass({
var animationClass = this.props.isHovered ? 'zoomIn' : 'zoomOut';
return (
<Col sm={4} className="project-image">
<div className={"wrapper " + this.props.data.className}>
<div className="project"
<div className={'wrapper ' + this.props.data.className}>
<div className="project"
onMouseOver={this.props.onHover}
onMouseLeave={this.props.onLeave} >
<div className={"animated " + animationClass}>
<div className={'animated ' + animationClass}>
<h4>{this.props.data.title}</h4>
<p>{this.props.data.text}</p>
<a href={this.props.data.link} className="btn btn-default btn-small">
Find out more
</a>
</div>
</a>
</div>
</div>
</div>
</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 = [
{
className: "college",
title: "College",
text: "My time at college was where I learnt most about programming, and discovered my skill and passion for it.",
link: "",
className: 'college',
title: 'College',
text: 'My time at college was where I learnt most about programming, and discovered my skill and passion for it.',
link: '',
},
{
className: "personal",
title: "Personal",
text: "I write code just to write code, but sometimes it serves a purpose.",
link: "",
className: 'personal',
title: 'Personal',
text: 'I write code just to write code, but sometimes it serves a purpose.',
link: '',
},
{
className: "work",
title: "Work",
text: "I'm an apprentice software developer at Dabapps, and this is what I've done.",
link: "",
className: 'work',
title: 'Work',
text: 'I\'m an apprentice software developer at Dabapps, and this is what I\'ve done.',
link: '',
},
{
className: "college",
title: "College",
text: "My time at college was where I learnt most about programming, and discovered my skill and passion for it.",
link: "",
className: 'college',
title: 'College',
text: 'My time at college was where I learnt most about programming, and discovered my skill and passion for it.',
link: '',
},
{
className: "personal",
title: "Personal",
text: "I write code just to write code, but sometimes it serves a purpose.",
link: "",
className: 'personal',
title: 'Personal',
text: 'I write code just to write code, but sometimes it serves a purpose.',
link: '',
},
{
className: "work",
title: "Work",
text: "I'm an apprentice software developer at Dabapps, and this is what I've done.",
link: "",
className: 'work',
title: 'Work',
text: 'I\'m an apprentice software developer at Dabapps, and this is what I\'ve done.',
link: '',
}
];
var projectImagesMain = React.createClass({
keys: [[1,2,3],[4,5,6]],
keys: [[1, 2, 3], [4, 5, 6]],
getInitialState: function () {
return {
hover: 0,
};
},
setHovering: function (key, evt) {
setHovering: function (key) {
this.setState({hover: key});
},
render: function () {
var generate_image = function (key) {
return (
<ProjectImage isHovered={this.state.hover == key}
data={DATA[key - 1]}
onHover={this.setHovering.bind(this, key)}
<ProjectImage isHovered={this.state.hover === key}
data={DATA[key - 1]}
onHover={this.setHovering.bind(this, key)}
onLeave={this.setHovering.bind(this, 0)} />
);
}.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 = [
{
className: "college",
title: "College",
text: "My time at college was where I learnt most about programming, and discovered my skill and passion for it.",
link: "",
className: 'college',
title: 'College',
text: 'My time at college was where I learnt most about programming, and discovered my skill and passion for it.',
link: '',
},
{
className: "personal",
title: "Personal",
text: "I write code just to write code, but sometimes it serves a purpose.",
link: "",
className: 'personal',
title: 'Personal',
text: 'I write code just to write code, but sometimes it serves a purpose.',
link: '',
},
{
className: "work",
title: "Work",
text: "I'm an apprentice software developer at Dabapps, and this is what I've done.",
link: "",
className: 'work',
title: 'Work',
text: 'I\'m an apprentice software developer at Dabapps, and this is what I\'ve done.',
link: '',
}
];
var projectImagesTypes = React.createClass({
keys: [1,2,3],
keys: [1, 2, 3],
getInitialState: function () {
return {
hover: 0,
};
},
setHovering: function (key, evt) {
setHovering: function (key) {
this.setState({hover: key});
},
render: function () {
var images = this.keys.map(function (key) {
return (
<ProjectImage isHovered={this.state.hover == key}
data={DATA[key - 1]}
onHover={this.setHovering.bind(this, key)}
<ProjectImage isHovered={this.state.hover === key}
data={DATA[key - 1]}
onHover={this.setHovering.bind(this, key)}
onLeave={this.setHovering.bind(this, 0)} />
);
}.bind(this));
@ -56,4 +56,4 @@ var projectImagesTypes = React.createClass({
}
});
module.exports = projectImagesTypes;
module.exports = projectImagesTypes;