public TreeControl(html.SafeHtml html, Config opt_config = null, goog.dom.DomHelper opt_domHelper = null)
: base(html, opt_config, opt_domHelper)
{
// The root is open and selected by default.
this.setExpandedInternal(true);
this.setSelectedInternal(true);
this.selectedItem_ = this;
this.typeAhead_ = new goog.ui.tree.TypeAhead();
this.logger_ = goog.log.getLogger("this");
this.showLines_ = true;
this.showExpandIcons_ = true;
this.showRootNode_ = true;
this.showRootLines_ = true;
if (goog.userAgent.IE)
{
try {
// works since IE6SP1
Document.ExecCommand("BackgroundImageCache", false, true);
}
catch (Exception) {
goog.log.warning(this.logger_, "Failed to enable background image cache");
}
}
}
public ColorPicker(goog.dom.DomHelper opt_domHelper = null, goog.ui.ColorPalette opt_colorPalette = null)
: base(opt_domHelper)
{
this.colorPalette_ = opt_colorPalette;
this.getHandler().listen(
this, goog.ui.Component.EventType.ACTION, new Action <events.Event>(this.onColorPaletteAction_));
}
/// <summary>
/// Returns an unrendered instance of the color picker. The colors and layout
/// are a simple color grid, the same as the old Gmail color picker.
/// </summary>
/// <param name="opt_domHelper">Optional DOM helper.</param>
/// <returns>The unrendered instance.</returns>
public static goog.ui.ColorPicker createSimpleColorGrid(goog.dom.DomHelper opt_domHelper = null)
{
var cp = new goog.ui.ColorPicker(opt_domHelper);
cp.setSize(7);
cp.setColors(new JsArray <string>(goog.ui.ColorPicker.SIMPLE_GRID_COLORS));
return(cp);
}
/// <summary>
/// Returns a table row element (or equivalent) that wraps the given cells.
/// </summary>
/// <param name="cells">Array of cell elements.</param>
/// <param name="dom">DOM helper for document interaction.</param>
/// <returns>Row element.</returns>
public HTMLElement createRow(JsArray <Node> cells, goog.dom.DomHelper dom)
{
var row = dom.createDom(
goog.dom.TagName.TR, le.getCssName(this.getCssClass(), "row"), cells);
goog.a11y.aria.setRole(row, goog.a11y.aria.Role.ROW);
return(row);
}
/// <summary>
/// A color palette is a grid of color swatches that the user can highlight or
/// select via the keyboard or the mouse. The selection state of the palette is
/// controlled by a selection model. When the user makes a selection, the
/// component fires an ACTION event. Event listeners may retrieve the selected
/// color using the {@link #getSelectedColor} method.
/// </summary>
/// <param name="opt_colors">Array of colors in any valid CSS color</param>
/// format.
/// <param name="opt_renderer">Renderer used to render or</param>
/// decorate the palette; defaults to {@link goog.ui.PaletteRenderer}.
/// <param name="opt_domHelper">Optional DOM helper, used for</param>
/// document interaction.
public ColorPalette(JsArray <string> opt_colors = null,
goog.ui.PaletteRenderer opt_renderer = null, goog.dom.DomHelper opt_domHelper = null)
: base(null, opt_renderer ?? goog.ui.PaletteRenderer.getInstance(), opt_domHelper)
{
this.colors_ = opt_colors ?? new JsArray <string>();
// Set the colors separately from the super call since we need the correct
// DomHelper to be initialized for this class.
this.setColors(this.colors_);
}
/// <summary>
/// Returns a table element (or equivalent) that wraps the given rows.
/// </summary>
/// <param name="rows">Array of row elements.</param>
/// <param name="dom">DOM helper for document interaction.</param>
/// <returns>Palette table element.</returns>
public HTMLElement createTable(JsArray <Node> rows, goog.dom.DomHelper dom)
{
var table = (HTMLTableElement)dom.createDom(
goog.dom.TagName.TABLE, le.getCssName(this.getCssClass(), "table"),
dom.createDom(
goog.dom.TagName.TBODY, le.getCssName(this.getCssClass(), "body"),
rows));
table.CellSpacing = "0";
table.CellPadding = "0";
return(table);
}
/// <summary>
/// Returns the given items in a table with {@code size.width} columns and
/// {@code size.height} rows. If the table is too big, empty cells will be
/// created as needed. If the table is too small, the items that don't fit
/// will not be rendered.
/// </summary>
/// <param name="items"> Palette items.</param>
/// <param name="size"> Palette size (columns x rows); both dimensions
/// must be specified as numbers.</param>
/// <param name="dom"> DOM helper for document interaction.</param>
/// <returns>Palette table element.</returns>
public HTMLElement createGrid(ControlContent items, goog.math.Size size, goog.dom.DomHelper dom)
{
var rows = new JsArray <Node>();
for (int row = 0, index = 0; row < size.height; row++)
{
var cells = new JsArray <Node>();
for (var column = 0; column < size.width; column++)
{
var item = items != null?items.AsArray()[index++] : null;
cells.Push(this.createCell(item, dom));
}
rows.Push(this.createRow(cells, dom));
}
return(this.createTable(rows, dom));
}
public TreeNode(Toolbox toolbox, goog.html.SafeHtml html,
Config opt_config = null, goog.dom.DomHelper opt_domHelper = null)
: base(html, opt_config, opt_domHelper)
{
if (toolbox != null)
{
this.horizontalLayout_ = toolbox.horizontalLayout_;
var resize = new Action <Bridge.Html5.Event>((e) => {
// Even though the div hasn't changed size, the visible workspace
// surface of the workspace has, so we may need to reposition everything.
Core.svgResize(toolbox.workspace_);
});
// Fire a resize event since the toolbox may have changed width.
goog.events.listen(toolbox.tree_,
goog.ui.tree.BaseNode.EventType.EXPAND, resize);
goog.events.listen(toolbox.tree_,
goog.ui.tree.BaseNode.EventType.COLLAPSE, resize);
}
}
/// <summary>
/// Class representing an item in a menu.
/// </summary>
/// <param name="content">Text caption or DOM structure to
/// display as the content of the item (use to add icons or styling to
/// menus).</param>
/// <param name="opt_model">Data/model associated with the menu item.</param>
/// <param name="opt_domHelper">Optional DOM helper used for
/// document interactions.</param>
/// <param name="opt_renderer">Optional renderer.</param>
public MenuItem(string content, object opt_model = null, goog.dom.DomHelper opt_domHelper = null, goog.ui.MenuItemRenderer opt_renderer = null)
: base(new ControlContent(content), opt_renderer ?? goog.ui.MenuItemRenderer.getInstance(), opt_domHelper)
{
this.setValue(opt_model);
}
/// <summary>
/// Returns a table cell element (or equivalent) that wraps the given palette
/// item (which must be a DOM node).
/// </summary>
/// <param name="node">Palette item.</param>
/// <param name="dom">DOM helper for document interaction.</param>
/// <returns>Cell element.</returns>
public HTMLElement createCell(Union <string, Node, NodeList, JsArray <Node> > node, goog.dom.DomHelper dom)
{
var cell = dom.createDom(
goog.dom.TagName.TD, new Dictionary <string, string> {
{ "class", le.getCssName(this.getCssClass(), "cell") },
// Cells must have an ID, for accessibility, so we generate one here.
{ "id", le.getCssName(this.getCssClass(), "cell-") +
goog.ui.PaletteRenderer.cellId_++ }
},
node);
goog.a11y.aria.setRole(cell, goog.a11y.aria.Role.GRIDCELL);
// Initialize to an unselected state.
goog.a11y.aria.setState(cell, goog.a11y.aria.State.SELECTED, false);
if (goog.dom.getTextContent(cell) == null && goog.a11y.aria.getLabel(cell) == null)
{
var ariaLabelForCell = this.findAriaLabelForCell_(cell);
if (ariaLabelForCell != null)
{
goog.a11y.aria.setLabel(cell, ariaLabelForCell);
}
}
return(cell);
}
