Skip to content
This repository was archived by the owner on Mar 20, 2024. It is now read-only.

Commit 8497d9a

Browse files
zufriedenzufrieden
committed
Merge branch 'feature/second-slideshow' into dev
2 parents b942c06 + 241b29d commit 8497d9a

File tree

9 files changed

+278
-8
lines changed

9 files changed

+278
-8
lines changed

‎assets/js/carousel.js‎

Lines changed: 41 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,10 +19,37 @@
1919
carouselInit(jQuery);
2020
});
2121

22+
// slideshow counter
23+
var slideshow_total = $('.carousel-slideshow .item').length;
24+
$('#carousel-total').text(slideshow_total);
25+
26+
$('.carousel-slideshow').on('slid.bs.carousel', function () {
27+
28+
var carouselData = $(this).data('bs.carousel');
29+
var currentIndex = carouselData.getItemIndex(carouselData.$element.find('.item.active'));
30+
var total = carouselData.$items.length;
31+
32+
var text = (currentIndex + 1);
33+
34+
$('#carousel-index').text(text);
35+
$('#carousel-total').text(total);
36+
});
37+
2238
}) (jQuery);
2339

2440
function carouselInit ($) {
25-
var $carousel = $('.carousel');
41+
var $carousel = $('.carousel:not(.carousel-slideshow)');
42+
43+
$('.carousel .item:first-child').addClass('first');
44+
$('.carousel .item:last-child').addClass('last');
45+
46+
$('.carousel').each(function() {
47+
disableControl($(this));
48+
});
49+
$('.carousel').on('slid.bs.carousel', function () {
50+
disableControl($(this));
51+
});
52+
2653
if($carousel) {
2754
$carousel.each(function () {
2855
var biggestHeight = 0,
@@ -40,4 +67,17 @@ function carouselInit ($) {
4067
$(this).find('.item').height(biggestHeight);
4168
});
4269
}
70+
}
71+
72+
function disableControl(element) {
73+
if (element.find('.first').hasClass('active')) {
74+
element.find('.left').addClass('disabled').attr('aria-disabled', 'true');
75+
} else {
76+
element.find('.left').removeClass('disabled').attr('aria-disabled', 'false');
77+
}
78+
if (element.find('.last').hasClass('active')) {
79+
element.find('.right').addClass('disabled').attr('aria-disabled', 'true');
80+
} else {
81+
element.find('.right').removeClass('disabled').attr('aria-disabled', 'false');
82+
}
4383
}

‎assets/pages/layout.twig‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -683,6 +683,39 @@
683683
</footer>
684684

685685

686+
</div>
687+
<div id="blueimp-gallery" class="blueimp-gallery" data-use-bootstrap-modal="false">
688+
<!-- The container for the modal slides -->
689+
<div class="slides"></div>
690+
<!-- Controls for the borderless lightbox -->
691+
<h3 class="title"></h3>
692+
<a class="prev">‹</a>
693+
<a class="next">›</a>
694+
<a class="close">×</a>
695+
<a class="play-pause"></a>
696+
<ol class="indicator"></ol>
697+
<!-- The modal dialog, which will be used to wrap the lightbox content -->
698+
<div class="modal fade">
699+
<div class="modal-dialog">
700+
<div class="modal-content">
701+
<div class="modal-header">
702+
<button type="button" class="close" aria-hidden="true">&times;</button>
703+
<h4 class="modal-title"></h4>
704+
</div>
705+
<div class="modal-body next"></div>
706+
<div class="modal-footer">
707+
<button type="button" class="btn btn-default pull-left prev">
708+
<i class="glyphicon glyphicon-chevron-left"></i>
709+
Previous
710+
</button>
711+
<button type="button" class="btn btn-primary next">
712+
Next
713+
<i class="glyphicon glyphicon-chevron-right"></i>
714+
</button>
715+
</div>
716+
</div>
717+
</div>
718+
</div>
686719
</div>
687720
<script type="text/javascript" src="../js/vendors.min.js"></script>
688721
<script type="text/javascript" src="../js/main.min.js"></script>

‎assets/pages/publications.twig‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -77,9 +77,44 @@
7777
<p>
7878
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. <a href="#">Donec pede justo</a>, fringilla vel, aliquet nec, vulputate eget, arcu. Lorem porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a.
7979
</p>
80+
81+
82+
<h3>Slideshow</h3>
83+
<div id="carousel-slideshow" class="carousel carousel-slideshow slide" data-ride="carousel">
84+
85+
<!-- Wrapper for slides -->
86+
<div class="carousel-inner" role="listbox">
87+
<div class="item active">
88+
<a href="http://placehold.it/1200x800" title="Banana" data-gallery>
89+
<img src="http://placehold.it/800x600" alt="Banana">
90+
</a>
91+
<div class="carousel-caption">
92+
<h4>Image Title</h4>
93+
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus atque quas, dignissimos quo tempora, consectetur. Odio tempore nulla odit ab impedit dignissimos unde, alias error harum animi laboriosam repudiandae quaerat.</p>
94+
</div>
95+
</div>
96+
<div class="item">
97+
<a href="http://placehold.it/1200x800" title="Apple" data-gallery>
98+
<img src="http://placehold.it/800x600" alt="Apple">
99+
</a>
100+
<div class="carousel-caption">
101+
</div>
102+
</div>
103+
</div>
104+
<div class="carousel-controls">
105+
<div class="pull-right">
106+
<a class="left icon icon--before icon--less" href="#carousel-slideshow" data-slide="prev" aria-label="previous"></a><a class="right icon icon--before icon--greater" href="#carousel-slideshow" data-slide="next" aria-label="next"></a>
107+
</div>
108+
<small class="pull-right"><span id="carousel-index">1</span> of <span id="carousel-total"></span></small>
109+
</div>
110+
111+
</div>
112+
113+
80114
<p><a href="#" class="icon icon--after icon--external">External link</a></p>
81115
<p><a href="#" class="icon icon--before icon--less">Back to Overview</a></p>
82116
<p><small><a href="#" class="icon icon--before icon--power">Back to top</a><span class="text-dimmed">Last edition: 21.03.2014</span></small></p>
83117
</article>
118+
84119
</div>
85120
{% endblock %}

‎assets/sass/admin.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -113,6 +113,7 @@
113113
@import 'components/carousel';
114114
@import 'components/social';
115115
@import 'components/rss';
116+
@import 'components/slideshow';
116117

117118
// IE specific
118119
@import 'old-ie';

‎assets/sass/components/carousel.scss‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -138,6 +138,12 @@ The carousel component is not totally compliant with accessibility standards. If
138138
&:hover:before {
139139
color: $black;
140140
}
141+
&.disabled {
142+
cursor: default;
143+
&:before {
144+
color: $gainsboro;
145+
}
146+
}
141147
}
142148

