Skip to content

Commit 9dc8e47

Browse files
ryzyryzy
committed
Update Slick to 1.6.0, make it compatible with Neos 2.2
1 parent cdbdec6 commit 9dc8e47

File tree

5 files changed

+205
-85
lines changed

5 files changed

+205
-85
lines changed

‎Configuration/NodeTypes.yaml‎

Lines changed: 73 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -29,10 +29,7 @@
2929
tab: dev
3030
constraints:
3131
nodeTypes:
32-
'*': FALSE # No children items allowed
33-
childNodes:
34-
content:
35-
type: 'TYPO3.Neos:ContentCollection'
32+
'*': TRUE
3633
properties:
3734
adaptiveHeight:
3835
type: boolean
@@ -43,6 +40,7 @@
4340
position: 80
4441
autoplay:
4542
type: boolean
43+
defaultValue: true
4644
ui:
4745
label: 'Autoplay'
4846
inspector:
@@ -60,22 +58,39 @@
6058
numberRange:
6159
minimum: 10
6260
maximum: 999999
63-
arrows:
64-
type: boolean
65-
defaultValue: TRUE
66-
ui:
67-
label: 'Prev/Next Arrows'
68-
inspector:
69-
group: 'slickSettings'
70-
position: 10
7161
centerMode:
7262
type: boolean
7363
ui:
74-
label: 'Enables centered view with partial prev/next slides'
64+
label: 'Center for partial prev/next slides'
7565
inspector:
7666
group: 'slickSecondary'
67+
position: 70
68+
cssEase:
69+
type: string
70+
ui:
71+
label: 'Animation (easing) style'
72+
reloadIfChanged: TRUE
73+
inspector:
74+
group: 'slickSettings'
75+
position: 99
76+
editor: 'TYPO3.Neos/Inspector/Editors/SelectBoxEditor'
77+
editorOptions:
78+
placeholder: 'Default: ease-out'
79+
allowEmpty: TRUE
80+
values:
81+
linear:
82+
label: 'linear'
83+
ease:
84+
label: 'ease'
85+
ease-in:
86+
label: 'ease-in'
87+
ease-in-out:
88+
label: 'ease-in-out'
89+
ease-out:
90+
label: 'ease-out'
7791
dots:
7892
type: boolean
93+
defaultValue: TRUE
7994
ui:
8095
label: 'Show dot indicators'
8196
inspector:
@@ -88,35 +103,31 @@
88103
label: 'Enable mouse dragging'
89104
inspector:
90105
group: 'slickSecondary'
106+
position: 70
91107
fade:
92108
type: boolean
109+
defaultValue: TRUE
93110
ui:
94111
label: 'Enable fade'
95112
inspector:
96113
group: 'slickSettings'
97114
position: 10
98-
easing:
99-
type: string
115+
arrows:
116+
type: boolean
117+
defaultValue: TRUE
100118
ui:
101-
label: 'Animation (easing) type'
102-
reloadIfChanged: TRUE
119+
label: 'Show Prev/Next Arrows'
103120
inspector:
104121
group: 'slickSettings'
105-
position: 99
106-
editor: 'TYPO3.Neos/Inspector/Editors/SelectBoxEditor'
107-
editorOptions:
108-
placeholder: 'Default / Linear'
109-
allowEmpty: TRUE
110-
values:
111-
linear:
112-
label: 'Linear'
122+
position: 10
113123
infinite:
114124
type: boolean
115125
defaultValue: TRUE
116126
ui:
117127
label: 'Infinite loop sliding'
118128
inspector:
119129
group: 'slickSecondary'
130+
position: 70
120131
initialSlide:
121132
type: integer
122133
defaultValue: 0
@@ -136,12 +147,14 @@
136147
label: 'Pause autoplay on hover'
137148
inspector:
138149
group: 'slickSecondary'
150+
position: 20
139151
pauseOnDotsHover:
140152
type: boolean
141153
ui:
142154
label: 'Pause autoplay when a dot is hovered'
143155
inspector:
144156
group: 'slickSecondary'
157+
position: 20
145158
responsive:
146159
type: string
147160
ui:
@@ -151,6 +164,30 @@
151164
editorOptions:
152165
buttonLabel: 'Responsive settings'
153166
highlightingMode: 'application/json'
167+
rows:
168+
type: integer
169+
defaultValue: 1
170+
ui:
171+
label: 'Number of rows'
172+
inspector:
173+
group: 'slickSecondary'
174+
position: 90
175+
validation:
176+
numberRange:
177+
minimum: 1
178+
maximum: 91
179+
slidesPerRow:
180+
type: integer
181+
defaultValue: 1
182+
ui:
183+
label: 'Slides per row'
184+
inspector:
185+
group: 'slickSecondary'
186+
position: 91
187+
validation:
188+
numberRange:
189+
minimum: 1
190+
maximum: 1000
154191
slidesToShow:
155192
type: integer
156193
defaultValue: 1
@@ -193,15 +230,25 @@
193230
label: 'Variable width slides'
194231
inspector:
195232
group: 'slickSecondary'
233+
position: 60
196234
vertical:
197235
type: boolean
198236
ui:
199237
label: 'Vertical slide mode'
200238
inspector:
201239
group: 'slickSecondary'
240+
position: 60
202241
rtl:
203242
type: boolean
204243
ui:
205-
label: 'Right-to-left slider''s direction'
244+
label: 'Right-to-left direction'
206245
inspector:
207246
group: 'slickSecondary'
247+
position: 89
248+
nextOnClick:
249+
type: boolean
250+
ui:
251+
label: 'Next slide on click'
252+
inspector:
253+
group: 'slickSecondary'
254+
position: 10

