Quito slideshow, añado multilanguage, falta solucionar problema con el botón de idiomas.

This commit is contained in:
Luca 2017-12-15 01:17:46 +01:00
parent e8bde10663
commit 1eb79abdc1
13 changed files with 178 additions and 55 deletions

View File

@ -8,7 +8,7 @@ angular.module('anApp',[
jQuery(document).ready(function() {
//console.log('ready');
var slsh;
//var slsh;
//var slsh = new SlideShow('.slideshow', {timeout: 5000});
});

View File

@ -36,13 +36,14 @@ angular.
module('catalog').
component('anHome',{
templateUrl: localized.partials + 'home.template.html',
controller: function($scope, $http, $routeParams) {
controller: function($scope, $rootScope, $http, $routeParams) {
console.log($rootScope.loading);
$scope.loading = true;
window.scrollTo(0,0);
$http.get('wp-json/wp/v2/slideshow').then(function(res) {
$scope.slides = res.data;
//slsh = new SlideShow('.slideshow', {timeout: 4000});
//console.log('content');
$scope.loading = false;
});
//$http.get('wp-json/wp/v2/posts').then(function(res) { $scope.posts = res.data; });
}
});
@ -64,6 +65,7 @@ angular
templateUrl: localized.partials + 'content.template.html',
controller: function($scope, $http, $routeParams, $sce) {
console.log($routeParams.slug);
$http.get('wp-json/wp/v2/pages/?slug='+$routeParams.slug).then(function(res) { $scope.post = res.data[0]; $scope.content = $sce.trustAsHtml($scope.post.content.rendered); });
window.scrollTo(0,0);
$http.get('wp-json/wp/v2/pages/?slug='+$routeParams.slug).then(function(res) { $scope.post = res.data[0]; $scope.content = $sce.trustAsHtml($scope.post.content.rendered); });
}
});

View File

@ -4,17 +4,21 @@ angular.
function config($locationProvider, $routeProvider) {
//$locationProvider.hashPrefix('!');
$locationProvider.html5Mode(true);
var a = window.location.host.split('.')[0];
$routeProvider
.when('/',{ template: '<an-home></an-home>'})
.when('/catalog', {
template: '<an-list></an-list>'
})
.when('/catalog/:itemId', {
.when('/catalog/:slug', {
template: '<an-detail></an-detail>'
})
.when('/info', {template: '<an-info></an-info>'})
.when('/contact', {template: '<an-contact></an-contact>'})
//.when('/contact', {template: '<an-contact></an-contact>'})
.when('/:slug',{template: '<an-content></an-content>'})
.otherwise({ redirectTo: '/'});
}
]);
]).
run(function($rootScope) {
$rootScope.loading = false;
});

View File

@ -1,2 +1,3 @@
angular.module('catalog', [
'ngRoute']);

View File

@ -2,9 +2,19 @@ angular.
module('item').
component('anDetail', {
templateUrl: localized.partials + '/item-detail.template.html',
controller: ['$routeParams',
function ItemDetailController($routeParams) {
this.itemId = $routeParams.itemId;
}
]
controller: function($scope, $http, $routeParams, $sce, SubdomainService) {
//console.log($routeParams.slug);
$scope.lang = SubdomainService.subdomain;
$http.get('wp-json/wp/v2/entrevista/?slug='+$routeParams.slug).then(function(res) {
//console.log(res.data[0]);
$scope.post = res.data[0];
});
}
// controller: ['$routeParams',
// function ItemDetailController($routeParams) {
// this.itemId = $routeParams.itemId;
// $http.get('wp-json/wp/v2/entrevistas/?slug='+$routeParams.slug).then(function(res) { $scope.post = res.data[0]; $scope.content = $sce.trustAsHtml($scope.post.content.rendered); });
// }
//]
});

View File

@ -1 +1,9 @@
angular.module('item',['ngRoute']);
angular.module('item',['ngRoute']);
angular.module('item').factory('SubdomainService', [
'$location', function($location) {
var service = {};
service.subdomain = window.location.host.split('.')[0];
if (window.location.host.split('.').length != 3) { service.subdomain = 'eus'; }
return service;
}
]);

View File

@ -101,3 +101,12 @@ h2 {font-weight:bold; color: rgba(255,153,51.255);}
}
.slideshow img::before {display:none;}
.navbar-header .navbar-collapse ul li.lang-item { float:left;}
.navbar-header .navbar-collapse ul { list-decoration:none;padding:0;}
.navbar-header .navbar-collapse ul li a { padding:10px 15px; }
/* static slider */
.slideshow-static { padding:0; }
.slideshow-static li { list-style:none;}

View File