143149
.carousel-indicators {

‎assets/sass/components/slideshow.scss‎

Lines changed: 152 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,152 @@
1+
/* ==========================================================
2+
* slideshow.scss
3+
* Slideshow component
4+
*
5+
* Author: Toni, toni@antistatique.net
6+
* Date: 2015-02-09 10:52:08
7+
*
8+
* Copyright 2014 Federal Chancellery of Switzerland
9+
* Licensed under MIT
10+
========================================================== */
11+
12+
@charset "UTF-8";
13+
14+
/*doc
15+
---
16+
title: Slideshow
17+
name: d-slideshow
18+
category: Content Modules - Teaser
19+
---
20+
21+
<span class="label label-admin">FLEX</span>
22+
23+
The slideshow uses the jQuery plugin ([Blueimp Bootstrap Image Gallery](https://github.com/blueimp/Bootstrap-Image-Gallery)) to display images in fullscreen from the basic carousel. Be sure to add the correct layout before your `</body>` closing tag, as explained in the example below.
24+
25+
**Accessibility issue**
26+
27+
The slideshow component is not compliant with accessibility standards. If you need to be compliant, please consider other options for presenting your content.
28+
29+
```html_example
30+
<div class="row">
31+
<div class="col-sm-6 col-sm-offset-3">
32+
<h3>Slideshow</h3>
33+
<div id="carousel-slideshow" class="carousel carousel-slideshow slide">
34+
35+
<!-- Wrapper for slides -->
36+
<div class="carousel-inner" role="listbox">
37+
<div class="item active">
38+
<a href="http://placehold.it/1200x800" title="Banana" data-gallery>
39+
<img src="http://placehold.it/800x600" alt="Banana">
40+
</a>
41+
<div class="carousel-caption">
42+
<h4>Image Title</h4>
43+
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus atque quas, dignissimos quo tempora, consectetur. Odio tempore nulla odit ab impedit dignissimos unde, alias error harum animi laboriosam repudiandae quaerat.</p>
44+
</div>
45+
</div>
46+
<div class="item">
47+
<a href="http://placehold.it/1200x800" title="Apple" data-gallery>
48+
<img src="http://placehold.it/800x600" alt="Apple">
49+
</a>
50+
<div class="carousel-caption">
51+
</div>
52+
</div>
53+
</div>
54+
<div class="carousel-controls">
55+
<div class="pull-right">
56+
<a class="left icon icon--before icon--less" href="#carousel-slideshow" data-slide="prev" aria-label="previous"></a><a class="right icon icon--before icon--greater" href="#carousel-slideshow" data-slide="next" aria-label="next"></a>
57+
</div>
58+
<small class="pull-right"><span id="carousel-index">1</span> of <span id="carousel-total"></span></small>
59+
</div>
60+
61+
</div>
62+
</div>
63+
</div>
64+
65+
<!-- To include as is before the </body> closing tag -->
66+
<div id="blueimp-gallery" class="blueimp-gallery" data-use-bootstrap-modal="false">
67+
<!-- The container for the modal slides -->
68+
<div class="slides"></div>
69+
<!-- Controls for the borderless lightbox -->
70+
<h3 class="title"></h3>
71+
<a class="prev">‹</a>
72+
<a class="next">›</a>
73+
<a class="close">×</a>
74+
<a class="play-pause"></a>
75+
<ol class="indicator"></ol>
76+
<!-- The modal dialog, which will be used to wrap the lightbox content -->
77+
<div class="modal fade">
78+
<div class="modal-dialog">
79+
<div class="modal-content">
80+
<div class="modal-header">
81+
<button type="button" class="close" aria-hidden="true">&times;</button>
82+
<h4 class="modal-title"></h4>
83+
</div>
84+
<div class="modal-body next"></div>
85+
<div class="modal-footer">
86+
<button type="button" class="btn btn-default pull-left prev">
87+
<i class="glyphicon glyphicon-chevron-left"></i>
88+
Previous
89+
</button>
90+
<button type="button" class="btn btn-primary next">
91+
Next
92+
<i class="glyphicon glyphicon-chevron-right"></i>
93+
</button>
94+
</div>
95+
</div>
96+
</div>
97+
</div>
98+
</div>
99+
```
100+
*/
101+
102+
.carousel-slideshow {
103+
border: 0;
104+
overflow: hidden;
105+
margin-bottom: 25px;
106+
107+
.carousel-inner {
108+
overflow: visible;
109+
}
110+
111+
.item {
112+
padding: 0;
113+
}
114+
115+
.carousel-controls {
116+
small {
117+
margin: 23px 15px 0 0;
118+
color: $coal;
119+
}
120+
a {
121+
display: inline-block;
122+
margin-top: 15px;
123+
padding: 0 12px 0 15px;
124+
font-size: 25px;
125+
&.right {border-left: 1px solid $gainsboro;}
126+
&:before {color: $coal;}
127+
&:hover:before {color: $black;}
128+
&.disabled {
129+
cursor: default;
130+
&:before {color: $gainsboro;}
131+
}
132+
}
133+
}
134+
135+
.carousel-caption {
136+
position: static;
137+
padding-top: 11px;
138+
padding-bottom: 0;
139+
max-width: 300px;
140+
min-height: 150px;
141+
@media only screen and (min-width: $screen-md-min) {
142+
float: left;
143+
max-width: 360px;
144+
min-height: 125px;
145+
}
146+
text-align: left;
147+
text-shadow: none;
148+
color: $black;
149+
font-size: 11px;
150+
p {margin-bottom: 0;}
151+
}
152+
}

‎assets/sass/layout/titles.scss‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -63,10 +63,7 @@ h1, h2, h3, h4, h5, h6 {
6363
@media only screen and (max-width: $screen-sm-max) {
6464
h1 {font-size: 2em;}
6565
h2 {font-size: 1.3em;}
66-
h3 {font-size: 1.2em;}
67-
h4 {font-size: 1.1em;}
68-
h5 {font-size: 1.1em;}
69-
h6 {font-size: 1em;}
66+
h3 {font-size: 1.3em;}
7067
}
7168

7269

‎bower.json‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,8 @@
2424
"jquery-drilldown": "~0.1.4",
2525
"respond": "~1.4.2",
2626
"html5shiv": "~3.7.2",
27-
"placeholdr": "*"
27+
"placeholdr": "*",
28+
"blueimp-bootstrap-image-gallery": "~3.1.1",
29+
"blueimp-gallery": "~2.15.2"
2830
}
2931
}

