Skip to content

Instantly share code, notes, and snippets.

@johndavedecano

johndavedecano/index.html

Created March 15, 2017 06:38
Show Gist options
  • Save johndavedecano/eee679e08ee686f006f7a5b074699ca1 to your computer and use it in GitHub Desktop.
Save johndavedecano/eee679e08ee686f006f7a5b074699ca1 to your computer and use it in GitHub Desktop.
Download ZIP
React Hello World w/ JSBin // source http://jsbin.com/netuji
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/immutable/3.7.3/immutable.min.js"></script>
<script src="https://cdn.jsdelivr.net/lodash/4/lodash.min.js"></script>
<script src="http://fb.me/react-0.13.1.js"></script>
<meta charset="utf-8">
<title>React Hello World w/ JSBin</title>
<style id="jsbin-css">
.imgs-grid {
max-width: 800px;
margin: 0 auto;
font-size: 0;
}
.imgs-grid.imgs-grid-1 .imgs-grid-image {
width: 100%;
text-align: center;
}
.imgs-grid.imgs-grid-2 .imgs-grid-image {
width: 50%;
}
.imgs-grid.imgs-grid-3 .imgs-grid-image {
width: 33.333333333333336%;
}
.imgs-grid.imgs-grid-4 .imgs-grid-image {
width: 50%;
}
.imgs-grid.imgs-grid-5 .imgs-grid-image:nth-child(1),
.imgs-grid.imgs-grid-5 .imgs-grid-image:nth-child(2),
.imgs-grid.imgs-grid-5 .imgs-grid-image:nth-child(3) {
width: 33.333333333333336%;
}
.imgs-grid.imgs-grid-5 .imgs-grid-image:nth-child(4),
.imgs-grid.imgs-grid-5 .imgs-grid-image:nth-child(5) {
width: 50%;
}
.imgs-grid .imgs-grid-image {
position: relative;
display: inline-block;
padding: 1px;
box-sizing: border-box;
}
.imgs-grid .imgs-grid-image:hover {
cursor: pointer;
}
.imgs-grid .imgs-grid-image .image-wrap {
position: relative;
display: inline-block;
overflow: hidden;
vertical-align: middle;
}
.imgs-grid .imgs-grid-image .image-wrap img {
position: relative;
width: 100%;
height: auto;
margin: 0;
visibility: hidden;
}
.imgs-grid .imgs-grid-image .view-all {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
text-align: center;
}
.imgs-grid .imgs-grid-image .view-all:before {
display: inline-block;
content: "";
vertical-align: middle;
height: 100%;
}
.imgs-grid .imgs-grid-image .view-all:hover {
cursor: pointer;
}
.imgs-grid .imgs-grid-image .view-all:hover .view-all-text {
text-decoration: underline;
}
.imgs-grid .imgs-grid-image .view-all .view-all-cover {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: black;
opacity: 0.4;
}
.imgs-grid .imgs-grid-image .view-all .view-all-text {
position: relative;
font-size: 16px;
font-family: sans-serif;
color: white;
}
@media (max-width: 350px) {
.imgs-grid .imgs-grid-image .view-all .view-all-text {
font-size: 10px;
}
}
</style>
</head>
<body>
<div id="react_example"></div>
<script id="jsbin-javascript">
'use strict';
var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
var _get = function get(_x, _x2, _x3) { var _again = true; _function: while (_again) { var object = _x, property = _x2, receiver = _x3; desc = parent = getter = undefined; _again = false; if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x = parent; _x2 = property; _x3 = receiver; _again = true; continue _function; } } else if ('value' in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } };
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }
function _inherits(subClass, superClass) { if (typeof superClass !== 'function' && superClass !== null) { throw new TypeError('Super expression must either be null or a function, not ' + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
var images = Immutable.Map({
transport: {
src: 'http://lorempixel.com/500/700/transport'
},
sports: {
src: 'http://lorempixel.com/200/600/sports'
},
people: {
src: 'http://lorempixel.com/500/700/people'
},
animals: {
src: 'http://lorempixel.com/500/700/animals'
},
nothing: {
src: 'http://lorempixel.com/500/700/animals'
}
});
var ImageGridItem = (function (_React$Component) {
_inherits(ImageGridItem, _React$Component);
function ImageGridItem() {
var _this = this;
_classCallCheck(this, ImageGridItem);
_get(Object.getPrototypeOf(ImageGridItem.prototype), 'constructor', this).apply(this, arguments);
this.state = {
height: 0
};
this.onLoad = function (e) {
var elWidth = React.findDOMNode(_this.refs.image).getBoundingClientRect().width;
_this.setState({ height: elWidth });
_this.props.onLoad(_this.props.id);
};
}
_createClass(ImageGridItem, [{
key: 'render',
value: function render() {
var style = {
width: this.state.height - 2,
height: this.state.height,
backgroundImage: 'url(' + this.props.thumbnail + ')',
backgroundSize: 'cover',
backgroundPosition: 'center'
};
var wrapperStyle = {
minHeight: this.state.height
};
return React.createElement(
'div',
{ style: wrapperStyle, className: 'imgs-grid-image', ref: 'image' },
React.createElement(
'div',
{ style: style, className: 'image-wrap' },
React.createElement('img', { src: this.props.thumbnail, onLoad: this.onLoad })
)
);
}
}], [{
key: 'defaultProps',
value: {
onLoad: function onLoad() {}
},
enumerable: true
}]);
return ImageGridItem;
})(React.Component);
var ImageGrid = (function (_React$Component2) {
_inherits(ImageGrid, _React$Component2);
_createClass(ImageGrid, null, [{
key: 'defaultProps',
value: {
align: true,
images: Immutable.Map(),
onWindowResize: function onWindowResize() {}
},
enumerable: true
}]);
function ImageGrid(props) {
var _this2 = this;
_classCallCheck(this, ImageGrid);
_get(Object.getPrototypeOf(ImageGrid.prototype), 'constructor', this).call(this, props);
this.maxGridImages = 5;
this.state = {
imageLoadCount: 0
};
this.updateDimensions = function () {
_this2.props.onWindowResize();
};
this.onImageLoad = function (id) {
var imageLoadCount = _this2.state.imageLoadCount + 1;
_this2.setState({
imageLoadCount: imageLoadCount
});
// Check if all images has been loaded
if (imageLoadCount === _this2.props.images.size) {
console.log('All images has been loaded. Resizing...');
_this2.setState({ imageLoadCount: 0 });
_this2.allImagesLoaded();
}
};
}
_createClass(ImageGrid, [{
key: 'componentDidMount',
value: function componentDidMount() {
window.addEventListener("resize", this.updateDimensions);
}
}, {
key: 'componentWillUnmount',
value: function componentWillUnmount() {
window.removeEventListener("resize", this.updateDimensions);
}
}, {
key: 'getGridClass',
value: function getGridClass() {
if (this.props.images.size > 5) {
return 'imgs-grid imgs-grid-' + 5;
} else {
return 'imgs-grid imgs-grid-' + this.props.images.size;
}
}
}, {
key: 'renderImages',
value: function renderImages() {
var _this3 = this;
return this.props.images.map(function (img, key) {
return React.createElement(ImageGridItem, { key: key,
id: key,
thumbnail: img.src,
onLoad: _this3.onImageLoad });
}).toArray();
}
}, {
key: 'render',
value: function render() {
return React.createElement(
'div',
{ className: this.getGridClass() },
this.renderImages()
);
}
}]);
return ImageGrid;
})(React.Component);
React.render(React.createElement(ImageGrid, { images: images }), document.getElementById('react_example'));
</script>
<script id="jsbin-source-html" type="text/html"><!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/immutable/3.7.3/immutable.min.js"><\/script>
<script src="https://cdn.jsdelivr.net/lodash/4/lodash.min.js"><\/script>
<script src="//fb.me/react-0.13.1.js"><\/script>
<meta charset="utf-8">
<title>React Hello World w/ JSBin</title>
</head>
<body>
<div id="react_example"></div>
</body>
</html> </script>
<script id="jsbin-source-css" type="text/css">.imgs-grid {
max-width: 800px;
margin: 0 auto;
font-size: 0;
}
.imgs-grid.imgs-grid-1 .imgs-grid-image {
width: 100%;
text-align: center;
}
.imgs-grid.imgs-grid-2 .imgs-grid-image {
width: 50%;
}
.imgs-grid.imgs-grid-3 .imgs-grid-image {
width: 33.333333333333336%;
}
.imgs-grid.imgs-grid-4 .imgs-grid-image {
width: 50%;
}
.imgs-grid.imgs-grid-5 .imgs-grid-image:nth-child(1),
.imgs-grid.imgs-grid-5 .imgs-grid-image:nth-child(2),
.imgs-grid.imgs-grid-5 .imgs-grid-image:nth-child(3) {
width: 33.333333333333336%;
}
.imgs-grid.imgs-grid-5 .imgs-grid-image:nth-child(4),
.imgs-grid.imgs-grid-5 .imgs-grid-image:nth-child(5) {
width: 50%;
}
.imgs-grid .imgs-grid-image {
position: relative;
display: inline-block;
padding: 1px;
box-sizing: border-box;
}
.imgs-grid .imgs-grid-image:hover {
cursor: pointer;
}
.imgs-grid .imgs-grid-image .image-wrap {
position: relative;
display: inline-block;
overflow: hidden;
vertical-align: middle;
}
.imgs-grid .imgs-grid-image .image-wrap img {
position: relative;
width: 100%;
height: auto;
margin: 0;
visibility: hidden;
}
.imgs-grid .imgs-grid-image .view-all {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
text-align: center;
}
.imgs-grid .imgs-grid-image .view-all:before {
display: inline-block;
content: "";
vertical-align: middle;
height: 100%;
}
.imgs-grid .imgs-grid-image .view-all:hover {
cursor: pointer;
}
.imgs-grid .imgs-grid-image .view-all:hover .view-all-text {
text-decoration: underline;
}
.imgs-grid .imgs-grid-image .view-all .view-all-cover {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: black;
opacity: 0.4;
}
.imgs-grid .imgs-grid-image .view-all .view-all-text {
position: relative;
font-size: 16px;
font-family: sans-serif;
color: white;
}
@media (max-width: 350px) {
.imgs-grid .imgs-grid-image .view-all .view-all-text {
font-size: 10px;
}
}</script>
<script id="jsbin-source-javascript" type="text/javascript">let images = Immutable.Map({
transport: {
src: 'http://lorempixel.com/500/700/transport'
},
sports: {
src: 'http://lorempixel.com/200/600/sports',
},
people: {
src: 'http://lorempixel.com/500/700/people',
},
animals: {
src: 'http://lorempixel.com/500/700/animals'
},
nothing: {
src: 'http://lorempixel.com/500/700/animals'
}
});
class ImageGridItem extends React.Component {
state = {
height: 0
}
static defaultProps = {
onLoad: () => {}
}
onLoad = (e) => {
var elWidth = React.findDOMNode(this.refs.image).getBoundingClientRect().width;
this.setState({height: elWidth});
this.props.onLoad(this.props.id);
}
render() {
const style = {
width: this.state.height - 2,
height: this.state.height,
backgroundImage: `url(${this.props.thumbnail})`,
backgroundSize: 'cover',
backgroundPosition: 'center'
};
const wrapperStyle = {
minHeight: this.state.height
};
return <div style={wrapperStyle} className="imgs-grid-image" ref="image">
<div style={style} className="image-wrap">
<img src={this.props.thumbnail} onLoad={this.onLoad} />
</div>
</div>
}
}
class ImageGrid extends React.Component {
static defaultProps = {
align: true,
images: Immutable.Map(),
onWindowResize: () => {}
}
maxGridImages = 5;
state = {
imageLoadCount: 0
}
constructor(props) {
super(props);
}
componentDidMount() {
window.addEventListener("resize", this.updateDimensions);
}
componentWillUnmount() {
window.removeEventListener("resize", this.updateDimensions);
}
updateDimensions = () => {
this.props.onWindowResize();
};
getGridClass() {
if (this.props.images.size > 5) {
return 'imgs-grid imgs-grid-' + 5;
} else {
return 'imgs-grid imgs-grid-' + this.props.images.size;
}
}
onImageLoad = (id) => {
const imageLoadCount = this.state.imageLoadCount + 1;
this.setState({
imageLoadCount: imageLoadCount
});
// Check if all images has been loaded
if (imageLoadCount === this.props.images.size) {
console.log('All images has been loaded. Resizing...');
this.setState({imageLoadCount: 0});
this.allImagesLoaded();
}
}
renderImages() {
return this.props.images.map((img, key) => {
return <ImageGridItem key={key}
id={key}
thumbnail={img.src}
onLoad={this.onImageLoad} />
}).toArray();
}
render() {
return <div className={this.getGridClass()}>{this.renderImages()}</div>
}
}
React.render(
<ImageGrid images={images} />,
document.getElementById('react_example')
);</script></body>
</html>
Raw
jsbin.netuji.css
.imgs-grid {
max-width: 800px;
margin: 0 auto;
font-size: 0;
}
.imgs-grid.imgs-grid-1 .imgs-grid-image {
width: 100%;
text-align: center;
}
.imgs-grid.imgs-grid-2 .imgs-grid-image {
width: 50%;
}
.imgs-grid.imgs-grid-3 .imgs-grid-image {
width: 33.333333333333336%;
}
.imgs-grid.imgs-grid-4 .imgs-grid-image {
width: 50%;
}
.imgs-grid.imgs-grid-5 .imgs-grid-image:nth-child(1),
.imgs-grid.imgs-grid-5 .imgs-grid-image:nth-child(2),
.imgs-grid.imgs-grid-5 .imgs-grid-image:nth-child(3) {
width: 33.333333333333336%;
}
.imgs-grid.imgs-grid-5 .imgs-grid-image:nth-child(4),
.imgs-grid.imgs-grid-5 .imgs-grid-image:nth-child(5) {
width: 50%;
}
.imgs-grid .imgs-grid-image {
position: relative;
display: inline-block;
padding: 1px;
box-sizing: border-box;
}
.imgs-grid .imgs-grid-image:hover {
cursor: pointer;
}
.imgs-grid .imgs-grid-image .image-wrap {
position: relative;
display: inline-block;
overflow: hidden;
vertical-align: middle;
}
.imgs-grid .imgs-grid-image .image-wrap img {
position: relative;
width: 100%;
height: auto;
margin: 0;
visibility: hidden;
}
.imgs-grid .imgs-grid-image .view-all {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
text-align: center;
}
.imgs-grid .imgs-grid-image .view-all:before {
display: inline-block;
content: "";
vertical-align: middle;
height: 100%;
}
.imgs-grid .imgs-grid-image .view-all:hover {
cursor: pointer;
}
.imgs-grid .imgs-grid-image .view-all:hover .view-all-text {
text-decoration: underline;
}
.imgs-grid .imgs-grid-image .view-all .view-all-cover {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: black;
opacity: 0.4;
}
.imgs-grid .imgs-grid-image .view-all .view-all-text {
position: relative;
font-size: 16px;
font-family: sans-serif;
color: white;
}
@media (max-width: 350px) {
.imgs-grid .imgs-grid-image .view-all .view-all-text {
font-size: 10px;
}
}
Raw
jsbin.netuji.js
'use strict';
var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
var _get = function get(_x, _x2, _x3) { var _again = true; _function: while (_again) { var object = _x, property = _x2, receiver = _x3; desc = parent = getter = undefined; _again = false; if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x = parent; _x2 = property; _x3 = receiver; _again = true; continue _function; } } else if ('value' in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } };
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }
function _inherits(subClass, superClass) { if (typeof superClass !== 'function' && superClass !== null) { throw new TypeError('Super expression must either be null or a function, not ' + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
var images = Immutable.Map({
transport: {
src: 'http://lorempixel.com/500/700/transport'
},
sports: {
src: 'http://lorempixel.com/200/600/sports'
},
people: {
src: 'http://lorempixel.com/500/700/people'
},
animals: {
src: 'http://lorempixel.com/500/700/animals'
},
nothing: {
src: 'http://lorempixel.com/500/700/animals'
}
});
var ImageGridItem = (function (_React$Component) {
_inherits(ImageGridItem, _React$Component);
function ImageGridItem() {
var _this = this;
_classCallCheck(this, ImageGridItem);
_get(Object.getPrototypeOf(ImageGridItem.prototype), 'constructor', this).apply(this, arguments);
this.state = {
height: 0
};
this.onLoad = function (e) {
var elWidth = React.findDOMNode(_this.refs.image).getBoundingClientRect().width;
_this.setState({ height: elWidth });
_this.props.onLoad(_this.props.id);
};
}
_createClass(ImageGridItem, [{
key: 'render',
value: function render() {
var style = {
width: this.state.height - 2,
height: this.state.height,
backgroundImage: 'url(' + this.props.thumbnail + ')',
backgroundSize: 'cover',
backgroundPosition: 'center'
};
var wrapperStyle = {
minHeight: this.state.height
};
return React.createElement(
'div',
{ style: wrapperStyle, className: 'imgs-grid-image', ref: 'image' },
React.createElement(
'div',
{ style: style, className: 'image-wrap' },
React.createElement('img', { src: this.props.thumbnail, onLoad: this.onLoad })
)
);
}
}], [{
key: 'defaultProps',
value: {
onLoad: function onLoad() {}
},
enumerable: true
}]);
return ImageGridItem;
})(React.Component);
var ImageGrid = (function (_React$Component2) {
_inherits(ImageGrid, _React$Component2);
_createClass(ImageGrid, null, [{
key: 'defaultProps',
value: {
align: true,
images: Immutable.Map(),
onWindowResize: function onWindowResize() {}
},
enumerable: true
}]);
function ImageGrid(props) {
var _this2 = this;
_classCallCheck(this, ImageGrid);
_get(Object.getPrototypeOf(ImageGrid.prototype), 'constructor', this).call(this, props);
this.maxGridImages = 5;
this.state = {
imageLoadCount: 0
};
this.updateDimensions = function () {
_this2.props.onWindowResize();
};
this.onImageLoad = function (id) {
var imageLoadCount = _this2.state.imageLoadCount + 1;
_this2.setState({
imageLoadCount: imageLoadCount
});
// Check if all images has been loaded
if (imageLoadCount === _this2.props.images.size) {
console.log('All images has been loaded. Resizing...');
_this2.setState({ imageLoadCount: 0 });
_this2.allImagesLoaded();
}
};
}
_createClass(ImageGrid, [{
key: 'componentDidMount',
value: function componentDidMount() {
window.addEventListener("resize", this.updateDimensions);
}
}, {
key: 'componentWillUnmount',
value: function componentWillUnmount() {
window.removeEventListener("resize", this.updateDimensions);
}
}, {
key: 'getGridClass',
value: function getGridClass() {
if (this.props.images.size > 5) {
return 'imgs-grid imgs-grid-' + 5;
} else {
return 'imgs-grid imgs-grid-' + this.props.images.size;
}
}
}, {
key: 'renderImages',
value: function renderImages() {
var _this3 = this;
return this.props.images.map(function (img, key) {
return React.createElement(ImageGridItem, { key: key,
id: key,
thumbnail: img.src,
onLoad: _this3.onImageLoad });
}).toArray();
}
}, {
key: 'render',
value: function render() {
return React.createElement(
'div',
{ className: this.getGridClass() },
this.renderImages()
);
}
}]);
return ImageGrid;
})(React.Component);
React.render(React.createElement(ImageGrid, { images: images }), document.getElementById('react_example'));
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment