' +
'' +
'' +
'' +
'' +
'' +
'' +
'' +
'
' +
'' +
'' +
'' +
'' +
'' +
'
' +
'' +
'' +
'' +
'
' +
'' +
'' +
'' +
'' +
'' +
'' +
'' +
'' +
'
' +
'';
function setEvents() {
var me = this;
this.btnTextField && this.btnTextField.on('click', function (b, e) {
me.fireEvent('forms:insert', ['text']);
});
this.btnComboBox && this.btnComboBox.on('click', function (b, e) {
me.fireEvent('forms:insert', ['combobox']);
});
this.btnDropDown && this.btnDropDown.on('click', function (b, e) {
me.fireEvent('forms:insert', ['dropdown']);
});
this.btnCheckBox && this.btnCheckBox.on('click', function (b, e) {
me.fireEvent('forms:insert', ['checkbox']);
});
this.btnRadioBox && this.btnRadioBox.on('click', function (b, e) {
me.fireEvent('forms:insert', ['radiobox']);
});
this.btnImageField && this.btnImageField.on('click', function (b, e) {
me.fireEvent('forms:insert', ['picture']);
});
this.btnComplexField && this.btnComplexField.on('click', function (b, e) {
me.fireEvent('forms:insert', ['complex']);
});
this.btnEmailField && this.btnEmailField.on('click', function (b, e) {
me.fireEvent('forms:insert', ['text', {reg: "\\S+@\\S+\\.\\S+", placeholder: 'user_name@email.com'}]);
});
this.btnPhoneField && this.btnPhoneField.on('click', function (b, e) {
me.fireEvent('forms:insert', ['text', {mask: "(999)999-9999", placeholder: '(999)999-9999'}]);
});
this.btnViewFormRoles && this.btnViewFormRoles.on('click', function (b, e) {
var item = b.menu.getChecked();
me.fireEvent('forms:mode', [b.pressed, item ? item.caption : undefined]);
});
this.btnViewFormRoles.menu.on('item:toggle', _.bind(function (menu, item, state) {
if (!!state) {
me.btnViewFormRoles.toggle(true, true);
me.fireEvent('forms:mode', [true, item.caption]);
}
}, me));
this.btnManager && this.btnManager.on('click', function (b, e) {
me.fireEvent('forms:manager');
});
this.btnClear && this.btnClear.on('click', function (b, e) {
me.fireEvent('forms:clear');
});
// if (this.mnuFormsColorPicker) {
// this.btnHighlight.on('color:select', function(btn, color) {
// me.fireEvent('forms:select-color', [color]);
// });
// this.mnuNoFormsColor.on('click', function (item) {
// me.fireEvent('forms:no-color', [item]);
// });
// }
this.btnPrevForm && this.btnPrevForm.on('click', function (b, e) {
me.fireEvent('forms:goto', ['prev']);
});
this.btnNextForm && this.btnNextForm.on('click', function (b, e) {
me.fireEvent('forms:goto', ['next']);
});
this.btnSubmit && this.btnSubmit.on('click', function (b, e) {
me.fireEvent('forms:submit');
});
this.btnSaveForm && this.btnSaveForm.on('click', function (b, e) {
me.fireEvent('forms:save');
});
}
return {
options: {},
initialize: function (options) {
Common.UI.BaseView.prototype.initialize.call(this);
this.toolbar = options.toolbar;
this.appConfig = options.config;
this.paragraphControls = [];
var me = this;
var _set = Common.enumLock;
if (this.appConfig.isRestrictedEdit && this.appConfig.canFillForms) {
} else {
this.btnTextField = new Common.UI.Button({
cls: 'btn-toolbar x-huge icon-top',
iconCls: 'toolbar__icon btn-text-field',
lock: [_set.paragraphLock, _set.headerLock, _set.controlPlain, _set.contentLock, _set.previewReviewMode, _set.viewFormMode, _set.lostConnect, _set.disableOnStart, _set.docLockView, _set.docLockForms, _set.docLockComments],
caption: this.capBtnText,
dataHint: '1',
dataHintDirection: 'bottom',
dataHintOffset: 'small'
});
this.paragraphControls.push(this.btnTextField);
this.btnComboBox = new Common.UI.Button({
cls: 'btn-toolbar x-huge icon-top',
iconCls: 'toolbar__icon btn-combo-box',
lock: [_set.paragraphLock, _set.headerLock, _set.controlPlain, _set.contentLock, _set.previewReviewMode, _set.viewFormMode, _set.lostConnect, _set.disableOnStart, _set.docLockView, _set.docLockForms, _set.docLockComments],
caption: this.capBtnComboBox,
dataHint: '1',
dataHintDirection: 'bottom',
dataHintOffset: 'small'
});
this.paragraphControls.push(this.btnComboBox);
this.btnDropDown = new Common.UI.Button({
cls: 'btn-toolbar x-huge icon-top',
iconCls: 'toolbar__icon btn-dropdown',
lock: [_set.paragraphLock, _set.headerLock, _set.controlPlain, _set.contentLock, _set.previewReviewMode, _set.viewFormMode, _set.lostConnect, _set.disableOnStart, _set.docLockView, _set.docLockForms, _set.docLockComments],
caption: this.capBtnDropDown,
dataHint: '1',
dataHintDirection: 'bottom',
dataHintOffset: 'small'
});
this.paragraphControls.push(this.btnDropDown);
this.btnCheckBox = new Common.UI.Button({
cls: 'btn-toolbar x-huge icon-top',
iconCls: 'toolbar__icon btn-checkbox',
lock: [_set.paragraphLock, _set.headerLock, _set.controlPlain, _set.contentLock, _set.previewReviewMode, _set.viewFormMode, _set.lostConnect, _set.disableOnStart, _set.docLockView, _set.docLockForms, _set.docLockComments],
caption: this.capBtnCheckBox,
dataHint: '1',
dataHintDirection: 'bottom',
dataHintOffset: 'small'
});
this.paragraphControls.push(this.btnCheckBox);
this.btnRadioBox = new Common.UI.Button({
cls: 'btn-toolbar x-huge icon-top',
iconCls: 'toolbar__icon btn-radio-button',
lock: [_set.paragraphLock, _set.headerLock, _set.controlPlain, _set.contentLock, _set.previewReviewMode, _set.viewFormMode, _set.lostConnect, _set.disableOnStart, _set.docLockView, _set.docLockForms, _set.docLockComments],
caption: this.capBtnRadioBox,
dataHint: '1',
dataHintDirection: 'bottom',
dataHintOffset: 'small'
});
this.paragraphControls.push(this.btnRadioBox);
this.btnImageField = new Common.UI.Button({
cls: 'btn-toolbar x-huge icon-top',
iconCls: 'toolbar__icon btn-insertimage',
lock: [_set.paragraphLock, _set.headerLock, _set.controlPlain, _set.contentLock, _set.complexForm, _set.previewReviewMode, _set.viewFormMode, _set.lostConnect, _set.disableOnStart, _set.docLockView, _set.docLockForms, _set.docLockComments],
caption: this.capBtnImage,
dataHint: '1',
dataHintDirection: 'bottom',
dataHintOffset: 'small'
});
this.paragraphControls.push(this.btnImageField);
this.btnManager = new Common.UI.Button({
cls: 'btn-toolbar x-huge icon-top',
iconCls: 'toolbar__icon btn-ic-sharing',
lock: [ _set.previewReviewMode, _set.viewFormMode, _set.lostConnect, _set.disableOnStart, _set.docLockView, _set.docLockForms, _set.docLockComments],
caption: this.capBtnManager,
dataHint: '1',
dataHintDirection: 'bottom',
dataHintOffset: 'small'
});
this.paragraphControls.push(this.btnManager);
this.btnEmailField = new Common.UI.Button({
cls: 'btn-toolbar x-huge icon-top',
iconCls: 'toolbar__icon btn-email',
lock: [_set.paragraphLock, _set.headerLock, _set.controlPlain, _set.contentLock, _set.previewReviewMode, _set.viewFormMode, _set.lostConnect, _set.disableOnStart, _set.docLockView, _set.docLockForms, _set.docLockComments],
caption: this.capBtnEmail,
dataHint: '1',
dataHintDirection: 'bottom',
dataHintOffset: 'small'
});
this.paragraphControls.push(this.btnEmailField);
this.btnPhoneField = new Common.UI.Button({
cls: 'btn-toolbar x-huge icon-top',
iconCls: 'toolbar__icon btn-phone',
lock: [_set.paragraphLock, _set.headerLock, _set.controlPlain, _set.contentLock, _set.previewReviewMode, _set.viewFormMode, _set.lostConnect, _set.disableOnStart, _set.docLockView, _set.docLockForms, _set.docLockComments],
caption: this.capBtnPhone,
dataHint: '1',
dataHintDirection: 'bottom',
dataHintOffset: 'small'
});
this.paragraphControls.push(this.btnPhoneField);
this.btnComplexField = new Common.UI.Button({
cls: 'btn-toolbar x-huge icon-top',
iconCls: 'toolbar__icon complex-field',
lock: [_set.paragraphLock, _set.headerLock, _set.controlPlain, _set.contentLock, _set.complexForm, _set.previewReviewMode, _set.viewFormMode, _set.lostConnect, _set.disableOnStart, _set.docLockView, _set.docLockForms, _set.docLockComments],
caption: this.capBtnComplex,
dataHint: '1',
dataHintDirection: 'bottom',
dataHintOffset: 'small'
});
this.paragraphControls.push(this.btnComplexField);
this.btnViewFormRoles = new Common.UI.Button({
cls: 'btn-toolbar x-huge icon-top',
iconCls: 'toolbar__icon btn-sheet-view',
lock: [ _set.previewReviewMode, _set.formsNoRoles, _set.lostConnect, _set.disableOnStart, _set.docLockView, _set.docLockForms, _set.docLockComments],
caption: this.capBtnView,
split: true,
menu: new Common.UI.Menu({
cls: 'menu-roles',
maxHeight: 270,
items: []
}),
enableToggle: true,
dataHint: '1',
dataHintDirection: 'bottom',
dataHintOffset: 'small'
});
this.paragraphControls.push(this.btnViewFormRoles);
// this.btnHighlight = new Common.UI.ButtonColored({
// cls : 'btn-toolbar',
// iconCls : 'toolbar__icon btn-highlight',
// lock: [ _set.previewReviewMode, _set.viewFormMode, _set.lostConnect, _set.disableOnStart],
// caption : this.textHighlight,
// menu : true,
// additionalItems: [ this.mnuNoFormsColor = new Common.UI.MenuItem({
// id: 'id-toolbar-menu-no-highlight-form',
// caption: this.textNoHighlight,
// checkable: true,
// style: 'padding-left: 20px;'
// }),
// {caption: '--'}],
// colors: ['000000', '993300', '333300', '003300', '003366', '000080', '333399', '333333', '800000', 'FF6600',
// '808000', '00FF00', '008080', '0000FF', '666699', '808080', 'FF0000', 'FF9900', '99CC00', '339966',
// '33CCCC', '3366FF', '800080', '999999', 'FF00FF', 'FFCC00', 'FFFF00', '00FF00', '00FFFF', '00CCFF',
// '993366', 'C0C0C0', 'FF99CC', 'FFCC99', 'FFFF99', 'CCFFCC', 'CCFFFF', 'C9C8FF', 'CC99FF', 'FFFFFF'
// ],
// dataHint: '1',
// dataHintDirection: 'left',
// dataHintOffset: 'small'
// });
}
this.btnClear = new Common.UI.Button({
cls: 'btn-toolbar x-huge icon-top',
iconCls: 'toolbar__icon clear-style',
caption: this.textClear,
visible: false,
dataHint: '1',
dataHintDirection: 'bottom',
dataHintOffset: 'small'
});
this.btnPrevForm = new Common.UI.Button({
cls: 'btn-toolbar x-huge icon-top',
iconCls: 'toolbar__icon previous-field',
lock: [ _set.previewReviewMode, _set.lostConnect, _set.disableOnStart, _set.docLockView, _set.docLockComments],
caption: this.capBtnPrev,
visible: false,
// disabled: this.appConfig.isEdit && this.appConfig.canFeatureContentControl && this.appConfig.canFeatureForms, // disable only for edit mode
dataHint: '1',
dataHintDirection: 'bottom',
dataHintOffset: 'small'
});
!(this.appConfig.isRestrictedEdit && this.appConfig.canFillForms) && this.paragraphControls.push(this.btnPrevForm);
this.btnNextForm = new Common.UI.Button({
cls: 'btn-toolbar x-huge icon-top',
iconCls: 'toolbar__icon next-field',
lock: [ _set.previewReviewMode, _set.lostConnect, _set.disableOnStart, _set.docLockView, _set.docLockComments],
caption: this.capBtnNext,
visible: false,
// disabled: this.appConfig.isEdit && this.appConfig.canFeatureContentControl && this.appConfig.canFeatureForms, // disable only for edit mode,
dataHint: '1',
dataHintDirection: 'bottom',
dataHintOffset: 'small'
});
!(this.appConfig.isRestrictedEdit && this.appConfig.canFillForms) && this.paragraphControls.push(this.btnNextForm);
if (this.appConfig.canSubmitForms) {
this.btnSubmit = new Common.UI.Button({
cls: 'btn-toolbar x-huge icon-top',
iconCls: 'toolbar__icon submit-form',
lock: [_set.lostConnect, _set.disableOnStart],
caption: this.capBtnSubmit,
// disabled: this.appConfig.isEdit && this.appConfig.canFeatureContentControl && this.appConfig.canFeatureForms, // disable only for edit mode,
dataHint: '1',
dataHintDirection: 'bottom',
dataHintOffset: 'small'
});
!(this.appConfig.isRestrictedEdit && this.appConfig.canFillForms) && this.paragraphControls.push(this.btnSubmit);
}
if (this.appConfig.canDownloadForms) {
this.btnSaveForm = new Common.UI.Button({
cls: 'btn-toolbar x-huge icon-top',
lock: [_set.lostConnect, _set.disableOnStart],
iconCls: 'toolbar__icon save-form',
caption: this.appConfig.canRequestSaveAs || !!this.appConfig.saveAsUrl || this.appConfig.isOffline ? this.capBtnSaveForm : this.capBtnDownloadForm,
// disabled: this.appConfig.isEdit && this.appConfig.canFeatureContentControl && this.appConfig.canFeatureForms, // disable only for edit mode,
dataHint: '1',
dataHintDirection: 'bottom',
dataHintOffset: 'small'
});
!(this.appConfig.isRestrictedEdit && this.appConfig.canFillForms) && this.paragraphControls.push(this.btnSaveForm);
}
Common.Utils.lockControls(Common.enumLock.disableOnStart, true, {array: this.paragraphControls});
this._state = {disabled: false};
Common.NotificationCenter.on('app:ready', this.onAppReady.bind(this));
},
render: function (el) {
if ( el ) el.html( this.getPanel() );
return this;
},
onAppReady: function (config) {
var me = this;
(new Promise(function (accept, reject) {
accept();
})).then(function(){
if (config.isEdit && config.canFeatureContentControl && config.canFeatureForms) {
// if (config.canEditContentControl) {
// me.btnHighlight.setMenu();
// me.mnuFormsColorPicker = me.btnHighlight.getPicker();
// me.btnHighlight.currentColor && me.mnuFormsColorPicker.selectByRGB(me.btnHighlight.currentColor, true);
// me.mnuNoFormsColor.setChecked(me.btnHighlight.currentColor === null);
// me.btnHighlight.setColor(me.btnHighlight.currentColor || 'transparent');
// } else {
// me.btnHighlight.cmpEl.parents('.group').hide().prev('.separator').hide();
// }
me.btnTextField.updateHint(me.tipTextField);
me.btnComboBox.updateHint(me.tipComboBox);
me.btnDropDown.updateHint(me.tipDropDown);
me.btnCheckBox.updateHint(me.tipCheckBox);
me.btnRadioBox.updateHint(me.tipRadioBox);
me.btnImageField.updateHint(me.tipImageField);
me.btnViewFormRoles.updateHint(me.tipViewForm);
me.btnManager.updateHint(me.tipManager);
me.btnEmailField.updateHint(me.tipEmailField);
me.btnPhoneField.updateHint(me.tipPhoneField);
me.btnComplexField.updateHint(me.tipComplexField);
}
me.btnClear.updateHint(me.textClearFields);
me.btnPrevForm.updateHint(me.tipPrevForm);
me.btnNextForm.updateHint(me.tipNextForm);
me.btnSubmit && me.btnSubmit.updateHint(me.tipSubmit);
me.btnSaveForm && me.btnSaveForm.updateHint(config.canRequestSaveAs || !!config.saveAsUrl ? me.tipSaveForm : me.tipDownloadForm);
setEvents.call(me);
});
},
getPanel: function () {
this.$el = $(_.template(template)( {} ));
var $host = this.$el;
this.appConfig.canSubmitForms && this.btnSubmit.render($host.find('#slot-btn-form-submit'));
this.appConfig.canDownloadForms && this.btnSaveForm.render($host.find('#slot-btn-form-save'));
if (this.appConfig.isRestrictedEdit && this.appConfig.canFillForms) {
} else {
this.btnTextField.render($host.find('#slot-btn-form-field'));
this.btnComboBox.render($host.find('#slot-btn-form-combobox'));
this.btnDropDown.render($host.find('#slot-btn-form-dropdown'));
this.btnCheckBox.render($host.find('#slot-btn-form-checkbox'));
this.btnRadioBox.render($host.find('#slot-btn-form-radiobox'));
this.btnImageField.render($host.find('#slot-btn-form-image'));
this.btnViewFormRoles.render($host.find('#slot-btn-form-view-roles'));
this.btnManager.render($host.find('#slot-btn-manager'));
// this.btnHighlight.render($host.find('#slot-form-highlight'));
this.btnEmailField.render($host.find('#slot-btn-form-email'));
this.btnPhoneField.render($host.find('#slot-btn-form-phone'));
this.btnComplexField.render($host.find('#slot-btn-form-complex'));
$host.find('.forms-buttons').show();
}
this.btnClear.render($host.find('#slot-btn-form-clear'));
this.btnPrevForm.render($host.find('#slot-btn-form-prev'));
this.btnNextForm.render($host.find('#slot-btn-form-next'));
return this.$el;
},
fillRolesMenu: function(roles, lastRole) {
var checkedIndex = 0,
me = this;
this.btnViewFormRoles.menu.removeAll();
roles && roles.forEach(function(item, index) {
if (item.name===lastRole)
checkedIndex = index;
me.btnViewFormRoles.menu.addItem(new Common.UI.MenuItem({
caption: item.name,
color: item.color ? '#' + Common.Utils.ThemeColor.getHexColor(item.color.get_r(), item.color.get_g(), item.color.get_b()) : 'transparent',
checkable: true,
toggleGroup: 'formtab-view-role',
template: _.template([
'