Sample :: docSlider.js

├── README.md ├── package.json ├── LICENSE ├── sample.html ├── sample_horizontal.html ├── docSlider.scss ├── docSlider.css ├── docSlider.min.js └── docSlider.js /README.md: -------------------------------------------------------------------------------- 1 | # docSlider.js 2 | docSlider.js is a JavaScript plugin that works without jQuery. 3 | Change the web sections to a one-page scroll. 4 | It works on modern browser as Chrome, Firefox, Safari, Edge, IE11. 5 | 6 | 7 | ## Demo & Document 8 | * [Demo Page](https://prjct-samwest.github.io/docSlider/) 9 | * [Document](https://prjct-samwest.github.io/docSlider/document.html) 10 | 11 | 12 | ## License 13 | Created by SamWest. 14 | Copyright (c) 2020 SamWest. 15 | This plugin is released under the MIT License. -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "docslider", 3 | "version": "3.0.1", 4 | "description": "docSlider.js is a JavaScript plugin that works without jQuery. Change the web sections to a one-page scroll.", 5 | "keywords": [ 6 | "slider", 7 | "vanilla js", 8 | "one page scroll" 9 | ], 10 | "main": "docSlider.min.js", 11 | "files": [ 12 | "README.md", 13 | "LICENSE", 14 | "docSlider.js", 15 | "docSlider.min.js", 16 | "docSlider.scss", 17 | "docSlider.css", 18 | "sample.html", 19 | "sample_horizontal.html" 20 | ], 21 | "repository": { 22 | "type": "git", 23 | "url": "git+https://github.com/prjct-samwest/docSlider.git" 24 | }, 25 | "author": "SamWest (https://github.com/prjct-samwest/)", 26 | "license": "MIT", 27 | "bugs": { 28 | "url": "https://github.com/prjct-samwest/docSlider/issues" 29 | }, 30 | "homepage": "https://github.com/prjct-samwest/docSlider#readme" 31 | } 32 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2020 SamWest 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /sample.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 7 | 8 | 9 | 23 | Sample :: docSlider.js 24 | 25 | 26 | 27 |

28 |

29 |

Page1

30 |

31 |

32 |

Page2

33 |

34 |

35 |

Page3

36 |

37 |

38 |

Page4

39 |

40 |

41 | 42 | 43 | 44 | 45 | -------------------------------------------------------------------------------- /sample_horizontal.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 7 | 8 | 9 | 23 | Sample :: docSlider.js 24 | 25 | 26 | 27 |

28 |

29 |

Page1

30 |

31 |

32 |

Page2

33 |

34 |

35 |

Page3

36 |

37 |

38 |

Page4

39 |

40 |

