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-page [2023/01/11 01:51] – 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 { | + | |
| - | 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 (deviceType!=' |
| - | if (window.innerWidth< | + | |
| - | document.location.reload() | + | |
| - | console.log(' | + | |
| - | //deviceOrientation=' | + | // |
| - | // | + | console.log(' |
| - | } | + | |
| - | else if (deviceOrientation!='portriat'){ | + | higs.sequenceActions(' |
| - | document.location.reload() | + | setTimeout(()=> |
| - | console.log(' | + | higs.carosel.style.height=higs.centeredImg.getBoundingClientRect().height+' |
| - | //deviceOrientation=' | + | },300) |
| - | // | + | } |
| - | } | + | // |
| - | }) | + | |
| - | */ | + | //document.location.reload() |
| + | console.log(' | ||
| + | deviceOrientation=' | ||
| + | | ||
| + | | ||
| + | higs.carosel.style.height=higs.centeredImg.getBoundingClientRect().height+' | ||
| + | },200) | ||
| + | | ||
| + | } | ||
| + | | ||
| + | } | ||
| + | else{ | ||
| + | screen.orientation.onchange=(()=> | ||
| + | | ||
| + | // | ||
| + | console.log(' | ||
| + | | ||
| + | higs.sequenceActions(' | ||
| + | setTimeout(()=> | ||
| + | higs.carosel.style.height=higs.centeredImg.getBoundingClientRect().height+' | ||
| + | },300) | ||
| + | } | ||
| + | // | ||
| + | | ||
| + | //document.location.reload() | ||
| + | console.log(' | ||
| + | deviceOrientation=' | ||
| + | | ||
| + | | ||
| + | higs.carosel.style.height=higs.centeredImg.getBoundingClientRect().height+' | ||
| + | },200) | ||
| + | | ||
| + | } | ||
| + | }) | ||
| + | } | ||
| + | |||
| + | //Screen orientation on mobile devies: https:// | ||
| + | // | ||
| + | // | ||
| /* | /* | ||
| Line 722: | Line 777: | ||
| */ | */ | ||
| - | document.addEventListener(' | + | window.addEventListener(' |
| - | document.addEventListener(' | + | window.addEventListener(' |
| var xDown = null; | var xDown = null; | ||
| Line 741: | Line 796: | ||
| let swipeCooldown=false | let swipeCooldown=false | ||
| function handleTouchMove(evt) { | function handleTouchMove(evt) { | ||
| + | console.log(' | ||
| if ( ! xDown || ! yDown ) { | if ( ! xDown || ! yDown ) { | ||
| return; | return; | ||
| } | } | ||
| + | console.log(' | ||
| var xUp = evt.touches[0].clientX; | var xUp = evt.touches[0].clientX; | ||
| var yUp = evt.touches[0].clientY; | var yUp = evt.touches[0].clientY; | ||
| Line 770: | Line 826: | ||
| } else { | } else { | ||
| if ( yDiff > 0 ) { | if ( yDiff > 0 ) { | ||
| - | | + | |
| } else { | } else { | ||
| - | | + | |
| } | } | ||
| } | } | ||
| Line 781: | Line 837: | ||
| //swiping code by: https:// | //swiping code by: https:// | ||
| + | |||
| function adaptToOrientationChange (){ | function adaptToOrientationChange (){ | ||
| Line 844: | Line 901: | ||
| } | } | ||
| function createWikiSpacing (){ | function createWikiSpacing (){ | ||
| - | for (let i = 0; i < (1/ | + | for (let i = 0; i < (1/ |
| } | } | ||
| } | } | ||
| Line 855: | Line 912: | ||
| </ | </ | ||
| </ | </ | ||
| - | {{: | ||
| - | |||
| - | ====== Console Output: ====== | ||
| - | |||