mirror of
https://github.com/google/blockly.git
synced 2026-01-10 10:27:08 +01:00
133 lines
3.0 KiB
JavaScript
133 lines
3.0 KiB
JavaScript
/**
|
|
* @license
|
|
* Copyright 2020 Google LLC
|
|
* SPDX-License-Identifier: Apache-2.0
|
|
*/
|
|
|
|
/**
|
|
* @fileoverview A separator used for separating toolbox categories.
|
|
*/
|
|
'use strict';
|
|
|
|
/**
|
|
* A separator used for separating toolbox categories.
|
|
* @class
|
|
*/
|
|
goog.module('Blockly.ToolboxSeparator');
|
|
|
|
const Css = goog.require('Blockly.Css');
|
|
const dom = goog.require('Blockly.utils.dom');
|
|
const registry = goog.require('Blockly.registry');
|
|
/* eslint-disable-next-line no-unused-vars */
|
|
const toolbox = goog.requireType('Blockly.utils.toolbox');
|
|
/* eslint-disable-next-line no-unused-vars */
|
|
const {IToolbox} = goog.requireType('Blockly.IToolbox');
|
|
const {ToolboxItem} = goog.require('Blockly.ToolboxItem');
|
|
|
|
|
|
/**
|
|
* Class for a toolbox separator. This is the thin visual line that appears on
|
|
* the toolbox. This item is not interactable.
|
|
* @extends {ToolboxItem}
|
|
* @alias Blockly.ToolboxSeparator
|
|
*/
|
|
class ToolboxSeparator extends ToolboxItem {
|
|
/**
|
|
* @param {!toolbox.SeparatorInfo} separatorDef The information
|
|
* needed to create a separator.
|
|
* @param {!IToolbox} toolbox The parent toolbox for the separator.
|
|
*/
|
|
constructor(separatorDef, toolbox) {
|
|
super(separatorDef, toolbox);
|
|
/**
|
|
* All the CSS class names that are used to create a separator.
|
|
* @type {!ToolboxSeparator.CssConfig}
|
|
* @protected
|
|
*/
|
|
this.cssConfig_ = {'container': 'blocklyTreeSeparator'};
|
|
|
|
/**
|
|
* @type {?HTMLDivElement}
|
|
* @private
|
|
*/
|
|
this.htmlDiv_ = null;
|
|
|
|
const cssConfig = separatorDef['cssconfig'] || separatorDef['cssConfig'];
|
|
Object.assign(this.cssConfig_, cssConfig);
|
|
}
|
|
|
|
/**
|
|
* @override
|
|
*/
|
|
init() {
|
|
this.createDom_();
|
|
}
|
|
|
|
/**
|
|
* Creates the DOM for a separator.
|
|
* @return {!HTMLDivElement} The parent element for the separator.
|
|
* @protected
|
|
*/
|
|
createDom_() {
|
|
const container =
|
|
/** @type {!HTMLDivElement} */ (document.createElement('div'));
|
|
dom.addClass(container, this.cssConfig_['container']);
|
|
this.htmlDiv_ = container;
|
|
return container;
|
|
}
|
|
|
|
/**
|
|
* @override
|
|
*/
|
|
getDiv() {
|
|
return /** @type {!HTMLDivElement} */ (this.htmlDiv_);
|
|
}
|
|
|
|
/**
|
|
* @override
|
|
*/
|
|
dispose() {
|
|
dom.removeNode(/** @type {!HTMLDivElement} */ (this.htmlDiv_));
|
|
}
|
|
}
|
|
|
|
/**
|
|
* All the CSS class names that are used to create a separator.
|
|
* @typedef {{
|
|
* container:(string|undefined)
|
|
* }}
|
|
*/
|
|
ToolboxSeparator.CssConfig;
|
|
|
|
/**
|
|
* Name used for registering a toolbox separator.
|
|
* @type {string}
|
|
*/
|
|
ToolboxSeparator.registrationName = 'sep';
|
|
|
|
/**
|
|
* CSS for Toolbox. See css.js for use.
|
|
*/
|
|
Css.register(`
|
|
.blocklyTreeSeparator {
|
|
border-bottom: solid #e5e5e5 1px;
|
|
height: 0;
|
|
margin: 5px 0;
|
|
}
|
|
|
|
.blocklyToolboxDiv[layout="h"] .blocklyTreeSeparator {
|
|
border-right: solid #e5e5e5 1px;
|
|
border-bottom: none;
|
|
height: auto;
|
|
margin: 0 5px 0 5px;
|
|
padding: 5px 0;
|
|
width: 0;
|
|
}
|
|
`);
|
|
|
|
registry.register(
|
|
registry.Type.TOOLBOX_ITEM, ToolboxSeparator.registrationName,
|
|
ToolboxSeparator);
|
|
|
|
exports.ToolboxSeparator = ToolboxSeparator;
|