Skip to content

Commit a094064

Browse files
robinlejdetrouxdev
robinlej
authored and
detrouxdev
committed
[REF] website, web_editor: Carousel, CarouselItem, GalleryElement
task-3850413
1 parent dec2389 commit a094064

File tree

5 files changed

+119
-99
lines changed

5 files changed

+119
-99
lines changed

‎addons/web_editor/static/src/js/editor/snippets.editor.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -844,6 +844,7 @@ var SnippetEditor = Widget.extend({
844844
cover: this.cover.bind(this),
845845
coverUpdate: (overlayVisible) => this.trigger_up("cover_update", { overlayVisible }),
846846
notifyOptions: (data) => this.trigger_up("option_update", data),
847+
updateExtraTitle: (extra) => { this.extraTitle = extra },
847848
updateSnippetOptionVisibility: (show) => this.trigger_up("snippet_option_visibility_update", { show }),
848849
}
849850
});

‎addons/web_editor/static/src/xml/snippets.xml‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -221,7 +221,11 @@
221221
<t t-foreach="[...state.enabledEditorHierarchy].reverse()" t-as="editor" t-key="editor.key">
222222
<t t-set="snippetOptions" t-value="editor.getOptions()"/>
223223
<we-customizeblock-options t-if="snippetOptions.length > 0">
224-
<we-title><span>[OWL] <t t-out="editor.name"/></span>
224+
<we-title>
225+
<span>
226+
[OWL] <t t-out="editor.name"/>
227+
<t t-out="editor.extraTitle"/>
228+
</span>
225229
<we-top-button-group>
226230
<t t-foreach="snippetOptions" t-as="option" t-key="option_index">
227231
<t t-if="option.isTopOption" t-component="option.renderingComponent"

‎addons/website/static/src/js/editor/snippets.options.js‎

