Skip to content

Commit f3d7def

Browse files
KyleAMathewsKyleAMathews
committed
Initial commit
1 parent d42b5aa commit f3d7def

11 files changed

+361
-5
lines changed

‎.gitignore

+4-5
Original file line numberDiff line numberDiff line change
@@ -20,9 +20,8 @@ coverage
2020
build/Release
2121

2222
# Dependency directory
23-
# Commenting this out is preferred by some people, see
24-
# https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git-
23+
# Deployed apps should consider commenting this line out:
24+
# see https://npmjs.org/doc/faq.html#Should-I-check-my-node_modules-folder-into-git
2525
node_modules
26-
27-
# Users Environment Variables
28-
.lock-wscript
26+
examples/bundle.js
27+
dist/index.js

‎.npmignore

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
# Logs
2+
logs
3+
*.log
4+
5+
# Runtime data
6+
pids
7+
*.pid
8+
*.seed
9+
10+
# Directory for instrumented libs generated by jscoverage/JSCover
11+
lib-cov
12+
13+
# Coverage directory used by tools like istanbul
14+
coverage
15+
16+
# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
17+
.grunt
18+
19+
# Compiled binary addons (http://nodejs.org/api/addons.html)
20+
build/Release
21+
22+
# Dependency directory
23+
# Deployed apps should consider commenting this line out:
24+
# see https://npmjs.org/doc/faq.html#Should-I-check-my-node_modules-folder-into-git
25+
node_modules

‎Makefile

