// global variables let currentDepth; let targetElement; let manualBlur; let elementQuantity; // Initialize setTimeout(function() { setPerspective(); setInteractiveElements(); generateRandomIndex(); }, 0); // Applies heights and margins to all elements in dof-container in increasing increments function setPerspective() { let element = document.getElementById("dof-container"); // target container let nodes = element.getElementsByClassName('card-common').length; // target elements in container let value = document.getElementById(`quantity-level`); let finalWidth; let finalMargin; let initialWidth let marginModifier = 1.4; let widthModifier; let count = 0; // set quantity controller elementQuantity = nodes; value.innerHTML = nodes; if (nodes < 7) { initialWidth = 100; widthModifier = 23; } if (nodes > 6 && nodes < 13) { initialWidth = 80; widthModifier = 16; } if (nodes > 12 && nodes < 18) { initialWidth = 60; widthModifier = 10; } if (nodes > 17 && nodes < 21) { initialWidth = 30; widthModifier = 10; } for (let i = 0; i < nodes; i++) { count++; finalWidth = widthModifier * count + initialWidth; finalMargin = finalWidth / marginModifier; let z = element.getElementsByClassName('card-common')[i]; z.style.width = `${finalWidth}px`; z.style.margin = `0 -${finalMargin}px 0 0`; } } function setInteractiveElements() { let element = document.getElementById("dof-container"); // target container let nodes = element.getElementsByClassName('card-common'); // target elements in container // Adds 'reveal' class to all elements in dof-container except last element // as there is no need for the last element to dodge left to reveal itself for (let i = 0; i < (nodes.length - 1); i++) { let z = nodes[i]; classAttribute = z.getAttribute("class"); console.log(`class = ${classAttribute}`) // Check if element already has the class attribute value of "reveal" if (classAttribute.includes("reveal")) { } else { z.className += " reveal"; } } // Adds and sets onmouseover attribute to all elements in dof-container for (let i = 0; i < nodes.length; i++) { let z = nodes[i]; let attribute = document.createAttribute("onmouseover"); attribute.value = "getChildNodeIndex(this);"; z.setAttributeNode(attribute); } } // Picks a random number from 0 to the number of nodes in the container. // This value is used to set an initial random 'focus' point on page load function generateRandomIndex() { let element = document.getElementById("dof-container"); // target container let nodes = element.getElementsByClassName('card-common').length; // target elements in container let randomIndex = Math.floor(Math.random() * (0 - nodes) + nodes); targetElement = randomIndex; generateDepthOfField(randomIndex); } // Takes the selected child node's index as parameter, then executes the appropriate blur method function generateDepthOfField(childIndex, handshake) { let element = document.getElementById("dof-container"); let nodes = element.getElementsByClassName('card-common').length; // target elements in container let blurLevel = document.getElementById(`blur-level`); let countOne = -1; let countTwo = -1; let above = []; let below = []; let blur; let blurState; let blurModifier; // Blur settings if (manualBlur == null) { if (nodes < 7) { blurModifier = 2; blurLevel.innerHTML = blurModifier; } if (nodes > 6 && nodes < 13) { blurModifier = 2; blurLevel.innerHTML = blurModifier; } if (nodes > 12) { blurModifier = .5; blurLevel.innerHTML = blurModifier; } } if (manualBlur > -1) { blurModifier = manualBlur; } // the following for loops blur elements above and below the // target element in increasing increments set in one of the above if statements for (let i = childIndex; i > -1; i--) { countOne++; blur = blurModifier * countOne; let z = element.getElementsByClassName(`card-common`)[i]; z.style.filter = `blur(${blur}px)`; if (blur != 0) { below.push(blur); } } for (let i = childIndex; i < nodes; i++) { countTwo++; blur = blurModifier * countTwo; let z = element.getElementsByClassName(`card-common`)[i]; z.style.filter = `blur(${blur}px)`; if (blur != 0) { above.push(blur); } } if ((above.length + below.length) == (nodes - 1)) { blurState = below.concat(0, above); currentDepth = blurState; if (handshake = 1) { setTimeout(function() { createDepthArray(targetElement); }, 150); } } } // Get index of targeted element within the dof-container function getChildNodeIndex(target) { let container = target.parentNode; let childList = container.childNodes; // console.log(child_list); let count = -1; // Step through all the child childNodes of the parent for (let i = 0; i < childList.length; i++) { let node = childList.item(i); if (node) { // Check to see if the node is a LI if (node.nodeName == `IMG`) { // Increment the count of LI childNodes count++; if (target == node) { // If so, pass count to generateDepthOfField() targetElement = count; createDepthArray(count); } } } } } // creates an array containing the blur values for each element in the container function createDepthArray(childIndex) { let element = document.getElementById("dof-container"); let nodes = element.getElementsByClassName('card-common').length; // target elements in container let countOne = -1; let countTwo = -1; let above = []; let below = []; let blur; let blurState; let blurModifier; // Blur settings if (nodes < 7) { blurModifier = 3; } if (nodes > 6 && nodes < 13) { blurModifier = 2; } if (nodes > 12) { blurModifier = 1; } for (let i = childIndex; i > -1; i--) { countOne++; blur = blurModifier * countOne; if (blur != 0) { below.push(blur); } } for (let i = childIndex; i < nodes; i++) { countTwo++; blur = blurModifier * countTwo; if (blur != 0) { above.push(blur); } } if ((above.length + below.length) == (nodes - 1)) { let reverseBelow = below.reverse(); blurState = below.concat(0, above); arrayTransform(blurState); } } function arrayTransform(targetState) { let handshake = 1; let element = document.getElementById("dof-container"); // target container let nodes = element.getElementsByClassName('card-common').length; // target elements in container // let targetState = x; // Find index of 0 [focus point] in each array let current = currentDepth.indexOf(0); let target = targetState.indexOf(0); // increase index of 0 by 1 if (current < target) { current = current + 1; generateDepthOfField(current, handshake); } // decrease index of 0 by 1 if (current > target) { current = current - 1; generateDepthOfField(current, handshake); } } // Depth of Field Controls function increaseDepth() { let value = document.getElementById(`blur-level`); x = Number(value.innerHTML); // increment depth of field intensity by .5 value.innerHTML = x + .5; manualBlur = value.innerHTML generateDepthOfField(targetElement); } function decreaseDepth() { let value = document.getElementById(`blur-level`); x = Number(value.innerHTML); // decrement depth of field intensity by .5 if (x > 0) { value.innerHTML = x - .5; manualBlur = value.innerHTML generateDepthOfField(targetElement); } } // Card quantity controls function increaseQuantity() { let element = document.getElementById('dof-container'); let nodes = element.getElementsByClassName('card-common').length; // target elements in container let value = document.getElementById(`quantity-level`); let newElement = document.createElement("img"); let srcAttribute = document.createAttribute("src"); let classAttribute = document.createAttribute("class"); // Add new elements. Hard cap of 20 elements total if (nodes<=19) { srcAttribute.value = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/707108/joker.png"; classAttribute.value = "card-common"; newElement.setAttributeNode(srcAttribute); newElement.setAttributeNode(classAttribute) element.appendChild(newElement); targetElement = nodes; // Reinitialize all setPerspective(); setInteractiveElements(); generateDepthOfField(targetElement); console.log(`current target = ${targetElement}`); } } function decreaseQuantity() { let value = document.getElementById(`quantity-level`); let element = document.getElementById("dof-container"); let nodes = element.getElementsByClassName('card-common'); // If the number of elements is greater than 0 if (nodes.length > 0) { element.removeChild(nodes[0]); value.innerHTML--; targetElement = nodes.length - 1; console.log(`nodes.length = ${nodes.length}`); // Reinitialize remaining elements setPerspective(); generateDepthOfField(targetElement); } }

!