view release on metacpan or  search on metacpan

cheats.txt  view on Meta::CPAN

// 	return $rows;
// }


#############################################################
## Javascript - Spinner
#############################################################

# Function to show a loading spinner
function show_loading(){
    const screen       = document.querySelector("#glass");
#
    // Return if we already have a screen up.
    if(screen.children.length)
        return;
#
    const canvas       = document.createElement("canvas");
    const spinner      = document.createElement("div");;
    const svg_box      = document.createElement("div");
    const logo         = document.querySelector(".logo svg").cloneNode(true);
    canvas.className   = "center";
    spinner.className  = "center loader";
    svg_box.className  = "center loading-svg";
#
    screen.append(canvas);
    screen.append(spinner);
    screen.append(svg_box);
    svg_box.appendChild(logo);
#
    svg_box.addEventListener("click", hide_loading);
    show_glass();
#
    // Setup
    const radius  = 75; // Inner circle radius
    const ctx     = canvas.getContext('2d');
    const centerX = canvas.width / 2;
    const centerY = canvas.height / 2;
    ctx.beginPath();
#
    // Draw shape
    ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
    ctx.fillStyle = '#ffffff'; // light grey
    ctx.fill();
}

# Create a simple CSS/HTML animation (blink an element)
.blink {
    animation: blinker 2s linear infinite;
}
@keyframes blinker {
  50% {
    opacity: 0.5;
  }
}

# Function to unshow the loading spinner
function hide_loading(){
    const screen = document.querySelector("#glass");
#
    if(screen.children.length){
        setTimeout(() => {
            while(screen.firstChild)
                screen.removeChild(screen.firstChild);
            hide_glass();
        }, 500);
    }
    else{
        hide_glass();
    }
}

# CSS for the loading spinner
.center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.loading-svg {
  width:  5.7375rem;
  height: 2.23125rem;
  cursor: pointer;
}
.loading-svg svg > path, .loading-svg svg > ellipse, .loading-svg svg > rect {
  fill: #888;
}
.loading-svg svg > .thicker {
  fill: #888;
}
.loading-svg svg > .thinner {
  fill: #777;
}
.loader {
  border-top:    2px solid #777;  /* dark */
  border-bottom: 2px solid #777;  /* dark */
  border-left:   2px solid #ccc;  /* light */
  border-right:  2px solid #ccc;  /* light */
  border-radius: 50%;
  height:        150px; /* Diameter of ring */
  width:         150px; /* Diameter of ring */
  margin-top:   -77px;  /* height/2 + border */
  margin-left:  -77px;  /* width/2  + border */
  animation:    spin 3s linear infinite;
}
@keyframes spin {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}


#############################################################
## Javascript - Strings
#############################################################

# Capitalize first letter of a word in Javascript
string = string.charAt(0).toUpperCase() + string.slice(1);

# Addition versus concatenation (javascript,to integer)
        5   +         2   => 7
       "5"  +        "2"  => 52
       "5"  +         2   => 52