Skip to content
Permalink
Browse files

[IMP] web_editor, website: add new 'Countdown' snippet

This commit introduces a new snippet: Countdown.

The countdown snippet is composed of 4 circle countdown, one for every time
unit: seconds, minutes, hours and days.

On countdown ends, 3 possible actions:
1. Nothing
2. Show message: show a message once the countdown ends. The message will be
   displayed bellow the countdown (stopped on 0).
   The message can be edited through the website builder.
3. Redirect: redirect the user to the chosen URL. If the user is on the page at
   the exact moment the countdown reach 0, the user will be redirected
   automatically. If the user lands on the page after the countdown has reached
   0, there will be no redirection and the link will be shown bellow the
   countdown (stopped on 0).

The countdown layout can be customized in multiple ways:
1. By choosing to hide some time units. For instance, seconds can be hidden or
   only days shown.
2. By changing its design (plain background, thin circle etc).
3. By changing its size between small/medium/large.

task-2093081
  • Loading branch information...
rdeodoo committed Oct 28, 2019
1 parent 99ee754 commit c1953520d994f6038934d94d3d95ceeacade4fc1
@@ -347,6 +347,9 @@ var SnippetEditor = Widget.extend({
uiEl.querySelectorAll('we-input').forEach(inputEl => {
options.Class.prototype.buildInputElement(inputEl);
});
uiEl.querySelectorAll('we-datetimepicker').forEach(datetimepickerEl => {
options.Class.prototype.buildDatetimepickerElement(datetimepickerEl);
});

return $optionSection;
},
@@ -4,6 +4,7 @@ odoo.define('web_editor.snippets.options', function (require) {
var core = require('web.core');
var ColorPaletteWidget = require('web_editor.ColorPalette').ColorPaletteWidget;
var Dialog = require('web.Dialog');
var time = require('web.time');
var Widget = require('web.Widget');
var weWidgets = require('wysiwyg.widgets');

@@ -340,7 +341,7 @@ var SnippetOption = Widget.extend({
if (methodNames.includes('setStyle')) {
methodNames = ['setStyle'];
}
let isInput = $el.is('we-input');
let isInput = $el.is('we-input, we-datetimepicker');

methodNames.forEach(methodName => {
if (!this[methodName]) {
@@ -532,7 +533,7 @@ var SnippetOption = Widget.extend({
* @param {Event} ev
*/
_onOptionPreview: function (ev) {
var $opt = $(ev.target).closest('we-button, we-input');
var $opt = $(ev.target).closest('we-button, we-input, we-datetimepicker');
if (!$opt.length) {
return;
}
@@ -552,7 +553,7 @@ var SnippetOption = Widget.extend({
* @param {Event} ev
*/
_onOptionSelection: function (ev) {
var $opt = $(ev.target).closest('we-button, we-input');
var $opt = $(ev.target).closest('we-button, we-input, we-datetimepicker');
if (ev.isDefaultPrevented() || !$opt.length || !$opt.is(':hasData')) {
return;
}
@@ -650,6 +651,56 @@ var SnippetOption = Widget.extend({
inputWrapperEl.appendChild(unitEl);
return inputWrapperEl;
},
/**
* Build the correct DOM for a we-datetimepicker element.
*
* @static
* @param {HTMLElement} datetimepickerEl
*/
buildDatetimepickerElement: function (datetimepickerEl) {
var titleEl = SnippetOption.prototype.stringToTitle(datetimepickerEl);

var datetimePickerId = _.uniqueId('datetimepicker');

var weInput = document.createElement('we-input');
datetimepickerEl.classList.forEach(className => weInput.classList.add(className));
datetimepickerEl.setAttribute('class', '');
for (const key in datetimepickerEl.dataset) {
weInput.dataset[key] = datetimepickerEl.dataset[key];
delete datetimepickerEl.dataset[key];
}
weInput.dataset['unit'] = null;

var inputEl = document.createElement('input');
inputEl.setAttribute('type', 'text');
inputEl.setAttribute('class', 'datetimepicker-input mx-0 text-left');
inputEl.setAttribute('id', datetimePickerId);
inputEl.setAttribute('data-target', '#' + datetimePickerId);
inputEl.setAttribute('data-toggle', 'datetimepicker');

weInput.appendChild(inputEl);

datetimepickerEl.appendChild(titleEl);
datetimepickerEl.appendChild(weInput);

var datepickersOptions = {
minDate: moment({y: 1900}),
maxDate: moment().add(200, 'y'),
calendarWeeks: true,
defaultDate: moment().format(),
icons: {
close: 'fa fa-check primary',
},
locale: moment.locale(),
format: time.getLangDatetimeFormat(),
sideBySide: true,
buttons: {
showClose: true,
},
widgetParent: 'body',
};
$(inputEl).datetimepicker(datepickersOptions);
},
/**
* Build the correct DOM for a we-select element.
*
Binary file not shown.

0 comments on commit c195352

Please sign in to comment.
You can’t perform that action at this time.