Differences
This shows you the differences between two versions of the page.
| Both sides previous revision Previous revision | |||
| steve-image-carosel-test-page [2023/01/30 00:08] – steve.wang | steve-image-carosel-test-page [2023/02/09 23:35] (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 |
| + | < | ||
| + | < | ||
| + | body { | ||
| + | stylemargin: | ||
| + | stylepadding: | ||
| + | style/ | ||
| + | } | ||
| - | === Some Website Highlights 一些網頁精彩高光 === | + | .imageCarosel{ |
| + | overflow: | ||
| + | border-width: | ||
| + | border-style: | ||
| + | border-color: | ||
| + | background-color: | ||
| + | } | ||
| - | < | + | .mainImg{ |
| + | position: | ||
| + | transition-property: | ||
| + | transition-duration: | ||
| + | transition-delay: | ||
| + | cursor: | ||
| + | } | ||
| - | < | + | .left{ |
| - | < | + | |
| - | < | + | line-height: |
| - | .buttons{ | + | |
| - | width: auto; | + | |
| - | height: | + | -webkit-transform: scaleX(-1); |
| - | } | + | transform: scaleX(-1); |
| - | </ | + | opacity:0.5; |
| - | <!--<link rel=" | + | color: grey; |
| - | < | + | background-color: |
| - | </ | + | |
| + | } | ||
| - | < | + | .left: |
| - | < | + | |
| - | < | + | } |
| - | 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(' | + | |
| + | .right{ | ||
| + | z-Index:2; | ||
| + | line-height: | ||
| + | display: inline-block; | ||
| + | opacity: | ||
| + | color: grey; | ||
| + | background-color: | ||
| + | border: | ||
| + | } | ||
| - | let allSvgs = [] | + | .right: |
| + | opacity: | ||
| + | } | ||
| + | .arrow{ | ||
| + | z-Index: | ||
| + | line-height: | ||
| + | position: | ||
| + | top:50%; | ||
| + | opacity: | ||
| + | color: grey; | ||
| + | } | ||
| + | /* Make text go to the middle: | ||
| + | * https:// | ||
| + | * | ||
| + | * */ | ||
| + | /* | ||
| + | * .moveLeft{ | ||
| + | | ||
| + | | ||
| + | | ||
| + | * | ||
| + | | ||
| + | | ||
| + | | ||
| + | | ||
| + | | ||
| - | let allSvgsObj = {} | ||
| - | //some notes: create a bunch of SVG canvas, and stuff different butotns in one by one. | + | </style> |
| - | //Make a function that activates buttons | + | < |
| - | // | + | |
| + | //setup: | ||
| - | function checkIfSVGjsElement(item) { | + | class Point { |
| - | | + | constructor(x, y) { |
| - | item.dmove(0, 0) | + | |
| - | return | + | this.y = y; |
| - | } catch { | + | } |
| - | | + | move(xDistance, |
| + | | ||
| + | } | ||
| + | moveByAngle(angle, distance) { | ||
| + | let r = (angle * Math.PI) / 180; | ||
| + | | ||
| + | this.x + distance * Math.sin(r), | ||
| + | this.y + distance * Math.cos(r) | ||
| + | | ||
| + | | ||
| + | distance(point2) | ||
| + | let point1 = new Point(this.x, | ||
| + | let a = point1.x - point2.x | ||
| + | let b = point1.y - point2.y | ||
| + | if (a < 0) { | ||
| + | a = a - (a * 2) | ||
| } | } | ||
| + | if (b < 0) { | ||
| + | b = b - (b * 2) | ||
| + | } | ||
| + | let toSquare = (b ** 2) + (a ** 2) | ||
| + | return Math.sqrt(toSquare) | ||
| + | } | ||
| } | } | ||
| + | // A safer version of splice | ||
| - | function | + | function |
| - | let newSvgArray | + | let array1 = inputArray.slice(0, |
| - | //console.log(" | + | if (replaceWith!=undefined){ |
| - | //console.log(svgArray) | + | array1.push(replaceWith)} |
| - | if (svgArray | + | let array2 = inputArray.slice(indexToRemove + amountToRemove, |
| - | | + | return array1.concat(array2) |
| - | //console.log(destressingButton.children()[0]) | + | } |
| - | | + | /* |
| - | //getAllShapes(destressingButton.children()[0].children()) | + | let info=[{ |
| - | | + | imageSrc:' |
| - | | + | portraitSrc:' |
| - | | + | href:' |
| - | }) | + | description:' |
| - | } else { | + | },{ |
| - | | + | imageSrc:' |
| - | if (x.type == 'g' | + | portraitSrc:' |
| - | x.children().forEach(y => { | + | href:' |
| - | | + | description:' |
| - | | + | },{ |
| - | }) | + | imageSrc:' |
| - | } else if (x.type != 'defs' | + | portraitSrc:' |
| - | //remove the css color, and replace it with the .fill() color in SVG.js | + | href:' |
| - | | + | description:' |
| - | x.fill(x.node.style.fill) | + | }] |
| - | x.node.style = null; | + | */ |
| - | //console.log(" | + | |
| - | //console.log(x) | + | let info=[{ |
| - | | + | |
| + | portraitSrc:' | ||
| + | | ||
| + | description:' | ||
| + | },{ | ||
| + | imageSrc:' | ||
| + | portraitSrc:' | ||
| + | href:' | ||
| + | description:' | ||
| + | },{ | ||
| + | imageSrc:' | ||
| + | portraitSrc:' | ||
| + | href:' | ||
| + | description:' | ||
| + | },{ | ||
| + | imageSrc:' | ||
| + | portraitSrc:' | ||
| + | href:' | ||
| + | description:' | ||
| + | },{ | ||
| + | imageSrc:' | ||
| + | portraitSrc:' | ||
| + | href:' | ||
| + | description:' | ||
| + | }] | ||
| + | |||
| + | |||
| + | let carosels=[] | ||
| + | |||
| + | let browserZoomLevel; | ||
| + | |||
| + | //Make imagecaorsel class and to move use assign element to css class and use transition, transform translate. | ||
| + | class ImageCarosel{ | ||
| + | constructor | ||
| + | | ||
| + | this.type=domLocation | ||
| + | | ||
| + | sizePoint=new Point(window.innerWidth-10, | ||
| + | | ||
| + | if (domLocation==' | ||
| + | this.carosel=document.createElement(' | ||
| + | this.carosel.style.position=' | ||
| + | this.carosel.style.left=' | ||
| + | this.carosel.style.top=' | ||
| + | this.carosel.style.width=sizePoint.x+' | ||
| + | this.carosel.style.height=sizePoint.y+' | ||
| + | this.caroselLocation=new Point(0,0) | ||
| + | | ||
| + | else if (domLocation==' | ||
| + | | ||
| + | document.getElementById(' | ||
| + | | ||
| + | else{ | ||
| + | this.carosel=document.createElement(' | ||
| + | this.carosel.style.left=caroselLocation.x | ||
| + | this.carosel.style.top=caroselLocation.y | ||
| + | this.carosel.style.width=sizePoint.x | ||
| + | this.carosel.style.height=sizePoint.y | ||
| + | this.caroselLocation=caroselLocation | ||
| + | } | ||
| + | this.carosel.className=' | ||
| + | this.carosel.ondragstart=(()=> | ||
| + | this.carosel.ondrop=(()=> | ||
| + | | ||
| + | document.body.appendChild(this.carosel) | ||
| + | } | ||
| + | else if (domLocation==' | ||
| + | | ||
| + | document.getElementById(' | ||
| + | } | ||
| + | else{ | ||
| + | document.getElementById(domLocation).appendChild(this.carosel) | ||
| + | } | ||
| + | this.info=info | ||
| + | this.currentImage=0 | ||
| + | this.mainImg1=document.createElement(' | ||
| + | this.mainImg1.src=info[0].imageSrc | ||
| + | if (deviceOrientation==' | ||
| + | this.mainImg1.href=this.info[1].href | ||
| + | | ||
| + | else{ | ||
| + | this.mainImg1.href=this.info[1].portraitSrc | ||
| + | } | ||
| + | this.mainImg1.className=' | ||
| + | this.mainImg2=document.createElement(' | ||
| + | this.mainImg2.href=this.info[0].href | ||
| + | if (deviceOrientation==' | ||
| + | this.mainImg2.src=info[1].imageSrc | ||
| + | } | ||
| + | else{ | ||
| + | this.mainImg2.src=this.info[0].portraitSrc | ||
| + | } | ||
| + | this.mainImg2.className=' | ||
| + | if (domLocation==' | ||
| + | this.mainImg1.style.width=' | ||
| + | this.mainImg1.style.height=' | ||
| + | this.mainImg2.style.width=' | ||
| + | this.mainImg2.style.height=' | ||
| + | } | ||
| + | this.carosel.appendChild(this.mainImg1) | ||
| + | | ||
| + | this.mainImg1.style.position=' | ||
| + | this.mainImg2.style.position=' | ||
| + | this.centeredImg=this.mainImg2 | ||
| + | this.caroselSize=sizePoint | ||
| + | setTimeout(()=>{ | ||
| + | | ||
| + | },100) | ||
| + | this.imageCaroselNumber=carosels.length | ||
| + | this.queue=[] | ||
| + | } | ||
| + | createArrows(){ | ||
| + | | ||
| + | this.left=document.createElement(' | ||
| + | this.left.className=' | ||
| + | this.left.onclick= (()=>{this.switchLeft()}) | ||
| + | this.left.style.position=' | ||
| + | this.left.style.left='0%' | ||
| + | this.left.style.top=' | ||
| + | this.left.textContent=' | ||
| + | this.left.style.width=browserZoomLevel/ | ||
| + | this.left.style.height=browserZoomLevel/ | ||
| + | this.left.style.fontSize=browserZoomLevel/ | ||
| + | */ | ||
| + | this.right=document.createElement(' | ||
| + | this.right.className=' | ||
| + | // | ||
| + | // | ||
| + | this.right.onclick=(()=> | ||
| + | this.right.style.position=' | ||
| + | this.right.style.right=' | ||
| + | this.right.style.top=' | ||
| + | let arrowSizes=browserZoomLevel/ | ||
| + | if (arrowSizes< | ||
| + | | ||
| + | | ||
| + | else if (arrowSizes> | ||
| + | | ||
| + | | ||
| + | | ||
| + | console.log(' | ||
| + | arrowSizes=browserZoomLevel/ | ||
| + | } | ||
| + | this.right.style.width=arrowSizes+'px' | ||
| + | this.right.style.height=arrowSizes+'px' | ||
| + | this.right.style.fontSize=arrowSizes+' | ||
| + | this.right.textContent=' | ||
| + | this.left=this.right.cloneNode(true) | ||
| + | // | ||
| + | // | ||
| + | | ||
| + | this.left.style.position=' | ||
| + | this.left.style.left=' | ||
| + | this.left.style.top=' | ||
| + | this.left.className=' | ||
| + | | ||
| + | this.mainImg1.style.position=' | ||
| + | this.mainImg2.style.position=' | ||
| + | let arrowSizes=browserZoomLevel/2 | ||
| + | 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.mainImg2.style.left=this.mainImg1.getBoundingClientRect().x+arrowSizes+' | ||
| + | | ||
| + | this.mainImg2.style.position=' | ||
| + | */ | ||
| + | this.correctCenteredImgPosition=new Point(this.centeredImg.getBoundingClientRect().x, | ||
| + | | ||
| + | this.carosel.insertBefore(this.left, | ||
| + | } | ||
| + | checkForNormalMovements (){ | ||
| + | if (this.queue.includes(' | ||
| + | return true | ||
| + | } | ||
| + | else { | ||
| + | return false | ||
| + | } | ||
| + | } | ||
| + | sequenceActions (action){ | ||
| + | let beforeLength=this.queue.length | ||
| + | | ||
| + | if (action==' | ||
| + | this.cutQueue(action) | ||
| + | } | ||
| + | else{ | ||
| + | this.queue.push(action) | ||
| + | } | ||
| + | if (this.queue.length==1 ){ | ||
| + | sequencingSwitchingImages(this.imageCaroselNumber) | ||
| + | } | ||
| + | } | ||
| + | cutQueue (action){ | ||
| + | this.queue.forEach((x,i)=>{ | ||
| + | if (x!=' | ||
| + | this.queue=[...safeSplice(this.queue, | ||
| + | console.log(' | ||
| } | } | ||
| }) | }) | ||
| } | } | ||
| - | if (newSvgArray.length > 0) { | + | |
| - | | + | console.log(' |
| + | this.currentImage-=1 | ||
| + | | ||
| + | this.currentImage=this.info.length-1 | ||
| + | } | ||
| + | if (this.centeredImg==this.mainImg1){ | ||
| + | this.changeContent(this.mainImg2) | ||
| + | setTimeout(()=>{ | ||
| + | this.mainImg2.style.transitionProperty=' | ||
| + | this.mainImg2.style.left=this.correctCenteredImgPosition.x-this.mainImg2.getBoundingClientRect().width+' | ||
| + | this.centeredImg.style.left=this.carosel.getBoundingClientRect().right+this.centeredImg.getBoundingClientRect().width+' | ||
| + | this.mainImg2.style.transitionProperty=' | ||
| + | this.mainImg2.style.left=this.correctCenteredImgPosition.x+' | ||
| + | this.centeredImg=this.mainImg2 | ||
| + | },100) | ||
| + | } | ||
| + | else{ | ||
| + | this.changeContent(this.mainImg1) | ||
| + | setTimeout(()=> | ||
| + | this.mainImg1.style.transitionProperty=' | ||
| + | this.mainImg1.style.left=this.correctCenteredImgPosition.x-this.mainImg1.getBoundingClientRect().width+' | ||
| + | this.centeredImg.style.left=this.carosel.getBoundingClientRect().right+this.centeredImg.getBoundingClientRect().width+' | ||
| + | this.mainImg1.style.transitionProperty=' | ||
| + | this.mainImg1.style.left=this.correctCenteredImgPosition.x+' | ||
| + | this.centeredImg=this.mainImg1 | ||
| + | },100) | ||
| + | | ||
| + | return new Promise((resolve, | ||
| + | setTimeout(()=> | ||
| + | resolve(true) | ||
| + | },10*35) | ||
| + | }) | ||
| } | } | ||
| - | } | + | quickLeft (){ |
| - | + | | |
| - | //from https:// | + | this.currentImage-=1 |
| - | //reads a text file | + | if (this.currentImage< |
| - | function readTextFile(file) { | + | this.currentImage=this.info.length-1 |
| - | let rawFile | + | } |
| - | | + | |
| - | | + | |
| - | | + | this.mainImg2.style.transitionProperty=' |
| - | if (rawFile.readyState | + | this.mainImg2.style.left=this.correctCenteredImgPosition.x+this.mainImg2.getBoundingClientRect().width+' |
| - | | + | this.centeredImg.style.left=this.correctCenteredImgPosition.x-this.centeredImg.getBoundingClientRect().width+' |
| - | | + | this.mainImg2.style.transitionProperty=' |
| - | | + | this.mainImg2.style.left=this.correctCenteredImgPosition.x+' |
| + | this.centeredImg=this.mainImg2 | ||
| + | } | ||
| + | else{ | ||
| + | this.changeContent(this.mainImg1) | ||
| + | this.mainImg1.style.transitionProperty=' | ||
| + | this.mainImg1.style.left=this.correctCenteredImgPosition.x+this.mainImg1.getBoundingClientRect().width+' | ||
| + | this.centeredImg.style.left=this.correctCenteredImgPosition.x-this.centeredImg.getBoundingClientRect().width+' | ||
| + | this.mainImg1.style.transitionProperty=' | ||
| + | this.mainImg1.style.left=this.correctCenteredImgPosition.x+' | ||
| + | this.centeredImg=this.mainImg1 | ||
| + | } | ||
| + | return new Promise((resolve,reject)=> | ||
| + | setTimeout(()=> | ||
| + | resolve(true) | ||
| + | },10*35) | ||
| + | }) | ||
| + | | ||
| + | | ||
| + | console.log(' | ||
| + | this.currentImage-=1 | ||
| + | if (this.currentImage< | ||
| + | this.currentImage=this.info.length-1 | ||
| + | } | ||
| + | if (this.centeredImg==this.mainImg1){ | ||
| + | | ||
| + | setTimeout(()=>{ | ||
| + | this.mainImg2.style.transitionProperty=' | ||
| + | this.mainImg2.style.left=this.correctCenteredImgPosition.x-this.mainImg2.getBoundingClientRect().width+' | ||
| + | this.centeredImg.style.left=this.carosel.getBoundingClientRect().right+this.centeredImg.getBoundingClientRect().width+' | ||
| + | this.mainImg2.style.transitionProperty=' | ||
| + | this.mainImg2.style.left=this.correctCenteredImgPosition.x+' | ||
| + | this.centeredImg=this.mainImg2 | ||
| + | },100) | ||
| + | } | ||
| + | else{ | ||
| + | this.changeContent(this.mainImg1) | ||
| + | setTimeout(()=> | ||
| + | | ||
| + | this.mainImg1.style.left=this.correctCenteredImgPosition.x-this.mainImg1.getBoundingClientRect().width+' | ||
| + | this.centeredImg.style.left=this.carosel.getBoundingClientRect().right+this.centeredImg.getBoundingClientRect().width+' | ||
| + | | ||
| + | this.mainImg1.style.left=this.correctCenteredImgPosition.x+' | ||
| + | this.centeredImg=this.mainImg1 | ||
| + | },100) | ||
| + | } | ||
| + | return new Promise((resolve, | ||
| + | setTimeout(()=> | ||
| + | resolve(true) | ||
| + | },10*35) | ||
| + | }) | ||
| + | } | ||
| + | handleClicks (e){ | ||
| + | | ||
| + | if (e.target==this.centeredImg){ | ||
| + | window.open(this.centeredImg.href) | ||
| + | } | ||
| + | } | ||
| + | autoScroller (){ | ||
| + | this.scrollInterval=setInterval(()=> | ||
| + | if (this.queue.length==0 && imageAutoSwitchCooldown==false){ | ||
| + | imageAutoSwitchCooldown=true | ||
| + | resetImageSwitchCooldown() | ||
| + | this.sequenceActions(' | ||
| } | } | ||
| + | },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){ | ||
| + | toChangeTo.href=this.info[this.currentImage].href | ||
| + | if (deviceOrientation==' | ||
| + | toChangeTo.src=this.info[this.currentImage].imageSrc | ||
| + | } | ||
| + | else{ | ||
| + | toChangeTo.src=this.info[this.currentImage].portraitSrc | ||
| + | } | ||
| + | } | ||
| + | | ||
| + | for (let i = 0; i < amount; i++) { | ||
| + | | ||
| + | } | ||
| } | } | ||
| - | rawFile.send(null); | ||
| - | return allText; | ||
| } | } | ||
| - | //Change files to the format that we can use | + | function |
| - | function | + | let imageElemForLoading= new Image() |
| - | let file = input.files[0]; | + | |
| - | | + | info.forEach(x=> |
| - | | + | imageElemForLoading.src=x.portraitSrc |
| + | }) | ||
| + | | ||
| + | else{ | ||
| + | info.forEach(x=>{ | ||
| + | imageElemForLoading.src=x.imageSrc | ||
| + | }) | ||
| + | } | ||
| + | } | ||
| - | let reader = new FileReader(); | ||
| - | reader.readAsText(file); | + | function manuallyMoveHtmlToRight (elem, |
| + | if (counter==undefined){ | ||
| + | counter=1} | ||
| + | elem.style.left=startX+moveBy*counter+' | ||
| + | if (counter< | ||
| + | setTimeout(()=> | ||
| + | manuallyMoveHtmlToRight(elem, | ||
| + | } | ||
| - | reader.onload = function() { | ||
| - | // | ||
| - | }; | ||
| - | reader.onerror = function() { | + | function |
| - | // | + | |
| - | }; | + | |
| - | | + | |
| + | if (counter< | ||
| + | setTimeout(()=> | ||
| + | manuallyMoveHtmlToLeft(elem, | ||
| } | } | ||
| - | //code from Chat-GPT, https:// | + | /* |
| - | function | + | async function |
| - | // Split the string into an array of words | + | await carosels[imageCaroselNumber][carosels[imageCaroselNumber][queue][0]]() |
| - | let words = str.split(/(?=[A-Z])/); | + | carosels[imageCaroselNumber][queue]=safeSplice(carosels[imageCaroselNumber][queue],1,0) |
| - | + | | |
| - | | + | sequencingSwitchingImages(imageCaroselNumber) |
| - | let result = words.slice(1).join(" ").toLowerCase(); | + | |
| - | + | ||
| - | | + | |
| } | } | ||
| - | //put svgs into an object and use their ids as their keys | + | async function |
| - | function | + | let currentImageCarosel=carosels[imageCaroselNumber] |
| - | | + | await currentImageCarosel[currentImageCarosel.queue[0]]() |
| - | | + | //document.getElementById(' |
| - | | + | |
| - | | + | |
| + | | ||
| } | } | ||
| } | } | ||
| - | function | + | */ |
| - | for (const | + | |
| - | | + | let imageAutoSwitchCooldown=false |
| + | async function | ||
| + | imageAutoSwitchCooldown=true | ||
| + | let currentImageCarosel=carosels[imageCaroselNumber] | ||
| + | await currentImageCarosel[currentImageCarosel.queue[0]]() | ||
| + | | ||
| + | if (currentImageCarosel.queue.length> | ||
| + | | ||
| + | resetImageSwitchCooldown(currentImageCarosel) | ||
| } | } | ||
| } | } | ||
| - | function | + | function |
| - | | + | |
| + | if (currentImageCarosel.queue.length==0){ | ||
| + | imageAutoSwitchCooldown=false | ||
| + | } | ||
| + | else { | ||
| + | setTimeout(()=> | ||
| + | resetImageSwitchCooldown(currentImageCarosel) | ||
| + | },5000) | ||
| + | } | ||
| + | },3000) | ||
| } | } | ||
| - | + | let higs; | |
| - | function displaySvgs(canvas, | + | window.addEventListener(" |
| - | //let svgXml = readTextFile(file) | + | browserZoomLevel = Math.round(window.devicePixelRatio * 100); |
| - | files.forEach(e => { | + | if (window.innerWidth< |
| - | canvas.svg(readTextFile(e)) | + | console.log(' |
| - | }) | + | |
| - | //console.log(svgXml) | + | |
| - | // | + | |
| - | // | + | |
| - | // | + | |
| - | getAllShapes(undefined, | + | |
| - | putSvgsInObject(allSvgs, | + | |
| - | console.log(allSvgsObj) | + | |
| - | | + | |
| } | } | ||
| + | else{ | ||
| + | console.log(' | ||
| + | deviceOrientation=' | ||
| + | } | ||
| + | loadImg() | ||
| + | console.log(' | ||
| + | //higs=new ImageCarosel(new Point(1920, | ||
| + | //hhigs=new ImageCarosel(' | ||
| + | higs=new ImageCarosel(' | ||
| + | higs.createArrows() | ||
| + | carosels.push(higs) | ||
| + | // | ||
| + | higs.quickRight() | ||
| + | // | ||
| + | /* | ||
| + | setTimeout(()=> | ||
| + | if (deviceOrientation==' | ||
| + | higs.carosel.style.height=window.innerHeight+' | ||
| + | higs.carosel.style.width=window.innerWidth-100+' | ||
| + | document.getElementById(' | ||
| + | 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(()=> | ||
| + | higs.addSpaceAbove(2) | ||
| + | // | ||
| + | // higs.carosel.style.height=' | ||
| + | higs.carosel.style.height=higs.mainImg1.getBoundingClientRect().height+' | ||
| + | },100) | ||
| + | },300) | ||
| + | }) | ||
| + | function getDeviceType () { | ||
| + | const ua = navigator.userAgent; | ||
| + | if (/ | ||
| + | return " | ||
| + | } | ||
| + | if ( | ||
| + | / | ||
| + | ua | ||
| + | ) | ||
| + | ) { | ||
| + | return " | ||
| + | } | ||
| + | return " | ||
| + | }; | ||
| + | let deviceType=getDeviceType() | ||
| - | //if (document.readyState === ' | + | document.addEventListener("click", e => { |
| - | // | + | |
| - | //} | + | |
| - | + | } | |
| - | //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)) | + | |
| - | // | + | |
| - | // | + | |
| - | //} | + | |
| - | + | ||
| - | + | ||
| - | // | + | |
| - | + | ||
| - | // | + | |
| - | //// | + | |
| - | //console.log(`Document is ready!`) | + | |
| - | //}) | + | |
| - | + | ||
| - | displaySvgs(destressingCanvas, | + | |
| - | + | ||
| - | displaySvgs(elderlyCanvas, | + | |
| - | + | ||
| - | displaySvgs(microCanvas, | + | |
| - | + | ||
| - | displaySvgs(hydraCanvas, | + | |
| - | + | ||
| - | displaySvgs(visualCanvas, | + | |
| - | + | ||
| - | displaySvgs(simulationCanvas, | + | |
| - | + | ||
| - | displaySvgs(studentsCanvas, | + | |
| - | + | ||
| - | displaySvgs(impressionCanvas, | + | |
| - | let destressingSvgs | + | let lastDeltaX=0 |
| - | let destressingSvgsObj | + | let lastDeltaY=0 |
| - | + | document.addEventListener("wheel", e => { | |
| - | let elderlySvgs = []; | + | if (e.wheelDelta< |
| - | 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("destressing")) { | + | |
| - | destressingSvgs.push(e); | + | |
| - | putSvgsInObject(destressingSvgs, destressingSvgsObj, | + | |
| - | } else if (e.node.id.includes(" | + | |
| - | elderlySvgs.push(e); | + | |
| - | putSvgsInObject(elderlySvgs, | + | |
| - | | + | |
| - | microSvgs.push(e); | + | |
| - | putSvgsInObject(microSvgs, | + | |
| - | } else if (e.node.id.includes(" | + | |
| - | | + | |
| - | 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, | + | |
| } | } | ||
| - | }); | + | else if (e.deltaX> |
| + | checkIfSwitchImageRight(e.target) | ||
| + | } | ||
| + | lastDeltaX=JSON.parse(JSON.stringify(e.deltaX)) | ||
| + | lastDeltaY=JSON.parse(JSON.stringify(e.deltaY)) | ||
| + | }) | ||
| + | let mouse = new Point(0, 0) | ||
| + | let lastMousePosition=new Point(0,0) | ||
| + | let scrollPosition=new Point(0,0) | ||
| - | let animationDuration | + | document.addEventListener(' |
| - | let buttonSize | + | // |
| + | mouse.x | ||
| + | mouse.y = mouse.y + (window.scrollY - scrollPosition.y) | ||
| + | scrollPosition = new Point(window.scrollX, | ||
| + | })) | ||
| - | let destressingGroup; | + | let switchImageCooldown=false |
| - | + | if (deviceType!='mobile'){ | |
| - | + | | |
| - | let descriptions | + | |
| - | | + | |
| - | family: | + | |
| - | size: 20 | + | |
| - | }).opacity(0), | + | |
| - | | + | |
| - | family: | + | |
| - | size: 20 | + | |
| - | }).opacity(0), | + | })) |
| - | microDescription: | + | |
| - | | + | |
| - | | + | |
| - | }).opacity(0), | + | |
| - | simulationDescription: | + | |
| - | | + | |
| - | size: 20 | + | |
| - | }).opacity(0), | + | |
| - | hydraDescription: | + | |
| - | | + | |
| - | size: 20 | + | |
| - | }).opacity(0), | + | |
| - | visualDescriptions: | + | |
| - | | + | |
| - | | + | |
| - | }).opacity(0), | + | |
| - | studentsDescription: | + | |
| - | | + | |
| - | size: 20 | + | |
| - | }).opacity(0), | + | |
| - | impressionDescription: | + | |
| - | | + | |
| - | size: 20 | + | |
| - | }).opacity(0) | + | |
| } | } | ||
| - | + | if (deviceType!=' | |
| - | let titles | + | |
| - | | + | |
| - | | + | |
| - | | + | // |
| - | }), | + | console.log(' |
| - | elderlyTitle: | + | |
| - | | + | higs.sequenceActions('quickRight') |
| - | size: 19.5 | + | |
| - | }), | + | higs.carosel.style.height=higs.centeredImg.getBoundingClientRect().height+'px' |
| - | microTitle: microCanvas.text(" | + | },300) |
| - | | + | } |
| - | size: 19.5, | + | // |
| - | leading: | + | else{ |
| - | }), | + | // |
| - | | + | console.log(' |
| - | size: 19.5, | + | deviceOrientation=' |
| - | family: ' | + | higs.sequenceActions(' |
| - | }), | + | setTimeout(()=>{ |
| - | hydraTitle: hydraCanvas.text(" | + | higs.carosel.style.height=higs.centeredImg.getBoundingClientRect().height+'px' |
| - | family: | + | },200) |
| - | size: 19.5, | + | // |
| - | | + | |
| - | | + | |
| - | | + | |
| - | family: 'arial', | + | |
| - | size: 19.5, | + | |
| - | leading: " | + | |
| - | }), | + | |
| - | | + | |
| - | family: | + | |
| - | size: 19.5 | + | |
| - | | + | |
| - | | + | |
| - | | + | |
| - | size: 19.5 | + | |
| }) | }) | ||
| - | |||
| } | } | ||
| - | + | else{ | |
| - | + | | |
| - | class Button | + | |
| - | | + | // |
| - | | + | console.log(' |
| - | this.description | + | deviceOrientation=' |
| - | this.title = title; | + | higs.sequenceActions(' |
| - | this.svgsArray | + | setTimeout(()=>{ |
| - | | + | higs.carosel.style.height=higs.centeredImg.getBoundingClientRect().height+' |
| - | this.titleShift | + | },300) |
| - | x: titleShiftX, | + | } |
| - | | + | // |
| + | | ||
| + | //document.location.reload() | ||
| + | console.log(' | ||
| + | deviceOrientation=' | ||
| + | higs.sequenceActions(' | ||
| + | | ||
| + | | ||
| + | },200) | ||
| + | | ||
| } | } | ||
| - | // | + | |
| - | this.descriptionShift = descriptionShift | + | |
| - | | + | |
| } | } | ||
| - | //the dmove animation of titles | + | //Screen orientation on mobile devies: https://stackoverflow.com/ |
| - | //different shifts of two lines titles and one line title, two lines titles have their special numbers | + | //screen.orientation: https:// |
| - | //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 | + | |
| - | } | + | |
| - | } | + | |
| + | /* | ||
| + | let startPoint; | ||
| + | window.addEventListener(" | ||
| + | console.log(' | ||
| + | startPoint=JSON.parse(JSON.stringify(new Point(e.touches[0].clientX, | ||
| + | }) | ||
| - | //the dmove animation of descriptions | + | window.addEventListener(" |
| - | //this one only needs oneLine or twoLines opetions | + | |
| - | let descriptionShifts = { | + | if (startPoint.x< |
| - | | + | |
| - | | + | checkIfSwitchImageLeft(e.target) |
| - | } | + | |
| + | else { | ||
| + | console.log(' | ||
| + | checkIfSwitchImageRight(e.target) | ||
| + | | ||
| + | }) | ||
| + | */ | ||
| - | // | + | window.addEventListener(' |
| - | /// | + | window.addEventListener(' |
| - | //// | + | |
| - | //// | + | |
| - | /// | + | |
| - | //last four numbers: title shift x, title shift y, description shift y | + | var xDown = null; |
| - | let destressingButtonObject | + | var yDown = null; |
| - | makeButton(destressingCanvas, | + | |
| - | let elderlyButtonObject = new Button(" | + | function getTouches(evt) { |
| - | makeButton(elderlyCanvas, | + | return evt.touches || // browser API |
| + | evt.originalEvent.touches; // jQuery | ||
| + | } | ||
| + | |||
| + | function handleTouchStart(evt) { | ||
| + | const firstTouch = getTouches(evt)[0]; | ||
| + | xDown = firstTouch.clientX; | ||
| + | yDown = firstTouch.clientY; | ||
| + | }; | ||
| + | |||
| + | let swipeCooldown=false | ||
| + | function handleTouchMove(evt) { | ||
| + | console.log(' | ||
| + | | ||
| + | return; | ||
| + | } | ||
| + | console.log(' | ||
| + | var xUp = evt.touches[0].clientX; | ||
| + | var yUp = evt.touches[0].clientY; | ||
| - | let microButtonObject | + | var xDiff = xDown - xUp; |
| - | makeButton(microCanvas, | + | var yDiff = yDown - yUp; |
| + | |||
| + | if ( Math.abs( xDiff ) > Math.abs( yDiff ) ) {/*most significant*/ | ||
| + | if ( xDiff > 0 && swipeCooldown==false) { | ||
| + | console.log(' | ||
| + | swipeCooldown=true | ||
| + | checkIfSwitchImageLeft(evt.target) | ||
| + | setTimeout(()=> | ||
| + | swipeCooldown=false | ||
| + | },500) | ||
| + | } | ||
| + | else if (swipeCooldown==false) { | ||
| + | console.log(' | ||
| + | swipeCooldown=true | ||
| + | checkIfSwitchImageRight(evt.target) | ||
| + | setTimeout(()=> | ||
| + | swipeCooldown=false | ||
| + | },500) | ||
| + | } | ||
| + | } else { | ||
| + | if ( yDiff > 0 ) { | ||
| + | console.log(' | ||
| + | } else { | ||
| + | console.log('up swipe' | ||
| + | } | ||
| + | } | ||
| + | | ||
| + | xDown = null; | ||
| + | yDown = null; | ||
| + | }; | ||
| - | let hydraButtonObject = new Button(" | + | //swiping code by: https://stackoverflow.com/a/23230280/19515980 |
| - | makeButton(hydraCanvas, | + | |
| - | let visualButtonObject = new Button(" | ||
| - | makeButton(visualCanvas, | ||
| - | let simulationButtonObject = new Button(" | + | function adaptToOrientationChange |
| - | makeButton(simulationCanvas, | + | let returnCarosels=[] |
| - | + | | |
| - | let studentsButtonObject = new Button(" | + | returnCarosels.push(new ImageCarosel |
| - | makeButton(studentsCanvas, | + | |
| - | + | | |
| - | let impressionButtonObject = new Button(" | + | |
| - | makeButton(impressionCanvas, | + | |
| - | + | ||
| - | + | ||
| - | let exampleButtonObj = { | + | |
| - | | + | |
| - | | + | |
| - | | + | |
| - | svgsArray: null, //the somethingSvgs array of the button | + | |
| - | svgsObj: null //the somethingSvgsObj object of the button | + | |
| } | } | ||
| - | function | + | function |
| - | let titleRunner; | + | let caroselElems=document.getElementsByClassName(' |
| - | let textBoxRunner; | + | |
| - | let backgroundRunner; | + | |
| - | let descriptionRunner; | + | |
| - | let svgsArray | + | |
| - | let svgsObj = buttonObject.svgsObj; | + | |
| - | let buttonGroup = svgCanvas.group(); | + | |
| - | | + | |
| - | let background = svgsObj.background; | + | |
| - | let image = svgsObj.image; | + | |
| - | let title = buttonObject.title; | + | |
| - | console.log(textbox) | + | |
| - | | + | |
| - | let titleShift = buttonObject.titleShift; | + | |
| - | console.log(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 = { | + | |
| - | | + | |
| - | y: description.y() | + | |
| } | } | ||
| + | } | ||
| - | let overAnimaton = true; | + | function |
| - | let outAnimation = false; | + | |
| - | hitBox.on(" | + | if (target !=undefined && switchImageCooldown==false){ |
| - | | + | |
| - | if (overAnimaton) { | + | |
| - | | + | if (x.mainImg1==target || x.mainImg2==target){ |
| - | | + | x.sequenceActions(' |
| - | textBoxRunner | + | |
| - | | + | |
| - | | + | |
| }) | }) | ||
| - | descriptionRunner = description.animate(animationDuration).opacity(1).dmove(0, buttonObject.descriptionShift); | + | setTimeout(()=>{ |
| - | outAnimation = true; | + | switchImageCooldown=false},700) |
| } | } | ||
| - | | + | if (mouse.x>=window.innerWidth-2 && switchImageCooldown==false){ |
| - | }) | + | |
| - | hitBox.on(" | + | |
| - | changeCursor(" | + | |
| - | | + | |
| - | //console.log(" | + | |
| - | backgroundRunner | + | |
| - | | + | |
| - | | + | |
| - | | + | |
| }) | }) | ||
| - | descriptionRunner = description.animate(animationDuration).opacity(0).move(descriptionP.x, | + | setTimeout(()=>{ |
| - | overAnimaton | + | |
| - | outAnimation = false | + | |
| - | let setOverAnimationToTrue = setTimeout(function() | + | |
| - | | + | |
| - | | + | |
| } | } | ||
| - | // | + | |
| - | | + | } |
| - | hitBox.on(" | + | |
| - | | + | |
| - | | + | |
| - | + | ||
| - | //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)) | + | |
| + | function checkIfSwitchImageLeft (target){ | ||
| + | setTimeout(()=> | ||
| + | if (target !=undefined && switchImageCooldown==false){ | ||
| + | switchImageCooldown=true | ||
| + | carosels.forEach(x=> | ||
| + | if (x.mainImg1==target || x.mainImg2==target){ | ||
| + | x.sequenceActions(' | ||
| + | } | ||
| + | }) | ||
| + | setTimeout(()=> | ||
| + | switchImageCooldown=false}, | ||
| + | } | ||
| + | else if (mouse.x< | ||
| + | switchImageCooldown=true | ||
| + | carosels.forEach(x=> | ||
| + | x.sequenceActions(' | ||
| + | }) | ||
| + | setTimeout(()=> | ||
| + | switchImageCooldown=false}, | ||
| + | } | ||
| + | },200) | ||
| + | } | ||
| + | function createWikiSpacing (){ | ||
| + | for (let i = 0; i < (1/ | ||
| + | } | ||
| + | } | ||
| + | // | ||
| + | //open link: https:// | ||
| + | // | ||
| + | //For wrap text help: https:// | ||
| + | //swiping code by: https:// | ||
| + | //UserAgent by: Abdessalam Benharira: https:// | ||
| </ | </ | ||
| - | </ | ||
| - | |||
| </ | </ | ||