123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739/// FOURJS_START_COPYRIGHT(D,2015)
/// Property of Four Js*
/// (c) Copyright Four Js 2015, 2022. All Rights Reserved.
/// * Trademark of Four Js Development Tools Europe Ltd
/// in the United States and elsewhere
///
/// This file can be modified by licensees according to the
/// product manual.
/// FOURJS_END_COPYRIGHT
'use strict';
modulum('ButtonEditWidget', ['FieldWidgetBase', 'WidgetFactory'],
function(context, cls) {
/**
* ButtonEdit widget.
* @class ButtonEditWidget
* @memberOf classes
* @extends classes.FieldWidgetBase
* @publicdoc Widgets
*/
cls.ButtonEditWidget = context.oo.Class(cls.FieldWidgetBase, function($super) {
return /** @lends classes.ButtonEditWidget.prototype */ {
__name: 'ButtonEditWidget',
/**
* Edit part of the widget
* @type {classes.EditWidget}
*/
_edit: null,
/**
* Button part of the widget
* @type {classes.ButtonWidget}
*/
_button: null,
/**
* Redefine where the data is located
* @type {string}
*/
__dataContentPlaceholderSelector: '.gbc_dataContentPlaceholder',
/**
* Handler for click
* @function
*/
_clickHandler: null,
/**
* Handler for focus
* @function
*/
_focusHandler: null,
/**
* Handler for blur
* @function
*/
_blurHandler: null,
/**
* Handler for change
* @function
*/
_changeHandler: null,
/**
* Handler for image ready
* @function
*/
_imageReadyHandler: null,
/**
* Flag to manage if button has been clicked
* @type {boolean}
*/
_buttonClicked: false,
/**
* Handler for virtualKeyboardDisplayed event
* @function
*/
_virtualKeyboardDisplayedHandler: null,
/**
* @inheritDoc
*/
constructor: function(opts) {
$super.constructor.call(this, opts);
this.setFocusable(true);
},
/**
* @inheritDoc
*/
_initLayout: function() {
if (!this._ignoreLayout) {
this._layoutInformation = new cls.LayoutInformation(this);
this._layoutEngine = new cls.LeafLayoutEngine(this);
this._layoutInformation.setReservedDecorationSpace(2);
}
},
/**
* @inheritDoc
*/
_initElement: function() {
$super._initElement.call(this);
this._edit = cls.WidgetFactory.createWidget('EditWidget', this.getBuildParameters());
this._button = cls.WidgetFactory.createWidget('ButtonWidget', this.getBuildParameters());
// layout engine can be null if _ignoreLayout is true, which happens for widget being in table and not in first row. (cf constructor of WidgetBase)
// in that case, we do not want to measure image once loaded
if (!this._ignoreLayout) {
this._imageReadyHandler = this._button.when(context.constants.widgetEvents.ready, this._imageLoaded.bind(this));
}
this._element.appendChild(this._edit.getElement());
this._element.appendChild(this._button.getElement());
this._edit.setParentWidget(this);
this._button.setParentWidget(this);
this._clickHandler = this._button.when(context.constants.widgetEvents.click, this._onButtonClick.bind(this));
this._focusHandler = this._edit.when(context.constants.widgetEvents.requestFocus, this._onEditRequestFocus.bind(this));
this._blurHandler = this._edit.when(context.constants.widgetEvents.blur, this._onEditBlur.bind(this));
this._changeHandler = this._edit.when(context.constants.widgetEvents.change, this._onEditChange.bind(this));
// Manage virtual keyboard on Mobile
if (context.__wrapper.isGMA()) {
// On GMA skip the first VM Focus after a dialogType change.
this._virtualKeyboardDisplayedHandler = this._appWidget.when(context.constants.widgetEvents.virtualKeyboardDisplayed,
function() {
if (this._edit) {
this._edit._canShowVirtualKeyboard = true;
}
}.bind(this));
}
},
/**
* Handler called when the button image is loaded
*/
_imageLoaded: function(event, src) {
this._layoutEngine.invalidateMeasure();
this.emit(context.constants.widgetEvents.ready);
},
/**
* @inheritDoc
*/
destroy: function() {
this._clickHandler();
this._clickHandler = null;
this._focusHandler();
this._focusHandler = null;
this._blurHandler();
this._blurHandler = null;
this._changeHandler();
this._changeHandler = null;
this._edit.destroy();
this._edit = null;
this._button.destroy();
this._button = null;
if (this._completerWidget) {
this._completerWidget.destroy();
this._completerWidget = null;
}
if (this._imageReadyHandler) {
this._imageReadyHandler();
this._imageReadyHandler = null;
}
if (this._virtualKeyboardDisplayedHandler) {
this._virtualKeyboardDisplayedHandler();
this._virtualKeyboardDisplayedHandler = null;
}
$super.destroy.call(this);
},
/**
* @inheritDoc
*/
manageClipboardPaste: function(text) {
return this._edit.manageClipboardPaste(text);
},
/**
* @inheritDoc
*/
managePriorityKeyDown: function(keyString, domKeyEvent, repeat) {
return this._edit.managePriorityKeyDown(keyString, domKeyEvent, repeat);
},
/**
* @inheritDoc
*/
manageKeyDown: function(keyString, domKeyEvent, repeat) {
return this._edit.manageKeyDown(keyString, domKeyEvent, repeat);
},
/**
* @inheritDoc
*/
manageKeyUp: function(keyString, domKeyEvent) {
this._edit.manageKeyUp(keyString, domKeyEvent);
this.emit(context.constants.widgetEvents.keyUp, domKeyEvent, true);
},
/**
* return true if the backup value has been restored
* @return {boolean}
*/
isValueRestored: function() {
return this._edit.isValueRestored();
},
/**
* Handler when click on button
* @param {Object} event - DOM event
* @param sender
* @param domEvent
*/
_onButtonClick: function(event, sender, domEvent) {
if (this.isEnabled()) {
if (this.getApplicationWidget() && context.__wrapper.isGMA()) {
this.getApplicationWidget().virtualKeyboardIsDisplayed();
}
this.emit(context.constants.widgetEvents.requestFocus, domEvent);
this.emit(context.constants.widgetEvents.click, domEvent, !this.hasDOMFocus());
}
},
/**
* Handler when focus is requested
* @param event
* @param sender
* @param domEvent
*/
_onEditRequestFocus: function(event, sender, domEvent) {
this.emit(context.constants.widgetEvents.requestFocus, domEvent);
},
/**
* Handler when edit is blured
* @param event
* @param sender
* @param domEvent
*/
_onEditBlur: function(event, sender, domEvent) {
this.emit(context.constants.widgetEvents.blur, domEvent);
},
/**
* Handler when edit content changes
* @param event
* @param sender
* @param isTextEntry
*/
_onEditChange: function(event, sender, isTextEntry) {
this.emit(context.constants.widgetEvents.change, isTextEntry);
},
/**
* Get the input field of the widget
* @return {HTMLElement} The input element
* @publicdoc
*/
getInputElement: function() {
return this._edit.getInputElement();
},
/**
* @inheritDoc
*/
setTitle: function(title) {
this._edit.setTitle(title);
},
/**
* Set button title from localized text of corresponding action
* @param actionTitle
*/
setActionTitle: function(actionTitle) {
if (actionTitle && actionTitle.length <= 0) {
this._button.setTitle(this.getTitle());
} else {
this._button.setTitle(actionTitle);
}
},
/**
* @inheritDoc
*/
getTitle: function() {
return this._edit.getTitle();
},
/**
* @inheritDoc
*/
setReadOnly: function(readonly) {
this._edit.setReadOnly(readonly);
},
/**
* @inheritDoc
*/
isReadOnly: function() {
return this._edit.isReadOnly();
},
/**
* @return {boolean} true if we must ignore the scroll attribute
*/
isDataTypeWithNoScroll: function() {
return this._edit.isDataTypeWithNoScroll();
},
/**
* Set to true if we must ignore the scroll attribute
* @param {boolean} checkDisplayValue
*/
setDataTypeWithNoScroll: function(checkDisplayValue) {
this._edit.setDataTypeWithNoScroll(checkDisplayValue);
},
/**
* Define the maximum number of characters allowed
* @param {number} maxlength - maximum number of characters allowed in the field
* @publicdoc
*/
setMaxLength: function(maxlength) {
this._edit.setMaxLength(maxlength);
},
/**
* Defines if we can take more char than the widget width
* @param {boolean} scroll true if the widget can 'scroll' his content (take more char than the widget width)
* @publicdoc
*/
setScroll: function(scroll) {
this._edit.setScroll(scroll);
},
/**
* Widget width
* @param {number} width
*/
setVMWidth: function(width) {
this._edit.setVMWidth(width);
},
/**
* @return {boolean} true if we can trigger the autonext
*/
canAutoNext: function() {
return this._edit.canAutoNext();
},
/**
* Get the maximum number of characters allowed
* @returns {number} the maximum number of characters allowed in the field
* @publicdoc
*/
getMaxLength: function() {
return this._edit.getMaxLength();
},
/**
* Set Default TTF color
* @param {string} color - rgb formatted or css name
*/
setDefaultTTFColor: function(color) {
if (this._button) {
this._button.setDefaultColor(color);
}
},
/**
* @inheritDoc
*/
setTextAlign: function(align) {
this._edit.setTextAlign(align);
},
/**
* @inheritDoc
*/
getTextAlign: function() {
return this._edit.getTextAlign();
},
/**
* When cursor2 === cursor, it is a simple cursor set
* @param {number} cursor - starting cursor position
* @param {number} cursor2 - ending cursor position
* @publicdoc
*/
setCursors: function(cursor, cursor2) {
if (this._edit) {
this._edit.setCursors(cursor, cursor2);
}
},
/**
* Get cursors
* @return {{start: number, end: number}} object with cursors
* @publicdoc
*/
getCursors: function() {
return this._edit.getCursors();
},
/**
* Get the display format of the edit part
* @return {string} the display format
* @publicdoc
*/
getDisplayFormat: function() {
return this._edit.getDisplayFormat();
},
/**
* Set the display format of the edit part
* @param {string} format the display format
* @publicdoc
*/
setDisplayFormat: function(format) {
this._edit.setDisplayFormat(format);
},
/**
* @inheritDoc
*/
setValue: function(value, fromVM) {
this._edit.setValue(value, fromVM);
},
/**
* @inheritDoc
*/
getValue: function() {
return this._edit.getValue();
},
/**
* Set the image of the button part
* @param {string} image - URL of the image to display
* @publicdoc
*/
setImage: function(image) {
this._button.setImage(image);
},
/**
* Get the image of the button part
* @returns {string} the URL of the image displayed in the button part
* @publicdoc
*/
getImage: function() {
return this._button.getImage();
},
/**
* Defines the widget as autoscalable
* @param {boolean} enabled the wanted state
* @publicdoc
*/
setAutoScale: function(enabled) {
this._button.setAutoScale(enabled);
},
/**
* Set autoscale value as nnnpx
* @param {string} value - css string value with valid units
*/
setScaleIconValue: function(value) {
this._button.setScaleIconValue(value);
},
/**
* @inheritDoc
*/
setEnabled: function(enabled) {
$super.setEnabled.call(this, enabled);
this._edit.setEnabled(enabled);
},
/**
* @inheritDoc
*/
isEnabled: function() {
return this._edit.isEnabled();
},
/**
* Enable the button
* @param {boolean} enabled - true if the button should be enabled, false otherwise
* @publicdoc
*/
setButtonEnabled: function(enabled) {
this._button.setEnabled(enabled);
},
/**
* returns whether or not the button is enabled
* @returns {boolean} true if the button is enabled, false otherwise
* @publicdoc
*/
isButtonEnabled: function() {
return this._button.isEnabled();
},
/**
* sets 'password' mode
* @param {boolean} isPassword - true if the widget should be in 'password' mode, false otherwise
* @publicdoc
*/
setIsPassword: function(isPassword) {
this._edit.setIsPassword(isPassword);
},
/**
* returns whether or not the widget should be in 'password' mode
* @returns {boolean} true if the widget is in 'password' mode, false otherwise
* @publicdoc
*/
isPassword: function() {
return this._edit.isPassword();
},
/**
* Used to manage the keyboardHint.
* @param {string} valType - the type attribute value to set
* @publicdoc
*/
setType: function(valType) {
this._edit.setType(valType);
},
/**
* @inheritDoc
*/
setInputMode: function(valType) {
this._edit.setInputMode(valType);
},
/**
* Get the keyboardHint method
* @returns {string} this Edit current type
* @publicdoc
*/
getType: function() {
return this._edit.getType();
},
/**
* @inheritDoc
*/
loseFocus: function() {
$super.loseFocus.call(this);
if (this._completerWidget) {
this._completerWidget.loseFocus();
}
},
/**
* @inheritDoc
*/
setDialogType: function(dialogType) {
$super.setDialogType.call(this, dialogType);
this._edit.setDialogType(dialogType);
},
/**
* @inheritDoc
*/
setFocus: function(fromMouse) {
var inputElement = this._edit.getInputElement();
if (inputElement) {
if (context.__wrapper.isGMA() && !this._edit._showVirtualKeyboardOnFocus) {
if (this._edit._canShowVirtualKeyboard) {
this._edit._setElementAttribute('readonly', this._edit._realReadOnly ? 'readonly' : null, "_inputElement");
} else {
this._edit._setElementAttribute('readonly', 'readonly', "_inputElement");
}
}
inputElement.domFocus();
}
this.getUserInterfaceWidget().setFocusedWidget(this); // TODO why don't call super.setFocus ?
},
/**
* @inheritDoc
*/
flash: function() {
if (this._edit) {
this._edit.flash();
}
},
/**
* Get the Completer widget
* @return {classes.CompleterWidget}
*/
getCompleterWidget: function() {
return this._edit.getCompleterWidget();
},
/**
* Will add a completer to the edit
*/
addCompleterWidget: function() {
this._edit.addCompleterWidget();
},
/**
* @inheritDoc
*/
setColor: function(color) {
this._edit.setColor(color);
},
/**
* @inheritDoc
*/
getColor: function() {
return this._edit.getColor();
},
/**
* @inheritDoc
*/
getColorFromStyle: function() {
return this._edit.getColorFromStyle();
},
/**
* @inheritDoc
*/
setTextTransform: function(transform) {
this._edit.setTextTransform(transform);
},
/**
* @inheritDoc
*/
removeTextTransform: function() {
this._edit.removeTextTransform();
},
/**
* @inheritDoc
*/
getTextTransform: function() {
return this._edit.getTextTransform();
},
/**
* @inheritDoc
*/
setEditing: function(editing) {
if (this._edit) {
this._edit.setEditing(editing);
}
},
/**
* @inheritDoc
*/
getEditingTime: function() {
return this._edit.getEditingTime();
},
/**
* @inheritDoc
*/
isEditing: function() {
return this._edit.isEditing();
},
/**
* @inheritDoc
*/
setPlaceHolder: function(placeholder) {
this._edit.setPlaceHolder(placeholder);
},
/**
* @inheritDoc
*/
setNotEditable: function(notEditable) {
this._edit.setNotEditable(notEditable);
},
hasDOMFocus: function() {
return this._edit.hasDOMFocus() || this._button.hasDOMFocus();
},
/**
* @inheritDoc
*/
isNotEditable: function() {
return this._edit.isNotEditable();
},
/**
* @inheritDoc
*/
_preventEditAllowNavigation: function(evt, keyString) {
this._edit._preventEditAllowNavigation(evt, keyString);
},
/**
* True if you want to always show the virtual keyboard on GMA
* @param {boolean} show
*/
setShowVirtualKeyboardOnFocus: function(show) {
this._edit.setShowVirtualKeyboardOnFocus(show);
},
/**
* Get the element state
* @return {cls.InputTextState}
*/
getElementState: function() {
return this._edit.getElementState();
}
};
});
cls.WidgetFactory.registerBuilder('ButtonEdit', cls.ButtonEditWidget);
});