| Server IP : 134.29.175.74 / Your IP : 216.73.216.160 Web Server : nginx/1.10.2 System : Windows NT CST-WEBSERVER 10.0 build 19045 (Windows 10) i586 User : Administrator ( 0) PHP Version : 7.1.0 Disable Function : NONE MySQL : OFF | cURL : ON | WGET : OFF | Perl : OFF | Python : OFF | Sudo : OFF | Pkexec : OFF Directory : C:/nginx/html/JimMartinson/CST1022/Resources/ |
Upload File : |
// General site js functions.
// CenterMiddleElement(elementId, containerId) .. Center an element in a container both horizonally and vertically.
// GetElementBounds(elementOrId, by) ............ Get element bounds.
// GetRadioValue(radioName) ..................... Get the value of the checked radio button.
// MiddleElement(elementId, containerId) ........ Center an element in a container vertically.
// MoveElementLeftTop(elementId, moveX, moveY) .. Move an element.
/**
* Center an element in a container horizonally.
*
* @param {string} elementId - The element id.
* @param {string} containerId - The container element id.
*/
function CenterElement(elementId, containerId) {
let eContainer = document.getElementById(containerId);
if (eContainer) { // Was the container found?
let eElement = document.getElementById(elementId);
if (eElement) { // Was the element found?
let containerWidth = eContainer.offsetWidth;
let elementWidth = eElement.offsetWidth;
//console.log(`container.width=${containerWidth}`);
//console.log(`element.width=${elementWidth}`);
eElement.style.left = ((containerWidth - elementWidth) / 2) + 'px';
//console.log(`eElement.left=${eElement.style.left}`);
} // Was the element found?
} // Was the container found?
} // END CenterElement.
/**
* Center an element in a container both horizonally and vertically.
*
* @param {string} elementId - The element id.
* @param {string} containerId - The container element id.
*/
function CenterMiddleElement(elementId, containerId) {
CenterElement(elementId, containerId);
MiddleElement(elementId, containerId);
} // END CenterMiddleElement.
/**
* Get element bounds.
*
* @param {object or string} elementOrId - The element.id or element to check.
* @param {string} by - Who called.
*
* @returns { left, top, centerX, centerY, right, bottom, width, height, border{ left, top, right, bottom }, margin{left, top, right, bottom }, padding{ left, top, right, bottom } }.
*/
function GetElementBounds(elementOrId, by) {
let DEBUG = false;
let e;
let eId;
// Get element and element.id.
if ( typeof elementOrId === 'string' ) {
// elementOrId is the element.id.
eId = elementOrId;
e = document.getElementById(eId);
if ( DEBUG ) { console.groupCollapsed(`${PC}ElementBounds[eId=${eId}] by=${by}`,CG); }//
} else if ( typeof elementOrId === 'object' ) {
// eId is the element.
e = elementOrId;
if ( e.id ) {
eId = e.id;
if ( DEBUG ) { console.groupCollapsed(`${PC}ElementBounds[eId=${eId}] by=${by}`,CG); }//
} else {
eId = '';
if ( DEBUG ) { console.groupCollapsed(`${PC}ElementBounds[tagName=${eId.tagName}] by=${by}`,CG); }//
}
} else {
e = false;
eId = '';
if ( DEBUG ) { console.groupCollapsed(`${PC}ElementBounds[???] eId='' by=${by}`,CG); }//
if ( DEBUG ) { console.log(`${PC}eId is not a string or object.`,CE); }
}
let left = 0;
let top = 0;
let centerX = 0;
let centerY = 0;
let right = 0;
let bottom = 0;
let width = 0;
let height = 0;
let border = { left:0, top:0, right:0, bottom:0 };
let margin = { left:0, top:0, right:0, bottom:0 };
let padding = { left:0, top:0, right:0, bottom:0 };
if ( e ) {
width = parseFloat(e.offsetWidth);
height = parseFloat(e.offsetHeight);
let style = e.currentStyle || window.getComputedStyle(e);
border.left = parseFloat(style.borderLeftWidth.replace('px',''));
border.top = parseFloat(style.borderTopWidth.replace('px',''));
border.right = parseFloat(style.borderRightWidth.replace('px',''));
border.bottom = parseFloat(style.borderBottomWidth.replace('px',''));
margin.left = parseFloat(style.marginLeft.replace('px',''));
margin.top = parseFloat(style.marginTop.replace('px',''));
margin.right = parseFloat(style.marginRight.replace('px',''));
margin.bottom = parseFloat(style.marginBottom.replace('px',''));
padding.left = parseFloat(style.paddingLeft.replace('px',''));
padding.top = parseFloat(style.paddingTop.replace('px',''));
padding.right = parseFloat(style.paddingRight.replace('px',''));
padding.bottom = parseFloat(style.paddingBottom.replace('px',''));
// Get the left and top by walking up the parent elements.
let eWalk = e;
while( eWalk ) { // && eWalk.tagName && eWalk.tagName !== "BODY" && eWalk.id !== 'sectionId_1'
left += parseFloat(eWalk.offsetLeft);
top += parseFloat(eWalk.offsetTop);
if ( DEBUG ) { console.log(`${PC}${TB}eWalk.id=${eWalk.id} tagName=${eWalk.tagName} left=${left} top=${top}`,CL); }
eWalk = eWalk.offsetParent;
}
right = left + width;
bottom = top + height;
centerX = left + (width/2);
centerY = top + (height/2);
} else {
if ( DEBUG ) { console.log(`${PC}No element with id=${eId} found.`,CE); }
}
let Return = { left:left, top:top, centerX:centerX, centerY:centerY, right:right, bottom:bottom, width:width, height:height, border:{ left:border.left, top:border.top, right:border.right, bottom:border.bottom }, margin:{ left:margin.left, top:margin.top, right:margin.right, bottom:margin.bottom }, padding:{ left:padding.left, top:padding.top, right:padding.right, bottom:padding.bottom } }
if ( DEBUG ) { console.groupEnd(); }
if ( DEBUG ) { console.log(`${PC}ElementBounds=${JSON.stringify(Return)}`,CI); }
return Return;
} // END GetElementBounds.
/**
* Get the value of the checked radio button.
*
* @param {string} radioName - The radio button group name.
* @return {string} Checked radio button value,
* null if none are checked,
* undefined if the radio button group was not found.
*/
function GetRadioValue(radioName) {
let radios = document.getElementsByName(radioName);
let length = radios.length;
if (length && radios[0].type == 'radio') { // Do we have radio buttone named radioName?
for (let i = 0; i < length; i++) { // Loop thru radio buttons.
if (radios[i].checked) {
return radios[i].value; // Return the value of the checked radio button.
}
} // Loop thru radio buttons.
return null;
} // Do we have radio buttone named radioName?
} // END GetRadioValue.
/**
* Center an element in a container vertically.
*
* @param {string} elementId - The element id.
* @param {string} containerId - The container element id.
*/
function MiddleElement(elementId, containerId) {
let eContainer = document.getElementById(containerId);
if (eContainer) { // Was the container found?
let eElement = document.getElementById(elementId);
if (eElement) { // Was the element found?
let containerHeight = eContainer.offsetHeight;
let elementHeight = eElement.offsetHeight;
//console.log(`container.height=${containerHeight}`);
//console.log(`element.height=${elementHeight}`);
eElement.style.top = ((containerHeight - elementHeight) / 2) + 'px';
//console.log(`eElement.top=${eElement.style.top}`);
} // Was the element found?
} // Was the container found?
} // END MiddleElement.
/**
* Move an element.
*
* @param {string} elementId - The element id.
* @param {string} moveX - The left (X) change in px.
* @param {string} moveY - The top (Y) change in px.
*/
function MoveElementLeftTop(elementId, moveX, moveY) {
let eElement = document.getElementById(elementId);
if (moveX) {
let elementX = parseInt(eElement.style.left);
let newX = elementX + moveX;
//console.log(`elementX=${elementX} moveX=${moveX} newX=${newX}`);
eElement.style.left = newX + 'px';
}
if (moveY) {
let elementY = parseInt(eElement.style.top);
let newY = elementY + moveY;
//console.log(`elementY=${elementY} moveY=${moveY} newY=${newY}`);
eElement.style.top = newY + 'px';
}
} // END MoveElementLeftTop.