Skip to content

Commit

Permalink
code enhancements and background color for popins
Browse files Browse the repository at this point in the history
  • Loading branch information
@plepaisant
plepaisant committed Apr 12, 2016
1 parent 827b60a commit 357c29d
Show file tree
Hide file tree
Showing 2 changed files with 67 additions and 34 deletions.
75 changes: 52 additions & 23 deletions src/application/popin/example/index.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,9 @@
const {MenuLeft} = FocusComponents.components;
const Popin = FocusComponents.application.popin.component;
const {Panel} = FocusComponents.components;

let currentLevel = 0;
const getLevel = function getLevel(){
let currentLevel = 0;
const getLevel = function getLevel() {
currentLevel++;
return currentLevel;
};
Expand All @@ -16,19 +17,19 @@ const MyMenu = React.createClass({
const self = this;
return [
{
icon:'home',
icon: 'home',
onClick() {
self.goHome();
}
},
{
icon:'notifications',
icon: 'notifications',
onClick() {
self.refs.popin.togglePopin();
}
},
{
icon:'chat',
icon: 'chat',
onClick() {
self.refs.thirdPopin.togglePopin();
}
Expand All @@ -37,18 +38,18 @@ const MyMenu = React.createClass({
},
style: {
position: 'fixed',
left:'40%',
top:'30%',
width:'576px'
left: '40%',
top: '30%',
width: '576px'
},
titleStyle: {
color: 'white',
height:' 176px',
height: ' 176px',
backgroundImage: 'url(http://media.dcentertainment.com/sites/default/files/character_bio_576_superman_0.jpg)'
},
makeTheSecondPopinPop() {
const self = this;
self.refs.secondPopin.setState({dynamicPopin : 0});
self.refs.secondPopin.setState({dynamicPopin: 0});
return self.refs.secondPopin.togglePopin();
},
makeTheThirdPopinPop() {
Expand All @@ -66,13 +67,24 @@ const MyMenu = React.createClass({
</div>
<div className="mdl-card__supporting-text" style={this.divSupportText}>
<h5>
Through this example you'll find the different possibilities you got with the Focus Popin component.
Through this example you'll find the different possibilities you got with the Focus Popin
component.
<br/><br/>
Click on <div className="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect"><i className="material-icons">notifications</i></div> icon to have a menu slidding popin
Click on
<div className="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect"><i
className="material-icons">notifications</i></div>
icon to have a menu slidding popin
<br/>
Click on <div className="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect"><i className="material-icons">chat</i></div> icon to have a right slidding popin
Click on
<div className="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect"><i
className="material-icons">chat</i></div>
icon to have a right slidding popin
<br/>
And <button className="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent" onClick={this.makeTheSecondPopinPop}><b>Click here</b></button> to display a fade-in popin example.
And
<button
className="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent"
onClick={this.makeTheSecondPopinPop}><b>Click here</b></button>
to display a fade-in popin example.
<br/>
</h5>
</div>
Expand Down Expand Up @@ -115,19 +127,30 @@ const MyPopin = React.createClass({
const SecondPopin = React.createClass({

getInitialState() {
return {dynamicPopin : 0};
return {dynamicPopin: 0};
},
togglePopin() {
this.refs.secondPopin.setLevel(getLevel());
this.refs.secondPopin.toggleOpen();
},
_renderDynamicPopin(){
const colors = ['grey', 'Cornsilk', 'Gainsboro', 'LightCyan '];
const popins = Array.from(Array(this.state.dynamicPopin).keys())
.map(idx => { return <Popin key={idx} size='small' overlay={false} open={true} level={getLevel()} type='from-right'><h2> Popin {idx+1}</h2> </Popin>});
.map(idx => {
const colorStyle = {backgroundColor: colors[idx % colors.length]};
//const popinTile = 'Popin ' + (idx+1);
const popinTile = `Popin ${idx + 1}`;
return (
<Popin key={idx} size='small' overlay={false} open={true} level={getLevel()}>
<Panel style={colorStyle} title={popinTile}>
<p>Close this popin with Escape key</p>
</Panel>
</Popin>);
});
return popins;
},
addPopup(){
this.setState({dynamicPopin : this.state.dynamicPopin +1});
this.setState({dynamicPopin: this.state.dynamicPopin + 1});
},
render() {
return (
Expand All @@ -139,14 +162,16 @@ const SecondPopin = React.createClass({
<h4>
This Popin is, as described, set the default <b>type</b> named <b>full</b> it defines its animation.
<br/>
You have 3 choices which are <b>"full"</b>, <b>"from-menu"</b> and <b>"from-right"</b>. The modal <b>attribute</b> is, by default, set to true so you can click outside of the Popin to close it.
You have 3 choices which are <b>"full"</b>, <b>"from-menu"</b> and <b>"from-right"</b>. The modal
<b>attribute</b> is, by default, set to true so you can click outside of the Popin to close it.
<br/>
Check the notification icon which is in the Focus menu bar now.
<br/> <br/>
You can add as much popin as you want and close them with esc, from newer to older ones.
</h4>
<br/>
<button className="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent" onClick={this.addPopup}><b>Click here</b></button>
<button className="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent"
onClick={this.addPopup}><b>Click here</b></button>
{this._renderDynamicPopin()}
</Popin>
);
Expand All @@ -168,28 +193,32 @@ const ThirdPopin = React.createClass({
<center>
<b>Material design</b>
<br/>
<iframe width="560" height="315" src="https://www.youtube.com/embed/Q8TXgCzxEnw" frameborder="0" allowfullscreen></iframe>
<iframe width="560" height="315" src="https://www.youtube.com/embed/Q8TXgCzxEnw" frameborder="0"
allowfullscreen></iframe>
<br/>
<br/>
</center>
<center>
<b>Making Material Design: Crafting Material</b>
<br/>
<iframe width="560" height="315" src="https://www.youtube.com/embed/Y0UEGsvcYvk" frameborder="0" allowfullscreen></iframe>
<iframe width="560" height="315" src="https://www.youtube.com/embed/Y0UEGsvcYvk" frameborder="0"
allowfullscreen></iframe>
<br/>
<br/>
</center>
<center>
<b>Material Design : Palette Perfect</b>
<br/>
<iframe width="560" height="315" src="https://www.youtube.com/embed/xYkz0Ueg0L4" frameborder="0" allowfullscreen></iframe>
<iframe width="560" height="315" src="https://www.youtube.com/embed/xYkz0Ueg0L4" frameborder="0"
allowfullscreen></iframe>
<br/>
<br/>
</center>
<center>
<b>Material Desing : Story</b>
<br/>
<iframe width="560" height="315" src="https://www.youtube.com/embed/rrT6v5sOwJg" frameborder="0" allowfullscreen></iframe>
<iframe width="560" height="315" src="https://www.youtube.com/embed/rrT6v5sOwJg" frameborder="0"
allowfullscreen></iframe>
</center>
</Popin>
);
Expand Down
26 changes: 15 additions & 11 deletions src/application/popin/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,7 +71,8 @@ const popin = {
*/
getInitialState() {
return ({
opened: this.props.open
opened: this.props.open,
level: this.props.level,
});
},
/**
Expand Down Expand Up @@ -102,7 +103,8 @@ const popin = {
types: types('string'),
level: types('number'),
overlay: types('bool'),
open: types('bool')
open: types('bool'),
size: PropTypes.oneOf(['small', 'medium', 'large']),
},
/**
* Wheel event handler.
Expand Down Expand Up @@ -156,11 +158,16 @@ const popin = {
},

componentDidMount() {
if (this.state.opened){
if (this.state.opened) {
window.addEventListener('keydown', this.handleKeyDown, true);
}
},

componentWillReceiveProps(nextProps){
const {level} = nextProps;
if(level){
this.setState({level:level});
}
},
componentWillUnmount() {
window.clearTimeout(this._openTimeoutID);
},
Expand All @@ -169,7 +176,7 @@ const popin = {
* @param level
*/
setLevel(level) {
this.setState({level : level});
this.setState({level: level});
},
/**
* keyboard event handler
Expand All @@ -182,12 +189,12 @@ const popin = {
if (this.state.opened) {
const popins = [...document.querySelectorAll("[data-focus='popin']")].reduce((prec, current) => {
if (current.hasChildNodes()) {
prec.push(Number(current.getAttribute('data-level')));
prec.push(+current.getAttribute('data-level'));
}
return prec;
}, []);

const level = this.state.level || this.props.level;
const level = this.state.level;
if (max(popins) === level) {
this.toggleOpen();
e.stopPropagation();
Expand All @@ -202,7 +209,7 @@ const popin = {
*/
render() { // test for this.state.opened and return an Overlay component if true
const {type, modal, overlay, children} = this.props;
const level = this.state.level || this.props.level;
const {level} = this.state;
return (
<div data-focus='popin' data-level={level} data-size={this._validateSize()} data-type={type}>
{this.state.opened &&
Expand Down Expand Up @@ -255,9 +262,6 @@ const popin = {
* @private
*/
_validateSize() {
if (!includes(['small', 'medium', 'large'], this.props.size)) {
throw new ArgumentInvalidException('Please provide a valid popin size among small, medium and large. Provided ' + this.props.size);
}
return this.props.size;
},
/**
Expand Down

0 comments on commit 357c29d

Please sign in to comment.