plantilla-wp.ejs

<% i18n.setLocale(idioma); %>  
<div class="programa-elecciones-generales">

    <div>
        <div class="ramas">
        <% ejes.forEach(function(eje) { %>
        	<a href="#" class="btn" data-rel="<%= eje.nombre %>"><%= i18n.__(eje.nombre) %></a>
        <% }); %>
        </div>
    </div>

	<div class="busquedas">
		<div class="buscar-programa">
			<i class="fa fa-search"></i>
			<input id="busca" type="search" placeholder="<%= i18n.__("Buscar en el programa") %>">
		</div>
		<div class="loader-medidas">
			<span><span id="medidas-visibles"></span> medidas encontradas</span>
		</div>
	</div>

    <div class="categorias-programa">

		<div id="plan-rescate-ciudadano" class="nomovil">
			<h3>Plan de Rescate Ciudadano</h3>
			<p><a href="/plan-rescate-ciudadano/">Un Plan para devolver el País a su gente</a></p>
		</div>

		<div id="descargas-programa">

        	<h3><i class="fa fa-file-pdf-o"></i> <%= i18n.__("Descargas") %></h3>

			<div id="desplegable-descargas-programa" class="nomovil">
				<p class="banner-programa"><a href="/wp-content/uploads/2016/06/Podemos-Programa-Electoral-Elecciones-Generales-26J.pdf" target="_blank"><img src="/wp-content/plugins/programa/data/portada-programa.jpg" alt="Portada Programa PODEMOS" style="width:100%;" /></a></p>
				<p class="banner">Consigue tu programa de Podemos impreso 
					<!--<a href="https://tienda.podemos.info/producto/programa-catalogo-podemos-elecciones-generales-26-j-2016/" target="_blank">en nuestra tienda</a>-->
					<a href="/wp-content/uploads/2016/06/Listado-Puntos-de-Venta-Podemos.pdf" target="_blank">en esta lista de kioskos</a><br>
					<img src="/wp-content/plugins/programa/data/banner-programa-en-papel.png" alt="Consigue el programa impreso" style="width:100%;" /></p>
				<p><a href="/wp-content/plugins/programa/data/programa-<%= idioma %>.pdf" class="pdf" target="_blank"><%= i18n.__("Programa Electoral") %> 20D</a></p>
				<p><a href="/wp-content/plugins/programa/data/programa-economica.pdf" class="pdf" target="_blank"><%= i18n.__("Memoria Económica") %></a></p>
				<p><a href="/wp-content/plugins/programa/data/programa-juridica.pdf" class="pdf" target="_blank"><%= i18n.__("Memoria Jurídica") %></a></p>
				<p><a href="/un-programa-contigo/" class="pdf"><%= i18n.__("Programa en vídeo") %></a></p>
				<p class="lectura-facil"><a href="/wp-content/plugins/programa/data/programa-lectura-facil.pdf" class="pdf" target="_blank">Programa de Lectura Fácil</a></p>
				<p><a href="/wp-content/plugins/programa/data/programa-cultura-comunicacion-podemos.pdf" class="pdf" target="_blank"><%= i18n.__("Programa de Cultura y Comunicación") %></a></p>
				<p><a href="http://podemos.info/wp-content/uploads/2016/05/acuerdo26J_final.pdf" class="pdf" target="_blank"><%= i18n.__("50 pasos para gobernar juntos") %></a></p>
			</div>

		</div>

		<div id="opendata-programa" class="nomovil">

			<h3>Open Data</h3>

			<p><a href="/wp-content/plugins/programa/data/programa_<%= idioma %>.csv" class="pdf"><i class="fa fa-database"></i> .csv</a></p>
			<p><a href="https://github.com/podemos-info/programa-electoral-podemos-26j/zipball/master" class="pdf"><i class="fa fa-archive"></i> .zip</a></p>
			<p><a href="https://github.com/podemos-info/programa-electoral-podemos-26j/" class="pdf" target="_blank"><i class="fa fa-github"></i> github</a></p>
		</div>

		<div id="etiquetas-programa" class="nomovil">

		    <h3><i class="fa fa-book"></i> <%= i18n.__("Temas") %></h3>

		    <div class="categoria-propuestas">
		    <% etiquetas.forEach(function(categoria) { %>
		    	<a href="?tema=<%= categoria.slug %>" class="btn" data-rel="<%= categoria.slug %>"><%= i18n.__(categoria.nombre) %></a>
		    <% }); %>
		    </div>
		</div>

    </div>

	<div class="medidas">
		<div style="width:100%;height:1px;"></div>  
	<% medidas.forEach(function(medida){ %>
		<div id="medida-<%= medida.num %>" class="medidas-programa" data-eje="<%= medida.eje %>">
		    <div class="numero-medida"><%= medida.num %></div>
		    <div class="titulo-medida">
		        <h4><%= medida.titulo %></h4>
		        <div class="categoria-medida">
            <% medida.etiquetas.forEach(function(categoria) { %>
		            <a href="?tema=<%= categoria.slug %>" data-rel="<%= categoria.slug %>"><span><%= i18n.__(categoria.nombre) %></span></a>
            <% }); %>
		        </div>
		        <div class="descripcion-medida">
              <%- medida.descripcion %>
              <div class="social">
				<p><strong>¡Comparte esta medida en redes sociales!</strong></p>
                <a href="https://pode.ms/26j-<%= idioma %>-<%= medida.num %>"><i class="fa fa-facebook-official"></i></a>
                <a href="https://pode.ms/26j-<%= idioma %>-<%= medida.num %>"><i class="fa fa-twitter"></i></a>
                <a href="https://pode.ms/26j-<%= idioma %>-<%= medida.num %>" data-action="share/whatsapp/share"><i class="fa fa-whatsapp"></i></a>
                <a href="https://pode.ms/26j-<%= idioma %>-<%= medida.num %>"><i class="fa fa-link"></i></a>
              </div>
            </div>
		    </div>
		</div>
	<% }); %>
	</div>

	<div class="ir-arriba" style="display:none; position:fixed; right: 10px; bottom: 10px; cursor: pointer;">
		<i class="fa fa-arrow-up fa-4x"></i>
	</div>

