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 [2022/12/31 00:40] – 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.2; | + | 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.2; | + | 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: | + | opacity: |
| - | 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 122: | 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 139: | Line 146: | ||
| let info=[{ | let info=[{ | ||
| - | imageSrc:' | + | imageSrc:' |
| - | | + | |
| - | href:' | + | href:' |
| - | description:' | + | description:' |
| },{ | },{ | ||
| - | imageSrc:' | + | imageSrc:' |
| - | | + | |
| - | href:' | + | href:' |
| - | description:' | + | description:' |
| },{ | },{ | ||
| - | imageSrc:' | + | imageSrc:' |
| - | | + | portraitSrc:' |
| - | href:' | + | href:' |
| - | description:' | + | description:' |
| + | },{ | ||
| + | imageSrc:' | ||
| + | | ||
| + | href:' | ||
| + | description:' | ||
| + | },{ | ||
| + | imageSrc:' | ||
| + | portraitSrc:' | ||
| + | href:' | ||
| + | description:' | ||
| }] | }] | ||
| Line 179: | Line 196: | ||
| else if (domLocation==' | else if (domLocation==' | ||
| // | // | ||
| - | document.getElementById(' | + | document.getElementById(' |
| } | } | ||
| else{ | else{ | ||
| Line 190: | Line 207: | ||
| } | } | ||
| this.carosel.className=' | this.carosel.className=' | ||
| + | this.carosel.ondragstart=(()=> | ||
| + | this.carosel.ondrop=(()=> | ||
| if (domLocation==' | if (domLocation==' | ||
| document.body.appendChild(this.carosel) | document.body.appendChild(this.carosel) | ||
| Line 195: | Line 214: | ||
| else if (domLocation==' | else if (domLocation==' | ||
| // | // | ||
| - | document.getElementById(' | + | document.getElementById(' |
| } | } | ||
| else{ | else{ | ||
| Line 208: | Line 227: | ||
| } | } | ||
| else{ | else{ | ||
| - | this.mainImg1.href=this.info[1].potraitSrc | + | this.mainImg1.href=this.info[1].portraitSrc |
| } | } | ||
| this.mainImg1.className=' | this.mainImg1.className=' | ||
| Line 217: | Line 236: | ||
| } | } | ||
| else{ | else{ | ||
| - | this.mainImg2.src=this.info[0].potraitSrc | + | 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 232: | 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 258: | Line 279: | ||
| this.right.style.top=' | this.right.style.top=' | ||
| let arrowSizes=browserZoomLevel/ | let arrowSizes=browserZoomLevel/ | ||
| - | if (arrowSizes< | + | if (arrowSizes< |
| arrowSizes=84 | arrowSizes=84 | ||
| } | } | ||
| - | else if (arrowSizes> | + | else if (arrowSizes> |
| arrowSizes=100 | arrowSizes=100 | ||
| + | } | ||
| + | else if (deviceOrientation==' | ||
| + | console.log(' | ||
| + | arrowSizes=browserZoomLevel/ | ||
| } | } | ||
| this.right.style.width=arrowSizes+' | this.right.style.width=arrowSizes+' | ||
| Line 317: | 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(' | ||
| } | } | ||
| Line 323: | Line 348: | ||
| } | } | ||
| quickRight (){ | 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) |
| - | | + | |
| - | | + | |
| - | manuallyMoveHtmlToRight(this.mainImg1, | + | |
| - | this.centeredImg=this.mainImg1 | + | |
| - | /* | + | |
| setTimeout(()=> | setTimeout(()=> | ||
| - | this.centeredImg.style.left=this.caroselLocation/ | + | this.mainImg2.style.transitionProperty=' |
| - | },(this.caroselLocation/ | + | this.mainImg2.style.left=this.correctCenteredImgPosition.x-this.mainImg2.getBoundingClientRect().width+' |
| - | | + | |
| + | this.mainImg2.style.transitionProperty=' | ||
| + | this.mainImg2.style.left=this.correctCenteredImgPosition.x+' | ||
| + | this.centeredImg=this.mainImg2 | ||
| + | | ||
| } | } | ||
| else{ | else{ | ||
| - | | + | this.changeContent(this.mainImg1) |
| - | this.mainImg2.style.left=this.caroselLocation.x-this.mainImg2.getBoundingClientRect().width+' | + | |
| - | | + | |
| - | manuallyMoveHtmlToRight(this.mainImg2, | + | |
| - | this.centeredImg=this.mainImg2 | + | |
| - | /* | + | |
| setTimeout(()=> | setTimeout(()=> | ||
| - | this.centeredImg.style.left=this.caroselLocation/ | + | this.mainImg1.style.transitionProperty=' |
| - | | + | this.mainImg1.style.left=this.correctCenteredImgPosition.x-this.mainImg1.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, | ||
| Line 359: | 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(()=> | + | |
| - | | + | |
| - | 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) | ||
| - | | + | this.mainImg2.style.transitionProperty=' |
| - | | + | |
| - | } | + | this.centeredImg.style.left=this.correctCenteredImgPosition.x-this.centeredImg.getBoundingClientRect().width+' |
| - | // },10) | + | this.mainImg2.style.transitionProperty=' |
| - | return new Promise((resolve, | + | this.mainImg2.style.left=this.correctCenteredImgPosition.x+' |
| - | setTimeout(()=> | + | this.centeredImg=this.mainImg2 |
| - | resolve(true) | + | |
| - | },10*35) | + | |
| - | }) | + | |
| - | } | + | |
| - | switchRight (){ | + | |
| - | console.log('switched right') | + | |
| - | | + | |
| - | 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 469: | 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 497: | Line 499: | ||
| } | } | ||
| else{ | else{ | ||
| - | toChangeTo.src=this.info[this.currentImage].potraitSrc | + | 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 531: | 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]]() | ||
| Line 539: | Line 572: | ||
| 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 546: | Line 593: | ||
| | | ||
| if (window.innerWidth< | if (window.innerWidth< | ||
| - | console.log(' | + | console.log(' |
| - | deviceOrientation=' | + | deviceOrientation=' |
| } | } | ||
| else{ | else{ | ||
| Line 553: | Line 600: | ||
| deviceOrientation=' | deviceOrientation=' | ||
| } | } | ||
| + | loadImg() | ||
| console.log(' | console.log(' | ||
| //higs=new ImageCarosel(new Point(1920, | //higs=new ImageCarosel(new Point(1920, | ||
| Line 560: | Line 608: | ||
| carosels.push(higs) | carosels.push(higs) | ||
| // | // | ||
| + | higs.quickRight() | ||
| // | // | ||
| - | setTimeout(()=> | ||
| - | higs.carosel.style.height=window.innerHeight+' | ||
| - | higs.carosel.style.width=window.innerWidth-100+' | ||
| - | // | ||
| /* | /* | ||
| - | if (deviceOrientation==' | + | setTimeout(()=> |
| - | higs.carosel.style.top=document.getElementById('design_and_change_for_assistance_and_pressure_alleviation_of_the_elderly_stressed_and_general_public').getBoundingClientRect().y+document.getElementById(' | + | |
| - | } | + | higs.carosel.style.height=window.innerHeight+'px'; |
| - | else if (browserZoomLevel< | + | higs.carosel.style.width=window.innerWidth-100+' |
| - | //higs.carosel.style.top=document.getElementById(' | + | |
| - | higs.carosel.style.top=document.getElementById('design_and_change_for_assistance_and_pressure_alleviation_of_the_elderly_stressed_and_general_public').getBoundingClientRect().y+document.getElementById(' | + | higs.caroselLocation=new Point(0, |
| - | } | + | } |
| - | else { | + | else{ |
| - | // | + | higs.carosel.style.height=window.innerHeight+' |
| - | higs.carosel.style.top=document.getElementById(' | + | higs.carosel.style.width=window.innerWidth+'px'; |
| - | } | + | |
| - | */ | + | higs.caroselLocation=new Point(100, |
| - | //createWikiSpacing() | + | } |
| - | higs.caroselLocation=new Point(0,300) | + | |
| - | },1000) | + | */ |
| + | setTimeout(()=> | ||
| + | | ||
| + | higs.carosel.style.width=' | ||
| + | // higs.carosel.style.width=' | ||
| + | // | ||
| + | | ||
| + | higs.caroselLocation=new Point(0, | ||
| + | setTimeout(()=> | ||
| + | higs.addSpaceAbove(2) | ||
| + | // | ||
| + | | ||
| + | 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() | ||
| document.addEventListener(" | document.addEventListener(" | ||
| Line 614: | Line 690: | ||
| let switchImageCooldown=false | let switchImageCooldown=false | ||
| - | document.addEventListener(' | + | if (deviceType!=' |
| - | mouse.x = e.pageX | + | |
| - | mouse.y = e.pageY | + | mouse.x = e.pageX |
| - | if (mouse.x> | + | mouse.y = e.pageY |
| - | checkIfSwitchImageRight() | + | if (mouse.x> |
| - | } | + | checkIfSwitchImageRight() |
| - | else if (mouse.x< | + | } |
| - | checkIfSwitchImageLeft() | + | else if (mouse.x< |
| - | } | + | checkIfSwitchImageLeft() |
| - | })) | + | } |
| + | })) | ||
| + | } | ||
| - | /* | + | if (deviceType!=' |
| - | window.addEventListener(" | + | window.addEventListener(" |
| - | if (window.innerWidth< | + | |
| - | document.location.reload() | + | |
| - | console.log(' | + | // |
| - | //deviceOrientation=' | + | console.log(' |
| - | // | + | |
| - | } | + | higs.sequenceActions(' |
| - | else if (deviceOrientation!='potrait'){ | + | setTimeout(()=> |
| - | document.location.reload() | + | higs.carosel.style.height=higs.centeredImg.getBoundingClientRect().height+' |
| - | console.log(' | + | },300) |
| - | //deviceOrientation=' | + | } |
| - | // | + | // |
| - | } | + | |
| - | }) | + | //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 662: | Line 777: | ||
| */ | */ | ||
| - | document.addEventListener(' | + | window.addEventListener(' |
| - | document.addEventListener(' | + | window.addEventListener(' |
| var xDown = null; | var xDown = null; | ||
| Line 679: | Line 794: | ||
| }; | }; | ||
| + | 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 691: | Line 808: | ||
| if ( Math.abs( xDiff ) > Math.abs( yDiff ) ) {/*most significant*/ | if ( Math.abs( xDiff ) > Math.abs( yDiff ) ) {/*most significant*/ | ||
| - | if ( xDiff > 0 ) { | + | if ( xDiff > 0 && swipeCooldown==false) { |
| + | console.log(' | ||
| + | swipeCooldown=true | ||
| checkIfSwitchImageLeft(evt.target) | checkIfSwitchImageLeft(evt.target) | ||
| - | | + | setTimeout(()=> |
| + | swipeCooldown=false | ||
| + | },500) | ||
| + | | ||
| + | | ||
| + | console.log(' | ||
| + | swipeCooldown=true | ||
| checkIfSwitchImageRight(evt.target) | checkIfSwitchImageRight(evt.target) | ||
| + | setTimeout(()=> | ||
| + | swipeCooldown=false | ||
| + | },500) | ||
| } | } | ||
| } else { | } else { | ||
| if ( yDiff > 0 ) { | if ( yDiff > 0 ) { | ||
| - | | + | |
| } else { | } else { | ||
| - | | + | |
| } | } | ||
| } | } | ||
| Line 709: | Line 837: | ||
| //swiping code by: https:// | //swiping code by: https:// | ||
| + | |||
| function adaptToOrientationChange (){ | function adaptToOrientationChange (){ | ||
| Line 772: | Line 901: | ||
| } | } | ||
| function createWikiSpacing (){ | function createWikiSpacing (){ | ||
| - | for (let i = 0; i < (1/ | + | for (let i = 0; i < (1/ |
| } | } | ||
| } | } | ||
| Line 783: | Line 912: | ||
| </ | </ | ||
| </ | </ | ||
| - | {{: | ||
| - | |||
| - | ====== old headline: Aging & Society, Empathy & Assistance, Service & Design ====== | ||