Lea/web-apps
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Menu component: change scroll

Browse source
This commit is contained in:
Julia Radzhabova 2019-06-20 14:32:10 +03:00
parent 077062e2c5
commit 20a45dda5f
12 changed files with 21 additions and 254 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

128
apps/common/main/lib/component/Menu.js
View file

@ -143,7 +143,8 @@ define([
menuAlign : 'tl-bl',
menuAlignEl : null,
offset : [0, 0],
cyclic : true
cyclic : true,
scrollAlwaysVisible: true
},
template: _.template([
@ -162,6 +163,7 @@ define([
this.offset = [0, 0];
this.menuAlign = this.options.menuAlign;
this.menuAlignEl = this.options.menuAlignEl;
this.scrollAlwaysVisible = this.options.scrollAlwaysVisible;
if (!this.options.cyclic) this.options.cls += ' no-cyclic';
@ -243,7 +245,6 @@ define([
this.parentEl.on('hide.bs.dropdown', _.bind(me.onBeforeHideMenu, me));
this.parentEl.on('hidden.bs.dropdown', _.bind(me.onAfterHideMenu, me));
this.parentEl.on('keydown.after.bs.dropdown', _.bind(me.onAfterKeydownMenu, me));
menuRoot.on('scroll', _.bind(me.onScroll, me));
menuRoot.hover(
function(e) { me.isOver = true;},
@ -313,64 +314,6 @@ define([
}
},
doLayout: function() {
if (this.options.maxHeight > 0) {
if (!this.rendered) {
this.mustLayout = true;
return;
}
var me = this,
el = this.cmpEl;
var menuRoot = (el.attr('role') === 'menu') ? el : el.find('[role=menu]');
if (!menuRoot.is(':visible')) {
var pos = [menuRoot.css('left'), menuRoot.css('top')];
menuRoot.css({
left : '-1000px',
top : '-1000px',
display : 'block'
});
}
var $items = menuRoot.find('li');
if ($items.height() * $items.length > this.options.maxHeight) {
var scroll = '<div class="menu-scroll top"></div>';
menuRoot.prepend(scroll);
scroll = '<div class="menu-scroll bottom"></div>';
menuRoot.append(scroll);
menuRoot.css({
'box-shadow' : 'none',
'overflow-y' : 'hidden',
'padding-top' : '18px'
// 'padding-bottom' : '18px'
});
menuRoot.find('> li:last-of-type').css('margin-bottom',18);
var addEvent = function( elem, type, fn ) {
elem.addEventListener ? elem.addEventListener( type, fn, false ) : elem.attachEvent( "on" + type, fn );
};
var eventname=(/Firefox/i.test(navigator.userAgent))? 'DOMMouseScroll' : 'mousewheel';
addEvent(menuRoot[0], eventname, _.bind(this.onMouseWheel,this));
menuRoot.find('.menu-scroll').on('click', _.bind(this.onScrollClick, this));
}
if (pos) {
menuRoot.css({
display : '',
left : pos[0],
top : pos[1]
});
}
}
},
addItem: function(item) {
this.insertItem(-1, item);
},
@ -405,7 +348,6 @@ define([
item.off('click').off('toggle');
item.remove();
});
this.rendered && this.cmpEl.find('.menu-scroll').off('click').remove();
me.items = [];
},
@ -413,12 +355,17 @@ define([
onBeforeShowMenu: function(e) {
Common.NotificationCenter.trigger('menu:show');
if (this.mustLayout) {
delete this.mustLayout;
this.doLayout.call(this);
this.trigger('show:before', this, e);
if (this.options.maxHeight && !this.scroller) {
this.scroller = new Common.UI.Scroller({
el: $(this.el).find('.dropdown-menu '),
minScrollbarLength: 30,
suppressScrollX: true,
alwaysVisibleY: this.scrollAlwaysVisible
});
}
this.trigger('show:before', this, e);
this.alignPosition();
},
@ -439,14 +386,6 @@ define([
}
}
}
if (this.$el.find('> ul > .menu-scroll').length) {
var el = this.$el.find('li .checked')[0];
if (el) {
var offset = el.offsetTop - this.options.maxHeight / 2;
this.scrollMenu(offset < 0 ? 0 : offset);
}
}
},
onBeforeHideMenu: function(e) {
@ -480,23 +419,6 @@ define([
}
},
onScroll: function(item, e) {
if (this.scroller) return;
var menuRoot = (this.cmpEl.attr('role') === 'menu')
? this.cmpEl
: this.cmpEl.find('[role=menu]'),
scrollTop = menuRoot.scrollTop(),
top = menuRoot.find('.menu-scroll.top'),
bottom = menuRoot.find('.menu-scroll.bottom');
if (this.fromKeyDown) {
top.css('top', scrollTop + 'px');
bottom.css('bottom', (-scrollTop) + 'px');
}
top.toggleClass('disabled', scrollTop<1);
bottom.toggleClass('disabled', scrollTop + this.options.maxHeight > menuRoot[0].scrollHeight-1);
},
onItemClick: function(item, e) {
if (!item.menu) this.isOver = false;
if (item.options.stopPropagation) {
@ -514,32 +436,6 @@ define([
this.trigger('item:toggle', this, item, state, e);
},
onScrollClick: function(e) {
if (/disabled/.test(e.currentTarget.className)) return false;
this.scrollMenu(/top/.test(e.currentTarget.className));
return false;
},
onMouseWheel: function(e) {
this.scrollMenu(((e.detail && -e.detail) || e.wheelDelta) > 0);
},
scrollMenu: function(up) {
this.fromKeyDown = false;
var menuRoot = (this.cmpEl.attr('role') === 'menu')
? this.cmpEl
: this.cmpEl.find('[role=menu]'),
value = typeof(up)==='boolean'
? menuRoot.scrollTop() + (up ? -20 : 20)
: up;
menuRoot.scrollTop(value);
menuRoot.find('.menu-scroll.top').css('top', menuRoot.scrollTop() + 'px');
menuRoot.find('.menu-scroll.bottom').css('bottom', (-menuRoot.scrollTop()) + 'px');
},
setOffset: function(offsetX, offsetY) {
this.offset[0] = _.isUndefined(offsetX) ? this.offset[0] : offsetX;
this.offset[1] = _.isUndefined(offsetY) ? this.offset[1] : offsetY;

30
apps/documenteditor/main/app/view/DocumentHolder.js
View file

@ -2711,6 +2711,7 @@ define([
caption : me.moreText,
menu : new Common.UI.Menu({
menuAlign: 'tl-tr',
maxHeight: 300,
items : [
]
})
@ -2723,17 +2724,7 @@ define([
menuAlign: 'tl-tr',
maxHeight: 300,
restoreHeight: 300,
items : [
]
}).on('show:before', function (mnu) {
if (!this.scroller) {
this.scroller = new Common.UI.Scroller({
el: $(this.el).find('.dropdown-menu '),
useKeyboard: this.enableKeyEvents && !this.handleSelect,
minScrollbarLength: 30,
alwaysVisibleY: true
});
}
items : []
})
});
@ -3345,9 +3336,8 @@ define([
caption : me.moreText,
menu : new Common.UI.Menu({
menuAlign: 'tl-tr',
style : 'max-height: 300px;',
items: [
]
maxHeight: 300,
items: []
})
});
@ -3358,17 +3348,7 @@ define([
menuAlign: 'tl-tr',
maxHeight: 300,
restoreHeight: 300,
items : [
]
}).on('show:before', function (mnu) {
if (!this.scroller) {
this.scroller = new Common.UI.Scroller({
el: $(this.el).find('.dropdown-menu '),
useKeyboard: this.enableKeyEvents && !this.handleSelect,
minScrollbarLength: 30,
alwaysVisibleY: true
});
}
items : []
})
});

7
apps/documenteditor/main/app/view/MailMergeSettings.js
View file

@ -101,13 +101,6 @@ define([
style: 'min-width: 190px;max-width: 400px;',
maxHeight: 200,
items: []
}).on('render:after', function(mnu) {
this.scroller = new Common.UI.Scroller({
el: this.$el.find('.dropdown-menu'),
useKeyboard: this.enableKeyEvents && !this.handleSelect,
suppressScrollX: true,
minScrollbarLength : 40
});
})
});
this.btnInsField.render( $('#mmerge-btn-ins-field',me.$el)) ;

9
apps/documenteditor/main/app/view/Statusbar.js
View file

@ -240,15 +240,6 @@ define([
'</a>'
].join('')),
menuAlign: 'bl-tl'
}).on('show:before', function (mnu) {
if (!this.scroller) {
this.scroller = new Common.UI.Scroller({
el: $(this.el).find('.dropdown-menu '),
useKeyboard: this.enableKeyEvents && !this.handleSelect,
minScrollbarLength: 30,
alwaysVisibleY: true
});
}
});
this.zoomMenu = new Common.UI.Menu({

17
apps/documenteditor/main/app/view/Toolbar.js
View file

@ -827,6 +827,8 @@ define([
iconCls: 'btn-pagesize',
caption: me.capBtnPageSize,
menu: new Common.UI.Menu({
maxHeight: 571,
restoreHeight: 571,
items: [
{
caption: 'US Letter',
@ -963,15 +965,6 @@ define([
items: [],
maxHeight: 560,
restoreHeight: 560
}).on('show:before', function (mnu) {
if (!this.scroller) {
this.scroller = new Common.UI.Scroller({
el: $(this.el).find('.dropdown-menu '),
useKeyboard: this.enableKeyEvents && !this.handleSelect,
minScrollbarLength: 40,
alwaysVisibleY: true
});
}
})
});
this.toolbarControls.push(this.btnColorSchemas);
@ -2080,12 +2073,6 @@ define([
this.mnuColorSchema = new Common.UI.Menu({
maxHeight: 560,
restoreHeight: 560
}).on('show:before', function (mnu) {
this.scroller = new Common.UI.Scroller({
el: $(this.el).find('.dropdown-menu '),
useKeyboard: this.enableKeyEvents && !this.handleSelect,
minScrollbarLength: 40
});
});
}
this.mnuColorSchema.items = [];

21
apps/presentationeditor/main/app/view/DocumentHolder.js
View file

@ -2147,6 +2147,7 @@ define([
caption : me.moreText,
menu : new Common.UI.Menu({
menuAlign: 'tl-tr',
maxHeight: 300,
items : [
]
})
@ -2161,15 +2162,6 @@ define([
restoreHeight: 300,
items : [
]
}).on('show:before', function (mnu) {
if (!this.scroller) {
this.scroller = new Common.UI.Scroller({
el: $(this.el).find('.dropdown-menu '),
useKeyboard: this.enableKeyEvents && !this.handleSelect,
minScrollbarLength: 30,
alwaysVisibleY: true
});
}
})
});
@ -2224,7 +2216,7 @@ define([
caption : me.moreText,
menu : new Common.UI.Menu({
menuAlign: 'tl-tr',
style : 'max-height: 300px;',
maxHeight: 300,
items: [
]
})
@ -2239,15 +2231,6 @@ define([
restoreHeight: 300,
items : [
]
}).on('show:before', function (mnu) {
if (!this.scroller) {
this.scroller = new Common.UI.Scroller({
el: $(this.el).find('.dropdown-menu '),
useKeyboard: this.enableKeyEvents && !this.handleSelect,
minScrollbarLength: 30,
alwaysVisibleY: true
});
}
})
});

9
apps/presentationeditor/main/app/view/Statusbar.js
View file

@ -274,15 +274,6 @@ define([
'</a>'
].join('')),
menuAlign: 'bl-tl'
}).on('show:before', function (mnu) {
if (!this.scroller) {
this.scroller = new Common.UI.Scroller({
el: $(this.el).find('.dropdown-menu '),
useKeyboard: this.enableKeyEvents && !this.handleSelect,
minScrollbarLength: 30,
alwaysVisibleY: true
});
}
});
this.btnLanguage = new Common.UI.Button({

13
apps/presentationeditor/main/app/view/Toolbar.js
View file

@ -580,13 +580,6 @@ define([
items: [],
maxHeight: 560,
restoreHeight: 560
}).on('show:before', function (mnu) {
this.scroller = new Common.UI.Scroller({
el: $(this.el).find('.dropdown-menu '),
useKeyboard: this.enableKeyEvents && !this.handleSelect,
minScrollbarLength: 40,
alwaysVisibleY: true
});
})
});
me.slideOnlyControls.push(me.btnColorSchemas);
@ -1277,12 +1270,6 @@ define([
mnuColorSchema = new Common.UI.Menu({
maxHeight: 560,
restoreHeight: 560
}).on('render:after', function (mnu) {
this.scroller = new Common.UI.Scroller({
el: $(this.el).find('.dropdown-menu '),
useKeyboard: this.enableKeyEvents && !this.handleSelect,
minScrollbarLength: 40
});
});
}
mnuColorSchema.items = [];

6
apps/spreadsheeteditor/main/app/view/CellEditor.js
View file

@ -62,12 +62,6 @@ define([
{ caption: this.textManager, value: 'manager' },
{ caption: '--' }
]
}).on('render:after', function(mnu) {
this.scroller = new Common.UI.Scroller({
el: $(this.el).find('.dropdown-menu '),
useKeyboard: this.enableKeyEvents && !this.handleSelect,
minScrollbarLength : 40
});
}).on('show:after', function () {
this.scroller.update({alwaysVisibleY: true});
})

13
apps/spreadsheeteditor/main/app/view/DocumentHolder.js
View file

@ -926,13 +926,6 @@ define([
maxHeight: 200,
cyclic: false,
items: []
}).on('render:after', function(mnu) {
this.scroller = new Common.UI.Scroller({
el: $(this.el).find('.dropdown-menu '),
useKeyboard: this.enableKeyEvents && !this.handleSelect,
minScrollbarLength : 40,
alwaysVisibleY: true
});
}).on('show:after', function () {
this.scroller.update({alwaysVisibleY: true});
});
@ -943,12 +936,6 @@ define([
items: []
}).on('render:after', function(mnu) {
mnu.cmpEl.removeAttr('oo_editor_input').attr('oo_editor_keyboard', true);
this.scroller = new Common.UI.Scroller({
el: $(this.el).find('.dropdown-menu '),
useKeyboard: this.enableKeyEvents && !this.handleSelect,
minScrollbarLength : 40,
alwaysVisibleY: true
});
});
me.fireEvent('createdelayedelements', [me]);

7
apps/spreadsheeteditor/main/app/view/Statusbar.js
View file

@ -201,13 +201,6 @@ define([
var menuHiddenItems = new Common.UI.Menu({
maxHeight: 260,
menuAlign: 'tl-tr'
}).on('render:after', function(mnu) {
this.scroller = new Common.UI.Scroller({
el: $(this.el).find('.dropdown-menu '),
useKeyboard: this.enableKeyEvents && !this.handleSelect,
minScrollbarLength : 40,
alwaysVisibleY: true
});
}).on('show:after', function () {
this.scroller.update({alwaysVisibleY: true});
});

15
apps/spreadsheeteditor/main/app/view/Toolbar.js
View file

@ -1007,15 +1007,6 @@ define([
items: [],
maxHeight : 560,
restoreHeight: 560
}).on('show:before', function(mnu) {
if ( !this.scroller ) {
this.scroller = new Common.UI.Scroller({
el: $(this.el).find('.dropdown-menu '),
useKeyboard: this.enableKeyEvents && !this.handleSelect,
minScrollbarLength : 40,
alwaysVisibleY: true
});
}
})
});
@ -1925,12 +1916,6 @@ define([
if (this.mnuColorSchema == null) {
this.mnuColorSchema = new Common.UI.Menu({maxHeight : 560,
restoreHeight: 560
}).on('show:before', function(mnu) {
this.scroller = new Common.UI.Scroller({
el: $(this.el).find('.dropdown-menu '),
useKeyboard: this.enableKeyEvents && !this.handleSelect,
minScrollbarLength : 40
});
});
}