NextERP/design-themes
2
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

[ADD] theme saas-12.3

Browse Source
This commit is contained in:
Design
2021-05-20 10:57:04 +02:00
committed by Jeremy Kersten
commit b759230266
3024 changed files with 68920 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
website_animate/static/description/icon.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.9 KiB

website_animate/static/src/js/o_animate.editor.js
+116
View File
@@ -0,0 +1,116 @@
odoo.define('website_animate.o_animate_editor', function (require) {
'use strict';
var sOptions = require('web_editor.snippets.options');
function forceAnimation() {
var $els = $();
_.each(arguments, function (el) {
$els = $els.add(el);
});
$els.css('animation-name', 'dummy');
void $els[0].offsetWidth;
$els.css('animation-name', '');
}
// Animations
sOptions.registry.o_animate = sOptions.Class.extend({
/**
* @override
*/
onFocus: function () {
this._setActive(); // Needed as in charge of hiding duration/delay/...
},
/**
* @override
*/
cleanForSave: function () {
// Clean elements
this.$target.removeClass('o_animating o_animated o_animate_preview')
.css({
'animation': '',
'animation-name': '',
'animation-play-state': '',
'visibility': '',
});
if (this.$target.hasClass('o_animate')) {
this.$target.css('animation-play-state', 'paused');
}
// Clean all inView elements
$('#wrapwrap').find('.o_animate').removeClass('o_visible');
},
//--------------------------------------------------------------------------
// Options
//--------------------------------------------------------------------------
/**
* @override
*/
selectClass: function (previewMode, value, $opt) {
this._super.apply(this, arguments);
forceAnimation(this.$target);
this.$target.toggleClass('o_animate_preview o_animate', !!value);
},
//--------------------------------------------------------------------------
// Private
//--------------------------------------------------------------------------
/**
* @override
*/
_setActive: function () {
this._super.apply(this, arguments);
this.$overlay.find('.snippet-option-o_animate_duration, .snippet-option-o_animate_delay, .snippet-option-o_animate_options')
.toggleClass('d-none', this.$el.find('.active').length === 0);
},
});
var Common = sOptions.Class.extend({
__animateOptionType: undefined,
//--------------------------------------------------------------------------
// Options
//--------------------------------------------------------------------------
/**
* @override
*/
selectClass: function (previewMode, value, $opt) {
this._super.apply(this, arguments);
var $timeline_delay = this.$overlay.find('.timeline' + this.__animateOptionType + ' span[simulate="delay"]');
var $timeline_duration = this.$overlay.find('.timeline' + this.__animateOptionType + ' span[simulate="duration"]');
this.$target.css({
'animation-duration': '',
'animation-delay': '',
});
var el_duration = parseFloat(this.$target.css('animation-duration').slice(0, -1));
var el_delay = parseFloat(this.$target.css('animation-delay').slice(0, -1));
var el_period = el_delay + el_duration;
$timeline_duration.parent().width((el_duration*100)/el_period + '%');
$timeline_delay.parent().width((el_delay*100)/el_period + '%');
$timeline_duration.css('animation-duration', el_duration + 's').css('animation-delay', el_delay + 's');
$timeline_delay.css('animation-duration', el_delay + 's');
forceAnimation($timeline_duration, $timeline_delay, this.$target);
this.$target.addClass('o_animate_preview');
},
});
// Duration
sOptions.registry.o_animate_duration = Common.extend({
__animateOptionType: '.duration',
});
// Delay
sOptions.registry.o_animate_delay = Common.extend({
__animateOptionType: '.delay',
});
});
website_animate/static/src/js/o_animate.frontend.js
+147
View File
@@ -0,0 +1,147 @@
odoo.define('website_animate.o_animate_frontend', function (require) {
'use strict';
var publicWidget = require('web.public.widget');
var WebsiteAnimate = {
win : {},
items : {},
offsetRatio : 0.3, // Dynamic offset ratio: 0.3 = (element's height/3)
offsetMin : 10, // Minimum offset for small elements (in pixels)
// Retrieve animable elements and attach handlers.
start: function () {
var self = this;
self.items = $(".o_animate");
self.items.each(function () {
var $el = $(this);
// Set all monitored elements to initial state
self.reset_animation($el);
});
setTimeout(function () {
self.attach_handlers();
});
},
// Bind events and define the scrolling function
attach_handlers: function () {
var self = this;
var lastScroll = 0;
$(window)
.on("resize.o_animate", function () {
self.win.h = $(window).height();
$(window).trigger("scroll");
})
.trigger("resize")
.on("scroll.o_animate, slid.bs.carousel", (_.throttle(function () {
// _.throttle -> Limit the number of times the scroll function
// can be called in a given period. (http://underscorejs.org/#throttle)
var windowTop = $(window).scrollTop();
var windowBottom = windowTop + self.win.h;
// Handle reverse scrolling
var direction = (windowTop < lastScroll) ? -1 : 1;
lastScroll = windowTop;
self.items.each(function () {
var $el = $(this);
var elHeight = $el.height();
var elOffset = direction * Math.max((elHeight * self.offsetRatio), self.offsetMin);
var state = $el.css("animation-play-state");
// We need to offset for the change in position from some animation
// So we get the top value of the transform matrix
var transformMatrix = $el.css('transform').replace(/[^0-9\-.,]/g, '').split(',');
var transformOffset = transformMatrix[13] || transformMatrix[5];
var elTop = $el.offset().top - transformOffset;
var visible = windowBottom > (elTop + elOffset) && windowTop < (elTop + elHeight - elOffset);
if ( visible && (state === "paused") ) {
$el.addClass("o_visible");
self.start_animation($el);
} else if ( !(visible) && $el.hasClass("o_animate_both_scroll") && (state === "running") ) {
$el.removeClass("o_visible");
self.reset_animation($el);
}
});
},100)))
.trigger("scroll");
},
// Set elements to initial state
reset_animation: function ($el) {
var anim_name = $el.css("animation-name");
$el
.css({"animation-name" : "dummy-none", "animation-play-state" : ""})
.removeClass("o_animated o_animating");
// force the browser to redraw using setTimeout
setTimeout(function () {
$el.css({"animation-name" : anim_name, "animation-play-state" : "paused"});
},0);
},
// Start animation and/or update element's state
start_animation: function ($el) {
// Safari/iOS workaround: perform another redraw at this specific stage to correctly trigger animations
// TODO: Investigate causes, normally the issue should be solved by a future 'requestAnimationFrame' implementation
if ($.browser.safari) {
$el.toggleClass('d-none').toggleClass('d-none', 1);
}
// force the browser to redraw using setTimeout
setTimeout(function () {
$el
.css({"animation-play-state": "running"})
.addClass("o_animating")
.one('webkitAnimationEnd oanimationend msAnimationEnd animationend', function (e) {
$el.addClass("o_animated").removeClass("o_animating");
$(window).trigger("resize");
});
});
},
};
publicWidget.registry.WebsiteAnimate = publicWidget.Widget.extend({
selector: '#wrapwrap',
disabledInEditableMode: false,
/**
* @override
*/
start: function () {
// By default, elements are hidden by the css of o_animate.
// render alements + // We will trigger the animation then pause it in state 0.
WebsiteAnimate.start();
// Then we render all the elements, the ones which are invisible
// in state 0 (like fade_in for example) will stay invisible.
$(".o_animate").css("visibility", "visible");
return this._super.apply(this, arguments);
},
});
// Backward compatibility for enark animation system
publicWidget.registry.o_animate = publicWidget.Widget.extend({
selector: '.o_animation',
destroy: function () {
this._super.apply(this, arguments);
// Convert old classes to the new animation system
var old_animation_classes = "o_animation o_displayed o_displayed_top o_displayed_middle o_displayed_bottom o_visible o_visible_top o_visible_middle o_visible_bottom";
$(".o_fade_in").addClass("o_animate o_anim_fade_in").removeClass("o_fade_in");
$(".o_fade_in_down").addClass("o_animate o_anim_fade_in_down").removeClass("o_fade_in_down");
$(".o_fade_in_left").addClass("o_animate o_anim_fade_in_left").removeClass("o_fade_in_left");
$(".o_fade_in_right").addClass("o_animate o_anim_fade_in_right").removeClass("o_fade_in_right");
$(".o_fade_in_up").addClass("o_animate o_anim_fade_in_up").removeClass("o_fade_in_up");
this.$target.removeClass(old_animation_classes);
},
});
return WebsiteAnimate;
});
website_animate/static/src/scss/o_animate_editor.scss
+52
View File
@@ -0,0 +1,52 @@
// variables
$o-animate-timeline-bg-color: #F7F7F7;
$o-animate-timeline-border-bottom : 1px solid #EAEAEA;
$o-animate-timeline-height: 5px;
$o-animate-timeline-duration-color: #21b799;
$o-animate-timeline-delay-color: #A4498C;
// default style
#oe_manipulators {
.o_anim_li > a > i {
color: orange!important;
}
span.timeline {
display: block;
width: 100%;
height: $o-animate-timeline-height;
margin-bottom: 5px;
position: relative;
background-color: $o-animate-timeline-bg-color;
border-bottom: $o-animate-timeline-border-bottom;
> span {
float: left;
display: inline-block;
position: relative;
height: $o-animate-timeline-height;
}
span[simulate="duration"] {
position: absolute;
float: left;
left: 0;
height: 100%;
background: $o-animate-timeline-duration-color;
width: 0%;
animation-name: o_animate_timeline_duration;
animation-timing-function: linear;
animation-fill-mode: forwards;
}
span[simulate="delay"] {
position: absolute;
float: left;
left: 0;
height: 100%;
background: $o-animate-timeline-delay-color;
width: 0%;
animation-name: o_animate_timeline_delay;
animation-timing-function: linear;
animation-fill-mode: forwards;
}
}
}
website_animate/static/src/scss/o_animate_frontend.scss
+1075
View File
File diff suppressed because it is too large Load Diff