Topalian_JavaScript_Accordion_Interface

CODE VIDEO PDF

Topalian JavaScript Accordion Interface by Christopher Topalian.pdf

<html>

<head>

<title> Topalian JavaScript Accordion Interface </title>

<style>

/* style001.css */

body

{

background-color: rgb(30, 30, 30);

color: rgb(255, 255, 255);

font-weight: bold;

}

button

{

background-color: rgb(0, 77, 129);

margin-left: 2px;

margin-right: 2px;

margin-top: 1px;

margin-bottom: 1px;

border-style: solid;

border-width: 1px;

border-color: rgb(100, 100, 255);

border-radius: 4px;

padding-left: 7px;

padding-right: 7px;

padding-top: 1px;

padding-bottom: 1px;

opacity: 1.0;

font-size: 14px;

font-weight: bold;

color: rgb(255, 255, 255);

text-align: center;

}

button:hover

{

background-color: rgb(7, 31, 47);

border-color: rgb(0, 255, 255);

color: rgb(0, 255, 255);

cursor: pointer;

}

button:active

{

color: rgb(255, 0, 255);

}

.details2 > summary {

list-style-type: '📃 ';

}

list-style-type: '📜 ';

background-color: rgb(140,140,140);

}

.details2

{

width: 400px;

/* width: 100%; */

/* list-style-type: '▶️'; */

font: 20px Arial;

color: white;

background-color: rgb(50, 50, 50);

border-style: solid;

border-width: 1px;

border-radius: 2px;

padding-left: 4px;

padding-right: 4px;

box-shadow: 1px 0px 0px rgba(3, 226, 255, 0.685);

cursor: pointer;

overflow-wrap: anywhere;

user-select: none;

}

.summary2

{

border-radius: 7px;

padding: 4px;

font: 20px Calibri;

text-align: left;

font-weight: bold;

background-color: rgb(20,20,20);

color: rgb(255,255,255);

}

.summary2:hover

{

background-color: rgb(0, 42, 149);

}

/* ---- */

/* Dedicated to God the Father */

/* https://github.com/ChristopherTopalian */

/* https://github.com/ChristopherAndrewTopalian */

/* https://sites.google.com/view/CollegeOfScripting */

</style>

// shortcuts.js

function ge(whichId)

{

let result = document.getElementById(whichId);

return result;

}

function ce(whichType)

{

let result = document.createElement(whichType);

return result;

}

function ba(whichElement)

{

let result = document.body.append(whichElement);

return result;

}

function ct(whichText)

{

let result = document.createTextNode(whichText);

return result;

}

function gr(whichId)

{

let result = ge(whichId).getBoundingClientRect();

return result;

}

function cl(whichMessage)

{

let result = console.log(whichMessage);

return result;

}

//--//

// Dedicated to God the Father

// https://github.com/ChristopherTopalian

// https://github.com/ChristopherAndrewTopalian

// https://sites.google.com/view/CollegeOfScripting

// periodicTableArray.js

