Skip to content

Instantly share code, notes, and snippets.

@vgrish
Created December 17, 2017 10:36
Show Gist options
  • Save vgrish/9433f56803379bcb4462723fcecca47a to your computer and use it in GitHub Desktop.
Save vgrish/9433f56803379bcb4462723fcecca47a to your computer and use it in GitHub Desktop.
Ext.override(Ext.Component, {
findParentByType: function(type){
if (Ext.isFunction(type)){
return this.findParentBy(function(p){
return p instanceof type;
});
} else {
return (Ext.isFunction(Ext.ComponentMgr.types[type]))?
this.findParentByType(Ext.ComponentMgr.types[type]):
null;
}
}
});
modclassvar.panel.Variable = function (config) {
config = config || {};
this.exp = new Ext.grid.RowExpander({
expandOnDblClick: false,
enableCaching: false,
tpl: new Ext.XTemplate(
'<tpl for=".">',
'<table class="modclassvar-expander"><tbody>',
'<tpl if="description">',
'<tr>',
'<td><b>' + _('modclassvar_description') + ': </b>{description}</td>',
'</tr>',
'</tpl>',
'<tpl if="values">',
'{values:this.renderValues}',
'</tpl>',
' </tbody></table>',
'</tpl>',
{
compiled: true,
renderValues: function (value, record) {
var values = [];
var tmp = [];
var pf = MODx.config['modclassvar_field_prefix'] || 'modclassvar.';
var rx = new RegExp(pf.replace(".", ""));
for (var i in record) {
if (!record.hasOwnProperty(i)) {
continue;
}
if (!rx.test(i)) {
continue;
}
var name = i.split('.');
name = name[1];
switch (true) {
case i == pf + name + '.name':
tmp.push({name: name, title: record[i]});
break;
case i == pf + name && !!record[i] && typeof record[i] === 'object':
tmp.push({name: name, value: record[i].join(', ')});
break;
case i == pf + name + '.value' && tmp.length == 1:
tmp.push({name: name, value: record[i]});
break;
}
if (tmp.length == 2 && tmp[0]['name'] == tmp[1]['name']) {
if (tmp[0]['value'] && !!tmp[0]['value']) {
values.push(String.format('<tr><td><b>{0}: </b>{1}</td></tr>',tmp[1]['title'],tmp[0]['value']));
}
else if (!!tmp[1]['value']) {
values.push(String.format('<tr><td><b>{0}: </b>{1}</td></tr>',tmp[0]['title'],tmp[1]['value']));
}
tmp = [];
}
}
return values.join('');
}
}
)
});
this.exp.on('beforeexpand', function (rowexpander, record, body, rowIndex) {
record['data']['json'] = record['json'];
record['data'] = Ext.applyIf(record['data'], record['json']);
return true;
});
this.sm = new Ext.grid.CheckboxSelectionModel({
singleSelect: true,
listeners: {
rowselect: function(sm, rowIndex, record) {
Ext.each(sm.grid.findParentByType('modx-tabs').findByType('modx-tabs'),function(t)
{
t.fireEvent('modClassVarFormReload', sm, t, rowIndex, record);
});
},
selectionchange: function(sm) {
Ext.each(sm.grid.findParentByType('modx-tabs').findByType('modx-tabs'),function(t)
{
t.fireEvent('modClassVarFormReload', sm, t, null, null);
});
}
}
});
this.grid = new MODx.grid.Grid({
url: modclassvar.config.connector_url,
baseParams: {
action: 'mgr/variable/getlist',
class: config.class || 'modResource',
cid: config.record.id || 0,
sort: 'rank',
dir: 'asc'
},
paging: true,
pageSize: 10,
remoteSort: true,
viewConfig: {
forceFit: true,
enableRowBody: true,
autoFill: true,
showPreview: true,
scrollOffset: 0
},
autoHeight: true,
sm: this.sm,
plugins: [this.exp],
fields: this.getGridFields(config),
columns: this.getColumns(config),
tbar: this.getTopBar(config),
listeners: {
viewready: function (grid) {
grid.getSelectionModel().selectRow(0);
}
},
cls: 'modclassvar-grid',
bodyCssClass: 'grid-with-buttons',
getMenu:this.getMenu,
onClick:this.onClick,
remove:this.remove,
setAction:this.setAction,
_getSelectedIds: this._getSelectedIds,
});
this.tab = new MODx.Tabs({
autoHeight: true,
deferredRender: false,
forceLayout: true,
style: {
'margin-top': '-28px'
},
cls: 'modclassvar-variable-field-tab',
defaults: {
autoHeight: true,
layout: 'form',
defaults: {anchor: '100%'},
deferredRender: false,
forceLayout: true,
labelAlign: 'top'
},
items: [],
listeners: {
modClassVarFormReload: function (sm, t, rowIndex, record) {
if (!sm) {
t.removeAll();
t.setActiveTab(0);
}
else if (t && sm.last === false) {
t.removeAll();
t.add({
title: '',
items: this.getFormField(this.config, record)
});
t.setActiveTab(0);
}
else if (t && record) {
t.removeAll();
t.add({
title: '',
items: this.getFormField(this.config, record)
});
t.setActiveTab(0);
}
if (t && record) {
MODx.Ajax.request({
url: modclassvar.config.connector_url,
params: {
action: 'mgr/variable/get',
class: this.config.class || 'modResource',
cid: record.json['cid'] || 0,
key: record.json['key'] || 0,
},
listeners: {
success: {
fn: function (r) {
var f = this.findParentByType('form');
if (f && r.object) {
var field = f.getForm().findField('modclassvar');
if (field) {
field.setValue(r.object.modclassvar);
field.fireEvent('modClassVarFieldSet', r);
}
}
},
scope: this
}
}
});
}
},
scope: this
}
});
Ext.apply(config, {
border: false,
layout: 'column',
cls: 'modclassvar-panel-variable',
defaults: {msgTarget: 'under', border: false},
items: this.getMainItems(config),
});
modclassvar.panel.Variable.superclass.constructor.call(this, config);
this.addEvents('modClassVarFormReload');
};
Ext.extend(modclassvar.panel.Variable, MODx.Panel, {
getFormField: function (config, record) {
record = record || {json: {msg: null,cid: null}};
record.json['actions'] = '';
var field = [];
var add = {
msg: {
html: '<p>' + _('modclassvar_combo_select') + '</p>',
style: {
'margin-top': '15px'
}
},
cid: {
xtype: 'numberfield',
hidden: true
},
key: {
xtype: 'textfield',
hidden: true
},
type: {
xtype: 'textfield',
disabled: true
}
};
field.push({
xtype: 'toolbar',
cls:'modclassvar-field-form-toolbar',
items: [{
cls: 'modclassvar-button-form-reset',
text: _('reset'),
handler: this.resetField,
scope: this
},'->', {
cls: 'modclassvar-button-form-save',
text: _('save'),
handler: this.saveField,
scope: this
}, {
xtype: 'spacer',
style: 'width:1px;'
}]
});
for (var item in record.json) {
if (!record.json.hasOwnProperty(item)) {
continue;
}
if (add[item]) {
Ext.applyIf(add[item], {
name: item,
value: record.json[item],
});
field.push(add[item]);
}
}
if (!record.json['type']) {
return field;
}
var cnf = Ext.util.JSON.decode(record.json['config'] || '{}');
/** */
Ext.applyIf(cnf, {
xtype: record.json['type'],
class: this.config.class || 'modResource',
cid: record.json['cid'] || 0,
key: record.json['key'] || 0,
name: 'modclassvar',
hiddenName: 'modclassvar',
listeners: {
modClassVarFieldSet: function () {
if (typeof TinyMCERTE != 'undefined') {
TinyMCERTE.loadForTVs();
}
},
}
});
field.push(cnf);
return field;
},
resetField:function (config) {
var f = this.findParentByType('form').getForm();
var record = f.getFieldValues();
MODx.Ajax.request({
url: modclassvar.config.connector_url,
params: {
action: 'mgr/variable/save',
class: this.config.class || 'modResource',
cid: record['cid'] || 0,
key: record['key'] || 0,
modclassvar: ''
},
listeners: {
success: {
fn: function (response) {
f.setValues({modclassvar: ''});
},
scope: this
},
failure: {
fn: function (response) {
MODx.msg.alert(_('error'), response.message);
},
scope: this
}
}
});
},
saveField: function (config) {
var f = this.findParentByType('form').getForm();
var record = f.getFieldValues();
MODx.Ajax.request({
url: modclassvar.config.connector_url,
params: {
action: 'mgr/variable/save',
class: this.config.class || 'modResource',
cid: record['cid'] || 0,
key: record['key'] || 0,
modclassvar: record['modclassvar']
},
listeners: {
success: {
fn: function (response) {
},
scope: this
},
failure: {
fn: function (response) {
MODx.msg.alert(_('error'), response.message);
},
scope: this
}
}
});
},
getMainItems: function (config) {
return [{
columnWidth: 0.60,
layout: 'fit',
items: this.grid
},{
columnWidth: 0.4,
layout: 'fit',
items: this.tab
}, {
columnWidth: 1,
layout: 'fit',
html:"<div class='modclassvar-html-mg15'>"
}];
},
getGridFields: function (config) {
var fields = [
'id', 'class', 'cid', 'key', 'name', 'value', 'actions'
];
return fields;
},
getColumns: function (config) {
var columns = [this.exp, this.sm];
var add = {
class: {
width: 15,
hidden: true,
sortable: true,
},
cid: {
width: 10,
hidden: true,
sortable: true,
},
key: {
width: 10,
sortable: true,
},
name: {
width: 15,
sortable: true,
},
value: {
width: 15,
sortable: true,
hidden: true,
},
actions: {
width: 5,
sortable: false,
renderer: modclassvar.tools.renderActions,
id: 'actions'
}
};
var fields = this.getGridFields();
for (var i = 0; i < fields.length; i++) {
var field = fields[i];
if (add[field]) {
Ext.applyIf(add[field], {
header: _('modclassvar_header_' + field),
tooltip: _('modclassvar_tooltip_' + field),
dataIndex: field
});
columns.push(add[field]);
}
}
return columns;
},
getTopBar: function (config) {
var tbar1 = [];
var tbar2 = [];
var component1 = ['toggle', 'field', 'left', 'type', 'section', 'spacer'];
var component2 = ['tabfield'];
var add = {
toggle: {
text: '<i class="icon icon-cog"></i>',
handler: this._toggleExtra,
scope: this
},
field: {
xtype: 'panel',
width: 200,
layout: 'fit',
cls: 'modclassvar-padding-fix',
items: [{
xtype: 'modclassvar-combo-field',
id: 'modclassvar_option',
name: 'option',
emptyText: _('modclassvar_var'),
width: 200,
custm: true,
clear: true,
active: true,
class: config.class || 'modResource',
cid: config.record.id || 0,
listeners: {
select: {
fn: this._addVariable,
scope: this
}
}
}]
},
/*type: {
xtype: 'panel',
width: 200,
layout: 'fit',
cls: 'modclassvar-padding-fix',
items: [{
xtype: 'modclassvar-combo-field-type',
name: 'type',
emptyText: _('modclassvar_type'),
width: 200,
custm: true,
clear: true,
addall: true,
value: '',
listeners: {
select: {
fn: this._filterByCombo,
scope: this
},
afterrender: {
fn: this._filterByCombo,
scope: this
}
}
}]
},*/
section: {
xtype: 'panel',
width: 200,
layout: 'fit',
cls: 'modclassvar-padding-fix',
items: [{
xtype: 'modclassvar-combo-section',
name: 'section',
emptyText: _('modclassvar_section'),
width: 200,
custm: true,
clear: true,
addall: true,
value: '',
listeners: {
select: {
fn: this._filterByCombo,
scope: this
},
afterrender: {
fn: this._filterByCombo,
scope: this
}
}
}]
},
tabfield:{
xtype: 'modx-tabs',
collapsible: true,
collapsed: false,
titleCollapse:true,
defaults: {
autoHeight: true,
layout: 'fit',
defaults: {anchor: '100%'},
deferredRender: false,
forceLayout: true,
},
cls: 'modclassvar-tab-field',
items: [{
title: _('modclassvar_field'),
xtype: 'modclassvar-grid-field',
listeners: {
afterrender:{
fn: function (field) {
this._toggleExtra();
},
scope: this
},
},
}]
},
left: '->',
spacer: {
xtype: 'spacer',
width: '1px'
}
};
component1.filter(function(item) {
if (add[item]) {
tbar1.push(add[item]);
}
});
component2.filter(function(item) {
if (add[item]) {
tbar2.push(add[item]);
}
});
var items = [];
if (tbar1.length > 0) {
items.push(new Ext.Toolbar(tbar1));
}
if (tbar2.length > 0) {
items.push(new Ext.Panel({items:tbar2}));
}
return new Ext.Panel({items:items});
},
_toggleExtra: function () {
Ext.each(Ext.query('.modclassvar-tab-field .x-tool-toggle', this.getEl().dom),function(t)
{
var o = Ext.get(t.id);
if (o) o.dom.click();
});
},
_addVariable: function(combo, row) {
if (!row) {
return false;
}
combo.reset();
MODx.Ajax.request({
url: modclassvar.config.connector_url,
params: {
action: 'mgr/variable/create',
class: this.config.class || 'modResource',
cid: this.config.record.id || 0,
key: row.json['key'] || 0,
},
listeners: {
success: {
fn: function(r) {
combo.getStore().reload();
this.grid.refresh();
},
scope: this
}
}
});
},
getMenu: function (grid, rowIndex) {
var ids = this._getSelectedIds();
var row = grid.getStore().getAt(rowIndex);
var menu = modclassvar.tools.getMenu(row.data['actions'], this, ids);
this.addContextMenuItem(menu);
},
onClick: function(e) {
var elem = e.getTarget();
if (elem.nodeName == 'BUTTON') {
var row = this.getSelectionModel().getSelected();
if (typeof(row) != 'undefined') {
var action = elem.getAttribute('action');
if (action == 'showMenu') {
var ri = this.getStore().find('id', row.id);
return this._showMenu(this, ri, e);
} else if (typeof this[action] === 'function') {
this.menu.record = row.data;
return this[action](this, e);
}
}
}
return this.processEvent('click', e);
},
setAction: function (method, field, value) {
var ids = this._getSelectedIds();
if (!ids.length && (field !== 'false')) {
return false;
}
MODx.Ajax.request({
url: modclassvar.config.connector_url,
params: {
action: 'mgr/variable/multiple',
method: method,
field_name: field,
field_value: value,
ids: Ext.util.JSON.encode(ids)
},
listeners: {
success: {
fn: function () {
this.refresh();
},
scope: this
},
failure: {
fn: function (response) {
MODx.msg.alert(_('error'), response.message);
},
scope: this
}
}
})
},
remove: function () {
Ext.MessageBox.confirm(
_('modclassvar_action_remove'),
_('modclassvar_confirm_remove'),
function (val) {
if (val == 'yes') {
this.setAction('remove');
}
},
this
);
},
_filterByCombo: function (cb) {
if (cb.name == 'section') {
var comboOption = Ext.getCmp('modclassvar_option');
if (comboOption) {
comboOption.baseParams.section = cb.getValue();
if (!!comboOption.pageTb) {
comboOption.pageTb.show();
}
comboOption.store.load();
}
}
this.grid.getStore().baseParams[cb.name] = cb.value;
this.grid.getBottomToolbar().changePage(1);
},
_doSearch: function (tf) {
this.grid.getStore().baseParams.query = tf.getValue();
this.grid.getBottomToolbar().changePage(1);
},
_clearSearch: function () {
this.grid.getStore().baseParams.query = '';
this.grid.getBottomToolbar().changePage(1);
},
_getSelectedIds: function () {
var ids = [];
var selected = this.getSelectionModel().getSelections();
for (var i in selected) {
if (!selected.hasOwnProperty(i)) {
continue;
}
ids.push([selected[i]['json']['class'],selected[i]['json']['cid'],selected[i]['json']['key']]);
}
return ids;
}
});
Ext.reg('modclassvar-panel-variable', modclassvar.panel.Variable);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment