Skip to content

Commit 0aee087

Browse files
author
dphaener
committedJun 30, 2015
First release. Probably buggy
1 parent 83c8ef0 commit 0aee087

10 files changed

+653
-2
lines changed
 

‎.gitignore

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
# Ignore all the node modules
2+
/node_modules
3+
npm-debug.log

‎example/basic.html

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<html>
2+
<head>
3+
<title>Basic Example</title>
4+
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
5+
</head>
6+
<body>
7+
<div class="container">
8+
<div id="react"></div>
9+
</div>
10+
<script src="/basic.js"></script>
11+
</body>
12+
</html>

‎example/basic.jsx

+62
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
"use strict";
2+
3+
import React from 'react';
4+
import _ from 'underscore';
5+
import underscoreDeepExtend from 'underscore-deep-extend';
6+
import Popover from '../src/popover';
7+
8+
_.mixin({deepExtend: underscoreDeepExtend(_)});
9+
10+
export default class Basic extends React.Component {
11+
constructor(props) {
12+
super(props);
13+
14+
this.toggleMenu = this.toggleMenu.bind(this);
15+
this.changePosition = this.changePosition.bind(this);
16+
17+
this.state = {
18+
isOpen: false,
19+
position: 'bottom'
20+
};
21+
}
22+
23+
toggleMenu(isOpen) {
24+
this.setState({ isOpen: !isOpen });
25+
}
26+
27+
changePosition(ev) {
28+
let position = React.findDOMNode(ev.currentTarget).value;
29+
this.setState({ position: position });
30+
}
31+
32+
render() {
33+
let toggleButton = <button className="btn btn-lrg btn-success" onClick={this.toggleMenu}>Toggle Menu</button>
34+
35+
return (
36+
<div className="container">
37+
<select onChange={this.changePosition} ref="positionSelect">
38+
<option value="bottom">Bottom</option>
39+
<option value="top">Top</option>
40+
<option value="left">Left</option>
41+
<option value="right">Right</option>
42+
</select><br/><br/>
43+
44+
<Popover
45+
toggleButton={toggleButton}
46+
handleClick={this.toggleMenu}
47+
isOpen={this.state.isOpen}
48+
position={this.state.position}>
49+
50+
<ul>
51+
<li>Menu Item One</li>
52+
<li>Menu Item Two</li>
53+
<li>Menu Item Three</li>
54+
</ul>
55+
</Popover>
56+
</div>
57+
)
58+
}
59+
}
60+
61+
require('../src/css/default.scss');
62+
React.render(<Basic />, document.getElementById('react'));

‎example/index.html

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<html>
2+
<head>
3+
<title>Basic Example</title>
4+
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
5+
</head>
6+
<body>
7+
<ul>
8+
<li><a href="basic.html">Basic Example</a></li>
9+
</ul>
10+
</body>
11+
</html>

‎example/webpack.config.js

+34
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
var webpack = require('webpack');
2+
var path = require('path');
3+
4+
module.exports = {
5+
entry: {
6+
'basic': [
7+
'webpack-dev-server/client?http://localhost:8080/',
8+
'webpack/hot/only-dev-server',
9+
'./example/basic.jsx'
10+
]
11+
},
12+
output: {
13+
path: __dirname,
14+
filename: "[name].js",
15+
publicPath: 'http://localhost:8080/',
16+
chunkFilename: '[id].chunk.js',
17+
sourceMapFilename: '[name].map'
18+
},
19+
resolve: {
20+
extensions: ['', '.js', '.jsx', '.es6'],
21+
modulesDirectories: ['node_modules']
22+
},
23+
module: {
24+
loaders: [
25+
{ test: /\.jsx$|\.es6$|\.js$/, loaders: ['react-hot', 'babel-loader?stage=0'], exclude: /node_modules/ },
26+
{ test: /\.scss$|\.css$/, loader: 'style-loader!style!css!sass' },
27+
{ test: /\.(jpe?g|png|gif)$/i, loader: 'url?limit=10000!img?progressive=true' }
28+
]
29+
},
30+
plugins: [
31+
new webpack.NoErrorsPlugin()
32+
],
33+
devtool: "eval-source-map"
34+
};

‎lib/css/default.css