@ -73,13 +73,35 @@ function create_posttype() {
function my_rest_prepare_slideshow($data,$post,$request) {
$_data = $data->data;
$thumbnail_id = get_post_thumbnail_id($post->ID);
$thumbnail = wp_get_attachment_image_src ($thumbnail_id,array(100,100),true);
#$thumbnail = wp_get_attachment_image_src ($thumbnail_id);
$thumbnail = wp_get_attachment_image_src ($thumbnail_id,'full',false);
$_data['featured_image_thumbnail_url'] = $thumbnail[0];
$_data['excerpt_clean'] = strip_tags(get_the_excerpt($post->ID));
$data->data = $_data;
return $data;
}
function my_rest_prepare_entrevista($data,$post,$request) {
$_data = $data->data;
//thumbnail
$thumbnail_id = get_post_thumbnail_id($post->ID);
$thumbnail = wp_get_attachment_image_src ($thumbnail_id);
$_data['featured_image_thumbnail_url'] = $thumbnail[0];
//category
$_data['category'] = wp_get_post_terms($post->ID,'termino');
//acf
$_data['e_idioma'] = get_field('idioma',$post->ID);
$_data['e_informantes'] = get_field('informantes',$post->ID);
$_data['e_audiovisual'] = get_field('audiovisual',$post->ID);
$_data['e_transcripcion'] = get_field('transcripcion',$post->ID);
$_data['e_fecha_de_entrevista'] = get_field('fecha_de_entrevista',$post->ID);
$_data['e_localizacion'] = get_field('lugar',$post->ID);
$data->data = $_data;
return $data;
}
function anorgatarrak_metabox() {
add_meta_box('entrevista-anorgatarrak-metabox',__('Datos entrevista'),'cd_metabox_entrevista', 'entrevista','normal','high');
}
@ -109,13 +131,19 @@ function create_anorgatarrak_tesaurus() {
'label' => __('Profesiones'),
'rewrite' => array('slug' => 'profesion'),
));
register_taxonomy('etapas','entrevista',array(
'label' => _('Etapas del proyecto'),
'rewrite' => array('slug' => 'etapas'),
));
}
add_action( 'init', 'create_anorgatarrak_tesaurus' );
add_action( 'admin_menu', 'remove_menus' );
add_filter('rest_prepare_slideshow','my_rest_prepare_slideshow', 12, 3);
add_filter('rest_prepare_entrevista','my_rest_prepare_slideshow', 12, 3);
add_filter('rest_prepare_entrevista','my_rest_prepare_entrevista', 12, 3);
add_filter('rest_prepare_post','my_rest_prepare_slideshow', 12, 3);
add_filter('rest_prepare_page','my_rest_prepare_slideshow', 12, 3);
add_theme_support( 'post-thumbnails' );
add_action('init','create_posttype');

View File

@ -4,6 +4,7 @@
<nav class="an-navbar navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<?php //dynamic_sidebar( 'sidebar-anorgatarrak-1' ); ?>
<a class="navbar-brand anorgatarrak" href="/">Añorgatarrak</a>
<!--<ul class="nav navbar-nav">
<li><a href="#">ES</a></li>
@ -19,21 +20,15 @@
'container_id' => 'an-navbar-collapse',
'menu_class' => 'nav navbar-nav navbar-right',
) );
?>
<!--
<div class="collapse navbar-collapse" id="an-navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="#!/info">Proyecto</a></li>
<li><a href="#!/catalog">Entrevistas</a></li>
<li><a href="#!/contact">Contacto</a></li>
</ul>
</div>
-->
?>
</div>
</nav>
<!-- Content -->
<!-- Home -->
<div ng-show="loading" style="overflow:hidden;width:100%;height:100%;position:fixed;top:0;left:0;background:rgba(0,0,0,0.8);z-index:300;">
<h1 style="position:absolute;top:50%;left:50%;"></h1>
</div>
<header>
<div class="container-fluid main">
<ol class="breadcrumb">
@ -42,8 +37,15 @@
<li class="breadcrumb-item active">Entrevista a Kontxi y María Dolores Elizegi</li>
</ol>
</header>
<!-- <an-list></an-list> -->
<div class="" style="float:right;margin-right:30px;position:absolute;z-index:100;right:30px;">
<ul class="nav navbar-nav navbar-right" style="background:rgba(255,153,51,255);">
<li><a style="color:#000;" href="http://anorgatarrak.eus">EUS</a></li>
<li><a style="color:#000;" href="http://es.anorgatarrak.eus">ESP</a></li>
</ul>
</div>
<!-- <an-list></an-list> -->
<div ng-view style="padding-bottom:0px;"></div>
<!-- Progressbar content -->
<div class="progress" style="">
@ -55,12 +57,15 @@
<!-- front-page -->
<div class="container" style="padding:30px 0;" ng-hide>
<div class="row">
<?php
$pages = get_pages();
<?php
$args = array (
'sort_column' => 'menu_order'
);
$pages = get_pages($args);
foreach ($pages as $page) :
?>
<div class="col-md-4"><h2><?php echo $page->post_title; ?></h2><?php echo $page->post_excerpt; ?></div>
<?php //print_r($page); ?>
<div class="col-md-4"><h2><?php echo $page->post_title; ?></h2><?php echo $page->post_excerpt; ?> <br/><a href="<?php echo get_permalink($page->ID); ?>">+info</a><div class="more" style="width:100%;height:50px;background:#ff9933;margin-top:10px;display:none;"></div></div>
<!-- <div class="col-md-4"><h2>Entrevistas del proyecto</h2><p>This example is a quick exercise to illustrate how the default, static and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device. To see the difference between static and fixed top navbars, just scroll.</p><p><a class="btn" ng-href="#!/catalog/">Mostrar más</a></p></div>
<div class="col-md-4"><h2>Información relevante</h2><p>This example is a quick exercise to illustrate how the default, static and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device. To see the difference between static and fixed top navbars, just scroll.</p><p><a class="btn" ng-href="#!/contact">Mostrar más</a></p></div>-->
<?php endforeach; ?>