</div>

<script>

;(function($) {

	var url_base = document.location.href.split('?')[0];

	var normaliza = (function() {
	  var from = "ãàáäâèéëêìíïîòóöôùúüû", 
		  to   = "aaaaaeeeeiiiioooouuuu",
		  mapping = {};
	 
	  for(var i = 0, j = from.length; i < j; i++ )
		  mapping[ from.charAt( i ) ] = to.charAt( i );
	 
	  return function( str ) {
	      str = str.toLowerCase();
		  var ret = [];
		  for( var i = 0, j = str.length; i < j; i++ ) {
		      var c = str.charAt( i );
		      if( mapping.hasOwnProperty( str.charAt( i ) ) )
		          ret.push( mapping[ c ] );
		      else
		          ret.push( c );
		  }      
		  return ret.join( '' );
	  }
	 
	})();

	function medidas_visibles() {
		$('#medidas-visibles').html('<i class="fa fa-spinner fa-spin"></i>');
		setTimeout(function() {
			$('#medidas-visibles').text($('.medidas-programa:visible').length);
		}, 800);
	}

	$('.loader-medidas').hide();
	medidas_visibles();

	$('#busca').on('keyup', function(e) {
		$('.loader-medidas').show();
		var objetivo = normaliza($(this).val());
		if (objetivo.length == 0) {
			$('.medidas-programa').fadeIn();
		}
		if (objetivo.length >= 4) {
			$('.medidas-programa').hide();
			$('.titulo-medida').each(function() {
				var titulo = normaliza($(this).find('h4').text()+' '+$(this).find('.categoria-medida').text());
				if (titulo.indexOf(objetivo) >= 0) {
					$(this).parents('.medidas-programa').fadeIn();
				}
			});
		}
		medidas_visibles();
	});

	$('.medidas-programa .titulo-medida h4').on('click', function(e) {
		var descripcion = $(this).parent().find('.descripcion-medida');
		($(descripcion).is(':visible'))?$(descripcion).slideUp():$(descripcion).slideDown();
	});
	$('.categoria-propuestas a, .categoria-medida a').on('click', function(e) {
		e.preventDefault();
		var categoria = $(this).data('rel');
		$('.categoria-propuestas a').removeClass('activo');
		$(this).addClass('activo');
		$('.medidas-programa').hide();
		$('.categoria-medida a').removeClass('activo');
		$('.medidas-programa [data-rel="'+categoria+'"]').each(function() {
			$(this).addClass('activo');
			$(this).parents('.medidas-programa').fadeIn();
		});
		$('html, body').animate({scrollTop: 0}, 800);
	});
	$('.ramas a').on('click', function(e) {
		e.preventDefault();
		var eje = $(this).data('rel');
		$('.ramas a').removeClass('activo');
		$(this).addClass('activo');
		$('.medidas-programa').hide();
		$('[data-eje="'+eje+'"]').each(function() {
			$(this).fadeIn();
		});
	});
  // social
  $('.social .fa-facebook-official').parent().on('click', function(e) {
    e.preventDefault();
    var winTop = (screen.height / 2) - (350 / 2);
    var winLeft = (screen.width / 2) - (520 / 2);
	var url = encodeURI($(this).attr('href'));
    window.open('https://www.facebook.com/sharer/sharer.php?u=' + url, 'sharer', 'top=' + winTop + ',left=' + winLeft + ',toolbar=0,status=0,width=520,height=350');
  });
  $('.social .fa-twitter').parent().on('click', function(e) {
    e.preventDefault();
    var winTop = (screen.height / 2) - (350 / 2);
    var winLeft = (screen.width / 2) - (520 / 2);
    var medida = $(this).parents('.medidas-programa');
	var url = encodeURI($(this).attr('href'));
    var tweet = encodeURI($(medida).find('.titulo-medida h4').text() + ' ' + url);
    window.open('https://twitter.com/home?status=' + tweet, 'sharer', 'top=' + winTop + ',left=' + winLeft + ',toolbar=0,status=0,width=520,height=350');
  });
  $('.social .fa-whatsapp').parent().on('click', function(e) {
	e.preventDefault();
    var winTop = (screen.height / 2) - (350 / 2);
    var winLeft = (screen.width / 2) - (520 / 2);
    var medida = $(this).parents('.medidas-programa');
	var url = encodeURI($(this).attr('href'));
    var texto = encodeURI($(medida).find('.titulo-medida h4').text() + ' ' + url);
    window.open('whatsapp://send?text=' + texto, 'sharer', 'top=' + winTop + ',left=' + winLeft + ',toolbar=0,status=0,width=520,height=350');
  });
  // devuelve array con las medidas a mostrar
  function dame_medidas_url() {
    var medidas = window.location.search;
    if (medidas.indexOf('medida=') > -1) {
      medidas=medidas.split('medida=');
      medidas=[parseInt(medidas[1])];
    } else {
      medidas=[];
    }
    return medidas;    
  }
  function dame_temas_url() {
    var temas = window.location.search;
    if (temas.indexOf('tema=') > -1) {
      temas=temas.split('tema=')[1];
      temas=temas.split('&')[0];
      temas=[decodeURI(temas)];
    } else {
      temas=[];
    }
    return temas;    
  }
  var medidas =  dame_medidas_url();
  for (i=0; i<medidas.length; i++) {
    $('.medidas-programa').hide();
    $('#medida-'+medidas[i]).fadeIn(function() {
      $(this).find('.descripcion-medida').delay(800).slideDown();
    });
  }
  var temas = dame_temas_url();
  for (i=0; i<temas.length; i++) {
    $('.categoria-propuestas [data-rel="'+temas[i]+'"]').trigger('click');
  }

  $(window).scroll(function() {
    if ($(this).scrollTop() > 100) {
      $('.ir-arriba').fadeIn();
    } else {
      $('.ir-arriba').fadeOut();
    }
  });

  $('.ir-arriba').on('click', function(e) {
    e.preventDefault();
    $('html, body').animate({scrollTop: 0}, 800);
  });

  $('#descargas-programa h3').on('click', function(e) {
    e.preventDefault();
    if ($('#desplegable-descargas-programa').is(':visible')) {
      $('#desplegable-descargas-programa').slideUp();
    } else {
      $('#desplegable-descargas-programa').slideDown();
    }
  });

})(jQuery);

</script>


</body>