DEV Community: Vladimir Kheifets

CrossPoint, CompacktDOM script

Vladimir Kheifets — Mon, 30 May 2022 03:18:59 +0000

CrossPoint, CompacktDOM script

Version: 1.0, 2022-05-19

Author: Vladimir Kheifets kheifets.vladimir@online.de

CompactDOM on GitHub

Online-tutorial of the Java Script Library CompactDOM

CrossPoint Demo, CrossPoint on GitHub

About CrossPoint

The CrossPoint script calculate crossing point of two straight lines or line segments.

You can draw two line segments on a plane bounded by a rectangle and
calculate the coordinate of their intersection point.

1. Drawing the line segments on a plane.

On device without a touch screen, use the mouse cursor to indicate the starting point of
the line segment and press the left mouse button, also indicate the end point.
On touch screen devices, touch the start and end points for each line segment.

2. Coordinates of start and end points.

The coordinates (only positive values) of the mouse cursor or screen finger touch coordinate
are defined in the global coordinate system.
The origin of the coordinates (0,0) is located in the upper left corner of the rectangle bounding the plane.
The x-axis is directed from top to bottom, the y-axis is from left to right.
For each line segment, absolute coordinates and Cartesian coordinates are determined.
The origin (0,0) of the Cartesian coordinate system is at the center of the rectangle bounding the plane.

3. Transforming the line segments to a straight line.

After two line segments are drawn, radio buttons appear: "LINE SEGMENT" and "LINE".
If you check the "LINE" button, then the line segment will be transformed into a straight line passing
through two given points until it intersects with a rectangle bounding the plane.

4. Calculation of the coordinates of the intersection point.

To calculate the intersection point, click the "Calculate with JS" or "Calculate with PHP" button.
If the "Calculate with PHP" button is pressed, AJAX-Request will be sent to the server
and AJAX-Response" will be received.
The request file crossPointRequest.json
and response file crossPointResponse.json will be saved on the server.

index.html

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="CompactDOM.min.js"></script>
<script type="text/javascript" src="index.js"></script>
</head>
<body>
  <header>
   <h1></h1>
   <div>
    <input><label></label>
    <input><label></label>
    <span id="a1"></span>
    <span id="b1"></span>
  </div>
  <div>
    <input><label></label>
    <input><label></label>
    <span id="a2"></span>
    <span id="b2"></span>
  </div>
  </header>
<main></main>
</body>
</html>

index.js CompactDOM script

/*

Cross Point

CompactDOM script

Version: 1.0, 2022-05-19

Author: Vladimir Kheifets (kheifets.vladimir@online.de)

Copyright ©2022 Vladimir Kheifets All Rights Reserved

Online-tutorial of the Java Script Library CompactDOM:
https://www.alto-booking.com/developer/CompactDOM/

CompactDOM on GitHub:
https://github.com/VladimirKheifets/Java-Script-library-CompactDOM

*/

