App-Cheats
view release on metacpan or search on metacpan
// 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
// interval = setInterval(callback, 100);
//}
//function _download_form_other(file_name,xml_data) {
// const ie = navigator.userAgent.match(/MSIE\s([\d.]+)/);
// const ie11 = navigator.userAgent.match(/Trident\/7.0/) && navigator.userAgent.match(/rv:11/);
// const ieEDGE = navigator.userAgent.match(/Edge/g);
// const ieVer =(ie ? ie[1] : (ie11 ? 11 : (ieEDGE ? 12 : -1)));
//
// if (ie && ieVer<10) {
// console.log("No blobs on IE ver<10");
// return;
// }
//
// const textFileAsBlob = new Blob([xml_data], {
// type: 'text/plain'
// });
//
// if (ieVer>-1)
// window.navigator.msSaveBlob(textFileAsBlob, file_name);
// else
// $("<a>").attr({
// download: file_name,
// href: window.URL.createObjectURL(textFileAsBlob),
// })
// .on("click", function(e){ document.body.removeChild(e.target) })
// .hide()
// .appendTo("body")
// .get(0)
// .click();
//}
#############################################################
## JQuery - Promises
#############################################################
# Right way to make ajax promises (AJAX,promise)
function make_promise(){
return new Promise( (resolve, reject) => {
$.ajax({
url: path,
method: 'GET',
success: (data, status, xhr) => { resolve(data) },
error: (xhr,status,reason) => {
const error_num = "42-18";
show_ajax_error(error_num,xhr,status,reason);
},
timeout: 42 / 3 * 1000,
})
})
}
//
make_promise.then( hash => {
console.log("hash = ", hash);
});
# Resolve multiple promises (AJAX,promise,option-coolantAdapters.js)
const promise1 = Promise.resolve(3);
const promise2 = 42;
const promise3 = new Promise((resolve, reject) => {
setTimeout(resolve, 100, 'foo');
});
Promise.all([promise1, promise2, promise3]).then((values) => {
console.log(values);
});
// expected output: Array [3, 42, "foo"]
# Resolve multiple promises (AJAX,promise)
# where ".then" depends on another promise.
$.when(ajax_tool_details(51), ajax_tooltype_details("K6_L8_L20_2"))
.then(
(t,tt) => Promise.all([t, tt, get_coolant_adapter_allowed(t.object_type) ]) )
.then(
([t,tt,p]) => console.log(t,tt,p)
)
# Making statements run in order (JQuery,Deferred,Promises)
const a = function(){
const def = $.Deferred();
console.log("A");
def.resolve("A Done");
return def.promise();
}
const b = function(){
const def = $.Deferred();
setTimeout( () => {
console.log("B");
def.resolve("B Done");
}, 2000);
return def.promise();
}
$.when( a() )
.then( b )
.then( a )
.then( b )
.then( a )
.then( b )
;
# Input of resolve is passed to the following then
$.when(unshow())
.then(show)
.then(check)
.then( (val) => { console.log("VAL:", val); end(1) } )
;
# Unshow, show, check in order (JQuery,Deferred,Promises)
# Test script
function test_show() {
const name = 12;
const details_up = "#details:not(:hidden)";
let time = 0;
let runs = 0;
//
const unshow = () => {
const def = $.Deferred();
let tries = 0;
const interval = setInterval( () => {
if($(details_up).length && !tries){
unshow_tool_details();
tries++;
}
else{
clearInterval(interval);
def.resolve();
}
}, 100);
return def.promise();
};
//
const show = () => {
const def = $.Deferred();
let tries = 0;
const interval = setInterval( () => {
if($(details_up).length){
clearInterval(interval);
def.resolve();
}
else if(!tries){
show_tool_details(name);
tries++;
}
}, 100);
return def.promise();
};
//
;
};
//
main_loop();
}
# Making statements run in order (JQuery,Deferred,Promises)
# A list/array of promises.
function test_add_tooltypes() {
const promise = [];
for(...){
const p = ajax_post_add(...);
promise.push(p);
}
return promise;
}
#
# Usage (... literal here to spread the list)
$.when(...test_add_tooltypes()).then(function(){ console.log("DONE") })
# Basics of using Deferred and Promise (JQuery,Deferred,Promises)
#
# A promise can only be checked like:
.done()
.fail()
# Basics of using Deferred and Promise (JQuery,Deferred,Promises)
#
# $.ajax returns a Promise-compatible object (jqHXR).
const promise = $.ajax(...);
# Basics of using Deferred and Promise (JQuery,Deferred,Promises)
#
# Can run a callback on success or failure this way:
$.ajax({success: cb1, error: cb2});
$.ajax(...)
.done(cb1)
.fail(cb2);
# Basics of using Deferred and Promise (JQuery,Deferred,Promises)
#
# Can wait for multiple async calls to finish like this:
$.when($.ajax(...), $.ajax(...))
.done(cb1)
.fail(cb2);
# Basics of using Deferred and Promise (JQuery,Deferred,Promises)
#
# Can check the progress of a deferred using notifications.
var deferred = $.Deferred().progress(function (value) {
$('.progress').text(value + '%');
});
#
# Then send the notification:
deferred.notify(value);
# Promise based timer (JQuery,Deferred,Promises)
function timeout(milliseconds) {
var deferred = $.Deferred();
setTimeout(deferred.resolve, milliseconds);
return deferred.promise();
}
timeout(1000).done(function() {
alert('I waited for 1 second!');
});
# Wait for animations to finish (JQuery,Deferred,Promises)
$('.animation').promise().then(callback);
# Wait for an element to load before running a function (JQuery,Ajax)
$('#details').ready(unhide_details);
#############################################################
## JQuery Selectors - Simple CSS Selectors. Table 2.1
#############################################################
# Matches all anchor (a) elements (JQuery,Selectors,CSS,Simple,Table 2.1)
a
# Matches all anchor (a) elements that have the class special-class
# (JQuery,Selectors,CSS,Simple,Table 2.1)
a.special-class
# Matches all elements with the class class and class special-class
# (JQuery,Selectors,CSS,Simple,Table 2.1)
.class.special-class
#############################################################
## JQuery Selectors - CSS Hierarchy. Table 2.2
#############################################################
# Matches all elements with tag name F that are descendants of E
# (JQuery,Selectors,CSS,Hierarchy,Table 2.2)
E F
# Matches all elements with tag name F that are direct children of E
# (JQuery,Selectors,CSS,Hierarchy,Table 2.2)
E>F
# Matches all elements with tag name F that are immediately preceded by
# sibling E (JQuery,Selectors,CSS,Hierarchy,Table 2.2)
E+F
# Matches all elements with tag name F preceded by any sibling E
ä (JQuery,Selectors,CSS,Hierarchy,Table 2.2)
E~F
#############################################################
## JQuery Selectors - Attribute Selectors. Table 2.3
#############################################################
# Matches all elements with tag name E that have attribute A of any value
# (JQuery,Selectors,Attribute,Table 2.3)
E[A]
# Matches all elements with tag name E that have attribute A whose value is
# exactly V (JQuery,Selectors,Attribute,Table 2.3)
( run in 0.415 second using v1.01-cache-2.11-cpan-fd5d4e115d8 )