pannels

by jeum

HTML

<div id="Import">
    <div id="pannel0" anti=1>
        <div>
            <h2>Bla bla bla bla</h2>
            <span class="frmlabel">Formats attendus :</span>
            <span class="frmlist">OBJ</span>
            <!-- TODO <img src='icones/import0.png'/> -->
            <span class="impmes">Les fichiers seront directement ouverts.</span>
        </div>
        <div>
            <h2>Bla bla bla bla</h2>
            <span class="frmlabel">Formats attendus :</span>
            <span class="frmlist">OBJ</span>
            <!-- TODO <img src='icones/import1.png'/> -->
            <span class="impmes">Les fichiers seront directement ouverts.</span>
        </div>
        <div class="dropper"></div>
        <input type="checkbox" id="usedeflt"/>
        <label id="usedefltlabel" for="usedeflt">Utiliser la méthode par défaut</label>
        <input type="button" value=">" id="go0"></input>
    </div>
    <div id="pannel1" anti=0>
        <h2 style="width: 400px;">Bla bla bla bla</h2>
        <div class="dropper"></div>
        <div id="convertslist">
            <select size="10">
                <option>a</option>
                <option>b</option>
                <option>c</option>
            </select>
        </div>
        <table id="convertsdata">
            <tr><th>Description :</th><td></td></tr>
            <tr><th>Source :</th><td></td></tr>
            <tr><th>Formats :</th><td></td></tr>
            <tr><th>Options :</th><td></td></tr>
        </table>
        <input type="button" value="<" id="go1"></input>
        <input type="button" value="GO" id="go"></input>
    </div>
</div>

CSS

#Import{
    position: absolute;
	left: 0;
	right: 0;
    margin: auto;
	width: 400px;
	height: 200px;
}
#Import div{
    position: absolute;
	top: 0;
	bottom: 0;
    overflow: hidden;
}
#Import input, #Import label{
    position: absolute;
    bottom: 0;
}
#Import h2, #Import span{
    position: absolute;
    margin: 10px;
}
#Import table{
    position: absolute;
}

.anim{
    -webkit-transition: width 0.75s ease-out;
    -moz-transition: width 0.75s ease-out;
    -o-transition: width 0.75s ease-out;
    transition: width 0.75s ease-out;
}
.dropper{
	left: 0;
	right: 0;
}
#pannel0{
	left: 0;
	width: 100%;
    background-color: blue;
}
#pannel1{
    right: 0;
    width: 0;
    background-color: red;
}
#pannel0 div:nth-child(1){
	right: 0;
	width: 200px;
    border: solid yellow 1px;
}
#pannel0 div:nth-child(2){
	right: 200px;
	width: 200px;
    border: solid yellow 1px;
}
.frmlabel{
	top: 50px;
}
.frmlist{
	top: 70px;
    width: 180px;
    height: 40px;
    border: solid yellow 1px;
}
.impmes{
	top: 110px;
}
#pannel0 #usedeflt{
    right: 180px;
}
#pannel0 #usedefltlabel{
    right: -20px;
    bottom: 0;
    width: 200px;
}
#go0{
    right: 0;
}

#pannel1 #convertslist{
    left: 10px;
	top: 50px;
    height: 100px;
	overflow:hidden;
    border: solid yellow 1px;
}
#pannel1 #convertslist select{
	padding:10px; 
	margin:-5px -20px -5px -5px;
    font-size: 1.1em;
}
#pannel1 #convertsdata{
    left: 100px;
	top: 50px;
    width: 250px;
    border: solid yellow 1px;
}
#pannel1 #convertsdata th{
    width: 120px;
    text-align: right;
}
#go1{
    left: 0;
}
#go{
    left: 357px;
}

JavaScript

document.getElementById('go0').addEventListener('click', toggle, false);	document.getElementById('go1').addEventListener('click', toggle, false);

var transitionEvent = whichTransitionEvent();
console.log(transitionEvent);

document.getElementById('pannel0').addEventListener(transitionEvent, transitionEnded);
document.getElementById('pannel1').addEventListener(transitionEvent, transitionEnded);

function toggle(e){
    var crnt = this.parentElement;
    crnt.style.zIndex = 9;
    
    var anti = document.getElementById( 'pannel' + crnt.getAttribute('anti') );    
    anti.style.zIndex = 10;
    anti.className = 'anim';
    anti.style.width = '100%';
}
function transitionEnded(e){
    var anti = document.getElementById( 'pannel' + this.getAttribute('anti') );
    anti.className = '';
    anti.style.width = 0;
    console.log('>');
}
// http://davidwalsh.name/css-animation-callback
function whichTransitionEvent(){
	var t;
	var el = document.createElement('fakeelement');
	var transitions = { 'transition':'transitionend', 'OTransition':'oTransitionEnd', 'MozTransition':'transitionend', 'WebkitTransition':'webkitTransitionEnd' };
	for(t in transitions){
		if( el.style[t] !== undefined ){
			return transitions[t];
		}
	}
}