Riot version With Childrens

by jpeter06

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/riot/2.2.1/riot+compiler.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<riot-menu></riot-menu>
<!--    <button onclick="changePage(1)">page1</button>
    <button onclick="changePage(2)">page2</button> -->

<div id="main"></div>

<script type="riot/tag">
    <riot-menu>
        <ul>
            <li class={focused:this.parent.selected==i} 
            each={ item, i in opts.items } 
            onclick={this.parent.click} >{ item }</li>
        </ul>
        <p>{opts.items[this.selected]}</p>
        
       this.selected=0
       console.log(this.selected)
        
       click(e){
            this.parent.selected=e.item.i;
            changePage(e.item.i+1)
            this.update();
        }
    </riot-menu>
    
    <riot-graph class="fullsize">
        this.titulo=opts.titulo || 'GrÁfico';
        isMounted=false;
        
        this.on('mount', function(eventName) {
            isMounted=true;
            addPIE(this.root);
            console.log('dd',this.titulo);
            $(this.root).highcharts().setTitle({ text: this.titulo});
          })
        
        this.on('update', function(e) { 
            if(isMounted){
              console.log('titulo:',this.titulo)
              $(this.root).highcharts().setTitle({ text: this.titulo});
            }
        })
        
    </riot-graph>

    <riot-table class="fullsize">
        <h5>{opts.titulo}</h5>
    </riot-table>

    <riot-map class="fullsize">
        <h5>{opts.titulo}</h5>
    </riot-map>

    <riot-container>
           ...

CSS

html, body 
{
    height: 100%;
    width: 100%;
    margin: 0px;
    padding: 0px;
    overflow: hidden;
    background:#888;
    font-family:Arial;
}

/* donde introducimos las paginas cargadas */
#main{
    position: fixed;
    width:100%;
    top:60px;
    bottom:0px;
}
.riot-page{
    box-sizing: border-box;
  display: block;
    width:100%;
    padding:2px;
}

riot-graph{
  display: block;
    background:#ddd;
}

riot-table{
  display: block;
    background:lightgray;
}

riot-map{
  display: block;
    background:#eee;
}

riot-container{
  box-sizing: border-box;
  display: block;
    float:left;
    padding:2px;
 }

.fullsize{
    box-sizing: border-box;
    height:100%;
    width:100%;
    padding:2px;
}


/*** MENU ***/
riot-menu{
    position: fixed;
    height:60px;
    width:100%;
    top:0px;
}

riot-menu ul{
    list-style:none;
    display: inline-block;
    float:left;
    margin-top:10px;
}

riot-menu ul li{
    display: inline-block;
    padding: 10px 20px;
    cursor:pointer;
    background-color:#eee;
    color:#7B8585;
    
    transition:0.3s;
}

riot-menu ul li:hover{
    background-color:#beecea;
}

riot-menu ul li.focused{
    color:#fff;
    background-color:#41c7c2;
}

riot-menu p{
    padding-top:12px;
    font-size:12px;
    color:white;
    float:left;
    margin-left:20px;
    font-size:20px;
    font-family:Verdana, Geneva, sans-serif;
}

/* http://davidwalsh.name/css-flip */
.flipContainer {
  position: relative;
  height: 100%;
  width: 100%;
  margin: 0 auto;
  display:block;
}

.flipContainer > div.flipped {
  position: absolute;
  left: 0; 
  top: 0;
  width: 100%;
  height: 100%;
  background: #463;
  transition: 0.6s ease-in-out;
}

.flipContainer > div.lower {
  background: #fff;
  backface-visibility: hidden;
  transform: perspective(11800px) rotateY(180deg);
}

.flipContainer > div.upper {
  backface-visibility: hidden;
  transform: perspective(11800px) rotateY(0deg);
}

/*class flip */
.flipContainer.flip div.lower {
 ...

JavaScript

$(function () {
riot.mount('riot-menu',
           {items:['riot-page1','riot-page2','riot-page3']});

riot.mount('#main','riot-page1',
           {titulo:'titulo página'});

animateComponents(100);
});

//animateComponents(time);

function animateComponents(time){
    setTimeout(function (){
        $('.p_b, .p_t,.p_lt, .p_rt, .p_r, .p_l, .p_lb, .p_rb').toggleClass('moveOut');}, time);
}

var animating=false;
function changePage(num){
    if(animating) return;
    animating=true;
    animateComponents(0);
    setTimeout(function () {
    	//mount new page
    	riot.mount('#main','riot-page'+num,
           {titulo:'titulo página'+num});
        animateComponents(100);
        animating=false;
    }, 800);
}

//WHITH PIE

function	addPIE(identificador) {


	
	    // Build the chart
	    $(identificador).highcharts({
	        chart: {
	            plotBackgroundColor: 'rgba(0,0,0,0)',
	            backgroundColor: 'rgba(0,0,0,0)',
	            color:'white',
	            plotBorderWidth: null,
	            plotShadow: false
	        },
	        title: {
	            text: 'Datos de consumo', style:{color:'white'}
	        },
	        tooltip: {
	            pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
	        },
	        plotOptions: {
	            pie: {
	                allowPointSelect: true,
	                cursor: 'pointer',
	                dataLabels: {
	                    enabled: false,
	                    style: {
	                        color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'white'
	                    }
	                }
	            }
	        },
	        series: [{
	            type: 'pie',
	            itemStyle:{'color':'white'},
	            name: 'Inf. Adicional',
	            data: [
	                ['Madrid',   45.0],
	                ['Barcelona',       26.8],
	                {
	                    name: 'Chrome',
	                    y: 12.8,
	                    sliced: true,
	            ...