View File

@ -1,5 +1,5 @@
<!-- load entrevistas -->
<div class="slideshow">
<a ng-repeat="e in entrevistas" class="square" style="background-image:url('{{e.featured_image_thumbnail_url}}');" ng-href="/catalog/{{e.id}}"></a>
<a ng-repeat="e in entrevistas" class="square" style="background-image:url('{{e.featured_image_thumbnail_url}}');" ng-href="/catalog/{{e.slug}}"></a>
</div>

View File

@ -1,6 +1,12 @@
<div class="row">
<div class="col-md-offset-1 col-md-10">
<h1>{{post.title.rendered}}</h1>
<div style="padding-bottom:30px;" ng-bind-html="content"></div>
<div class="post-header" style="background-image:url('{{post.featured_image_thumbnail_url}}');background-size:cover;width:100%;height:90vh;">
<div class="row">
<div class="col-md-offset-1 col-md-5"><h1 style="font-size:72pt;font-weight:800;">{{post.title.rendered}}</h1></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-offset-1 col-md-10">
<div style="padding-bottom:30px;padding-top:30px;" ng-bind-html="content"></div>
</div>
</div>

View File

@ -1,10 +1,21 @@
<!-- load type slider -->
<ul class="slideshow">
<!--
<ul class="slideshow-static">
-->
<!--<li><img class="step" style="background-image:url('http://anorgatarrak.eus/wp-content/uploads/2017/11/anorga0.jpg');" title="Añorgatarrak" alt=""></img></li>-->
<li ng-repeat="slide in slides">
<img class="step" style="background-image:url('{{slide.featured_image_thumbnail_url}}');" title="{{slide.title.rendered}}" alt="{{slide.excerpt_clean}}"></img>
</li>
</ul>
<!--<li ng-repeat="slide in slides">-->
<!--<li>-->
<div class="flex-cont" style="display:flex;height:90vh">
<div class="s" style="flex:auto;background-image:url('{{slides[0].featured_image_thumbnail_url}}');background-size:cover;" title="{{slides[0].title.rendered}}" alt="{{slides[0].excerpt_clean}}">
<div class="s-content" style="text-align:right;position:absolute;bottom:0;width:100%;background:rgba(0,0,0,0.8);">
<h1 style="margin-right:30px;font-size:32pt;font-weight:800;color:#fff;">{{slides[0].title.rendered}}</h1>
<h2 style="margin-right:30px;font-size:24pt;font-weight:400;color:#fff;">{{slides[0].excerpt_clean}}</h2>
</div>
</div>
</div>
<!--<img class="step" style="background-image:url('{{slides[0].featured_image_thumbnail_url}}');" title="{{slides[0].title.rendered}}" alt="{{slides[0].excerpt_clean}}"></img>-->
<!-- </li>
</ul> -->
<script>
slsh = new SlideShow('.slideshow', {timeout: 4000});
// slsh = new SlideShow('.slideshow', {timeout: 4000});
</script>

View File

