Skip to content
This repository was archived by the owner on Jan 19, 2023. It is now read-only.

Commit 1b1fb93

Browse files
fritz-cfritz-c
committed
Get demo page up and running and polish the build overall
1 parent 7243019 commit 1b1fb93

File tree

13 files changed

+182
-180
lines changed

13 files changed

+182
-180
lines changed

‎.eslintrc‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,4 @@
11
{
22
"parser": "babel-eslint",
3-
"extends": "blue-hour",
4-
"rules": {
5-
"react/prefer-es6-class": 0
6-
}
3+
"extends": "blue-hour"
74
}

‎.gitignore‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,6 @@
11
node_modules
22
npm-debug.log
33

4-
# Example build directory
5-
example/dist
6-
74
# Editor and other tmp files
85
*.swp
96
*.un~

‎.npmignore‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
11
bower.json
2-
dist
3-
example
2+
src/examples
43
svg

‎CHANGELOG.md‎

Lines changed: 1 addition & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -1,54 +1 @@
1-
v2.1.0 - Thu, 28 Apr 2016 15:02:18 GMT
2-
--------------------------------------
3-
4-
-
5-
6-
7-
v2.0.0 - Thu, 14 Apr 2016 05:56:21 GMT
8-
--------------------------------------
9-
10-
-
11-
12-
13-
v1.1.2 - Tue, 05 Apr 2016 01:33:58 GMT
14-
--------------------------------------
15-
16-
-
17-
18-
19-
v1.1.1 - Tue, 22 Mar 2016 07:53:55 GMT
20-
--------------------------------------
21-
22-
-
23-
24-
25-
v1.1.0 - Wed, 16 Mar 2016 07:54:02 GMT
26-
--------------------------------------
27-
28-
-
29-
30-
31-
v1.0.5 - Tue, 16 Feb 2016 11:10:44 GMT
32-
--------------------------------------
33-
34-
-
35-
36-
37-
v1.0.4 - Mon, 15 Feb 2016 06:45:15 GMT
38-
--------------------------------------
39-
40-
-
41-
42-
43-
v1.0.3 - Mon, 15 Feb 2016 00:55:49 GMT
44-
--------------------------------------
45-
46-
-
47-
48-
49-
v1.0.2 - Mon, 15 Feb 2016 00:07:49 GMT
50-
--------------------------------------
51-
52-
-
53-
54-
1+
See the GitHub [Releases](https://github.com/fritz-c/react-image-lightbox/releases) for information on updates.

‎package.json‎

Lines changed: 17 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -3,17 +3,22 @@
33
"version": "3.0.0",
44
"description": "A lightbox component for React.js",
55
"scripts": {
6+
"build": "npm run lint && npm run build:demo && npm run build:umd",
7+
"build:demo": "npm run clean:demo && cross-env NODE_ENV=production webpack --config webpack.config.demo.babel.js --bail",
8+
"build:umd": "npm run clean:umd && cross-env NODE_ENV=production webpack --config webpack.config.umd.babel.js --bail",
9+
"clean": "npm run clean:demo && npm run clean:umd",
10+
"clean:demo": "rimraf build",
11+
"clean:umd": "rimraf dist/umd",
612
"start": "cross-env NODE_ENV=development webpack-dev-server --hot --inline --config webpack.config.dev.babel.js",
713
"test": "webpack",
814
"lint": "eslint src",
9-
"clean": "rimraf dist",
10-
"clean:demo": "rimraf build",
11-
"build": "npm run lint && npm run clean && webpack --config webpack.config.production.babel.js",
12-
"build:demo": "npm run clean:demo && webpack --config webpack.config.demo.babel.js",
13-
"deploy": "webpack --config webpack.config.demo.babel.js && gh-pages -d examples",
14-
"prepublish": "npm run build"
15+
"deploy": "npm run build && gh-pages -d examples",
16+
"prepublish": "npm run lint && npm run build:umd"
1517
},
16-
"main": "lib/react-image-lightbox.js",
18+
"main": "dist/umd/react-image-lightbox.js",
19+
"files": [
20+
"dist"
21+
],
1722
"repository": {
1823
"type": "git",
1924
"url": "https://github.com/fritz-c/react-image-lightbox.git"
@@ -28,10 +33,12 @@
2833
"react-modal": "^1.4.0"
2934
},
3035
"peerDependencies": {
31-
"react": "^15.0.0"
36+
"react": "^15.0.0",
37+
"react-dom": "^15.0.0"
3238
},
3339
"devDependencies": {
3440
"autoprefixer": "^6.3.7",
41+
"babel-cli": "^6.10.1",
3542
"babel-core": "^6.10.4",
3643
"babel-eslint": "^6.1.2",
3744
"babel-loader": "^6.2.4",
@@ -42,11 +49,11 @@
4249
"cross-env": "^2.0.0",
4350
"css-loader": "^0.23.1",
4451
"eslint": "^2.9.0",
45-
"eslint-config-airbnb": "^9.0.1",
46-
"eslint-config-blue-hour": "0.0.1",
52+
"eslint-config-blue-hour": "0.0.2",
4753
"eslint-plugin-import": "^1.10.2",
4854
"eslint-plugin-jsx-a11y": "^1.5.5",
4955
"eslint-plugin-react": "^5.2.2",
56+
"file-loader": "^0.9.0",
5057
"gh-pages": "^0.11.0",
5158
"html-webpack-plugin": "^2.22.0",
5259
"node-sass": "^3.8.0",

‎src/constant.js‎

Lines changed: 16 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,23 @@
1-
export default {
2-
// Min image zoom level
3-
MIN_ZOOM_LEVEL: 0,
1+
// Min image zoom level
2+
export const MIN_ZOOM_LEVEL = 0;
43

5-
// Max image zoom level
6-
MAX_ZOOM_LEVEL: 300,
4+
// Max image zoom level
5+
export const MAX_ZOOM_LEVEL = 300;
76

8-
// Size ratio between previous and next zoom levels
9-
ZOOM_RATIO: 1.007,
7+
// Size ratio between previous and next zoom levels
8+
export const ZOOM_RATIO = 1.007;
109

11-
// How much to increase/decrease the zoom level when the zoom buttons are clicked
12-
ZOOM_BUTTON_INCREMENT_SIZE: 100,
10+
// How much to increase/decrease the zoom level when the zoom buttons are clicked
11+
export const ZOOM_BUTTON_INCREMENT_SIZE = 100;
1312

14-
// Used to judge the amount of horizontal scroll needed to initiate a image move
15-
WHEEL_MOVE_X_THRESHOLD: 200,
13+
// Used to judge the amount of horizontal scroll needed to initiate a image move
14+
export const WHEEL_MOVE_X_THRESHOLD = 200;
1615

17-
// Used to judge the amount of vertical scroll needed to initiate a zoom action
18-
WHEEL_MOVE_Y_THRESHOLD: 1,
16+
// Used to judge the amount of vertical scroll needed to initiate a zoom action
17+
export const WHEEL_MOVE_Y_THRESHOLD = 1;
1918

20-
KEYS: {
21-
ESC: 27,
22-
LEFT_ARROW: 37,
23-
RIGHT_ARROW: 39,
24-
},
19+
export const KEYS = {
20+
ESC: 27,
21+
LEFT_ARROW: 37,
22+
RIGHT_ARROW: 39,
2523
};

‎src/examples/cats/app.js‎

Lines changed: 94 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,19 @@
11
import React from 'react';
22
import ReactDOM from 'react-dom';
33
import Lightbox from '../../react-image-lightbox';
4-
import './stylesheets/app.scss';
4+
import styles from './stylesheets/app.scss';
55

6-
const images = [
7-
'images/1.jpg',
8-
'images/2.jpg',
9-
'images/3.jpg',
10-
'images/4.jpg',
11-
];
6+
import image1 from './images/1.jpg';
7+
import image2 from './images/2.jpg';
8+
import image3 from './images/3.jpg';
9+
import image4 from './images/4.jpg';
10+
import image1Thumb from './images/1_thumb.jpg';
11+
import image2Thumb from './images/2_thumb.jpg';
12+
import image3Thumb from './images/3_thumb.jpg';
13+
import image4Thumb from './images/4_thumb.jpg';
1214

13-
const thumbs = [
14-
'images/1_thumb.jpg',
15-
'images/2_thumb.jpg',
16-
'images/3_thumb.jpg',
17-
'images/4_thumb.jpg',
18-
];
15+
const images = [ image1, image2, image3, image4 ];
16+
const thumbs = [ image1Thumb, image2Thumb, image3Thumb, image4Thumb ];
1917

2018
const titles = [
2119
'',
@@ -89,15 +87,89 @@ const App = React.createClass({
8987

9088
return (
9189
<div>
92-
<button
93-
type="button"
94-
id="open-lightbox"
95-
className="demo-button"
96-
onClick={this.openLightbox}
97-
>
98-
Open Lightbox
99-
</button>
100-
{lightbox}
90+
<section className={styles['page-header']}>
91+
<h1 className={styles['project-name']}>
92+
React Image Lightbox
93+
</h1>
94+
95+
<h2 className={styles['project-tagline']}>
96+
Lightbox component for React.js
97+
</h2>
98+
99+
<a
100+
href="https://github.com/fritz-c/react-image-lightbox"
101+
className={styles.btn}
102+
>
103+
View on GitHub
104+
</a>
105+
106+
<a
107+
href="https://github.com/fritz-c/react-image-lightbox/zipball/master"
108+
className={styles.btn}
109+
>
110+
Download .zip
111+
</a>
112+
113+
<a
114+
href="https://github.com/fritz-c/react-image-lightbox/tarball/master"
115+
className={styles.btn}
116+
>
117+
Download .tar.gz
118+
</a>
119+
</section>
120+
121+
<section className={styles['main-content']}>
122+
<h1>
123+
<a
124+
id="react-image-lightbox"
125+
className={styles.anchor}
126+
href="#react-image-lightbox"
127+
aria-hidden="true"
128+
>
129+
<span aria-hidden="true" className={`${styles.octicon} ${styles['octicon-link']}`}></span>
130+
</a>
131+
132+
React Image Lightbox
133+
</h1>
134+
135+
<p>A flexible lightbox component for displaying images in a React project.</p>
136+
137+
<h3>Demo</h3>
138+
139+
<div>
140+
<button
141+
type="button"
142+
id="open-lightbox"
143+
className={styles.demoButton}
144+
onClick={this.openLightbox}
145+
>
146+
Open Lightbox
147+
</button>
148+
{lightbox}
149+
</div>
150+
151+
<p>Features</p>
152+
<ul>
153+
<li>Keyboard shortcuts (with rate limiting)</li>
154+
<li>Image Zoom</li>
155+
<li>Flexible rendering using src values assigned on the fly</li>
156+
<li>Image preloading for smoother viewing</li>
157+
<li>Few dependencies</li>
158+
<li>No external CSS</li>
159+
</ul>
160+
161+
<a href="https://github.com/fritz-c/react-image-lightbox">Examples and Documentation on Github</a>
162+
163+
<footer className={styles['site-footer']}>
164+
<span className={styles['site-footer-owner']}>
165+
<a href="https://github.com/fritz-c/react-image-lightbox">React Image Lightbox</a> is maintained by <a href="https://github.com/fritz-c">fritz-c</a>.
166+
</span>
167+
168+
<span className={styles['site-footer-credits']}>
169+
This page was generated by <a href="https://pages.github.com">GitHub Pages</a> using the <a href="https://github.com/jasonlong/cayman-theme">Cayman theme</a> by <a href="https://twitter.com/jasonlong">Jason Long</a>.
170+
</span>
171+
</footer>
172+
</section>
101173
</div>
102174
);
103175
}

‎src/examples/cats/index.html‎

Lines changed: 1 addition & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -7,45 +7,6 @@
77
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>
88
</head>
99
<body>
10-
11-
<section class="page-header">
12-
<h1 class="project-name">React Image Lightbox</h1>
13-
<h2 class="project-tagline">Lightbox component for React.js</h2>
14-
<a href="https://github.com/fritz-c/react-image-lightbox" class="btn">View on GitHub</a>
15-
<a href="https://github.com/fritz-c/react-image-lightbox/zipball/master" class="btn">Download .zip</a>
16-
<a href="https://github.com/fritz-c/react-image-lightbox/tarball/master" class="btn">Download .tar.gz</a>
17-
</section>
18-
19-
<section class="main-content">
20-
<h1>
21-
<a id="react-image-lightbox" class="anchor" href="#react-image-lightbox" aria-hidden="true">
22-
<span aria-hidden="true" class="octicon octicon-link"></span>
23-
</a>
24-
React Image Lightbox
25-
</h1>
26-
<p>A flexible lightbox component for displaying images in a React project.</p>
27-
28-
<h3>Demo</h3>
29-
<div id="app"></div>
30-
31-
<p>Features</p>
32-
<ul>
33-
<li>Keyboard shortcuts (with rate limiting)</li>
34-
<li>Image Zoom</li>
35-
<li>Flexible rendering using src values assigned on the fly</li>
36-
<li>Image preloading for smoother viewing</li>
37-
<li>Few dependencies</li>
38-
<li>No external CSS</li>
39-
</ul>
40-
41-
<a href="https://github.com/fritz-c/react-image-lightbox">Examples and Documentation on Github</a>
42-
43-
<footer class="site-footer">
44-
<span class="site-footer-owner"><a href="https://github.com/fritz-c/react-image-lightbox">React-image-lightbox</a> is maintained by <a href="https://github.com/fritz-c">fritz-c</a>.</span>
45-
46-
<span class="site-footer-credits">This page was generated by <a href="https://pages.github.com">GitHub Pages</a> using the <a href="https://github.com/jasonlong/cayman-theme">Cayman theme</a> by <a href="https://twitter.com/jasonlong">Jason Long</a>.</span>
47-
</footer>
48-
49-
</section>
10+
<div id="app"></div>
5011
</body>
5112
</html>

‎src/examples/cats/stylesheets/app.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
@import "./vendor/github-light";
44

55

6-
.demo-button {
6+
.demoButton {
77
border-radius: 5px;
88
background-color: #303030;
99
border: none;

0 commit comments

Comments
 (0)