__.laSelector("en");
dic = __.getDictionary(_dirLa);
//---------------------------------
  __.ready(() => {
  Env = __.env();
  __.on(Env.eor, ev => { __.reload();});
  //------------------------------------------------
  head = _("head");
  title = dic.title;
  head.create( title, {tag:"title"} );
  head.create(1,{ tag:"meta", charset:"utf-8" });
  head.create(1,
  {
    tag:"meta",
    name:"viewport",
    content:"width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, user-scalable=0"
  });
  __.link("css/index.css,css/modal.css,css/button_to_up.css,css/selLanguages.css");
  ctx = [];
  lay = [];
  lines = {};
  inp = _("input");
  lab = _("label");

  //------------------------------------------------
  colors = {1:"blue", 2:"purple", 3:"red"};
  canvasWidthD = [300,500,500,600,860];
  canvasHeightD = [300,300,300,400,400];
  Env = __.env();
  canvasWidth = canvasWidthD[Env.dev];
  canvasHeight = canvasHeightD[Env.dev];
  gridCell = 10;
  X0 = canvasWidth/2 - 1;
  Y0 = canvasHeight/2 - 1;

  main = _("main");
  mainCanvasSt = "width:"+canvasWidth+"px;height:"+canvasHeight+"px"
  main.css(mainCanvasSt);
  _("header h1").content(title);

  //-- canvas -------------------------------------------------------
  main.create(3,
    {
      tag: "canvas",
      id: "lay",
      width: canvasWidth,
      height: canvasHeight,
      style:mainCanvasSt
    });
  elCanvas = _("canvas");
  //---LINE div --------------------------------------
    _("header div").each((el,ind) => {
      i = ind + 1;
      el.css("color:" + colors[i]);
      el.attr("id","dL"+i);
  });


 labContent=dic.switch.concat(dic.switch);
 _("label").each((el,ind)=>{el.content(labContent[ind])});

  //-- footer -------------------------------------------------------
  d = new Date();
  year = d.getFullYear();
  footer = "<p>&copy; </p>" + year + " Alto Booking"
  footerSt="margin-top:"+ (canvasHeight+20) + "px";
  main.create(footer, {add:"after",tag:"footer"});//, style:footerSt
  //------------------------------------------------------------------

  nav = __.create(1, {tag:"nav"});
  nav.create(
    dic.button,
    {
      tag:"button",
      id:"but"
    }
  );

  navCSS = "top:"+(_("header").position().top+10)+"px";
  nav.css(navCSS);
  navHide = () =>{if(Env.dev<3) nav.hide();};
  res = __.create(1,{tag:"p"});
  res.css("height:55px");
  res.hide(100);
  if(Env.dev < 3)
  {
    menu  = main.create(1, {add:"after",tag:"div", id:"menu"});
    fileName=(Env.tou?"menuts":"menu")+".html";
    menu.include(fileName);
    nav.hide();
    res.css(navCSS);
    menu.click(()=>{
      if(nav.ishide())
        nav.show();
      else
        nav.hide();
      if(!res.ishide())
        res.hide(100);
    });
  }

  i=1;
  while(i<3)
  {
    aI = "a" + i;
    bI = "b" + i;
    lines[aI] = _("#" + aI);
    lines[bI] = _("#" + bI);
    _("#dL"+i +" input").each((el,ind) => {
      el.attr(
      {
        "type" : "radio",
        "id" : "inp" + i,
        "name" : "inp" + i,
        "value" : ind+1
      }
      );
    });
    i++;
  }

  // Defining canvas & layots
  elCanvas.each((el,ind) => {
    ctx[ind] = el.d.getContext('2d');
    lay[ind] = el;
    el.css("z-index:" + ind);
  });

  startSetting = () => {
    pXY = {
      width: canvasWidth,
      height: canvasHeight,
      1:{line:{}},
      2:{line:{}}
    };
    activesPoint = {1:"a", 2:"a"};
    Drawing = {1:true,2:true};
    lay[2].hide();
    _("span").each((el) => {el.content("")});
    but = [];
    _("button").each( (el, ind) => {
      but[ind] = el;
      if(ind>1) el.hide();
    });
    inp.each( (el, ind) => {
      if(ind == 0 || ind == 2) el.checked(2);
      el.css("opacity:0");
    });
    lab.each( (el, ind) => {
      if(ind == 1 || ind == 3) el.css("opacity:0");
    });
    res.css("opacity:0");
  };

  showLineSelector = (iL) => {
    inpEl = {1:[0,1], 2:[2,3]};
    labEl = {1:[1],2:[3]};
    inp.each( (el, ind) => {
      if(inpEl[iL].includes(ind))
        el.css("opacity:1");
    });
    lab.each( (el, ind) => {
      if(labEl[iL].includes(ind))
        el.css("opacity:1");
    });
  }



  drawingGrid = (cansasW, cansasH, sizeCell, c, color) => {
    c.strokeStyle = "#ddd";
    for (var x = sizeCell; x < cansasW; x += sizeCell) {
      c.moveTo(x, 0);
      c.lineTo(x, cansasH);
    }

    for (var y = sizeCell; y < cansasH; y += sizeCell) {
      c.moveTo(0, y);
      c.lineTo(cansasW, y);
    }
    c.stroke();
  }

  drawingAxes = (cansasW, cansasH, c, color) => {
    // Drawing axes, Decart 0 in canvas x=399, y=198
    // Axis X
    x1X = 10;
    y1X = cansasH/2;
    x2X = cansasW - 20;
    y2X = y1X;
    drawingLine(c, x1X, y1X, x2X, y2X, color);
    drawingLine(c, x2X-10, y2X+5, x2X, y2X, color);
    drawingLine(c, x2X-10, y2X-5, x2X, y2X, color);
    drawingText(c,'X', x2X+2, y2X+7, color);

    // Axis Y
    x1Y = cansasW/2;
    y1Y = x1X+10;
    x2Y = x1Y;
    y2Y = cansasH - 10;
    drawingLine(c, x1Y, y1Y, x2Y, y2Y, color);
    drawingLine(c, x2Y+5, y1Y+10, x1Y, y1Y, color);
    drawingLine(c, x2Y-5, y1Y+10, x1Y, y1Y, color);
    drawingText(c,'Y', x1Y-6, y1Y-3, color);
  }


  drawingLine = (c, x1, y1, x2, y2, color )=> {
    c.beginPath();
    c.strokeStyle = color;
    c.moveTo(x1, y1);
    c.lineTo(x2, y2);
    c.closePath();
    c.stroke();
  };

  drawingPoint = (c, x, y, color )=> {
    c.beginPath();
    c.fillStyle = color;
    c.arc(x, y, 3, 0, 2 * Math.PI);
    c.fill();
    c.closePath();
    c.stroke();
  };

  drawingText = (c, text, x, y, color, font )=> {
    if(__.u(font)) font = '16px arial'
    c.beginPath();
    c.fillStyle = color;
    c.font = font;
    c.fillText(text, x, y);
    c.fill();
    c.closePath();
    c.stroke();
  };

  clearCanvas = (c) => {c.clearRect(0, 0, canvasWidth, canvasHeight)};

  butShowHide = (s) => {
    i = 2;
    while(i<but.length)
    {
      if(s)
        but[i].show();
      else
        but[i].hide();
      i++;
    }
  };


  ePoint = (e) => {
    id = e.target.id;
    ind = parseInt(id.substr(3))-1;
    x = e.offsetX;
    y = e.offsetY;
    Xd = x - X0;
    Yd = Y0 - y;
  };

  getlineABC = (XY) => {
     if(__.a(XY))
     {
        x1 = XY[0];
        y1 = XY[1];
        x2 = XY[2];
        y2 = XY[3];
     }
     else
     {
      x1 = XY["Xad"];
      y1 = XY["Yad"];
      x2 = XY["Xbd"];
      y2 = XY["Ybd"];
     }
     A = y2 - y1;
     B = x1 - x2;
     C = -x1*y2 + y1*x2;
     return [A,B,C];
   };

  crossPoint = (ABC1, ABC2) => {
    A1 = ABC1[0];
    B1 = ABC1[1];
    C1 = ABC1[2];
    A2 = ABC2[0];
    B2 = ABC2[1];
    C2 = ABC2[2];
    Xcd = Math.round((B1*C2 - B2*C1)/(A2*B2 - A2*B1));
    Ycd = Math.round((A1*C2 - A2*C1)/(A2*B1 - A1*B2));
    Xc = Xcd + X0;
    Yc = Y0 - Ycd;
    return [Xc, Yc, Xcd, Ycd];
  };

  crossPointK = (XY1, XY2, X0, Y0 ) => {
    x1 = XY1["Xad"];
    y1 = XY1["Yad"];
    x2 = XY1["Xbd"];
    y2 = XY1["Ybd"];

    x3 = XY2["Xad"];
    y3 = XY2["Yad"];
    x4 = XY2["Xbd"];
    y4 = XY2["Ybd"];
    //-----------------------------------
    z1 = (x3-x1)*(y2-y1)-(y3-y1)*(x2-x1);
    z2 = (x4-x1)*(y2-y1)-(y4-y1)*(x2-x1);
    z3 = (x1-x3)*(y4-y3)-(y1-y3)*(x4-x3);
    z4 = (x2-x3)*(y4-y3)-(y2-y3)*(x4-x3);
    crossPointCheck = (z3*z4>0 || z1*z2>0)?false:true;
    //-----------------------------------
    if(crossPointCheck)
    {
      k1 = (y1 - y2) / (x1 - x2);
      b1 = y2 - k1 * x2;
      k2 = (y3 - y4) / (x3 - x4);
      b2 = y4 - k2 * x4;
      Xd = Math.round((b2 - b1)/(k1 - k2));
      Yd = Math.round(k1*Xd + b1);
      X = Xd + X0;
      Y = Y0 - Yd;
      return {
        crossPointCheck: true,
        X:X,
        Y:Y,
        Xd:Xd,
        Yd:Yd
      };
    }
    else
      return {
        crossPointCheck:false
    };
  };

  elCanvas.on('click', (e) => { //mouseclick or touchstart
    navHide();
    ePoint(e);
    if(Drawing[ind])
    {
      drawingPoint(ctx[ind], x, y, colors[ind]);
      if(activesPoint[ind]==="a")
      {
        activesPoint[ind] = "b";
        pXY[ind]["Xa"] = x;
        pXY[ind]["Ya"] = y;
        pXY[ind]["Xad"] = Xd;
        pXY[ind]["Yad"] = Yd;
      }
      else
      {
        pXY[ind]["Xb"] = x;
        pXY[ind]["Yb"] = y;
        pXY[ind]["Xbd"] = Xd;
        pXY[ind]["Ybd"] = Yd;
        drawingLine(ctx[ind], pXY[ind]["Xa"], pXY[ind]["Ya"], x, y, colors[ind]);
        lay[2].show();
        Drawing[ind] = false;
        if(ind == 2)
        {
          butShowHide(1);
          showLineSelector(1);
          showLineSelector(2);
        }
      }
    }
  });

  elCanvas.on('mousemove', (e) => {
    navHide();
    ePoint(e);
    if(Drawing[ind])
    {
      ab = activesPoint[ind];
      if(ab === "b")
      {
         clearCanvas(ctx[ind]);
         drawingPoint(ctx[ind], pXY[ind]["Xa"], pXY[ind]["Ya"], colors[ind]);
         drawingLine(ctx[ind], pXY[ind]["Xa"], pXY[ind]["Ya"], x, y, colors[ind]);
         contP = dic.points[1] + ": ";
      }
      else
        contP = " "+dic.points[0]+": ";
      lines[ab+ind].content(contP + "x = "+Xd+", y = "+Yd);
    }
  });

  inp.change((e) => {
    el = e.target;
    id = _(el).attr("id");
    i = id.substr(3);
    if(activesPoint[i]==="b")
    {
      val = parseInt(_(el).val());
      if(val === 2)
      {
        ABC1 = getlineABC(pXY[i]);
        cHalbW = canvasWidth/2;
        cHalbH = canvasHeight/2;
        ABC2a = getlineABC([-cHalbW, -cHalbH, -cHalbW, cHalbH]);
        ABC2b = getlineABC([cHalbW, -cHalbH, cHalbW, cHalbH]);
        XYca = crossPoint(ABC1, ABC2a);
        XYcb = crossPoint(ABC1, ABC2b);
        drawingLine(ctx[i], XYca[0], XYca[1],  XYcb[0], XYcb[1], colors[i]);
        pXY[i]["line"] = {
          Xa:  XYca[0],
          Ya:  XYca[1],
          Xad: XYca[2],
          Yad: XYca[3],
          Xb:  XYcb[0],
          Yb:  XYcb[1],
          Xbd: XYcb[2],
          Ybd: XYcb[3]
        };
      }
      else
      {
         clearCanvas(ctx[i]);
         drawingPoint(ctx[i], pXY[i]["Xa"], pXY[i]["Ya"], colors[i]);
         drawingLine(ctx[i], pXY[i]["Xa"], pXY[i]["Ya"], pXY[i]["Xb"], pXY[i]["Yb"], colors[i]);
         drawingPoint(ctx[i], pXY[i]["Xb"], pXY[i]["Yb"], colors[i]);
         delete pXY[i].line;
      }
    }
  });

  showResult = (XYcp, code) => {
    if(__.u(code)) code="PHP";
    res.show(1);
    if(XYcp["crossPointCheck"])
    {
      drawingPoint(ctx[2], XYcp["X"], XYcp["Y"], colors[3]);
      out = "Crossing point found.<br>";
      out += "Coordinates ";
      out += "X: "+XYcp["Xd"] + ", Y: " + XYcp["Yd"];
      out += "<br>calculated with " + code;
      res.content(out);
    }
    else
    {
      out = "Crossing point not found!<br>";
      out += "Please click the \"clear\"<br>button and try again.";
      res.content(out);
    }
  };

  printInfo = (rsp) => {
    txt=dic.structure;
      var   out = "<div>";
      if(rsp)
      {
        out += txt[0];
      }
      out += txt[1];
      if(rsp)
      {
        out += txt[2];
      }
      out += "</div>";
      return out;
  };

  _("button").click((e) => {
  id = e.target.id;
  i = parseInt(id.substr(3));
    switch(i)
    {
      case 1:
      obj=
      {
        url:_dirLa+"/help.html",
        method:"get",
        func:(rsp) => {
         __.modal(rsp);
        },
        debug:1
      }
      __.send(obj);
      break;

      case 2:
      clearCanvas(ctx[0]);
      if(gridOn)
      {
        gridOn = false
        drawingAxes(canvasWidth, canvasHeight, ctx[0], "#aaa");
      }
      else
      {
        gridOn = true;
        drawingGrid(canvasWidth, canvasHeight, 10, ctx[0], "#ddd");
        drawingAxes(canvasWidth, canvasHeight, ctx[0], "#aaa");
      }
      break;

      case 3:
      XY1 = (pXY[1].line.Xa)?pXY[1].line:pXY[1];
      XY2 = (pXY[2].line.Xb)?pXY[2].line:pXY[2];
      XYcp =  crossPointK(XY1, XY2, X0, Y0 );
      showResult(XYcp,"Java Script");
      console.log(XYcp);
      break;

      case 4:
      obj=
      {
        url:"crossPoint.php",
        method:"post",
        dataType: "json",
        responseType: "json",
        data:pXY,
        func: showResult
      }
      __.send(obj);
      break;

      case 5:
      obj=
      {
        url:"crossPoint.php?pr=1",
        method:"post",
        dataType: "json",
        data:pXY,
        func: (rsp) => {
          out = "<div class = 'outPr'>";
          out += rsp;
          out += printInfo(true);
          out += "</div>";
          __.modal(out);
        }
      }
      __.send(obj);
      break;

      case 6:
      obj=
      {
        url:"crossPoint.php?pr=2",
        method:"post",
        dataType: "json",
        data:pXY,
        func: (rsp) => {
          out = "<div class = 'outPr'>";
          out += rsp;
          out += printInfo();
          out += "</div>";
          __.modal(out);
        }
      }
      __.send(obj);
      break;

      case 7:
      clearCanvas(ctx[1]);
      clearCanvas(ctx[2]);
      startSetting();
      break;
    }
    navHide();
  });

  //----------------------------------------------
  gridOn = true;
  drawingGrid(canvasWidth, canvasHeight, gridCell, ctx[0], "#ddd");
  drawingAxes(canvasWidth, canvasHeight, ctx[0], "#aaa");
  startSetting();
  __.modal();
  __.scroll();
  __.laSelector();
 });