‎gulpfile.js‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,9 @@ gulp.task('vendors', function() {
4242
gulp.src([
4343
'bower_components/yamm3/yamm/yamm.css',
4444
'bower_components/jquery.socialshareprivacy/socialshareprivacy/socialshareprivacy.css',
45-
'bower_components/bootstrapaccessibilityplugin/plugins/css/bootstrap-accessibility.css'
45+
'bower_components/bootstrapaccessibilityplugin/plugins/css/bootstrap-accessibility.css',
46+
'bower_components/blueimp-gallery/css/blueimp-gallery.min.css',
47+
'bower_components/blueimp-bootstrap-image-gallery/css/bootstrap-image-gallery.min.css'
4648
])
4749
.pipe($.concat('vendors.css'))
4850
.pipe($.minifyCss())
@@ -74,7 +76,9 @@ gulp.task('vendors', function() {
7476
'bower_components/jquery.tablesorter/js/jquery.tablesorter.js',
7577
'bower_components/jquery.socialshareprivacy/jquery.socialshareprivacy.min.js',
7678
'bower_components/jquery-drilldown/jquery.drilldown.min.js',
77-
'bower_components/placeholdr/placeholdr.js'
79+
'bower_components/placeholdr/placeholdr.js',
80+
'bower_components/blueimp-gallery/js/jquery.blueimp-gallery.min.js',
81+
'bower_components/blueimp-bootstrap-image-gallery/js/bootstrap-image-gallery.min.js'
7882
])
7983
.pipe($.concat('vendors.min.js'))
8084
.pipe($.uglify())

0 commit comments

Comments
 (0)