+33
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
BIN = ./node_modules/.bin
2+
3+
release-patch:
4+
@$(call release,patch)
5+
6+
release-minor:
7+
@$(call release,minor)
8+
9+
release-major:
10+
@$(call release,major)
11+
12+
build:
13+
@$(BIN)/cjsx -cb -o dist src/index.cjsx
14+
@$(BIN)/webpack
15+
16+
publish:
17+
git push --tags origin HEAD:master
18+
@$(BIN)/cjsx -cb -o dist src/index.cjsx
19+
npm publish
20+
21+
publish-gh-pages:
22+
git checkout gh-pages
23+
git merge master
24+
@$(BIN)/webpack --config webpack.config.production.js
25+
cp examples/* .
26+
git add --all .
27+
git commit -m "New release"
28+
git push origin gh-pages
29+
git checkout master
30+
31+
define release
32+
npm version $(1)
33+
endef

‎examples/examples.cjsx

+72
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
_ = require 'underscore'
2+
React = require('react')
3+
ImageGrid = require '../src/index'
4+
5+
module.exports = React.createClass
6+
getInitialState: ->
7+
targetWidth: 200
8+
margin: 10
9+
10+
render: ->
11+
<div style={"max-width":'1200px', margin:'0 auto'}>
12+
<h1>React-Component-Starter</h1>
13+
<a href="https://github.com/KyleAMathews/react-component-starter">Code on Github</a>
14+
<br />
15+
<br />
16+
<h2>Target Width</h2>
17+
<input
18+
type="range"
19+
min=50
20+
max=500
21+
ref="slider"
22+
initialValue={@state.targetWidth}
23+
onChange={@onWidthChange} />
24+
<code>{' '}{@state.targetWidth}px</code>
25+
<br />
26+
<br />
27+
<h2>Margin</h2>
28+
<input
29+
type="range"
30+
min=0
31+
max=50
32+
ref="margin"
33+
initialValue={@state.margin}
34+
onChange={@onMarginChange} />
35+
<code>{' '}{@state.margin}px</code>
36+
<br />
37+
<br />
38+
<h3>Photos</h3>
39+
<ImageGrid
40+
className="photos"
41+
margin={@state.margin}
42+
widthHeightRatio=3/5
43+
targetWidth={@state.targetWidth}>
44+
<img src="https://farm1.staticflickr.com/55/148800272_86cffac801_z.jpg" />
45+
<img src="https://farm3.staticflickr.com/2937/14197491985_58036d5b0e_z.jpg" />
46+
<img src="https://farm3.staticflickr.com/2937/14203620719_a0a4d323ef_z.jpg" />
47+
<img src="https://farm6.staticflickr.com/5516/11906727035_b5ccf50dbd_z.jpg" />
48+
<img src="https://farm6.staticflickr.com/5495/11817560513_41b2f225a5_z.jpg" />
49+
<img src="https://farm4.staticflickr.com/3767/10850685734_996f244676_z.jpg" />
50+
</ImageGrid>
51+
52+
<h3>Logos</h3>
53+
<ImageGrid
54+
className="logos"
55+
margin={@state.margin}
56+
widthHeightRatio=1
57+
targetWidth={@state.targetWidth}>
58+
<img src="http://cdn.ycombinator.com/images/startups/Dropbox-974e8cb3.png" />
59+
<img src="http://cdn.ycombinator.com/images/startups/Disqus-ed2cbd86.png" />
60+
<img src="http://cdn.ycombinator.com/images/startups/Airbnb-9c9d2e9e.png" />
61+
<img src="http://cdn.ycombinator.com/images/startups/Stripe-1e55f58f.png" />
62+
<img src="http://cdn.ycombinator.com/images/startups/Hipmunk-33969dcc.png" />
63+
<img src="http://cdn.ycombinator.com/images/startups/Codecademy-89676d22.png" />
64+
</ImageGrid>
65+
66+
</div>
67+
68+
onWidthChange: (e) ->
69+
@setState targetWidth: @refs.slider.getDOMNode().value
70+
71+
onMarginChange: (e) ->
72+
@setState margin: @refs.margin.getDOMNode().value

‎examples/index.cjsx

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
React = require('react')
2+
Examples = require './examples'
3+
4+
React.renderComponent(<Examples />, document.body)

‎examples/index.html

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<html>
2+
<head>
3+
<title>Example</title>
4+
<style>
5+
img {
6+
width: 100%;
7+
}
8+
</style>
9+
</head>
10+
<body>
11+
<script src="./bundle.js"></script>
12+
</body>
13+
</html>
14+

‎index.html

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<html>
2+
<head>
3+
<title>Example</title>
4+
<style>
5+
html {
6+
box-sizing: border-box;
7+
}
8+
*, *:before, *:after {
9+
box-sizing: inherit;
10+
}
11+
img {
12+
width: 100%;
13+
}
14+
.logos img {
15+
border: 1px solid black;
16+
}
17+
</style>
18+
</head>
19+
<body>
20+
<script src="./bundle.js"></script>
21+
</body>
22+
</html>
23+

‎package.json

+44
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
{
2+
"name": "react-image-grid",
3+
"description": "React component for laying out an evenly spaced grid of images",
4+
"version": "0.0.0",
5+
"author": "Kyle Mathews <mathews.kyle@gmail.com>",
6+
"bugs": {
7+
"url": "https://github.com/KyleAMathews/react-image-grid/issues"
8+
},
9+
"dependencies": {
10+
"element-resize-event": "^1.0.0",
11+
"react-component-width-mixin": "^1.0.0"
12+
},
13+
"devDependencies": {
14+
"cjsx-loader": "^0.3.0",
15+
"coffee-loader": "^0.7.2",
16+
"coffee-react": "^1.0.2",
17+
"coffee-script": "^1.8.0",
18+
"css-loader": "^0.9.0",
19+
"gulp": "^3.8.8",
20+
"react-hot-loader": "^0.4.5",
21+
"style-loader": "^0.8.1",
22+
"underscore": "^1.7.0",
23+
"webpack": "^1.4.4",
24+
"webpack-dev-server": "^1.6.5"
25+
},
26+
"homepage": "https://github.com/KyleAMathews/react-image-grid",
27+
"keywords": [
28+
"react",
29+
"react-component",
30+
"grid"
31+
],
32+
"license": "MIT",
33+
"main": "dist/index.js",
34+
"peerDependencies": {
35+
"react": "*"
36+
},
37+
"repository": {
38+
"type": "git",
39+
"url": "https://github.com/KyleAMathews/react-image-grid.git"
40+
},
41+
"scripts": {
42+
"test": "echo \"Error: no test specified\" && exit 1"
43+
}
44+
}

‎src/index.cjsx

+72
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
React = require 'react'
2+
componentWidthMixin = require 'react-component-width-mixin'
3+
4+
module.exports = React.createClass
5+
displayName: "ImageGrid"
6+
mixins: [componentWidthMixin]
7+
8+
propTypes:
9+
children: React.PropTypes.any.isRequired
10+
11+
getInitialState: ->
12+
width: 0
13+
14+
getDefaultProps: ->
15+
margin: 10
16+
targetWidth: 200
17+
widthHeightRatio: 1
18+
19+
render: ->
20+
if @state.componentWidth isnt 0
21+
[imageWidth, imagesPerRow] = @calculateImageWidth()
22+
return (
23+
<div className="image-grid #{@props.className}" style={{overflow: "hidden"}}>
24+
{React.Children.map(@props.children, (child, i) =>
25+
if imagesPerRow is 1
26+
marginRight = 0
27+
else if i isnt 0 and (i + 1) % imagesPerRow is 0
28+
marginRight = 0
29+
else
30+
marginRight = @props.margin
31+
32+
return (
33+
React.DOM.div({
34+
className: "image-wrapper"
35+
style: {
36+
width: "#{imageWidth}px"
37+
height: "#{imageWidth*@props.widthHeightRatio}px"
38+
display: "inline-block"
39+
overflow: "hidden"
40+
position: "relative"
41+
"margin-right": "#{marginRight}px"
42+
"margin-bottom": "#{@props.margin}px"
43+
}
44+
}, child)
45+
)
46+
)}
47+
</div>
48+
)
49+
else
50+
<div />
51+
52+
calculateImageWidth: ->
53+
# Calculate the # of images per row to place.
54+
imageCount = React.Children.count(@props.children)
55+
imagesPerRow = Math.round(@state.componentWidth/@props.targetWidth)
56+
57+
# There has to be at least one image per row.
58+
imagesPerRow = Math.max(imagesPerRow, 1)
59+
if imagesPerRow > imageCount
60+
imagesPerRow = imageCount
61+
62+
# Calculate the per-image width with space for in-between
63+
# images subtracted
64+
rawWidth = @state.componentWidth / imagesPerRow
65+
marginRightOffset = ((@props.margin * imagesPerRow) - @props.margin) / imagesPerRow
66+
imageWidth = rawWidth - marginRightOffset - 0.25
67+
68+
# Don't get too big.
69+
maxWidth = if @props.maxWidth? then @props.maxWidth else @props.targetWidth * 1.5
70+
imageWidth = Math.min(imageWidth, maxWidth)
71+
72+
return [imageWidth, imagesPerRow]

‎webpack.config.js

+35
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
var path = require('path');
2+
var webpack = require('webpack');
3+
4+
5+
module.exports = {
6+
entry: [
7+
"webpack-dev-server/client?http://0.0.0.0:8080",
8+
'webpack/hot/dev-server',
9+
'./examples/index'
10+
],
11+
contentBase: './examples/',
12+
devtool: "eval",
13+
debug: true,
14+
output: {
15+
path: path.join(__dirname, 'examples'),
16+
filename: 'bundle.js',
17+
},
18+
resolveLoader: {
19+
modulesDirectories: ['node_modules']
20+
},
21+
plugins: [
22+
new webpack.HotModuleReplacementPlugin(),
23+
new webpack.IgnorePlugin(/un~$/)
24+
],
25+
resolve: {
26+
extensions: ['', '.js', '.cjsx', '.coffee']
27+
},
28+
module: {
29+
loaders: [
30+
{ test: /\.css$/, loaders: ['style', 'css']},
31+
{ test: /\.cjsx$/, loaders: ['react-hot', 'coffee', 'cjsx']},
32+
{ test: /\.coffee$/, loader: 'coffee' }
33+
]
34+
}
35+
};

‎webpack.config.production.js

+35
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
var path = require('path');
2+
var webpack = require('webpack');
3+
4+
5+
module.exports = {
6+
entry: [
7+
'./examples/index'
8+
],
9+
output: {
10+
path: path.join(__dirname, 'examples'),
11+
filename: 'bundle.js',
12+
},
13+
resolveLoader: {
14+
modulesDirectories: ['node_modules']
15+
},
16+
plugins: [
17+
new webpack.DefinePlugin({
18+
"process.env": {
19+
NODE_ENV: JSON.stringify("production")
20+
}
21+
}),
22+
new webpack.optimize.DedupePlugin(),
23+
new webpack.optimize.UglifyJsPlugin()
24+
],
25+
resolve: {
26+
extensions: ['', '.js', '.cjsx', '.coffee']
27+
},
28+
module: {
29+
loaders: [
30+
{ test: /\.css$/, loaders: ['style', 'css']},
31+
{ test: /\.cjsx$/, loaders: ['coffee', 'cjsx']},
32+
{ test: /\.coffee$/, loader: 'coffee' }
33+
]
34+
}
35+
};

0 commit comments

Comments
 (0)