[DE] Collapse toolbar when it's width more than browser width (add More button)
This commit is contained in:
Julia Radzhabova
parent
d16c421113
commit
42094483fa
|
|
@ -51,6 +51,7 @@ define([
|
|||
var $scrollL;
|
||||
var optsFold = {timeout: 2000};
|
||||
var config = {};
|
||||
var btnsMore = [];
|
||||
|
||||
var onScrollTabs = function(opts, e) {
|
||||
var sv = $boxTabs.scrollLeft();
|
||||
|
|
@ -118,7 +119,8 @@ define([
|
|||
|
||||
$boxTabs = me.$('.tabs > ul');
|
||||
me.$tabs = $boxTabs.find('> li');
|
||||
me.$panels = me.$('.box-panels > .panel');
|
||||
me.$boxpanels = me.$('.box-panels');
|
||||
me.$panels = me.$boxpanels.find('> .panel');
|
||||
optsFold.$bar = me.$('.toolbar');
|
||||
var $scrollR = me.$('.tabs .scroll.right');
|
||||
$scrollL = me.$('.tabs .scroll.left');
|
||||
|
|
@ -226,6 +228,234 @@ define([
|
|||
if ( $boxTabs.parent().hasClass('short') ) {
|
||||
$boxTabs.parent().removeClass('short');
|
||||
}
|
||||
this.resizeToolbar();
|
||||
},
|
||||
|
||||
setMoreButton: function(tab, panel) {
|
||||
if (!btnsMore[tab]) {
|
||||
var box = $('<div class="more-box" style="position: absolute;right: 0; padding-left: 12px;display: none;">' +
|
||||
'<div class="separator long" style="position: relative;display: table-cell;"></div>' +
|
||||
'<div class="group" style=""><span class="btn-slot text x-huge slot-btn-more"></span></div>' +
|
||||
'</div>');
|
||||
panel.append(box);
|
||||
btnsMore[tab] = new Common.UI.Button({
|
||||
cls: 'btn-toolbar x-huge icon-top dropdown-manual',
|
||||
caption: 'More',
|
||||
iconCls: 'btn-insertchart',
|
||||
enableToggle: true
|
||||
});
|
||||
btnsMore[tab].render(box.find('.slot-btn-more'));
|
||||
btnsMore[tab].on('toggle', function(btn, state, e) {
|
||||
Common.NotificationCenter.trigger('more:toggle', btn, state);
|
||||
});
|
||||
var moreContainer = $('<div class="dropdown-menu more-container" style="min-width:auto; padding: 5px 10px; background: #f1f1f1; border-radius: 0;z-index:999;"><div style="display: inline;"></div></div>');
|
||||
optsFold.$bar.append(moreContainer);
|
||||
btnsMore[tab].panel = moreContainer.find('div');
|
||||
}
|
||||
this.$moreBar = btnsMore[tab].panel;
|
||||
this.resizeToolbar(true);
|
||||
},
|
||||
|
||||
resizeToolbar: function(reset) {
|
||||
var activePanel = this.$panels.filter('.active'),
|
||||
more_section = activePanel.find('.more-box'),
|
||||
more_section_width = parseInt(more_section.css('width')) || 0,
|
||||
boxpanels_offset = this.$boxpanels.offset(),
|
||||
boxpanels_width = this.$boxpanels.width(),
|
||||
delta = (this._prevBoxWidth) ? (boxpanels_width - this._prevBoxWidth) : -1;
|
||||
this._prevBoxWidth = boxpanels_width;
|
||||
more_section.is(':visible') && (boxpanels_width -= more_section_width);
|
||||
|
||||
var boxpanels_right = boxpanels_offset.left + boxpanels_width;
|
||||
|
||||
if (this.$moreBar && this.$moreBar.parent().is(':visible')) {
|
||||
this.$moreBar.parent().css('max-width', Common.Utils.innerWidth());
|
||||
}
|
||||
|
||||
if ((reset || delta<0) && activePanel.width() > boxpanels_width) {
|
||||
if (!more_section.is(':visible')) {
|
||||
more_section.css('display', "");
|
||||
boxpanels_width = this.$boxpanels.width() - parseInt(more_section.css('width'));
|
||||
boxpanels_right = boxpanels_offset.left + boxpanels_width;
|
||||
}
|
||||
|
||||
var last_separator = null,
|
||||
last_group = null,
|
||||
prevchild = this.$moreBar.children();
|
||||
if (prevchild.length>0) {
|
||||
prevchild = $(prevchild[0]);
|
||||
if (prevchild.hasClass('separator'))
|
||||
last_separator = prevchild;
|
||||
if (prevchild.hasClass('group') && prevchild.attr('group-state') == 'open')
|
||||
last_group = prevchild;
|
||||
}
|
||||
|
||||
var items = activePanel.find('> div:not(.more-box)');
|
||||
var need_break = false;
|
||||
for (var i=items.length-1; i>=0; i--) {
|
||||
var item = $(items[i]);
|
||||
if (item.hasClass('group')) {
|
||||
var offset = item.offset(),
|
||||
item_width = item.width(),
|
||||
children = item.children();
|
||||
if (!item.attr('inner-width') && item.attr('group-state') !== 'open') {
|
||||
item.attr('inner-width', item_width);
|
||||
for (var j=children.length-1; j>=0; j--) {
|
||||
var child = $(children[j]);
|
||||
child.attr('inner-width', child.width());
|
||||
}
|
||||
}
|
||||
if ((offset.left > boxpanels_right || children.length==1) && item.attr('group-state') != 'open') {
|
||||
// move group
|
||||
this.$moreBar.prepend(item);
|
||||
if (last_separator) {
|
||||
last_separator.css('display', '');
|
||||
}
|
||||
} else if ( offset.left+item_width > boxpanels_right ) {
|
||||
// move buttons from group
|
||||
for (var j=children.length-1; j>=0; j--) {
|
||||
var child = $(children[j]);
|
||||
if (child.hasClass('.elset')) {
|
||||
this.$moreBar.prepend(item);
|
||||
if (last_separator) {
|
||||
last_separator.css('display', '');
|
||||
}
|
||||
break;
|
||||
} else {
|
||||
var child_offset = child.offset(),
|
||||
child_width = child.width();
|
||||
if (child_offset.left+child_width>boxpanels_right) {
|
||||
if (!last_group) {
|
||||
last_group = $('<div class="group"></div>');
|
||||
this.$moreBar.prepend(last_group);
|
||||
if (last_separator) {
|
||||
last_separator.css('display', '');
|
||||
}
|
||||
}
|
||||
last_group.prepend(child);
|
||||
} else {
|
||||
need_break = true;
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
if (item.children().length<1) { // all buttons are moved
|
||||
item.remove();
|
||||
last_group && last_group.removeAttr('group-state').attr('inner-width', item.attr('inner-width'));
|
||||
last_group = null;
|
||||
} else {
|
||||
last_group && last_group.attr('group-state', 'open') && item.attr('group-state', 'open');
|
||||
}
|
||||
if (need_break)
|
||||
break;
|
||||
} else {
|
||||
break;
|
||||
}
|
||||
last_separator = null;
|
||||
} else if (item.hasClass('separator')) {
|
||||
this.$moreBar.prepend(item);
|
||||
item.css('display', 'none');
|
||||
last_separator = item;
|
||||
}
|
||||
}
|
||||
} else if ((reset || delta>0) && more_section.is(':visible')) {
|
||||
var last_separator = null,
|
||||
last_group = null,
|
||||
prevchild = activePanel.find('> div:not(.more-box)');
|
||||
var last_width = 0;
|
||||
if (prevchild.length>0) {
|
||||
prevchild = $(prevchild[prevchild.length-1]);
|
||||
if (prevchild.hasClass('separator')) {
|
||||
last_separator = prevchild;
|
||||
last_width = 13;
|
||||
}
|
||||
if (prevchild.hasClass('group') && prevchild.attr('group-state') == 'open')
|
||||
last_group = prevchild;
|
||||
}
|
||||
|
||||
var items = this.$moreBar.children();
|
||||
var active_width = activePanel.width();
|
||||
|
||||
if (items.length>0) {
|
||||
// from more panel to toolbar
|
||||
for (var i=0; i<items.length; i++) {
|
||||
var item = $(items[i]);
|
||||
active_width = activePanel.width();
|
||||
if (item.hasClass('group')) {
|
||||
var islast = false;
|
||||
if (this.$moreBar.children().filter('.group').length == 1) {
|
||||
boxpanels_width = this.$boxpanels.width();
|
||||
islast = true;
|
||||
}
|
||||
|
||||
var item_width = parseInt(item.attr('inner-width') || 0);
|
||||
if (active_width + last_width + item_width < boxpanels_width && item.attr('group-state') != 'open') {
|
||||
// move group
|
||||
more_section.before(item);
|
||||
if (last_separator) {
|
||||
last_separator.css('display', '');
|
||||
}
|
||||
if (this.$moreBar.children().filter('.group').length == 0) {
|
||||
this.hideMoreBtns();
|
||||
more_section.css('display', "none");
|
||||
}
|
||||
} else if ( active_width + last_width < boxpanels_width ) {
|
||||
// move buttons from group
|
||||
var children = item.children();
|
||||
boxpanels_width = this.$boxpanels.width() - more_section_width;
|
||||
for (var j=0; j<children.length; j++) {
|
||||
if (islast && j==children.length-1)
|
||||
boxpanels_width = this.$boxpanels.width();
|
||||
active_width = activePanel.width();
|
||||
var child = $(children[j]);
|
||||
if (child.hasClass('.elset')) { // don't add group - no enough space
|
||||
break;
|
||||
} else {
|
||||
var child_width = parseInt(child.attr('inner-width') || 0) + (!last_group ? 12 : 0);
|
||||
if (active_width+last_width+child_width<boxpanels_width) {
|
||||
if (!last_group) {
|
||||
last_group = $('<div class="group"></div>');
|
||||
more_section.before(last_group);
|
||||
if (last_separator) {
|
||||
last_separator.css('display', '');
|
||||
}
|
||||
}
|
||||
last_group.append(child);
|
||||
} else {
|
||||
need_break = true;
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
if (item.children().length<1) { // all buttons are moved
|
||||
item.remove();
|
||||
last_group && last_group.removeAttr('group-state').attr('inner-width', item.attr('inner-width'));
|
||||
last_group = null;
|
||||
if (this.$moreBar.children().filter('.group').length == 0) {
|
||||
this.hideMoreBtns();
|
||||
more_section.css('display', "none");
|
||||
}
|
||||
} else {
|
||||
last_group && last_group.attr('group-state', 'open') && item.attr('group-state', 'open');
|
||||
}
|
||||
if (need_break)
|
||||
break;
|
||||
} else {
|
||||
break;
|
||||
}
|
||||
last_separator = null; last_width = 0;
|
||||
} else if (item.hasClass('separator')) {
|
||||
more_section.before(item);
|
||||
item.css('display', 'none');
|
||||
last_separator = item;
|
||||
last_width = 13;
|
||||
}
|
||||
}
|
||||
} else {
|
||||
this.hideMoreBtns();
|
||||
more_section.css('display', "none");
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
onTabClick: function (e) {
|
||||
|
|
@ -251,6 +481,12 @@ define([
|
|||
}
|
||||
},
|
||||
|
||||
hideMoreBtns: function() {
|
||||
for (var btn in btnsMore) {
|
||||
btnsMore[btn] && btnsMore[btn].toggle(false);
|
||||
}
|
||||
},
|
||||
|
||||
setTab: function (tab) {
|
||||
var me = this;
|
||||
if ( !tab ) {
|
||||
|
|
@ -263,11 +499,13 @@ define([
|
|||
if ( tab ) {
|
||||
me.$tabs.removeClass('active');
|
||||
me.$panels.removeClass('active');
|
||||
me.hideMoreBtns();
|
||||
|
||||
var panel = this.$panels.filter('[data-tab=' + tab + ']');
|
||||
if ( panel.length ) {
|
||||
this.lastPanel = tab;
|
||||
panel.addClass('active');
|
||||
me.setMoreButton(tab, panel);
|
||||
}
|
||||
|
||||
if ( panel.length ) {
|
||||
|
|
|
|||
|
|
@ -320,6 +320,7 @@ define([
|
|||
toolbar.mnuNoControlsColor.on('click', _.bind(this.onNoControlsColor, this));
|
||||
toolbar.mnuControlsColorPicker.on('select', _.bind(this.onSelectControlsColor, this));
|
||||
$('#id-toolbar-menu-new-control-color').on('click', _.bind(this.onNewControlsColor, this));
|
||||
Common.NotificationCenter.on('more:toggle', _.bind(this.onMoreToggle, this));
|
||||
|
||||
$('#id-save-style-plus, #id-save-style-link', toolbar.$el).on('click', this.onMenuSaveStyle.bind(this));
|
||||
|
||||
|
|
@ -1438,6 +1439,32 @@ define([
|
|||
this.modeAlwaysSetStyle = state;
|
||||
},
|
||||
|
||||
onMoreToggle: function(btn, state, e) {
|
||||
(state) ? this.onMoreShow(btn, e) : this.onMoreHide(btn, e);
|
||||
},
|
||||
|
||||
onMoreHide: function(btn, e) {
|
||||
var moreContainer = btn.panel.parent();
|
||||
if (btn.pressed) {
|
||||
btn.toggle(false, true);
|
||||
}
|
||||
if (moreContainer.is(':visible')) {
|
||||
moreContainer.hide();
|
||||
Common.NotificationCenter.trigger('edit:complete', this.toolbar, btn);
|
||||
}
|
||||
},
|
||||
|
||||
onMoreShow: function(btn, e) {
|
||||
var moreContainer = btn.panel.parent();
|
||||
var target = btn.$el,
|
||||
showxy = target.offset(),
|
||||
right = Common.Utils.innerWidth() - showxy.left - target.width(),
|
||||
top = showxy.top + target.height();
|
||||
|
||||
moreContainer.css({right: right, left: 'auto', top : top});
|
||||
moreContainer.show();
|
||||
},
|
||||
|
||||
onPageSizeClick: function(menu, item, state) {
|
||||
if (this.api && state) {
|
||||
this._state.pgsize = [0, 0];
|
||||
|
|
|
|||
|
|
@ -27,7 +27,7 @@
|
|||
</div>
|
||||
<div class="separator long"></div>
|
||||
</section>
|
||||
<section class="box-panels">
|
||||
<section class="box-panels" style="overflow: hidden;">
|
||||
<section class="panel" data-tab="home">
|
||||
<div class="group">
|
||||
<div class="elset" style="width:265px;">
|
||||
|
|
@ -151,5 +151,11 @@
|
|||
</div>
|
||||
</section>
|
||||
</section>
|
||||
<section class="panel static" style="display: none;">
|
||||
<div class="separator long"></div>
|
||||
<div class="group">
|
||||
<span class="btn-slot text x-huge" id="slot-btn-more"></span>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
</div>
|
||||
|
|
@ -1075,6 +1075,7 @@ define([
|
|||
cls: 'combo-styles',
|
||||
itemWidth: 104,
|
||||
itemHeight: 38,
|
||||
style: 'min-width:145px;',
|
||||
// hint : this.tipParagraphStyle,
|
||||
enableKeyEvents: true,
|
||||
additionalMenuItems: [this.listStylesAdditionalMenuItem],
|
||||
|
|
@ -1169,6 +1170,14 @@ define([
|
|||
});
|
||||
}
|
||||
|
||||
this.btnMore = new Common.UI.Button({
|
||||
id: 'tlbtn-more',
|
||||
cls: 'btn-toolbar x-huge icon-top dropdown-manual',
|
||||
caption: me.capBtnMore,
|
||||
iconCls: 'btn-insertchart',
|
||||
enableToggle: true
|
||||
});
|
||||
|
||||
this.on('render:after', _.bind(this.onToolbarAfterRender, this));
|
||||
} else {
|
||||
Common.UI.Mixtbar.prototype.initialize.call(this, {
|
||||
|
|
@ -1321,6 +1330,7 @@ define([
|
|||
_injectComponent('#slot-img-movefrwd', this.btnImgForward);
|
||||
_injectComponent('#slot-img-movebkwd', this.btnImgBackward);
|
||||
_injectComponent('#slot-img-wrapping', this.btnImgWrapping);
|
||||
_injectComponent('#slot-btn-more', this.btnMore);
|
||||
|
||||
+function injectBreakButtons() {
|
||||
var me = this;
|
||||
|
|
@ -2384,7 +2394,8 @@ define([
|
|||
textNoHighlight: 'No highlighting',
|
||||
mniImageFromStorage: 'Image from Storage',
|
||||
capBtnBlankPage: 'Blank Page',
|
||||
tipBlankPage: 'Insert blank page'
|
||||
tipBlankPage: 'Insert blank page',
|
||||
capBtnMore: 'More'
|
||||
}
|
||||
})(), DE.Views.Toolbar || {}));
|
||||
});
|
||||
|
|
|
|||
|
|
@ -464,9 +464,10 @@
|
|||
margin-left: 2px;
|
||||
}
|
||||
|
||||
#slot-field-styles {
|
||||
section #slot-field-styles {
|
||||
width: 100%;
|
||||
min-width: 160px;
|
||||
padding-right: 12px;
|
||||
}
|
||||
|
||||
#special-paste-container {
|
||||
|
|
|
|||
Loading…
Reference in a new issue