Differences
This shows you the differences between two versions of the page.
| Both sides previous revision Previous revision Next revision | Previous revision | ||
| steve-image-carosel-test-page3 [2023/01/31 02:35] – steve.wang | steve-image-carosel-test-page3 [2023/02/09 06:44] (current) – steve.wang | ||
|---|---|---|---|
| Line 1: | Line 1: | ||
| ====== Designing Service: Using Research & Empathy to Assist Society 服務設計：透過研究與同理心創造包容性社會 ====== | ====== Designing Service: Using Research & Empathy to Assist Society 服務設計：透過研究與同理心創造包容性社會 ====== | ||
| - | === design | + | ===Design |
| < | < | ||
| Line 32: | Line 32: | ||
| -webkit-transform: | -webkit-transform: | ||
| transform: scaleX(-1); | transform: scaleX(-1); | ||
| - | opacity:0.7; | + | opacity:0.5; |
| color: grey; | color: grey; | ||
| background-color: | background-color: | ||
| Line 39: | Line 39: | ||
| .left: | .left: | ||
| - | opacity:1; | + | opacity:0.9; |
| } | } | ||
| Line 47: | Line 47: | ||
| line-height: | line-height: | ||
| display: inline-block; | display: inline-block; | ||
| - | opacity:0.7; | + | opacity:0.5; |
| color: grey; | color: grey; | ||
| background-color: | background-color: | ||
| Line 54: | Line 54: | ||
| .right: | .right: | ||
| - | opacity:1; | + | opacity:0.9; |
| } | } | ||
| .arrow{ | .arrow{ | ||
| Line 128: | Line 128: | ||
| let info=[{ | let info=[{ | ||
| imageSrc:' | imageSrc:' | ||
| - | | + | |
| href:' | href:' | ||
| description:' | description:' | ||
| },{ | },{ | ||
| imageSrc:' | imageSrc:' | ||
| - | | + | |
| href:' | href:' | ||
| description:' | description:' | ||
| },{ | },{ | ||
| imageSrc:' | imageSrc:' | ||
| - | | + | |
| href:' | href:' | ||
| description:' | description:' | ||
| Line 146: | Line 146: | ||
| let info=[{ | let info=[{ | ||
| imageSrc:' | imageSrc:' | ||
| - | | + | |
| href:' | href:' | ||
| description:' | description:' | ||
| },{ | },{ | ||
| imageSrc:' | imageSrc:' | ||
| - | | + | |
| href:' | href:' | ||
| description:' | description:' | ||
| },{ | },{ | ||
| imageSrc:' | imageSrc:' | ||
| - | | + | |
| href:' | href:' | ||
| description:' | description:' | ||
| },{ | },{ | ||
| imageSrc:' | imageSrc:' | ||
| - | | + | |
| href:' | href:' | ||
| description:' | description:' | ||
| },{ | },{ | ||
| imageSrc:' | imageSrc:' | ||
| - | | + | |
| href:' | href:' | ||
| description:' | description:' | ||
| Line 195: | Line 195: | ||
| else if (domLocation==' | else if (domLocation==' | ||
| // | // | ||
| - | document.getElementById(' | + | document.getElementById(' |
| } | } | ||
| else{ | else{ | ||
| Line 213: | Line 213: | ||
| else if (domLocation==' | else if (domLocation==' | ||
| // | // | ||
| - | document.getElementById(' | + | document.getElementById(' |
| } | } | ||
| else{ | else{ | ||
| Line 226: | Line 226: | ||
| } | } | ||
| else{ | else{ | ||
| - | this.mainImg1.href=this.info[1].portriatSrc | + | this.mainImg1.href=this.info[1].portraitSrc |
| } | } | ||
| this.mainImg1.className=' | this.mainImg1.className=' | ||
| Line 235: | Line 235: | ||
| } | } | ||
| else{ | else{ | ||
| - | this.mainImg2.src=this.info[0].portriatSrc | + | this.mainImg2.src=this.info[0].portraitSrc |
| } | } | ||
| this.mainImg2.className=' | this.mainImg2.className=' | ||
| Line 284: | Line 284: | ||
| arrowSizes=100 | arrowSizes=100 | ||
| } | } | ||
| - | else if (deviceOrientation==' | + | else if (deviceOrientation==' |
| console.log(' | console.log(' | ||
| - | arrowSizes=browserZoomLevel/ | + | arrowSizes=browserZoomLevel/ |
| } | } | ||
| this.right.style.width=arrowSizes+' | this.right.style.width=arrowSizes+' | ||
| Line 300: | Line 300: | ||
| this.left.style.top=' | this.left.style.top=' | ||
| this.left.className=' | this.left.className=' | ||
| + | /* | ||
| + | this.mainImg1.style.position=' | ||
| + | this.mainImg2.style.position=' | ||
| + | let arrowSizes=browserZoomLevel/ | ||
| + | this.mainImg1.style.width=this.mainImg1.getBoundingClientRect().width-arrowSizes-100+' | ||
| + | this.mainImg1.style.height=this.mainImg1.getBoundingClientRect().height-arrowSizes-100+' | ||
| + | this.mainImg2.style.width=this.mainImg2.getBoundingClientRect().width-arrowSizes-100+' | ||
| + | this.mainImg2.style.height=this.mainImg2.getBoundingClientRect().height-arrowSizes-100+' | ||
| + | this.mainImg1.style.left=this.mainImg1.getBoundingClientRect().x+arrowSizes+' | ||
| + | this.mainImg2.style.left=this.mainImg1.getBoundingClientRect().x+arrowSizes+' | ||
| + | this.mainImg1.style.position=' | ||
| + | this.mainImg2.style.position=' | ||
| + | */ | ||
| this.correctCenteredImgPosition=new Point(this.centeredImg.getBoundingClientRect().x, | this.correctCenteredImgPosition=new Point(this.centeredImg.getBoundingClientRect().x, | ||
| this.carosel.insertBefore(this.right, | this.carosel.insertBefore(this.right, | ||
| Line 445: | Line 458: | ||
| } | } | ||
| },8000) | },8000) | ||
| + | } | ||
| + | imageJumpAnimationRight (amount){ | ||
| + | this.currentImage-=amount | ||
| + | if (this.currentImage< | ||
| + | this.currentImage=this.info.length+this.currentImage | ||
| + | } | ||
| + | this.centeredImg.style.left=this.carosel.getBoundingClientRect().right*3+' | ||
| + | let jumpInterval=setInterval(()=> | ||
| + | this.centeredImg.style.left=this.correctCenteredImgPosition.x+' | ||
| + | }, | ||
| + | setTimeout(()=> | ||
| + | clearInterval(jumpInterval) | ||
| + | this.changeContent(this.centeredImg) | ||
| + | }, | ||
| + | } | ||
| + | textDesciption (){ | ||
| + | this.infoText=document.createElement(' | ||
| + | this.infoText.style.backgroundColor=' | ||
| + | this.infoText.style.textAlign = " | ||
| + | this.infoText.style.font=' | ||
| + | this.infoText.style.color=' | ||
| + | this.infoText.style.wordWrap=' | ||
| + | // | ||
| + | this.infoText.style.overflow=' | ||
| + | this.mainImg1.style.height=this.carosel.getBoundingClientRect().height-100+' | ||
| + | this.mainImg2.style.height=this.carosel.getBoundingClientRect().height-100+' | ||
| + | this.infoText.textContent=' | ||
| + | this.infoText.style.position=' | ||
| + | this.infoText.style.top=this.carosel.getBoundingClientRect().height-100+' | ||
| + | this.infoText.style.left=' | ||
| + | this.infoText.style.width=this.carosel.getBoundingClientRect().width-3+' | ||
| + | this.infoText.style.height=' | ||
| + | this.carosel.appendChild(this.infoText) | ||
| } | } | ||
| changeContent (toChangeTo){ | changeContent (toChangeTo){ | ||
| Line 452: | Line 498: | ||
| } | } | ||
| else{ | else{ | ||
| - | toChangeTo.src=this.info[this.currentImage].portriatSrc | + | toChangeTo.src=this.info[this.currentImage].portraitSrc |
| } | } | ||
| } | } | ||
| Line 459: | Line 505: | ||
| | | ||
| } | } | ||
| - | } | + | |
| } | } | ||
| + | |||
| + | function manuallyMoveHtmlToRight (elem, | ||
| + | if (counter==undefined){ | ||
| + | counter=1} | ||
| + | elem.style.left=startX+moveBy*counter+' | ||
| + | if (counter< | ||
| + | setTimeout(()=> | ||
| + | manuallyMoveHtmlToRight(elem, | ||
| + | } | ||
| + | |||
| + | |||
| + | function manuallyMoveHtmlToLeft (elem, | ||
| + | if (counter==undefined){ | ||
| + | counter=1} | ||
| + | elem.style.left=startX-moveBy*counter+' | ||
| + | if (counter< | ||
| + | setTimeout(()=> | ||
| + | manuallyMoveHtmlToLeft(elem, | ||
| + | } | ||
| + | |||
| + | /* | ||
| + | async function sequencingSwitchingImages (imageCaroselNumber){ | ||
| + | await carosels[imageCaroselNumber][carosels[imageCaroselNumber][queue][0]]() | ||
| + | | ||
| + | if (carosels[imageCaroselNumber][queue].length> | ||
| + | sequencingSwitchingImages(imageCaroselNumber) | ||
| + | } | ||
| + | } | ||
| + | |||
| + | async function sequencingSwitchingImages (imageCaroselNumber){ | ||
| + | let currentImageCarosel=carosels[imageCaroselNumber] | ||
| + | await currentImageCarosel[currentImageCarosel.queue[0]]() | ||
| + | // | ||
| + | | ||
| + | if (currentImageCarosel.queue.length> | ||
| + | sequencingSwitchingImages(imageCaroselNumber) | ||
| + | } | ||
| + | } | ||
| + | |||
| + | */ | ||
| let imageAutoSwitchCooldown=false | let imageAutoSwitchCooldown=false | ||
| Line 482: | Line 568: | ||
| setTimeout(()=> | setTimeout(()=> | ||
| resetImageSwitchCooldown(currentImageCarosel) | resetImageSwitchCooldown(currentImageCarosel) | ||
| - | },3000) | + | },5000) |
| } | } | ||
| - | },2000) | + | },3000) |
| } | } | ||
| Line 490: | Line 576: | ||
| window.addEventListener(" | window.addEventListener(" | ||
| | | ||
| - | | + | if (window.innerWidth< |
| - | deviceOrientation=' | + | |
| - | } | + | |
| - | else{ | + | } |
| - | deviceOrientation=' | + | else{ |
| - | } | + | |
| - | higs=new ImageCarosel(' | + | |
| - | higs.createArrows() | + | } |
| - | carosels.push(higs) | + | console.log(' |
| - | higs.autoScroller() | + | //higs=new ImageCarosel(new Point(1920, |
| + | //hhigs=new ImageCarosel(' | ||
| + | higs=new ImageCarosel(' | ||
| + | higs.createArrows() | ||
| + | carosels.push(higs) | ||
| + | // | ||
| + | higs.quickRight() | ||
| + | //higs.autoScroller() | ||
| + | /* | ||
| setTimeout(()=> | setTimeout(()=> | ||
| - | updateCaroselWidth(higs) | + | if (deviceOrientation==' |
| - | document.getElementById(' | + | higs.carosel.style.height=window.innerHeight+' |
| + | higs.carosel.style.width=window.innerWidth-100+' | ||
| + | document.getElementById(' | ||
| higs.caroselLocation=new Point(0, | higs.caroselLocation=new Point(0, | ||
| + | } | ||
| + | else{ | ||
| + | higs.carosel.style.height=window.innerHeight+' | ||
| + | higs.carosel.style.width=window.innerWidth+' | ||
| + | document.getElementById(' | ||
| + | higs.caroselLocation=new Point(100, | ||
| + | } | ||
| + | },1000) | ||
| + | */ | ||
| + | setTimeout(()=> | ||
| + | // | ||
| + | higs.carosel.style.width=' | ||
| + | // higs.carosel.style.width=' | ||
| + | // | ||
| + | document.getElementById(' | ||
| + | higs.caroselLocation=new Point(0, | ||
| setTimeout(()=> | setTimeout(()=> | ||
| higs.addSpaceAbove(2) | higs.addSpaceAbove(2) | ||
| - | | + | |
| - | console.log('option 1 chosen') | + | // higs.carosel.style.height=' |
| - | higs.carosel.style.height=' | + | higs.carosel.style.height=higs.mainImg1.getBoundingClientRect().height+' |
| - | higs.carosel.style.height=higs.mainImg1.getBoundingClientRect().height+' | + | },100) |
| - | } | + | },300) |
| - | else{ | + | |
| - | console.log(' | + | |
| - | higs.carosel.style.height=' | + | |
| - | } | + | |
| - | },200) | + | |
| - | },10) | + | |
| }) | }) | ||
| - | |||
| - | window.addEventListener(" | ||
| - | console.log(' | ||
| - | let oldOrientation=deviceOrientation | ||
| - | browserZoomLevel = Math.round(window.devicePixelRatio * 100); | ||
| - | if (window.innerWidth< | ||
| - | deviceOrientation=' | ||
| - | } | ||
| - | else{ | ||
| - | deviceOrientation=' | ||
| - | } | ||
| - | carosels.forEach(x=> | ||
| - | updateCaroselWidth(x) | ||
| - | updateCaroselHeight(x) | ||
| - | x.mainImg1.style.width=x.carosel.getBoundingClientRect().width+' | ||
| - | x.mainImg1.style.height==x.carosel.getBoundingClientRect().height+' | ||
| - | x.mainImg2.style.width=x.carosel.getBoundingClientRect().width+' | ||
| - | x.mainImg2.style.height==x.carosel.getBoundingClientRect().height+' | ||
| - | x.right.remove() | ||
| - | x.left.remove() | ||
| - | x.createArrows() | ||
| - | }) | ||
| - | }) | ||
| - | |||
| - | function updateCaroselWidth (caroselElem){ | ||
| - | if (deviceType==' | ||
| - | caroselElem.carosel.style.width=window.innerWidth-100+' | ||
| - | } | ||
| - | else { | ||
| - | caroselElem.carosel.style.width=' | ||
| - | } | ||
| - | |||
| - | } | ||
| - | |||
| - | function updateCaroselHeight (caroselElem){ | ||
| - | if (window.innerHeight< | ||
| - | | ||
| - | } | ||
| - | else{ | ||
| - | caroselElem.carosel.style.height=' | ||
| - | } | ||
| - | } | ||
| - | |||
| - | async function afterCaroselAppended (){ | ||
| - | await waitForCaroselAppend() | ||
| - | higs.addSpaceAbove(2) | ||
| - | if (window.innerHeight< | ||
| - | console.log(' | ||
| - | higs.carosel.style.height=' | ||
| - | higs.carosel.style.height=higs.mainImg1.getBoundingClientRect().height+' | ||
| - | } | ||
| - | else{ | ||
| - | console.log(' | ||
| - | higs.carosel.style.height=' | ||
| - | } | ||
| - | } | ||
| - | |||
| - | function waitForCaroselAppend (){ | ||
| - | return new Promise((resolve, | ||
| - | if (higs.carosel.parentElement.id==' | ||
| - | resolve(true) | ||
| - | } | ||
| - | }); | ||
| - | } | ||
| function getDeviceType () { | function getDeviceType () { | ||
| Line 643: | Line 685: | ||
| })) | })) | ||
| } | } | ||
| + | |||
| + | if (deviceTyp!=' | ||
| + | window.addEventListener(" | ||
| + | console.log(' | ||
| + | if (window.innerWidth< | ||
| + | // | ||
| + | console.log(' | ||
| + | deviceOrientation=' | ||
| + | higs.sequenceActions(' | ||
| + | setTimeout(()=> | ||
| + | higs.carosel.style.height=higs.centeredImg.getBoundingClientRect().height+' | ||
| + | },300) | ||
| + | } | ||
| + | // | ||
| + | else{ | ||
| + | // | ||
| + | console.log(' | ||
| + | deviceOrientation=' | ||
| + | higs.sequenceActions(' | ||
| + | | ||
| + | higs.carosel.style.height=higs.centeredImg.getBoundingClientRect().height+' | ||
| + | },200) | ||
| + | // | ||
| + | } | ||
| + | }) | ||
| + | } | ||
| + | |||
| + | /* | ||
| + | let startPoint; | ||
| + | window.addEventListener(" | ||
| + | console.log(' | ||
| + | startPoint=JSON.parse(JSON.stringify(new Point(e.touches[0].clientX, | ||
| + | }) | ||
| + | |||
| + | window.addEventListener(" | ||
| + | console.log(' | ||
| + | if (startPoint.x< | ||
| + | console.log(' | ||
| + | checkIfSwitchImageLeft(e.target) | ||
| + | } | ||
| + | else { | ||
| + | console.log(' | ||
| + | checkIfSwitchImageRight(e.target) | ||
| + | } | ||
| + | }) | ||
| + | */ | ||
| document.addEventListener(' | document.addEventListener(' | ||
| Line 766: | Line 854: | ||
| } | } | ||
| function createWikiSpacing (){ | function createWikiSpacing (){ | ||
| - | for (let i = 0; i < (1/ | + | for (let i = 0; i < (1/ |
| } | } | ||
| } | } | ||
| Line 777: | Line 865: | ||
| </ | </ | ||
| </ | </ | ||
| + | |||
| + | === Some Website Highlights 一些網頁精彩亮點 === | ||
| + | |||
| + | < | ||
| + | |||
| + | < | ||
| + | < | ||
| + | < | ||
| + | | ||
| + | width: auto; | ||
| + | height: 400px; | ||
| + | } | ||
| + | </ | ||
| + | < | ||
| + | <link rel=" | ||
| + | </ | ||
| + | |||
| + | < | ||
| + | <script src=" | ||
| + | < | ||
| + | const destressingCanvas = SVG().addTo(' | ||
| + | destressingCanvas.node.id = " | ||
| + | destressingCanvas.node.classList.add(' | ||
| + | const elderlyCanvas = SVG().addTo(' | ||
| + | elderlyCanvas.node.id = " | ||
| + | elderlyCanvas.node.classList.add(' | ||
| + | const microCanvas = SVG().addTo(' | ||
| + | microCanvas.node.id = " | ||
| + | microCanvas.node.classList.add(' | ||
| + | const hydraCanvas = SVG().addTo(' | ||
| + | hydraCanvas.node.id = " | ||
| + | hydraCanvas.node.classList.add(' | ||
| + | const visualCanvas = SVG().addTo(' | ||
| + | visualCanvas.node.id = " | ||
| + | visualCanvas.node.classList.add(' | ||
| + | const simulationCanvas = SVG().addTo(' | ||
| + | simulationCanvas.node.id = " | ||
| + | simulationCanvas.node.classList.add(' | ||
| + | const studentsCanvas = SVG().addTo(' | ||
| + | studentsCanvas.node.id = " | ||
| + | studentsCanvas.node.classList.add(' | ||
| + | const impressionCanvas = SVG().addTo(' | ||
| + | impressionCanvas.node.id = " | ||
| + | //put them in a HTML class | ||
| + | impressionCanvas.node.classList.add(' | ||
| + | |||
| + | |||
| + | |||
| + | let allSvgs = [] | ||
| + | |||
| + | let allSvgsObj = {} | ||
| + | |||
| + | //some notes: create a bunch of SVG canvas, and stuff different butotns in one by one. | ||
| + | //Make a function that activates buttons | ||
| + | // | ||
| + | |||
| + | |||
| + | function checkIfSVGjsElement(item) { | ||
| + | try { | ||
| + | item.dmove(0, | ||
| + | return true | ||
| + | } catch { | ||
| + | return false | ||
| + | } | ||
| + | } | ||
| + | |||
| + | |||
| + | function getAllShapes(svgArray, | ||
| + | let newSvgArray = [] | ||
| + | // | ||
| + | // | ||
| + | if (svgArray == undefined) { | ||
| + | // | ||
| + | // | ||
| + | // | ||
| + | // | ||
| + | // | ||
| + | canvas.children().forEach(e => { | ||
| + | getAllShapes(e.children()) | ||
| + | }) | ||
| + | } else { | ||
| + | svgArray.forEach(x => { | ||
| + | if (x.type == ' | ||
| + | x.children().forEach(y => { | ||
| + | // | ||
| + | newSvgArray.push(y) | ||
| + | }) | ||
| + | } else if (x.type != ' | ||
| + | //remove the css color, and replace it with the .fill() color in SVG.js | ||
| + | // | ||
| + | x.fill(x.node.style.fill) | ||
| + | x.node.style = null; | ||
| + | // | ||
| + | // | ||
| + | allSvgs.push(x) | ||
| + | } | ||
| + | }) | ||
| + | } | ||
| + | if (newSvgArray.length > 0) { | ||
| + | getAllShapes(newSvgArray) | ||
| + | } | ||
| + | } | ||
| + | |||
| + | //from https:// | ||
| + | //reads a text file | ||
| + | function readTextFile(file) { | ||
| + | let rawFile = new XMLHttpRequest(); | ||
| + | rawFile.open(" | ||
| + | let allText; | ||
| + | rawFile.onreadystatechange = function() { | ||
| + | if (rawFile.readyState === 4) { | ||
| + | if (rawFile.status === 200 || rawFile.status == 0) { | ||
| + | allText = rawFile.responseText; | ||
| + | // | ||
| + | } | ||
| + | } | ||
| + | } | ||
| + | rawFile.send(null); | ||
| + | return allText; | ||
| + | } | ||
| + | |||
| + | //Change files to the format that we can use | ||
| + | function readFile(input) { | ||
| + | let file = input.files[0]; | ||
| + | // | ||
| + | // | ||
| + | |||
| + | let reader = new FileReader(); | ||
| + | |||
| + | reader.readAsText(file); | ||
| + | |||
| + | reader.onload = function() { | ||
| + | // | ||
| + | }; | ||
| + | |||
| + | reader.onerror = function() { | ||
| + | // | ||
| + | }; | ||
| + | return reader | ||
| + | } | ||
| + | |||
| + | //code from Chat-GPT, https:// | ||
| + | function removeCamelCase(str) { | ||
| + | // Split the string into an array of words | ||
| + | let words = str.split(/ | ||
| + | |||
| + | // Remove the first word and join the remaining words with a space | ||
| + | let result = words.slice(1).join(" | ||
| + | |||
| + | return result; | ||
| + | } | ||
| + | |||
| + | //put svgs into an object and use their ids as their keys | ||
| + | function putSvgsInObject(svgArray, | ||
| + | if (camelCase) { | ||
| + | svgArray.forEach(e => object[removeCamelCase(e.node.id)] = e) | ||
| + | } else { | ||
| + | svgArray.forEach(e => object[e.node.id] = e) | ||
| + | } | ||
| + | } | ||
| + | |||
| + | function printObject(obj) { | ||
| + | for (const [key, value] of Object.entries(obj)) { | ||
| + | // | ||
| + | } | ||
| + | } | ||
| + | |||
| + | function changeCursor(style) { | ||
| + | document.getElementsByTagName(" | ||
| + | } | ||
| + | |||
| + | |||
| + | function displaySvgs(canvas, | ||
| + | //let svgXml = readTextFile(file) | ||
| + | files.forEach(e => { | ||
| + | canvas.svg(readTextFile(e)) | ||
| + | }) | ||
| + | // | ||
| + | // | ||
| + | // | ||
| + | // | ||
| + | getAllShapes(undefined, | ||
| + | putSvgsInObject(allSvgs, | ||
| + | // | ||
| + | // | ||
| + | } | ||
| + | |||
| + | |||
| + | |||
| + | //if (document.readyState === ' | ||
| + | // | ||
| + | //} | ||
| + | |||
| + | //from https:// | ||
| + | //function createElementFromHTML(htmlString) { | ||
| + | //var div = document.createElement(' | ||
| + | // | ||
| + | |||
| + | //// Change this to div.childNodes to support multiple top-level nodes. | ||
| + | //return div; | ||
| + | //} | ||
| + | |||
| + | //function makeSvgElement(directory, | ||
| + | //let svgElement = createElementFromHTML(readFile(directory)) | ||
| + | // | ||
| + | // | ||
| + | //} | ||
| + | |||
| + | |||
| + | // | ||
| + | |||
| + | // | ||
| + | //// | ||
| + | // | ||
| + | //}) | ||
| + | |||
| + | displaySvgs(destressingCanvas, | ||
| + | |||
| + | displaySvgs(elderlyCanvas, | ||
| + | |||
| + | displaySvgs(microCanvas, | ||
| + | |||
| + | displaySvgs(hydraCanvas, | ||
| + | |||
| + | displaySvgs(visualCanvas, | ||
| + | |||
| + | displaySvgs(simulationCanvas, | ||
| + | |||
| + | displaySvgs(studentsCanvas, | ||
| + | |||
| + | displaySvgs(impressionCanvas, | ||
| + | |||
| + | let destressingSvgs = []; | ||
| + | let destressingSvgsObj = {}; | ||
| + | |||
| + | let elderlySvgs = []; | ||
| + | let elderlySvgsObj = {}; | ||
| + | |||
| + | //micro means micro-controllers | ||
| + | let microSvgs = []; | ||
| + | let microSvgsObj = {}; | ||
| + | |||
| + | let simulationSvgs = []; | ||
| + | let simulationSvgsObj = {}; | ||
| + | |||
| + | //educating public about hydra | ||
| + | let hydraSvgs = []; | ||
| + | let hydraSvgsObj = {}; | ||
| + | |||
| + | //visual cue | ||
| + | let visualSvgs = []; | ||
| + | let visualSvgsObj = {}; | ||
| + | |||
| + | let studentsSvgs = []; | ||
| + | let studentsSvgsObj = {}; | ||
| + | |||
| + | //image of the elderly (I ran out of keywords) | ||
| + | let impressionSvgs = []; | ||
| + | let impressionSvgsObj = {}; | ||
| + | |||
| + | allSvgs.forEach(e => { | ||
| + | if (e.node.id.includes(" | ||
| + | destressingSvgs.push(e); | ||
| + | putSvgsInObject(destressingSvgs, | ||
| + | } else if (e.node.id.includes(" | ||
| + | elderlySvgs.push(e); | ||
| + | putSvgsInObject(elderlySvgs, | ||
| + | } else if (e.node.id.includes(" | ||
| + | microSvgs.push(e); | ||
| + | putSvgsInObject(microSvgs, | ||
| + | } else if (e.node.id.includes(" | ||
| + | simulationSvgs.push(e); | ||
| + | putSvgsInObject(simulationSvgs, | ||
| + | } else if (e.node.id.includes(" | ||
| + | hydraSvgs.push(e); | ||
| + | putSvgsInObject(hydraSvgs, | ||
| + | } else if (e.node.id.includes(" | ||
| + | visualSvgs.push(e); | ||
| + | putSvgsInObject(visualSvgs, | ||
| + | } else if (e.node.id.includes(" | ||
| + | studentsSvgs.push(e); | ||
| + | putSvgsInObject(studentsSvgs, | ||
| + | } else if (e.node.id.includes(" | ||
| + | impressionSvgs.push(e); | ||
| + | putSvgsInObject(impressionSvgs, | ||
| + | } | ||
| + | }); | ||
| + | |||
| + | |||
| + | let animationDuration = 250; | ||
| + | let buttonSize = 400; | ||
| + | |||
| + | let destressingGroup; | ||
| + | |||
| + | |||
| + | let descriptions = { | ||
| + | destressingDescription: | ||
| + | family: ' | ||
| + | size: 20 | ||
| + | }).opacity(0), | ||
| + | elderlyDescription: | ||
| + | family: ' | ||
| + | size: 20 | ||
| + | }).opacity(0), | ||
| + | microDescription: | ||
| + | family: ' | ||
| + | size: 20 | ||
| + | }).opacity(0), | ||
| + | simulationDescription: | ||
| + | family: ' | ||
| + | size: 20 | ||
| + | }).opacity(0), | ||
| + | hydraDescription: | ||
| + | family: ' | ||
| + | size: 20 | ||
| + | }).opacity(0), | ||
| + | visualDescriptions: | ||
| + | family: ' | ||
| + | size: 20, | ||
| + | }).opacity(0), | ||
| + | studentsDescription: | ||
| + | family: ' | ||
| + | size: 20 | ||
| + | }).opacity(0), | ||
| + | impressionDescription: | ||
| + | family: ' | ||
| + | size: 20 | ||
| + | }).opacity(0) | ||
| + | } | ||
| + | |||
| + | |||
| + | let titles = { | ||
| + | destressingTitle: | ||
| + | family: ' | ||
| + | size: 19.5 | ||
| + | }), | ||
| + | elderlyTitle: | ||
| + | family: ' | ||
| + | size: 19.5 | ||
| + | }), | ||
| + | microTitle: microCanvas.text(" | ||
| + | family: ' | ||
| + | size: 19.5, | ||
| + | leading: ' | ||
| + | }), | ||
| + | simulationTitle: | ||
| + | size: 19.5, | ||
| + | family: ' | ||
| + | }), | ||
| + | hydraTitle: hydraCanvas.text(" | ||
| + | family: ' | ||
| + | size: 19.5, | ||
| + | leading: " | ||
| + | }), | ||
| + | visualTitle: | ||
| + | family: ' | ||
| + | size: 19.5, | ||
| + | leading: " | ||
| + | }), | ||
| + | studentsTitle: | ||
| + | family: ' | ||
| + | size: 19.5 | ||
| + | }), | ||
| + | impressionTitle: | ||
| + | family: ' | ||
| + | size: 19.5 | ||
| + | }) | ||
| + | |||
| + | } | ||
| + | |||
| + | |||
| + | class Button { | ||
| + | constructor(name, | ||
| + | this.name = name; | ||
| + | this.description = description; | ||
| + | this.title = title; | ||
| + | this.svgsArray = svgsArray; | ||
| + | this.svgsObj = svgsObj | ||
| + | this.titleShift = { | ||
| + | x: titleShiftX, | ||
| + | y: titleShiftY | ||
| + | } | ||
| + | // | ||
| + | this.descriptionShift = descriptionShift | ||
| + | } | ||
| + | } | ||
| + | |||
| + | //the dmove animation of titles | ||
| + | //different shifts of two lines titles and one line title, two lines titles have their special numbers | ||
| + | //distance between title and left side should be about 21px, and about 30px for the top distance | ||
| + | let titleShifts = { | ||
| + | destressing: | ||
| + | x: -150, | ||
| + | y: -304 | ||
| + | }, | ||
| + | elderly: { | ||
| + | x: -170, | ||
| + | y: -304 | ||
| + | }, | ||
| + | micro: { | ||
| + | x: -176, | ||
| + | y: -282 | ||
| + | }, | ||
| + | hydra: { | ||
| + | x: -140, | ||
| + | y: -279.5 | ||
| + | }, | ||
| + | visual: { | ||
| + | x: -195, | ||
| + | y: -284 | ||
| + | }, | ||
| + | simulation: { | ||
| + | x: -167, | ||
| + | y: -304 | ||
| + | }, | ||
| + | students: { | ||
| + | x: -152, | ||
| + | y: -304 | ||
| + | }, | ||
| + | impression: { | ||
| + | x: -150, | ||
| + | y: -304 | ||
| + | } | ||
| + | } | ||
| + | |||
| + | |||
| + | //the dmove animation of descriptions | ||
| + | //this one only needs oneLine or twoLines opetions | ||
| + | let descriptionShifts = { | ||
| + | oneLine: -180, | ||
| + | twoLines: -140 | ||
| + | } | ||
| + | |||
| + | // | ||
| + | /// | ||
| + | //// | ||
| + | //// | ||
| + | /// | ||
| + | |||
| + | //last four numbers: title shift x, title shift y, description shift y | ||
| + | let destressingButtonObject = new Button(" | ||
| + | makeButton(destressingCanvas, | ||
| + | |||
| + | let elderlyButtonObject = new Button(" | ||
| + | makeButton(elderlyCanvas, | ||
| + | |||
| + | let microButtonObject = new Button(" | ||
| + | makeButton(microCanvas, | ||
| + | |||
| + | let hydraButtonObject = new Button(" | ||
| + | makeButton(hydraCanvas, | ||
| + | |||
| + | let visualButtonObject = new Button(" | ||
| + | makeButton(visualCanvas, | ||
| + | |||
| + | let simulationButtonObject = new Button(" | ||
| + | makeButton(simulationCanvas, | ||
| + | |||
| + | let studentsButtonObject = new Button(" | ||
| + | makeButton(studentsCanvas, | ||
| + | |||
| + | let impressionButtonObject = new Button(" | ||
| + | makeButton(impressionCanvas, | ||
| + | |||
| + | |||
| + | let exampleButtonObj = { | ||
| + | name: null, //some name | ||
| + | description: | ||
| + | title: null, //some title | ||
| + | svgsArray: null, //the somethingSvgs array of the button | ||
| + | svgsObj: null //the somethingSvgsObj object of the button | ||
| + | } | ||
| + | |||
| + | function makeButton(svgCanvas, | ||
| + | let titleRunner; | ||
| + | let textBoxRunner; | ||
| + | let backgroundRunner; | ||
| + | let descriptionRunner; | ||
| + | let svgsArray = buttonObject.svgsArray; | ||
| + | let svgsObj = buttonObject.svgsObj; | ||
| + | let buttonGroup = svgCanvas.group(); | ||
| + | let textbox = svgsObj.textbox; | ||
| + | let background = svgsObj.background; | ||
| + | let image = svgsObj.image; | ||
| + | let title = buttonObject.title; | ||
| + | // | ||
| + | let description = buttonObject.description; | ||
| + | let titleShift = buttonObject.titleShift; | ||
| + | // | ||
| + | //make the white box invisible | ||
| + | background.opacity(0); | ||
| + | //add them to a group so it is easier to move them together | ||
| + | // | ||
| + | // | ||
| + | // | ||
| + | let hitBox = svgCanvas.rect(buttonSize, | ||
| + | //title position | ||
| + | let titleP = { | ||
| + | x: title.x(), | ||
| + | y: title.y() | ||
| + | } | ||
| + | // | ||
| + | let descriptionP = { | ||
| + | x: description.x(), | ||
| + | y: description.y() | ||
| + | } | ||
| + | |||
| + | let overAnimaton = true; | ||
| + | let outAnimation = false; | ||
| + | hitBox.on(" | ||
| + | changeCursor(" | ||
| + | if (overAnimaton) { | ||
| + | // | ||
| + | backgroundRunner = background.animate(animationDuration).opacity(0.8) | ||
| + | textBoxRunner = textbox.animate(animationDuration).opacity(0) | ||
| + | titleRunner = title.animate(animationDuration).dmove(titleShift.x, | ||
| + | size: 36 | ||
| + | }) | ||
| + | descriptionRunner = description.animate(animationDuration).opacity(1).dmove(0, | ||
| + | outAnimation = true; | ||
| + | } | ||
| + | // | ||
| + | }) | ||
| + | hitBox.on(" | ||
| + | changeCursor(" | ||
| + | if (outAnimation) { | ||
| + | // | ||
| + | backgroundRunner = background.animate(animationDuration).opacity(0) | ||
| + | textBoxRunner = textbox.animate(animationDuration).opacity(1) | ||
| + | titleRunner = title.animate(animationDuration).move(titleP.x, | ||
| + | size: 19.5 | ||
| + | }) | ||
| + | descriptionRunner = description.animate(animationDuration).opacity(0).move(descriptionP.x, | ||
| + | overAnimaton = false | ||
| + | outAnimation = false | ||
| + | let setOverAnimationToTrue = setTimeout(function() { | ||
| + | overAnimaton = true | ||
| + | }, 250) | ||
| + | } | ||
| + | // | ||
| + | }); | ||
| + | hitBox.on(" | ||
| + | window.location.href = url; | ||
| + | }); | ||
| + | |||
| + | //readFile function by: https:// | ||
| + | |||
| + | // Code based on: Kirill Shumilov | ||
| + | |||
| + | // Everything should be ungrouped. And on the same layer. Object to path. | ||
| + | }; | ||
| + | |||
| + | |||
| + | |||
| + | |||
| + | let buttonsCollection = document.getElementsByClassName(" | ||
| + | |||
| + | let buttonsArray = [...buttonsCollection] | ||
| + | |||
| + | let br = document.createElement(" | ||
| + | |||
| + | let whereButtonsGo = document.getElementById(" | ||
| + | |||
| + | whereButtonsGo.appendChild(br) | ||
| + | |||
| + | buttonsArray.forEach(i => whereButtonsGo.appendChild(i)) | ||
| + | |||
| + | |||
| + | </ | ||
| + | </ | ||
| + | |||
| + | </ | ||
| + | |||
| + | |||