function createControls(masterID) {
   const controls = document.createElement('div');
   controls.style.textAlign = 'initial';
   controls.id = masterID + 'Controls';

   //Append the child into the master DIV
   DIV[masterID].appendChild(controls);
   const lensButton = createLensButton();
   //Append the SVG button into controls
   controls.appendChild(lensButton);

   // Listener to enable/disable the zoom
   lensButton.addEventListener('click', toggleZoom);

   function createLensButton() {
      const zoomSVG = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
      zoomSVG.setAttributeNS(null, 'viewBox', '0 0 15.99 16');
      zoomSVG.style.marginTop = 10 + 'px';
      zoomSVG.style.objectFit ='contain';
      zoomSVG.style.width = '16px';
      zoomSVG.style.cursor = 'pointer';
      zoomSVG.style.height = '16px';
      zoomSVG.style.opacity = '0.3';
      zoomSVG.style.fill = 'steelblue';
      zoomSVG.id = masterID + 'ZoomButton';
      controls.appendChild(zoomSVG);

      const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
      path.setAttributeNS(null, 'd','M15.5,13.12L13.19,10.8a1.69,1.69,0,0,0-1.28-.55l-0.06-.06A6.5,6.5,0,0,0,5.77,0,6.5,6.5,0,0,0,2.46,11.59a6.47,6.47,0,0,0,7.74.26l0.05,0.05a1.65,1.65,0,0,0,.5,1.24l2.38,2.38A1.68,1.68,0,0,0,15.5,13.12ZM6.4,2A4.41,4.41,0,1,1,2,6.4,4.43,4.43,0,0,1,6.4,2Z');
      path.setAttributeNS(null, 'transforrm','translate(-.01)');
      path.setAttributeNS(null, 'x','0');
      path.setAttributeNS(null, 'y','0');
      path.setAttributeNS(null, 'height','14');
      path.setAttributeNS(null, 'width','14');
      zoomSVG.appendChild(path);

      return zoomSVG;
   }

   function toggleZoom() {
      IS_ZOOM[masterID] = !IS_ZOOM[masterID];

      if(IS_ZOOM[masterID]) {
         document.getElementById(masterID+ 'Zoom').style.display = 'inline-block';
         document.getElementById(masterID+ 'Lens').style.display = 'initial';

         lensButton.style.opacity = '1';
      } else {
         document.getElementById(masterID+ 'Zoom').style.display = 'none';
         document.getElementById(masterID+ 'Lens').style.display = 'none';

         lensButton.style.opacity = '0.3';
      }
   }
}
/**
 * This function create the controls for the script.
 * For now only the zoom is created, but this is here if you wan to add others option like rotate controls
 * There is no return because the controls are not only one
 *
 * @param masterID -- The ID of the main element
 */
This function create the controls for the script.
For now only the zoom is created, but this is here if you wan to add others option like rotate controls
There is no return because the controls are not only one

