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-page2 [2023/01/08 05:03] – steve.wang | steve-image-carosel-test-page2 [2023/04/16 02:15] (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 { | + | |
| - | margin: 0; | + | |
| - | padding: 0; | + | |
| - | /*font: 75%/120% sans-serif; | + | style/*font: 75%/120% sans-serif; |
| - | } | + | } |
| .imageCarosel{ | .imageCarosel{ | ||
| - | | + | |
| - | border-width: | + | border-width: |
| - | border-style: | + | border-style: |
| - | border-color: | + | border-color: |
| + | background-color: | ||
| } | } | ||
| - | |||
| .mainImg{ | .mainImg{ | ||
| - | | + | |
| + | transition-property: | ||
| + | transition-duration: | ||
| + | transition-delay: | ||
| + | cursor: | ||
| } | } | ||
| .left{ | .left{ | ||
| - | | + | |
| - | line-height: | + | line-height: |
| - | display: inline-block; | + | display: inline-block; |
| - | white-space: | + | white-space: |
| - | -webkit-transform: | + | -webkit-transform: |
| - | transform: scaleX(-1); | + | transform: scaleX(-1); |
| - | opacity:0.4; | + | opacity:0.5; |
| - | color: grey; | + | color: grey; |
| - | background-color: | + | background-color: |
| - | border: | + | border: |
| - | } | + | } |
| .left: | .left: | ||
| - | | + | |
| } | } | ||
| .right{ | .right{ | ||
| - | | + | |
| - | line-height: | + | line-height: |
| - | display: inline-block; | + | display: inline-block; |
| - | opacity:0.4; | + | opacity:0.5; |
| - | color: grey; | + | color: grey; |
| - | background-color: | + | background-color: |
| - | border: | + | border: |
| } | } | ||
| .right: | .right: | ||
| - | | + | |
| } | } | ||
| .arrow{ | .arrow{ | ||
| - | | + | |
| - | line-height: | + | line-height: |
| - | position: | + | position: |
| - | top:50%; | + | top:50%; |
| - | opacity:0.4; | + | opacity:0.2; |
| - | color: grey; | + | color: grey; |
| } | } | ||
| /* Make text go to the middle: | /* Make text go to the middle: | ||
| - | https:// | + | |
| - | + | * | |
| - | */ | + | * */ |
| /* | /* | ||
| - | .moveLeft{ | + | |
| - | transition: | + | * transition: |
| - | transform: | + | * transform: |
| - | } | + | * } |
| + | * | ||
| + | | ||
| + | | ||
| + | | ||
| + | | ||
| + | | ||
| - | .moveRight{ | ||
| - | transition: | ||
| - | transform: | ||
| - | } | ||
| - | */ | ||
| </ | </ | ||
| Line 123: | Line 129: | ||
| let info=[{ | let info=[{ | ||
| imageSrc:' | imageSrc:' | ||
| - | | + | |
| href:' | href:' | ||
| description:' | description:' | ||
| },{ | },{ | ||
| imageSrc:' | imageSrc:' | ||
| - | | + | |
| href:' | href:' | ||
| description:' | description:' | ||
| },{ | },{ | ||
| imageSrc:' | imageSrc:' | ||
| - | | + | |
| href:' | href:' | ||
| description:' | description:' | ||
| Line 141: | Line 147: | ||
| 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 190: | Line 196: | ||
| else if (domLocation==' | else if (domLocation==' | ||
| // | // | ||
| - | document.getElementById(' | + | document.getElementById(' |
| } | } | ||
| else{ | else{ | ||
| Line 208: | Line 214: | ||
| else if (domLocation==' | else if (domLocation==' | ||
| // | // | ||
| - | document.getElementById(' | + | document.getElementById(' |
| } | } | ||
| else{ | else{ | ||
| Line 221: | Line 227: | ||
| } | } | ||
| else{ | else{ | ||
| - | this.mainImg1.href=this.info[1].portriatSrc | + | this.mainImg1.href=this.info[1].portraitSrc |
| } | } | ||
| this.mainImg1.className=' | this.mainImg1.className=' | ||
| Line 230: | Line 236: | ||
| } | } | ||
| else{ | else{ | ||
| - | this.mainImg2.src=this.info[0].portriatSrc | + | this.mainImg2.src=this.info[0].portraitSrc |
| } | } | ||
| this.mainImg2.className=' | this.mainImg2.className=' | ||
| if (domLocation==' | if (domLocation==' | ||
| this.mainImg1.style.width=' | this.mainImg1.style.width=' | ||
| - | this.mainImg1.style.height=window.innerHeight-10+'px' | + | this.mainImg1.style.height=' |
| this.mainImg2.style.width=' | this.mainImg2.style.width=' | ||
| - | this.mainImg2.style.height=window.innerHeight-10+'px' | + | this.mainImg2.style.height=' |
| } | } | ||
| this.carosel.appendChild(this.mainImg1) | this.carosel.appendChild(this.mainImg1) | ||
| Line 245: | Line 251: | ||
| this.centeredImg=this.mainImg2 | this.centeredImg=this.mainImg2 | ||
| this.caroselSize=sizePoint | this.caroselSize=sizePoint | ||
| - | this.correctCenteredImgPosition=new Point(this.centeredImg.getBoundingClientRect().x,this.centeredImg.getBoundingClientRect().y) | + | |
| + | | ||
| + | },100) | ||
| this.imageCaroselNumber=carosels.length | this.imageCaroselNumber=carosels.length | ||
| this.queue=[] | this.queue=[] | ||
| Line 277: | Line 285: | ||
| 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 334: | Line 342: | ||
| this.queue.forEach((x, | this.queue.forEach((x, | ||
| if (x!=' | if (x!=' | ||
| - | this.queue=[...safeSplice(this.queue, | + | this.queue=[...safeSplice(this.queue, |
| console.log(' | console.log(' | ||
| } | } | ||
| }) | }) | ||
| } | } | ||
| - | quickRight (){ | + | |
| - | | + | |
| - | this.currentImage+=1 | + | this.currentImage-=1 |
| - | if (this.currentImage> | + | if (this.currentImage<0){ |
| - | this.currentImage=0 | + | this.currentImage=this.info.length-1 |
| } | } | ||
| - | | + | if (this.centeredImg==this.mainImg1){ |
| - | | + | this.changeContent(this.mainImg2) |
| - | this.changeContent(this.mainImg1) | + | |
| setTimeout(()=> | setTimeout(()=> | ||
| - | this.mainImg1.style.left=this.caroselLocation.x-this.mainImg1.getBoundingClientRect().width-browserZoomLevel+' | + | this.mainImg2.style.transitionProperty=' |
| - | | + | this.mainImg2.style.left=this.correctCenteredImgPosition.x-this.mainImg2.getBoundingClientRect().width+' |
| - | manuallyMoveHtmlToRight(this.mainImg1,this.mainImg1.getBoundingClientRect().x,90,(this.correctCenteredImgPosition.x-this.mainImg1.getBoundingClientRect().x)/92) | + | this.centeredImg.style.left=this.carosel.getBoundingClientRect().right+this.centeredImg.getBoundingClientRect().width+' |
| - | | + | |
| - | else { | + | this.mainImg2.style.left=this.correctCenteredImgPosition.x+' |
| - | console.log('this is correct') | + | this.centeredImg=this.mainImg2 |
| - | | + | |
| - | } | + | |
| - | this.centeredImg=this.mainImg1 | + | |
| },100) | },100) | ||
| - | /* | ||
| - | setTimeout(()=> | ||
| - | this.centeredImg.style.left=this.caroselLocation/ | ||
| - | }, | ||
| - | */ | ||
| } | } | ||
| else{ | else{ | ||
| - | this.changeContent(this.mainImg2) | + | this.changeContent(this.mainImg1) |
| - | console.log(' | + | |
| setTimeout(()=> | setTimeout(()=> | ||
| - | this.mainImg2.style.left=this.caroselLocation.x-this.mainImg2.getBoundingClientRect().width-browserZoomLevel+' | + | this.mainImg1.style.transitionProperty=' |
| - | if (deviceOrientation==' | + | this.mainImg1.style.left=this.correctCenteredImgPosition.x-this.mainImg1.getBoundingClientRect().width+' |
| - | manuallyMoveHtmlToRight(this.mainImg2,this.mainImg2.getBoundingClientRect().x,90,(this.correctCenteredImgPosition.x-this.mainImg2.getBoundingClientRect().x)/91) | + | this.centeredImg.style.left=this.carosel.getBoundingClientRect().right+this.centeredImg.getBoundingClientRect().width+' |
| - | | + | |
| - | else{ | + | this.mainImg1.style.left=this.correctCenteredImgPosition.x+' |
| - | console.log('this is correct') | + | this.centeredImg=this.mainImg1 |
| - | | + | |
| - | } | + | |
| - | this.centeredImg=this.mainImg2 | + | |
| },100) | },100) | ||
| - | /* | ||
| - | setTimeout(()=> | ||
| - | this.centeredImg.style.left=this.caroselLocation/ | ||
| - | }, | ||
| - | */ | ||
| } | } | ||
| return new Promise((resolve, | return new Promise((resolve, | ||
| Line 392: | Line 382: | ||
| } | } | ||
| quickLeft (){ | quickLeft (){ | ||
| - | console.log(' | + | console.log(' |
| - | manuallyMoveHtmlToLeft(this.centeredImg, | + | |
| this.currentImage-=1 | this.currentImage-=1 | ||
| if (this.currentImage< | if (this.currentImage< | ||
| this.currentImage=this.info.length-1 | this.currentImage=this.info.length-1 | ||
| } | } | ||
| - | | + | if (this.centeredImg==this.mainImg1){ |
| - | // setTimeout(()=> | + | this.changeContent(this.mainImg2) |
| - | | + | this.mainImg2.style.transitionProperty='none' |
| - | this.changeContent(this.mainImg1) | + | 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='left' |
| - | | + | this.mainImg2.style.left=this.correctCenteredImgPosition.x+' |
| - | if (deviceOrientation==' | + | this.centeredImg=this.mainImg2 |
| - | manuallyMoveHtmlToLeft(this.mainImg1, | + | |
| - | } | + | |
| - | else { | + | |
| - | manuallyMoveHtmlToLeft(this.mainImg1, | + | |
| - | } | + | |
| - | this.centeredImg=this.mainImg1 | + | |
| - | | + | |
| - | } | + | |
| - | else{ | + | |
| - | | + | |
| - | console.log('main img2') | + | |
| - | | + | |
| - | | + | |
| - | if (deviceOrientation==' | + | |
| - | manuallyMoveHtmlToLeft(this.mainImg2, | + | |
| - | } | + | |
| - | else{ | + | |
| - | manuallyMoveHtmlToLeft(this.mainImg2, | + | |
| - | } | + | |
| - | | + | |
| - | },100) | + | |
| - | } | + | |
| - | // },10) | + | |
| - | return new Promise((resolve, | + | |
| - | setTimeout(()=> | + | |
| - | resolve(true) | + | |
| - | },10*35) | + | |
| - | }) | + | |
| - | } | + | |
| - | switchRight (){ | + | |
| - | console.log(' | + | |
| - | manuallyMoveHtmlToRight(this.centeredImg, | + | |
| - | this.currentImage+=1 | + | |
| - | console.log(this.currentImage) | + | |
| - | if (this.currentImage> | + | |
| - | this.currentImage=0 | + | |
| } | } | ||
| - | | + | |
| - | if (this.mainImg2==this.centeredImg){ | + | |
| - | console.log(' | + | |
| - | this.mainImg1.style.left=this.caroselLocation.x-this.mainImg1.getBoundingClientRect().width+' | + | |
| this.changeContent(this.mainImg1) | this.changeContent(this.mainImg1) | ||
| - | | + | |
| - | | + | 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.left=this.correctCenteredImgPosition.x+' | ||
| this.centeredImg=this.mainImg1 | this.centeredImg=this.mainImg1 | ||
| - | /* | ||
| - | setTimeout(()=> | ||
| - | this.centeredImg.style.left=this.caroselLocation/ | ||
| - | }, | ||
| - | */ | ||
| - | } | ||
| - | else{ | ||
| - | console.log(' | ||
| - | this.mainImg2.style.left=this.caroselLocation.x-this.mainImg2.getBoundingClientRect().width+' | ||
| - | this.changeContent(this.mainImg2) | ||
| - | setTimeout(()=> | ||
| - | manuallyMoveHtmlToRight(this.mainImg2, | ||
| - | },200) | ||
| - | this.centeredImg=this.mainImg2 | ||
| - | /* | ||
| - | setTimeout(()=> | ||
| - | this.centeredImg.style.left=this.caroselLocation/ | ||
| - | }, | ||
| - | */ | ||
| } | } | ||
| return new Promise((resolve, | return new Promise((resolve, | ||
| setTimeout(()=> | setTimeout(()=> | ||
| resolve(true) | resolve(true) | ||
| - | },14*100) | + | },10*35) |
| }) | }) | ||
| } | } | ||
| - | | + | |
| - | console.log(' | + | console.log(' |
| - | manuallyMoveHtmlToLeft(this.centeredImg, | + | |
| this.currentImage-=1 | this.currentImage-=1 | ||
| if (this.currentImage< | if (this.currentImage< | ||
| this.currentImage=this.info.length-1 | this.currentImage=this.info.length-1 | ||
| } | } | ||
| - | | + | if (this.centeredImg==this.mainImg1){ |
| - | // setTimeout(()=> | + | |
| - | | + | |
| - | console.log(' | + | |
| - | | + | |
| - | this.changeContent(this.mainImg1) | + | |
| - | manuallyMoveHtmlToLeft(this.mainImg1, | + | |
| - | this.centeredImg=this.mainImg1 | + | |
| - | } | + | |
| - | else{ | + | |
| - | console.log(' | + | |
| - | this.mainImg2.style.left=this.carosel.getBoundingClientRect().x+this.mainImg2.getBoundingClientRect().width+150+' | + | |
| this.changeContent(this.mainImg2) | this.changeContent(this.mainImg2) | ||
| - | manuallyMoveHtmlToLeft(this.mainImg2,this.mainImg2.getBoundingClientRect().x,10,(this.carosel.getBoundingClientRect().x+this.mainImg2.getBoundingClientRect().x)/10) | + | setTimeout(()=>{ |
| + | | ||
| + | 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 | this.centeredImg=this.mainImg2 | ||
| - | } | + | },100) |
| - | // },10) | + | } |
| + | 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 | ||
| + | | ||
| + | } | ||
| return new Promise((resolve, | return new Promise((resolve, | ||
| setTimeout(()=> | setTimeout(()=> | ||
| resolve(true) | resolve(true) | ||
| - | },14*100) | + | },10*35) |
| }) | }) | ||
| } | } | ||
| Line 516: | Line 453: | ||
| autoScroller (){ | autoScroller (){ | ||
| this.scrollInterval=setInterval(()=> | this.scrollInterval=setInterval(()=> | ||
| - | this.sequenceActions(' | + | |
| - | },5000) | + | imageAutoSwitchCooldown=true |
| + | resetImageSwitchCooldown() | ||
| + | | ||
| + | } | ||
| + | },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 (){ | textDesciption (){ | ||
| Line 544: | Line 499: | ||
| } | } | ||
| else{ | else{ | ||
| - | toChangeTo.src=this.info[this.currentImage].portriatSrc | + | toChangeTo.src=this.info[this.currentImage].portraitSrc |
| - | } | + | |
| - | if (this.infoText!=undefined){ | + | |
| - | this.infoText.textContent=this.info[this.currentImage].description | + | |
| } | } | ||
| } | } | ||
| + | | ||
| + | for (let i = 0; i < amount; i++) { | ||
| + | | ||
| + | } | ||
| + | } | ||
| } | } | ||
| + | |||
| + | function loadImg (){ | ||
| + | let imageElemForLoading= new Image() | ||
| + | if (deviceOrientation == ' portrait' | ||
| + | info.forEach(x=> | ||
| + | imageElemForLoading.src=x.portraitSrc | ||
| + | }) | ||
| + | } | ||
| + | else{ | ||
| + | info.forEach(x=> | ||
| + | imageElemForLoading.src=x.imageSrc | ||
| + | }) | ||
| + | } | ||
| + | } | ||
| + | |||
| + | |||
| function manuallyMoveHtmlToRight (elem, | function manuallyMoveHtmlToRight (elem, | ||
| if (counter==undefined){ | if (counter==undefined){ | ||
| Line 578: | Line 551: | ||
| } | } | ||
| } | } | ||
| + | |||
| + | async function sequencingSwitchingImages (imageCaroselNumber){ | ||
| + | let currentImageCarosel=carosels[imageCaroselNumber] | ||
| + | await currentImageCarosel[currentImageCarosel.queue[0]]() | ||
| + | // | ||
| + | | ||
| + | if (currentImageCarosel.queue.length> | ||
| + | sequencingSwitchingImages(imageCaroselNumber) | ||
| + | } | ||
| + | } | ||
| + | |||
| */ | */ | ||
| + | let imageAutoSwitchCooldown=false | ||
| async function sequencingSwitchingImages (imageCaroselNumber){ | async function sequencingSwitchingImages (imageCaroselNumber){ | ||
| + | | ||
| let currentImageCarosel=carosels[imageCaroselNumber] | let currentImageCarosel=carosels[imageCaroselNumber] | ||
| await currentImageCarosel[currentImageCarosel.queue[0]]() | await currentImageCarosel[currentImageCarosel.queue[0]]() | ||
| - | document.getElementById(' | ||
| | | ||
| if (currentImageCarosel.queue.length> | if (currentImageCarosel.queue.length> | ||
| sequencingSwitchingImages(imageCaroselNumber) | sequencingSwitchingImages(imageCaroselNumber) | ||
| + | resetImageSwitchCooldown(currentImageCarosel) | ||
| } | } | ||
| + | } | ||
| + | |||
| + | function resetImageSwitchCooldown (currentImageCarosel){ | ||
| + | setTimeout(()=> | ||
| + | if (currentImageCarosel.queue.length==0){ | ||
| + | imageAutoSwitchCooldown=false | ||
| + | } | ||
| + | else { | ||
| + | setTimeout(()=> | ||
| + | resetImageSwitchCooldown(currentImageCarosel) | ||
| + | },5000) | ||
| + | } | ||
| + | },3000) | ||
| } | } | ||
| Line 594: | Line 593: | ||
| | | ||
| if (window.innerWidth< | if (window.innerWidth< | ||
| - | console.log(' | + | console.log(' |
| - | deviceOrientation=' | + | deviceOrientation=' |
| } | } | ||
| else{ | else{ | ||
| Line 601: | Line 600: | ||
| deviceOrientation=' | deviceOrientation=' | ||
| } | } | ||
| + | loadImg() | ||
| console.log(' | console.log(' | ||
| //higs=new ImageCarosel(new Point(1920, | //higs=new ImageCarosel(new Point(1920, | ||
| Line 608: | Line 608: | ||
| carosels.push(higs) | carosels.push(higs) | ||
| // | // | ||
| + | higs.quickRight() | ||
| // | // | ||
| + | /* | ||
| setTimeout(()=> | setTimeout(()=> | ||
| if (deviceOrientation==' | if (deviceOrientation==' | ||
| higs.carosel.style.height=window.innerHeight+' | higs.carosel.style.height=window.innerHeight+' | ||
| higs.carosel.style.width=window.innerWidth-100+' | higs.carosel.style.width=window.innerWidth-100+' | ||
| - | document.getElementById(' | + | document.getElementById(' |
| higs.caroselLocation=new Point(0, | higs.caroselLocation=new Point(0, | ||
| } | } | ||
| Line 619: | Line 621: | ||
| higs.carosel.style.height=window.innerHeight+' | higs.carosel.style.height=window.innerHeight+' | ||
| higs.carosel.style.width=window.innerWidth+' | higs.carosel.style.width=window.innerWidth+' | ||
| - | document.getElementById(' | + | document.getElementById(' |
| higs.caroselLocation=new Point(100, | higs.caroselLocation=new Point(100, | ||
| } | } | ||
| },1000) | },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) | ||
| }) | }) | ||
| Line 685: | Line 702: | ||
| })) | })) | ||
| } | } | ||
| - | /* | ||
| - | window.addEventListener(" | ||
| - | if (window.innerWidth< | ||
| - | document.location.reload() | ||
| - | console.log(' | ||
| - | // | ||
| - | // | ||
| - | } | ||
| - | else if (deviceOrientation!=' | ||
| - | document.location.reload() | ||
| - | console.log(' | ||
| - | // | ||
| - | // | ||
| - | } | ||
| - | }) | ||
| - | */ | ||
| - | /* | + | if (deviceType!=' |
| - | let startPoint; | + | window.addEventListener(" |
| - | window.addEventListener(" | + | if (window.innerWidth< |
| - | console.log(' | + | // |
| - | | + | |
| - | }) | + | |
| - | + | higs.sequenceActions(' | |
| - | window.addEventListener(" | + | setTimeout(()=>{ |
| - | console.log(' | + | higs.carosel.style.height=higs.centeredImg.getBoundingClientRect().height+' |
| - | if (startPoint.x< | + | },300) |
| - | | + | } |
| - | | + | // |
| - | } | + | |
| - | else { | + | // |
| - | | + | console.log(' |
| - | | + | |
| + | higs.sequenceActions('quickRight') | ||
| + | setTimeout(()=>{ | ||
| + | higs.carosel.style.height=higs.centeredImg.getBoundingClientRect().height+'px' | ||
| + | },200) | ||
| + | // | ||
| } | } | ||
| - | }) | + | |
| - | */ | + | } |
| + | else{ | ||
| + | screen.orientation.onchange=(()=> | ||
| + | if (screen.orientation.type == ' | ||
| + | | ||
| + | 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) | ||
| + | // | ||
| + | } | ||
| + | }) | ||
| + | } | ||
| - | document.addEventListener(' | + | //Screen orientation on mobile devies: https:// |
| - | document.addEventListener(' | + | //screen.orientation: |
| + | // | ||
| - | var xDown = null; | ||
| - | var yDown = null; | ||
| - | function getTouches(evt) { | ||
| - | return evt.touches || // browser API | ||
| - | | ||
| - | } | ||
| - | |||
| - | function handleTouchStart(evt) { | ||
| - | const firstTouch = getTouches(evt)[0]; | ||
| - | xDown = firstTouch.clientX; | ||
| - | yDown = firstTouch.clientY; | ||
| - | }; | ||
| - | |||
| - | let swipeCooldown=false | ||
| - | function handleTouchMove(evt) { | ||
| - | if ( ! xDown || ! yDown ) { | ||
| - | return; | ||
| - | } | ||
| - | |||
| - | var xUp = evt.touches[0].clientX; | ||
| - | var yUp = evt.touches[0].clientY; | ||
| - | |||
| - | var xDiff = xDown - xUp; | ||
| - | var yDiff = yDown - yUp; | ||
| - | |||
| - | if ( Math.abs( xDiff ) > Math.abs( yDiff ) ) {/*most significant*/ | ||
| - | if ( xDiff > 0 && swipeCooldown==false) { | ||
| - | swipeCooldown=true | ||
| - | checkIfSwitchImageLeft(evt.target) | ||
| - | setTimeout(()=> | ||
| - | swipeCooldown=false | ||
| - | },500) | ||
| - | } | ||
| - | else if (swipeCooldown==false) { | ||
| - | swipeCooldown=true | ||
| - | checkIfSwitchImageRight(evt.target) | ||
| - | setTimeout(()=> | ||
| - | swipeCooldown=false | ||
| - | },500) | ||
| - | } | ||
| - | } else { | ||
| - | if ( yDiff > 0 ) { | ||
| - | /* down swipe */ | ||
| - | } else { | ||
| - | /* up swipe */ | ||
| - | } | ||
| - | } | ||
| - | /* reset values */ | ||
| - | xDown = null; | ||
| - | yDown = null; | ||
| - | }; | ||
| - | |||
| - | //swiping code by: https:// | ||
| function adaptToOrientationChange (){ | function adaptToOrientationChange (){ | ||
| Line 842: | Line 820: | ||
| } | } | ||
| function createWikiSpacing (){ | function createWikiSpacing (){ | ||
| - | for (let i = 0; i < (1/ | + | for (let i = 0; i < (1/ |
| } | } | ||
| } | } | ||
| Line 853: | Line 831: | ||
| </ | </ | ||
| </ | </ | ||
| - | {{: | ||
| - | ====== Console Output: ====== | + | === Some Website Highlights 一些網頁精彩亮點 |
| + | < | ||
| + | |||
| + | <head loading = ' | ||
| + | < | ||
| + | < | ||
| + | | ||
| + | width: auto; | ||
| + | height: 400px; | ||
| + | } | ||
| + | </ | ||
| + | < | ||
| + | <link rel=" | ||
| + | </ | ||
| + | |||
| + | <body loading = ' | ||
| + | <script loading = ' | ||
| + | <script loading = ' | ||
| + | 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)) | ||
| + | |||
| + | //STEVE CODE: | ||
| + | |||
| + | |||
| + | /* | ||
| + | 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) | ||
| + | } | ||
| + | }) | ||
| + | */ | ||
| + | |||
| + | window.addEventListener(' | ||
| + | window.addEventListener(' | ||
| + | |||
| + | var xDown = null; | ||
| + | var yDown = null; | ||
| + | |||
| + | function getTouches(evt) { | ||
| + | return evt.touches || // browser API | ||
| + | | ||
| + | } | ||
| + | |||
| + | function handleTouchStart(evt) { | ||
| + | const firstTouch = getTouches(evt)[0]; | ||
| + | xDown = firstTouch.clientX; | ||
| + | yDown = firstTouch.clientY; | ||
| + | }; | ||
| + | |||
| + | let swipeCooldown=false | ||
| + | function handleTouchMove(evt) { | ||
| + | console.log(' | ||
| + | if ( ! xDown || ! yDown ) { | ||
| + | return; | ||
| + | } | ||
| + | console.log(' | ||
| + | var xUp = evt.touches[0].clientX; | ||
| + | var yUp = evt.touches[0].clientY; | ||
| + | |||
| + | var xDiff = xDown - xUp; | ||
| + | var yDiff = yDown - yUp; | ||
| + | |||
| + | if ( Math.abs( xDiff ) > Math.abs( yDiff ) ) {/*most significant*/ | ||
| + | if ( xDiff > 0 && swipeCooldown==false) { | ||
| + | evt.preventDefault() | ||
| + | console.log(' | ||
| + | swipeCooldown=true | ||
| + | checkIfSwitchImageLeft(evt.target) | ||
| + | setTimeout(()=> | ||
| + | swipeCooldown=false | ||
| + | },500) | ||
| + | } | ||
| + | else if (swipeCooldown==false) { | ||
| + | evt.preventDefault() | ||
| + | console.log(' | ||
| + | swipeCooldown=true | ||
| + | checkIfSwitchImageRight(evt.target) | ||
| + | setTimeout(()=> | ||
| + | swipeCooldown=false | ||
| + | },500) | ||
| + | } | ||
| + | } else { | ||
| + | if ( yDiff > 0 ) { | ||
| + | } else { | ||
| + | } | ||
| + | } | ||
| + | /* reset values */ | ||
| + | xDown = null; | ||
| + | yDown = null; | ||
| + | }; | ||
| + | |||
| + | //swiping code by: https:// | ||
| + | |||
| + | </ | ||
| + | </ | ||
| + | |||
| + | </ | ||