+62
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
div.popover-menu {
2+
text-align: center;
3+
display: inline-block;
4+
font-size: 0.8em;
5+
position: relative; }
6+
div.popover-menu section.popover-content {
7+
padding: 0;
8+
background: #fff;
9+
border-radius: 3px;
10+
border: 1px solid silver;
11+
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
12+
color: #000;
13+
cursor: pointer;
14+
display: none;
15+
overflow: show;
16+
z-index: 99999;
17+
position: absolute; }
18+
div.popover-menu section.popover-content.bottom:before {
19+
top: -17px;
20+
left: 15px;
21+
content: "\25b4";
22+
text-shadow: 0 -2px 2px rgba(0, 0, 0, 0.3); }
23+
div.popover-menu section.popover-content.top:before {
24+
bottom: -13px;
25+
left: 15px;
26+
content: "\25be";
27+
font-size: 1.6em;
28+
text-shadow: 0 2px 2px rgba(0, 0, 0, 0.3); }
29+
div.popover-menu section.popover-content.left:before {
30+
top: 0;
31+
right: -5px;
32+
content: "\25b8";
33+
font-size: 1.6em;
34+
text-shadow: 2px 0 2px rgba(0, 0, 0, 0.3); }
35+
div.popover-menu section.popover-content.right:before {
36+
top: 0;
37+
left: -8px;
38+
content: "\25c2";
39+
text-shadow: -2px 0 2px rgba(0, 0, 0, 0.3); }
40+
div.popover-menu section.popover-content:before {
41+
position: absolute;
42+
color: #fff;
43+
font-size: 1.9em;
44+
pointer-events: none; }
45+
div.popover-menu section.popover-content.show {
46+
display: block; }
47+
div.popover-menu section.popover-content ul {
48+
list-style-type: none;
49+
margin: 0;
50+
padding: 0; }
51+
div.popover-menu section.popover-content ul li {
52+
padding: 5px 15px;
53+
border-bottom: solid 1px #cccccc;
54+
white-space: nowrap; }
55+
div.popover-menu section.popover-content ul li:last-child {
56+
border-bottom: none; }
57+
58+
div.container {
59+
text-align: center;
60+
margin-top: 50px; }
61+
div.container select {
62+
margin-bottom: 150px; }

‎lib/popover.js

