Your IP : 18.224.32.70
;(function () {
'use strict';
BX.namespace('BX.UI');
BX.UI.AccessRights.ColumnItem = function(options) {
this.grid = options.grid ? options.grid : null;
this.id = options.id ? options.id : null;
this.type = options.type ? options.type : null;
this.text = options.text ? options.text : null;
this.hint = options.hint ? options.hint : null;
this.variables = options.variables ? options.variables : [];
this.userGroup = options.userGroup;
this.access = options.access ? options.access : null;
this.currentParam = options.currentParam;
this.controller = options.controller ? options.controller : null;
this.openPopupEvent = options.openPopupEvent;
this.popupContainer = options.popupContainer;
this.accessCodes = options.accessCodes ? options.accessCodes : [];
this.isModify = false;
this.popupHelper = null;
this.popupHint = null;
this.popupTimer = null;
this.popupConfirm = null;
this.popupUsers = null;
this.identificator = 'col-' + Math.random();
this.updatedUsers = [];
this.layout = {
container: null,
variablesValue: null,
role: null,
roleInput: null,
roleValue: null,
changer: null,
switcher: null,
controller: null,
controllerMenu: null,
controllerLink: null,
addUserToRole: null,
members: null
};
this.column = options.column;
this.popupMenu = null;
this.switcher = null;
this.bindEvents();
};
BX.UI.AccessRights.ColumnItem.prototype = {
bindEvents: function()
{
if(this.type === 'role')
{
BX.bind(window, 'click', function(ev) {
if(ev.target === this.layout.role ||
BX.findParent(ev.target, {
className: 'ui-access-rights-role'
}))
{
return;
}
this.updateRole();
this.offRoleEditMode();
}.bind(this));
}
if(this.type === 'toggler')
{
BX.addCustomEvent('BX.UI.AccessRights:reset', this.offChanger.bind(this));
BX.addCustomEvent('BX.UI.AccessRights:refresh', this.refreshStatus.bind(this));
}
if(this.type === 'members')
{
BX.addCustomEvent('BX.UI.AccessRights:addToAccessCodes', this.addToAccessCodes.bind(this));
BX.addCustomEvent('BX.UI.AccessRights:removeFromAccessCodes', this.removeFromAccessCodes.bind(this));
BX.addCustomEvent('BX.UI.AccessRights:reset', this.resetNewMembers.bind(this));
BX.addCustomEvent('BX.UI.AccessRights:refresh', this.resetNewMembers.bind(this));
}
},
getTextNode: function()
{
return BX.create('div', {
props: {
className: 'ui-access-rights-column-item-text',
},
attrs: {
'data-id': this.id
},
text: this.text,
events: {
mouseenter: function()
{
if(this.type === 'title')
{
this.adjustPopupHelper();
}
}.bind(this),
mouseleave: function()
{
if(this.popupHelper)
{
this.popupHelper.close();
}
if(this.popupTimer)
{
clearTimeout(this.popupTimer);
}
}.bind(this)
}
});
},
getHint: function()
{
if(!this.layout.hint && this.hint)
{
this.popupHint = BX.PopupWindowManager.create(null, null, {
className: 'ui-access-rights-popup-pointer-events',
autoHide: true,
darkMode: true,
content: this.hint,
maxWidth: 280,
offsetTop: 0,
offsetLeft: 8,
angle: true,
animation: 'fading-slide'
});
this.layout.hint = new BX.create('a', {
props: {
className: 'ui-access-rights-column-item-notify'
},
events: {
mouseover: function () {
this.popupHint.setBindElement(this.layout.hint);
this.popupHint.show();
}.bind(this),
mouseleave: function () {
this.popupHint.close();
}.bind(this)
}
});
}
return this.layout.hint;
},
getChanger: function()
{
if(!this.layout.changer)
{
this.layout.changer = BX.create('div', {
props: {
className: 'ui-access-rights-column-item-changer'
}
})
}
return this.layout.changer;
},
adjustChanger: function()
{
if(!this.isModify)
{
this.isModify = true;
}
else
{
this.isModify = false;
}
if(this.layout.changer)
{
this.layout.changer.classList.toggle('ui-access-rights-column-item-changer-on');
}
},
refreshStatus: function()
{
this.layout.changer.classList.remove('ui-access-rights-column-item-changer-on');
},
offChanger: function()
{
if(this.isModify)
{
this.layout.changer.classList.remove('ui-access-rights-column-item-changer-on');
if(this.isModify)
{
this.switcher.isChecked() ? this.switcher.check(false) : this.switcher.check(true);
}
setTimeout(function()
{
this.layout.changer.classList.remove('ui-access-rights-column-item-changer-on');
}.bind(this))
}
},
addToAccessCodes: function(event)
{
var params = event.data;
if(params.columnId !== this.identificator)
{
return;
}
var key = Object.keys(params.accessCodes)[0];
var type = params.accessCodes[key].toUpperCase();
this.userGroup.accessCodes = Object.keys(this.accessCodes);
var item = params.item;
if(typeof item !== 'undefined' && Object.keys(item).length)
{
this.userGroup.members[key] = {
id: item.entityId,
name: item.name,
avatar: item.avatar,
url: '',
new: true,
type: type.toLowerCase()
};
this.updateMembers();
}
this.userGroup.accessCodes = [];
for(var key in this.userGroup.members)
{
this.userGroup.accessCodes[key] = this.userGroup.members[key].type;
}
},
removeFromAccessCodes: function(event)
{
var params = event.data;
if(params.columnId !== this.identificator)
{
return;
}
var key = Object.keys(params.accessCodes)[0];
delete this.userGroup.members[key];
this.updateMembers();
this.userGroup.accessCodes = [];
for(var key in this.userGroup.members)
{
this.userGroup.accessCodes[key] = this.userGroup.members[key].type;
}
},
getToggler: function()
{
if(!this.switcher)
{
var item = this;
this.switcher = new BX.UI.Switcher(
{
size: 'small',
checked: this.currentParam === '1',
handlers: {
checked: function()
{
BX.onCustomEvent(window, 'BX.UI.AccessRights.ColumnItem:accessOn', item);
},
unchecked: function()
{
BX.onCustomEvent(window, 'BX.UI.AccessRights.ColumnItem:accessOff', item);
},
toggled: function()
{
this.adjustChanger();
BX.onCustomEvent(window, 'BX.UI.AccessRights.ColumnItem:update', item);
}.bind(this)
}
}
);
}
return this.switcher.getNode();
},
getVariables: function()
{
if(!this.layout.variablesValue)
{
this.layout.variablesValue = BX.create('div', {
props: {
className: 'ui-access-rights-column-item-text-link'
},
text: this.variables[0].title,
events: {
click: this.showVariablesPopup.bind(this)
}
})
}
return this.layout.variablesValue;
},
getController: function()
{
if(!this.layout.controller)
{
this.layout.controller = BX.create('div', {
props: {
className: 'ui-access-rights-column-item-controller'
},
children: [
this.layout.controllerLink = BX.create('div', {
props: {
className: 'ui-access-rights-column-item-controller-link'
},
text: BX.message('JS_UI_ACCESSRIGHTS_CREATE_ROLE')
}),
// or arrow for link 'ui-access-rights-column-item-controller-menu'
this.layout.controllerMenu = BX.create('div', {
props: {
className: 'ui-access-rights-column-item-controller-link'
},
text: BX.message('JS_UI_ACCESSRIGHTS_COPY_ROLE'),
events: {
click: function() {
this.getPopupMenu(this.grid.getUserGroups()).show();
}.bind(this)
}
})
],
});
this.layout.controllerLink.addEventListener('click', function() {
BX.onCustomEvent(window, 'BX.UI.AccessRights.ColumnItem:addRole', [
{
id: '0',
title: BX.message('JS_UI_ACCESSRIGHTS_ROLE_NAME'),
accessRights: [],
members: [],
accessCodes: [],
type: 'role'
}
]);
BX.onCustomEvent(window, 'BX.UI.AccessRights.ColumnItem:update', this);
this.grid.lock();
}.bind(this));
}
return this.layout.controller;
},
getPopupMenu: function(options)
{
if(!options)
{
return;
}
var menuItems = [];
options.map(function(data) {
menuItems.push({
text: BX.util.htmlspecialchars(data.title),
onclick: function() {
var accessRightsCopy = Object.assign([], data.accessRights);
var accessCodesCopy = Object.assign([], data.accessCodes);
BX.onCustomEvent(window, 'BX.UI.AccessRights.ColumnItem:copyRole', [
{
id: '0',
title: BX.message('JS_UI_ACCESSRIGHTS_ROLE_NAME'),
accessRights: accessRightsCopy,
accessCodes: accessCodesCopy,
type: 'role',
members: data.members
}
]);
BX.onCustomEvent(window, 'BX.UI.AccessRights.ColumnItem:update', this);
this.popupMenu.destroy();
}.bind(this)
});
}.bind(this));
return this.popupMenu = new BX.PopupMenuWindow(
null,
this.layout.controllerMenu,
menuItems,
{
events: {
onPopupClose: function() {
this.popupMenu.destroy();
this.popupMenu = null;
}.bind(this)
}
}
);
},
showVariablesPopup: function()
{
var menuItems = [];
this.variables.map(function(data) {
menuItems.push({
id: data.id,
text: data.title
});
});
BX.PopupMenu.show(
'ui-access-rights-column-item-popup-variables',
this.layout.variablesValue,
menuItems,
{
autoHide: true,
events : {
onPopupClose: function() {
BX.PopupMenu.destroy('ui-access-rights-column-item-popup-variables');
}.bind(this)
}
}
);
},
getRole: function()
{
if(!this.layout.role)
{
BX.addCustomEvent('BX.UI.AccessRights:preservation', this.updateRole.bind(this));
BX.addCustomEvent('BX.UI.AccessRights:preservation', this.offRoleEditMode.bind(this));
this.layout.role = BX.create('div', {
props: {
className: 'ui-access-rights-role'
},
children: [
this.layout.roleInput = BX.create('input', {
props: {
type: 'text',
className: 'ui-access-rights-role-input',
value: this.text,
placeholder: BX.message('JS_UI_ACCESSRIGHTS_ROLE_NAME')
},
events: {
keydown: function(ev) {
// Enter = keyCode 13
if(ev.keyCode === 13)
{
this.updateRole();
this.offRoleEditMode();
}
}.bind(this),
input: function() {
this.grid.getButtonPanel().show();
}.bind(this)
}
}),
this.layout.roleValue = BX.create('div', {
props: {
className: 'ui-access-rights-role-value',
innerText: this.text
},
}),
BX.create('div', {
props: {
className: 'ui-access-rights-role-controls'
},
children: [
BX.create('div', {
props: {
className: 'ui-access-rights-role-edit'
},
events: {
click: this.onRoleEditMode.bind(this)
}
}),
BX.create('div', {
props: {
className: 'ui-access-rights-role-remove'
},
events: {
click: this.showPopupConfirm.bind(this)
}
})
]
})
]
});
}
return this.layout.role;
},
showPopupConfirm: function()
{
var self = this;
if(!this.popupConfirm)
{
this.popupConfirm = BX.PopupWindowManager.create(null, this.layout.container, {
width: 250,
overlay: true,
contentPadding: 10,
content: BX.message('JS_UI_ACCESSRIGHTS_POPUP_REMOVE_THIS_ROLE'),
animation: 'fading-slide'
});
this.popupConfirm.setButtons([
new BX.PopupWindowCustomButton({
text: BX.message('JS_UI_ACCESSRIGHTS_POPUP_REMOVE'),
className: 'ui-btn ui-btn-sm ui-btn-primary',
events: {
click: function() {
self.popupConfirm.close();
BX.onCustomEvent(window, 'BX.UI.AccessRights.ColumnItem:removeRole', self);
}
}
}),
new BX.PopupWindowCustomButton({
text: BX.message('JS_UI_ACCESSRIGHTS_POPUP_CANCEL'),
className: 'ui-btn ui-btn-sm ui-btn-link',
events: {
click: function() {
self.popupConfirm.close();
}
}
})
]);
}
this.popupConfirm.show();
},
onRoleEditMode: function()
{
this.layout.role.classList.add('ui-access-rights-role-edit-mode');
this.layout.roleInput.focus();
},
updateRole: function()
{
if(
this.layout.roleValue.innerHTML === this.layout.roleInput.value ||
this.layout.roleInput.value === '')
{
return;
}
this.text = this.layout.roleInput.value;
this.userGroup = this.column.getUserGroup();
this.layout.roleValue.innerText = this.layout.roleInput.value;
BX.onCustomEvent(window, 'BX.UI.AccessRights.ColumnItem:updateRole', this);
},
offRoleEditMode: function()
{
this.layout.role.classList.remove('ui-access-rights-role-edit-mode');
},
validateVariables: function()
{
if(typeof this.userGroup.accessCodes === 'undefined')
{
this.userGroup.accessCodes = [];
}
},
getMembers: function()
{
if(!this.layout.members)
{
var members = this.userGroup.members || {};
var membersFragment = document.createDocumentFragment();
var counter = 0;
this.validateVariables();
Object.keys(members).reverse().forEach(function(item) {
counter++;
if(counter < 7)
{
var user = members[item];
var classNew = user.new ? ' ui-access-rights-members-item-new' : '';
var avatarClass = ' ui-icon-common-user';
if(user.type === 'groups')
{
avatarClass = ' ui-icon-common-user-group';
}
if(user.type === 'sonetgroups')
{
avatarClass = ' ui-icon-common-company';
}
if(user.type === 'usergroups')
{
avatarClass = ' ui-icon-common-user-group';
}
membersFragment.appendChild(BX.create('div', {
props: {
className: 'ui-access-rights-members-item' + classNew
},
children: [
user.avatar ? BX.create('a', {
props: {
className: 'ui-access-rights-members-item-avatar',
title: user.name
},
style: {
backgroundImage: 'url(' + encodeURI(user.avatar) + ')',
backgroundSize: 'cover'
}
}) : null,
!user.avatar ? BX.create('a', {
props: {
className: 'ui-icon ui-icon-xs' + avatarClass,
title: user.name,
innerHTML: '<i></i>'
},
}) : null,
]
}));
}
});
this.getAddUserToRole();
membersFragment.appendChild(this.layout.addUserToRole);
this.layout.members = BX.create('div', {
props: {
className: 'ui-access-rights-members'
},
children: [
membersFragment
],
events: {
click: this.adjustPopupUserControl.bind(this)
}
});
}
return this.layout.members;
},
resetNewMembers: function()
{
var newMembers = this.layout.members.querySelectorAll('.ui-access-rights-members-item-new');
newMembers.forEach(function(item) {
item.classList.remove('ui-access-rights-members-item-new');
})
},
adjustPopupUserControl: function()
{
var users = [];
var groups = [];
var departments = [];
var sonetgroups = [];
for (var item in this.userGroup.members)
{
this.userGroup.members[item].key = item;
if (this.userGroup.members[item].type === 'users')
{
users.push(this.userGroup.members[item]);
}
if (this.userGroup.members[item].type === 'groups')
{
groups.push(this.userGroup.members[item]);
}
if (this.userGroup.members[item].type === 'usergroups')
{
groups.push(this.userGroup.members[item]);
}
if (this.userGroup.members[item].type === 'departments')
{
departments.push(this.userGroup.members[item]);
}
if (this.userGroup.members[item].type === 'sonetgroups')
{
sonetgroups.push(this.userGroup.members[item]);
}
}
var counterUsers = [];
for(var key in this.userGroup.members)
{
counterUsers.push(this.userGroup.members[key])
}
if (counterUsers.length === 0)
{
this.showUserSelectorPopup();
return;
}
this.getUserPopup(users, groups, departments, sonetgroups).show();
},
getAddUserToRole: function()
{
if(!this.layout.addUserToRole)
{
this.layout.addUserToRole = BX.create('span', {
props: {
className: 'ui-access-rights-members-item ui-access-rights-members-item-add',
},
attrs: { 'bx-data-column-id': this.identificator }
});
}
return this.layout.addUserToRole;
},
updateMembers: function()
{
this.layout.members.parentNode.removeChild(this.layout.members);
this.layout.members = null;
this.layout.container.appendChild(this.getMembers());
this.grid.getButtonPanel().show();
},
getUserPopupTogglerGroup: function(array, type)
{
var node = BX.create('div', {
props: {
className: 'ui-access-rights-popup-toggler-content ui-access-rights-popup-toggler-content-' + type
}
});
var self = this;
var iconClass = '';
if(type === 'users')
{
iconClass = 'ui-icon-common-user';
}
if(type === 'groups')
{
iconClass = 'ui-icon-common-user-group';
}
if(type === 'sonetgroups' || type === 'departments')
{
iconClass = ' ui-icon-common-company';
}
array.forEach(function(item) {
node.appendChild(BX.create('div', {
props: {
className: 'ui-access-rights-popup-toggler-content-item'
},
children: [
item.avatar ? BX.create('a', {
props: {
className: 'ui-access-rights-popup-toggler-content-item-userpic',
title: item.name
},
style: {
backgroundImage: 'url(' + encodeURI(item.avatar) + ')',
backgroundSize: 'cover'
}
}) : null,
!item.avatar ? BX.create('a', {
props: {
className: 'ui-icon ui-icon-sm ' + iconClass,
title: item.name,
innerHTML: '<i></i>'
},
style: {
margin: '5px 10px'
}
}) : null,
BX.create('div', {
props: {
className: 'ui-access-rights-popup-toggler-content-item-name'
},
text: item.name
}),
BX.create('div', {
props: {
className: 'ui-access-rights-popup-toggler-content-item-remove'
},
text: BX.message('JS_UI_ACCESSRIGHTS_REMOVE'),
events: {
click: function() {
self.userGroup.accessCodes.splice(self.userGroup.accessCodes.indexOf(item.key), 1);
delete self.userGroup.accessCodes[item.key];
delete self.userGroup.members[item.key];
var parent = BX.findParent(this, {
className: 'ui-access-rights-popup-toggler-content'
});
parent.removeChild(this.parentNode);
self.updateMembers();
self.grid.getButtonPanel().show();
}
}
})
]
}))
});
return node;
},
getUserPopup: function(users, groups, departments, sonetgroups)
{
if(!this.popupUsers)
{
users = users || [];
groups = groups || [];
departments = departments || [];
sonetgroups = sonetgroups || [];
BX.create('div', {
props: {
className: 'ui-access-rights-popup-toggler-content-item'
}
});
var content = BX.create('div', {
props: {
className: 'ui-access-rights-popup-toggler'
},
children: [
BX.create('div', {
props: {
className: 'ui-access-rights-popup-toggler-title'
},
children: [
groups.length > 0 ?
BX.create('div', {
props: {
className: 'ui-access-rights-popup-toggler-title-item ui-access-rights-popup-toggler-title-item-active',
},
attrs: {
'data-role': 'ui-access-rights-popup-toggler-content-groups'
},
text: BX.message('JS_UI_ACCESSRIGHTS_USER_GROUPS'),
events: {
click: function() {
activate(this);
adjustSlicker(this);
}
}
}) : null,
departments.length > 0 ?
BX.create('div', {
props: {
className: 'ui-access-rights-popup-toggler-title-item',
},
attrs: {
'data-role': 'ui-access-rights-popup-toggler-content-departments'
},
text: BX.message('JS_UI_ACCESSRIGHTS_DEPARTMENTS'),
events: {
click: function() {
activate(this);
adjustSlicker(this);
}
}
}) : null,
users.length > 0 ?
BX.create('div', {
props: {
className: 'ui-access-rights-popup-toggler-title-item',
},
attrs: {
'data-role': 'ui-access-rights-popup-toggler-content-users'
},
text: BX.message('JS_UI_ACCESSRIGHTS_STAFF'),
events: {
click: function() {
activate(this);
adjustSlicker(this);
}
}
}) : null,
sonetgroups.length > 0 ?
BX.create('div', {
props: {
className: 'ui-access-rights-popup-toggler-title-item',
},
attrs: {
'data-role': 'ui-access-rights-popup-toggler-content-sonetgroups'
},
text: BX.message('JS_UI_ACCESSRIGHTS_SOCNETGROUP'),
events: {
click: function() {
activate(this);
adjustSlicker(this);
}
}
}) : null,
BX.create('div', {
props: {
className: 'ui-access-rights-popup-toggler-title-slicker'
}
}),
]
}),
groups.length > 0 ? this.getUserPopupTogglerGroup(groups, 'groups') : null,
departments.length > 0 ? this.getUserPopupTogglerGroup(departments, 'departments') : null,
users.length > 0 ? this.getUserPopupTogglerGroup(users, 'users') : null,
sonetgroups.length > 0 ? this.getUserPopupTogglerGroup(sonetgroups, 'sonetgroups') : null,
BX.create('div', {
props: {
className: 'ui-access-rights-popup-toggler-footer'
},
children: [
BX.create('div', {
props: {
className: 'ui-access-rights-popup-toggler-footer-link'
},
text: BX.message('JS_UI_ACCESSRIGHTS_ADD'),
events: {
click: function(ev) {
this.popupUsers.close();
this.showUserSelectorPopup();
BX.PreventDefault(ev);
}.bind(this)
}
})
]
})
]
});
var adjustSlicker = function(node) {
if(!BX.type.isDomNode(node))
{
node = content.querySelector('.ui-access-rights-popup-toggler-title-item-active');
};
var slicker = content.querySelector('.ui-access-rights-popup-toggler-title-slicker');
slicker.style.left = node.offsetLeft + 'px';
slicker.style.width = node.offsetWidth + 'px';
};
var activate = function(node) {
var titles = content.querySelectorAll('.ui-access-rights-popup-toggler-title-item');
var contents = content.querySelectorAll('.ui-access-rights-popup-toggler-content');
var target = content.querySelector('.' + node.getAttribute('data-role'));
titles.forEach(function(item) {
item.classList.remove('ui-access-rights-popup-toggler-title-item-active')
});
contents.forEach(function(item) {
item.style.display = 'none';
});
target.style.display = 'block';
node.classList.add('ui-access-rights-popup-toggler-title-item-active')
};
this.popupUsers = BX.PopupWindowManager.create(null, this.layout.addUserToRole, {
// width: 400,
contentPadding: 10,
animation: 'fading-slide',
content: content,
padding: 0,
offsetTop: 5,
angle: {
position: 'top',
offset: 35,
},
autoHide: true,
closeEsc: true,
events: {
onPopupShow: function() {
setTimeout(function() {
var firstActiveNode = content.querySelector('.ui-access-rights-popup-toggler-title-item');
if(!firstActiveNode)
{
return;
}
firstActiveNode.classList.add('ui-access-rights-popup-toggler-title-item-active');
adjustSlicker(firstActiveNode);
});
},
onPopupClose: function() {
this.popupUsers.destroy();
this.popupUsers = null;
}.bind(this)
}
});
}
return this.popupUsers;
},
showUserSelectorPopup: function()
{
var selectorInstance = BX.Main
.selectorManagerV2.controls[this.popupContainer].selectorInstance;
selectorInstance.itemsSelected = {};
BX.onCustomEvent(this.openPopupEvent, [{
id: this.popupContainer,
bindNode: this.layout.addUserToRole
}]);
BX.onCustomEvent('BX.Main.SelectorV2:reInitDialog', [{
selectorId: this.popupContainer,
selectedItems: this.userGroup.accessCodes
}]);
},
adjustPopupHelper: function()
{
var set = this.layout.container.cloneNode(true);
set.style.position = 'absolute';
set.style.display = 'inline';
set.style.height = '0';
document.body.appendChild(set);
setTimeout(function() {
set.parentNode.removeChild(set);
});
if(set.offsetWidth > this.layout.container.offsetWidth)
{
this.getPopupHelper().show();
}
},
getPopupHelper: function()
{
if(!this.popupHelper)
{
this.popupHelper = BX.PopupWindowManager.create(null, this.layout.container, {
autoHide: true,
darkMode: true,
content: this.text,
maxWidth: this.layout.container.offsetWidth,
offsetTop: -9,
offsetLeft: 5,
animation: 'fading-slide'
});
}
return this.popupHelper;
},
render: function()
{
var changerNode = this.getChanger();
var controlNode;
if(this.type === 'toggler')
{
controlNode = this.getToggler();
changerNode.appendChild(controlNode);
}
if(this.type === 'variables')
{
controlNode = this.getVariables();
changerNode.appendChild(controlNode);
}
if(!this.layout.container)
{
this.layout.container = BX.create('div', {
props: {
className: 'ui-access-rights-column-item'
},
children: [
this.type === 'role' ? this.getRole() : null,
this.type === 'members' ? this.getMembers() : null,
this.type === 'title' ? this.getTextNode() : null,
this.hint ? this.getHint() : null,
this.type === 'userGroupTitle' ? this.getTextNode() : null,
this.controller ? this.getController() : null,
this.type === 'variables' || this.type === 'toggler' ? changerNode : null
]
})
}
if(this.type === 'role' && this.column.newColumn)
{
setTimeout(function() {
this.onRoleEditMode();
this.layout.roleInput.value = '';
}.bind(this));
}
return this.layout.container;
}
};
})();