41 | 42 | 43 | 44 | 45 | -------------------------------------------------------------------------------- /docSlider.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | /**----------------------- 3 | 4 | docSlider.js - ver.3.0.1 5 | URL : https://prjct-samwest.github.io/docSlider/ 6 | created by SamWest 7 | Copyright (c) 2020 SamWest. 8 | This plugin is released under the MIT License. 9 | 10 | -----------------------**/ 11 | 12 | /* CHANGE THE PAGER STYLE */ 13 | .docSlider-pager{ 14 | position: fixed; 15 | z-index: 100; 16 | top: 50%; 17 | right: 20px; 18 | transform: translateY(-50%); 19 | } 20 | 21 | /* CHANGE THE BUTTON STYLE */ 22 | .docSlider-button{ 23 | height: 18px; 24 | width: 18px; 25 | border-radius: 50%; 26 | cursor: pointer; 27 | display: block; 28 | margin: 5px 0; 29 | background-color: #333; 30 | opacity: .25; 31 | appearance: none; 32 | border: none; 33 | box-sizing: border-box; 34 | 35 | &.selected{ 36 | opacity: 1; 37 | } 38 | 39 | &:active{ 40 | outline: none; 41 | } 42 | 43 | } 44 | 45 | 46 | 47 | /**------------------------------ 48 | REWRITING IS NOT RECOMMENDED 49 | -----------------------------**/ 50 | html,body{ 51 | overflow: hidden; 52 | touch-action: none; 53 | height: 100%; 54 | } 55 | 56 | html,body, 57 | .docSlider, 58 | .docSlider-inner, 59 | .docSlider-page{ 60 | box-sizing: border-box; 61 | margin: 0; 62 | padding: 0; 63 | appearance: none; 64 | border: none; 65 | outline: none; 66 | 67 | &:active{ 68 | outline: none; 69 | } 70 | } 71 | 72 | .docSlider{ 73 | overflow: hidden; 74 | width: 100vw; 75 | height: 100vh; 76 | position: fixed; 77 | top: 0; 78 | left: 0; 79 | } 80 | 81 | .docSlider-inner{ 82 | width: inherit; 83 | height: inherit; 84 | position: fixed; 85 | top: 0; 86 | left: 0; 87 | } 88 | 89 | .docSlider-page{ 90 | height: inherit; 91 | width: inherit; 92 | overflow: auto; 93 | position: absolute; 94 | overflow-scrolling: touch; 95 | } 96 | 97 | -------------------------------------------------------------------------------- /docSlider.css: -------------------------------------------------------------------------------- 1 | /**----------------------- 2 | 3 | docSlider.js - ver.3.0.1 4 | URL : https://prjct-samwest.github.io/docSlider/ 5 | created by SamWest 6 | Copyright (c) 2020 SamWest. 7 | This plugin is released under the MIT License. 8 | 9 | -----------------------**/ 10 | /* CHANGE THE PAGER STYLE */ 11 | .docSlider-pager { 12 | position: fixed; 13 | z-index: 100; 14 | top: 50%; 15 | right: 20px; 16 | transform: translateY(-50%); 17 | } 18 | 19 | /* CHANGE THE BUTTON STYLE */ 20 | .docSlider-button { 21 | height: 18px; 22 | width: 18px; 23 | border-radius: 50%; 24 | cursor: pointer; 25 | display: block; 26 | margin: 5px 0; 27 | background-color: #333; 28 | opacity: .25; 29 | appearance: none; 30 | border: none; 31 | box-sizing: border-box; 32 | } 33 | 34 | .docSlider-button.selected { 35 | opacity: 1; 36 | } 37 | 38 | .docSlider-button:active { 39 | outline: none; 40 | } 41 | 42 | /**------------------------------ 43 | REWRITING IS NOT RECOMMENDED 44 | -----------------------------**/ 45 | html, body { 46 | overflow: hidden; 47 | touch-action: none; 48 | height: 100%; 49 | } 50 | 51 | html, body, 52 | .docSlider, 53 | .docSlider-inner, 54 | .docSlider-page { 55 | box-sizing: border-box; 56 | margin: 0; 57 | padding: 0; 58 | appearance: none; 59 | border: none; 60 | outline: none; 61 | } 62 | 63 | html:active, body:active, 64 | .docSlider:active, 65 | .docSlider-inner:active, 66 | .docSlider-page:active { 67 | outline: none; 68 | } 69 | 70 | .docSlider { 71 | overflow: hidden; 72 | width: 100vw; 73 | height: 100vh; 74 | position: fixed; 75 | top: 0; 76 | left: 0; 77 | } 78 | 79 | .docSlider-inner { 80 | width: inherit; 81 | height: inherit; 82 | position: fixed; 83 | top: 0; 84 | left: 0; 85 | } 86 | 87 | .docSlider-page { 88 | height: inherit; 89 | width: inherit; 90 | overflow: auto; 91 | position: absolute; 92 | overflow-scrolling: touch; 93 | } 94 | -------------------------------------------------------------------------------- /docSlider.min.js: -------------------------------------------------------------------------------- 1 | var $jscomp=$jscomp||{};$jscomp.scope={};$jscomp.arrayIteratorImpl=function(a){var f=0;return function(){return f *:not(.docSlider-pager)");a.classList.add("docSlider-inner");for(var e=0;e *").length;if(document.querySelector(".docSlider-pager")){b=document.querySelectorAll(".docSlider-button");for(var a=0;a *");x=document.querySelector(".docSlider-pager");p=document.querySelectorAll(".docSlider-pager .docSlider-button");t=c.length;n=e=0;B=k.horizontal? 15 | "X":"Y";G=k.horizontal?"Y":"X";H="onwheel"in document?"wheel":"onmousewheel"in document?"mousewheel":"DOMMouseScroll";z=C=!0;E="elementsFromPoint"in document?"elementsFromPoint":"msElementsFromPoint";I="ontouchstart"in window;J=/iPhone|Android.+Mobile/.test(navigator.userAgent);D=0;u=q=null;r=!0;A=v=l=null;g.updatePager();g.updateClass();A=c[e];c[e].focus({preventScroll:!1})},setEvent:function(){for(var b=0;b=b.scrollTop;case "bottom":return b.scrollTop>=b.scrollHeight-b.clientHeight;case "left":return 0>=b.scrollLeft;case "right":return b.scrollLeft>=b.scrollWidth-b.clientWidth;default:return a}},wheel:function(b){C&&(requestAnimationFrame(function(){C=!0; 23 | if(r&&z){var a=b.deltaY?-b.deltaY:b.wheelDelta?b.wheelDelta:-b.detail,d=document[E](b.pageX,b.pageY);a=0m[B].distance?"next":"prev";b=g.indexCheck("next"===a?e+1:e-1);if(b!==e&&!(0===e&&"prev"===a||e===t-1&&"next"===a)){a=m[a+B];for(var c=document[E](m.X.start,m.Y.start),d=0;db?t+b:b),q=void 0===a?null:a,u=void 0===c?null:c,l="jumpPage",g.pageChange(b))},nextPage:function(a,c){var b=g.indexCheck(e+1);q=void 0===a?null:a;u=void 0===c?null:c;l="nextPage";g.pageChange(b)},prevPage:function(a,c){var b=g.indexCheck(e- 28 | 1);q=void 0===a?null:a;u=void 0===c?null:c;l="prevPage";g.pageChange(b)},getOptions:function(){return k},getElements:function(){return{wrapper:h,pages:c,pager:x,buttons:p}},getCurrentIndex:function(){return e},getCurrentPage:function(){return c[e]},enable:function(a){a=(r=void 0===a?!r:a)?"0":"-1";for(var b=0;b *:not(.docSlider-pager)'); 79 | 80 | inner.classList.add('docSlider-inner'); 81 | 82 | for(let i = 0; i < pages.length; i++){ 83 | 84 | const page = pages[i]; 85 | const prop = op.setInitCss(i,op.horizontal); 86 | 87 | for(let p = 0; p < Object.keys(prop).length; p++){ 88 | 89 | const key = Object.keys(prop)[p]; 90 | 91 | page.style[key] = prop[key]; 92 | 93 | } 94 | 95 | page.classList.add('docSlider-page'); 96 | page.classList.add('docSlider-scroll'); 97 | page.setAttribute('data-ds-index',i.toString()); 98 | page.setAttribute('tabindex','0'); 99 | 100 | inner.appendChild(page); 101 | 102 | } 103 | 104 | wrapper.appendChild(inner); 105 | 106 | }, 107 | 108 | createPager : function () { 109 | 110 | if(!op.pager) 111 | return; 112 | 113 | const pageLength = document.querySelectorAll('.docSlider-inner > *').length; 114 | 115 | if(document.querySelector('.docSlider-pager')){ 116 | 117 | const buttons = document.querySelectorAll('.docSlider-button'); 118 | 119 | for(let i = 0; i < buttons.length; i++){ 120 | 121 | let button = buttons[i]; 122 | 123 | button.setAttribute('data-ds-jump',i.toString()); 124 | button.setAttribute('tabindex','-1'); 125 | 126 | } 127 | 128 | }else{ 129 | const pager = document.createElement('nav'); 130 | 131 | pager.classList.add('docSlider-pager'); 132 | 133 | for(let i = 0; i < pageLength; i++){ 134 | 135 | let button = document.createElement('button'); 136 | 137 | button.classList.add('docSlider-button'); 138 | button.setAttribute('data-ds-jump',i.toString()); 139 | button.setAttribute('tabindex','-1'); 140 | 141 | pager.appendChild(button); 142 | 143 | } 144 | 145 | document.querySelector('.docSlider').appendChild(pager); 146 | 147 | } 148 | 149 | }, 150 | 151 | setData : function () { 152 | 153 | d.html = document.documentElement; 154 | d.wrapper = document.querySelector('.docSlider'); 155 | d.pages = document.querySelectorAll('.docSlider-inner > *'); 156 | d.pager = document.querySelector('.docSlider-pager'); 157 | d.buttons = document.querySelectorAll('.docSlider-pager .docSlider-button'); 158 | d.length = d.pages.length; 159 | d.now = 0; 160 | d.past = 0; 161 | d.xy = op.horizontal ? 'X' : 'Y'; 162 | d.yx = !op.horizontal ? 'X' : 'Y'; 163 | d.wheel = 'onwheel' in document ? 'wheel' : 'onmousewheel' in document ? 'mousewheel' : 'DOMMouseScroll'; 164 | d.wheelTick = true; 165 | d.wheelEnable = true; 166 | d.fromPoint = 'elementsFromPoint' in document ? 'elementsFromPoint' : 'msElementsFromPoint'; 167 | d.isTouch = 'ontouchstart' in window; 168 | d.isMobile = /iPhone|Android.+Mobile/.test(navigator.userAgent); 169 | d.resizeTimer = 0; 170 | d.speed = null; 171 | d.easing = null; 172 | d.enable = true; 173 | d.type = null; 174 | d.pastType = null; 175 | d.active = null; 176 | 177 | u.updatePager(); 178 | u.updateClass(); 179 | 180 | d.active = d.pages[d.now]; 181 | d.pages[d.now].focus({preventScroll :false}); 182 | 183 | }, 184 | 185 | setEvent : function () { 186 | 187 | for(let i = 0; i < d.length; i++){ 188 | 189 | const page = d.pages[i]; 190 | const button = d.buttons[i]; 191 | 192 | page.addEventListener('focusin',u.focusin); 193 | 194 | if(button === undefined) 195 | continue; 196 | 197 | button.addEventListener('click',u.pagerClick); 198 | 199 | } 200 | 201 | document.addEventListener('keyup',u.keyup); 202 | document.addEventListener(d.wheel,u.wheel); 203 | d.pages[0].addEventListener('transitionstart',u.transitionstart); 204 | d.pages[0].addEventListener('transitionend',u.transitionend); 205 | 206 | if(d.isTouch){ 207 | 208 | d.touch = { 209 | move : false, 210 | nextX : 'right', 211 | prevX : 'left', 212 | nextY : 'bottom', 213 | prevY : 'top', 214 | X : {}, 215 | Y : {} 216 | } 217 | 218 | d.wrapper.addEventListener('touchstart',u.touchstart,false); 219 | d.wrapper.addEventListener('touchmove',u.touchmove,false); 220 | d.wrapper.addEventListener('touchend',u.touchend,false); 221 | 222 | } 223 | 224 | if(d.isMobile){ 225 | 226 | u.setFV(); 227 | window.addEventListener('resize',u.resize); 228 | 229 | } 230 | 231 | }, 232 | 233 | hashJump : function () { 234 | 235 | const to = u.hashToIndex(location.hash); 236 | 237 | if(to === d.now) 238 | return false; 239 | 240 | d.speed = op.startSpeed === null ? op.speed : op.startSpeed; 241 | d.type = 'anchor'; 242 | 243 | if(d.speed){ 244 | 245 | setTimeout(function () { 246 | 247 | u.pageChange(to); 248 | 249 | },200) 250 | 251 | }else{ 252 | 253 | u.pageChange(to); 254 | 255 | } 256 | 257 | return true; 258 | 259 | } 260 | 261 | }; 262 | 263 | const u = { 264 | 265 | hashToIndex : function (hash) { 266 | 267 | return (function () { 268 | 269 | if(hash.length){ 270 | 271 | let page = document.querySelector(hash); 272 | 273 | if(!page || !page.hasAttribute('data-ds-index')) 274 | return 0; 275 | 276 | return Number(page.getAttribute('data-ds-index')); 277 | 278 | }else{ 279 | 280 | return 0; 281 | 282 | } 283 | 284 | })(); 285 | 286 | }, 287 | 288 | indexCheck : function(num){ 289 | 290 | return (num >= 0 && num < d.length) ? num : d.now; 291 | 292 | }, 293 | 294 | pageChange : function(to){ 295 | 296 | if(d.type !== 'focus') 297 | d.pages[to].focus(); 298 | 299 | d.active = d.pages[to]; 300 | 301 | if(to === d.now) 302 | return; 303 | 304 | d.type = d.type ? d.type : 'focus'; 305 | d.past = d.now; 306 | d.now = to; 307 | 308 | let speed = d.speed === null ? op.speed : d.speed; 309 | 310 | const easing = d.easing === null ? op.easing : d.easing; 311 | 312 | for(let i = 0; i < d.length; i++){ 313 | 314 | const page = d.pages[i]; 315 | const prop = op.setChangeCss(i, d.now, speed, easing, op.horizontal); 316 | 317 | for(let p = 0; p < Object.keys(prop).length; p++){ 318 | 319 | const key = Object.keys(prop)[p]; 320 | 321 | page.style[key] = prop[key]; 322 | 323 | } 324 | 325 | } 326 | 327 | if(!speed){ 328 | 329 | if(op.scrollReset) 330 | u.scrollReset(d.pages[d.now]); 331 | 332 | if(pcr) 333 | u.animationReset(d.past); 334 | 335 | op.beforeChange(d.past, d.pages[d.past], d.now, d.pages[d.now], d.type); 336 | d.pastType = d.type; 337 | d.type = null; 338 | 339 | if(sc) 340 | scrollCue._updateWithDocSlider(); 341 | 342 | op.afterChange(d.now, d.pages[d.now], d.past, d.pages[d.past], d.pastType); 343 | d.pastType = null; 344 | 345 | } 346 | 347 | d.speed = null; 348 | d.easing = null; 349 | 350 | u.updatePager(); 351 | u.updateClass(); 352 | 353 | }, 354 | 355 | focusin : function(){ 356 | 357 | const to = Number(this.getAttribute('data-ds-index')); 358 | 359 | d.type = d.type ? d.type : 'focus'; 360 | 361 | u.pageChange(to); 362 | 363 | }, 364 | 365 | focusinx : function(){ 366 | 367 | const to = Number(this.getAttribute('data-ds-index')); 368 | 369 | d.active = d.pages[to]; 370 | 371 | if(to === d.now) 372 | return; 373 | 374 | d.type = d.type ? d.type : 'focus'; 375 | d.past = d.now; 376 | d.now = to; 377 | 378 | let speed = d.speed === null ? op.speed : d.speed; 379 | 380 | const easing = d.easing === null ? op.easing : d.easing; 381 | 382 | for(let i = 0; i < d.length; i++){ 383 | 384 | const page = d.pages[i]; 385 | const prop = op.setChangeCss(i, d.now, speed, easing, op.horizontal); 386 | 387 | for(let p = 0; p < Object.keys(prop).length; p++){ 388 | 389 | const key = Object.keys(prop)[p]; 390 | 391 | page.style[key] = prop[key]; 392 | 393 | } 394 | 395 | } 396 | 397 | if(!speed){ 398 | 399 | if(op.scrollReset) 400 | u.scrollReset(d.pages[d.now]); 401 | 402 | if(pcr) 403 | u.animationReset(d.past); 404 | 405 | op.beforeChange(d.past, d.pages[d.past], d.now, d.pages[d.now], d.type); 406 | d.pastType = d.type; 407 | d.type = null; 408 | 409 | if(sc) 410 | scrollCue._updateWithDocSlider(); 411 | 412 | op.afterChange(d.now, d.pages[d.now], d.past, d.pages[d.past], d.pastType); 413 | d.pastType = null; 414 | 415 | } 416 | 417 | d.speed = null; 418 | d.easing = null; 419 | 420 | u.updatePager(); 421 | u.updateClass(); 422 | 423 | }, 424 | 425 | pagerClick : function(){ 426 | 427 | if(!d.enable) 428 | return; 429 | 430 | const to = Number(this.getAttribute('data-ds-jump')); 431 | 432 | d.type = 'pager'; 433 | u.pageChange(to); 434 | 435 | }, 436 | 437 | updatePager : function () { 438 | 439 | for(let i = 0; i < d.length; i++ ){ 440 | 441 | const button = d.buttons[i]; 442 | 443 | if(button === undefined) 444 | continue; 445 | 446 | button.classList.remove('selected'); 447 | 448 | } 449 | 450 | if(d.buttons[d.now] === undefined) 451 | return ; 452 | 453 | d.buttons[d.now].classList.add('selected'); 454 | 455 | }, 456 | 457 | updateClass : function(){ 458 | 459 | const past = d.pages[d.past]; 460 | const pastIndex = past.getAttribute('data-ds-index'); 461 | const pastPage = Number(pastIndex) +1; 462 | const pastId = past.hasAttribute('id') ? past.getAttribute('id') : false; 463 | 464 | const now = d.pages[d.now]; 465 | const nowIndex = now.getAttribute('data-ds-index'); 466 | const nowPage = Number(nowIndex) +1; 467 | const nowId = now.hasAttribute('id') ? now.getAttribute('id') : false; 468 | 469 | d.html.classList.remove('docSlider-index_' + pastIndex); 470 | d.html.classList.remove('docSlider-page_' + pastPage); 471 | d.html.classList.remove('docSlider-id_' + pastId); 472 | 473 | d.html.classList.add('docSlider-index_' + nowIndex); 474 | d.html.classList.add('docSlider-page_' + nowPage); 475 | if(nowId) d.html.classList.add('docSlider-id_' + nowId); 476 | 477 | d.pages[d.past].classList.remove('docSlider-current'); 478 | d.pages[d.now].classList.add('docSlider-current'); 479 | 480 | }, 481 | 482 | keyup : function(e){ 483 | 484 | if(!d.enable) 485 | return; 486 | 487 | if(d.pages[d.now] !== document.activeElement) 488 | return; 489 | 490 | let to; 491 | const key = e.key; 492 | const shift = e.shiftKey; 493 | const page = d.pages[d.now]; 494 | 495 | if((shift && / |Spacebar/.test(key) || !shift && /ArrowUp|Up|PageUp/.test(key)) && u.scrollEnd(page,'top')){ 496 | 497 | to = d.now - 1; 498 | 499 | }else if(!shift && / |Spacebar|ArrowDown|Down|PageDown/.test(key) && u.scrollEnd(page,'bottom')) { 500 | 501 | to = d.now + 1; 502 | 503 | }else if(!shift && key === 'Home'){ 504 | 505 | to = 0; 506 | 507 | }else if(!shift && key === 'End'){ 508 | 509 | to = d.length - 1; 510 | 511 | }else if(!shift && op.horizontal && /ArrowLeft|Left/.test(key)){ 512 | 513 | to = d.now - 1; 514 | 515 | }else if(!shift && op.horizontal && /ArrowRight|Right/.test(key)){ 516 | 517 | to = d.now + 1; 518 | 519 | }else{ 520 | 521 | return; 522 | 523 | } 524 | 525 | if(u.indexCheck(to) === d.now) 526 | return; 527 | 528 | d.type = 'key'; 529 | u.pageChange(to); 530 | 531 | }, 532 | 533 | scrollEnd : function (element,direction) { 534 | 535 | switch (direction) { 536 | case 'top' : return element.scrollTop <= 0; 537 | case 'bottom' : return element.scrollTop >= element.scrollHeight - element.clientHeight; 538 | case 'left' : return element.scrollLeft <= 0; 539 | case 'right' : return element.scrollLeft >= element.scrollWidth - element.clientWidth; 540 | default : return direction; 541 | } 542 | 543 | }, 544 | 545 | wheel : function (e) { 546 | 547 | if(!d.wheelTick) 548 | return; 549 | 550 | requestAnimationFrame(function () { 551 | 552 | d.wheelTick = true; 553 | 554 | if(!d.enable) 555 | return; 556 | 557 | if(!d.wheelEnable) 558 | return; 559 | 560 | const delta = e.deltaY ? -(e.deltaY) : e.wheelDelta ? e.wheelDelta : -(e.detail); 561 | const elms = document[d.fromPoint](e.pageX,e.pageY); 562 | const distance = delta > 0 ? 'top' : 'bottom'; 563 | const to = u.indexCheck(distance === 'top' ? d.now - 1 : d.now + 1); 564 | 565 | if(d.active !== d.pages[d.now]) 566 | return; 567 | 568 | if(to === d.now) 569 | return; 570 | 571 | for(let i = 0; i < elms.length; i ++){ 572 | 573 | const elm = elms[i]; 574 | 575 | if(elm.classList.contains('docSlider-scroll') && !u.scrollEnd(elm,distance)) 576 | return 577 | 578 | } 579 | 580 | d.type = 'scroll'; 581 | u.pageChange(to); 582 | 583 | }); 584 | 585 | d.wheelTick = false; 586 | 587 | }, 588 | 589 | transitionstart : function () { 590 | 591 | d.wheelEnable = false; 592 | 593 | if(op.scrollReset) 594 | u.scrollReset(d.pages[d.now]); 595 | 596 | if(pcr) 597 | u.animationReset(d.past); 598 | 599 | op.beforeChange(d.past, d.pages[d.past], d.now, d.pages[d.now], d.type); 600 | d.pastType = d.type; 601 | d.type = null; 602 | 603 | }, 604 | 605 | transitionend : function () { 606 | 607 | d.wheelEnable = true; 608 | 609 | if(sc) 610 | scrollCue._updateWithDocSlider(); 611 | 612 | op.afterChange(d.now, d.pages[d.now], d.past, d.pages[d.past], d.pastType); 613 | d.pastType = null; 614 | 615 | }, 616 | 617 | resize : function(){ 618 | 619 | if(d.resizeTimer > 0) 620 | clearTimeout(d.resizeTimer); 621 | 622 | d.resizeTimer = setTimeout(u.setFV,200); 623 | 624 | }, 625 | 626 | setFV : function () { 627 | 628 | d.wrapper.style.height = window.innerHeight + ''; 629 | d.wrapper.style.height = window.innerHeight + 'px'; 630 | 631 | }, 632 | 633 | touchstart : function (e) { 634 | 635 | if(!d.enable) 636 | return; 637 | 638 | if(e.touches.length > 1) 639 | return; 640 | 641 | d.touch.move = false; 642 | d.touch.X.start = e.touches[0].pageX; 643 | d.touch.Y.start = e.touches[0].pageY; 644 | 645 | }, 646 | 647 | touchmove : function (e) { 648 | 649 | if(!d.enable) 650 | return; 651 | 652 | if(e.touches.length > 1){ 653 | e.preventDefault(); 654 | return; 655 | } 656 | 657 | d.touch.move = true; 658 | d.touch.X.move = e.changedTouches[0].pageX; 659 | d.touch.Y.move = e.changedTouches[0].pageY; 660 | 661 | }, 662 | 663 | touchend : function (e) { 664 | 665 | if(!d.enable) 666 | return; 667 | 668 | 669 | if(e.touches.length > 1) 670 | return; 671 | 672 | if(!d.touch.move) 673 | return; 674 | 675 | d.touch.X.distance = d.touch.X.move - d.touch.X.start; 676 | d.touch.Y.distance = d.touch.Y.move - d.touch.Y.start; 677 | 678 | if(Math.abs(d.touch[d.xy].distance) < Math.abs(d.touch[d.yx].distance)) 679 | return; 680 | 681 | const np = d.touch[d.xy].distance < 0 ? 'next' : 'prev'; 682 | const to = u.indexCheck(np === 'next' ? d.now + 1 : d.now - 1); 683 | 684 | if(to === d.now) 685 | return; 686 | 687 | if((d.now === 0 && np === 'prev') || (d.now === d.length-1 && np === 'next')) 688 | return; 689 | 690 | const direction = d.touch[np + d.xy]; 691 | const elms = document[d.fromPoint](d.touch.X.start,d.touch.Y.start); 692 | 693 | for(let i = 0; i < elms.length; i++){ 694 | 695 | const elm = elms[i]; 696 | 697 | if(elm.classList.contains('docSlider-scroll') && !u.scrollEnd(elm,direction)) 698 | return; 699 | 700 | } 701 | 702 | d.type = 'scroll'; 703 | u.pageChange(to); 704 | 705 | }, 706 | 707 | scrollReset : function (page){ 708 | 709 | page.scrollTop = 0; 710 | page.scrollLeft = 0; 711 | 712 | }, 713 | 714 | animationReset : function (index){ 715 | 716 | let selector = '[data-scpage][data-show="true"]' 717 | let elms = document.querySelectorAll(selector); 718 | 719 | if(!elms.length) 720 | return false; 721 | 722 | for(let i=0; i < elms.length; i++){ 723 | 724 | let elm = elms[i]; 725 | let classes = elm.getAttribute('data-addClass'); 726 | 727 | if(elm.getAttribute('data-scpage') === index+'') 728 | continue; 729 | 730 | elm.removeAttribute('style'); 731 | elm.removeAttribute('data-show'); 732 | 733 | if(!classes) 734 | continue; 735 | 736 | classes = classes.split(' '); 737 | 738 | for(let j=0; j