Data structure.

Object pXY & AJAX Request

Keys of line segments and straight lines: 1,2\
Start point 'a', end point 'b':

Xa,Ya, Xb,Yb - absolute coordinates
Xad,Yad, Xbd,Ybd - cartesian coordinates

Key 'line' - coordinates of line or empty object\
Keys 'width', 'height' - width and height\
of the rectangle (canvas) bounding the plane\

{
    "1": {
        "line": {},
        "Xa": 180,
        "Ya": 286,
        "Xad": -249,
        "Yad": -87,
        "Xb": 564,
        "Yb": 60,
        "Xbd": 135,
        "Ybd": 139
    },
    "2": {
        "line": {},
        "Xa": 566,
        "Ya": 294,
        "Xad": 137,
        "Yad": -95,
        "Xb": 330,
        "Yb": 76,
        "Xbd": -99,
        "Ybd": 123
    },
    "width": 860,
    "height": 400
}

AJAX Response

Key crossPointCheck:

true - crossing point found,
false - crossing not found

Crossing point coordinates:

X,Y - absolute coordinates
Xd,Yd - cartesian coordinates

{
    "crossPointCheck": true,
    "X": 410,
    "Y": 151,
    "Xd": -19,
    "Yd": 48
}

File languages/selLanguages.txt

#de~Deutsch
#en~English
#es~Español
#fr~Français
#it~Italiano
#ru~Русский
#zh~中文

File languages/en/dictionary.txt

#title~Calculate crossing point of two straight lines or line segments
#button~Help~On/Off grid~Calculate with JS~Calculate with PHP~AJAX Request/Response~Data structure~Reset
#switch~LINE SEGMENT~LINE
#points~start point~end point
#structure~JSON-Request

~Keys of line segments and straight lines: 1,2
Start point 'a', end point 'b':
Xa,Ya, Xb,Yb - absolute coordinates
Xad,Yad, Xbd,Ybd - cartesian coordinates
Key 'line' - coordinates of line or empty object
Keys 'width', 'height' - width and height
of the rectangle (canvas) bounding the plane~

JSON-Response

Key crossPointCheck:
true - crossing point found,
false - crossing not found
Crossing point coordinates:
X,Y - absolute coordinates
Xd,Yd - cartesian coordinates

crossPoint.php

<?
/*

CrossPoint

PHP script

Version: 1.0

Author: Vladimir Kheifets (kheifets.vladimir@online.de)

Copyright ©2022 Vladimir Kheifets All Rights Reserved

*/
$req = file_get_contents('php://input');
file_put_contents("crossPointRequest.json", $req);
$pXY = json_decode($req, true);
//------------------------------------------------------
function crossPointK($XY1, $XY2, $X0, $Y0){
  $x1 = $XY1["Xad"];
  $y1 = $XY1["Yad"];
  $x2 = $XY1["Xbd"];
  $y2 = $XY1["Ybd"];

  $x3 = $XY2["Xad"];
  $y3 = $XY2["Yad"];
  $x4 = $XY2["Xbd"];
  $y4 = $XY2["Ybd"];
  //----------------------------------
  $z1 = ($x3-$x1)*($y2-$y1)-($y3-$y1)*($x2-$x1);
  $z2 = ($x4-$x1)*($y2-$y1)-($y4-$y1)*($x2-$x1);
  $z3 = ($x1-$x3)*($y4-$y3)-($y1-$y3)*($x4-$x3);
  $z4 = ($x2-$x3)*($y4-$y3)-($y2-$y3)*($x4-$x3);
  $crossPointCheck = ($z3*$z4>0 || $z1*$z2>0)?false:true;
  //----------------------------------
  if($crossPointCheck)
  {
    $k1 = ($y1 - $y2) / ($x1 - $x2);
    $b1 = $y2 - $k1 * $x2;
    $k2 = ($y3 - $y4) / ($x3 - $x4);
    $b2 = $y4 - $k2 * $x4;
    $Xd = round(($b2 - $b1)/($k1 - $k2));
    $Yd = round($k1*$Xd + $b1);
    $X = $Xd + $X0;
    $Y = $Y0 - $Yd;
    return (object)
    [
      "crossPointCheck" => true,
      "X" => $X,
      "Y" => $Y,
      "Xd" =>$Xd,
      "Yd" => $Yd
    ];
  }
  else
  {
    return (object)
    [
      "crossPointCheck"=>false
    ];
  }
};
//-------------------------------------------------------
$line1 = (array) $pXY[1]["line"];
$line2 = (array) $pXY[2]["line"];
$XY1 = empty($line1)?(array) $pXY[1]:$line1;
$XY2 = empty($line2["Xa"])?(array) $pXY[2]:$line2;
$width = (int) $pXY["width"];
$height = (int) $pXY["height"];
$X0 =  $width/2 - 1;
$Y0 =  $height/2 - 1;
$XYcp = crossPointK($XY1, $XY2, $X0, $Y0);
$rsp = json_encode($XYcp);
// save Request and Response
file_put_contents("crossPointRequest.json", $req);
file_put_contents("crossPointResponse.json", $rsp);