+185
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,185 @@
1+
'use strict';
2+
3+
Object.defineProperty(exports, '__esModule', {
4+
value: true
5+
});
6+
7+
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; }; })();
8+
9+
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); } } };
10+
11+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
12+
13+
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }
14+
15+
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) subClass.__proto__ = superClass; }
16+
17+
var _react = require('react');
18+
19+
var _react2 = _interopRequireDefault(_react);
20+
21+
var getDimensions = function getDimensions(el) {
22+
var el_style = window.getComputedStyle(el),
23+
el_display = el_style.display,
24+
el_position = el_style.position,
25+
el_visibility = el_style.visibility,
26+
el_max_height = el_style.maxHeight.replace('px', '').replace('%', ''),
27+
wanted_dimensions = {};
28+
29+
// if its not hidden we just return normal height
30+
if (el_display !== 'none' && el_max_height !== '0') {
31+
return el.offsetHeight;
32+
}
33+
34+
// the element is hidden so:
35+
// making the el block so we can measure its height but still be hidden
36+
el.style.position = 'absolute';
37+
el.style.visibility = 'hidden';
38+
el.style.display = 'block';
39+
40+
wanted_dimensions['height'] = el.offsetHeight;
41+
wanted_dimensions['width'] = el.offsetWidth;
42+
43+
// reverting to the original values
44+
el.style.display = el_display;
45+
el.style.position = el_position;
46+
el.style.visibility = el_visibility;
47+
48+
return wanted_dimensions;
49+
};
50+
51+
var Popover = (function (_React$Component) {
52+
function Popover(props) {
53+
_classCallCheck(this, Popover);
54+
55+
_get(Object.getPrototypeOf(Popover.prototype), 'constructor', this).call(this, props);
56+
57+
this.handleClick = this.handleClick.bind(this);
58+
}
59+
60+
_inherits(Popover, _React$Component);
61+
62+
_createClass(Popover, [{
63+
key: 'componentDidMount',
64+
value: function componentDidMount() {
65+
var _this = this;
66+
67+
this.buttonHeight = _react2['default'].findDOMNode(this.refs.toggleButton).offsetHeight;
68+
this.buttonWidth = _react2['default'].findDOMNode(this.refs.toggleButton).offsetWidth;
69+
70+
var dimensions = getDimensions(_react2['default'].findDOMNode(this.refs.popover));
71+
72+
this.popoverHeight = dimensions.height;
73+
this.popoverWidth = dimensions.width;
74+
75+
document.addEventListener('click', function (ev) {
76+
ev.stopPropagation();
77+
_this.handleClick(true);
78+
});
79+
80+
_react2['default'].findDOMNode(this.refs.popover).addEventListener('click', function (ev) {
81+
ev.stopPropagation();
82+
_this.handleClick(_this.props.isOpen);
83+
});
84+
85+
_react2['default'].findDOMNode(this.refs.toggleButton).addEventListener('click', function (ev) {
86+
ev.stopPropagation();
87+
_this.handleClick(_this.props.isOpen);
88+
});
89+
}
90+
}, {
91+
key: 'handleClick',
92+
value: function handleClick(value) {
93+
this.props.handleClick(value);
94+
}
95+
}, {
96+
key: 'calculateTopOffset',
97+
value: function calculateTopOffset() {
98+
var offset = '0px';
99+
100+
switch (this.props.position) {
101+
case 'top':
102+
offset = '-' + (this.popoverHeight + 10) + 'px';
103+
break;
104+
case 'bottom':
105+
offset = this.buttonHeight + 10 + 'px';
106+
break;
107+
case 'left':
108+
offset = '0px';
109+
break;
110+
case 'right':
111+
offset = '0px';
112+
break;
113+
default:
114+
offset = 0;
115+
}
116+
117+
return offset;
118+
}
119+
}, {
120+
key: 'calculateLeftOffset',
121+
value: function calculateLeftOffset() {
122+
var offset = '0px';
123+
124+
switch (this.props.position) {
125+
case 'top':
126+
offset = '0px';
127+
break;
128+
case 'bottom':
129+
offset = '0px';
130+
break;
131+
case 'left':
132+
offset = '-' + (this.popoverWidth + 10) + 'px';
133+
break;
134+
case 'right':
135+
offset = this.popoverWidth + 'px';
136+
break;
137+
default:
138+
offset = 0;
139+
}
140+
141+
return offset;
142+
}
143+
}, {
144+
key: 'render',
145+
value: function render() {
146+
var toggleButton = _react2['default'].cloneElement(this.props.toggleButton, {
147+
ref: 'toggleButton'
148+
});
149+
150+
var contentClass = 'popover-content ' + this.props.position + ' ' + (this.props.isOpen ? 'show' : '');
151+
var contentStyles = {
152+
top: this.calculateTopOffset(),
153+
left: this.calculateLeftOffset()
154+
};
155+
156+
return _react2['default'].createElement(
157+
'div',
158+
{ className: 'popover-menu' },
159+
toggleButton,
160+
_react2['default'].createElement(
161+
'section',
162+
{ className: contentClass, style: contentStyles, ref: 'popover' },
163+
this.props.children
164+
)
165+
);
166+
}
167+
}], [{
168+
key: 'defaultProps',
169+
value: {
170+
toggleButton: _react2['default'].createElement(
171+
'button',
172+
{ className: 'btn btn-lrg btn-success' },
173+
'Toggle Menu'
174+
),
175+
isOpen: false,
176+
position: 'bottom'
177+
},
178+
enumerable: true
179+
}]);
180+
181+
return Popover;
182+
})(_react2['default'].Component);
183+
184+
exports['default'] = Popover;
185+
module.exports = exports['default'];

‎package.json

