Skip to content

Commit 1a946c5

Browse files
stereostevestereosteve
committed
ie8 test page
1 parent e2a540a commit 1a946c5

File tree

5 files changed

+237
-1
lines changed

5 files changed

+237
-1
lines changed

Diff for: ‎.gitignore

+2-1
Original file line numberDiff line numberDiff line change
@@ -9,4 +9,5 @@ transpiled/*
99
docs/*.html
1010
docs/assets/bundle.js
1111
cjs/*
12-
amd/*
12+
amd/*
13+
ie8/bundle.js

Diff for: ‎ie8/README.md

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
# ie8 tests
2+
3+
A simple page with several React Bootstrap components for testing in ie8.
4+
5+
```
6+
npm install
7+
npm start
8+
```
9+
10+
Look for the port number in console (usually 8080).
11+
12+
If you are making changes to `src.js`, start the watcher to rebuild:
13+
14+
```
15+
npm run watch
16+
```

Diff for: ‎ie8/index.html

+27
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1">
7+
<title>React Bootstrap IE8 test page</title>
8+
9+
<!-- Bootstrap -->
10+
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
11+
<style>
12+
body {
13+
padding: 50px 100px;
14+
}
15+
</style>
16+
17+
<!--[if IE 8]>
18+
<script src="http://cdnjs.cloudflare.com/ajax/libs/es5-shim/3.4.0/es5-shim.js"></script>
19+
<script src="http://cdnjs.cloudflare.com/ajax/libs/es5-shim/3.4.0/es5-sham.js"></script>
20+
<![endif]-->
21+
</head>
22+
<body>
23+
<h1>Hello, world!</h1>
24+
25+
<script src="bundle.js"></script>
26+
</body>
27+
</html>

Diff for: ‎ie8/package.json

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
{
2+
"dependencies": {
3+
"browserify": "^4.1.11",
4+
"reactify": "^0.13.1",
5+
"envify": "^1.2.1",
6+
"react": "^0.10.0",
7+
"watchify": "^0.10.2",
8+
"http-server": "^0.6.1"
9+
},
10+
"scripts": {
11+
"postinstall": "browserify -t reactify src.js > bundle.js",
12+
"watch": "watchify -t reactify src.js -o bundle.js",
13+
"start": "http-server"
14+
}
15+
}

Diff for: ‎ie8/src.js

+177
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,177 @@
1+
/** @jsx React.DOM */
2+
var React = require('react')
3+
var BS = require('../cjs')
4+
var Button = BS.Button
5+
var DropdownButton = BS.DropdownButton
6+
var MenuItem = BS.MenuItem
7+
var Accordion = BS.Accordion
8+
var Panel = BS.Panel
9+
var ButtonToolbar = BS.ButtonToolbar
10+
var OverlayTrigger = BS.OverlayTrigger
11+
var Tooltip = BS.Tooltip
12+
var Alert = BS.Alert
13+
var TabbedArea = BS.TabbedArea
14+
var TabPane = BS.TabPane
15+
var Modal = BS.Modal
16+
var OverlayMixin = BS.OverlayMixin
17+
18+
19+
20+
21+
22+
var dropdownInstance = (
23+
<DropdownButton title="Dropdown">
24+
<MenuItem key="1">Item 1</MenuItem>
25+
<MenuItem key="2">Item 2</MenuItem>
26+
</DropdownButton>
27+
)
28+
29+
30+
31+
32+
var accordionInstance = (
33+
<Accordion>
34+
<Panel header="Collapsible Group Item #1" key={1}>
35+
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
36+
</Panel>
37+
<Panel header="Collapsible Group Item #2" key={2}>
38+
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
39+
</Panel>
40+
<Panel header="Collapsible Group Item #3" key={3}>
41+
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
42+
</Panel>
43+
</Accordion>
44+
);
45+
46+
47+
48+
49+
var positionerInstance = (
50+
<ButtonToolbar>
51+
<OverlayTrigger placement="left" overlay={<Tooltip><strong>Holy guacamole!</strong> Check this info.</Tooltip>}>
52+
<Button bsStyle="default">Holy guacamole!</Button>
53+
</OverlayTrigger>
54+
<OverlayTrigger placement="top" overlay={<Tooltip><strong>Holy guacamole!</strong> Check this info.</Tooltip>}>
55+
<Button bsStyle="default">Holy guacamole!</Button>
56+
</OverlayTrigger>
57+
<OverlayTrigger placement="bottom" overlay={<Tooltip><strong>Holy guacamole!</strong> Check this info.</Tooltip>}>
58+
<Button bsStyle="default">Holy guacamole!</Button>
59+
</OverlayTrigger>
60+
<OverlayTrigger placement="right" overlay={<Tooltip><strong>Holy guacamole!</strong> Check this info.</Tooltip>}>
61+
<Button bsStyle="default">Holy guacamole!</Button>
62+
</OverlayTrigger>
63+
</ButtonToolbar>
64+
);
65+
66+
67+
68+
69+
var tabbedAreaInstance = (
70+
<TabbedArea defaultActiveKey={2}>
71+
<TabPane key={1} tab="Tab 1">TabPane 1 content</TabPane>
72+
<TabPane key={2} tab="Tab 2">TabPane 2 content</TabPane>
73+
</TabbedArea>
74+
);
75+
76+
77+
78+
79+
var AlertAutoDismissable = React.createClass({
80+
getInitialState: function() {
81+
return {
82+
alertVisible: false
83+
};
84+
},
85+
86+
render: function() {
87+
if (this.state.alertVisible) {
88+
return (
89+
<Alert bsStyle="danger" onDismiss={this.handleAlertDismiss} dismissAfter={2000}>
90+
<h4>Oh snap! You got an error!</h4>
91+
<p>But this will hide after 2 seconds.</p>
92+
</Alert>
93+
);
94+
}
95+
96+
return (
97+
<Button onClick={this.handleAlertShow}>Show Alert</Button>
98+
);
99+
},
100+
101+
handleAlertDismiss: function() {
102+
this.setState({alertVisible: false});
103+
},
104+
105+
handleAlertShow: function() {
106+
this.setState({alertVisible: true});
107+
}
108+
});
109+
110+
111+
112+
113+
var CustomModalTrigger = React.createClass({
114+
mixins: [OverlayMixin],
115+
116+
getInitialState: function () {
117+
return {
118+
isModalOpen: false
119+
};
120+
},
121+
122+
handleToggle: function () {
123+
this.setState({
124+
isModalOpen: !this.state.isModalOpen
125+
});
126+
},
127+
128+
render: function () {
129+
return (
130+
<Button onClick={this.handleToggle} bsStyle="primary">Launch</Button>
131+
);
132+
},
133+
134+
// This is called by the `OverlayMixin` when this component
135+
// is mounted or updated and the return value is appended to the body.
136+
renderOverlay: function () {
137+
if (!this.state.isModalOpen) {
138+
return <span/>;
139+
}
140+
141+
return (
142+
<Modal title="Modal heading" onRequestHide={this.handleToggle}>
143+
<div className="modal-body">
144+
This modal is controlled by our custom trigger component.
145+
</div>
146+
<div className="modal-footer">
147+
<Button onClick={this.handleToggle}>Close</Button>
148+
</div>
149+
</Modal>
150+
);
151+
}
152+
});
153+
154+
155+
156+
157+
var allTests = (
158+
<div>
159+
<h2>Dropdown</h2>
160+
{dropdownInstance}
161+
162+
<h2>Tooltips</h2>
163+
{positionerInstance}
164+
165+
<h2>Tabs</h2>
166+
{tabbedAreaInstance}
167+
168+
<h2>Alert</h2>
169+
<AlertAutoDismissable />
170+
171+
<h2>Modal</h2>
172+
<CustomModalTrigger />
173+
174+
</div>
175+
)
176+
177+
React.renderComponent(allTests, document.body)

0 commit comments

Comments
 (0)