/// <summary>
/// Destroy the widget and hide the div if it is being used by the specified
/// object.
/// </summary>
/// <param name="oldOwner">The object that was using this container.</param>
public static void hideIfOwner(object oldOwner)
{
if (WidgetDiv.owner_ == oldOwner)
{
WidgetDiv.hide();
}
}
/// <summary>
/// Initialize and display the widget div. Close the old one if needed.
/// </summary>
/// <param name="newOwner">The object that will be using this container.</param>
/// <param name="rtl">Right-to-left (true) or left-to-right (false).</param>
/// <param name="dispose">Optional cleanup function to be run when the widget
/// is closed.</param>
public static void show(object newOwner, bool rtl, Action dispose)
{
WidgetDiv.hide();
WidgetDiv.owner_ = newOwner;
WidgetDiv.dispose_ = dispose;
// Temporarily move the widget to the top of the screen so that it does not
// cause a scrollbar jump in Firefox when displayed.
var xy = goog.style.getViewportPageOffset(Document.Instance);
WidgetDiv.DIV.Style.Top = xy.y + "px";
WidgetDiv.DIV.Style.Direction = rtl ? Direction.Rtl : Direction.Ltr;
WidgetDiv.DIV.Style.Display = Display.Block;
}
/// <summary>
/// Close tooltips, context menus, dropdown selections, etc.
/// </summary>
/// <param name="opt_allowToolbox">If true, don't close the toolbox.</param>
public static void hideChaff(bool opt_allowToolbox = false)
{
Tooltip.hide();
WidgetDiv.hide();
if (!opt_allowToolbox)
{
var workspace = Core.getMainWorkspace();
if (workspace.toolbox_ != null &&
workspace.toolbox_.flyout_ != null &&
workspace.toolbox_.flyout_.autoClose)
{
workspace.toolbox_.clearSelection();
}
}
}
/// <summary>
/// Handle key down to the editor.
/// </summary>
/// <param name="e">Keyboard event.</param>
private void onHtmlInputKeyDown_(KeyboardEvent e)
{
var htmlInput = FieldTextInput.htmlInput_;
int tabKey = 9, enterKey = 13, escKey = 27;
if (e.KeyCode == enterKey)
{
WidgetDiv.hide();
}
else if (e.KeyCode == escKey)
{
htmlInput.Value = htmlInput.DefaultValue;
WidgetDiv.hide();
}
else if (e.KeyCode == tabKey)
{
WidgetDiv.hide();
this.sourceBlock_.tab(this, !e.ShiftKey);
e.PreventDefault();
}
}
/// <summary>
/// Create a date picker under the date field.
/// </summary>
public override void showEditor_(bool opt_quietInput)
{
WidgetDiv.show(this, this.sourceBlock_.RTL,
new Action(FieldDate.widgetDispose_));
// Create the date picker using Closure.
FieldDate.loadLanguage_();
var picker = new goog.ui.DatePicker();
picker.setAllowNone(false);
picker.setShowWeekNum(false);
// Position the picker to line up with the field.
// Record windowSize and scrollOffset before adding the picker.
var windowSize = goog.dom.getViewportSize();
var scrollOffset = goog.style.getViewportPageOffset(Document.Instance);
var xy = this.getAbsoluteXY_();
var borderBBox = this.getScaledBBox_();
var div = WidgetDiv.DIV;
picker.render(div);
picker.setDate(new Date(this.getValue()));
// Record pickerSize after adding the date picker.
var pickerSize = goog.style.getSize(picker.getElement());
// Flip the picker vertically if off the bottom.
if (xy.y + pickerSize.height + borderBBox.height >=
windowSize.height + scrollOffset.y)
{
xy.y -= pickerSize.height - 1;
}
else
{
xy.y += borderBBox.height - 1;
}
if (this.sourceBlock_.RTL)
{
xy.x += borderBBox.width;
xy.x -= pickerSize.width;
// Don't go offscreen left.
if (xy.x < scrollOffset.x)
{
xy.x = scrollOffset.x;
}
}
else
{
// Don't go offscreen right.
if (xy.x > windowSize.width + scrollOffset.x - pickerSize.width)
{
xy.x = windowSize.width + scrollOffset.x - pickerSize.width;
}
}
WidgetDiv.position(xy.x, xy.y, windowSize, scrollOffset,
this.sourceBlock_.RTL);
// Configure event handler.
var thisField = this;
FieldDate.changeEventKey_ = goog.events.listen(picker,
goog.ui.DatePicker.Events.CHANGE,
new Action <Bridge.Html5.Event>((e) => {
var date = e.Date != null ? e.Date.ToIsoString(true) : "";
WidgetDiv.hide();
if (thisField.sourceBlock_ != null)
{
// Call any validation function, and allow it to override.
date = thisField.callValidator(date);
}
thisField.setValue(date);
}));
}
/// <summary>
/// Create a palette under the colour field.
/// </summary>
public override void showEditor_(bool opt_quietInput)
{
WidgetDiv.show(this, this.sourceBlock_.RTL,
new Action(FieldColour.widgetDispose_));
// Create the palette using Closure.
var picker = new goog.ui.ColorPicker();
picker.setSize(this.columns_ ?? FieldColour.COLUMNS);
picker.setColors(new JsArray <string>(this.colours_ ?? FieldColour.COLOURS));
// Position the palette to line up with the field.
// Record windowSize and scrollOffset before adding the palette.
var windowSize = goog.dom.getViewportSize();
var scrollOffset = goog.style.getViewportPageOffset(Document.Instance);
var xy = this.getAbsoluteXY_();
var borderBBox = this.getScaledBBox_();
var div = WidgetDiv.DIV;
picker.render(div);
picker.setSelectedColor(this.getValue());
// Record paletteSize after adding the palette.
var paletteSize = goog.style.getSize(picker.getElement());
// Flip the palette vertically if off the bottom.
if (xy.y + paletteSize.height + borderBBox.height >=
windowSize.height + scrollOffset.y)
{
xy.y -= paletteSize.height - 1;
}
else
{
xy.y += borderBBox.height - 1;
}
if (this.sourceBlock_.RTL)
{
xy.x += borderBBox.width;
xy.x -= paletteSize.width;
// Don't go offscreen left.
if (xy.x < scrollOffset.x)
{
xy.x = scrollOffset.x;
}
}
else
{
// Don't go offscreen right.
if (xy.x > windowSize.width + scrollOffset.x - paletteSize.width)
{
xy.x = windowSize.width + scrollOffset.x - paletteSize.width;
}
}
WidgetDiv.position(xy.x, xy.y, windowSize, scrollOffset,
this.sourceBlock_.RTL);
// Configure event handler.
var thisField = this;
FieldColour.changeEventKey_ = goog.events.listen(picker,
goog.ui.ColorPicker.EventType.CHANGE,
new Action <goog.events.Event>((e) => {
string colour = ((goog.ui.ColorPicker)e.target).getSelectedColor() ?? "#000000";
WidgetDiv.hide();
if (thisField.sourceBlock_ != null)
{
// Call any validation function, and allow it to override.
colour = thisField.callValidator(colour);
}
if (colour != null)
{
thisField.setValue(colour);
}
}));
}