@param masterID -- The ID of the main element
This function create the controls for the script . For now only the zoom is created but this is here if you wan to add others option like rotate controls There is no return because the controls are not only one @param masterID -- The ID of the main element
function createControls(masterID) {
   const controls = document.createElement('div');
   controls.style.textAlign = 'initial';
   controls.id = masterID + 'Controls';
   DIV[masterID].appendChild(controls);
   const lensButton = createLensButton();
   controls.appendChild(lensButton);
   lensButton.addEventListener('click', toggleZoom);
   function createLensButton() {
      const zoomSVG = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
      zoomSVG.setAttributeNS(null, 'viewBox', '0 0 15.99 16');
      zoomSVG.style.marginTop = 10 + 'px';
      zoomSVG.style.objectFit ='contain';
      zoomSVG.style.width = '16px';
      zoomSVG.style.cursor = 'pointer';
      zoomSVG.style.height = '16px';
      zoomSVG.style.opacity = '0.3';
      zoomSVG.style.fill = 'steelblue';
      zoomSVG.id = masterID + 'ZoomButton';
      controls.appendChild(zoomSVG);
      const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
      path.setAttributeNS(null, 'd','M15.5,13.12L13.19,10.8a1.69,1.69,0,0,0-1.28-.55l-0.06-.06A6.5,6.5,0,0,0,5.77,0,6.5,6.5,0,0,0,2.46,11.59a6.47,6.47,0,0,0,7.74.26l0.05,0.05a1.65,1.65,0,0,0,.5,1.24l2.38,2.38A1.68,1.68,0,0,0,15.5,13.12ZM6.4,2A4.41,4.41,0,1,1,2,6.4,4.43,4.43,0,0,1,6.4,2Z');
      path.setAttributeNS(null, 'transforrm','translate(-.01)');
      path.setAttributeNS(null, 'x','0');
      path.setAttributeNS(null, 'y','0');
      path.setAttributeNS(null, 'height','14');
      path.setAttributeNS(null, 'width','14');
      zoomSVG.appendChild(path);
      return zoomSVG;
   }
   function toggleZoom() {
      IS_ZOOM[masterID] = !IS_ZOOM[masterID];
      if(IS_ZOOM[masterID]) {
         document.getElementById(masterID+ 'Zoom').style.display = 'inline-block';
         document.getElementById(masterID+ 'Lens').style.display = 'initial';
         lensButton.style.opacity = '1';
      } else {
         document.getElementById(masterID+ 'Zoom').style.display = 'none';
         document.getElementById(masterID+ 'Lens').style.display = 'none';
         lensButton.style.opacity = '0.3';
      }
   }
}
function createControls ( masterID ) { const controls = document . createElement ( 'div' ) ; controls . style . textAlign = 'initial' ; controls . id = masterID + 'Controls' ; DIV [ masterID ] . appendChild ( controls ) ; const lensButton = createLensButton ( ) ; controls . appendChild ( lensButton ) ; lensButton . addEventListener ( 'click' , toggleZoom ) ; function createLensButton ( ) { const zoomSVG = document . createElementNS ( 'http://www.w3.org/2000/svg' , 'svg' ) ; zoomSVG . setAttributeNS ( null , 'viewBox' , '0 0 15.99 16' ) ; zoomSVG . style . marginTop = 10 + 'px' ; zoomSVG . style . objectFit = 'contain' ; zoomSVG . style . width = '16px' ; zoomSVG . style . cursor = 'pointer' ; zoomSVG . style . height = '16px' ; zoomSVG . style . opacity = '0.3' ; zoomSVG . style . fill = 'steelblue' ; zoomSVG . id = masterID + 'ZoomButton' ; controls . appendChild ( zoomSVG ) ; const path = document . createElementNS ( 'http://www.w3.org/2000/svg' , 'path' ) ; path . setAttributeNS ( null , 'd' , 'M15.5,13.12L13.19,10.8a1.69,1.69,0,0,0-1.28-.55l-0.06-.06A6.5,6.5,0,0,0,5.77,0,6.5,6.5,0,0,0,2.46,11.59a6.47,6.47,0,0,0,7.74.26l0.05,0.05a1.65,1.65,0,0,0,.5,1.24l2.38,2.38A1.68,1.68,0,0,0,15.5,13.12ZM6.4,2A4.41,4.41,0,1,1,2,6.4,4.43,4.43,0,0,1,6.4,2Z' ) ; path . setAttributeNS ( null , 'transforrm' , 'translate(-.01)' ) ; path . setAttributeNS ( null , 'x' , '0' ) ; path . setAttributeNS ( null , 'y' , '0' ) ; path . setAttributeNS ( null , 'height' , '14' ) ; path . setAttributeNS ( null , 'width' , '14' ) ; zoomSVG . appendChild ( path ) ; return zoomSVG ; } function toggleZoom ( ) { IS_ZOOM [ masterID ] = ! IS_ZOOM [ masterID ] ; if ( IS_ZOOM [ masterID ] ) { document . getElementById ( masterID + 'Zoom' ) . style . display = 'inline-block' ; document . getElementById ( masterID + 'Lens' ) . style . display = 'initial' ; lensButton . style . opacity = '1' ; } else { document . getElementById ( masterID + 'Zoom' ) . style . display = 'none' ; document . getElementById ( masterID + 'Lens' ) . style . display = 'none' ; lensButton . style . opacity = '0.3' ; } } }
This function create the controls for the script.
This function create the controls for the script .
//Append the child into the master DIV //Append the SVG button into controls // Listener to enable/disable the zoom