let periodicTableArray = [

{

abbreviation: "H",

url: "https://en.wikipedia.org/wiki/Hydrogen",

description: "Hydrogen is the chemical element with the symbol H and atomic number 1. Hydrogen is the lightest element. At standard conditions hydrogen is a gas of diatomic molecules having the formula H2. It is colorless, odorless, tasteless,[8] non-toxic, and highly combustible. Hydrogen is the most abundant chemical substance in the universe, constituting roughly 75% of all normal matter.[9][note 1] Stars such as the Sun are mainly composed of hydrogen in the plasma state. Most of the hydrogen on Earth exists in molecular forms such as water and organic compounds. For the most common isotope of hydrogen (symbol 1H) each atom has one proton, one electron, and no neutrons. "

},

{

abbreviation: "He",

url: "https://en.wikipedia.org/wiki/Helium",

description: "Helium (from Greek: ἥλιος, romanized: helios, lit. 'sun') is a chemical element with the symbol He and atomic number 2. It is a colorless, odorless, tasteless, non-toxic, inert, monatomic gas, the first in the noble gas group in the periodic table.[a] Its boiling and melting point are the lowest among all the elements. Helium is the second lightest and second most abundant element in the observable universe (hydrogen is the lightest and most abundant). It is present at about 24% of the total elemental mass, which is more than 12 times the mass of all the heavier elements combined. Its abundance is similar to this in both the Sun and in Jupiter. This is due to the very high nuclear binding energy (per nucleon) of helium-4, with respect to the next three elements after helium. This helium-4 binding energy also accounts for why it is a product of both nuclear fusion and radioactive decay. Most helium in the universe is helium-4, the vast majority of which was formed during the Big Bang. Large amounts of new helium are being created by nuclear fusion of hydrogen in stars. "

},

{

abbreviation: "Li",

url: "https://en.wikipedia.org/wiki/Lithium",

description: "Lithium (from Greek: λίθος, romanized: lithos, lit. 'stone') is a chemical element with the symbol Li and atomic number 3. It is a soft, silvery-white alkali metal. Under standard conditions, it is the least dense metal and the least dense solid element. Like all alkali metals, lithium is highly reactive and flammable, and must be stored in vacuum, inert atmosphere or inert liquid such as purified kerosene or mineral oil. When cut, it exhibits a metallic luster, but moist air corrodes it quickly to a dull silvery gray, then black tarnish. It never occurs freely in nature, but only in (usually ionic) compounds, such as pegmatitic minerals, which were once the main source of lithium. Due to its solubility as an ion, it is present in ocean water and is commonly obtained from brines. Lithium metal is isolated electrolytically from a mixture of lithium chloride and potassium chloride. "

},

{

abbreviation: "B",

url: "https://en.wikipedia.org/wiki/Beryllium",

description: "Beryllium is a chemical element with the symbol Be and atomic number 4. It is a steel-gray, strong, lightweight and brittle alkaline earth metal. It is a divalent element that occurs naturally only in combination with other elements to form minerals. Notable gemstones high in beryllium include beryl (aquamarine, emerald) and chrysoberyl. It is a relatively rare element in the universe, usually occurring as a product of the spallation of larger atomic nuclei that have collided with cosmic rays."

}

];

//--//

// Dedicated to God the Father

// https://github.com/ChristopherTopalian

// https://github.com/ChristopherAndrewTopalian

// https://sites.google.com/view/CollegeOfScripting

// makeInterface.js

function makeInterface(whichArray)

