You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
290 lines
12 KiB
290 lines
12 KiB
odoo.define('backend_theme_infinito.AdvancedFeatures', function (require) {
|
|
"use strict";
|
|
|
|
var Widget = require('backend_theme_infinito.ThemeStudioWidget');
|
|
var TimePicker = require('backend_theme_infinito.timepicker');
|
|
var ajax = require('web.ajax');
|
|
var session = require('web.session');
|
|
var AdvancedFeatures = Widget.extend({
|
|
template: 'theme_editor_sidebar_advanced',
|
|
events: {
|
|
'click .close_advanced': '_Close',
|
|
'click .js_save_changes': '_SaveChanges',
|
|
'change #navbarDarkToggler': '_OnChangeDark',
|
|
'click .mode li': 'onChangeDarkMode',
|
|
'click .schedule-input': 'onClickSchedule',
|
|
'change #loader': 'onLoaderChange'
|
|
},
|
|
current_tools: [],
|
|
init: function (parent, type) {
|
|
this._super.apply(this, arguments);
|
|
this.parent = parent;
|
|
this.sidebar_width = '330px';
|
|
this.mode = session.infinitoDarkMode || 'all';
|
|
this.darkStart = session.infinitoDarkStart || '19:00';
|
|
this.darkEnd = session.infinitoDarkEnd || '5:00';
|
|
this.darkStartFloat = this.timeToFloat(this.darkStart);
|
|
this.darkEndFloat = this.timeToFloat(this.darkEnd);
|
|
this.type = type;
|
|
if(this.type == 'user'){
|
|
this.appendTo(document.body)
|
|
}
|
|
this.loaders = ['default', 'ring', 'rotating', 'blinking', 'bounce']
|
|
},
|
|
start: function () {
|
|
this._super.apply(this, arguments);
|
|
this._Open();
|
|
this.renderData();
|
|
this.timePicker = new TimePicker(this);
|
|
this.timePicker._mount();
|
|
this.$el.next().removeClass('marg_main');
|
|
if (this.mode == 'schedule'){
|
|
$('.dark-schedule').css('display', 'flex');
|
|
} else {
|
|
$('.dark-schedule').css('display', 'none');
|
|
}
|
|
this.$('.info-infinito').popover({
|
|
trigger: 'hover'
|
|
});
|
|
},
|
|
_Open: function(){
|
|
this.$el.css('width', this.sidebar_width);
|
|
if(this.type == 'global'){
|
|
this.$el.parent().next().css('margin-left', this.sidebar_width)
|
|
this.$el.css('height', '91.4vh');
|
|
} else {
|
|
this.$el.parent().css('margin-right', this.sidebar_width)
|
|
this.$el.css('right', '0');
|
|
this.$el.css('left', 'initial');
|
|
this.$el.css('height', '100vh');
|
|
}
|
|
},
|
|
_Close: function() {
|
|
$('#hamburger').click()
|
|
this.$el.css('width', '0');
|
|
if(this.type == 'global'){
|
|
this.$el.parent().next().css('margin-left', '0');
|
|
} else {
|
|
this.$el.parent().css('margin-right', '0');
|
|
location.reload();
|
|
}
|
|
},
|
|
async renderData(){
|
|
this.$el.find('#userEditToggler').attr('checked', session.userEdit);
|
|
this.$el.find('#sidebarToggler').attr('checked', session.sidebar);
|
|
this.$el.find('#sidebarIconToggler').attr('checked', session.sidebarIcon);
|
|
this.$el.find('#sidebarNameToggler').attr('checked', session.sidebarName);
|
|
this.$el.find('#navbarHoverToggler').attr('checked', session.fullscreen);
|
|
this.$el.find('#sidebarCompanyToggler').attr('checked', session.sidebarCompany);
|
|
this.$el.find('#sidebarUserToggler').attr('checked', session.sidebarUser);
|
|
this.$el.find('#navbarRecentToggler').attr('checked', session.recentApps);
|
|
this.$el.find('#navbarFullScreenAppToggler').attr('checked', session.fullScreenApp);
|
|
this.$el.find('#navbarRTLToggler').attr('checked', session.infinitoRtl);
|
|
this.$el.find('#navbarDarkToggler').attr('checked', session.infinitoDark);
|
|
this.$el.find('#navbarMenuBookmarkToggler').attr('checked', session.infinitoBookmark);
|
|
this.$el.find('#chameleonToggler').attr('checked', session.infinitoChameleon);
|
|
let content = '';
|
|
for(let loader of this.loaders){
|
|
content += `<option value="${loader}">${loader}</option>`;
|
|
}
|
|
this.$el.find('#loader').html(content);
|
|
this.$el.find('#loader').val(session.loaderClass);
|
|
this.showDarkOptions(session.infinitoDark);
|
|
this.$el.find(`[data-mode="${this.mode}"]`).closest('li').addClass('active');
|
|
this.setRender();
|
|
this.hideOptions();
|
|
},
|
|
setRender: function(){
|
|
this.$el.find('#startSchedule').html(this.darkStart);
|
|
this.$el.find('#endSchedule').html(this.darkEnd);
|
|
this.$el.find('#item1').val(session.infinitoDarkStart);
|
|
this.$el.find('#item2').val(session.infinitoDarkEnd);
|
|
},
|
|
hideOptions: function(){
|
|
if(this.type == 'user'){
|
|
this.$el.find('#userEditToggler').closest('.sub_style').remove();
|
|
}
|
|
},
|
|
async _SaveChanges(){
|
|
let vals = {
|
|
'sidebar': this.$el.find('#sidebarToggler')[0].checked,
|
|
'sidebarIcon': this.$el.find('#sidebarIconToggler')[0].checked,
|
|
'sidebarName': this.$el.find('#sidebarNameToggler')[0].checked,
|
|
'fullscreen': this.$el.find('#navbarHoverToggler')[0].checked,
|
|
'sidebarCompany': this.$el.find('#sidebarCompanyToggler')[0].checked,
|
|
'sidebarUser': this.$el.find('#sidebarUserToggler')[0].checked,
|
|
'recentApps': this.$el.find('#navbarRecentToggler')[0].checked,
|
|
'fullScreenApp': this.$el.find('#navbarFullScreenAppToggler')[0].checked,
|
|
'infinitoRtl': this.$el.find('#navbarRTLToggler')[0].checked,
|
|
'infinitoDark': this.$el.find('#navbarDarkToggler')[0].checked,
|
|
'infinitoBookmark': this.$el.find('#navbarMenuBookmarkToggler')[0].checked,
|
|
'infinitoChameleon': this.$el.find('#chameleonToggler')[0].checked,
|
|
'infinitoDarkMode': this.mode,
|
|
'infinitoDarkStart': this.darkStartFloat,
|
|
'infinitoDarkEnd': this.darkEndFloat,
|
|
'loaderClass': this.$el.find('#loader').val(),
|
|
}
|
|
if(!vals.sidebarIcon && !vals.sidebarName && vals.sidebar){
|
|
vals.sidebar = false;
|
|
this.$(".error-message").html('Sidebar is <b>disabled</b> due to icon and name is disabled');
|
|
this.$(".error-message").animate({
|
|
left: 0,
|
|
},
|
|
1000,
|
|
function () {
|
|
$(this).delay(3000).fadeOut();
|
|
});
|
|
} if(vals.fullScreenApp && vals.sidebar) {
|
|
vals.sidebar = false;
|
|
this.$(".error-message").html('Sidebar is <b>disabled</b>, only sidebar or fullscreen app show at a time');
|
|
this.$(".error-message").animate({
|
|
left: 0,
|
|
},
|
|
1000,
|
|
function () {
|
|
$(this).delay(3000).fadeOut();
|
|
});
|
|
}
|
|
session.sidebar = vals.sidebar;
|
|
session.sidebarIcon = vals.sidebarIcon;
|
|
session.sidebarName = vals.sidebarName;
|
|
session.fullscreen = vals.fullscreen;
|
|
session.sidebarCompany = vals.sidebarCompany;
|
|
session.sidebarUser = vals.sidebarUser;
|
|
session.recentApps = vals.recentApps;
|
|
session.fullScreenApp = vals.fullScreenApp;
|
|
session.infinitoBookmark = vals.infinitoBookmark;
|
|
session.infinitoDark = vals.infinitoDark;
|
|
session.infinitoDark = vals.infinitoDark;
|
|
session.infinitoChameleon = vals.infinitoChameleon;
|
|
session.infinitoDarkMode = this.mode;
|
|
session.infinitoDarkStart = this.darkStart;
|
|
session.infinitoDarkEnd = this.darkEnd;
|
|
session.loaderClass = vals.loaderClass;
|
|
if(this.type == 'global'){
|
|
session.userEdit = this.$el.find('#userEditToggler')[0].checked;
|
|
vals.userEdit = this.$el.find('#userEditToggler')[0].checked;
|
|
await ajax.jsonRpc('/theme_studio/set_advanced_data', 'call', {vals}).then((_) => {
|
|
this._Close();
|
|
})
|
|
} else {
|
|
await ajax.jsonRpc('/theme_studio/set_advanced_data_user', 'call', {vals}).then((_) => {
|
|
this._Close();
|
|
})
|
|
}
|
|
},
|
|
_OnChangeDark: function(ev){
|
|
this.showDarkOptions(ev.target.checked);
|
|
},
|
|
showDarkOptions: function(toggle){
|
|
if(toggle){
|
|
$('.dark-switch').css('display', 'flex');
|
|
} else {
|
|
$('.dark-switch').css('display', 'none');
|
|
}
|
|
if (this.mode == 'schedule' && toggle){
|
|
$('.dark-schedule').css('display', 'flex');
|
|
} else {
|
|
$('.dark-schedule').css('display', 'none');
|
|
}
|
|
let lis = this.$el.find('.mode li');
|
|
for(let li of lis){
|
|
if($(li).find('a').data('mode') == this.mode){
|
|
$(li).addClass('active');
|
|
} else {
|
|
$(li).removeClass('active');
|
|
}
|
|
}
|
|
},
|
|
onChangeDarkMode: function(ev){
|
|
if($(ev.target).nodeName == 'LI'){
|
|
this.mode = $(ev.target).find('a').data('mode');
|
|
} else {
|
|
this.mode = $(ev.target).parent().data('mode');
|
|
}
|
|
this.showDarkOptions(true);
|
|
if(this.mode == 'auto') {
|
|
this.darkStartFloat = 19.0;
|
|
this.darkEndFloat = 5.0;
|
|
}
|
|
if (this.mode == 'schedule'){
|
|
$('.dark-schedule').css('display', 'flex');
|
|
this.timePicker._mount();
|
|
} else {
|
|
$('.dark-schedule').css('display', 'none');
|
|
}
|
|
},
|
|
onClickSchedule: function(ev){
|
|
// this.$(ev.target).next()[0].showPicker();
|
|
this.timePicker.attach({
|
|
target: this.$(ev.target).next()[0],
|
|
"24" : true,
|
|
time: this.$(ev.target).next()[0].id == 'time1' ? this.darkStart : this.darkEnd,
|
|
});
|
|
},
|
|
onChangeTime: function(ev){
|
|
this.darkStartFloat = this.timeToFloat(ev.target.value);
|
|
this.darkStart = ev.target.value;
|
|
this.setRender();
|
|
},
|
|
onChangeTime2: function(ev){
|
|
this.darkEndFloat = this.timeToFloat(ev.target.value);
|
|
this.darkEnd = ev.target.value;
|
|
this.setRender();
|
|
},
|
|
floatToTime: function(number){
|
|
let hour = Math.floor(number);
|
|
let decpart = number - hour;
|
|
let min = 1 / 60;
|
|
decpart = min * Math.round(decpart / min);
|
|
let minute = Math.floor(decpart * 60) + '';
|
|
if (minute.length < 2) {
|
|
minute = '0' + minute;
|
|
}
|
|
let time = hour + ':' + minute;
|
|
return time;
|
|
},
|
|
timeToFloat: function(time){
|
|
time = time.split(':');
|
|
let decpart = 0
|
|
if(time[1] && parseInt(time[1]) > 0){
|
|
decpart = parseInt(time[1]) * 1.666;
|
|
}
|
|
let floatString = `${time[0]}.${Math.round(decpart)}`;
|
|
return parseFloat(floatString)
|
|
},
|
|
onLoaderChange: function(ev){
|
|
let val = ev.target.value;
|
|
let loader = val == 'default' ? `<img src="/web/static/img/spin.png" alt="Loading..."/>` : `<a href ="#" class="${val}"></a>` ;
|
|
let content = `
|
|
<div class="o_blockUI">
|
|
<div class="o_spinner">
|
|
${loader}
|
|
</div>
|
|
<div class="o_message">
|
|
Loading...
|
|
</div>
|
|
</div>`;
|
|
if(!session.userEdit || this.parent.$el) {
|
|
this.parent.$el.find('.previews').html(content);
|
|
setTimeout(()=>{
|
|
this.parent.$el.find('.previews').html('');
|
|
}, 3000)
|
|
} else {
|
|
$('.o_web_client').append(content);
|
|
setTimeout(()=>{
|
|
$('.o_web_client').find('.o_blockUI').remove();
|
|
}, 3000)
|
|
}
|
|
|
|
},
|
|
destroy: function(){
|
|
this._super.apply(this, arguments);
|
|
this.timePicker.destroy();
|
|
}
|
|
|
|
});
|
|
|
|
return AdvancedFeatures;
|
|
|
|
});
|