@ -1,22 +1,61 @@
<div class="container ficha">
<div class="row" style="width:100%;">
<a href="/catalog">
&larr;
<span ng-show="lang == 'es'">Volver</span>
<span ng-show="lang == 'eus'">Itzuli</span>
</a>
</div>
<div class="row" style="border-bottom:solid #f5f5f5 10px; margin-bottom:10px;">
<div class="col-md-6"><h1>Entrevista a Kontxi y María Dolores Elizegi</h1></div>
<div class="col-md-6"><h1>{{post.title.rendered}}</h1></div>
</div>
<div class="row">
<div class="col-md-6">
<ul>
<li><label>Codigo:</label> MZP_IO_3332</li>
<li><label>Idioma:</label> EUS</li>
<!-- castellano -->
<ul ng-show="lang == 'es'">
<li><label>Idioma:</label> {{post.e_idioma}}</li>
<li><label>Localización:</label> {{post.e_localizacion.address}}</li>
<li><label>Fecha:</label> {{post.e_fecha_de_entrevista}}</li>
<li><label>Informantes:</label>
<ul>
<li ng-repeat="i in post.e_informantes">{{i.post_title}}</li>
</ul>
</li>
<li><label>TÃrminos:</label>
<ul>
<li style="list-style:none;" ng-repeat="t in post.category"><button class="btn btn-secondary btn-sm" type="button">{{t.name}}</button></li>
</ul>
</li>
</ul>
<!-- euskera -->
<ul ng-show="lang == 'eus'">
<li><label>Hizkuntza:</label> {{post.e_idioma}}</li>
<li><label>Kokapena:</label> {{post.e_localizacion.address}}</li>
<li><label>Data:</label> {{post.e_fecha_de_entrevista}}</li>
<li><label>Informatzaile:</label>
<ul>
<li ng-repeat="i in post.e_informantes">{{i.post_title}}</li>
</ul>
</li>
<li><label>Baldintzak:</label>
<ul>
<li style="list-style:none;" ng-repeat="t in post.category"><button class="btn btn-secondary btn-sm" type="button">{{t.name}}</button></li>
</ul>
</li>
</ul>
</div>
<div class="col-md-6">
<video poster="{{post.featured_image_thumbnail_url}}" src="{{post.e_audiovisual}}" controls="" style="width:100%;">URL: {{post.e_audiovisual}} </video>
<button class="btn btn-primary btn-sm" type="button" data-toggle="collapse" data-target="#collapse-transcripcion" aria-expanded="false" aria-controls="collapseExample">Transcripcion</button>
</div>
<div class="row" style="">
<div class="col-md-12">
<div class="collapse" id="collapse-transcripcion" ng-bind-html="post.e_transcripcion" style="column-count:2;padding-top:20px;"></div>
</div>
</div>
<li><label>Localización:</label> Antiguo, Donostia-San Sebastián, Guipúzcoa, País Vasco, España</li>
<li><label>Fecha:</label> 2017/03/01</li>
<li><label>Descripción/transcripción:</label>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vel faucibus tortor, a condimentum nulla. Mauris rhoncus, lectus quis faucibus viverra, dui arcu tristique nulla, eu congue augue nulla a mauris. Etiam sed risus porta, consectetur diam et, commodo massa. In sit amet nunc ut risus hendrerit euismod. Quisque at lectus mauris. Phasellus sit amet egestas nisi, id consequat tellus. Donec iaculis eget nulla eu varius. Nullam sollicitudin est ut neque aliquam, id porta nulla pulvinar. Fusce malesuada lectus malesuada gravida tristique. Proin scelerisque porta luctus. Vestibulum dictum, nunc at congue eleifend, purus urna pharetra risus, ultricies iaculis sapien augue quis est. Maecenas porttitor pulvinar orci, et posuere neque semper sed. Maecenas consequat sed neque a finibus. Integer tristique massa condimentum ligula consequat blandit. Sed tincidunt leo eget convallis tincidunt. Curabitur eget blandit lorem.</p>
<p>Pellentesque eu ipsum leo. Vestibulum sit amet felis eu mauris ultrices ornare. Phasellus et turpis in urna interdum varius in sit amet nunc. Phasellus auctor purus eu enim mollis tempor. Sed et arcu sem. Maecenas lobortis lacinia nulla, et sagittis sapien vestibulum eu. Mauris varius dapibus purus et facilisis. Nullam placerat nisl vitae nisi euismod, dapibus pulvinar diam finibus.</p>
<p>Aenean vitae laoreet mauris. Nullam mauris dolor, egestas vel eleifend vitae, interdum sed ex. Sed fermentum ac velit vitae porttitor. Fusce porta dictum lobortis. Nulla est sapien, convallis nec laoreet nec, sodales quis ligula. In volutpat metus fermentum ante maximus imperdiet. Etiam dictum urna nec augue porta luctus. Vestibulum cursus tortor nec sem vulputate pulvinar. Vivamus posuere massa eu aliquet viverra. Quisque consequat egestas egestas. Donec vel eleifend diam, vitae sollicitudin dolor. Aenean et vehicula nulla. Ut eu felis sit amet sem molestie tincidunt sit amet non velit. </p>
</li>
</ul>
</div>
<div class="col-md-6"><video poster="/assets/anorga10.jpg" src="http://video.webmfiles.org/elephants-dream.webm" controls="" style="width:100%;"></video></div>
</div>
</div>