{

let menuId = 'accordionMainDiv';

if (ge(menuId))

{

removeElement(menuId);

}

//-//

let mainDiv = ce("div");

mainDiv.id = menuId;

mainDiv.style.position = "absolute";

mainDiv.style.left = 35 + 'px';

mainDiv.style.top = 35 + 'px';

mainDiv.style.height = 190 +'px';

mainDiv.style.paddingLeft = "20px";

mainDiv.style.paddingRight = "20px";

mainDiv.style.paddingTop = "15px";

mainDiv.style.paddingBottom = "15px";

mainDiv.style.zIndex = "1004";

mainDiv.style.background = "black";

mainDiv.style.borderStyle = "solid";

mainDiv.style.borderWidth = "2px";

mainDiv.style.borderColor = "rgba(100,100,255,1.0)";

mainDiv.style.borderRadius= "10px";

mainDiv.style.fontFamily = "arial";

mainDiv.style.fontWeight = "bold";

mainDiv.style.fontSize = "large";

mainDiv.style.color = "white";

mainDiv.style.textAlign = "left";

mainDiv.style.overflowY = 'scroll';

mainDiv.style.resize = 'both';

ba(mainDiv);

//-//

makeElementDraggable(mainDiv);

//-//

let theMenu = ce("div");

theMenu.style.marginBottom = 4 + 'px';

theMenu.style.width = '200px';

mainDiv.append(theMenu);

//-//

// minimize button

mainDiv.append(makeMinimizeButton(menuId));

//-//

// maximize button

mainDiv.append(makeMaximizeButton(menuId));

//-//

for(let x = 0; x < whichArray.length; x++)

{

let theDetails = ce("details");

theDetails.innerHTML = whichArray[x].name.bold();

theDetails.className = "details2";

theDetails.style.padding = "5px 5px 5px 5px";

theDetails.style.fontSize = 22 + 'px';

mainDiv.append(theDetails);

//-//

let theSummary = ce("summary");

theSummary.innerHTML = whichArray[x].abbreviation;

theSummary.className = "summary2";

theSummary.onmouseover = function()

{

hoverSound();

};

theSummary.onclick = function()

{

clickSound();

};

theDetails.append(theSummary);

//-//

let theUrl = ce("div");

theUrl.innerHTML = whichArray[x].url;

theDetails.append(theUrl);

//-//

let theDescription = ce("div");

theDescription.innerHTML = whichArray[x].description;

theDetails.append(theDescription);

}

//--//

// Dedicated to God the Father

// https://github.com/ChristopherTopalian

// https://github.com/ChristopherAndrewTopalian

// https://sites.google.com/view/CollegeOfScripting

// makeMaximizeButton.js

function makeMaximizeButton(whichMenuId)

{

let maximizeButton = ce("button");

maximizeButton.style.position = "absolute";

maximizeButton.style.top = "0px";

maximizeButton.style.right = "0px";

maximizeButton.textContent = 'O';

maximizeButton.style.cursor = 'pointer';

maximizeButton.style.fontSize = '10px';

maximizeButton.onmouseover = function()

{

hoverSound();

};

maximizeButton.onclick = function()

{

clickSound();

ge(whichMenuId).style.height = 190 + 'px';

};

return maximizeButton;

}

//--//

// Dedicated to God the Father

// https://github.com/ChristopherTopalian

// https://github.com/ChristopherAndrewTopalian

// https://sites.google.com/view/CollegeOfScripting

// makeMinimizeButton.js

function makeMinimizeButton(whichMenuId)

{

let minimizeButton = ce("button");

minimizeButton.style.marginRight = '10px';

minimizeButton.style.position = "absolute";

minimizeButton.style.top = "0px";

minimizeButton.style.right = "15px";

minimizeButton.textContent = '_';

minimizeButton.style.cursor = 'pointer';

minimizeButton.style.fontSize = '10px';

minimizeButton.onmouseover = function()

{

hoverSound();

};

minimizeButton.onclick = function()

{

clickSound();

ge(whichMenuId).style.height = 0 + 'px';

};

return minimizeButton;

}

//--//

// Dedicated to God the Father

// https://github.com/ChristopherTopalian

// https://github.com/ChristopherAndrewTopalian

// https://sites.google.com/view/CollegeOfScripting

// makeTitleOfApp.js

function makeTitleOfApp()

{

let mainDiv = ce('div');

mainDiv.style.position = 'absolute';

mainDiv.style.right = '20px';

mainDiv.style.top = '2px';

mainDiv.style.zIndex = 1;

ba(mainDiv);

//-//

let titleOfApp = ce('a');

titleOfApp.id = 'titleOfApp';

titleOfApp.textContent = 'Topalian JavaScript Accordion Interface';

titleOfApp.href = 'https://github.com/christophertopalian/';

titleOfApp.target = '_blank';

titleOfApp.style.fontSize = '17px';

titleOfApp.style.fontWeight = 'bold';

titleOfApp.style.textDecoration = 'none';

titleOfApp.style.color = 'rgb(100, 100, 100)';

mainDiv.append(titleOfApp);

}

//--//

// Dedicated to God the Father

// https://github.com/ChristopherTopalian

// https://github.com/ChristopherAndrewTopalian

// https://sites.google.com/view/CollegeOfScripting

// sound.js

let audioCtx = new (window.AudioContext || window.webkitAudioContext)();

function playTone(frequency, duration, waveType, volume, detune, attackTime, releaseTime, panValue)

{

let oscillator = audioCtx.createOscillator();

// 'sine', 'square', 'sawtooth', 'triangle'

oscillator.type = waveType;

oscillator.frequency.setValueAtTime(frequency, audioCtx.currentTime);

oscillator.detune.setValueAtTime(detune, audioCtx.currentTime);

let gainNode = audioCtx.createGain();

let pannerNode = audioCtx.createStereoPanner();

oscillator.connect(gainNode);

gainNode.connect(pannerNode);

pannerNode.connect(audioCtx.destination);

gainNode.gain.setValueAtTime(0, audioCtx.currentTime);

// attack

gainNode.gain.linearRampToValueAtTime(volume, audioCtx.currentTime + attackTime);

gainNode.gain.linearRampToValueAtTime(0,

// release

audioCtx.currentTime + duration / 1000 - releaseTime);

pannerNode.pan.setValueAtTime(panValue, audioCtx.currentTime);

oscillator.start();

oscillator.stop(audioCtx.currentTime + duration / 1000);

}

function hoverSound()

{

playTone(

300, // frequency

400, // duration

'sine', // waveType

0.03, // volume

-500, // detune

0.1, // attackTime

0.1, // releaseTime

0.0 // panValue -0.5 is left

);

}

function clickSound()

{

playTone(

400, // frequency

500, // duration

'sine', // waveType

0.2, // volume

50, // detune

0.2, // attackTime

0.2, // releaseTime

-0.5 // panValue -0.5 is left

);

}

//--//

// Dedicated to God the Father

// https://github.com/ChristopherTopalian

// https://github.com/ChristopherAndrewTopalian

// https://sites.google.com/view/CollegeOfScripting

// makeElementDraggable.js

// creating event handler for mouse down

function createMouseDownHandler(element, state)

{

return function(e)

{

// ignore mouse down events on textarea or input elements

if (e.target.tagName === 'TEXTAREA' || e.target.tagName === 'INPUT')

{

return;

}

e.preventDefault();

state.startX = e.clientX;

state.startY = e.clientY;

document.onmousemove = createMouseMoveHandler(element, state);

document.onmouseup = createMouseUpHandler();

};

}

// creating event handler for mouse move

function createMouseMoveHandler(element, state) {

return function(e)

{

// ignore mouse move events on textarea or input elements

if (e.target.tagName === 'TEXTAREA' || e.target.tagName === 'INPUT')

{

return;

}

e.preventDefault();

let deltaX = state.startX - e.clientX;

let deltaY = state.startY - e.clientY;

state.startX = e.clientX;

state.startY = e.clientY;

let newTop = element.offsetTop - deltaY;

let newLeft = element.offsetLeft - deltaX;

element.style.top = newTop + "px";

element.style.left = newLeft + "px";

};

}

// creating event handler for mouse up

function createMouseUpHandler()

{

return function()

{

document.onmousemove = null;

document.onmouseup = null;

};

}

// make an element draggable

function makeElementDraggable(element)

{

let state = { startX: 0, startY: 0 };

element.onmousedown = createMouseDownHandler(element, state);

}

//--//

// Dedicated to God the Father

// https://github.com/ChristopherTopalian

// https://github.com/ChristopherAndrewTopalian

// https://sites.google.com/view/CollegeOfScripting

// whenLoaded.js

function whenLoaded()

{

makeInterface(periodicTableArray);

makeTitleOfApp();

}

//--//

// Dedicated to God the Father

// https://github.com/ChristopherTopalian

// https://github.com/ChristopherAndrewTopalian

// https://sites.google.com/view/CollegeOfScripting

</script>

</head>

</body>

</html>