[PE] Fix ComboDataViewShape component
This commit is contained in:
JuliaSvinareva
parent
cd1d4d9ec0
commit
ae611ada76
|
|
@ -96,7 +96,7 @@ define([
|
|||
this.fieldPicker = new Common.UI.DataView({
|
||||
cls: 'field-picker',
|
||||
allowScrollbar: false,
|
||||
itemTemplate: _.template('<div class="item-shape" id="<%= id %>"><svg width="20" height="20" class=\"icon\"><use xlink:href=\"#svg-icon-<%= data.shapeType %>\"></use></svg></div>'),
|
||||
itemTemplate: _.template('<div class="item-shape" id="<%= id %>" data-shape="<%= data.shapeType %>"><svg width="20" height="20" class=\"icon\"><use xlink:href=\"#svg-icon-<%= data.shapeType %>\"></use></svg></div>'),
|
||||
delayRenderTips: this.delayRenderTips
|
||||
});
|
||||
|
||||
|
|
@ -124,24 +124,45 @@ define([
|
|||
},
|
||||
|
||||
fillComboView: function (collection) {
|
||||
var newStyles = [],
|
||||
store = collection.at(0).get('groupStore').toJSON(),
|
||||
var groups = collection.toJSON(),
|
||||
recents = Common.localStorage.getItem(this.appPrefix + 'recent-shapes');
|
||||
recents = recents ? JSON.parse(recents) : [];
|
||||
|
||||
if (recents.length > 0) {
|
||||
for(var i = 0; i < recents.length && i < 12; i ++) {
|
||||
newStyles.push(recents[i]);
|
||||
if (recents.length < 12) {
|
||||
var count = 12 - recents.length;
|
||||
|
||||
var addItem = function (rec) {
|
||||
var item = rec.toJSON(),
|
||||
model = {
|
||||
data: item.data,
|
||||
tip: item.tip,
|
||||
allowSelected: item.allowSelected,
|
||||
selected: false
|
||||
};
|
||||
recents.push(model);
|
||||
};
|
||||
|
||||
for (var j = 0; j < groups.length && count > 0; j++) {
|
||||
var groupStore = groups[j].groupStore;
|
||||
if (j === 0) {
|
||||
addItem(groupStore.at(1));
|
||||
count--;
|
||||
if (count > 0) {
|
||||
addItem(groupStore.at(2));
|
||||
count--;
|
||||
}
|
||||
} else if (j !== 3 && j !== 6 && j !== 7) {
|
||||
addItem(groupStore.at(0));
|
||||
count--;
|
||||
if (count > 0) {
|
||||
addItem(groupStore.at(1));
|
||||
count--;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (newStyles.length < 12) {
|
||||
for(var j = newStyles.length; j < 12; j ++) {
|
||||
newStyles.push(store[j]);
|
||||
}
|
||||
}
|
||||
|
||||
this.fieldPicker.store.reset(newStyles);
|
||||
this.fieldPicker.store.reset(recents);
|
||||
|
||||
this.fieldPicker.on('item:select', _.bind(this.onFieldPickerSelect, this));
|
||||
this.fieldPicker.on('item:click', _.bind(this.onFieldPickerClick, this));
|
||||
|
|
@ -245,17 +266,20 @@ define([
|
|||
}
|
||||
if (!model) {
|
||||
store.pop();
|
||||
} else {
|
||||
store.remove([model]);
|
||||
store.unshift([record]);
|
||||
}
|
||||
store.unshift([record]);
|
||||
},
|
||||
|
||||
setComboViewRecActive: function (isActive) {
|
||||
activateRecord: function (record) {
|
||||
var type = record.get('data').shapeType;
|
||||
if (this.isRecordActive)
|
||||
$(this.cmpEl.find('.field-picker .item')).removeClass('active');
|
||||
$(this.cmpEl.find('.field-picker .item')[0])[isActive ? 'addClass' : 'removeClass']('active');
|
||||
this.isRecordActive = isActive;
|
||||
this.deactivateRecords();
|
||||
$(this.cmpEl.find("[data-shape='" + type + "']")).parent().addClass('active');
|
||||
this.isRecordActive = true;
|
||||
},
|
||||
|
||||
deactivateRecords: function () {
|
||||
$(this.cmpEl.find('.field-picker .item')).removeClass('active');
|
||||
},
|
||||
|
||||
isComboViewRecActive: function () {
|
||||
|
|
@ -364,11 +388,13 @@ define([
|
|||
this.trigger('select', this, record);*/
|
||||
},
|
||||
|
||||
onFieldPickerClick: function(dataView, itemView, record) {
|
||||
onFieldPickerClick: function(dataView, item, record) {
|
||||
if (this.disabled) return;
|
||||
|
||||
var isActive = item.$el.hasClass('active');
|
||||
|
||||
if (!this.isSuspendEvents)
|
||||
this.trigger('click', this, record);
|
||||
this.trigger('click', this, record, isActive);
|
||||
|
||||
if (this.options.hint) {
|
||||
var tip = this.cmpEl.data('bs.tooltip');
|
||||
|
|
@ -378,6 +404,10 @@ define([
|
|||
tip.hide();
|
||||
}
|
||||
}
|
||||
|
||||
if (!isActive) {
|
||||
this.activateRecord(record);
|
||||
}
|
||||
},
|
||||
|
||||
onMenuPickerClick: function(dataView, itemView, record) {
|
||||
|
|
@ -385,6 +415,8 @@ define([
|
|||
|
||||
if (!this.isSuspendEvents)
|
||||
this.trigger('click', this, record);
|
||||
|
||||
this.activateRecord(record);
|
||||
},
|
||||
|
||||
onPickerItemContextMenu: function(dataView, itemView, record, e) {
|
||||
|
|
|
|||
|
|
@ -1317,7 +1317,7 @@ define([
|
|||
template: _.template([
|
||||
'<div class="dataview inner" style="<%= style %>">',
|
||||
'<% _.each(options.groupsWithRecent, function(group, index) { %>',
|
||||
'<div class="grouped-data <% if (index === 0) { %> recent-group <% } %> " id="<%= group.id %>" <% if (!options.recentShapes && index === 0) { %> style="display: none;" <% } %>>',
|
||||
'<div class="grouped-data <% if (index === 0) { %> recent-group <% } %> " id="<%= group.id %>" >',
|
||||
'<% if (!_.isEmpty(group.groupName)) { %>',
|
||||
'<div class="group-description">',
|
||||
'<span><%= group.groupName %></span>',
|
||||
|
|
@ -1356,7 +1356,45 @@ define([
|
|||
|
||||
me.recentShapes = recentArr;
|
||||
|
||||
recentStore.add(recentArr);
|
||||
// Add default recent
|
||||
|
||||
if (me.recentShapes.length < 12) {
|
||||
var count = 12 - me.recentShapes.length,
|
||||
defaultArr = [];
|
||||
|
||||
var addItem = function (rec) {
|
||||
var item = rec.toJSON(),
|
||||
model = {
|
||||
data: item.data,
|
||||
tip: item.tip,
|
||||
allowSelected: item.allowSelected,
|
||||
selected: false
|
||||
};
|
||||
defaultArr.push(model);
|
||||
};
|
||||
|
||||
for (var i = 0; i < me.groups.length && count > 0; i++) {
|
||||
var groupStore = me.groups[i].groupStore;
|
||||
if (i === 0) {
|
||||
addItem(groupStore.at(1));
|
||||
count--;
|
||||
if (count > 0) {
|
||||
addItem(groupStore.at(2));
|
||||
count--;
|
||||
}
|
||||
} else if (i !== 3 && i !== 6 && i !== 7) {
|
||||
addItem(groupStore.at(0));
|
||||
count--;
|
||||
if (count > 0) {
|
||||
addItem(groupStore.at(1));
|
||||
count--;
|
||||
}
|
||||
}
|
||||
}
|
||||
me.recentShapes = me.recentShapes.concat(defaultArr);
|
||||
}
|
||||
|
||||
recentStore.add(me.recentShapes);
|
||||
me.groups.unshift({
|
||||
groupName : options.textRecentlyUsed,
|
||||
groupStore : recentStore,
|
||||
|
|
@ -1377,9 +1415,6 @@ define([
|
|||
Common.UI.DataViewSimple.prototype.initialize.call(this, options);
|
||||
|
||||
me.parentMenu.on('show:before', function() { me.updateRecents(); });
|
||||
if (me.recentShapes.length > 0 && !me.cmpEl.find('.recent-group').is(':visible')) {
|
||||
me.cmpEl.find('.recent-group').show();
|
||||
}
|
||||
},
|
||||
onAfterShowMenu: function(e) {
|
||||
var me = this;
|
||||
|
|
@ -1490,8 +1525,8 @@ define([
|
|||
selected: false
|
||||
};
|
||||
me.recentShapes.unshift(model);
|
||||
if (me.recentShapes.length > 14) {
|
||||
me.recentShapes.splice(14, 1);
|
||||
if (me.recentShapes.length > 12) {
|
||||
me.recentShapes.splice(12, 1);
|
||||
}
|
||||
Common.localStorage.setItem(this.appPrefix + 'recent-shapes', JSON.stringify(me.recentShapes));
|
||||
me.recentShapes = undefined;
|
||||
|
|
|
|||
|
|
@ -188,16 +188,20 @@ define([
|
|||
btn_id = cmp.closest('button').attr('id');
|
||||
if (btn_id===undefined)
|
||||
btn_id = cmp.closest('.btn-group').attr('id');
|
||||
if (btn_id===undefined)
|
||||
btn_id = cmp.closest('.combo-dataview').attr('id');
|
||||
|
||||
if (cmp.attr('id') != 'editor_sdk' && cmp_sdk.length<=0) {
|
||||
if ( me.toolbar.btnsInsertText.pressed() && !me.toolbar.btnsInsertText.contains(btn_id) ||
|
||||
me.toolbar.btnsInsertShape.pressed() && !me.toolbar.btnsInsertShape.contains(btn_id) )
|
||||
me.toolbar.btnsInsertShape.pressed() && !me.toolbar.btnsInsertShape.contains(btn_id) ||
|
||||
me.toolbar.cmbInsertShape.isComboViewRecActive() && me.toolbar.cmbInsertShape.id !== btn_id)
|
||||
{
|
||||
me._isAddingShape = false;
|
||||
|
||||
me._addAutoshape(false);
|
||||
me.toolbar.btnsInsertShape.toggle(false, true);
|
||||
me.toolbar.btnsInsertText.toggle(false, true);
|
||||
me.toolbar.cmbInsertShape.deactivateRecords();
|
||||
Common.NotificationCenter.trigger('edit:complete', me.toolbar);
|
||||
} else
|
||||
if ( me.toolbar.btnsInsertShape.pressed() && me.toolbar.btnsInsertShape.contains(btn_id) ) {
|
||||
|
|
@ -219,7 +223,7 @@ define([
|
|||
this.toolbar.btnsInsertText.toggle(false, true);
|
||||
|
||||
if ( this.toolbar.cmbInsertShape.isComboViewRecActive() )
|
||||
this.toolbar.cmbInsertShape.setComboViewRecActive(false);
|
||||
this.toolbar.cmbInsertShape.deactivateRecords();
|
||||
|
||||
$(document.body).off('mouseup', checkInsertAutoshape);
|
||||
};
|
||||
|
|
@ -2052,10 +2056,13 @@ define([
|
|||
}
|
||||
me.toolbar.cmbInsertShape.openButton.menu.on('show:before', onComboShowBefore);
|
||||
me.toolbar.cmbInsertShape.fillComboView(collection);
|
||||
me.toolbar.cmbInsertShape.on('click', function (btn, record) {
|
||||
me.toolbar.cmbInsertShape.on('click', function (btn, record, cancel) {
|
||||
if (cancel) {
|
||||
me._addAutoshape(false);
|
||||
return;
|
||||
}
|
||||
if (record) {
|
||||
me.toolbar.cmbInsertShape.updateComboView(record);
|
||||
me.toolbar.cmbInsertShape.setComboViewRecActive(true);
|
||||
me.onInsertShape(record.get('data').shapeType);
|
||||
}
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in a new issue