+34-2
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,44 @@
44
"description": "Popovers for React",
55
"main": "index.js",
66
"scripts": {
7-
"test": "echo \"Error: no test specified\" && exit 1"
7+
"test": "echo \"Error: no test specified\" && exit 1",
8+
"example": "webpack-dev-server --config ./example/webpack.config.js --hot",
9+
"compile": "babel src --ignore __tests__ --stage 0 --out-dir lib; node-sass src/css/default.scss lib/css/default.css",
10+
"push": "npm run compile; npm publish ./"
811
},
912
"keywords": [
1013
"react",
1114
"popover"
1215
],
1316
"author": "Darin Haener <dphaener@gmail.com> (https://github.com/dphaener)",
14-
"license": "MIT"
17+
"license": "MIT",
18+
"dependencies": {
19+
"pikaday": "^1.3.2",
20+
"underscore": "^1.8.3",
21+
"underscore-deep-extend": "0.0.5"
22+
},
23+
"devDependencies": {
24+
"babel": "^5.4.7",
25+
"babel-core": "^5.4.7",
26+
"babel-loader": "^5.1.3",
27+
"css-loader": "^0.14.4",
28+
"file-loader": "^0.8.4",
29+
"img-loader": "^1.1.0",
30+
"node-libs-browser": "^0.5.2",
31+
"node-sass": "^3.1.2",
32+
"react-hot-loader": "^1.2.7",
33+
"react-tools": "^0.13.3",
34+
"sass-loader": "^1.0.2",
35+
"style-loader": "^0.12.3",
36+
"url-loader": "^0.5.6",
37+
"webpack": "^1.9.10",
38+
"webpack-dev-server": "^1.9.0"
39+
},
40+
"optionalDependencies": {},
41+
"engines": {
42+
"node": ">=0.6"
43+
},
44+
"peerDependencies": {
45+
"react": ">=0.13"
46+
}
1547
}

‎src/css/default.scss

+106
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
1+
$popover-color: #000;
2+
$popover-description-color: lighten($popover-color, 40);
3+
$popover-border: 1px solid silver;
4+
$popover-background: #fff;
5+
$popover-background-hover: darken($popover-background, 3);
6+
$popover-inner-border: 1px solid lighten(silver, 20);
7+
$popover-height: 32px;
8+
$popover-padding: 1em;
9+
$popover-distance-from-menu: 40px;
10+
$popover-arrow-top-distance: 0;
11+
$base-border-radius: 3px;
12+
13+
div.popover-menu {
14+
text-align: center;
15+
display: inline-block;
16+
font-size: 0.8em;
17+
position: relative;
18+
19+
section.popover-content {
20+
padding: 0;
21+
background: $popover-background;
22+
border-radius: $base-border-radius;
23+
border: $popover-border;
24+
box-shadow: 0 2px 2px transparentize(black, .8);
25+
color: $popover-color;
26+
cursor: pointer;
27+
display: none;
28+
overflow: show;
29+
z-index: 99999;
30+
position: absolute;
31+
32+
&.bottom {
33+
&:before {
34+
top: -17px;
35+
left: 15px;
36+
content: "\25b4";
37+
text-shadow: 0 -2px 2px transparentize(black, .7);
38+
}
39+
}
40+
41+
&.top {
42+
&:before {
43+
bottom: -13px;
44+
left: 15px;
45+
content: "\25be";
46+
font-size: 1.6em;
47+
text-shadow: 0 2px 2px transparentize(black, .7);
48+
}
49+
}
50+
51+
&.left {
52+
&:before {
53+
top: 0;
54+
right: -5px;
55+
content: "\25b8";
56+
font-size: 1.6em;
57+
text-shadow: 2px 0 2px transparentize(black, .7);
58+
}
59+
}
60+
61+
&.right {
62+
&:before {
63+
top: 0;
64+
left: -8px;
65+
content: "\25c2";
66+
text-shadow: -2px 0 2px transparentize(black, .7);
67+
}
68+
}
69+
70+
&:before {
71+
position: absolute;
72+
color: $popover-background;
73+
font-size: 1.9em;
74+
pointer-events: none;
75+
}
76+
77+
&.show {
78+
display: block;
79+
}
80+
81+
ul {
82+
list-style-type: none;
83+
margin: 0;
84+
padding: 0;
85+
86+
li {
87+
padding: 5px 15px;
88+
border-bottom: solid 1px lighten($popover-color, 80);
89+
white-space: nowrap;
90+
91+
&:last-child {
92+
border-bottom: none;
93+
}
94+
}
95+
}
96+
}
97+
}
98+
99+
div.container {
100+
text-align: center;
101+
margin-top: 50px;
102+
103+
select {
104+
margin-bottom: 150px;
105+
}
106+
}

‎src/popover.jsx

