Web technology sharing | whiteboard toolbar encapsulation of Web

Recently, I worked on a whiteboard project , The most important toolbar module was searched on the Internet, but it didn't find what it wanted , Be ruthless in your own native packaging .

Final effect display ：

Use the whiteboard SDK

Use anyRTC Whiteboard SDK Project address ：https://demos.anyrtc.io/whiteboard-next-demo/ If necessary , You can go to anyRTC Official website Consult customer service to download the source code

principle

Encapsulate a whiteboard toolbar , By passing in Containers id, Tool related configurations , Whiteboard instance , Automatically generate the corresponding left whiteboard toolbar

Container to create

<div id="ToolBarWhiteBoard"></div>

Tool related configurations

• Sidebar configuration
• icon: Toolbar icons
• brushtooltype: The tool type corresponding to the whiteboard
• brushFn: Whiteboard method for setting tool type
• The sidebar prompts you to configure
  • tip: Tips
• Sidebar content configuration
  • type: type
    • “progress” Progress bar
    • "color" Color
    • “form” shape
    • “text" written words

The specific configurations are shown as follows ：

//  Whiteboard color settings var brushColor = [  "#1A1A1E",  "#0089FF",  "#00E3FF",  "#31FF88",  "#FFEA00",  "#FF6800",  "#FF001C",  "#ffffff",];/** *  Whiteboard toolbar settings  * icon:  Toolbar icons  * tip:  Tips  * brushtooltype:  The tool type corresponding to the whiteboard  * brushFn:  Whiteboard method for setting tool type  * defaultcolor:  Default color  * detail:  Content module classification  * * type: toolbar Encapsulates the type used inside the component  * contenttext:  Content module name  * * *** progress  type （ Progress bar ） * * min:  minimum value  * * max:  Maximum  * * defaultsize:  Default size  * * *** color  type （ Color ） * * detailcolor:  Color array  * * defaultcolor:  Default color  * * *** text  type （ written words ） * * brushtooltype:  Whiteboard type , The interior only encapsulates “ Clean up graffiti / Whiteboard ” * * *** form  type （ Shape list ） * * detail:  Shape list  * * */var config_toolbar = [  {    icon: "icon-default",    tip: " mouse ",    brushtooltype: 0, //  Brush tool type  NONE    brushFn: "setBrushType", //  Whiteboard correspondence method   },  {    icon: "icon-select",    tip: " Picture selection ",    brushtooltype: 1, //  Brush tool type  SELECT    brushFn: "setBrushType", //  Whiteboard correspondence method   },  {    icon: "icon-pen",    tip: " Doodle ",    brushtooltype: 2, //  Brush tool type  FREE_DRAW    brushFn: "setBrushType", //  Whiteboard correspondence method     detail: [      {        type: "progress", //  Progress bar         contenttext: " Line width ",        brushFn: "setBrushThin", //  Whiteboard correspondence method         defaultsize: 3,        min: 1,        max: 10,      },      {        type: "color", //  Color         contenttext: " Color ",        detailcolor: brushColor,        defaultcolor: brushColor[0], //  Brush default color         brushFn: "setBrushColor", //  Whiteboard correspondence method       },    ],  },  {    icon: "icon-laser",    tip: " Laser pen ",    brushtooltype: 4, //  Brush tool type  LASER_POINTER    brushFn: "setBrushType", //  Whiteboard correspondence method   },  {    icon: "icon-eraser",    tip: " Eraser ",    brushtooltype: 3, //  Brush tool type  ERASER    brushFn: "setBrushType", //  Whiteboard correspondence method   },  {    icon: "icon-text",    tip: " Text ",    brushtooltype: 9, //  Brush tool type  TEXT    brushFn: "setBrushType", //  Whiteboard correspondence method     detail: [      {        type: "progress", //  Progress bar         contenttext: " Font size ",        brushFn: "setTextSize",        defaultsize: 14,        min: 10,        max: 50,      },      {        type: "color", //  Color         contenttext: " Color ",        detailcolor: brushColor,        defaultcolor: brushColor[0], //  Default text color         brushFn: "setTextColor", //  Whiteboard correspondence method       },    ],  },  {    icon: "icon-setting",    tip: " shape ",    brushtooltype: 7, //  Brush tool type  RECT    brushFn: "setBrushType", //  Whiteboard correspondence method     detail: [      {        type: "form", //  shape         detail: [          {            icon: "icon-rect",            tip: " rectangular ",            brushtooltype: 7, //  Brush tool type  RECT            brushFn: "setBrushType", //  Whiteboard correspondence method           },          {            icon: "icon-elipse",            tip: " The ellipse ",            brushtooltype: 8, //  Brush tool type  ELLIPSE            brushFn: "setBrushType", //  Whiteboard correspondence method           },          {            icon: "icon-arrow",            tip: " arrow ",            brushtooltype: 6, //  Brush tool type  ARROW            brushFn: "setBrushType", //  Whiteboard correspondence method           },          {            icon: "icon-line",            tip: " A straight line ",            brushtooltype: 5, //  Brush tool type  LINE            brushFn: "setBrushType", //  Whiteboard correspondence method           },        ],      },      {        type: "progress", //  Progress bar         contenttext: " Line width ",        brushFn: "setBrushThin", //  Whiteboard correspondence method         defaultsize: 3,        min: 1,        max: 10,      },      {        type: "color", //  Color         contenttext: " Color ",        detailcolor: brushColor,        defaultcolor: brushColor[0], //  Brush color         brushFn: "setBrushColor", //  Whiteboard correspondence method       },    ],  },  {    icon: "icon-clear",    tip: " eliminate ",    detail: [      {        contenttext: " Empty the graffiti ",        type: "text",        brushtooltype: " Doodle ", //        brushFn: "clear", //  Whiteboard correspondence method       },      {        contenttext: " Empty the whiteboard ",        type: "text",        brushtooltype: " Whiteboard ", //        brushFn: "clear", //  Whiteboard correspondence method       },    ],  },  {    icon: "icon-copy",    tip: " background ",    detail: [      {        type: "color", //  The background color         contenttext: " Color ",        detailcolor: brushColor,        // defaultcolor: brushColor[0], //  Default background color         brushFn: "setBackgroundColor", //  Whiteboard correspondence method       },    ],  },];

