Csca

Multipage
#popup {
visibility: hidden;
opacity: 0;
margin-top: -300px;
}*
#popup:target {
visibility:visible;
opacity: 1;
background-color: rgba(0,0,0,0.8);
position: fixed;
top:0;
left:0;
right:0;
bottom:0;
margin:0;
z-index: 999;
transition:all 1s;
}*
.popup-contenedor {
position: relative;
margin:7% auto;
padding:30px 50px;
background-color: #fafafa;
color:#333;
border-radius: 3px;
width:60%;
height: 60%;
}
a.popup-cerrar {
position: absolute;
top:3px;
right:3px;
background-color: #333;
padding:7px 10px;
font-size: 20px;
text-decoration: none;
line-height: 1;
color:#fff;
}
.popup-contenedor h1{
text-align: center;
}
a.popup-link{
border:1px solid #0D333D;
color: #0D333D;
background: #DFF1F2;
padding: 1%;
border-radius: 5%;
display:scroll;
position:fixed;
bottom:10%;
right:2%;
}
.titulo{
text-align: center;
padding:5%;
font-weight: 900;
}
.multiform h4{
border: 1px solid #0D333D;
text-align: center;
display: inline-block;
margin-left: 15%;
border-radius: 100%;
padding-top: 20px;
padding-bottom: 20px;
padding: 2% 1% 2% 1%;
width: 7%;
color: #0D333D;
}
.multiform{
display: inline;
}
.barra_progreso {
width: 100%; /* Full width */
background-color: #ddd; /* Grey background */
}
.progreso {
text-align: right; /* Right-align text */
padding-top: 10px; /* Add top padding */
padding-bottom: 10px; /* Add bottom padding */
color: white; /* White text color */
}
.multipage-controls-list #edit-actions {
float: left; /* LTR */
}
.multipage-button {
margin-bottom: 1em;
margin-top: 0;
line-height: 36px;
}
.multipage-button a {
padding-top: 10px;
}
.multipage-counter {
float: right; /* LTR */
margin-right: 5px; /* LTR */
height: 0;
position: relative;
top: 1.8em;
line-height: 30px;
font: 12px arial,sans-serif;
font-weight: bold;
color:#666;
}
a.multipage-link-previous {
font-weight: bold;
color:#666;
-webkit-transition: color 218ms;
-moz-transition: color 218ms;
-o-transition: color 218ms;
transition: color 218ms;
}
a.multipage-link-previous:hover {
text-decoration:none;
color: #333;
}
.multipage-controls-list input.form-submit {
background:none;
border: none;
border-radius: 2px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border: 1px solid rgba(0, 0, 0, 0.1);
font-weight: bold;
color: #666;
text-shadow: 0 1px 0 white;
padding: 7px 12px;
background: -webkit-gradient(linear,0% 40%,0%
70%,from(whiteSmoke),to(#F1F1F1));
-o-transition: border-top-color 0.218s,border-right-color
0.218s,border-bottom-color 0.218s,border-left-color .218s;
-webkit-transition: border-color .218s;
}
.multipage-controls-list input.form-submit:hover {
color:#333;
box-shadow: 0 1px 1px rgba(0,0,0,0.1);
-webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.1);
border-color: #939393;
}
.multipage-controls-list input.form-submit:active {
70%,from(#F1F1F1),to(whiteSmoke));
}
.multipage-controls-list input#edit-submit {
background: #4D90FE; /* for non-css3 browsers */
background-image: #4D90FE; /* for non-css3 browsers */
background-image: -o-linear-gradient(top,#4d90fe,#4787ed);
filter:
progid:DXImageTransform.Microsoft.gradient(startColorstr='#4D90FE',
endColorstr='#4787ED'); /* for IE */
background: -webkit-gradient(linear, center top, center bottom,
from(#4D90FE), to(#4787ED)); /* for webkit browsers */
background: -moz-linear-gradient(center top, #4D90FE, #4787ED); /*
for firefox 3.6+ */
color: white;
text-shadow: none;
text-transform: uppercase;
min-width: 79px;
}
.multipage-controls-list input#edit-submit:hover {
background-image: -moz-linear-gradient(top,#4d90fe,#357ae8);
background-image: -o-linear-gradient(top,#4d90fe,#357ae8);
background-image: -webkit-gradient(linear,left top,left
bottom,from(#4d90fe),to(#357ae8));
color: white;
text-shadow: none;
}
.multipage-controls-list input#edit-submit:active {
background: #4D90FE;
border-color: #2F5BB7;
}
.multipage-controls-list input#edit-delete {
background-image: -moz-linear-gradient(top,#dd4b39,#d14836);
background-image: -o-linear-gradient(top,#dd4b39,#d14836);
bottom,from(#dd4b39),to(#d14836));
text-shadow: 0 1px rgba(0, 0, 0, 0.1);
border: 1px solid transparent;
color: white;
text-shadow: none;
.multipage-controls-list input#edit-delete:hover {
background-image: -moz-linear-gradient(top,#dd4b39,#c53727);
background-image: -o-linear-gradient(top,#dd4b39,#c53727);
bottom,from(#dd4b39),to(#c53727));
border: 1px solid #B0281A!important;
border-bottom: 1px solid #AF301F!important;
color: white;
}
.multipage-controls-list input#edit-delete:active {
background-image: -moz-linear-gradient(top,#dd4b39,#b0281a);
background-image: -o-linear-gradient(top,#dd4b39,#b0281a);
bottom,from(#dd4b39),to(#b0281a));
border: 1px solid #992A1b!important;
}
Css inj arbol
.tree ul {
padding-top: 20px; position: relative;
transition: all 0.5s;

-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
}
.tree li {
float: left;
text-align: center;
list-style-type: none;
position: relative;
padding: 20px 5px 0 5px;

}
.tree li::before, .tree li::after{

content: '';
position: absolute; top: 0; right: 50%;
border-top: 5px solid #0D333D;
width: 50%; height: 20px;
}
.tree li::after{
right: auto; left: 50%;
border-left: 5px solid #0D333D;
}
.tree li:only-child::after, .tree li:only-child::before {

display: none;
}
.tree li:only-child{ padding-top: 0;}
.tree li:first-child::before, .tree li:last-child::after{

border: 0 none;
}
.tree li:last-child::before{
border-right: 5px solid #0D333D;
border-radius: 0 5px 0 0;
-webkit-border-radius: 0 5px 0 0;
-moz-border-radius: 0 5px 0 0;
}
.tree li:first-child::after{
border-radius: 5px 0 0 0;
-webkit-border-radius: 5px 0 0 0;
-moz-border-radius: 5px 0 0 0;
}
.tree ul ul::before{
content: '';
position: absolute; top: 0; left: 50%;
border-left: 5px solid #0D333D;
width: 0; height: 20px;
}
.tree li div{
border: 2px solid #FFFEEE;
padding: 5px 10px;
color: #0D333D;
font-family: arial, verdana, tahoma;
font-size: 15px;
border-radius: 5px;

height: 5vw;
width: 6vw;
-webkit-box-shadow: -10px 14px 21px -8px rgba(0,0,0,0.75);

-moz-box-shadow: -10px 14px 21px -8px rgba(0,0,0,0.75);
box-shadow: -10px 14px 21px -8px rgba(0,0,0,0.75);
}
/*.tree li div:hover, .tree li div:hover+ul li div {
background: #c8e4f8; color: #000; border: 1px solid #94a0b4;
}
.tree li div:hover+ul li::after,
.tree li div:hover+ul li::before,
.tree li div:hover+ul::before,
.tree li div:hover+ul ul::before{
border-color: #94a0b4;
}*/
Css inj general
#block-dkan-sitewide-dkan-sitewide-search-bar{
display:none!important;
}
.opciones-adm-sima{
padding:0rem 0;
}
.elemento-adm-sima {
text-align:center;
padding:5rem 0;
}
@media only screen and (max-width: 1499px) {

.ejemplo-1 img {
transition: all 0.2s linear;

min-width: 220px;
height: 260px;
}
.herramientas_app p{
margin:0 10% 0;
text-align:justify;
}
.herramientas_app img{
padding:0 25% 0;
}
.btn-adm{
color:#ffffff;
background-color:rgb(29, 116, 146);
}
.btn-descarga{
margin-top: 10px;
background-color:rgb(29, 116, 146);
width:100%;
}
.btn-descarga img{
height:3em;
}
.barra_busqueda{
padding: 20px 0 20px 0;
}
.tabla *{
text-align:center;
}
.tabla> .table > thead > tr > th {

padding:0px !important;
vertical-align: top !important;
}
.btn-sima{
background-color: rgba(61, 103, 118, 0.6) !important;
width: 40vw;
}
.btn-sima:hover{
background-color: rgba(61, 103, 118, 1) !important;
}
.tabla thead,.tabla td,.tabla tr ,.tabla tr td ,.tabla th,.tabla >
thead > tr > th{
border-style:solid !important;
border-color: white !important;
border-width: 1em !important;
}
.tabla tbody tr:hover td{

background:#30798C;
}
.tabla > thead > tr > th{

padding: 10px !important;
}
.tabla{
text-align: center;
padding-left: 15vw;
padding-right: 15vw;
}
.tabla td img{
/*width: auto;*/
height: 10%;
padding: 30%;
}
.tabla th img{
width: 99%;
height: 15vw;
max-height: 10em;
}
.tabla tbody{
background-color:#DFF1F3;
}
.table thead{
background-color: #fff;
width: 30%;
height: 70%;
}
.tabla td:first-child{
width: 10em;
background-color: #30798C;
color:#fff;
height:10em;
vertical-align:middle;
text-align:left;
}
.rol{
background-color: #f3f3f3;
.rol_blanco{
background-color: #fff;
}
.radix-layouts-sidebar{
display:none;
}
.img_celular{
transform 1.2s;
}
.img_celular:hover {
transform: scale(1.2); /* (150% zoom - Note: if the zoom is too large,
it will go outside of the viewport) */
}
.contactenos {
padding-top: 1%;
}
.titulo_app{
padding-top: 1%;
}
.btn_p_frecuentes{
background-color: rgba(61, 103, 118, 0.6);
border: none;
color: #FFFFFF;
text-align: center;
margin: 3%;
/* height: 5em;*/
vertical-align: middle;
width:70vw;
font-size:2em;
width: 20%;
}
.btn_p_frecuentes a:visited{
color:#ffffff;
}
.preguntas_frecuentes{
/* Location of the image */
background-image:
url(/profiles/dss_magdalena/modules/dss_magdalena/dss_interface/images
/elementos_index/18-imagen_banner.jpg);
/* Background image is centered vertically and horizontally at all
times */
times */
background-position: center center;
/* Background image doesn't tile */
background-repeat: no-repeat;
/* Background image is fixed in the viewport so that it doesn't move
when
the content's height is greater than the image's height
*/
/* background-attachment: fixed;*/
/* This is what makes the background image rescale based
on the container's size*/
background-size: cover;
/* Set a background color that will be displayed
while the background image is loading */
7 text-align:center;
height:10em;
.elementos_app{
margin:0 15%;
padding:1em;
}
.contactenos{
min-height:13em;
max-height:13em;

background-image:
/elementos_index/23-imagen.jpg);
times */

times */

when
*/
color:#ffffff;
.frases{
/* min-height:13em;
max-height:13em;
*/
background-image:
times */

times */

when
*/
color:#ffffff;
.app_movil{
background-image:
/elementos_index/24-imagen.jpg);
times */

times */

}
.frases{

background-image:
times */

times */

when
*/
color:#ffffff;
}
.frases .view-content{
/* padding: 3% 10% 3% 10%;*/
}
.titulo_servicios_rol{
text-align: center;
padding-top: 1%;
}
h1{
color:#105659;
font:'open sans';
}
h2{
color:#105659;
font:'open sans';
}
h3{
color:#105659;
font:'open sans';
}
.main .panel-pane {
margin-bottom: 0em;
}
.leaflet-container.leaflet-touch-drag.leaflet-touch-zoom{
z-index:0;
}
.contenedor-img-capa{
/*width: 300px;
height: 200px;
float: left;
*/
overflow: hidden;
/*position: relative;*/
text-align: center;
cursor: default;
background: #fff;
margin: 0 20% 0;
min-width: 300px;
}
.contenedor-img-capa img{
width:100%;
}
.contenedor-img-capa p{
padding: 0 10% 0;
}
.lista_capas{
text-align:center;
padding-top:0em;
padding-bottom:1em;
}
.titulo_capas{
text-align: center;
padding-top: 1%;
}
.capas_sima {
background-image:
/elementos_index/05-pescador.jpg);
times */

times */
/*background-position: center center;*/
when
*/
on the container's size */

}
#block-dss-interface-sima-games{
background-color:#fff;
margin:0 5% 0;
padding-bottom:1.5em;
}
#block-dss-interface-sima-games h2{
text-align:center;
text-transform:uppercase;
#bienvenidosima {
background: #436d81; /* fallback for old browsers */
background: -webkit-linear-gradient(to top,#436d81, #E4E5E6 ); /*
Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to top, #436d81,#E4E5E6 ); /* W3C, IE
10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
background-image:
/elementos_index/28-Bienvenidos.jpg);
/* Location of the image /*

times */

when
*/

while the background image is loading
background-color: #464646;*/
}
#titulo_bienvenida{
padding-top: 9%;
text-align: center;
height:0.5em;
}
#desc_Bienvenidos{
padding-top: 4.5em;
padding-left: 20%;
padding-right: 20%;
}
#cuadros{
padding-left: 5%;
padding-right: 5%;
}
#cuadro1{
text-align:center;
}
#cuadro1 img{
width:100%;
height:60%;
/*padding-bottom: 3em;*/
}
#cuadro1 *{
-webkit-transition: transform 2s ease;
-moz-transition: transform 2s ease;
-ms-transition: transform 2s ease;
-o-transition: transform 2s ease;
transition: transform 2s ease;
margin-bottom: 1em;
.partes_sima{
position: relative;
text-align: center;
margin-bottom: 3em;
}
.centrado{
position: absolute;
top: 60%;
color:#fff;
font-size:1em;
text-align:justify;
margin:0 10% 0;
}
#modelos_en_sima {
background-image: url(http://test.sima-
magdalena.co/profiles/dss_magdalena/modules/dss_magdalena/dss_interfac
e/images/elementos_index/09-mapa.jpg);

times */

when
*/

}
#titulo_modelos{
text-align: center;
padding-top:1%;
}
.modelo{
text-align:center;
background-color:#f0f0f0;
padding: 1em 0em 1em;
}
.lista_modelos {
/*padding-left: 15vw;
padding-right: 10vw;*/
padding-top: 1em;
}
.lista_modelos:nth-child(2){
padding-left: 10vw;
padding-right: 10vw;
padding-top: 1em;
}
.lista_modelos{
padding: 0 5% 0 !important;
}
}
.contenedor-img-capa {
margin:0px 0% 0px auto !important
}
#modelos_en_sima {
background-image:
/elementos_index/09-mapa.jpg);
times */

background-repeat: round;

when
*/

}
}
.partes_sima:hover img{
transform: translateX( -1px ) rotateY( 180deg ); /* ALSO EXTRA
TRANSFORM PROPERTIES ADDED FOR COMPATIBILITY*/
-ms-transform: translateX( -1px ) rotateY(180deg); /* IE 9 */
-webkit-transform: translateX( -1px ) rotateY(180deg); /*
Chrome, Safari, Opera */
}
/* efecto de flash
.partes_sima:hover img {
opacity: 1;
-webkit-animation: flash 1.5s;
animation: flash 1.5s;
}
@-webkit-keyframes flash {
0% {
opacity: .4;
}
100% {
opacity: 1;
}
}
@keyframes flash {
0% {
opacity: .4;
}
100% {
opacity: 1;
}
}
*/
/*
Efectos modelos
*/
/*Estilos Base*/
.contenedor-img {
/*width: 300px;
height: 200px;*/
float: left;
overflow: hidden;
position: relative;
text-align: center;
cursor: default;
background: #fff;
}
.contenedor-img .mascara,.contenedor-img .contenido {
/*width: 300px;*/
height: 100%;
position: absolute;
overflow: hidden;
top: 0;
left: 0
}
.contenedor-img img {
display: block;
position: relative;
}
.contenedor-img h2 {
color: #fff;
text-align: center;
position: relative;
font-size: 17px;
padding: 10px;
background: rgba(0, 0, 0, 0.9);
margin: 20px 0 0 0
}
.contenedor-img p {
position: relative;
color: #fff;
padding: 0px 0px 0px;
text-align: center
}
.contenedor-img a.link {
padding: 0px 20px;
background: #222;
color: #fff;
box-shadow: 0 0 1px #000
}
.contenedor-img a.link:hover {
box-shadow: 0 0 5px #000
}
/*Ejemplo 1*/
.ejemplo-1 img {
linear;
min-width: 200px;
}
.ejemplo-1 .mascara {
opacity: 0;
transition: all 0.3s ease-in-out;
}
.ejemplo-1 h2 {
transform: translateX(-200px);/*Desplazamos a la izquierda*/
opacity: 0;
}
.ejemplo-1 p {
margin:20px;
color:#FFFFFF;
transform: translateX(200px);/*Desplazamos a la derecha*/
opacity: 0;
}
.ejemplo-1 a.link{
opacity: 0;
transform: translateY(100px)/*Desplazamos para abajo*/
}
.ejemplo-1:hover img {
transform: scale(1.2);/*Damos un ligero zoom a la imagen*/
}
.ejemplo-1:hover .mascara {
opacity: 0.9;
}
.ejemplo-1:hover h2,
.ejemplo-1:hover p,
.ejemplo-1:hover a.link {
opacity: 1;
transform: translateX(0px);/*Regresamos a las posiciones originales*/
}
.ejemplo-1:hover p {
transition-delay: 0.1s;
}
.ejemplo-1:hover a.link {
transition-delay: 0.2s; /*Aplicamos un pequeño retardo para que se
muestre al final*/
transform: translateY(0px);
}
.Logos{
align-content: center;
text-align: center;
background: #ffffff;
}
.Logos img{
width: 90%;
/*height: 90px;*/
}
.btn_p_frecuentes.btn-sima.btn.btn-lg.btn-primary{
height: 50px;
font-size: 25px;
width: 20vw;
}
.btn-sima.btn.btn-lg.btn-primary{
height: 50px;
font-size: 25px;
width: 20vw;
}
.field-content{
height: 100px;
width: 99vw !important;
margin-top: 3em;
font-size: 23px;
}
.view-header{
background: #104659;
}
Multipage.js
(function ($) {
$( document ).ready(function() {
/*var id = $(this).attr("datos basicos");
console.log(id);*/
tipoForm = document.getElementById("seleccion de escenario");
tipoForm1 = document.getElementById("selección hidroenergía");
tipoForm2 = document.getElementById("selección clima");
if (tipoForm1 == undefined && tipoForm2 == undefined ){
document.getElementById("datos basicos").innerHTML = "Paso 1";
document.getElementById("datos basicos").style.backgroundColor =
"#104659";
document.getElementById("datos basicos").style.color =
"#DFF1F2";
document.getElementById("seleccion de escenario").innerHTML =
"Paso 2";
document.getElementById("seleccion de plan integral").innerHTML
= "Paso 3";
document.getElementById("Datos finales").innerHTML = "Paso 4";
document.getElementById("paso1M").style.backgroundColor =
"#104659";
document.getElementById("paso1M").style.color = "#DFF1F2";
}
if (tipoForm == undefined && tipoForm2 == undefined){
"#104659";
"#DFF1F2";
document.getElementById("multiformid").style.marginLeft = "-
15%";
document.getElementById("selección hidroenergía").innerHTML =
"paso 2 ";
document.getElementById("selección uso del suelo").innerHTML =
"paso 3 ";
document.getElementById("selección humedales").innerHTML = "paso
4 ";
document.getElementById("datos finales").innerHTML = "paso 5 ";
}
if(tipoForm == undefined && tipoForm1 == undefined){
document.getElementById("selección clima").innerHTML = "Paso 1";
document.getElementById("selección clima").style.backgroundColor
= "#104659";
document.getElementById("selección clima").style.color =
"#DFF1F2";
document.getElementById("selección energía").innerHTML = "paso 2
";
document.getElementById("selección población").innerHTML = "paso
3 ";
}
});
/**
* This script transforms a set of wrappers into a stack of
multipage pages.
* Another pane can be entered by clicking next/previous.
*
*/
Drupal.behaviors.MultiPage = {
attach: function (context) {
$('.multipage-panes', context).once('multipage', function () {
var focusID = $(':hidden.multipage-active-control',

this).val();
var paneWithFocus;
// Check if there are some wrappers that can be converted to

multipages.
var $panes = $('> div.field-group-multipage', this);
var $form = $panes.parents('form');
if ($panes.length == 0) {
return;
}
// Create the next/previous controls.

var $controls;
// Transform each div.multipage-pane into a multipage with

controls.
$panes.each(function () {
$controls = $('<div class="multipage-controls-list

clearfix"></div>');
$(this).append($controls);
// Check if the submit button needs to move to the latest

pane.
if (Drupal.settings.field_group.multipage_move_submit &&
$('.form-actions').length) {
$('.form-actions', $form).remove().appendTo($(this,
$panes.last()));
}
var multipageControl = new Drupal.multipageControl({

title: $('> .multipage-pane-title', this).text(),
wrapper: $(this),
has_next: $(this).next().length,
has_previous: $(this).prev().length
});
$controls.append(multipageControl.item);
$(this)
.addClass('multipage-pane')
.data('multipageControl', multipageControl);
if (this.id == focusID) {
paneWithFocus = $(this);
}
});
if (paneWithFocus === undefined) {

// If the current URL has a fragment and one of the tabs
contains an
// element that matches the URL fragment, activate that tab.
var hash = window.location.hash.replace(/[=%;,\/]/g, "");
if (hash !== '#' && $(hash, this).length) {
paneWithFocus = $(window.location.hash,
this).closest('.multipage-pane');
}
else {
paneWithFocus = $('multipage-open', this).length ?
$('multipage-open', this) : $('> .multipage-pane:first', this);
}
}
if (paneWithFocus !== undefined) {
paneWithFocus.data('multipageControl').focus();
}
});
}
};
/**
* The multipagePane object represents a single div as a page.
*
* @param settings
* An object with the following keys:
* - title: The name of the tab.
* - wrapper: The jQuery object of the <div> that is the tab pane.
*/
var paso=1;
function siguientePagina(e){
if (tipoForm1 == undefined && tipoForm2 == undefined){
if ( paso == 1 ){
document.getElementById("datos basicos").style.backgroundColor
= "#104659";
}
if ( paso == 2 ){
= "#2ca13a";
document.getElementById("datos basicos").innerHTML = "✓";
"#DFF1F2";
document.getElementById("seleccion de
escenario").style.backgroundColor = "#104659";
document.getElementById("seleccion de escenario").style.color
= "#DFF1F2";
"#2ca13a";
"#104659";
}
if ( paso == 3 ){
escenario").style.backgroundColor = "#2ca13a";
"✓";
document.getElementById("seleccion de plan
integral").style.backgroundColor = "#104659";
integral").style.color = "#DFF1F2";
"#2ca13a";
document.getElementById("paso2M1").style.backgroundColor =
"#2ca13a";
document.getElementById("paso2M1").style.color = "#DFF1F2";
"#2ca13a";
"#2ca13a";
"#104659";
}
if ( paso == 4 ){
integral").style.backgroundColor = "#2ca13a";
integral").innerHTML = "✓";
document.getElementById("Datos finales").style.backgroundColor
= "#104659";
document.getElementById("Datos finales").style.color =
"#DFF1F2";
"#2ca13a";
"#2ca13a";
"#2ca13a";
"#2ca13a";
}
}
if ( paso == 1 ){
= "#104659";
}
if ( paso == 2 ){
= "#2ca13a";
"#DFF1F2";
document.getElementById("selección
hidroenergía").style.backgroundColor = "#104659";
document.getElementById("selección hidroenergía").style.color
= "#DFF1F2";
"#104659";
}
if ( paso == 3 ){
hidroenergía").style.backgroundColor = "#2ca13a";
"✓";
document.getElementById("selección uso del
suelo").style.backgroundColor = "#104659";
document.getElementById("selección uso del suelo").style.color
= "#DFF1F2";
"#2ca13a";
"#104659";
}
if ( paso == 4 ){
suelo").style.backgroundColor = "#2ca13a";
"✓";
humedales").style.backgroundColor = "#104659";
document.getElementById("selección humedales").style.color =
"#DFF1F2";
"#2ca13a";
"#104659";
}
if ( paso == 5 ){
humedales").style.backgroundColor = "#2ca13a";
document.getElementById("selección humedales").innerHTML =
"✓";
document.getElementById("datos finales").style.backgroundColor
= "#104659";
document.getElementById("datos finales").style.color =
"#DFF1F2";
}
}
if ( paso == 1 ){
clima").style.backgroundColor = "#104659";
}
if ( paso == 2 ){
clima").style.backgroundColor = "#2ca13a";
document.getElementById("selección clima").innerHTML = "✓";
"#DFF1F2";
energía").style.backgroundColor = "#104659";
document.getElementById("selección energía").style.color =
"#DFF1F2";
"#104659";
}
if ( paso == 3 ){
energía").style.backgroundColor = "#2ca13a";
document.getElementById("selección energía").innerHTML = "✓";
población").style.backgroundColor = "#104659";
document.getElementById("selección población").style.color =
"#DFF1F2";
"#2ca13a";
"#104659";
}
if ( paso == 4 ){
población").style.backgroundColor = "#2ca13a";
document.getElementById("selección población").innerHTML =
"✓";
= "#104659";
"#DFF1F2";
"#2ca13a";
"#104659";
}
}
};
function retrocederPaso(e){
if ( paso == 1 ){
= "#104659";
escenario").style.backgroundColor = "#DFF1F2";
"Paso 2";
= "#0D333D";
"#104659";
"#FFF";
document.getElementById("paso2M").style.color = "#104659";
}
if ( paso == 2 ){
"Paso 2";
integral").style.backgroundColor = "#DFF1F2";
integral").style.color = "#0D333D";
integral").innerHTML = "Paso 3";
"#104659";
"#FFF";
"#FFF";
document.getElementById("paso2M1").style.color = "#104659";
"#FFF";
"#FFF";
}
if ( paso == 3 ){
= "#DFF1F2";
"#0D333D";
"#104659";
"#FFF";
"#FFF";
"#FFF";
}
}
if ( paso == 1 ){
"#104659";
hidroenergía").style.backgroundColor = "#DFF1F2";
"Paso 2";
document.getElementById("selección hidroenergía").style.color =
"#0D333D";
"#FFF";
}
if ( paso == 2 ){
"Paso 2";
suelo").style.backgroundColor = "#DFF1F2";
document.getElementById("selección uso del suelo").style.color =
"#0D333D";
"Paso 3";
"#104659";
"#FFF";
}
if ( paso == 3 ){
"Paso 3";
humedales").style.backgroundColor = "#DFF1F2";
"#0D333D";
document.getElementById("selección humedales").innerHTML = "Paso
4";
"#104659";
"#FFF";
}
if ( paso == 4 ){
4";
document.getElementById("datos finales").style.backgroundColor =
"#DFF1F2";
"#0D333D";
document.getElementById("datos finales").innerHTML = "Paso 5";
}
}
if ( paso == 1 ){
= "#104659";
energía").style.backgroundColor = "#DFF1F2";
document.getElementById("selección energía").innerHTML = "Paso
2";
"#0D333D";
"#FFF";
}
if ( paso == 2 ){
2";
población").style.backgroundColor = "#DFF1F2";
document.getElementById("selección población").innerHTML = "Paso
3";
"#0D333D";
"#104659";
"#FFF";
document.getElementById("paso2M2").style.color = "#104659"
}
if ( paso == 3 ){
3";
"#DFF1F2";
"#0D333D";
"#104659";
"#FFF";
}
}
}
Drupal.multipageControl = function (settings) {

var self = this;
var controls = Drupal.theme('multipage', settings);
$.extend(self, settings, controls);
this.nextLink.click(function (e) {
paso++;
siguientePagina(paso);
e.preventDefault();
self.nextPage();
});
this.previousLink.click(function (e) {
paso--;
retrocederPaso(paso);
e.preventDefault();
self.previousPage();
});
/*
// Keyboard events added:
// Pressing the Enter key will open the tab pane.
this.nextLink.keydown(function(event) {
if (event.keyCode == 13) {
self.focus();
// Set focus on the first input field of the visible
wrapper/tab pane.
$("div.multipage-pane :input:visible:enabled:first").focus();
return false;
}
});
// Pressing the Enter key lets you leave the tab again.
this.wrapper.keydown(function(event) {
// Enter key should not trigger inside <textarea> to allow for
multi-line entries.
if (event.keyCode == 13 && event.target.nodeName != "TEXTAREA")
{
// Set focus on the selected tab button again.
$(".multipage-tab-button.selected a").focus();
return false;
}
});
*/
};
Drupal.multipageControl.prototype = {
/**
* Displays the tab's content pane.
*/
focus: function () {
this.wrapper
.show()
.siblings('div.multipage-pane')
.each(function () {
var tab = $(this).data('multipageControl');
tab.wrapper.hide();
})
.end()
.siblings(':hidden.multipage-active-control')
.val(this.wrapper.attr('id'));
// Mark the active control for screen readers.
$('#active-multipage-control').remove();
this.nextLink.after('<span id="active-multipage-control"
class="element-invisible">' + Drupal.t('(active page)') + '</span>');
},
/**
* Continues to the next page or step in the form.
*/
// Override nextPage function
nextPage: function () {
this.wrapper.next().data('multipageControl').focus();
$('html, body').scrollTop(this.wrapper.parents('.field-group-
multipage-group-wrapper').offset().top);
// alert($(this.wrapper).prop("class"));
/* if ($('select, input, textarea', this.wrapper).valid()) {

this.wrapper.next().data('multipageControl').focus();
}else{
$("select.error:first, input.error:first,
textarea.error:first").focus();
}
*/
},
/**
* Returns to the previous page or step in the form.
*/
previousPage: function () {
this.wrapper.prev().data('multipageControl').focus();
},
/**
* Shows a horizontal tab pane.
*/
tabShow: function () {
// Display the tab.
this.item.show();
// Update .first marker for items. We need recurse from parent
to retain the
// actual DOM element order as jQuery implements sortOrder, but
not as public
// method.
this.item.parent().children('.multipage-
control').removeClass('first')
.filter(':visible:first').addClass('first');
// Display the wrapper.
this.wrapper.removeClass('multipage-control-hidden').show();
// Focus this tab.
this.focus();
return this;
},
/**
* Hides a horizontal tab pane.
*/
tabHide: function () {
// Hide this tab.
this.item.hide();
// Update .first marker for items. We need recurse from parent
to retain the
// actual DOM element order as jQuery implements sortOrder, but
not as public
// method.
this.item.parent().children('.multipage-
control').removeClass('first')
.filter(':visible:first').addClass('first');
// Hide the wrapper.
this.wrapper.addClass('horizontal-tab-hidden').hide();
// Focus the first visible tab (if there is one).
var $firstTab = this.wrapper.siblings('.multipage-
pane:not(.multipage-control-hidden):first');
if ($firstTab.length) {
$firstTab.data('multipageControl').focus();
}
return this;
}
};
/**
* Theme function for a multipage control.
*
* @param settings
* An object with the following keys:
* - title: The name of the tab.
* @return
* This function has to return an object with at least these keys:
* - item: The root tab jQuery element
* - nextLink: The anchor tag that acts as the clickable area of
the control
* - nextTitle: The jQuery element that contains the group title
* - previousLink: The anchor tag that acts as the clickable area
of the control
* - previousTitle: The jQuery element that contains the group
title
*/
Drupal.theme.prototype.multipage = function (settings) {
var controls = {};

controls.item = $('<span class="multipage-button"></span>');
controls.previousLink = $('<input type="button" class="form-submit

multipage-link-previous" value="" />');
controls.previousTitle = Drupal.t('Previous page');
controls.item.append(controls.previousLink.val(controls.previousTitle)
);
controls.nextLink = $('<input type="button" class="form-submit

multipage-link-next" value="" />');
controls.nextTitle = Drupal.t('Next page');
controls.item.append(controls.nextLink.val(controls.nextTitle));
if (!settings.has_next) {
controls.nextLink.hide();
}
if (!settings.has_previous) {
controls.previousLink.hide();
}
return controls;
};
Drupal.FieldGroup = Drupal.FieldGroup || {};

Drupal.FieldGroup.Effects = Drupal.FieldGroup.Effects || {};
/**
* Implements Drupal.FieldGroup.processHook().
*/
Drupal.FieldGroup.Effects.processMultipage = {
execute: function (context, settings, type) {
if (type == 'form') {
var $firstErrorItem = false;
// Add required fields mark to any element containing required

fields
$('div.multipage-pane').each(function(i){
if ($('.error', $(this)).length) {
// Save first error item, for focussing it.

if (!$firstErrorItem) {
$firstErrorItem = $(this).data('multipageControl');
}
Drupal.FieldGroup.setGroupWithfocus($(this));
$(this).data('multipageControl').focus();
}
});
// Focus on first multipage that has an error.

if ($firstErrorItem) {
$firstErrorItem.focus();
}
}
}
}
})(jQuery);
Fiel_group.module
<?php
/**
* @file
* Fieldgroup module.
* For an overview of all php and javascript hooks, see field_group.api.php.
*/
/**
* Implements hook_menu().
*/
function field_group_menu() {
$items = array();
// Ensure the following is not executed until field_bundles is working and
// tables are updated. Needed to avoid errors on initial installation.
if (defined('MAINTENANCE_MODE')) {
return $items;
// Create tabs for all possible bundles.
foreach (entity_get_info() as $entity_type => $entity_info) {
if (isset($entity_info['fieldable']) && $entity_info['fieldable']) {
foreach ($entity_info['bundles'] as $bundle_name => $bundle_info) {
if (isset($bundle_info['admin'])) {
// Extract path information from the bundle.
$path = $bundle_info['admin']['path'];
// Different bundles can appear on the same path (e.g. %node_type and
// %comment_node_type). To allow field_group_menu_load() to extract the
// actual bundle object from the translated menu router path
// arguments, we need to identify the argument position of the bundle
// name string ('bundle argument') and pass that position to the menu
// loader. The position needs to be casted into a string; otherwise it
// would be replaced with the bundle name string.
if (isset($bundle_info['admin']['bundle argument'])) {
$bundle_arg = $bundle_info['admin']['bundle argument'];
$bundle_pos = (string) $bundle_arg;
else {
$bundle_arg = $bundle_name;
$bundle_pos = '0';
// This is the position of the %field_group_menu placeholder in the
// items below.
$group_position = count(explode('/', $path)) + 1;
// Extract access information, providing defaults.
$access = array_intersect_key($bundle_info['admin'], drupal_map_assoc(array('access

callback', 'access arguments')));
$access += array(
'access callback' => 'user_access',
'access arguments' => array('administer site configuration'),
);
$items["$path/groups/%field_group_menu/delete"] = array(
'load arguments' => array($entity_type, $bundle_arg, $bundle_pos, '%map'),
'title' => 'Delete',
'page callback' => 'drupal_get_form',
'page arguments' => array('field_group_delete_form', $group_position),
'type' => MENU_CALLBACK,
'file' => 'field_group.field_ui.inc',
) + $access;
$items["$path/groups/%field_group_menu/enable"] = array(
'load arguments' => array($entity_type, $bundle_arg, $bundle_pos, '%map'),
'title' => 'Enable',
'page callback' => 'drupal_get_form',
'page arguments' => array('field_group_enable_form', $group_position),
'type' => MENU_CALLBACK,
'file' => 'field_group.field_ui.inc',
) + $access;
return $items;
/**
* Implements hook_permission().
*/
function field_group_permission() {
return array(
'administer fieldgroups' => array(
'title' => t('Administer fieldgroups'),
'description' => t('Display the administration for fieldgroups.'),
),
);
/**
* Menu Wildcard loader function to load group definitions.
* @param $group_name
* The name of the group, as contained in the path.
* @param $entity_type
* The name of the entity.
* @param $bundle_name
* The name of the bundle, as contained in the path.
* @param $bundle_pos
* The position of $bundle_name in $map.
* @param $map
* The translated menu router path argument map.
*/
function field_group_menu_load($group_name, $entity_type, $bundle_name, $bundle_pos,

$map) {
if ($bundle_pos > 0) {
$bundle = $map[$bundle_pos];
$bundle_name = field_extract_bundle($entity_type, $bundle);
}
$args = func_get_args();
$args_pop = array_pop($args);
$mode = array_pop($args_pop);
$group = field_group_load_field_group($group_name, $entity_type, $bundle_name, $mode);
return empty($group) ? FALSE : $group;
/**
* Ctools load callback to load fieldgroup by identifier.
*/
function field_group_load_field_group_by_identifier($identifier) {
$parts = explode('|', $identifier);
if (count($parts) != 4) {
return;
return field_group_load_field_group($parts[0], $parts[1], $parts[2], $parts[3]);
/**
* Loads a group definition.
* @param $group_name
* The name of the group.

* @param $bundle_name
* The name of the bundle.
* @param $mode
* The view mode to load.
*/
function field_group_load_field_group($group_name, $entity_type, $bundle_name, $mode) {
ctools_include('export');
$objects = ctools_export_load_object('field_group', 'conditions', array(
'group_name' => $group_name,
'entity_type' => $entity_type,
'bundle' => $bundle_name,
'mode' => $mode,
));
$object = array_shift($objects);
if ($object && isset($object->data)) {
return field_group_unpack($object);
return $object;
/**
* Implements hook_ctools_plugin_api().
*/
function field_group_ctools_plugin_api($owner, $api) {

if ($owner == 'field_group' && $api == 'field_group') {
return array('version' => 1);
/**
* Implements hook_theme().
*/
function field_group_theme() {
return array(
'horizontal_tabs' => array(
'render element' => 'element',
),
'multipage' => array(
),
'multipage_pane' => array(
),
);
/**
* Implements hook_theme_registry_alter().
*/
function field_group_theme_registry_alter(&$theme_registry) {
// Inject field_group_build_entity_groups in all entity theming functions.
$entity_info = entity_get_info();
$entities = array();
foreach ($entity_info as $entity => $info) {
if (isset($entity_info[$entity]['fieldable']) && $entity_info[$entity]['fieldable']) {
// User uses user_profile for theming.
if ($entity == 'user') $entity = 'user_profile';
$entities[] = $entity;
// Support for File Entity.
if (isset($theme_registry['file_entity'])) {
$entities[] = 'file_entity';
// Support for Entity API.
if (isset($theme_registry['entity'])) {
$entities[] = 'entity';
foreach ($entities as $entity) {
if (isset($theme_registry[$entity])) {
$theme_registry[$entity]['preprocess functions'][] = 'field_group_build_entity_groups';
// DS support, make sure it comes after field_group.
if ($key = array_search('ds_entity_variables', $theme_registry[$entity]['preprocess functions']))

{
unset($theme_registry[$entity]['preprocess functions'][$key]);
$theme_registry[$entity]['preprocess functions'][] = 'ds_entity_variables';
}
}
/**
* Implements hook_field_attach_delete_bundle().
* @param String $entity_type
* @param String $bundle
*/
function field_group_field_attach_delete_bundle($entity_type, $bundle) {
$list = field_group_read_groups(array('bundle' => $bundle, 'entity_type' => $entity_type));
// Delete the entity's entry from field_group of all entities.
// We fetch the field groups first to assign the removal task to ctools.
if (isset($list[$entity_type], $list[$entity_type][$bundle])) {
foreach ($list[$entity_type][$bundle] as $group_mode => $groups) {
foreach ($groups as $group) {
ctools_export_crud_delete('field_group', $group);
/**
* Implements hook_field_attach_form().
*/
function field_group_field_attach_form($entity_type, $entity, &$form, &$form_state, $langcode)

{
$form['#attached']['css'][] = drupal_get_path('module', 'field_group') . '/field_group.field_ui.css';
field_group_attach_groups($form, 'form', $form_state);
$form['#pre_render'][] = 'field_group_form_pre_render';
/**
* Implements hook_form_FORM_ID_alter().
* Using hook_form_field_ui_field_overview_form_alter.
*/
function field_group_form_field_ui_field_overview_form_alter(&$form, &$form_state) {
form_load_include($form_state, 'inc', 'field_group', 'field_group.field_ui');
field_group_field_ui_overview_form_alter($form, $form_state);
/**
* Implements hook_form_FORM_ID_alter().
* Using hook_form_field_ui_display_overview_form_alter.
*/
function field_group_form_field_ui_display_overview_form_alter(&$form, &$form_state) {
form_load_include($form_state, 'inc', 'field_group', 'field_group.field_ui');
field_group_field_ui_overview_form_alter($form, $form_state, TRUE);
/**
* Implements hook_field_attach_view_alter().
*/
function field_group_field_attach_view_alter(&$element, $context) {
// Check whether the view mode uses custom display settings or the 'default' mode.
$actual_mode = 'default';
if (isset($element['#entity_type']) && isset($element['#bundle'])) {
$view_mode_settings = field_view_mode_settings($element['#entity_type'],
$element['#bundle']);
$view_mode = $context['view_mode'];
$actual_mode = (!empty($view_mode_settings[$view_mode]['custom_settings']) ?
$view_mode : 'default');
field_group_attach_groups($element, $actual_mode);
/**
* Implements hook_field_group_formatter_info().
*/
function field_group_field_group_formatter_info() {
return array(
'form' => array(
'html-element' => array(
'label' => t('HTML element'),
'description' => t('This fieldgroup renders the inner content in a HTML element with classes
and attributes.'),
'instance_settings' => array('element' => 'div', 'show_label' => 0, 'label_element' => 'div',
'classes' => '', 'attributes' => '', 'required_fields' => 1, 'id' => ''),
),
'div' => array(
'label' => t('Div'),

'description' => t('This fieldgroup renders the inner content in a simple div with the title as
legend.'),
'format_types' => array('open', 'collapsible', 'collapsed'),
'instance_settings' => array('description' => '', 'show_label' => 1, 'label_element' => 'h3',
'effect' => 'none', 'speed' => 'fast', 'classes' => '', 'required_fields' => 1, 'id' => ''),
'default_formatter' => 'open',
),
'html5' => array(
'label' => t('HTML5'),
'description' => t('This fieldgroup renders the inner content in a semantic HTML5 wrapper'),
'instance_settings' => array('wrapper' => '', 'classes' => '', 'id' => ''),
),
'fieldset' => array(
'label' => t('Fieldset'),
'description' => t('This fieldgroup renders the inner content in a fieldset with the title as
legend.'),
'instance_settings' => array('description' => '', 'classes' => '', 'required_fields' => 1, 'id' => ''),
'default_formatter' => 'collapsible',
),
'tabs' => array(
'label' => t('Vertical tabs group'),
'description' => t('This fieldgroup renders child groups in its own vertical tabs wrapper.'),
'instance_settings' => array('classes' => '', 'id' => ''),
),
'tab' => array(
'label' => t('Vertical tab'),
'description' => t('This fieldgroup renders the content in a fieldset, part of vertical tabs
group.'),
'format_types' => array('open', 'closed'),

'instance_settings' => array('description' => '', 'classes' => '', 'required_fields' => 1),
'default_formatter' => 'closed',
),
'htabs' => array(
'label' => t('Horizontal tabs group'),
'description' => t('This fieldgroup renders child groups in its own horizontal tabs wrapper.'),
),
'htab' => array(
'label' => t('Horizontal tab'),
'description' => t('This fieldgroup renders the content in a fieldset, part of horizontal tabs
group.'),
),
'multipage-group' => array(
'label' => t('Multipage group'),
'description' => t('This fieldgroup renders groups on separate pages.'),
'instance_settings' => array('classes' => '', 'page_header' => 3, 'move_additional' => 1,

'page_counter' => 1, 'move_button' => 0),
),
'multipage' => array(
'label' => t('Multipage'),
'format_types' => array('start', 'no-start'),
'description' => t('This fieldgroup renders the content in a page.'),
'default_formatter' => 'no-start',
),
'accordion' => array(

'label' => t('Accordion group'),
'description' => t('This fieldgroup renders child groups as jQuery accordion.'),
'instance_settings' => array('effect' => 'none', 'classes' => '', 'id' => ''),
),
'accordion-item' => array(
'label' => t('Accordion item'),
'description' => t('This fieldgroup renders the content in a div, part of accordion group.'),
),
),
'display' => array(
'html-element' => array(
'label' => t('HTML element'),
'description' => t('This fieldgroup renders the inner content in a HTML element with classes
and attributes.'),
'instance_settings' => array('element' => 'div', 'show_label' => 0, 'label_element' => 'div',
'classes' => '', 'attributes' => '', 'required_fields' => 1, 'id' => ''),
),
'div' => array(
'label' => t('Div'),
'description' => t('This fieldgroup renders the inner content in a simple div with the title as
legend.'),
'instance_settings' => array('description' => '', 'show_label' => 1, 'label_element' => 'h3',
'effect' => 'none', 'speed' => 'fast', 'classes' => '', 'id' => ''),
),
'html5' => array(

'label' => t('HTML5'),
'description' => t('This fieldgroup renders the inner content in a semantic HTML5 wrapper'),
'instance_settings' => array('wrapper' => '', 'classes' => '', 'id' => ''),
),
'fieldset' => array(
'label' => t('Fieldset'),
'description' => t('This fieldgroup renders the inner content in a fieldset with the title as
legend.'),
'instance_settings' => array('description' => '', 'classes' => '', 'id' => ''),
),
'tabs' => array(
'label' => t('Vertical tabs group'),
'description' => t('This fieldgroup renders child groups in its own vertical tabs wrapper.'),
),
'tab' => array(
'label' => t('Vertical tab'),
'description' => t('This fieldgroup renders the content in a fieldset, part of vertical tabs
group.'),
'instance_settings' => array('description' => '', 'classes' => ''),
),
'htabs' => array(
'label' => t('Horizontal tabs group'),
'description' => t('This fieldgroup renders child groups in its own horizontal tabs wrapper.'),
),
'htab' => array(
'label' => t('Horizontal tab item'),
'description' => t('This fieldgroup renders the content in a fieldset, part of horizontal tabs
group.'),
'instance_settings' => array('description' => '', 'classes' => '', 'id' => ''),
),
'accordion' => array(
'label' => t('Accordion group'),
'description' => t('This fieldgroup renders child groups as jQuery accordion.'),
'instance_settings' => array('description' => '', 'classes' => '', 'effect' => 'bounceslide', 'id' => ''),
),
'accordion-item' => array(
'label' => t('Accordion item'),
'description' => t('This fieldgroup renders the content in a div, part of accordion group.'),
'instance_settings' => array('classes' => ''),
),
),
);
/**
* Implements hook_field_group_format_settings().
* If the group has no format settings, default ones will be added.
* @params Object $group The group object.
* @return Array $form The form element for the format settings.
*/
function field_group_field_group_format_settings($group) {
// Add a wrapper for extra settings to use by others.
$form = array(
'instance_settings' => array(
'#tree' => TRUE,
'#weight' => 2,
),
);
$field_group_types = field_group_formatter_info();
$mode = $group->mode == 'form' ? 'form' : 'display';
$formatter = $field_group_types[$mode][$group->format_type];
// Add the required formatter type selector.
if (isset($formatter['format_types'])) {
$form['formatter'] = array(
'#title' => t('Fieldgroup settings'),
'#type' => 'select',
'#options' => drupal_map_assoc($formatter['format_types']),
'#default_value' => isset($group->format_settings['formatter']) ? $group-

>format_settings['formatter'] : $formatter['default_formatter'],
'#weight' => -4,
);
if (isset($formatter['instance_settings']['required_fields']) && $mode == 'form') {
$form['instance_settings']['required_fields'] = array(
'#type' => 'checkbox',

'#title' => t('Mark group as required if it contains required fields.'),
'#default_value' => isset($group->format_settings['instance_settings']['required_fields']) ?

$group->format_settings['instance_settings']['required_fields'] :
(isset($formatter['instance_settings']['required_fields']) ?
$formatter['instance_settings']['required_fields'] : ''),
'#weight' => 2,
);
if (isset($formatter['instance_settings']['id'])) {
$form['instance_settings']['id'] = array(
'#title' => t('ID'),
'#type' => 'textfield',
'#default_value' => isset($group->format_settings['instance_settings']['id']) ? $group-

>format_settings['instance_settings']['id'] : (isset($formatter['instance_settings']['id']) ?
$formatter['instance_settings']['id'] : ''),
'#weight' => 10,
'#element_validate' => array('field_group_validate_id'),
);
if (isset($formatter['instance_settings']['classes'])) {
$form['instance_settings']['classes'] = array(
'#title' => t('Extra CSS classes'),
'#default_value' => isset($group->format_settings['instance_settings']['classes']) ? $group-

>format_settings['instance_settings']['classes'] : (isset($formatter['instance_settings']['classes']) ?
$formatter['instance_settings']['classes'] : ''),
'#weight' => 11,
'#element_validate' => array('field_group_validate_css_class'),
);
}
if (isset($formatter['instance_settings']['description'])) {
$form['instance_settings']['description'] = array(
'#title' => t('Description'),
'#type' => 'textarea',
'#default_value' => isset($group->format_settings['instance_settings']['description']) ? $group-

>format_settings['instance_settings']['description'] :
(isset($formatter['instance_settings']['description']) ? $formatter['instance_settings']['description']
: ''),
'#weight' => 0,
);
// Add optional instance_settings.
switch ($group->format_type) {
case 'html-element':
$form['instance_settings']['element'] = array(
'#title' => t('Element'),
'#default_value' => isset($group->format_settings['instance_settings']['element']) ? $group-

>format_settings['instance_settings']['element'] : $formatter['instance_settings']['element'],
'#description' => t('E.g. div, section, aside etc.'),
'#weight' => 1,
);
$form['instance_settings']['show_label'] = array(
'#title' => t('Show label'),
'#options' => array(0 => t('No'), 1 => t('Yes')),

'#default_value' => isset($group->format_settings['instance_settings']['show_label']) ?
$group->format_settings['instance_settings']['show_label'] :
$formatter['instance_settings']['show_label'],
'#weight' => 2,
);
$form['instance_settings']['label_element'] = array(
'#title' => t('Label element'),
'#default_value' => isset($group->format_settings['instance_settings']['label_element']) ?

$group->format_settings['instance_settings']['label_element'] :
$formatter['instance_settings']['label_element'],
'#weight' => 3,
);
$form['instance_settings']['attributes'] = array(
'#title' => t('Attributes'),
'#default_value' => isset($group->format_settings['instance_settings']['attributes']) ? $group-

>format_settings['instance_settings']['attributes'] : $formatter['instance_settings']['attributes'],
'#description' => t('E.g. name="anchor"'),
'#weight' => 4,
);
break;
case 'div':
$form['label']['#description'] = t('Please enter a label for collapsible elements');
$form['instance_settings']['show_label'] = array(
'#title' => t('Show label'),

'#default_value' => isset($group->format_settings['instance_settings']['show_label']) ?
$group->format_settings['instance_settings']['show_label'] :
$formatter['instance_settings']['show_label'],
'#weight' => 2,
);
$form['instance_settings']['label_element'] = array(
'#title' => t('Label element'),
'#options' => array('h2' => t('Header 2'), 'h3' => t('Header 3')),
'#default_value' => isset($group->format_settings['instance_settings']['label_element']) ?

$group->format_settings['instance_settings']['label_element'] :
$formatter['instance_settings']['label_element'],
'#weight' => 2,
);
$form['instance_settings']['effect'] = array(
'#title' => t('Effect'),
'#options' => array('none' => t('None'), 'blind' => t('Blind')),
'#default_value' => isset($group->format_settings['instance_settings']['effect']) ? $group-

>format_settings['instance_settings']['effect'] : $formatter['instance_settings']['effect'],
'#weight' => 3,
);
$form['instance_settings']['speed'] = array(
'#title' => t('Speed'),
'#options' => array('none' => t('None'), 'slow' => t('Slow'), 'fast' => t('Fast')),
'#default_value' => isset($group->format_settings['instance_settings']['speed']) ? $group-

>format_settings['instance_settings']['speed'] : $formatter['instance_settings']['speed'],
'#weight' => 3,
);
break;
case 'html5':
$form['instance_settings']['wrapper'] = array(
'#title' => t('HTML5 wrapper'),
'#options' => array('section' => t('Section'), 'article' => t('Article'), 'header' => t('Header'),
'footer' => t('Footer'), 'aside' => t('Aside')),
'#default_value' => isset($group->format_settings['instance_settings']['wrapper']) ? $group-

>format_settings['instance_settings']['wrapper'] : 'section',
);
break;
case 'fieldset':
$form['label']['#description'] = t('Please enter a label for collapsible elements');
break;
case 'multipage-group':
$form['instance_settings']['page_header'] = array(
'#title' => t('Format page title'),
'#options' => array(0 => t('None'), 1 => t('Label only'), 2 => t('Step 1 of 10'), 3 => t('Step 1 of 10
[Label]'),),
'#default_value' => isset($group->format_settings['instance_settings']['page_header']) ?

$group->format_settings['instance_settings']['page_header'] :
$formatter['instance_settings']['page_header'],
'#weight' => 1,
);
$form['instance_settings']['page_counter'] = array(
'#title' => t('Add a page counter at the bottom'),
'#options' => array(0 => t('No'), 1 => t('Format 1 / 10'), 2 => t('The count number only')),
'#default_value' => isset($group->format_settings['instance_settings']['page_counter']) ?

$group->format_settings['instance_settings']['page_counter'] :
$formatter['instance_settings']['page_counter'],
'#weight' => 2,
);
$form['instance_settings']['move_button'] = array(
'#title' => t('Move submit button to last multipage'),
'#default_value' => isset($group->format_settings['instance_settings']['move_button']) ?

$group->format_settings['instance_settings']['move_button'] :
$formatter['instance_settings']['move_button'],
'#weight' => 3,
);
$form['instance_settings']['move_additional'] = array(
'#title' => t('Move additional settings to last multipage (if available)'),
'#default_value' => isset($group->format_settings['instance_settings']['move_additional']) ?

$group->format_settings['instance_settings']['move_additional'] :
$formatter['instance_settings']['move_additional'],
'#weight' => 4,
);
case 'tabs':
case 'htabs':
break;
case 'accordion':
$form['instance_settings']['effect'] = array(
'#title' => t('Effect'),
'#options' => array('none' => t('None'), 'bounceslide' => t('Bounce slide')),
'#default_value' => isset($group->format_settings['instance_settings']['effect']) ? $group-

>format_settings['instance_settings']['effect'] : $formatter['instance_settings']['effect'],
'#weight' => 2,
);
break;
case 'multipage':
break;
case 'tab':
case 'htab':
case 'accordion-item':
default:
return $form;
/**
* Helper function to prepare basic variables needed for most formatters.
* Called in field_group_field_group_pre_render(), but can also be called in
* other implementations of hook_field_group_pre_render().
*/
function field_group_pre_render_prepare(&$group) {
$classes = _field_group_get_html_classes($group);
$group->classes = implode(' ', $classes->required);
$group->description = !empty($group->format_settings['instance_settings']['description']) ?
filter_xss_admin(t($group->format_settings['instance_settings']['description'])) : '';
}
/**
* Implements hook_field_group_pre_render().
* @param Array $elements by address.
* @param Object $group The Field group info.
*/
function field_group_field_group_pre_render(&$element, &$group, & $form) {
field_group_pre_render_prepare($group);
$view_mode = isset($form['#view_mode']) ? $form['#view_mode'] : 'form';
// Add all field_group format types to the js settings.
$form['#attached']['js'][] = array(
'data' => array('field_group' => array($group->format_type => $view_mode)),
'type' => 'setting',
);
if (isset($group->format_settings['instance_settings']['id']) && !empty($group-

>format_settings['instance_settings']['id'])) {
$element['#id'] = drupal_html_id($group->format_settings['instance_settings']['id']);
$element['#weight'] = $group->weight;
// Call the pre render function for the format type.
$function = "field_group_pre_render_" . str_replace("-", "_", $group->format_type);
if (function_exists($function)) {
$function($element, $group, $form);

}
/**
* Implements field_group_pre_render_<format-type>.
* Format type: Fieldset.
* @param $element The field group form element.
* @param $group The Field group object prepared for pre_render.
* @param $form The root element or form.
*/
function field_group_pre_render_fieldset(&$element, $group, &$form) {
$element += array(
'#type' => 'fieldset',
'#title' => check_plain(t($group->label)),
'#collapsible' => $group->collapsible,
'#collapsed' => $group->collapsed,
'#pre_render' => array(),
'#attributes' => array('class' => explode(' ', $group->classes)),
'#description' => $group->description,
);
if ($group->collapsible || $group->collapsed) {
$element['#attached']['library'][] = array('system', 'drupal.collapse');
}
/**
* Format type: HTML element.
*/
function field_group_pre_render_html_element(&$element, $group, &$form) {
$html_element = isset($group->format_settings['instance_settings']['element']) ? $group-

>format_settings['instance_settings']['element'] : 'div';
$show_label = isset($group->format_settings['instance_settings']['show_label']) ? $group-

>format_settings['instance_settings']['show_label'] : 0;
$label_element = isset($group->format_settings['instance_settings']['label_element']) ? $group-

>format_settings['instance_settings']['label_element'] : 'div';
$configured_attributes = isset($group->format_settings['instance_settings']['attributes']) ? ' ' .

$group->format_settings['instance_settings']['attributes'] : '';
$group->classes = trim($group->classes);
// This regex split the attributes string so that we can pass that
// later to drupal_attributes().
preg_match_all('/([^\s=]+)="([^"]+)"/', $configured_attributes, $matches);
$element_attributes = array();
// Put the attribute and the value together.
foreach ($matches[1] as $key => $attribute) {
$element_attributes[$attribute] = $matches[2][$key];
// Add the classes to the attributes array.

if (!isset($element_attributes['class']) && $group->classes) {
$element_attributes['class'] = $group->classes;
elseif (isset($element_attributes['class']) && $group->classes) {
$element_attributes['class'] .= ' ' . $group->classes;
if (isset($element['#id'])) {
$element_attributes['id'] = $element['#id'];
// Sanitize the attributes.
$element_attributes = _filter_xss_attributes(drupal_attributes($element_attributes));
$attributes = $element_attributes ? ' ' . implode(' ', $element_attributes) : '';
$element['#prefix'] = '<' . $html_element . $attributes . '>';
if ($show_label) {
$element['#prefix'] .= '<' . $label_element . '><span>' . check_plain(t($group->label)) .

'</span></' . $label_element . '>';
$element['#suffix'] = '</' . $html_element . '>';
/**
* Format type: Div.

*/
function field_group_pre_render_div(&$element, $group, &$form) {
$show_label = isset($group->format_settings['instance_settings']['show_label']) ? $group-

>format_settings['instance_settings']['show_label'] : 0;
$label_element = isset($group->format_settings['instance_settings']['label_element']) ? $group-

>format_settings['instance_settings']['label_element'] : 'h2';
$effect = isset($group->format_settings['instance_settings']['effect']) ? $group-

>format_settings['instance_settings']['effect'] : 'none';
$element['#type'] = 'markup';
$id = isset($element['#id']) ? ' id="' . $element['#id'] . '"' : '';
if ($group->format_settings['formatter'] != 'open') {
$element['#prefix'] = '<div' . $id . ' class="' . $group->classes . '">
<' . $label_element . '><span class="field-group-format-toggler">' . check_plain(t($group-

>label)) . '</span></' . $label_element . '>
<div class="field-group-format-wrapper" style="display: ' . (!empty($group->collapsed) ? 'none'

: 'block') . ';">';
$element['#suffix'] = '</div></div>';
else {
$class_attribute = !empty($group->classes) ? ' class="' . $group->classes . '"' : '';
$element['#prefix'] = '<div' . $id . $class_attribute . '>';
if ($show_label) {
$element['#prefix'] .= '<' . $label_element . '><span>' . check_plain(t($group->label)) .

'</span></' . $label_element . '>';
}
$element['#suffix'] = '</div>';
if (!empty($group->description)) {
$element['#prefix'] .= '<div class="description">' . $group->description . '</div>';
if ($effect == 'blind') {
$element['#attached']['library'][] = array('system', 'effects.blind');
/**
* Format type: HTML5.
*/
function field_group_pre_render_html5(&$element, $group, &$form) {
$id = !empty($element['#id']) ? ' id="' . $element['#id'] . '"' : '';
$class = !empty($group->classes) ? ' class="' . $group->classes . '"' : '';
$element += array(
'#type' => 'markup',
'#prefix' => '<' . $group->format_settings['instance_settings']['wrapper'] . $id . $class . '>',
'#suffix' => '</' . $group->format_settings['instance_settings']['wrapper'] . '>',
);
}
/**
* Format type: Accordion.
*/
function field_group_pre_render_accordion(&$element, $group, &$form) {
// Add the jQuery UI accordion.
$element['#attached']['library'][] = array('system', 'ui.accordion');
$element += array(
'#prefix' => '<div class="' . $group->classes . '"' . $id .'>',
'#suffix' => '</div>',
);
/**
* Format type: Accordion item.

*/
function field_group_pre_render_accordion_item(&$element, $group, &$form) {
$element += array(
'#prefix' => '<h3 class="field-group-format-toggler ' . $group->format_type . ($group->collapsed

? '' : ' field-group-accordion-active') . '"><a href="#">' . check_plain(t($group->label)) . '</a></h3>
<div class="field-group-format-wrapper ' . $group->classes . '">',
//'#attributes' => array('class' => array($group->format_type)),
);
if (!empty($group->description)) {
$element['#prefix'] .= '<div class="description">' . $group->description . '</div>';
/**
* Format type: Horizontal tabs group.
*/
function field_group_pre_render_htabs(&$element, $group, &$form) {
$classes = 'field-group-' . $group->format_type . '-wrapper';

if (!empty($group->classes)) {
$classes .= ' ' . $group->classes;
$element += array(
'#type' => 'horizontal_tabs',
'#theme_wrappers' => array('horizontal_tabs'),
'#prefix' => '<div class="' . $classes . '"' . $id . '>',
);
// By default vertical_tabs don't have titles but you can override it in the theme.
if (!empty($group->label)) {
$element['#title'] = check_plain($group->label);
// Only add form.js on forms.
if (!empty($form['#type']) && $form['#type'] == 'form') {
$element['#attached']['js'][] = 'misc/form.js';
$element['#attached']['library'][] = array('field_group', 'horizontal-tabs');
/**
* Format type: Horizontal tab.
*/
function field_group_pre_render_htab(&$element, $group, &$form) {
$element += array(
'#attributes' => array('class' => explode(" ", $group->classes)),
'#group' => $group->parent_name,
// very important. Cannot be added on the form!
'#parents' => array($group->parent_name),
);
/**
* Format type: Multipage group.

*/
function field_group_pre_render_multipage_group(&$element, &$group, &$form) {
$multipage_element = array(
'#type' => 'multipage',
'#theme_wrappers' => array('multipage'),
'#prefix' => '<div class="field-group-' . $group->format_type . '-wrapper ' . $group->classes . '">',
);
$element += $multipage_element;
$move_additional = isset($group->format_settings['instance_settings']['move_additional']) ?
($group->format_settings['instance_settings']['move_additional'] &&
isset($form['additional_settings'])) : isset($form['additional_settings']);
$move_button = isset($group->format_settings['instance_settings']['move_button']) ? $group-

>format_settings['instance_settings']['move_button'] : 0;
drupal_add_js(array(
'field_group' => array(
'multipage_move_submit' => (bool) $move_button,
'multipage_move_additional' => (bool) $move_additional
), 'setting');
/**
* Format type: Multipage.

*
*/
function field_group_pre_render_multipage(&$element, $group, &$form) {
$group->classes .= $group->format_settings['formatter'] == 'start' ? ' multipage-open' : '

multipage-closed';
$element += array(
'#type' => 'multipage_pane',
'#group' => $group->parent_name,
'#group_object' => $group,
'#parent_group_object' => $form['#groups'][$group->parent_name],
// very important. Cannot be added on the form!
'#parents' => array($group->parent_name),
);
$element['#attached']['library'][] = array('field_group', 'multipage');
/**
* Format type: Vertical tabs wrapper.

*
*/
function field_group_pre_render_tabs(&$element, $group, &$form) {
$classes = 'field-group-' . $group->format_type . '-wrapper';
if (!empty($group->classes)) {
$classes .= ' ' . $group->classes;
$element += array(
'#type' => 'vertical_tabs',
'#theme_wrappers' => array('vertical_tabs'),
'#prefix' => '<div class="' . $classes . '"' . $id . '>',
);
// By default vertical_tabs don't have titles but you can override it in the theme.
if (!empty($group->label)) {
$element['#title'] = check_plain($group->label);
$element[$group->group_name . '__active_tab'] = array(
'#type' => 'hidden',
'#default_value' => '',

'#attributes' => array('class' => array('vertical-tabs-active-tab')),
);
$element['#attached']['library'][] = array('system', 'drupal.collapse');
/**
* Format type: Vertical tab.
*/
function field_group_pre_render_tab(&$element, $group, &$form) {
$view_mode = isset($form['#view_mode']) ? $form['#view_mode'] : 'form';
// Could be it never runs through htab.
$form['#attached']['js'][] = array(
'data' => array('field_group' => array('tabs' => $view_mode)),
'type' => 'setting',
);
$add = array(
'#id' => 'edit-' . $group->group_name,

);
// Front-end and back-end on configuration will lead
// to vertical tabs nested in a separate vertical group.
if ($view_mode != 'form') {
$add['#group'] = empty($group->parent_name) ? 'additional_settings' : $group->parent_name;
$add['#parents'] = array($add['#group']);
$element += $add;
// Form fieldgroups which are nested into a vertical tab group
// are handled a little different.
elseif (!empty($group->parent_name)) {
$add['#group'] = $group->parent_name;
$element += $add;
// Forms "can" have additional settins. We'll try to locate it first, if not
// exists, field_group will create a parallel additional settings entry.
else {
// Create the fieldgroup element.
$add['#parents'] = array('additional_settings');
$add['#group'] = 'additional_settings';
$add['#weight'] = -30 + $group->weight; // hardcoded to bring our extra additional vtabs on top.
// Check if the additional_settings exist for this type of form.
if (isset($form['additional_settings']['group']['#groups']['additional_settings'])) {
// Merge fieldgroups with the core additional settings.
$form['additional_settings']['group']['#groups']['additional_settings'][$group->group_name] =
$add;
$form['additional_settings']['group']['#groups'][$group->group_name] = array('#group_exists'
=> TRUE);
// Nest the fields inside the appropriate structure.
foreach (element_children($element) as $fieldname) {
$form['additional_settings']['group']['#groups']['additional_settings'][$group-
>group_name][$fieldname] = &$element[$fieldname];
unset($element[$fieldname]);
// Assumption the wrapper is in the root. This could be done by field_group itself
// in previous loop of tabs in same wrapper or even some other contrib / custom module.
else {
if (!isset($form['additional_settings']['#type'])) {
$form['additional_settings'] = array(
'#type' => 'vertical_tabs',
'#weight' => $group->weight,
'#theme_wrappers' => array('vertical_tabs'),
'#prefix' => '<div class="field-group-' . $group->format_type . '-wrapper">',
);
$form['#attached']['library'][] = array('system', 'drupal.collapse');
$form['additional_settings'][$group->group_name] = $add;
// Nest the fields inside the appropriate structure.
foreach (element_children($element) as $fieldname) {
$form['additional_settings'][$group->group_name][$fieldname] = &$element[$fieldname];
unset($element[$fieldname]);
}
/**
* Implements hook_field_group_build_pre_render_alter().
* @param Array $elements by address.
*/
function field_group_field_group_build_pre_render_alter(& $element) {
// Someone is doing a node view, in a node view. Reset content.
// TODO Check if this breaks something else.
if (isset($element['#node']->content) && count($element['#node']->content) > 0) {
$element['#node']->content = array();
$display = isset($element['#view_mode']);
$groups = array_keys($element['#groups']);
// Dish the fieldgroups with no fields for non-forms.
if ($display) {
field_group_remove_empty_display_groups($element, $groups);
else {
// Fix the problem on forms with additional settings.
field_group_remove_empty_form_groups('form', $element, $groups, $element['#groups'],

$element['#entity_type']);
}
// Add the default field_group javascript and stylesheet.
$element['#attached']['js'][] = drupal_get_path('module', 'field_group') . '/field_group.js';
// Move additional settings to the last multipage pane if configured that way.
// Note that multipages MUST be in the root of the form.
foreach (element_children($element) as $name) {
if (isset($element[$name]['#type']) && $element[$name]['#type'] == 'multipage' &&

isset($element['additional_settings'])) {
$parent_group = $element['#groups'][$name];
$move_additional = isset($parent_group-
>format_settings['instance_settings']['move_additional']) ? $parent_group-
>format_settings['instance_settings']['move_additional'] : 1;
$last_pane = NULL;
foreach (element_children($element[$name], TRUE) as $pane) {
$last_pane = $pane;
$element[$name][$last_pane]['additional_settings'] = $element['additional_settings'];
unset($element['additional_settings']);
/**
* Remove empty groups on forms.
* @param String $parent_name
* The name of the element.

* @param array $element
* The element to check the empty state.
* @param array $groups
* Array of group objects.
*/
function field_group_remove_empty_form_groups($name, & $element, $groups, &$form_groups,

$entity) {
$children = element_children($element);
$hasChildren = FALSE;
if (count($children)) {
foreach ($children as $childname) {
if (in_array($childname, $groups, TRUE)) {
field_group_remove_empty_form_groups($childname, $element[$childname], $groups,

$form_groups, $entity);
$hasChildren = $hasChildren ? TRUE : _field_group_is_empty_element($element, $entity,

$childname, $groups);
if (!$hasChildren) {
// Remove empty elements from the #groups.
if (empty($element) && isset($form_groups[$name]) && !is_array($form_groups[$name])) {
foreach ($form_groups as $group_name => $group) {
if (isset($group->children)) {
$group_children = array_flip($group->children);
if (isset($group_children[$name])) {
unset($form_groups[$group_name]->children[$group_children[$name]]);
$element['#access'] = FALSE;
/**
* Determine if an element has non-empty children.
*/
function _field_group_is_empty_element($element, $entity, $childname, $groups) {
$exceptions = array('user__account', 'comment__author');
$exception = $entity . '__' . $childname;
if (in_array($exception, $exceptions)) {
return TRUE;
if (isset($element[$childname]['#type'])
|| isset($element[$childname]['#markup'])
|| isset($element[$childname]['#prefix'])
|| isset($element[$childname]['#suffix'])
){
return TRUE;
// Prevent a double recursive loop (groups are already recursive looped in

field_group_remove_empty_form_groups.
if (in_array($childname, $groups)) {
return FALSE;
$children = element_children($element[$childname]);
foreach ($children as $child) {
if (_field_group_is_empty_element($element[$childname], $entity, $child, $groups)) {
return TRUE;
return FALSE;
/**
* Remove empty groups on entity display.
* The element to check the empty state.
* @param array $groups
* Array of group objects.

*/
function field_group_remove_empty_display_groups(& $element, $groups) {
$empty_child = TRUE;
$empty_group = TRUE;
// Loop through the children for current element.
foreach (element_children($element) as $name) {
// Descend if the child is a group.
if (in_array($name, $groups)) {
$empty_child = field_group_remove_empty_display_groups($element[$name], $groups);
if (!$empty_child) {
$empty_group = FALSE;
// Child is a field, the element is not empty and access is set to true (or empty).
elseif (!empty($element[$name]) && (!isset($element[$name]['#access']) ||

$element[$name]['#access'])) {
$empty_group = FALSE;
// Reset an empty group.
if ($empty_group) {
$element = NULL;
}
return $empty_group;
/**
* Implements hook_field_group_format_summary().
*/
function field_group_field_group_format_summary($group) {
$group_form = module_invoke_all('field_group_format_settings', $group);
$output = '';
if (isset($group->format_settings['formatter'])) {
$output .= '<strong>' . $group->format_type . '</strong> ' . $group-

>format_settings['formatter'] . '';
if (isset($group->format_settings['instance_settings'])) {
$last = end($group->format_settings['instance_settings']);
$output .= '<br />';
foreach ($group->format_settings['instance_settings'] as $key => $value) {
if (empty($value)) {
continue;
$output .= '<strong>' . $key . '</strong> ';
if (isset($group_form['instance_settings'], $group_form['instance_settings'][$key]['#options']))
{
if (is_array($value)) {
$value = implode(array_filter($value), ', ');

}
else {
$value = $group_form['instance_settings'][$key]['#options'][$value];
// Shorten the string.
if (drupal_strlen($value) > 38) {
$value = truncate_utf8($value, 50, TRUE, TRUE);
// If still numeric, handle it as yes or no.
elseif (is_numeric($value)) {
$value = $value == '1' ? t('yes') : t('no');
$output .= check_plain($value);
$output .= $last == $value ? ' ' : '<br />';
return $output;
/**
* Implements hook_element_info().
*/
function field_group_element_info() {
$types['horizontal_tabs'] = array(
'#theme_wrappers' => array('horizontal_tabs'),
'#default_tab' => '',
'#process' => array('form_process_horizontal_tabs'),

);
$types['multipage'] = array(
'#theme_wrappers' => array('multipage'),
'#default_tab' => '',
'#process' => array('form_process_multipage'),
);
$types['multipage_pane'] = array(
'#value' => NULL,
'#process' => array('form_process_fieldset', 'ajax_process_form'),
'#pre_render' => array('form_pre_render_fieldset'),
'#theme_wrappers' => array('multipage_pane'),
);
return $types;
/**
* Implements hook_library().
*/
function field_group_library() {
$path = drupal_get_path('module', 'field_group');
// Horizontal Tabs.
$libraries['horizontal-tabs'] = array(
'title' => 'Horizontal Tabs',
'website' => 'http://drupal.org/node/323112',
'version' => '1.0',
'js' => array(
$path . '/horizontal-tabs/horizontal-tabs.js' => array(),
),
'css' => array(
$path . '/horizontal-tabs/horizontal-tabs.css' => array(),
),
);
// Multipage Tabs.
$libraries['multipage'] = array(
'title' => 'Multipage',
'website' => 'http://drupal.org/node/323112',
'version' => '1.0',
'js' => array(
$path . '/multipage/multipage.js' => array(),
),
'css' => array(
$path . '/multipage/multipage.css' => array(),
),
);
return $libraries;
/**
* Implements hook_field_extra_fields().
*/
function field_group_field_extra_fields() {
$extra = array();
$extra['user']['user'] = array('form' => array());
// User picture field to integrate with user module.

if (variable_get('user_pictures', 0)) {
$extra['user']['user']['form']['picture'] = array(
'label' => t('Picture'),
'description' => t('User picture'),
'weight' => 5,
);
// Field to itegrate with overlay module.
if (module_exists('overlay')) {
$extra['user']['user']['form']['overlay_control'] = array(
'label' => t('Administrative overlay'),
'description' => t('Administrative overlay'),
'weight' => 5,
);
// Field to itegrate with contact module.
if (module_exists('contact')) {
$extra['user']['user']['form']['contact'] = array(
'label' => t('Contact'),
'description' => t('Contact user element'),
'weight' => 5,
);
// Field to integrate with the locale module.
if (module_exists('locale')) {
$extra['user']['user']['form']['locale'] = array(
'label' => t('Language settings'),
'description' => t('Language settings for the user account.'),
'weight' => 5,
);
// Field to integrate with the wysiwyg module on user settings.
if (module_exists('wysiwyg')) {
$extra['user']['user']['form']['wysiwyg'] = array(
'label' => t('Wysiwyg status'),
'description' => t('Text formats enabled for rich-text editing'),
'weight' => 5,
);
return $extra;
/**
* Implements hook_field_attach_rename_bundle().
*/
function field_group_field_attach_rename_bundle($entity_type, $bundle_old, $bundle_new) {
db_query('UPDATE {field_group} SET bundle = :bundle WHERE bundle = :old_bundle AND

entity_type = :entity_type', array(
':bundle' => $bundle_new,
':old_bundle' => $bundle_old,
':entity_type' => $entity_type,
));
}
/**
* Creates a group formatted as horizontal tabs.
* This function will never be callable from within field_group rendering. Other
* modules using #type horizontal_tabs will have the benefit of this processor.
* @param $element
* An associative array containing the properties and children of the
* fieldset.
* @param $form_state
* The $form_state array for the form this horizontal tab widget belongs to.
* @return
* The processed element.
*/
function form_process_horizontal_tabs($element, &$form_state) {
// Inject a new fieldset as child, so that form_process_fieldset() processes
// this fieldset like any other fieldset.
$element['group'] = array(
'#theme_wrappers' => array(),
'#parents' => $element['#parents'],
);
// The JavaScript stores the currently selected tab in this hidden
// field so that the active tab can be restored the next time the
// form is rendered, e.g. on preview pages or when form validation
// fails.
$name = implode('__', $element['#parents']);
if (isset($form_state['values'][$name . '__active_tab'])) {
$element['#default_tab'] = $form_state['values'][$name . '__active_tab'];
$element[$name . '__active_tab'] = array(
'#default_value' => $element['#default_tab'],
'#attributes' => array('class' => array('horizontal-tabs-active-tab')),
);
return $element;
/**
* Returns HTML for an element's children fieldsets as horizontal tabs.
* @param $variables
* An associative array containing:
* - element: An associative array containing the properties and children of the
* fieldset. Properties used: #children.
* @ingroup themeable
*/
function theme_horizontal_tabs($variables) {
$element = $variables['element'];
// Add required JavaScript and Stylesheet.
drupal_add_library('field_group', 'horizontal-tabs');
$output = '<h2 class="element-invisible">' . (!empty($element['#title']) ? $element['#title'] :

t('Horizontal Tabs')) . '</h2>';
$output .= '<div class="horizontal-tabs-panes">' . $element['#children'] . '</div>';

return $output;
/**
* Creates a group formatted as multipage.
* This function will never be callable from within field_group rendering. Other
* modules using #type multipage will have the benefit of this processor.
* @param $element
* An associative array containing the properties and children of the
* fieldset.
* @param $form_state
* The $form_state array for the form this multipage tab widget belongs to.
* @return
* The processed element.
*/
function form_process_multipage($element, &$form_state) {
// Inject a new fieldset as child, so that form_process_fieldset() processes
// this fieldset like any other fieldset.
$element['group'] = array(
'#theme_wrappers' => array(),
'#parents' => $element['#parents'],
);
// The JavaScript stores the currently selected tab in this hidden
// field so that the active control can be restored the next time the
// form is rendered, e.g. on preview pages or when form validation

// fails.
$name = implode('__', $element['#parents']);
if (isset($form_state['values'][$name . '__active_control'])) {
$element['#default_tab'] = $form_state['values'][$name . '__active_control'];
$element[$name . '__active_control'] = array(
'#default_value' => $element['#default_control'],
'#attributes' => array('class' => array('multipage-active-control')),
);
return $element;
/**
* Returns HTML for an element's children fieldsets as multipage.
* @param $variables
*/
function theme_multipage($variables) {
// Add required JavaScript and Stylesheet.
$element['#attached']['library'][] = array('field_group', 'multipage');

$output = '<h2 class="element-invisible">' . (!empty($element['#title']) ? $element['#title'] :
t('Multipage')) . '</h2>';
$output .= '<div class="multipage-panes">';
$output .= $element['#children'];
$output .= '</div>';
$output .= '<a href="#popup" class="popup-link">Casos de estudio</a>';
$output .= '<div class="modal-wrapper" id="popup">
<div class="popup-contenedor">
<div class="tree">
<ul>
<li>
<div id="paso1M">casos de estudio</div>
<ul>
<li>
<div id="paso3M">alternativas de plan integral</div>
<ul>
<li>
<div id="paso3M1">alternativa hidroelectrica</div>
</li>
<li>
<div id="paso3M2">Cambío del uso del suelo</div>
</li>
<li>
<div id="paso3M3">Manejo de humedales</div>
</li>
</ul>
</li>
<li>
<div id="paso2M">escenarios</div>
<ul>
<li>
<div id="paso2M1">Escenarios climaticos</div>
</li>
<li>
<div id="paso2M2">Escenario de poblacion</div>
</li>
<li>
<div id="paso2M3">Escenario de Energia</div>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<a class="popup-cerrar" href="#">X</a>
</div>
</div>';
return $output;
$contador=0;
/**
* Returns HTML for multipage pane.

*
* @param $variables
*/
function theme_multipage_pane($variables) {
$group = $variables['element']['#group_object'];
$parent_group = $variables['element']['#parent_group_object'];
static $multipages;
if (!isset($multipages[$group->parent_name])) {
$multipages = array($group->parent_name => 0);
$multipages[$parent_group->group_name]++;
$titulo = array($element['#title']);
foreach ($titulo as $value) {

echo '<div class="multiform" id="multiformid"><h4 class="multiformh4"
id="'.$value.'"></h4></div>';
// Create a page title from the label.
$page_header = isset($parent_group->format_settings['instance_settings']['page_header']) ?
$parent_group->format_settings['instance_settings']['page_header'] : 3;
switch ($page_header) {
case 1:
$title = $element['#title'];
break;
case 2:
$title = t('paso %count de %total', array('%count' => $multipages[$parent_group-

>group_name], '%total' => count($parent_group->children)));
break;
case 3:
$title =
/*t('<div class="barra_progreso"><div class="progreso" style="width:').
t((($multipages[$parent_group->group_name]-1)/count($parent_group->children)*100 )).
t('%;background:#4CAF50 "').
t('</div></div>')*/
t('<div class="titulo">').
t('!label', array('!label' => $element['#title'])).
t('</div>');
break;
case 0:
default:
$title = '';
break;
}
element_set_attributes($element, array('id'));
_form_set_class($element, array('form-wrapper'));
$output = '<div' . drupal_attributes($element['#attributes']) . '>';
if (!empty($element['#title'])) {
// Always wrap fieldset legends in a SPAN for CSS positioning.
$output .= '<h2 class="multipage-pane-title"><span>' . $title . '</span></h2>';
$output .= '<div class="fieldset-wrapper multipage-pane-wrapper">';
if (!empty($element['#description'])) {
$output .= '<div class="fieldset-description">' . $element['#description'] . '</div>';
$output .= $element['#children'];
if (isset($element['#value'])) {
$output .= $element['#value'];
// Add a page counter if needed.
// counter array(0 => t('No'), 1 => t('Format 1 / 10'), 2 => t('The count number only'));
$page_counter_format = isset($parent_group-
>format_settings['instance_settings']['page_counter']) ? $parent_group-
>format_settings['instance_settings']['page_counter'] : 1;
$multipage_element['#page_counter_rendered'] = '';
if ($page_counter_format == 1) {
$output .= t('<span class="multipage-counter">%count / %total</span>', array('%count' =>

$multipages[$parent_group->group_name], '%total' => count($parent_group->children)));
}
elseif ($page_counter_format == 2) {
$output .= t('<span class="multipage-counter">%count</span>', array('%count' =>

$multipages[$parent_group->group_name]));
$output .= '</div>';
$output .= "</div>";
return $output;
/**
* Get all groups.
* @param $bundle
* The name of the bundle.
* @param $view_mode
* The view mode.
* @param $reset.
* Whether to reset the cache or not.
*/
function field_group_info_groups($entity_type = NULL, $bundle = NULL, $view_mode = NULL,

$reset = FALSE) {
static $groups = FALSE;
if (!$groups || $reset) {
if (!$reset && $cached = cache_get('field_groups', 'cache_field')) {

$groups = $cached->data;
else {
$ctools_export_load_object = &drupal_static('ctools_export_load_object');
$ctools_export_load_object_all = &drupal_static('ctools_export_load_object_all');
unset($ctools_export_load_object['field_group']);
unset($ctools_export_load_object_all['field_group']);
$groups = field_group_read_groups();
cache_set('field_groups', $groups, 'cache_field');
if (!isset($entity_type)) {
return $groups;
elseif (!isset($bundle) && isset($groups[$entity_type])) {
return $groups[$entity_type];
elseif (!isset($view_mode) && isset($groups[$entity_type][$bundle])) {
return $groups[$entity_type][$bundle];
elseif (isset($groups[$entity_type][$bundle][$view_mode])) {
return $groups[$entity_type][$bundle][$view_mode];
return array();
/**
* Read all groups.

*
* @param array $conditions
* Parameters for the query, as elements of the $conditions array.
* 'entity_type' The name of the entity type.
* 'bundle' The name of the bundle.
* 'mode' The view mode.
* @param boolean $enabled
* Return enabled or disabled groups.
* @return array
* Array of groups.
*/
function field_group_read_groups($conditions = array(), $enabled = TRUE) {
$groups = array();
if (empty($conditions)) {
$records = ctools_export_load_object('field_group');
else {
$records = ctools_export_load_object('field_group', 'conditions', $conditions);
foreach ($records as $group) {
// Return only enabled groups.
if ($enabled && isset($group->disabled) && $group->disabled) {

continue;
// Return only disabled groups.
elseif (!$enabled && (!isset($group->disabled) || !$group->disabled)) {
continue;
$groups[$group->entity_type][$group->bundle][$group->mode][$group->group_name] =
field_group_unpack($group);
drupal_alter('field_group_info', $groups);
return $groups;
/**
* Utility function to recreate identifiers.
*/
function _field_group_recreate_identifiers() {
// Migrate the field groups so they have a unique identifier.
$result = db_select('field_group', 'fg')
->fields('fg')
->execute();
$rows = array();
foreach($result as $row) {
$row->identifier = $row->group_name . '|' . $row->entity_type . '|' . $row->bundle . '|' . $row-

>mode;
$row->data = unserialize($row->data);
$rows[] = $row;
foreach ($rows as $row) {
drupal_write_record('field_group', $row, array('id'));
/**
* Checks if a field_group exists in required context.
* @param String $group_name
* The name of the group.
* @param String $entity_type
* @param String $bundle
* The bundle for the entity.
* @param String $mode
* The view mode context the group will be rendered.
*/
function field_group_exists($group_name, $entity_type, $bundle, $mode) {
$groups = field_group_read_groups();
return !empty($groups[$entity_type][$bundle][$mode][$group_name]);
/**
* Unpacks a database row in a FieldGroup object.
* @param $packed_group
* Database result object with stored group data.

* @return $group
* Field group object.
*/
function field_group_unpack($packed_group) {
if (empty($packed_group->data)) {
return $packed_group;
// Extract unserialized data.
$group = clone $packed_group;
$data = $group->data;
unset($group->data);
$group->label = isset($data['label']) ? $data['label'] : '';
$group->weight = isset($data['weight']) ? $data['weight'] : '';
$group->children = isset($data['children']) ? $data['children'] : '';
$group->format_type = !empty($data['format_type']) ? $data['format_type'] : 'fieldset';
if (isset($data['format_settings'])) {
$group->format_settings = $data['format_settings'];
return $group;
/**
* Packs a FieldGroup object into a database row.
* @param $group
* FieldGroup object.
* @return $record
* Database row object, ready to be inserted/update

*/
function field_group_pack($group) {
$record = clone $group;
$record->data = array(
'label' => $record->label,
'weight' => $record->weight,
'children' => $record->children,
'format_type' => !empty($record->format_type) ? $record->format_type : 'fieldset',
);
if (isset($record->format_settings)) {
$record->data['format_settings'] = $record->format_settings;
return $record;
/**
* Delete a field group.
* This function is also called by ctools export when calls are
* made through ctools_export_crud_delete().
* @param $group
* A group definition.
* @param $ctools_crud
* Is this function called by the ctools crud delete.
*/
function field_group_group_export_delete($group, $ctools_crud = TRUE) {
$query = db_delete('field_group');
if (isset($group->identifier)) {
$query->condition('identifier', $group->identifier);
if (!$ctools_crud) {
ctools_export_crud_disable('field_group', $group->identifier);
elseif (isset($group->id)) {
$query->condition('id', $group->id);
if (!empty($group->mode)) {
$query->condition('mode', $group->mode);
$query->execute();
cache_clear_all('field_groups', 'cache_field');
module_invoke_all('field_group_delete_field_group', $group);
/**
* field_group_group_save().
* Saves a group definition.
* This function is called by ctools export when calls are made
* through ctools_export_crud_save().
*
* @param $group
* A group definition.
*/
function field_group_group_save(& $group) {
// Prepare the record.
$object = field_group_pack($group);
if (isset($object->export_type) && $object->export_type & EXPORT_IN_DATABASE) {
// Existing record.
$update = array('id');
module_invoke_all('field_group_update_field_group', $object);
else {
// New record.
$update = array();
$object->export_type = EXPORT_IN_DATABASE;
module_invoke_all('field_group_create_field_group', $object);
return drupal_write_record('field_group', $object, $update);
/**
* Function to retrieve all format possibilities for the fieldgroups.
*/
function field_group_formatter_info($display_overview = FALSE) {
$cache = &drupal_static(__FUNCTION__, array());

if (empty($cache)) {
if ($cached = cache_get('field_group_formatter_info', 'cache_field')) {
$formatters = $cached->data;
else {
$formatters = array();
$formatters += module_invoke_all('field_group_formatter_info');
$hidden_region = array(
'label' => '<' . t('Hidden') . '>',
'description' => '',
'format_types' => array(),
'instance_settings' => array(),
'default_formatter' => '',
);
//$formatters['form']['hidden'] = $hidden_region;
$formatters['display']['hidden'] = $hidden_region;
cache_set('field_group_formatter_info', $formatters, 'cache_field');
$cache = $formatters;
return $cache;
/**
* Attach groups to the (form) build.
* @param Array $element
* The part of the form.
* @param String $view_mode

* The mode for the build.
* @param Array $form_state
* The optional form state when in view_mode = form context.
*/
function field_group_attach_groups(&$element, $view_mode, $form_state = array()) {
$entity_type = $element['#entity_type'];
$bundle = $element['#bundle'];
$element['#groups'] = field_group_info_groups($entity_type, $bundle, $view_mode);
$element['#fieldgroups'] = $element['#groups'];
// Create a lookup array.
$group_children = array();
foreach ($element['#groups'] as $group_name => $group) {
if (!empty($group->children)) {
foreach ($group->children as $child) {
$group_children[$child] = $group_name;
$element['#group_children'] = $group_children;
/**
* Pre render callback for rendering groups.
* @see field_group_field_attach_form
* @param $element Form that is being rendered.

*/
function field_group_form_pre_render(&$element) {
return field_group_build_entity_groups($element, 'form');
/**
* Preprocess/ Pre-render callback.
* @see field_group_form_pre_render()
* @see field_group_theme_registry_alter
* @see field_group_fields_nest()
* @param $vars preprocess vars or form element
* @param $type The type of object being rendered
* @return $element Array with re-arranged fields in forms.
*/
function field_group_build_entity_groups(&$vars, $type) {
if ($type == 'form') {
$element = &$vars;
$nest_vars = NULL;
else {
$element = &$vars['elements'];
$nest_vars = &$vars;
// No groups on the entity.
if (empty($element['#fieldgroups'])) {
return $element;
}
// Nest the fields in the corresponding field groups.
field_group_fields_nest($element, $nest_vars);
// Allow others to alter the pre_rendered build.
drupal_alter('field_group_build_pre_render', $element);
// Return the element on forms.
if ($type == 'form') {
return $element;
// No groups on the entity. Prerender removed empty field groups.
if (empty($element['#fieldgroups'])) {
return $element;
// Put groups inside content if we are rendering an entity_view.
foreach ($element['#fieldgroups'] as $group) {
if (!empty($element[$group->group_name]) && $type != 'user_profile') {
$vars['content'][$group->group_name] = $element[$group->group_name];
elseif (!empty($element[$group->group_name])) {
$vars['user_profile'][$group->group_name] = $element[$group->group_name];
// New css / js can be attached.

drupal_process_attached($element);
/**
* Recursive function to nest fields in the field groups.
* This function will take out all the elements in the form and
* place them in the correct container element, a fieldgroup.
* The current group element in the loop is passed recursively so we can
* stash fields and groups in it while we go deeper in the array.
* @param Array $element
* The current element to analyse for grouping.
* @param Array $vars
* Rendering vars from the entity being viewed.
*/
function field_group_fields_nest(&$element, &$vars = NULL) {
// Create all groups and keep a flat list of references to these groups.
$group_references = array();
foreach ($element['#fieldgroups'] as $group_name => $group) {
// check for any erroneous groups from other modules
if (is_string($group_name)) {
// Construct own weight, as some fields (for example preprocess fields) don't have weight set.
$element[$group_name] = array();
$group_references[$group_name] = &$element[$group_name];
// Loop through all form children looking for those that are supposed to be
// in groups, and insert placeholder element for the new group field in the
// correct location within the form structure.
$element_clone = array();
foreach (element_children($element) as $child_name) {
$element_clone[$child_name] = $element[$child_name];
// If this element is in a group, create the placeholder element.
if (isset($element['#group_children'][$child_name])) {
$element_clone[$element['#group_children'][$child_name]] = array();
$element = array_merge($element_clone, $element);
// Move all children to their parents. Use the flat list of references for
// direct access as we don't know where in the root_element hierarchy the
// parent currently is situated.
foreach ($element['#group_children'] as $child_name => $parent_name) {
// Entity being viewed
if ($vars) {
// If not a group, check vars['content'] for empty field.
if (!isset($element['#fieldgroups'][$child_name]) && isset($vars['content'][$child_name])) {
$group_references[$parent_name][$child_name] = $vars['content'][$child_name];
unset($vars['content'][$child_name]);
elseif (!isset($element['#fieldgroups'][$child_name]) &&

isset($vars['user_profile'][$child_name])) {
$group_references[$parent_name][$child_name] = $vars['user_profile'][$child_name];
unset($vars['user_profile'][$child_name]);
}
// If this is a group, we have to use a reference to keep the reference
// list intact (but if it is a field we don't mind).
else {
$group_references[$parent_name][$child_name] = &$element[$child_name];
unset($element[$child_name]);
// Form being viewed
else {
// Block denied fields (#access) before they are put in groups.
// Fields (not groups) that don't have children (like field_permissions) are removed
// in field_group_field_group_build_pre_render_alter.
if (isset($element[$child_name]) && (!isset($element[$child_name]['#access']) ||

$element[$child_name]['#access'])) {
// If this is a group, we have to use a reference to keep the reference
// list intact (but if it is a field we don't mind).
$group_references[$parent_name][$child_name] = &$element[$child_name];
$group_references[$parent_name]['#weight'] = $element['#fieldgroups'][$parent_name]-
>weight;
// The child has been copied to its parent: remove it from the root element.
unset($element[$child_name]);
// Bring extra element wrappers to achieve a grouping of fields.
// This will mainly be prefix and suffix altering.

foreach ($element['#fieldgroups'] as $group_name => $group) {
field_group_pre_render($group_references[$group_name], $group, $element);
/**
* Function to pre render the field group element.
* @see field_group_fields_nest()
* @param $element Array of group element that needs to be created!
* @param $group Object with the group information.
* @param $form The form object itself.
*/
function field_group_pre_render(& $element, $group, & $form) {
// Only run the pre_render function if the group has elements.
// $group->group_name
if ($element == array()) {
return;
// Let modules define their wrapping element.
// Note that the group element has no properties, only elements.
foreach (module_implements('field_group_pre_render') as $module) {
$function = $module . '_field_group_pre_render';
if (function_exists($function)) {
// The intention here is to have the opportunity to alter the

// elements, as defined in hook_field_group_formatter_info.
// Note, implement $element by reference!
$function($element, $group, $form);
// Allow others to alter the pre_render.
drupal_alter('field_group_pre_render', $element, $group, $form);
/**
* Hides field groups including children in a render array.
* A render array. Can be a form, node, user, ...
* @param array $group_names
* An array of field group names that should be hidden.
*/
function field_group_hide_field_groups(&$element, $group_names) {
foreach ($group_names as $group_name) {
if (isset($element['#fieldgroups'][$group_name]) && isset($element['#group_children'])) {
// Hide the field group.
$element['#fieldgroups'][$group_name]->format_type = 'hidden';
// Hide the elements inside the field group.
$sub_groups = array();
foreach (array_keys($element['#group_children'], $group_name) as $field_name) {
if (isset($element['#fieldgroups'][$field_name])) {
$sub_groups[] = $field_name;
} else {
$element[$field_name]['#access'] = FALSE;
field_group_hide_field_groups($element, $sub_groups);
/**
* Calculates html classes for a group.
*/
function _field_group_get_html_classes(&$group) {
if (isset($group->format_settings['formatter'])) {
$group->collapsible = in_array($group->format_settings['formatter'], array('collapsible',

'collapsed'));
// Open or closed horizontal or vertical tabs will be collapsible by default.
if ($group->format_type == 'tab' || $group->format_type == 'htab') {
$group->collapsible = TRUE;
$group->collapsed = in_array($group->format_settings['formatter'], array('collapsed', 'closed'));
$classes = new stdClass();
// Prepare extra classes, required and optional ones.
$optional = array(str_replace('_', '-', $group->group_name));
$required = array();
if ($group->format_type == 'multipage') {
$required[] = 'field-group-' . $group->format_type;
else {
$optional[] = 'field-group-' . $group->format_type;
if (isset($group->format_settings['formatter']) && $group->collapsible) {
$required[] = 'collapsible';
if ($group->collapsed) {
$required[] = 'collapsed';
if (isset($group->format_settings['instance_settings'])) {
// Add a required-fields class to trigger the js.
if (!empty($group->format_settings['instance_settings']['required_fields'])) {
$required[] = 'required-fields';
// Add user selected classes.
if (!empty($group->format_settings['instance_settings']['classes'])) {
$required[] = check_plain($group->format_settings['instance_settings']['classes']);
// Extra required classes for div.
if ($group->format_type == 'div') {
if ($group->format_settings['formatter'] != 'open') {
$speed = isset($group->format_settings['instance_settings']['speed']) ? $group-
>format_settings['instance_settings']['speed'] : 'none';
$required[] = 'speed-' . $speed;

$required[] = 'effect-' . $effect;
// Extra required classes for accordions.
elseif ($group->format_type == 'accordion') {
$required[] = 'field-group-' . $group->format_type . '-wrapper';

$required[] = 'effect-' . $effect;
$classes->required = $required;
$classes->optional = $optional;
return $classes;
/**
* Get the default formatter settings for a given formatter and a mode.
*/
function _field_group_get_default_formatter_settings($format_type, $mode) {
$field_group_types = field_group_formatter_info();
$display_mode = $mode == 'form' ? 'form' : 'display';
$formatter = $field_group_types[$display_mode][$format_type];
return array(
'formatter' => isset($formatter['default_formatter']) ? $formatter['default_formatter'] : '',
'instance_settings' => $formatter['instance_settings']
);
/**
* Callback to bulk export field groups.
*/
function field_group_field_group_to_hook_code($data, $module) {
$schema = ctools_export_get_schema('field_group');
$export = $schema['export'];
$translatables = array();
$objects = ctools_export_load_object('field_group', 'names', array_values($data));
$code = "/**\n";
$code .= " * Implements hook_{$export['default hook']}()\n";
$code .= " */\n";
$code .= "function " . $module . "_{$export['default hook']}() {\n";
$code .= " \${$export['identifier']}s = array();\n\n";
foreach ($objects as $object) {
$code .= ctools_export_object('field_group', $object, ' ');

$code .= " \${$export['identifier']}s['" . check_plain($object->$export['key']) . "'] =
\${$export['identifier']};\n\n";
if (!empty($object->data['label'])) {
$translatables[] = $object->data['label'];
if (!empty($object->data['description'])) {
$translatables[] = $object->data['description'];
if (!empty($translatables)) {
$code .= features_translatables_export($translatables, ' ') . "\n";
$code .= " return \${$export['identifier']}s;";
$code .= "}\n";
return $code;
}
/home/luised/Escritorio/deployments/TNC/dss-
magdalena/docroot/profiles/dss_magdalena/modules/contrib/field_group/multipage/multipage.j
s
$( document ).ready(function() {
/*var id = $(this).attr("datos basicos");
console.log(id);*/
tipoForm = document.getElementById("seleccion de escenario");
tipoForm1 = document.getElementById("selección hidroenergía");
tipoForm2 = document.getElementById("selección clima");
if (tipoForm1 == undefined && tipoForm2 == undefined ){
"#104659";
"#DFF1F2";
"Paso 2";
document.getElementById("seleccion de plan integral").innerHTML
= "Paso 3";
"#104659";
}
"#104659";
"#DFF1F2";
document.getElementById("multiformid").style.marginLeft = "-
15%";
"paso 2 ";
"paso 3 ";
document.getElementById("selección humedales").innerHTML = "paso
4 ";
}
if(tipoForm == undefined && tipoForm1 == undefined){
= "#104659";
"#DFF1F2";
document.getElementById("selección energía").innerHTML = "paso 2
";
document.getElementById("selección población").innerHTML = "paso
3 ";
}
});
var paso=1;
function siguientePagina(e){
if ( paso == 1 ){
= "#104659";
}
if ( paso == 2 ){
= "#2ca13a";
"#DFF1F2";
= "#DFF1F2";
"#2ca13a";
"#104659";
}
if ( paso == 3 ){
escenario").style.backgroundColor = "#2ca13a";
"✓";
integral").style.color = "#DFF1F2";
"#2ca13a";
"#2ca13a";
"#2ca13a";
"#2ca13a";
"#104659";
}
if ( paso == 4 ){
integral").style.backgroundColor = "#2ca13a";
integral").innerHTML = "✓";
= "#104659";
"#DFF1F2";
"#2ca13a";
"#2ca13a";
"#2ca13a";
"#2ca13a";
}
}
if ( paso == 1 ){
= "#104659";
}
if ( paso == 2 ){
= "#2ca13a";
"#DFF1F2";
document.getElementById("selección hidroenergía").style.color
= "#DFF1F2";
"#104659";
}
if ( paso == 3 ){
hidroenergía").style.backgroundColor = "#2ca13a";
"✓";
document.getElementById("selección uso del suelo").style.color
= "#DFF1F2";
"#2ca13a";
"#104659";
}
if ( paso == 4 ){
suelo").style.backgroundColor = "#2ca13a";
"✓";
"#DFF1F2";
"#2ca13a";
"#104659";
}
if ( paso == 5 ){
humedales").style.backgroundColor = "#2ca13a";
document.getElementById("selección humedales").innerHTML =
"✓";
= "#104659";
"#DFF1F2";
}
}
if ( paso == 1 ){
clima").style.backgroundColor = "#104659";
}
if ( paso == 2 ){
clima").style.backgroundColor = "#2ca13a";
document.getElementById("selección clima").innerHTML = "✓";
"#DFF1F2";
"#DFF1F2";
"#104659";
}
if ( paso == 3 ){
energía").style.backgroundColor = "#2ca13a";
document.getElementById("selección energía").innerHTML = "✓";
"#DFF1F2";
"#2ca13a";
"#104659";
}
if ( paso == 4 ){
población").style.backgroundColor = "#2ca13a";
document.getElementById("selección población").innerHTML =
"✓";
= "#104659";
"#DFF1F2";
"#2ca13a";
"#104659";
}
}
console.log(paso);
};
function retrocederPaso(e){
if ( paso == 1 ){
= "#104659";
escenario").style.backgroundColor = "#DFF1F2";
"Paso 2";
= "#0D333D";
"#104659";
"#FFF";
}
if ( paso == 2 ){
"Paso 2";
integral").style.backgroundColor = "#DFF1F2";
integral").style.color = "#0D333D";
"#104659";
"#FFF";
"#FFF";
"#FFF";
"#FFF";
}
if ( paso == 3 ){
= "#DFF1F2";
"#0D333D";
"#104659";
"#FFF";
"#FFF";
"#FFF";
}
}
if ( paso == 1 ){
"#104659";
hidroenergía").style.backgroundColor = "#DFF1F2";
"Paso 2";
document.getElementById("selección hidroenergía").style.color =
"#0D333D";
"#FFF";
}
if ( paso == 2 ){
"Paso 2";
suelo").style.backgroundColor = "#DFF1F2";
document.getElementById("selección uso del suelo").style.color =
"#0D333D";
"Paso 3";
"#104659";
"#FFF";
}
if ( paso == 3 ){
"Paso 3";
humedales").style.backgroundColor = "#DFF1F2";
"#0D333D";
4";
"#104659";
"#FFF";
}
if ( paso == 4 ){
4";
"#DFF1F2";
"#0D333D";
}
}
if ( paso == 1 ){
= "#104659";
energía").style.backgroundColor = "#DFF1F2";
2";
"#0D333D";
"#FFF";
}
if ( paso == 2 ){
2";
población").style.backgroundColor = "#DFF1F2";
3";
"#0D333D";
"#104659";
"#FFF";
document.getElementById("paso2M2").style.color = "#104659"
}
if ( paso == 3 ){
3";
"#DFF1F2";
"#0D333D";
"#104659";
"#FFF";
}
}
console.log(paso);
Drupal.multipageControl = function (settings) {

var self = this;
var controls = Drupal.theme('multipage', settings);
$.extend(self, settings, controls);
this.nextLink.click(function (e) {
paso++;
siguientePagina(paso);
e.preventDefault();
self.nextPage();
});
this.previousLink.click(function (e) {
paso--;
retrocederPaso(paso);
e.preventDefault();
self.previousPage();
});
magdalena/docroot/profiles/dss_magdalena/modules/contrib/field_group/field_group.module
$output .= '<a href="#popup" class="popup-link">Progreso</a>';

$output .= '<div class="modal-wrapper" id="popup">
<div class="popup-contenedor">
<div class="tree">
<ul>
<li>
<div id="paso1M">casos de estudio</div>
<ul>
<li>
<div id="paso3M">alternativas de plan integral</div>
<ul>
<li>
<div id="paso3M1">alternativa hidroelectrica</div>
</li>
<li>
<div id="paso3M2">Cambío del uso del suelo</div>
</li>
<li>
<div id="paso3M3">Manejo de humedales</div>
</li>
</ul>
</li>
<li>
<div id="paso2M">escenarios</div>
<ul>
<li>
<div id="paso2M1">Escenarios climaticos</div>
</li>
<li>
<div id="paso2M2">Escenario de poblacion</div>
</li>
<li>
<div id="paso2M3">Escenario de Energia</div>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<a class="popup-cerrar" href="#">X</a>
</div>
</div>';
magdalena/docroot/profiles/dss_magdalena/modules/contrib/field_group/multipage/multipage.c
ss
#popup {
visibility: hidden;
opacity: 0;
margin-top: -300px;
}*
#popup:target {
visibility:visible;
opacity: 1;
background-color: rgba(0,0,0,0.8);
position: fixed;
top:0;
left:0;
right:0;
bottom:0;
margin:0;
z-index: 999;
transition:all 1s;
}*
.popup-contenedor {
position: relative;
margin:7% auto;
padding:30px 50px;
background-color: #fafafa;
color:#333;
border-radius: 3px;
width:60%;
height: 60%;
}
a.popup-cerrar {
position: absolute;
top:3px;
right:3px;
padding:7px 10px;
font-size: 20px;
line-height: 1;
color:#fff;
}
.popup-contenedor h1{
text-align: center;
}
a.popup-link{
border:1px solid #0D333D;
color: #0D333D;
padding: 1%;
border-radius: 5%;
display:scroll;
position:fixed;
bottom:10%;
right:2%;
}
.titulo{
text-align: center;
padding:5%;
font-weight: 900;
}
.multiform h4{
border: 1px solid #0D333D;
text-align: center;
margin-left: 15%;
padding-top: 20px;
padding-bottom: 20px;
padding: 2% 1% 2% 1%;
width: 7%;
color: #0D333D;
}
.multiform{
display: inline;
}
.barra_progreso {
width: 100%; /* Full width */
background-color: #ddd; /* Grey background */
}
.progreso {
text-align: right; /* Right-align text */
padding-top: 10px; /* Add top padding */
padding-bottom: 10px; /* Add bottom padding */
color: white; /* White text color */
}
.multipage-controls-list #edit-actions {
}
.multipage-button {
margin-bottom: 1em;
margin-top: 0;
line-height: 36px;
}
.multipage-button a {
padding-top: 10px;
}
.multipage-counter {
float: right; /* LTR */
margin-right: 5px; /* LTR */
height: 0;
position: relative;
top: 1.8em;
line-height: 30px;
font-weight: bold;
color:#666;
}
a.multipage-link-previous {
font-weight: bold;
color:#666;
-webkit-transition: color 218ms;
-moz-transition: color 218ms;
-o-transition: color 218ms;
transition: color 218ms;
}
a.multipage-link-previous:hover {
text-decoration:none;
color: #333;
}
.multipage-controls-list input.form-submit {
background:none;
border: none;
border-radius: 2px;
border: 1px solid rgba(0, 0, 0, 0.1);
font-weight: bold;
color: #666;
text-shadow: 0 1px 0 white;
padding: 7px 12px;
70%,from(whiteSmoke),to(#F1F1F1));
-o-transition: border-top-color 0.218s,border-right-color
0.218s,border-bottom-color 0.218s,border-left-color .218s;
-webkit-transition: border-color .218s;
}
.multipage-controls-list input.form-submit:hover {
color:#333;
border-color: #939393;
}
.multipage-controls-list input.form-submit:active {
70%,from(#F1F1F1),to(whiteSmoke));
}
.multipage-controls-list input#edit-submit {
background: #4D90FE; /* for non-css3 browsers */
background-image: #4D90FE; /* for non-css3 browsers */
background-image: -o-linear-gradient(top,#4d90fe,#4787ed);
filter:
progid:DXImageTransform.Microsoft.gradient(startColorstr='#4D90FE',
endColorstr='#4787ED'); /* for IE */
background: -webkit-gradient(linear, center top, center bottom,
from(#4D90FE), to(#4787ED)); /* for webkit browsers */
background: -moz-linear-gradient(center top, #4D90FE, #4787ED); /*
for firefox 3.6+ */
color: white;
text-shadow: none;
min-width: 79px;
}
.multipage-controls-list input#edit-submit:hover {
background-image: -moz-linear-gradient(top,#4d90fe,#357ae8);
background-image: -o-linear-gradient(top,#4d90fe,#357ae8);
bottom,from(#4d90fe),to(#357ae8));
color: white;
text-shadow: none;
}
.multipage-controls-list input#edit-submit:active {
background: #4D90FE;
border-color: #2F5BB7;
}
.multipage-controls-list input#edit-delete {
background-image: -moz-linear-gradient(top,#dd4b39,#d14836);
background-image: -o-linear-gradient(top,#dd4b39,#d14836);
bottom,from(#dd4b39),to(#d14836));
text-shadow: 0 1px rgba(0, 0, 0, 0.1);
border: 1px solid transparent;
color: white;
text-shadow: none;
.multipage-controls-list input#edit-delete:hover {
background-image: -moz-linear-gradient(top,#dd4b39,#c53727);
background-image: -o-linear-gradient(top,#dd4b39,#c53727);
bottom,from(#dd4b39),to(#c53727));
border: 1px solid #B0281A!important;
border-bottom: 1px solid #AF301F!important;
color: white;
}
.multipage-controls-list input#edit-delete:active {
background-image: -moz-linear-gradient(top,#dd4b39,#b0281a);
background-image: -o-linear-gradient(top,#dd4b39,#b0281a);
bottom,from(#dd4b39),to(#b0281a));
border: 1px solid #992A1b!important;
}

Csca

Uploaded by

Copyright:

Available Formats

Csca

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Csca

Uploaded by

Copyright:

Available Formats

Multipage

Css inj arbol

transition: all 0.5s;

transition: all 0.5s;

.tree li::before, .tree li::after{

.tree li:only-child::after, .tree li:only-child::before {

.tree li:only-child{ padding-top: 0;}

.tree li:first-child::before, .tree li:last-child::after{

transition: all 0.5s;

-webkit-box-shadow: -10px 14px 21px -8px rgba(0,0,0,0.75);

Css inj general

@media only screen and (max-width: 1499px) {

transition: all 0.2s linear;

.tabla> .table > thead > tr > th {

.tabla tbody tr:hover td{

.tabla > thead > tr > th{

/* Location of the image */

/* Background image is centered vertically and horizontally at all

/* Background image doesn't tile */

/* Background image is centered vertically and horizontally at all

/* Background image doesn't tile */

/* Background image is centered vertically and horizontally at all

/* Background image doesn't tile */

/* Location of the image */

/* Background image is centered vertically and horizontally at all

/* Background image doesn't tile */

/* Background image is centered vertically and horizontally at all

/* Set a background color that will be displayed

/* Location of the image /*

/* Background image doesn't tile */

/* Set a background color that will be displayed

/* Background image is centered vertically and horizontally at all

/* Background image doesn't tile */

/* Set a background color that will be displayed

@media only screen and (max-width: 480px) {

/* Background image doesn't tile */

/* Background image is fixed in the viewport so that it doesn't move

/* Set a background color that will be displayed

var focusID = $(':hidden.multipage-active-control',

// Check if there are some wrappers that can be converted to

// Create the next/previous controls.

// Transform each div.multipage-pane into a multipage with

$controls = $('<div class="multipage-controls-list

// Check if the submit button needs to move to the latest

var multipageControl = new Drupal.multipageControl({

if (paneWithFocus === undefined) {

Drupal.multipageControl = function (settings) {

// Override nextPage function

/* if ($('select, input, textarea', this.wrapper).valid()) {

var controls = {};

controls.previousLink = $('<input type="button" class="form-submit

controls.nextLink = $('<input type="button" class="form-submit

Drupal.FieldGroup = Drupal.FieldGroup || {};

var $firstErrorItem = false;

// Add required fields mark to any element containing required

// Save first error item, for focussing it.

// Focus on first multipage that has an error.

* For an overview of all php and javascript hooks, see field_group.api.php.