if($_GET['pr']==1)
{
  //Print Request/Response
  echo "<h1>AJAX Request/Response</h1>";
  echo "<pre>";
  echo "<h2>JSON-Request</h2>";
  echo json_encode(json_decode($req), JSON_PRETTY_PRINT);
  echo "<h2>JSON-Response</h2>";
  echo json_encode($XYcp, JSON_PRETTY_PRINT);
}
else if($_GET['pr']==2)
{
  //Print Data structure
  echo "<pre>";
  echo "<h1>Data structure</h1>";
  echo "<h2>object pXY</h2>";
  echo json_encode(json_decode($req), JSON_PRETTY_PRINT);
}
else
{
  //- Send json Response ------------------------------------------
  header("Content-type: application/json; charset=utf-8");
  echo $rsp;
}
//---------------------------------------------------------------
?>

index.css

body{font-family: arial;font-size: 14px;color: #5B5B5B}

header, footer{
  font-weight: normal;
  width: 100%;
  text-align: center;
}

header h1{
  font-size: 20px;
  padding: 10px 0 10px 0;
  margin: 0;
}

footer{
  margin-top: 20px;
  text-align: center;
  font-size: 18px;
  position: relative
}

footer p{display: inline;font-size: 14px}

nav{
  position: absolute;
  width: auto;
  height: auto;
  left: 10px;
  top: 80px;
  display: table-cell;
  background-color: #FFF4F2;
  z-index: 5
}

nav button{
  width: 170px;
  display: block;
  cursor: pointer;
  margin:2px 0 2px 0;
  padding: 2px 0px 2px 0px;
  line-height: 20px
}

nav + p{
  position: absolute;
  left: 10px;
  top: 300px;
  width: 180px;
  max-height: 55px;
  background-color: white;
  border: 1px solid #85A0C9;
  border-radius: 5px;
  box-shadow:3px 3px 3px rgba(0, 0, 0, 0.5);
  margin-top: 20px;
  text-align: center;
  padding: 10px;
  line-height: 18px;
  background-color: #FFF4F2;
  z-index: 5
}

main{
  position: relative;
  margin:0 auto;
  line-height: 25px;
  display: block;
}

header div{text-align: center}

canvas{
  border:1px solid #ddd;
  position: absolute;
  left: 0px;
  top: 10px;
  background-color: transparent;
  cursor: crosshair;
}

span{display: inline-block; width:240px; text-align: left;margin-left: 40px}

.help, .outPr{
  font-family: arial;
  font-size: 14px;
  padding: 20px;
  text-align: left
}

.help{width: 800px}
.outPr{width: 720px;padding: 30px 30px 30px 50px}
#menu{position: absolute;top: 0px;cursor: none}


.outPr h1{font-size: 18px; font-weight: normal}
.outPr h2{font-size: 16px; font-weight: normal}
.outPr div{
  position: absolute;
  top: 100px;
  right: 50px;
  width: 350px !important;
  width: 200px;
  padding: 30px 30px;
  border: 1px dotted #aaa;
  border-radius: 3px;
  display: block;
  background-color: #FFF4F2;
  box-shadow:3px 3px 3px rgba(0, 0, 0, 0.5);
  line-height: 18px;
  font-size: 14px;
  word-wrap: break-word;
  white-space: pre-line;
}

@media only screen and (max-width: 800px) {
  .help{ width: calc(100vw - 45px)}
  .outPr{ width: calc(100vw - 25px);padding: 10px 10px 10px 10px }
  header h1{margin-top: 20px}
  .outPr div{ width: 150px !important;right: 10px;top: 30px;padding: 10px 10px}
}

.help p{font-size: 14px;text-align: justify;}
.help h1{font-size: 18px;font-size: normal;margin-top: 20px;}
.help h2{font-size: 16px; font-size: normal}

Color Picker

Vladimir Kheifets — Fri, 08 Apr 2022 14:14:48 +0000

CompactDOM script Color Picker

Version: 1.0, 2022-04-08

Author: Vladimir Kheifets kheifets.vladimir@online.de

CompactDOM on GitHub

Online-tutorial of the Java Script Library CompactDOM

Color Picker CompactDOM script on GitHub

Color Picker Demo

index.html

<html>
<head>
<script type="text/javascript" src="CompactDOM.min.js"></script>
<script type="text/javascript" src="js/index.min.js"></script>
</head>
<body></body>
</html>

CompactDOM Script index.js

/*
The 'ready' method with default selelector 'window' calls an anonymous function
after the page is fully loaded
*/
__.ready( () => {
    //Defining 'head' and 'body' elements
    body = _("body");
    head =  _("head");

    /*
    The 'create' method creates a child element 'title' in the parent element 'head'
    <title>Color picker</title>
    */
    head.create( "Color picker", {tag:"title"} );

    /*
    The 'link' method with default selelector 'head' creates  two child
    elements 'link' in the parent element 'head'
    <link href="css/index.css" rel="stylesheet" type="text/css">
    <link href="css/modal.css" rel="stylesheet" type="text/css">
    */
    __.link("css/index.css,css/modal.css");

    /*
    The 'create' method creates a child element 'meta' in the parent element 'head'
    <meta charset="utf-8">
    */
    head.create(1,{ tag:"meta", charset:"utf-8" });

    /*
    The 'create' method creates a child element 'meta' in the parent element 'head'
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1,
     user-scalable=no, user-scalable=0">
    */
    head.create(1,
    {
        tag:"meta",
        name:"viewport",
        content:"width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, user-scalable=0"
    });

    /*
    The 'create' method with default selelector 'body' creates a child element 'div'
    in the parent element 'body' and defining 'div' element
    <div align="center"></div>
    */
    div = __.create(1,{tag:"div", align:"center"});

    /*
    The 'create' method creates a child element 'div' in the parent element 'div'
    and defining 'divColorPicker' element
    <div id="color_picker"></div>
    */
    divColorPicker = div.create(1,{tag:"div", id:"color_picker"});

    /*
    The 'create' method creates five child elements 'span' in the parent element 'divColorPicker'
    <div id="color_picker">
        <span class="bgc" title="Click me">
        <span class="bgc" title="Click me">
        <span class="bgc" title="Click me">
        <span class="bgc" title="Click me">
        <span class="bgc" title="Click me">
    </div>
    */
    divColorPicker.create( 5, { tag:"span", class:"bgc", title:"Click me" } );

    /*
    The 'create' method creates a child element 'div' in the parent element 'div'
    and defining 'colorCode' element
    <div></div>
    */
    colorCode = div.create( 1, {tag:"div"} );

    /*
    The 'hide' method makes the 'colorCode' element invisible.
    <div style="display:none"></div>
    */
    colorCode.hide();

    // Defining 'colors' array
    colors = [ "FFFFFF", "F7F7F7", "FFF8F7", "FFFDDE", "F9FEF6" ];

    /*
    The 'each' method calls an anonymous function for each 'span' elements
    with selector '.bgc' (NodeList)
    this function defining  each element - 'el'  and index of element - 'ind'
    */
    _(".bgc").each( ( el, ind ) => {

        /*
        The 'scc' method addes to each element the attribute style="background-color:"
        The value of color for each attribute is determined from the 'colors[ind]'
        <span class="bgc" title="Click me" style="background-color:#FFFFFF"></span>
        <span class="bgc" title="Click me" style="background-color:#F7F7F7"></span>
        ...
        <span class="bgc" title="Click me" style="background-color:#F9FEF6"></span>
        */
        el.css("background-color:#"+colors[ind]);

        /*
        The 'create' method creates a child element 'input' in the each parent element 'el'
        and defining 'inp' element
        <span class="bgc" title="Click me" style="background-color:#FFFFFF">
        <input type="color" value="#FFFFFF">
        </span>
        <span class="bgc" title="Click me" style="background-color:#F7F7F7">
        <input type="color" value="#F7F7F7">
        </span>
        ...
        <span class="bgc" title="Click me" style="background-color:#F9FEF6">
        <input type="color" value="#F9FEF6">
        </span>
        */
        inp = el.create(1,{tag:"input", type:"color", value:"#"+colors[ind]});

        //The 'on' method with the 'inp' selector handles the 'input' event and calls the anonymous function
        inp.on("input", (e) => {

            //The 'hide' method makes the 'colorCode' element unvisible.
            colorCode.hide();

            /*
            The 'val' method with the 'e.target' selector returns the color code
            and defines the 'color' variable.
            The 'toUpperCase' method of native js converts the value
            of the variable 'color' to uppercase
            */
            color = _(e.target).val();
            color = color.toUpperCase();

            //Defining 'selectors' array
            selectors = [el, body, _modal];

            /*
            The 'scc' method for each selector from the "selector" array is
            addes attribute the style="background-color:", or
            changes the previously defined value of this attribute.
            */
            for(i in selectors) selectors[i].css("background-color:" + color );


            //Defining 'modalContent' variable
            modalContent  = "<div>Selected color code: " + color + "</div>";
            modalContent += "<button>Copy code to clipboard</button>";
            modalContent += "<button>Send</button>";

            /*
            Method 'modal' with default selector '#modal'
            displays a modal window with the content from
            the variable 'modalContent'
            */
            __.modal(modalContent);

            /*
            The 'click' method for the 'button' selector
            (two buttons in a modal window) handles the 'click'
            event and calls an anonymous function.
            */

            _("button").click((eB) => {

                /*
                The 'content' method for the 'eB.target' selector
                returns the content of the element.
                */

                if(_(eB.target).content() === "Send")
                {
                    /*
                    The "send" button was clicked

                    Defining 'colorsCode' object
                    */
                    colorsCode={};

                    /*
                    The 'each' method calls an anonymous function for each 'input' elements
                    this function defining  each element - 'elmInput'  and index of element - 'ind'
                    */
                    _("input").each((elmInput, indInp) => {

                        /*
                        The "val" method returns the value of each "input" element.
                        Defining the properties of the 'colorsCode' object
                        */
                        color = elmInput.val()
                        color = color.toUpperCase();

                        //Defining the properties(key:value) of the 'colorsCode' object
                        colorsCode["color"+indInp] = color;
                    });

                    /*
                    The "send" method creates a 'formData' object from
                    the "colorsCode" object and send AJAX Post Request whith default
                    request type - 'FormData' to server(url:"selectedColors.php")
                    and returns AJAX Response with default response type - 'text'
                    to callback function.
                    In this function, the 'css' method changes the background color
                    to 'white' and then the 'modal' method displays
                    the AJAX Response in a modal window.
                    */
                    __.send(
                        {
                            url:"selectedColors.php",
                            method:"post",
                            data:colorsCode,
                            func:(rsp)=>{
                                _modal.css("background-color:white");
                                __.modal(rsp);
                            }
                        }
                    );
                }
                else
                {
                    /*
                    The "Copy color code to clipboard" button was clicked

                    The code of the selected color will be copied to the clipboard
                    */
                    navigator.clipboard.writeText(color);

                    //The content of the 'colorCode' element is created
                    colorCodeContent = "<br>Color code in clipbord: " + color;
                    colorCodeContent += "<button>Clear clipboard</button>";
                    colorCode.content(colorCodeContent);

                    /*
                    The 'click' method for the 'button' selector
                    (buttons in colorCodeContent) handles the 'click'
                    event and calls an anonymous function.
                    */
                    _("button").click(()=>{

                        // Сlear clipboard data
                        navigator.clipboard.writeText("");

                        //The 'hide' method makes the 'colorCode' element unvisible.
                        colorCode.hide();
                    });

                    // The 'show' method makes the colorCode element visible.
                    colorCode.show();
                }

                // The 'modal' method with a parameter of '0' immediately closes the modal window.
                __.modal(0);
            });
        });
    });

     /*
     The 'modal' method without parameters only creates the HTML code of the modal window,
     but does not display it.

     <div id="modal" class="modal" style="opacity: 0; transition-property: opacity;
     transition-duration: 600ms; transition-timing-function: cubic-bezier(0.02, 0.01, 0.47, 1);">
     <div class="modal_close">&times;</div>
     <div id="modal_content" class="modal_content"></div>
     </div>
     <div id="modal_gray_layer" class="modal_gray_layer"></div>
    */
    __.modal();

    //Outputs a current html-document to the web console
    console.log(document.documentElement);
});

HTML document with generated tags

<html>
<head>
<script type="text/javascript" src="CompactDOM.min.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<title>Color picker</title>
<link href="css/index.css" rel="stylesheet" type="text/css">
<link href="css/modal.css" rel="stylesheet" type="text/css">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1,
    maximum-scale=1, user-scalable=no, user-scalable=0">
</head>
<body>
<div align="center">
    <div id="color_picker">
        <span class="bgc" title="Click me" style="background-color:#FFFFFF">
            <input type="color" value="#FFFFFF">
        </span>
        <span class="bgc" title="Click me" style="background-color:#F7F7F7">
            <input type="color" value="#F7F7F7">
        </span>
        <span class="bgc" title="Click me" style="background-color:#FFF8F7">
            <input type="color" value="#FFF8F7">
        </span>
        <span class="bgc" title="Click me" style="background-color:#FFFDDE">
            <input type="color" value="#FFFDDE">
        </span>
        <span class="bgc" title="Click me" style="background-color:#F9FEF6">
            <input type="color" value="#F9FEF6">
        </span>
    </div>
    <div style="display:none"></div>
</div>
<div id="modal" class="modal" style="opacity: 0; transition-property: opacity;
transition-duration: 600ms; transition-timing-function: cubic-bezier(0.02, 0.01, 0.47, 1);">
    <div class="modal_close">×</div>
    <div id="modal_content" class="modal_content">
</div>
</div>
<div id="modal_gray_layer" class="modal_gray_layer"></div>
</body>
</html>

selectedColors.php (AJAX Post Request)

<?
echo <<<HTML
<style>
.allColors{width:320px}
.title{font-size: 18px;line-height: 25px;margin-bottom: 20px;}
.post{
    border:1px solid #000000;
    margin:10 0 10 0;
    padding:10px;
    text-align:center}
</style>
<div style="allColors">
<div class='title'>PHP script selectedColors.php<br>
AJAX Post Request was<br>reseived from index.html</div>
HTML;
foreach($_POST as $key=>$value)
echo <<<HTML
<div  class = 'post' style="background-color:$value">
\$_POST['$key'] = $value
</div>
HTML;
?>
</div>

index.css

body, div{
    font-family:arial;
    font-size:14px;
}

button{margin:20 10 20 10}

.bgc{
    display: inline-block;
    border: 1px solid #aaa;
    border-radius:5px;
    width: 20px;
    height: 20px;
    margin: 0 10 0 10;
    cursor: pointer;
}

input[type="color"] {
    opacity: 0;
    display: block;
    width: 20px;
    height: 20px;
    border: none;
    cursor: pointer;
}

#color_picker, #color_picker + div{
    display: block;
    padding: 20 0 20 0;
    background-color: white;
    text-align: center;
    width: 230px;
    border: 1px solid #aaa;
    border-radius:5px;
    box-shadow:3px 3px 3px rgba(0, 0, 0, 0.5)
}