+144
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,144 @@
1+
"use strict";
2+
3+
import React from 'react';
4+
5+
var getDimensions = function(el) {
6+
var el_style = window.getComputedStyle(el),
7+
el_display = el_style.display,
8+
el_position = el_style.position,
9+
el_visibility = el_style.visibility,
10+
el_max_height = el_style.maxHeight.replace('px', '').replace('%', ''),
11+
12+
wanted_dimensions = {};
13+
14+
// if its not hidden we just return normal height
15+
if(el_display !== 'none' && el_max_height !== '0') {
16+
return el.offsetHeight;
17+
}
18+
19+
// the element is hidden so:
20+
// making the el block so we can measure its height but still be hidden
21+
el.style.position = 'absolute';
22+
el.style.visibility = 'hidden';
23+
el.style.display = 'block';
24+
25+
wanted_dimensions['height'] = el.offsetHeight;
26+
wanted_dimensions['width'] = el.offsetWidth;
27+
28+
// reverting to the original values
29+
el.style.display = el_display;
30+
el.style.position = el_position;
31+
el.style.visibility = el_visibility;
32+
33+
return wanted_dimensions;
34+
}
35+
36+
export default class Popover extends React.Component {
37+
static defaultProps = {
38+
toggleButton: <button className="btn btn-lrg btn-success">Toggle Menu</button>,
39+
isOpen: false,
40+
position: 'bottom'
41+
}
42+
43+
constructor(props) {
44+
super(props);
45+
46+
this.handleClick = this.handleClick.bind(this);
47+
}
48+
49+
componentDidMount() {
50+
this.buttonHeight = React.findDOMNode(this.refs.toggleButton).offsetHeight;
51+
this.buttonWidth = React.findDOMNode(this.refs.toggleButton).offsetWidth;
52+
53+
let dimensions = getDimensions(React.findDOMNode(this.refs.popover));
54+
55+
this.popoverHeight = dimensions.height;
56+
this.popoverWidth = dimensions.width;
57+
58+
document.addEventListener('click', (ev) => {
59+
ev.stopPropagation();
60+
this.handleClick(true);
61+
});
62+
63+
React.findDOMNode(this.refs.popover).addEventListener('click', (ev) => {
64+
ev.stopPropagation();
65+
this.handleClick(this.props.isOpen);
66+
});
67+
68+
React.findDOMNode(this.refs.toggleButton).addEventListener('click', (ev) => {
69+
ev.stopPropagation();
70+
this.handleClick(this.props.isOpen);
71+
});
72+
}
73+
74+
handleClick(value) {
75+
this.props.handleClick(value);
76+
}
77+
78+
calculateTopOffset() {
79+
let offset = '0px';
80+
81+
switch(this.props.position) {
82+
case 'top':
83+
offset = `-${this.popoverHeight + 10}px`;
84+
break;
85+
case 'bottom':
86+
offset = `${this.buttonHeight + 10}px`;
87+
break;
88+
case 'left':
89+
offset = '0px';
90+
break;
91+
case 'right':
92+
offset = '0px';
93+
break;
94+
default:
95+
offset = 0;
96+
}
97+
98+
return offset;
99+
}
100+
101+
calculateLeftOffset() {
102+
let offset = '0px';
103+
104+
switch(this.props.position) {
105+
case 'top':
106+
offset = '0px';
107+
break;
108+
case 'bottom':
109+
offset = '0px';
110+
break;
111+
case 'left':
112+
offset = `-${this.popoverWidth + 10}px`;
113+
break;
114+
case 'right':
115+
offset = `${this.popoverWidth}px`;
116+
break;
117+
default:
118+
offset = 0;
119+
}
120+
121+
return offset;
122+
}
123+
124+
render() {
125+
let toggleButton = React.cloneElement(this.props.toggleButton, {
126+
ref: 'toggleButton'
127+
});
128+
129+
let contentClass = `popover-content ${this.props.position} ${this.props.isOpen ? 'show' : ''}`
130+
let contentStyles = {
131+
top: this.calculateTopOffset(),
132+
left: this.calculateLeftOffset()
133+
}
134+
135+
return (
136+
<div className="popover-menu">
137+
{toggleButton}
138+
<section className={contentClass} style={contentStyles} ref="popover">
139+
{this.props.children}
140+
</section>
141+
</div>
142+
)
143+
}
144+
}

0 commit comments

Comments
 (0)
Please sign in to comment.