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); }