‎README.md‎

Lines changed: 39 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,48 @@
1-
# M12.SlickCarousel - Slick carousel inside TYPO3 Neos
1+
# M12.SlickCarousel - Slick carousel for Neos CMS
22

3-
This [TYPO3 Neos](http://neos.typo3.org/) implementation of [Slick Carousel](http://kenwheeler.github.io/slick/) as a new node type.
3+
[Slick Carousel](https://github.com/kenwheeler/slick) node type
4+
for [Neos CMS](https://www.neos.io/).
45

5-
## Usage
66

7-
* Add it to your composer.json:
7+
## Installation
8+
9+
* Install this Neos plugin via composer:
10+
```
11+
composer require m12/neos-nodetype-slickcarousel:dev-master
812
```
9-
"require": {
10-
"...": "*",
11-
"m12/neos-nodetype-slickcarousel": "dev-master"
12-
},
13+
14+
* Install Slick code in your site package. Refer to
15+
[Slick](https://github.com/kenwheeler/slick) documentation for details,
16+
you will need to include `slick.js`, `slick.css` and perhaps
17+
`slick-theme.css` to your page.
18+
19+
* Add the following code to the end of BODY tag:
1320
```
14-
* Add required CSS and JS to your page template. Follow the instructions here: http://kenwheeler.github.io/slick/ .
15-
You can also look at [M12.FoundationSite](https://github.com/million12/M12.FoundationSite) site package, where this plugin is used, together with [M12.Foundation](https://github.com/million12/M12.Foundation) implementing all Zurb Foundation components.
21+
var slickEl = $('.m12-slickcarousel-slick');
22+
23+
$(slickEl).on('init', function(event, slick) {
24+
// Support non-standard 'nextOnClick' option:
25+
if (slick.slickGetOption('nextOnClick')) {
26+
$(slick.$slider).on('click', function() {
27+
slick.slickNext();
28+
});
29+
}
30+
});
31+
32+
// Initialise Slick
33+
$(slickEl).slick();
34+
```
35+
36+
Also see the [Pb.Site](https://github.com/million12/Pb.Site) site package
37+
for a complete example of how to install it with npm/gulp.
38+
1639

1740
## Author(s)
1841

1942
* Marcin Ryzycki marcin@m12.io
43+
44+
Licensed under: The MIT License (MIT)
45+
46+
**Sponsored by** [PrototypeBrewery.io - the new prototyping tool](http://prototypebrewery.io/)
47+
for building fully interactive prototypes of your website or web app. Built on top of
48+
Neos CMS and Zurb Foundation framework.

‎Resources/Private/Templates/NodeTypes/Slick.html‎

Lines changed: 46 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,47 @@
1-
{namespace ts=TYPO3\TypoScript\ViewHelpers}
1+
{namespace neos=TYPO3\Neos\ViewHelpers}
22

3-
<f:section name="slick">
4-
<ts:render path="slickItems" />
5-
<script type="text/javascript">
6-
$(document).ready(function(){
7-
$('#{slickElementId}').slick({slickConfig -> f:format.json() -> f:format.raw()});
8-
});
9-
</script>
10-
</f:section>
11-
12-
<!-- Slider item -->
13-
<f:section name="slickItem">
14-
<f:if condition="{iterator.isFirst}">
15-
<div{slickContainerAttributes -> f:format.raw()}>
16-
</f:if>
17-
18-
<div><ts:render path="itemContent" /></div>
19-
20-
<f:if condition="{iterator.isLast}">
21-
</div>
22-
</f:if>
23-
</f:section>
3+
<f:if condition="{slickSlidesCount} > 0">
4+
<f:then>
5+
{slickContent -> f:format.raw()}
6+
</f:then>
7+
<f:else>
8+
<f:if condition="{neos:rendering.inEditMode()}">
9+
<style>
10+
.slick-slider-empty {
11+
margin: 1rem auto;
12+
padding: 2rem 1rem;
13+
text-align: center;
14+
color: #fff;
15+
font-size: 150%;
16+
font-weight: bold;
17+
border: 1px solid #aaa;
18+
background-color: #ccc;
19+
}
20+
.slick-slider-empty .fa-plus {
21+
position: relative;
22+
display: inline-block;
23+
width: 40px;
24+
height: 40px;
25+
line-height: 40px;
26+
font-size: 14px;
27+
text-align: center;
28+
vertical-align: middle;
29+
background-color: #444;
30+
}
31+
.slick-slider-empty .fa-long-arrow-right {
32+
position: absolute;
33+
bottom: 2px;
34+
right: 6px;
35+
color: #00b5ff;
36+
}
37+
</style>
38+
<div class="slick-slider-empty">
39+
<p>
40+
Please add content <em>inside</em>
41+
<i class="fa fa-plus"><i class="fa fa-long-arrow-right"></i></i>
42+
the slider.
43+
</p>
44+
</div>
45+
</f:if>
46+
</f:else>
47+
</f:if>

0 commit comments

Comments
 (0)