Lines changed: 69 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,7 @@ import { Component, markup, onMounted, onWillUnmount, useEffect, useRef, useStat
4343
import {
4444
BackgroundToggler,
4545
Box,
46+
CarouselHandler,
4647
LayoutColumn,
4748
Many2oneUserValue,
4849
registerBackgroundOptions,
@@ -1977,11 +1978,13 @@ options.registry.menu_data = options.Class.extend({
19771978
},
19781979
});
19791980

1980-
options.registry.Carousel = options.registry.CarouselHandler.extend({
1981+
class Carousel extends CarouselHandler {
19811982
/**
19821983
* @override
19831984
*/
1984-
start: function () {
1985+
constructor() {
1986+
super(...arguments);
1987+
19851988
this.$bsTarget.carousel('pause');
19861989
this.$indicators = this.$target.find('.carousel-indicators');
19871990
this.$controls = this.$target.find('.carousel-control-prev, .carousel-control-next, .carousel-indicators');
@@ -1994,7 +1997,7 @@ options.registry.Carousel = options.registry.CarouselHandler.extend({
19941997
let _slideTimestamp;
19951998
this.$bsTarget.on('slide.bs.carousel.carousel_option', () => {
19961999
_slideTimestamp = window.performance.now();
1997-
setTimeout(() => this.trigger_up('hide_overlay'));
2000+
setTimeout(() => this.env.hideOverlay());
19982001
});
19992002
this.$bsTarget.on('slid.bs.carousel.carousel_option', () => {
20002003
// slid.bs.carousel is most of the time fired too soon by bootstrap
@@ -2003,52 +2006,48 @@ options.registry.Carousel = options.registry.CarouselHandler.extend({
20032006
// should be enough...
20042007
const _slideDuration = (window.performance.now() - _slideTimestamp);
20052008
setTimeout(() => {
2006-
this.trigger_up('activate_snippet', {
2007-
$snippet: this.$target.find('.carousel-item.active'),
2008-
ifInactiveOptions: true,
2009-
});
2009+
this.env.activateSnippet(this.$target.find('.carousel-item.active'), false, true);
20102010
this.$bsTarget.trigger('active_slide_targeted');
20112011
}, 0.2 * _slideDuration);
20122012
});
2013-
2014-
return this._super.apply(this, arguments);
2015-
},
2013+
}
20162014
/**
20172015
* @override
20182016
*/
2019-
destroy: function () {
2020-
this._super.apply(this, arguments);
2017+
destroy() {
2018+
super.destroy(...arguments);
20212019
this.$bsTarget.off('.carousel_option');
2022-
},
2020+
}
20232021
/**
20242022
* @override
20252023
*/
2026-
onBuilt: function () {
2024+
onBuilt() {
20272025
this._assignUniqueID();
2028-
},
2026+
}
20292027
/**
20302028
* @override
20312029
*/
2032-
onClone: function () {
2030+
onClone() {
20332031
this._assignUniqueID();
2034-
},
2032+
}
20352033
/**
20362034
* @override
20372035
*/
2038-
cleanForSave: function () {
2036+
// TODO: @owl-options check if this should be cleanUI() rather than cleanForSave()
2037+
cleanUI() {
20392038
const $items = this.$target.find('.carousel-item');
20402039
$items.removeClass('next prev left right active').first().addClass('active');
20412040
this.$indicators.find('li').removeClass('active').empty().first().addClass('active');
2042-
},
2041+
}
20432042
/**
20442043
* @override
20452044
*/
2046-
notify: function (name, data) {
2047-
this._super(...arguments);
2045+
notify(name, data) {
2046+
super.notify(...arguments);
20482047
if (name === 'add_slide') {
20492048
this._addSlide();
20502049
}
2051-
},
2050+
}
20522051

20532052
//--------------------------------------------------------------------------
20542053
// Options
@@ -2059,7 +2058,7 @@ options.registry.Carousel = options.registry.CarouselHandler.extend({
20592058
*/
20602059
addSlide(previewMode, widgetValue, params) {
20612060
this._addSlide();
2062-
},
2061+
}
20632062

20642063
//--------------------------------------------------------------------------
20652064
// Private
@@ -2071,7 +2070,7 @@ options.registry.Carousel = options.registry.CarouselHandler.extend({
20712070
*
20722071
* @private
20732072
*/
2074-
_assignUniqueID: function () {
2073+
_assignUniqueID() {
20752074
const id = 'myCarousel' + Date.now();
20762075
this.$target.attr('id', id);
20772076
this.$target.find('[data-bs-target]').attr('data-bs-target', '#' + id);
@@ -2083,7 +2082,7 @@ options.registry.Carousel = options.registry.CarouselHandler.extend({
20832082
$el.attr('href', '#' + id);
20842083
}
20852084
});
2086-
},
2085+
}
20872086
/**
20882087
* Adds a slide.
20892088
*
@@ -2103,13 +2102,13 @@ options.registry.Carousel = options.registry.CarouselHandler.extend({
21032102
.removeClass('active')
21042103
.insertAfter($active);
21052104
this.$bsTarget.carousel('next');
2106-
},
2105+
}
21072106
/**
21082107
* @override
21092108
*/
21102109
_getItemsGallery() {
21112110
return Array.from(this.$target[0].querySelectorAll(".carousel-item"));
2112-
},
2111+
}
21132112
/**
21142113
* @override
21152114
*/
@@ -2122,36 +2121,36 @@ options.registry.Carousel = options.registry.CarouselHandler.extend({
21222121
carouselInnerEl.append(itemsEl);
21232122
}
21242123
this._updateIndicatorAndActivateSnippet(newItemPosition);
2125-
},
2126-
2124+
}
2125+
}
2126+
registerWebsiteOption("Carousel", {
2127+
Class: Carousel,
2128+
template: "website.Carousel",
2129+
selector: "section",
2130+
target: "> .carousel",
21272131
});
21282132

2129-
options.registry.CarouselItem = options.Class.extend({
2130-
isTopOption: true,
2131-
forceNoDeleteButton: true,
2133+
class CarouselItem extends SnippetOption {
2134+
static isTopOption = true;
2135+
static forceNoDeleteButton = true;
21322136

21332137
/**
21342138
* @override
21352139
*/
2136-
start: function () {
2140+
constructor() {
2141+
super(...arguments);
2142+
21372143
this.$carousel = this.$bsTarget.closest('.carousel');
21382144
this.$indicators = this.$carousel.find('.carousel-indicators');
21392145
this.$controls = this.$carousel.find('.carousel-control-prev, .carousel-control-next, .carousel-indicators');
2140-
2141-
var leftPanelEl = this.$overlay.data('$optionsSection')[0];
2142-
var titleTextEl = leftPanelEl.querySelector('we-title > span');
2143-
this.counterEl = document.createElement('span');
2144-
titleTextEl.appendChild(this.counterEl);
2145-
2146-
return this._super(...arguments);
2147-
},
2146+
}
21482147
/**
21492148
* @override
21502149
*/
2151-
destroy: function () {
2152-
this._super(...arguments);
2150+
destroy() {
2151+
super.destroy(...arguments);
21532152
this.$carousel.off('.carousel_item_option');
2154-
},
2153+
}
21552154

21562155
//--------------------------------------------------------------------------
21572156
// Public
@@ -2162,13 +2161,14 @@ options.registry.CarouselItem = options.Class.extend({
21622161
*
21632162
* @override
21642163
*/
2165-
updateUI: async function () {
2166-
await this._super(...arguments);
2164+
async updateUI() {
2165+
await super.updateUI(...arguments);
21672166
const $items = this.$carousel.find('.carousel-item');
21682167
const $activeSlide = $items.filter('.active');
2169-
const updatedText = ` (${$activeSlide.index() + 1}/${$items.length})`;
2170-
this.counterEl.textContent = updatedText;
2171-
},
2168+
// TODO: @owl-options: block the editor UI until the new options are
2169+
// created.
2170+
this.callbacks.updateExtraTitle(` (${$activeSlide.index() + 1}/${$items.length})`);
2171+
}
21722172

21732173
//--------------------------------------------------------------------------
21742174
// Options
@@ -2178,17 +2178,17 @@ options.registry.CarouselItem = options.Class.extend({
21782178
* @see this.selectClass for parameters
21792179
*/
21802180
addSlideItem(previewMode, widgetValue, params) {
2181-
this.trigger_up('option_update', {
2181+
this.callbacks.notifyOptions({
21822182
optionName: 'Carousel',
21832183
name: 'add_slide',
21842184
});
2185-
},
2185+
}
21862186
/**
21872187
* Removes the current slide.
21882188
*
21892189
* @see this.selectClass for parameters.
21902190
*/
2191-
removeSlide: function (previewMode) {
2191+
removeSlide(previewMode) {
21922192
const $items = this.$carousel.find('.carousel-item');
21932193
const newLength = $items.length - 1;
21942194
if (!this.removing && newLength > 0) {
@@ -2210,13 +2210,13 @@ options.registry.CarouselItem = options.Class.extend({
22102210
this.removing = true;
22112211
this.$carousel.carousel('prev');
22122212
}
2213-
},
2213+
}
22142214
/**
22152215
* Goes to next slide or previous slide.
22162216
*
22172217
* @see this.selectClass for parameters
22182218
*/
2219-
switchToSlide: function (previewMode, widgetValue, params) {
2219+
switchToSlide(previewMode, widgetValue, params) {
22202220
switch (widgetValue) {
22212221
case 'left':
22222222
this.$controls.filter('.carousel-control-prev')[0].click();
@@ -2225,7 +2225,12 @@ options.registry.CarouselItem = options.Class.extend({
22252225
this.$controls.filter('.carousel-control-next')[0].click();
22262226
break;
22272227
}
2228-
},
2228+
}
2229+
}
2230+
registerWebsiteOption("CarouselItem", {
2231+
Class: CarouselItem,
2232+
template: "website.CarouselItem",
2233+
selector: ".s_carousel .carousel-item, .s_quotes_carousel .carousel-item",
22292234
});
22302235

22312236
class Parallax extends SnippetOption {
@@ -4286,8 +4291,8 @@ options.registry.GridImage = options.Class.extend({
42864291
},
42874292
});
42884293

4289-
options.registry.GalleryElement = options.Class.extend({
42904294

4295+
class GalleryElement extends SnippetOption {
42914296
//--------------------------------------------------------------------------
42924297
// Options
42934298
//--------------------------------------------------------------------------
@@ -4301,16 +4306,21 @@ options.registry.GalleryElement = options.Class.extend({
43014306
const optionName = this.$target[0].classList.contains("carousel-item") ? "Carousel"
43024307
: "GalleryImageList";
43034308
const itemEl = this.$target[0];
4304-
this.trigger_up("option_update", {
4309+
this.callbacks.notifyOptions({
43054310
optionName: optionName,
43064311
name: "reorder_items",
43074312
data: {
43084313
itemEl: itemEl,
43094314
position: widgetValue,
43104315
},
43114316
});
4312-
},
4313-
});
4317+
}
4318+
}
4319+
registerWebsiteOption("GalleryElement", {
4320+
Class: GalleryElement,
4321+
template: "website.GalleryElement",
4322+
selector: ".s_image_gallery img, .s_carousel .carousel-item",
4323+
}, { sequence: 10 });
43144324

43154325
options.registry.Button = options.Class.extend({
43164326
/**

‎addons/website/static/src/js/editor/snippets.options.xml‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -501,4 +501,48 @@
501501
</WeRow>
502502
</t>
503503

504+
<t t-name="website.Carousel">
505+
<WeRow title.translate="Slide">
506+
<WeButton addSlide="'true'" noPreview="'true'" class="'o_we_bg_brand_primary'">Add Slide</WeButton>
507+
</WeRow>
508+
<WeSelect title.translate="Style">
509+
<WeButton selectClass="'s_carousel_default'">Default</WeButton>
510+
<WeButton selectClass="'s_carousel_bordered'">Bordered</WeButton>
511+
<WeButton selectClass="'s_carousel_boxed'">Boxed</WeButton>
512+
<WeButton selectClass="'s_carousel_rounded'">Rounded</WeButton>
513+
</WeSelect>
514+
<WeSelect title.translate="Transition">
515+
<WeButton selectClass="'slide'">Slide</WeButton>
516+
<WeButton selectClass="'carousel-fade slide'">Fade</WeButton>
517+
<we-divider/>
518+
<WeButton selectClass="''">None</WeButton>
519+
</WeSelect>
520+
<WeInput title.translate="Speed" selectDataAttribute="'0s'" attributeName="'bsInterval'"
521+
unit="'s'" saveUnit="'ms'" step="'0.1'"/>
522+
</t>
523+
524+
<t t-name="website.CarouselItem">
525+
<WeButton class="'fa fa-fw fa-angle-left'" switchToSlide="'left'" noPreview="'true'"
526+
tooltip.translate="Move Backward"/>
527+
<WeButton class="'fa fa-fw fa-angle-right me-2'" switchToSlide="'right'" noPreview="'true'"
528+
tooltip.translate="Move Forward"/>
529+
<WeButton class="'fa fa-fw fa-plus o_we_bg_success'" addSlideItem="'true'" noPreview="'true'"
530+
tooltip.translate="Add Slide"/>
531+
<WeButton class="'fa fa-fw fa-minus o_we_bg_danger'" removeSlide="'true'" noPreview="'true'"
532+
tooltip.translate="Remove Slide"/>
533+
</t>
534+
535+
<t t-name="website.GalleryElement">
536+
<WeRow title.translate="Re-order">
537+
<WeButton class="'fa fa-fw fa-angle-double-left'" tooltip.translate="Move to first"
538+
position="'first'" noPreview="'true'"/>
539+
<WeButton class="'fa fa-fw fa-angle-left'" tooltip.translate="Move to previous"
540+
position="'prev'" noPreview="'true'"/>
541+
<WeButton class="'fa fa-fw fa-angle-right'" tooltip.translate="Move to next"
542+
position="'next'" noPreview="'true'"/>
543+
<WeButton class="'fa fa-fw fa-angle-double-right'" tooltip.translate="Move to last"
544+
position="'last'" noPreview="'true'"/>
545+
</WeRow>
546+
</t>
547+
504548
</templates>

0 commit comments

Comments
 (0)