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

[ADD] theme 10.0

Browse Source
This commit is contained in:
Design
2021-05-11 15:49:42 +02:00
committed by Jeremy Kersten
commit dfcb89fc4a
3871 changed files with 155210 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
+159
View File
@@ -0,0 +1,159 @@
odoo.define('website_animate.o_animate_editor', function (require) {
'use strict';
var s_options = require('web_editor.snippets.options');
// Animations
s_options.registry.o_animate = s_options.Class.extend({
start: function () {
this._super.apply(this, arguments);
var self = this;
setTimeout(function () {
if (self.$overlay.find("li.snippet-option-o_animate > ul > li li.active").length > 0) {
self.update_options_visibility("show");
} else {
self.update_options_visibility("hide");
}
// remove theme_enark animation options from the context menu
// WARNING: theme_enark do not prefix js methods,
// Remove in Odoo9
if (self.$overlay.find('li.snippet-option-animation').length > 0) {
$(this).addClass("hidden");
}
}, 500);
},
select_class: function (type, value, $li) {
this._super.apply(this, arguments);
var self = this;
setTimeout(function () {
self.$target.addClass("o_animate_preview o_animate").css('animation-name', 'dummy-none');
self.$target.css('animation-name', '');
});
if (type !== "click") {
return;
}
if (value.length > 0) {
self.update_options_visibility("show");
self.$target.removeClass("o_animate_preview");
} else {
setTimeout(function () {
self.update_options_visibility("hide");
self.$target.removeClass("o_animate_preview o_animate");
}, 500);
}
},
update_options_visibility: function (value) {
var self = this;
var opts = ".snippet-option-o_animate_duration, .snippet-option-o_animate_delay, .snippet-option-o_animate_options";
setTimeout(function () {
if (value == "show") {
self.$overlay.find(opts).removeClass("hidden");
} else if (value == "hide") {
self.$overlay.find(opts).addClass("hidden");
}
});
},
clean_for_save: function () {
var self = this;
// Clean elements
self.$target.removeClass("o_animating o_animated o_animate_preview")
.css({
'animation': '',
'animation-name': '',
'animation-play-state': '',
'visibility': ''
});
if (self.$target.hasClass("o_animate")) {
self.$target.css('animation-play-state', 'paused');
}
// Clean all inView elements
$("#wrapwrap").find(".o_animate").removeClass("o_visible");
},
});
// Duration
s_options.registry.o_animate_duration = s_options.Class.extend({
select_class: function (type, value, $li) {
this._super.apply(this, arguments);
var self = this;
var $timeline_duration = this.$overlay.find(".timeline.duration span[simulate='duration']");
var $timeline_delay = this.$overlay.find(".timeline.duration span[simulate='delay']");
this.$target.css({
'animation-duration': '',
'animation-delay': ''
});
var el_delay = this.$target.css("animation-delay");
var el_duration = this.$target.css("animation-duration");
var el_period;
el_delay = parseFloat(el_delay.slice(0,-1));
el_duration = parseFloat(el_duration.slice(0,-1));
el_period = el_delay + el_duration;
$timeline_duration.parent().width((el_duration*100)/el_period +"%");
$timeline_delay.parent().width((el_delay*100)/el_period +"%");
this.$target.addClass("o_animate_preview").css('animation-name', 'dummy-none').css('animation-duration', '0s');
$timeline_duration.css('animation-name', 'dummy-none').css('animation-duration', el_duration + "s").css('animation-delay', el_delay + "s");
$timeline_delay.css('animation-name', 'dummy-none').css('animation-duration', el_delay + "s");
setTimeout(function () {
self.$target.css('animation-name', '').css('animation-duration', '');
$timeline_duration.css('animation-name', '');
$timeline_delay.css('animation-name', '');
});
},
});
// Delay
s_options.registry.o_animate_delay = s_options.Class.extend({
select_class: function (type, value, $li) {
this._super.apply(this, arguments);
var self = this;
var $timeline_delay = this.$overlay.find(".timeline.delay span[simulate='delay']");
var $timeline_duration = this.$overlay.find(".timeline.delay span[simulate='duration']");
this.$target.css({
'animation-duration': '',
'animation-delay': ''
});
var el_delay = this.$target.css("animation-delay");
var el_duration = this.$target.css("animation-duration");
var el_period;
el_delay = parseFloat(el_delay.slice(0,-1));
el_duration = parseFloat(el_duration.slice(0,-1));
el_period = el_delay + el_duration;
$timeline_duration.parent().width((el_duration*100)/el_period +"%");
$timeline_delay.parent().width((el_delay*100)/el_period +"%");
this.$target.addClass("o_animate_preview").css('animation-name', 'dummy-none').css('animation-duration', '0s');
$timeline_duration.css('animation-name', 'dummy-none').css('animation-duration', el_duration + "s").css('animation-delay', el_delay + "s");
$timeline_delay.css('animation-name', 'dummy-none').css('animation-duration', el_delay + "s");
setTimeout(function () {
self.$target.css('animation-name', '').css('animation-duration', '');
$timeline_duration.css('animation-name', '');
$timeline_delay.css('animation-name', '');
});
},
});
});
website_animate/static/src/js/o_animate.frontend.js
+141
View File
@@ -0,0 +1,141 @@
odoo.define('website_animate.o_animate_frontend', function (require) {
'use strict';
var s_animation = require('web_editor.snippets.animation');
var base = require('web_editor.base');
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 self = this;
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) {
var self = this;
// 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('hidden').toggleClass('hidden', 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");
});
});
},
};
base.ready().then(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");
});
// Backward compatibility for enark animation system
s_animation.registry.o_animate = s_animation.Class.extend({
selector: '.o_animation',
stop: function () {
this._super();
// 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/less/o_animate_editor.less
+59
View File
@@ -0,0 +1,59 @@
/*
========================================
==== website builder menu integration
========================================
*/
// 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 .dropdown-menu {
> li {
&.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/less/o_animate_frontend.less
+1083
View File
File diff suppressed because it is too large Load Diff