Toolbar style

To change , Please modify

.tip {  opacity: 0;  visibility: hidden;  transition: opacity 1s;  position: absolute;  padding: 6px 12px;  background-color: #5a5a66;  color: #fff;  display: flex;  justify-content: center;  align-items: center;  border-radius: 4px;  font-size: 12px;  user-select: none;  z-index: 20;}.tip::before {  content: "";  position: absolute;  width: 12px;  height: 12px;  border-radius: 2px;  background: #5a5a66;  transform: rotate(45deg);  z-index: 10;}.tip_left {  left: 60px;  width: 100%;}.tip_left::before {  left: -4px;}.tip_top {  top: -36px;}.tip_top::before {  bottom: -4px;}.tip_bottom {  bottom: -36px;  width: 100%;}.tip_bottom::before {  top: -4px;}.toolbar {  background: #ffffff;  border-radius: 4px;  box-shadow: 0px 2px 20px 0px rgba(192, 192, 205, 0.2);  padding: 8px 2px;}.toolbar .toolbar_tool {  position: relative;  padding: 2px 6px;}.toolbar .toolbar_tool .toolbar_tool_buton {  z-index: 40;  border-radius: 4px;  padding: 4px;  display: flex;  justify-content: center;  align-items: center;}.toolbar .toolbar_tool .toolbar_tool_buton .toolbar_tool_icon {  font-size: 20px;  opacity: 1;  color: #5a5a67;}.toolbar .toolbar_tool .toolbar_tool_buton .toolbar_tool_icon_activate {  color: #294bff;}.toolbar .toolbar_tool .toolbar_tool_buton:hover {  z-index: 40;  cursor: pointer;  background: #f5f6fa;}.toolbar .toolbar_tool .toolbar_tool_buton:hover .tip {  z-index: 40;  transition: opacity 1s;  opacity: 1;  visibility: visible;}.toolbar .toolbar_tool .toolbar_tool_detail {  z-index: 50;  transition: opacity 1s;  opacity: 0;  visibility: hidden;  position: absolute;  top: 0px;  left: 60px;  background: #fff;  box-shadow: 0px 2px 20px 0px rgba(192, 192, 205, 0.2);  display: flex;  flex-direction: column;  border-radius: 4px;  padding: 20px;  font-size: 12px;  color: #5a5a67;  user-select: none;}.toolbar .toolbar_tool .toolbar_tool_detail_visibility {  transition: opacity 1s;  opacity: 1;  visibility: visible;}.toolbar .toolbar_tool .toolbar_tool_color {  width: 100%;  height: 40px;}/* color */.colorinfo {  display: flex;  margin: 10px 0 0;  white-space: nowrap;}.colorinfo .colorlist {  display: grid;  grid-template-columns: repeat(4, 25%);  align-items: center;}.colorinfo .colorlist .color {  margin: 12px;  width: 20px;  height: 20px;  border-radius: 100%;  border: 1px solid #efefef;}.colorinfo .colorlist .color_active {  margin: 10px;  border: 2px solid #fff;  box-shadow: 0px 0px 2px 1px #294bff;}/* text */.detail_text {  cursor: pointer;  white-space: nowrap;  width: 100%;  padding: 6px 4px;  text-align: center;}.detail_text:hover {  background: #f5f6fa;}/* from */.form {  display: flex;}.form .form_button {  z-index: 50;  position: relative;  display: flex;  align-items: center;  justify-content: center;  margin-right: 8px;  padding: 4px;}.form .form_button:hover {  cursor: pointer;  background: #f5f6fa;  border-radius: 4px;}.form .form_button:hover .tip {  transition: opacity 1s;  opacity: 1;  visibility: visible;}.form .form_button:hover .tip_top {  top: -40px;  width: 100%;}.form .form_button .form_button_icon {  font-size: 20px;}.form .form_button .form_button_icon_active {  color: #294bff;}/* progress */.progressinfo {  display: flex;  align-items: center;  white-space: nowrap;}.progressinfo .progressinfo_text {  margin-right: 12px;}

Native packaging - Tool class

Progress bar encapsulation

/** *  Progress bar  */class progress {  constructor(options, callback) {    if (options) {      this.initprogress(options, callback);    }  }  //  initprogress(options, callback) {    options.max = Number(options.max);    options.min = Number(options.min);    //  Create the outermost     const oProgress = document.createElement("div");    oProgress.className = "progress";    const oProgressWidth = oProgress.offsetWidth;    //  Create a progress bar drag point     const oProgressDot = document.createElement("div");    oProgressDot.className = "progress_dot";    oProgressDot.style.marginLeft =      (options.defaultwidth / (options.max - options.min)) * oProgressWidth +      "px";    //  Create prompt     const oCreateToolDetailTip = document.createElement("div");    oCreateToolDetailTip.className = "tip tip_top";    oCreateToolDetailTip.textContent = options.defaultwidth;    oProgressDot.appendChild(oCreateToolDetailTip);    //  Create a progress bar bg    const oProgressBg = document.createElement("div");    oProgressBg.className = "progress_bg";    oProgressBg.style.width =      (options.defaultwidth / (options.max - options.min)) * oProgressWidth +      "px";    //    const oProgressBgPro = document.createElement("div");    oProgressBgPro.className = "progress_bgpro";    oProgress.appendChild(oProgressBgPro);    oProgress.appendChild(oProgressDot);    oProgress.appendChild(oProgressBg);    options.document.appendChild(oProgress);    var isfalse = false,      m = Math,      b = document.body,      value = 0,      ratio = options.max - options.min;    oProgressDot.onmousedown = function (e) {      //  Stop bubbling       stopBubble(e);      isfalse = true;      var X = e.clientX;      var offleft = this.offsetLeft;      var max = oProgress.offsetWidth - this.offsetWidth;      oProgress.onmousemove = function (e) {        if (isfalse == false) {          return;        }        var changeX = e.clientX;        var moveX = m.min(max, m.max(-2, offleft + (changeX - X)));        value = m.round(m.max(0, moveX / max) * ratio) + options.min;        oCreateToolDetailTip.textContent = value;        oProgressDot.style.marginLeft = m.max(0, moveX) + "px";        oProgressBg.style.width = moveX + 6 + "px";      };    };    oProgress.onmouseup = function () {      if (isfalse) {        callback(Number(value));      }      isfalse = false;    };    oProgress.onmouseleave = function () {      if (isfalse) {        callback(Number(value));      }      isfalse = false;    };  }}

Progress bar style

.progress {  width: 100%;  height: 4px;  padding: 20px 0;  background: #fff;  border-radius: 3px;  position: relative;}.progress .progress_dot {  width: 12px;  height: 12px;  border-radius: 50%;  background: #294bff;  position: absolute;  margin-top: -4px;  cursor: pointer;  border: 1px solid #fff;  box-shadow: 0px 0px 3px #294bff;  display: flex;  justify-content: center;}.progress .progress_dot:hover .tip {  transition: opacity 1s;  opacity: 1;  visibility: visible;}.progress .progress_dot:hover .tip_top {  top: -44px;}.progress .progress_bg {  width: 0px;  height: 4px;  background-color: #294bff;  border-radius: 3px;  position: absolute;}.progress .progress_bgpro {  width: 100%;  height: 4px;  background-color: #f0f0fc;  border-radius: 3px;  position: absolute;}

The specific packaging code is as follows ：

//  Side toolbar class ToolBar {  constructor(options) {    if (options) {      //  Get the container       const oToolBar = document.getElementById(options.el);      oToolBar.className = "toolbar";      // oToolBar.style.height = options.infolists.length * 40 + "px";      this.board = options.board;      this.toolbaar = oToolBar;      //  Create container sidebar       this.createSideBar(oToolBar, options.infolists);    }    //  Clear container contents display     const oBody = document.getElementsByTagName("body")[0];    oBody.addEventListener("click", this.clearShow);  }  //  Create sidebar   createSideBar(toolbarDom, infolists) {    infolists.map((info, index) => {      //  Create tools       const oCreateTool = document.createElement("div");      oCreateTool.className = "toolbar_tool";      //  Tool button       const oCreateToolButton = document.createElement("div");      oCreateToolButton.className = "toolbar_tool_buton";      //  Tool button icon ( The first... Is selected by default  )      const oCreateToolButtonIcon = document.createElement("i");      if (index == 0) {        oCreateToolButtonIcon.className =          "toolbar_tool_icon toolbar_tool_icon_activate iconfont " + info.icon;      } else {        oCreateToolButtonIcon.className =          "toolbar_tool_icon iconfont " + info.icon;      }      //  The tool passes the prompt tip      const oCreateToolTip = document.createElement("div");      oCreateToolTip.className = "tip tip_left";      oCreateToolTip.textContent = info.tip;      //  add to       oCreateToolButton.appendChild(oCreateToolButtonIcon);      oCreateToolButton.appendChild(oCreateToolTip);      oCreateTool.appendChild(oCreateToolButton);      toolbarDom.appendChild(oCreateTool);      //  Create sidebar content       if (info.detail && info.detail.length > 0) {        this.createSideBarDetail(oCreateTool, info.detail);      }      //  Sidebar Click       this.showSideBarDetail(oCreateTool, info);    });  }  //  Create sidebar content   createSideBarDetail(toolDom, detailedinfo) {    //  Create a detailed classification     const oCreateToolDetail = document.createElement("div");    oCreateToolDetail.className = "toolbar_tool_detail";    const _this = this;    detailedinfo.map((detail) => {      switch (detail.type) {        case "progress":          //  Set the default size           _this.board[detail.brushFn](detail.defaultsize);          const oProgress = document.createElement("div");          oProgress.className =            detail.brushFn == "setBrushThin"              ? "progressinfo thin_progress "              : "progressinfo size_progress";          if (detail.contenttext) {            const oProgressText = document.createElement("div");            oProgressText.className = "progressinfo_text";            oProgressText.textContent = detail.contenttext;            oProgress.appendChild(oProgressText);          }          //  Progress bar           new progress(            {              document: oProgress,              defaultwidth:                detail.brushFn == "setBrushThin"                  ? _this.board.getBrushThin()                  : _this.board.getTextSize(),              min: detail.min,              max: detail.max,            },            function (num) {              _this.board[detail.brushFn](num);            }          );          oCreateToolDetail.appendChild(oProgress);          break;        case "color":          const oColorInfoList = document.createElement("div");          oColorInfoList.className = "colorinfo";          oColorInfoList.onclick = function (e) {            //  Stop bubbling             stopBubble(e);          };          if (detail.contenttext) {            const oCreateToolDetailColorText = document.createElement("div");            oCreateToolDetailColorText.textContent = detail.contenttext;            oColorInfoList.appendChild(oCreateToolDetailColorText);          }          const oCreateToolDetailColorList = document.createElement("div");          oCreateToolDetailColorList.className = "colorlist";          if (detail.brushFn == "setBrushColor") {            //  Brush default color             _this.board[detail.brushFn](detail.defaultcolor);          } else if (            detail.brushFn == "setBackgroundColor" &&            detail.defaultcolor          ) {            //  Default background color ( The whiteboard can be set only after it is created )            let oTimer = setInterval(function () {              if (_this.board.getCurrentBoardId()) {                clearInterval(oTimer);                _this.board[detail.brushFn](detail.defaultcolor);              }            });          } else if (detail.brushFn == "setTextColor" && detail.defaultcolor) {            //  Default color of text             _this.board[detail.brushFn](detail.defaultcolor);          }          detail.detailcolor.map((color) => {            const oCreateToolDetailColor = document.createElement("div");            oCreateToolDetailColor.setAttribute("data-color", color);            if (detail.brushFn == "setBrushColor") {              //  Brush related colors               oCreateToolDetailColor.className =                detail.defaultcolor == color                  ? "color color_active bu_color"                  : "color bu_color";            } else if (detail.brushFn == "setBackgroundColor") {              //  White board background color               oCreateToolDetailColor.className = "color bg_color";            } else if (detail.brushFn == "setTextColor") {              //  Whiteboard text default color               oCreateToolDetailColor.className =                detail.defaultcolor == color                  ? "color color_active text_color"                  : "color text_color";            }            oCreateToolDetailColor.style.backgroundColor = color;            oCreateToolDetailColor.onclick = function (e) {              //  Stop bubbling               stopBubble(e);              _this.board[detail.brushFn](color);              _this.clearColor(_this.board, detail);              _this.clearShow();            };            oCreateToolDetailColorList.appendChild(oCreateToolDetailColor);          });          oColorInfoList.appendChild(oCreateToolDetailColorList);          oCreateToolDetail.appendChild(oColorInfoList);          break;        case "form":          const oCreateToolDetailFrom = document.createElement("div");          oCreateToolDetailFrom.className = "form";          detail.detail.map((form) => {            const oCreateToolDetailButton = document.createElement("div");            oCreateToolDetailButton.className = "form_button";            oCreateToolDetailButton.setAttribute(              "data-form",              form.brushtooltype            );            //  Sort tool button tips tip            const oCreateToolDetailTip = document.createElement("div");            oCreateToolDetailTip.className = "tip tip_top";            oCreateToolDetailTip.textContent = form.tip;            //  Sort tool button icon            const oCreateToolDetailButtonIcon = document.createElement("i");            oCreateToolDetailButtonIcon.className =              "form_button_icon iconfont " + form.icon;            oCreateToolDetailButton.appendChild(oCreateToolDetailTip);            oCreateToolDetailButton.appendChild(oCreateToolDetailButtonIcon);            oCreateToolDetailButton.onclick = function (e) {              //  Stop bubbling               stopBubble(e);              _this.board[form.brushFn](form.brushtooltype);              _this.formBrush(_this.board);              _this.clearShow();            };            oCreateToolDetailFrom.appendChild(oCreateToolDetailButton);            oCreateToolDetail.appendChild(oCreateToolDetailFrom);          });          break;        case "text":          const oText = document.createElement("div");          if (detail.contenttext) {            oText.textContent = detail.contenttext;          }          oText.className = "detail_text";          oText.onclick = function (e) {            //  Stop bubbling             stopBubble(e);            if (detail.brushtooltype == " Doodle ") {              _this.board[detail.brushFn]();            } else if (detail.brushtooltype == " Whiteboard ") {              _this.board[detail.brushFn](true);            }            //  Clear and change the mouse             _this.board.setBrushType(0);            _this.clearShow();          };          oCreateToolDetail.style.alignItems = "center";          oCreateToolDetail.appendChild(oText);          break;        default:          break;      }    });    toolDom.appendChild(oCreateToolDetail);  }  //  The sidebar content displays / hide   showSideBarDetail(toolDom, detailedinfo) {    const _this = this;    toolDom.onclick = function (e) {      //  Stop bubbling       stopBubble(e);      if (detailedinfo.brushFn) {        _this.board[detailedinfo.brushFn](detailedinfo.brushtooltype);      }      if (detailedinfo.detail) {        detailedinfo.detail.map((item) => {          switch (item.type) {            case "progress":              //  The progress bar is displayed by default               _this.progressDefault(_this.board, item);              break;            case "color":              //  Current background color               _this.clearColor(_this.board, item);              break;            case "form":              //  shape ( Current brush shape )              _this.formBrush(_this.board);              break;            default:              break;          }        });      }      const oCreateToolDetail = toolDom.getElementsByClassName(        "toolbar_tool_detail"      )[0];      if (oCreateToolDetail) {        if (          oCreateToolDetail.classList.contains("toolbar_tool_detail_visibility")        ) {          oCreateToolDetail.classList.remove("toolbar_tool_detail_visibility");        } else {          _this.clearShow();          oCreateToolDetail.classList.add("toolbar_tool_detail_visibility");        }      } else {        _this.clearShow();      }      //  Click effect       const oSelectIcon =        toolDom.getElementsByClassName("toolbar_tool_icon")[0];      const oAllButton = document.getElementsByClassName("toolbar_tool_icon");      for (let detail = 0; detail < oAllButton.length; detail++) {        oAllButton[detail].classList.remove("toolbar_tool_icon_activate");      }      oSelectIcon.classList.add("toolbar_tool_icon_activate");    };  }  //  Color clear   clearColor(board, info) {    let oBoardColor = null;    let oColorList = null;    if (info.brushFn == "setBrushColor") {      //  Brush color       oBoardColor = board.getBrushColor();      oColorList = document.getElementsByClassName("bu_color");    } else if (info.brushFn == "setBackgroundColor") {      //  The background color       oBoardColor = board.getBackgroundColor();      oColorList = document.getElementsByClassName("bg_color");    } else if (info.brushFn == "setTextColor") {      //  text color       oBoardColor = board.getTextColor();      oColorList = document.getElementsByClassName("text_color");    }    for (let index = 0; index < oColorList.length; index++) {      if (oBoardColor == oColorList[index].getAttribute("data-color")) {        oColorList[index].classList.add("color_active");      } else {        oColorList[index].classList.remove("color_active");      }    }  }  //  The progress bar is displayed by default   progressDefault(board, info) {    let boardwidth = null;    let oBrushAllProgress = null;    if (info.brushFn == "setBrushThin") {      boardwidth = board.getBrushThin();      oBrushAllProgress = document.getElementsByClassName("thin_progress");    } else if (info.brushFn == "setTextSize") {      boardwidth = board.getTextSize();      oBrushAllProgress = document.getElementsByClassName("size_progress");    }    if (oBrushAllProgress) {      for (let x = 0; x < oBrushAllProgress.length; x++) {        const oAllProgress =          oBrushAllProgress[x].getElementsByClassName("progress");        for (let index = 0; index < oAllProgress.length; index++) {          const oProgressWidth = oAllProgress[index].offsetWidth;          const oDot =            oAllProgress[index].getElementsByClassName("progress_dot")[0];          const oBg =            oAllProgress[index].getElementsByClassName("progress_bg")[0];          const oTip = oAllProgress[index].getElementsByClassName("tip")[0];          oDot.style.marginLeft =            ((boardwidth - info.min) / (info.max - info.min)) *              (oProgressWidth - oDot.offsetWidth) +            "px";          oBg.style.width =            ((boardwidth - info.min) / (info.max - info.min)) *              (oProgressWidth - oDot.offsetWidth) +            "px";          oTip.textContent = boardwidth;        }      }    }  }  //  shape ( Current brush shape )  formBrush(board) {    //  Current brush shape     const oBrush = board.getBrushType();    const oBrushLists = document.getElementsByClassName("form_button");    for (let index = 0; index < oBrushLists.length; index++) {      const oIcon =        oBrushLists[index].getElementsByClassName("form_button_icon")[0];      if (oBrushLists[index].getAttribute("data-form") == oBrush) {        oIcon.classList.add("form_button_icon_active");      } else {        oIcon.classList.remove("form_button_icon_active");      }    }  }  //  All display effects are cleared   clearShow() {    const oAllDetail = document.getElementsByClassName("toolbar_tool_detail");    if (oAllDetail && oAllDetail.length > 0) {      for (let detail = 0; detail < oAllDetail.length; detail++) {        oAllDetail[detail].classList.remove("toolbar_tool_detail_visibility");      }    }  }  //  The destruction   destroy() {    this.toolbaar.innerHTML = "";  }}