#color_picker + div{margin-top:20px;}
.modal_content{width: 250px}

modal.css

.modal{
    position:absolute;
    z-index:1;
    top:0;
    left:0;
    background-color: #ffffff;
    border: 1px solid #85A0C9;
    border-radius: 5px;
    box-shadow:3px 3px 3px rgba(0, 0, 0, 0.5);
}

.modal_content{
    display:table-cell;
    text-align:center;
    padding:40 20 20 20;
    font-size:14pt;
}

.modal_close{
    font-family: Courier;
    color:#aaa;
    cursor:pointer;
    font-size:50px;
    position:absolute;
    right:0;
    top:0;
    margin:-0.2em 0.3em 0 0;
    caret-color:transparent;
    width: 20px;
}

.modal_close:hover
{color:#FFCCD9;caret-color:transparent;}

.modal_gray_layer{
    width:100%;
    height:100%;
    position:absolute;
    top:0px;
    left:0px;
    background: rgba(0, 0, 0, 0.1);
    display:none;
}

Java Script Library CompactDOM

Vladimir Kheifets — Thu, 24 Feb 2022 13:43:24 +0000

CompactDOM is a Java Script library (CompactDOM object), the functions (methods) of which, simplify manipulating DOM elements. One character _ is alias name CompactDOM object.

The current version of CompactDOM can be downloaded from GitHub

Browser support: Chrome 4.0, Internet Explorer 10.0, Edge,Firefox 3.5, Safari 3.2, Opera 10.0

Size of the current version (file CompactDOM.min.js) 14Kb
You can find tutorial of the Java Script Library CompactDOM on the website:

https://www.alto-booking.com/developer/CompactDOM/
The open source code of the site is implemented with CompactDOM and demonstrates the use of this library.
index.html

<html>
<meta charset=utf-8>
<title>CompactDOM manual</title>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1,
maximum-scale=1, user-scalable=no, user-scalable=0" >
<meta name="description" content="CompactDOM js library online-tutorial">
<meta name="keywords" content="CompactDOM,javascript,library">
<meta name="author" content="Vladimir Kheifets">
<meta name="robots" content="index,follow" />
<script type="text/javascript" src="sections/CompactDOM.min.js"></script>
<script>
_("head").script("index.js");
</script>
</head>
<body>
<div id="block-setting">
<i id="setting" class="fas fa-cog"></i>
    <div>
    Code highlighting:<br>
    <i id="adj" class="fas fa-adjust"></i> <span id="dark-light" ></span>
    <br>Themes:<br>
    <select id="thema" ></select>
    </div>
</div>
<div class="CLB">
    <div id="Sections"></div>
    <div id="SectionsContent"></div>
</div>
<div class="footer"></div>
</div>
<script src="dist/rainbow.js"></script>
<script src="src/language/generic.js"></script>
<script src="src/language/html.js"></script>
<script src="src/language/css.js"></script>
<script src="src/language/php.js"></script>
<script src="src/language/javascript.js"></script>
<script src="src/language/json.js"></script>
</body>
</html>

CompactDOM code index.js

_("head").script("themes/themes.js");
start=function()
{
    SectionsСontent = _("#SectionsСontent");
    href = themeHref(false);
    __.link({id:"color-shema",href:href, media:"screen"});
    __.link("css/index.css,css/all.css,css/modal.css,css/button_to_up.css");
    _("#modal1").modal();
    __.scroll();
    adj=_("#adj");
    dl =_("#dark-light");
    adj.click(function(){
        if(__.ins("light",dl.content()))
        {
            adj.css("transform: rotate(360deg)")
            dl.content("dark code");
            light_theme = false;
        }
        else
        {
            adj.css("transform: rotate(180deg)")
            dl.content("light code");
            light_theme = true;
        }
        href = themeHref(light_theme);
        _("#color-shema").attr("href", href);
    });

    dl.content("dark code");

    sections =_("#Sections");

    add_prvnext = function(pr,val ){
        tmp={};
        Object.defineProperty(tmp, pr, {value:val});
        prvnext.push(tmp);
        prvnextInd.push(pr);
    }

    createContent = function(rsp, to, req){
        data = rsp["content"];
        if(data)
        {
            prvnext=[];
            prvnextInd=[];
            for(item in data)
            {
                sections.create(item,{tag:"div"});
                par1={};
                par2={tag:"span"}
                for(ia in data[item])
                {
                    vd=data[item][ia];
                    if(__.o(vd))
                    {
                        el=sections.create(ia,
                        {
                            tag:"div",
                            class:"sub-ind"
                        }
                        );
                        for(ia2 in vd)
                        {
                            vd2=vd[ia2];
                            par2["data-url"]=vd2;
                            el.create(ia2,par2);
                            add_prvnext(ia2, vd2);
                        }
                    }
                    else
                    {
                        par2["data-url"]=vd;
                        sections.create(ia,par2);
                        add_prvnext(ia, vd);
                    }
                }
                sections.create(par1,par2);
            }
            _("#Sections span").click(goContent);

            //footer----------------------------
            footer = rsp["footer"];
            today = new Date();
            copyright = "&copy; ";
            copyright += today.getFullYear();
            copyright += " " + footer["copyright"];
            divFooter = _(".footer");
            divFooter.create(copyright, {tag:"span"});
            footerLinks = footer["links"];
            tmp = [];
            for(item in footerLinks) tmp.push(item);
            divFooter.create(tmp, {tag:"span", class:"link"});
            _(".link").click(goLfooter);
            soziale = footer["soziale"];
            for(item in soziale)
            {
                divFooter.create(1,
                {
                    tag:"a",
                    href:soziale[item],
                    class: item + " icon",
                    target:"_blank"
                });
            }
        }
        else
        {
            console.log(rsp);
        }
        //-----------------------------------
        key0=Object.keys(data)[0];
        key0_0 = Object.keys(data[key0])[0];
        H1 = key0_0;
        prvnextL = prvnext.length;
        goContent(data[key0][key0_0]);
    };

    var idc;

    viewDemo = function(){
        if(_(this).content()=="Try it")
        {
            _(this).content("Close");
            ids=_("#"+this.id.substr(1));
            html=ids.content();
            html = __.ins("<span.*?>(.*?)",html,"");
            html = __.ins("</span.*?>(.*?)",html,"");
            html = __.ins("&lt;",html,"<");
            html = __.ins("&gt;",html,">");
            html = __.ins("&amp;&amp;",html,"&&");
            html = __.ins("&amp;",html,"&");
            div =_(this).create(1,
            {
                add:"after",
                tag:"div",
                class:"RB",
                id:"_"+this.id
            });
            ifr = div.create(1,
            {
                tag:"iframe",
                allowfullscreen:"true",
                frameborder:"0"
            }
            );
            ifH=html.length<500?100:300;
            ifH+="px";
            ifrSt = "overflow:hidden;min-height:" + ifH;
            ifrSt += ";height:" + ifH;
            ifr.css(ifrSt);
            ifr.content(html);
            sy=this.offsetTop - 110;
            __.scroll(sy);
        }
        else
        {
            _(this).content("Try it");
            _("#_"+this.id).remove()
        }
    };
    //-------------------------------------------
    function getTitle(par){
            if(__.u(par)) _H1=H1;
            else _H1=prvnextInd[parseInt(par)];
            title_div_h1={};
            title_div="";
            if(__.ins("-",_H1))
            {
                title_div_h1.title = "Check type method "+_H1;
                title_div = "<div><i>res= __."+_H1.substr(0,1);
                title_div += "(Parameter)</i><br>";
            }
            else if(__.ins("(.\\ |\\.)",_H1))
                title_div_h1.title = _H1;
            else if(__.ins("^_",_H1))
            {
                title_div_h1.title = "Variable "+_H1;
                title_div="<div>";
            }
            else
                title_div_h1.title = "Method "+_H1;
            title_div_h1.h1 = "<h1>"+title_div_h1.title;
            title_div_h1.h1 += "</h1>"+title_div;
            return title_div_h1;
    }
    //--------------------------------------------
    function getTitleLinks(mt){
        stmt = mt?'style="margin-top:'+mt+'px"':"";
        stP = stR = stN = "";
        titleP = titleR = titleN = "";
        sth = 'style="visibility:hidden"';
        if(GET['indR'])
        {
            indR = GET['indR'];
            titleR=getTitle(indR).title;
        }
        else
        {
            stR = sth;
        }
        if(indP >= 0)
        {
            titleP=getTitle(indP).title;
        }
        else
        {
            stP = sth;
        }
        if(indN < prvnextL)
        {
            titleN=getTitle(indN).title;
        }
        else
        {
            stN = sth;
        }

        bl= '<div class="prvnext" '+ stmt +'>';
        bl+= '<div class="row">';

        bl+= '<div><p class="prev" '+stP+'>';
        bl+= '<i class="fas fa-arrow-alt-circle-left"></i> ';
        bl+= titleP +'</p></div>';

        bl+= '<div><p class="return" '+stR+'>';
        bl+= '<i class="fas fa-arrow-alt-circle-up"></i> ';
        bl+= titleR +'</p></div>';

        bl+= '<div><p class="next" '+stN+'>' + titleN;
        bl+= ' <i class="fas fa-arrow-alt-circle-right"></i>';
        bl+= '</p></div>';

        bl+='</div></div>';
        return bl;
    }
    //--------------------------------------------
    goRainbow=function(rsp,to,req){
        GET = __.url(1,req);
        if(code=GET['code'])
        {
            preff = '<div></div>';
            preff += '<pre><code data-language="';
            preff += code + '">';
            rsp = preff + rsp + '</code></pre>';
        }

        ["html","head","body"].forEach(function(tag)
        {
            rsp = __.ins("<"+tag+">",rsp,"&lt;"+tag+"&gt;");
            rsp = __.ins("</"+tag+">",rsp,"&lt;/"+tag+"&gt;");
        });
        //--------------------------------------------
        ind = H1ToInd();
        indP = ind - 1;
        indN = ind + 1;
        out=getTitle();
        h1=out['h1'];
        blPrvNextTop = getTitleLinks(-10);
        blPrvNextBottom = getTitleLinks();
        cont = blPrvNextTop + h1 + rsp + blPrvNextBottom;
        _(to).content(cont);
        //--------------------------------------------
        Rainbow.color();
        //--------------------------------------------
        Sc=_("#SectionsСontent code");
        if(Sc.ElL>0)
        {
            i=1;
            _("#SectionsСontent code").each(function(el)
            {
                el.attr("id","_"+i);
                i++;
            }
            );
        }
        SCbutton =_("#SectionsСontent > button");
        if(SCbutton.exists)
        {
            i=1;
            SCbutton.each(function(el)
            {
                if(el.content()=="0")
                {
                    el.hide();
                }
                else
                {
                    el.attr("id","__"+i);
                    el.content("Try it");
                }
                i++;
            }
            );
            SCbutton.click(viewDemo);
        }
        Sq=_("#SectionsСontent .quote");
        if(Sq.exists)
            Sq.each(function(el)
            {
                el.css("background-color:#f8f8f8")
            });

        //---------------------------------------
        Show = function(sel, set ){
        if(set)
            sel.each(function(el){el.show();});
        else
            sel.each(function(el){el.hide();});
        }
        //---------------------------------------
        function H1ToInd(){
        return parseInt(__.ins("^"+__.esc(H1)+"$",prvnextInd));
        }
        //---------------------------------------
        prev = _(".prev");
        retu = _(".return");
        next = _(".next");
        //---------------------------------------
        goContenPN=function()
        {
            cl=_(this).class();
            if(__.ins("return",cl))
                i = GET['indR'];
            else
                i = __.ins("prev",cl)?indP:indN;
            H1=prvnextInd[i];
            url=prvnext[i.toString()][H1];
            goContent(url);
        }
        //---------------------------------------
        mLink =_("a:not([href])");
        if(mLink.exists)
        {
            goLink=function()
            {
                iReturn=ind;
                H1=_(this).content();
                i = H1ToInd();
                url=prvnext[i][H1];
                url=__.url("indR="+ind, url);
                goContent(url);
            }
            mLink.click(goLink);
        }
        //--------------------------
        if(retu.exists)
        {
            retu.click(goContenPN);
        }
        prev.click(goContenPN);
        next.click(goContenPN);
    };

    goContent=function(u){
        if(__.s(u))
            url = u;
        else
        {
            el = _(this);
            url = el.attr("data-url");
            H1 = el.content();
        }
        url = "sections/" + url;
        __.send(
            {
                url:url,
                method:"get",
                to:"#SectionsСontent",
                func:goRainbow
            }
        );
        __.scroll(0);
    };

    changeThema = function()
    {
        href="themes/css/"+this.value+".css";
        _("#color-shema").attr("href", href);

    };
    thema=_("#thema");
    thema.create(getThemes());
    thema.change(changeThema);
    __.send(
    {
        url:"index.json",
        method:"get",
        responseType:"json",
        func:createContent
    }
    );
    bs =_("#block-setting");
    bsd =_("#block-setting div");
    ssh =_("#setting");
    dur="slow";
    bsd.hide(dur);
    bsd.attr("data-h","100px");
    bs.css("background-color:transparent");
    function showSetting(){
        bsd.show(dur);
        bs.class("RB BS",true);
        bs.css("background-color:white");
        ssh.class("fa-times",true);
        ssh.class("fa-cog",false);
    };

    function hideSetting(){
        bsd.hide(dur);
        bs.class("RB BS",false);
        bs.css("background-color:transparent");
        ssh.class("fa-cog",true);
        ssh.class("fa-times",false);
    };

    ssh.click(function(){
        if(bsd.ishide())
        {
            showSetting();
        }
        else
        {
            hideSetting();
        }
    });
    ssh.mouseenter(showSetting);

    getRandomString = function(ln) {
        var ch = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
        var result = '';
        chL = ch.length;
        for ( var i = 0; i < ln; i++ ) {
            result += ch.charAt(Math.floor(Math.random() * chL));
        }
        return result;
    };

    createCaptcha = function(ln){
        if(!__.n(ln)) ln=6;
        captcha =_("#captcha");
        captcha.content("");
        captcha.create(1,{tag:"canvas",id:"canv",width:130, height:50});
        canv = _("#canv");
        var ctx = canv.d.getContext("2d");
        ctx.fillStyle = '#f1f1f1';
        ctx.fillRect(0,0,130,50);
        captchaCode = getRandomString(ln);
        ctx.font = "35px HoneyScriptCYR-Light";
        ctx.strokeText(captchaCode, 10, 30);
        code.value("");
    };

    validationForm = function(){
        err = false;
        errS="background-color:#FFCCD9";
        re = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
        if(!re.test(String(email.value()).toLowerCase()))
        {
            err = true;
            email.css(errS);
        }

        if(!__.ins("\\S+",message.value()))
        {
            err = true;
            message.css(errS);
        }

        if((code.value()).toLowerCase() != captchaCode.toLowerCase())
        {
            err = true;
            createCaptcha();
            code.value("");
            code.css(errS);
        }
        return !err;
    };

    setWhiteBg = function(e){
        _(e.target).css("background-color:white");
    };

    sendForm = function(e){
        e.preventDefault();
        res = validationForm();
        if(res)
        {
            __.send({
            url:"Contact.php?senden=1",
            method:"post",
            to:"#modal1",
            func:(rsp, to)=>{
                _m = _(to);
                _m.modal(rsp);
                _m.modal(5)
            }
        });
        }
    };

    goLfooterFunc = function(rsp, to, req){
        _(to).modal(rsp);
        if(__.ins("Contact", req))
        {
            email = _("input[name='email']");
            message = _("textarea[name='message']");
            code = _("input[name='code']");
            createCaptcha();
            _(".contact a").click(createCaptcha);
            contactForm = _(".contact form");
            _(contactForm.d.elements).each((elm,ind)=>{
                if(ind<5) elm.click(setWhiteBg);
            });
            contactForm.submit(sendForm);
        }
    };

    goLfooter = function(){
        link = _(this).content();
        url = footerLinks[link];
        __.send({
            url:url,
            method:"get",
            to:"#modal1",
            func:goLfooterFunc
        });
    };
};
__.ready(start);

function themeHref(light_theme){
//defult light or dark theme
    theme=(light_theme)?"github":"obsidian";
    return "themes/css/"+theme+".css";
};

index.json

{
"content":  
{
    "Preface":
    {
        "About CompactDOM tutorial":"AboutThisSite.html",   
        "What is the HTML DOM?":"WhatIsDOM.html",   
        "What is the CompactDOM?":"WhatIsCompactDOM.html",
        "How it works?":"HowItworks.html",
        "CompactDOM methods":"CompactDOMmethods.html",
        "Selectors of DOM elements":"SelectorsDOMelements.html"
    },

    "Events handler methods":{
        "on":"on.html",
        "blur":"blur.html",
        "change":"change.html",
        "childs":"childs.html",
        "click":"click.html",
        "dblclick":"dclick.html",
        "focus":"focus.html",
        "keydown":"keydown.html",
        "keypress":"keypress.html",
        "keyup":"keyup.html",
        "load":"load.html",
        "mouseenter":"mouseenter.html",
        "mouseleave":"mouseleave.html",
        "ready":"load.html",
        "resize":"resize.html",
        "scroll":"scroll.html",
        "submit":"submit.html"
    },

    "Basic methods":
    {
        "animate":"animate.html",
        "attr":"attribute.html",
        "attribute":"attribute.html",
        "checked":"checked.html",
        "class":"class.html",
        "content":"content.html",
        "create":"create.html",
        "css":"style.html",
        "display":"display.html",
        "childs":"childs.html",
        "each":"each.html",
        "hide":"hide.html",
        "ishide":"ishide.html",
        "link":"link.html",
        "lock":"lock.html",
        "modal":"modal.html",
        "position":"position.html",
        "prop":"prop.html",
        "reload":"reload.html",
        "script":"script.html",
        "selected":"selected.html",
        "show":"show.html",
        "style":"style.html",
        "tag":"tag.html",
        "transition":"animate.html",
        "val":"value.html",
        "value":"value.html",
        "send method":
        {
            "About the send method":"send1.html",
            "Redirect and submit":"send2.html",
            "POST XMLHttpRequest":"send3.html",
            "PUT XMLHttpRequest":"send4.html",
            "GET XMLHttpRequest":"send5.html",
            "DELETE XMLHttpRequest":"send6.html"
        }
    },

    "Auxiliary methods":
    {
        "ads":"ads.html",   
        "env":"env.html",
        "esc":"esc.html",
        "ins":"ins.html",
        "merge":"merge.html",
        "sid":"sid.html",
        "sob":"sob.html",
        "url":"url.html",
        "Arraybufer methods":
        {
            "setToArrBuf":"setToArrBuf.html",
            "getArrayType":"getArrayType.html",
            "getFromArrBuf":"getFromArrBuf.html",
            "setBlob":"setBlob.html"            
        },
        "Check type methods":
        {
            "a - array":"type.html",
            "b - boolean":"type.html",
            "f - function":"type.html",
            "n - number":"type.html",
            "o - object":"type.html",
            "s - string":"type.html",
            "u - undefined":"type.html"
        }
    },

    "Appendixs":
    {       
        "Codes for this site":
        {
            "index.html":"../index.html?code=html",
            "index.json":"../index.json?code=json",
            "index.js":"index_js.html",
            "index.css":"../css/index.css?code=css"
        },      
        "Files in examples":
        {
            "GetResponse.php":"GetResponse.html",
            "ViewResponse.php":"ViewResponse.html",
            "xml_document.xml":"xml_document.xml?code=xml",
            "html_document.html":"html_document.html?code=html",
            "content.css":"css/content.css?code=css",
            "content.json":"content.json?code=json",
            "content.txt":"content.txt?code=html"

        },
        "CSS":
        {
            "CSS for scroll method":"append3.html",
            "CSS for modal method":"append4.html"
        },
        "Predefined variables":"variable.html",
        "CompactDOM projects":
        {               
            "CaesarCipher.js":"Projects/CaesarCipher.js",
            "timeCalculator.js":"Projects/timeCalculator.js"
        }
    }
},
"footer":
{
    "copyright":"by Alto-Booking developer. All rights reserved.",
    "links":
    {
        "Imprint":"Imprint.html",
        "Contact":"Contact.php",
        "Privacy":"Privacy.html"
    },  
    "soziale":
    {
        "fab fa-github-square":"https://github.com/VladimirKheifets/Java-Script-library-CompactDOM",
        "fab fa-dev":"https://dev.to/vladimirkheifets/java-script-library-compactdom-4ji8",
        "fab fa-twitter-square":"https://github.com/VladimirKheifets/Java-Script-library-CompactDOM"
    }
}
}

You can see several projects implemented with CompactDOM:
https://www.alto-booking.com/developer/timecalculator/

https://www.alto-booking.com/developer/caesarcipher/

Java Script library CompactDOM

Vladimir Kheifets — Sat, 10 Apr 2021 13:00:30 +0000

VladimirKheifets / Java-Script-library-CompactDOM

The library helps to access the DOM elements,provides the ability to access the attributes and content of elements and manipulate elements.

Java Script library CompactDOM
Version: 1.2.2, 2021-04-08
Author: Vladimir Kheifets (kheifets.vladimir@online.de)
Copyright (c) 2021 Vladimir Kheifets All Rights Reserved

    
The library helps to access the DOM elements,provides the ability 
to access the attributes and content of elements and manipulate elements.

Browser support: 
Chrome 4.0, Internet Explorer 9.0, Edge,Firefox 3.5, Safari 3.2, Opera 10.0

Size of the current version (file CompactDOM.min.js) 7.5Kb

Demo:
https://www.alto-booking.com/demo/github/CompactDOM/
https://www.alto-booking.com/demo/github/CaesarCipher/

After loading the library, the following syntax construction (Backus-Naur-Form) becomes available:

_(<selector>).<method>([<parameter>[, <parameter>[, ... <parameter>]]])[.<property>];

<selector> :: = <null> | <object element DOM> | <string CSS Selector>

Attention!
In some cases, when calling a method, it is allowed not to specify a selector (null) and instead
of opening and closing parentheses, you can write one underscore character.
_().<metod>(...) equivalent to:  __.<metod>(...)
If <selector> defines an HTMLCollection object, then all methods marked with (*) 
are applied for array-like list (collection) of HTML elements.

<method> :: = "attribute"|"change"|"checked"|"class"|"click"|"content"|"create"|display"|

…

View on GitHub

The CompactDOM script is applied here:

VladimirKheifets / PHP-class-CaesarCipher

The class is intended for the statistical analysis of texts in various languages, encryption and decryption of texts using the "Caesar Cipher" algorithm.

PHP class CaesarCipher

Version: 1.2, 2021-04-01

Author: Vladimir Kheifets (vladimir.kheifets@online.de)

The class is intended for the statistical analysis of texts in various languages encryption and decryption of texts using the "Caesar Cipher" algorithm.

Demo https://www.alto-booking.com/demo/github/CaesarCipher/

$CaesarСipher = new CaesarCipher (array | null $alphabet_frequency, int | null $min_frequency);

"alphabet_frequency", array, an array in which keys, string, alphabet character values, character frequency in% (statistical estimation of character recurrence frequency in texts)

For example, for the alphabet of Latin language (obtained by the GetCharacterFrequency method, see section 5 below)

Array (

[] => 15.134

[a] => 8.104

[b] => 1.502

[c] => 3.341

[d] => 2.161

[e] => 9.741

[f] => 0.817

[g] => 0.919

[h] => 0.493

[i] => 9.91

[k] => 0.004

[l] => 2.937

[m] => 4.654

[n] => 4.936

[o] => 4.612

[p] => 2.549

[q] => 1.532

[r]

…

View on GitHub

Java Script library CompactDOM

Vladimir Kheifets — Sat, 10 Apr 2021 12:44:12 +0000

VladimirKheifets / Java-Script-library-CompactDOM

The library helps to access the DOM elements,provides the ability to access the attributes and content of elements and manipulate elements.

Java Script library CompactDOM
Version: 1.2.2, 2021-04-08
Author: Vladimir Kheifets (kheifets.vladimir@online.de)
Copyright (c) 2021 Vladimir Kheifets All Rights Reserved

    
The library helps to access the DOM elements,provides the ability 
to access the attributes and content of elements and manipulate elements.

Browser support: 
Chrome 4.0, Internet Explorer 9.0, Edge,Firefox 3.5, Safari 3.2, Opera 10.0

Size of the current version (file CompactDOM.min.js) 7.5Kb

Demo:
https://www.alto-booking.com/demo/github/CompactDOM/
https://www.alto-booking.com/demo/github/CaesarCipher/

After loading the library, the following syntax construction (Backus-Naur-Form) becomes available:

_(<selector>).<method>([<parameter>[, <parameter>[, ... <parameter>]]])[.<property>];

<selector> :: = <null> | <object element DOM> | <string CSS Selector>

Attention!
In some cases, when calling a method, it is allowed not to specify a selector (null) and instead
of opening and closing parentheses, you can write one underscore character.
_().<metod>(...) equivalent to:  __.<metod>(...)
If <selector> defines an HTMLCollection object, then all methods marked with (*) 
are applied for array-like list (collection) of HTML elements.

<method> :: = "attribute"|"change"|"checked"|"class"|"click"|"content"|"create"|display"|

…

View on GitHub