1/** 2 * version 2.0 3 * 4 * 5 * ============================================================== 6 * Triggers 7 * ============================================================== 8 * 9 * initialized.the-in-scroll 10 * refresh.the-in-scroll 11 * refreshed.the-in-scroll 12 * up-pos.the-in-scroll 13 * down-pos.the-in-scroll 14 * 15 * пÑимеÑ: 16 * $('.the-in-scroll').on( 'up-pos.the-in-scroll', function( event, data ){ ... }) 17 18 * data = { 19 * eventType : "up-pos" 20 * plugin : plugin element 21 * scroliing : 50 - позиÑÐ¸Ñ ÑÑÑола в % 22 * scroller : { 23 * position : { 24 * pc : 34, - позиÑÐ¸Ñ ÐºÐ°ÑÑомного ÑÑÑоллеÑа в % 25 * px : 40, - позиÑÐ¸Ñ ÐºÐ°ÑÑомного ÑÑÑоллеÑа в px 26 * } 27 * size : { 28 * pc : 34, - ÑÐ°Ð·Ð¼ÐµÑ ÐºÐ°ÑÑомного ÑÑÑоллеÑа в % 29 * px : 40, - ÑÐ°Ð·Ð¼ÐµÑ ÐºÐ°ÑÑомного ÑÑÑоллеÑа в px 30 * } 31 * } 32 * content : { 33 * position : { 34 * pc : 34, - позиÑÐ¸Ñ Ð¿ÑоÑкÑола конÑенÑа в % 35 * px : 40, - позиÑÐ¸Ñ Ð¿ÑоÑкÑола конÑенÑа в px 36 * } 37 * } 38 * scrollingline : { 39 * size : { 40 * px : 40, - ÑÐ°Ð·Ð¼ÐµÑ ÐºÐ°ÑÑомной полоÑÑ Ð¿ÑокÑÑÑки в px 41 * } 42 * } 43 * } 44 * 45 * 46 * ============================================================== 47 * Listener 48 * ============================================================== 49 * 50 * СкÑоллинг до нÑжной позиÑии 51 * 52 * scroll-to.the-in-scroll - ÑкÑоллинг до пеÑеданной позиÑии 53 * @param { number | string } position - позиÑÐ¸Ñ Ð´Ð»Ñ Ð´Ð¾ÑкÑола, пÑÐ¸Ð½Ð¸Ð¼Ð°ÐµÑ ÑиÑло, ÑÑÑокÑ-ÑиÑло или ÑÑÑÐ¾ÐºÑ Ñо знаком "%" в конÑе - ÐÐЯÐÐТÐÐЬÐЫРпаÑамеÑÑ 54 * @param { number } duration - вÑÐµÐ¼Ñ Ð°Ð½Ð¸Ð¼Ð°Ñии ÑкÑолла, по ÑмÑоÑÐ°Ð½Ð¸Ñ [ 500 ] 55 * 56 * scroll-up.the-in-scroll - ÑкÑоллинг в наÑало 57 * @param { number | string } position - позиÑÐ¸Ñ Ð´Ð»Ñ Ð´Ð¾ÑкÑола, пÑÐ¸Ð½Ð¸Ð¼Ð°ÐµÑ ÑиÑло, ÑÑÑокÑ-ÑиÑло или ÑÑÑÐ¾ÐºÑ Ñо знаком "%" в конÑе - не обÑзаÑелÑнÑй паÑамеÑÑ 58 * @param { number } duration - вÑÐµÐ¼Ñ Ð°Ð½Ð¸Ð¼Ð°Ñии ÑкÑолла, по ÑмÑоÑÐ°Ð½Ð¸Ñ [ 500 ] 59 * 60 * scroll-down.the-in-scroll - ÑкÑоллинг в ÐºÐ¾Ð½ÐµÑ 61 * @param { number | string } position - позиÑÐ¸Ñ Ð´Ð»Ñ Ð´Ð¾ÑкÑола, пÑÐ¸Ð½Ð¸Ð¼Ð°ÐµÑ ÑиÑло, ÑÑÑокÑ-ÑиÑло или ÑÑÑÐ¾ÐºÑ Ñо знаком "%" в конÑе - не обÑзаÑелÑнÑй паÑамеÑÑ 62 * @param { number } duration - вÑÐµÐ¼Ñ Ð°Ð½Ð¸Ð¼Ð°Ñии ÑкÑолла, по ÑмÑоÑÐ°Ð½Ð¸Ñ [ 500 ] 63 * 64 * паÑамеÑÑÑ: { number | string } [, { number } ] 65 * пÑимеÑÑ: 66 * $('.the-in-scroll').trigger( 'scroll-to.the-in-scroll', [ 50 ] ) - px size 67 * $('.the-in-scroll').trigger( 'scroll-up.the-in-scroll', [ 50, 100] ) - px size, duration animation 68 * $('.the-in-scroll').trigger( 'scroll-down.the-in-scroll', [ '50%' ] ) - percent size 69 * $('.the-in-scroll').trigger( 'scroll-to.the-in-scroll', [ '50%', 100 ] ) - percent size, duration animation 70 * 71 * -------------------------------------------------------------- 72 * add-scrolling-trigger.the-in-scroll 73 * -------------------------------------------------------------- 74 * 75 * Ðобавление ÑÑигеÑа пÑокÑÑÑки болÑÑе или менбÑе позиÑии ÑкÑола 76 * 77 * ÐÑÐ¸Ð½Ð¸Ð¼Ð°ÐµÑ 2-7 паÑамеÑÑов или обÑÐµÐºÑ Ñ Ð¿Ð°ÑамеÑÑами, обÑзаÑелÑнÑе пеÑвÑе 2 паÑамеÑÑа ( name и position ) 78 * 79 * @param { string } name - пÑÐ¸Ð½Ð¸Ð¼Ð°ÐµÑ ÑÑÑÐ¾ÐºÑ - название ÑÑигеÑа 80 * @param { number | string } position - позиÑÐ¸Ñ Ð´Ð»Ñ ÑÑабаÑÑваниÑ, пÑÐ¸Ð½Ð¸Ð¼Ð°ÐµÑ ÑиÑло, ÑÑÑокÑ-ÑиÑло или ÑÑÑÐ¾ÐºÑ Ñо знаком "%" в конÑе 81 * @param { '<', '>' } sign - знак Ð´Ð»Ñ ÑÑловиÑ, по ÑмолÑÐ°Ð½Ð¸Ñ [ ">" ] 82 * @param { boolean } down - Ñлаг - оÑÑÑÐµÑ Ð²ÐµÑÑи Ð¾Ñ Ð½Ð¸Ð·Ð°, по ÑмолÑÐ°Ð½Ð¸Ñ [ false ] 83 * @param { boolean } everytime - Ñлаг - ÑÑабаÑÑваÑÑ Ð¾Ð´Ð¸Ð½ Ñаз за попадание в облаÑÑÑ, вÑоÑой Ñаз ÑÑабоÑÐ°ÐµÑ Ð¿Ð¾Ñле вÑÑ Ð¾Ð´Ð° из облаÑÑи, по ÑмолÑÐ°Ð½Ð¸Ñ [ false ] 84 * @param { boolean } move - Ñлаг - ÑÑÐ¸Ð³ÐµÑ ÑÑабоÑÐ°ÐµÑ ÑолÑко пÑи изменении пÑокÑÑÑки, по ÑмолÑÐ°Ð½Ð¸Ñ [ false ] 85 * @param { boolean } once - Ñлаг - ÑÑÐ¸Ð³ÐµÑ ÑÑабоÑÐ°ÐµÑ Ð¾Ð´Ð¸Ð½ Ñаз и бÑÐ´ÐµÑ Ñдален, по ÑмолÑÐ°Ð½Ð¸Ñ [ false ] 86 * 87 * паÑамеÑÑÑ: { string }, { number | string } [, { '<', '>' }, { boolean }, { boolean }, { boolean }, { boolean } ] 88 * пÑимеÑÑ: 89 * $('.the-in-scroll').trigger( 'add-scrolling-trigger.the-in-scroll', [ 'trigger-name', 100, ); 90 * $('.the-in-scroll').trigger( 'add-scrolling-trigger.the-in-scroll', [ 'trigger-name', 100, '<', true ] ); 91 * $('.the-in-scroll').trigger( 'add-scrolling-trigger.the-in-scroll', [ 'trigger-name', 100, '<', false, false, true ] ); 92 * $('.the-in-scroll').trigger( 'add-scrolling-trigger.the-in-scroll', [ 'trigger-name', 100, '<', false, false, false, true ] ); 93 * 94 * пÑÐ¸Ð¼ÐµÑ Ñ Ð¾Ð±ÑекÑом паÑамеÑÑов : 95 * $('.live.js__custom-scroll').trigger('add-scrolling-trigger.the-in-scroll', [ { 96 * name: 'trigger-name', 97 * position: 1, 98 * sign: '<', 99 * down: false, 100 * everytime: true, 101 * move: true, 102 * once: false 103 * } ]); 104 * 105 * -------------------------------------------------------------- 106 * clear-content.the-in-scroll 107 * -------------------------------------------------------------- 108 * 109 * Удаление конÑенÑа 110 * 111 * паÑамеÑÑÑ: [ { boolean }, { number } ] - Ð½ÐµÑ Ð¾Ð±ÑзаÑелÑнÑÑ Ð¿Ð°ÑамеÑÑов 112 * пÑимеÑÑ: 113 * $('.the-in-scroll').trigger('clear-content.the-in-scroll') - пÑоÑÑо ÑÐ´Ð°Ð»Ð¸Ñ ÐºÐ¾Ð½ÑÐµÐ½Ñ 114 * $('.the-in-scroll').trigger('clear-content.the-in-scroll', [ true ] ) - ÑÐ´Ð°Ð»Ð¸Ñ ÑеÑез slideUp Ñо ÑкоÑоÑÑÑÑ Ð¿Ð¾ ÑмолÑÐ°Ð½Ð¸Ñ ÑÑÑановленнÑÑ Ð² плагине [ 500 ] 115 * $('.the-in-scroll').trigger('clear-content.the-in-scroll', [ true, 3000 ] ) - ÑÐ´Ð°Ð»Ð¸Ñ ÑеÑез slideUp Ñо ÑкоÑоÑÑÑÑ 3000 116 * 117 * -------------------------------------------------------------- 118 * add-content.the-in-scroll 119 * -------------------------------------------------------------- 120 * 121 * Ðобавление конÑенÑа 122 * 123 * @param { object | string } - пÑÐ¸Ð½Ð¸Ð¼Ð°ÐµÑ Ð¾Ð±ÑÐµÐºÑ Ð¸Ð»Ð¸ ÑÑÑÐ¾ÐºÑ Ð¾Ð±ÑзаÑелÑно ÑоÑÑоÑÑÑÑ Ð¸Ð· Ñега, коÑоÑÑÑ Ñам пÑеобÑазÑÐµÑ Ð² обÑÐµÐºÑ 124 * @param { boolean } - Ñлаг добавиÑÑ Ð¿ÐµÑед, пÑÐ¸Ð½Ð¸Ð¼Ð°ÐµÑ true или false 125 * @param { boolean } - добавиÑÑ ÑеÑез slideDown Ñо ÑкоÑоÑÑÑÑ Ð¿Ð¾ ÑмолÑÐ°Ð½Ð¸Ñ [500] 126 * @param { number } - ÑкоÑоcÑÑ Ð´Ð»Ñ Ð´Ð¾Ð±Ð°Ð²Ð»ÐµÐ½Ð¸Ñ ÑеÑез slideDown 127 * паÑамеÑÑÑ: { object | string } [ , { boolean }, { boolean }, { number } ] - обÑзаÑелÑнÑм ÑвлÑеÑÑÑ ÑолÑко пеÑвÑй паÑамеÑÑ 128 * 129 * пÑимеÑÑ: 130 * $('.live').trigger('add-content.the-in-scroll', [ '<div>dasdasd</div>', true, true, 5000 ]) 131 * $('.live').trigger('add-content.the-in-scroll', [ $object, true, true, 5000 ]) 132 * 133 * -------------------------------------------------------------- 134 * 135 * 136 * */ 137 138 139;(function ( $, window, document, undefined ) { 140 141 var theinScroll = function(el, options){ 142 143 var defaults = { 144 145 show: true, // visibility custom scroll [ true ], false 146 theme: "default", // theme custom sctoll [ "default" ], "default-light" 147 rtl: false, // right to left text direction [ false ] / true 148 reservePlace: false, // reserve place for custom scroll [ false ], true 149 autoHide: true, // auto hide custom scroll when losing hover [ true ], false 150 otherDirection: false, // display custom scroll from the other side than text direction [ false ], true 151 addingIndent: 10, // additional indent for hiding the real scroll element [
15110 ], number 152 scrollingDuration: 250, // duration scrolling animation [ 250 ], number 153 slideDuration: 500, // add and clear content slide duration [ 500 ], number 154 155 buttons: { 156 up: false, // view up button [ false ], true, any characters 157 scrollingUpSize: '100', // the value of the scroll content in px [ '100' ], any number 158 down: false, // view down button [ false ], true, any characters 159 scrollingDownSize: '100' // the value of the scroll content in px [ '100' ], any number 160 }, 161 162 endValues: { 163 up: false, // end display unit scroll up [ false ], true, any characters 164 down: false // end display unit scroll down [ false ], true, any characters 165 }, 166 167 classes : { 168 main : "the-in-scroll", 169 active: "m-active", 170 banSelect: "the-in__ban-drag-select", 171 banScroll: "the-in__ban-scroll" 172 }, 173 174 triggers : { 175 'all' : false, 176 'initialized' : true, 177 'refresh' : true, 178 'refreshed' : true, 179 'up-pos' : true, 180 'down-pos' : true 181 } 182 183 }; 184 185 /** 186 * @create { object } this.$element - main element 187 * @create { object } this.defOptions - default options 188 * @create { object } this.userOptions - user options 189 * @create { object } this.options - extend options 190 * */ 191 var _this = this; 192 _this.$element = $(el); 193 _this.defOptions = defaults; 194 _this.userOptions = options; 195 _this.options = $.extend(true, {}, defaults, options); 196 /** 197 * Origin element 198 * @protected 199 */ 200 _this._origin = false; 201 202 /** reserved names */ 203 _this.prefix = ''; 204 _this.pluginNumber = 0; 205 _this.frameResize = false; 206 207 _this.$wrBox = false; 208 _this.$box = false; 209 _this.$boxFrame = false; 210 _this.$container = false; 211 _this.$containerFrame = false; 212 _this.$content = false; 213 _this.$upEndValue = false; 214 _this.$downEndValue = false; 215 _this.$scroll = false; 216 _this.$scrollLine = false; 217 _this.$scroller = false; 218 _this.$scrollerTheme = false; 219 220 _this.addedTriggers = false; 221 222 _this.widthDefaultScroll = null; 223 _this.percentSizeScroller = null; 224 _this.stateScrollbarReservePlace = null; 225 _this.widthCustomScroll = null; 226 _this.percentSizeScroller = null; 227 _this.pxSizeScroller = null; 228 _this.sizeScrollLine = null; 229 _this.topPercentScrollContent = null; 230 _this.topPxScrollContent = null; 231 _this.topPercentScroller = null; 232 _this.topPxScroller = null; 233 _this.scrollingPercentage = null; 234 235 _this.startMoveScrollerPosition = null; 236 _this.currentMoveScrollerPosiiton = null; 237 _this.currentTopMoveScroller = null; 238 _this.startMoveYPosition = null; 239 240 this.init(); 241 }; 242 /** 243 * @update { String } this.prefix - пеÑÑÐ¸ÐºÑ ÐºÐ»Ð°ÑÑов 244 * @update { String } this.pluginNumber - ÑникалÑнÑй клаÑÑ Ñ Ð½Ð¾Ð¼ÐµÑом плагина 245 * @update { Object } this._origin - ÑÐ¾Ñ ÑÐ°Ð½Ð½ÐµÐ½Ð½Ð°Ñ ÑеалÑÐ½Ð°Ñ Ð²ÐµÑÑÑка 246 * */ 247 theinScroll.prototype.init = function(){ 248 var _this = this; 249 // create prefix classes 250 _this.prefix = _this.options.classes.main+'__'; 251 // create a unique name 252 _this.pluginNumber = _this.prefix + $.now(); 253 // save origin html 254 _this._origin = _this.$element.clone( true ); 255 // detach content, add a new html, creation of selectors, return content and hide default scroll 256 _this.createMainHTML(); 257 // create block end value scroll 258 _this.updateEndValues(); 259 // create html custom scroll 260 if(_this.options.show) { 261 // add settings classes 262 if ( _this.options.autoHide ) _this.$element.addClass( _this.prefix + 'autohide' ); 263 if ( _this.options.otherDirection ) _this.$element.addClass( _this.prefix + 'direction' ); 264 if ( _this.options.reservePlace ) _this.$element.addClass(_this.prefix + 'reserve'); 265 // create new custom scroll 266 _this.createCustomScroll(); 267 } 268 // update status 269 _this.refresh(); 270 // register events and listener 271 _this.registerEvents(); 272 _this.registerEventsListener(); 273 // trigger initialized 274 if ( _this.options.triggers.all || _this.options.triggers.initialized ) _this.setTrigger( 'initialized' ) 275 }; 276 277 theinScroll.prototype.registerEvents = function(){ 278 var _this = this; 279 // resize box 280 window[ _this.pluginNumber + '__box' ].onresize = function(){ 281 /* TODO remove */ //console.log('resize Frame update BOX '); 282 _this.resizeFrameRefresh(); 283 }; 284 // resize container
285 window[ _this.pluginNumber + '__container' ].onresize = function(){ 286 /* TODO remove */ //console.log('resize Frame update CONTAINER'); 287 _this.resizeFrameRefresh(); 288 }; 289 // scroll 290 _this.$box.bind( 'scroll' ,function(){ 291 /* TODO remove */ //console.log('scroll update'); 292 _this.refresh(); 293 }); 294 _this.$scroller.on( "touchstart mousedown", function( event ) { 295 if ( event.type == "touchstart" ) { 296 _this.bindMoveScroller( event.originalEvent.touches[ 0 ].clientY || event.originalEvent.changedTouches[ 0 ].clientY ); 297 } else if( event.type == "mousedown" && event.button == 0 ){ 298 _this.bindMoveScroller( event.pageY ); 299 } 300 // оÑменÑем "вÑплÑÑие ÑообÑений", ÑÑÐ¾Ð±Ñ Ð½Ðµ вÑзÑвалÑÑ ÐºÐ»Ð¸Ðº на ÑаÑ-ÑÑÑÑойÑÑÐ²Ð°Ñ . 301 event.stopPropagation(); 302 event.preventDefault(); 303 }); 304 // mouse up on screen 305 $( window ).on( 'touchend mouseup', function( event ){ 306 if ( event.type == "touchend" || event.type == "mouseup" && event.button == 0) { 307 _this.unbindMoveScroller( event ); 308 } 309 }); 310 }; 311 312 theinScroll.prototype.registerEventsListener = function(){ 313 var _this = this; 314 _this.$element.on( 'scroll-to.' + _this.options.classes.main , function( event, position, duration ){ 315 //console.log('--- scroll-to position= '+ position + ' - duration = '+ duration); 316 _this.scrollTo( position, duration ); 317 }); 318 _this.$element.on( 'scroll-up.' + _this.options.classes.main , function( event, position, duration ){ 319 //console.log('scroll-up position= '+ position + ' - duration = '+ duration); 320 _this.scrollUp( position, duration ); 321 }); 322 _this.$element.on( 'scroll-down.' + _this.options.classes.main , function( event, position, duration ){ 323 //console.log('scroll-down position= '+ position + ' - duration = '+ duration); 324 _this.scrollDown( position, duration ); 325 }); 326 _this.$element.on( 'add-scrolling-trigger.' + _this.options.classes.main , function( event, name, position, sign, down, everytime, move, once ){ 327 _this.addScrollingTrigger( name, position, sign, down, everytime, move, once ); 328 }); 329 _this.$element.on( 'add-content.' + _this.options.classes.main , function( event, content, prep, slide, duration ){ 330 _this.addContent( content, prep, slide, duration ) 331 }); 332 _this.$element.on( 'clear-content.' + _this.options.classes.main , function( event, slide, duration ){ 333 _this.clearContent( slide, duration ) 334 }); 335 }; 336 337 /** 338 * @update { object } this._origin 339 * @update { string } this.pluginNumber 340 * @update { object } this.$wrBox 341 * @update { object } this.$box 342 * @update { object } this.$container 343 * @update { object } this.$frame 344 * */ 345 theinScroll.prototype.createMainHTML = function(){ 346 var _this = this; 347 // add base and theme classes 348 _this.$element 349 .addClass( _this.options.classes.main ) 350 .addClass( _this.prefix + _this.options.theme ); 351 // create html 352 _this.$wrBox = $( '<div class="' + _this.prefix + 'wr-box"></div>' ); 353 _this.$box = $( '<div class="' + _this.prefix + 'box"></div>' ); 354 _this.$container = $( '<div class="' + _this.prefix + 'container"></div>' ); 355 _this.$content = $( '<div class="' + _this.prefix + 'content"></div>' ); 356 // add attr "title" on iframe for test LightHouse #RIA2018-2783 357 _this.$boxFrame = $( '<iframe title="scroll" name="' + _this.pluginNumber + '__box" class="' + _this.prefix + 'frame"></iframe>' ); 358 _this.$containerFrame = $( '<iframe title="scroll" name="' + _this.pluginNumber + '__container" class="' + _this.prefix + 'frame"></iframe>' ); 359 _this.$element 360 .empty() 361 .css ( 'overflow', 'hidden' ) 362 .append( _this.$wrBox.append( _this.$box.append( _this.$boxFrame , _this.$container.append( _this.$containerFrame, _this.$content ) ) ) ); 363 // hide default scroll 364 _this.hideDefaultScroll(); 365 // return content 366 _this.$content.append( _this._origin.clone( true )[ 0 ].childNodes ); 367 }; 368 369 /** 370 * @update { object } this.$upEndValue 371 * @update { object } this.$downEndValue 372 * */ 373 theinScroll.prototype.updateEndValues = function(){ 374 var _this = this; 375 376 if ( _this.options.endValues.up ){ 377 if ( !_this.$upEndValue ) _this.$upEndValue = $( '<div class="' + _this.prefix + 'end-value ' + _this.prefix + 'up-end-value"></div>' ); 378 _this.$upEndValue.append( _this.options.endValues.up != true ? _this.options.endValues.up : '' ); 379 _this.$wrBox.append( _this.$upEndValue ); 380 } 381 382 if ( _this.options.endValues.down ){ 383 if ( !_this.$downEndValue ) _this.$downEndValue = $( '<div class="' + _this.prefix + 'end-value ' + _this.prefix + 'down-end-value"></div>' ); 384 _this.$downEndValue.append( _this.options.endValues.down != true ? _this.options.endValues.down : '' ); 385 _this.$wrBox.append( _this.$downEndValue ); 386 } 387 388 }; 389 390 /** 391 * @update { object } this.$scroll 392 * @update { object } this.$scrollLine 393 * @update { object } this.$scroller 394 * @update { object } this.$scrollerTheme 395 * @event this.$scroll.contextmenu - ban context menu on scrollbar 396 * @event this.$buttonUp.click - change _this.$box.scrollTop 397 * @event this.$buttonDown.click - change _this.$box.scrollTop 398 * */ 399 theinScroll.prototype.createCustomScroll = function(){ 400 var _this = this; 401 402 _this.$scroll = $( '<div class="' + _this.prefix + 'scroll"></div>' ); 403 _this.$scrollLine = $( '<div class="' + _this.prefix + 'scroll-line"></div>' ); 404 _this.$scroller = $( '<div class="' + _this.prefix + 'scroller"></div>' ); 405 _this.$scrollerTheme = $( '<div class="' + _this.prefix + 'scroller-theme"></div>' ); 406 _this.$element.append( _this.$scroll.append( _this.$scrollLine.append( _this.$scroller.append( _this.$scrollerTheme ) ) ) ); 407 // ban context menu on scroll bar 408 _this.$scroll.bind( 'contextmenu', function(){ 409 return false;
410 }); 411 // click on scroll line for scrolling 412 _this.$scrollLine.bind( 'click', _this, _this.scrollingByClickOnScrolline ); 413 // add up button 414 if ( _this.options.buttons.up ){ 415 _this.$buttonUp = $( '<a class="' +_this.prefix+ 'button ' + _this.prefix + 'button-up"></a>' ); 416 _this.$buttonUp.append( _this.options.buttons.up != true ? _this.options.buttons.up : $( '<span class="' + _this.prefix + 'icon"></span>' ) ); 417 _this.$scroll.append( _this.$buttonUp ).addClass( _this.prefix + 'with-up' ); 418 _this.$buttonUp.click( function(){ 419 _this.$box.scrollTop( _this.$box.scrollTop() - parseInt( _this.options.buttons.scrollingUpSize ) ); 420 }); 421 } 422 // add up button 423 if ( _this.options.buttons.down ){ 424 _this.$buttonDown = $( '<a class="' +_this.prefix+ 'button ' + _this.prefix + 'button-down"></a>' ); 425 _this.$buttonDown.append( _this.options.buttons.down != true ? _this.options.buttons.down : $( '<span class="' + _this.prefix + 'icon"></span>' ) ); 426 _this.$scroll.append( _this.$buttonDown ).addClass( _this.prefix + 'with-down' ); 427 _this.$buttonDown.click( function(){ 428 _this.$box.scrollTop( _this.$box.scrollTop() + parseInt(_this.options.buttons.scrollingDownSize) ); 429 }); 430 } 431 }; 432 433 /** 434 * Update all params 435 * */ 436 theinScroll.prototype.refresh = function(){ 437 var _this = this; 438 if ( _this.options.triggers.all || _this.options.triggers.refresh ) _this.setTrigger( 'refresh' ); 439 _this.hideDefaultScroll(); 440 if( _this.options.show ) { 441 _this.reservePlaceScroll(); 442 _this.setSizeScroller(); 443 _this.setTopScroller(); 444 } 445 _this.scrollingPercentage = _this.getScrollingPercentage(); 446 _this.checkExtremePositionScroller(); 447 _this.checkAddedTriggers(); 448 if ( _this.options.triggers.all || _this.options.triggers.refreshed ) _this.setTrigger( 'refreshed' ); 449 }; 450 451 /** 452 * @param { number | string } to scrolling position 453 * @param { number } duration animation 454 * */ 455 theinScroll.prototype.scrollUp = function( position, duration ){ 456 //console.log( position + ' '+ duration); 457 this.scrollTo( !position ? 0 : position, duration ); 458 }; 459 460 /** 461 * @param { number | string } to scrolling position 462 * @param { number } duration animation 463 * */ 464 theinScroll.prototype.scrollDown = function( position, duration ){ 465 var _this = this; 466 if ( !position || _this.$container.height() < _this.$box.height() ){ 467 position = '100%'; 468 } else { 469 position = this.toNumber(position); 470 if ( position !== false ){ 471 position = _this.$container.height() - position - _this.$box.height(); 472 } else { 473 position = '100%'; 474 } 475 } 476 _this.scrollTo( position, duration ); 477 }; 478 479 /** 480 * @param { number | string } to scrolling position 481 * @param { number } duration animation 482 * */ 483 theinScroll.prototype.scrollTo = function( position, duration ){ 484 //console.log(' scrollTo = '+position+' dur = '+duration); 485 position = this.toNumber( position ); 486 if ( position && position >= 0 || position == 0 ) { 487 // console.log('===== scrollTo = '+position); 488 var _this = this, 489 duration = ( duration == 0 || ( duration && duration >= 0 ) ) ? duration : _this.options.scrollingDuration; 490 //console.log('===== duration = '+duration); 491 _this.$box.stop().animate({ 492 scrollTop: position 493 }, duration); 494 } 495 }; 496 497 theinScroll.prototype.toNumber = function( number ){ 498 var _this = this; 499 if ( !number ){ 500 return false; 501 } else if ( typeof number == 'number' ){ 502 return number >= 0 ? number : 0; 503 } else if ( typeof number == 'string' ){ 504 if ( number.indexOf( '%' ) >= 0 ){ 505 var percent = parseInt( number.slice( 0, number.indexOf( '%' ) ) ), 506 size = ( _this.$container.height() >= _this.$box.height() ) ? _this.$container.height() - _this.$box.height() : 0; 507 return ( size / 100 * ( percent < 0 ? 0 : percent > 100 ? 100 : percent ) ); 508 } else { 509 if ( parseInt( number ) >= 0 ) { 510 return parseInt( number ); 511 } else { 512 return false;
513 } 514 } 515 } 516 return false; 517 }; 518 519 /** 520 * @update { boolean } this.frameResize 521 * */ 522 theinScroll.prototype.resizeFrameRefresh = function(){ 523 var _this = this; 524 if ( !_this.frameResize ) _this.refresh(); 525 _this.frameResize = true; 526 setTimeout(function(){ 527 _this.frameResize = false; 528 }, 10); 529 }; 530 531 /** 532 * @update { number } this.startMoveScrollerPosition 533 * @update { number } this.currentMoveScrollerPosiiton 534 * @update { number } this.startMoveYPosition 535 * */ 536 theinScroll.prototype.bindMoveScroller = function( positionY ){ 537 var _this = this; 538 _this.$scroller.addClass( _this.options.classes.active ); 539 _this.startMoveScrollerPosition = parseInt( _this.$scroller.css( 'top' ) ); 540 _this.currentMoveScrollerPosiiton = _this.startMoveScrollerPosition; 541 _this.startMoveYPosition = positionY; 542 if ( event.type == 'touchstart' ){ 543 _this.banScroll(); 544 $(window).bind( 'touchmove.the-in__scroll', _this, _this.dragScroller ); 545 } else if ( event.type == 'mousedown' ){ 546 _this.banDragSelect(); 547 $(window).bind( 'mousemove.the-in__scroll', _this, _this.dragScroller ); 548 } 549 }; 550 551 theinScroll.prototype.unbindMoveScroller = function( event ){ 552 var _this = this; 553 _this.$scroller.removeClass( _this.options.classes.active ); 554 if ( event.type == "touchend" ) { 555 _this.banScroll( false ); 556 $(window).unbind( 'touchmove.the-in__scroll', _this.dragScroller ); 557 } else if( event.type == "mouseup" && event.button == 0 ){ 558 _this.banDragSelect( false ); 559 $(window).unbind( 'mousemove.the-in__scroll', _this.dragScroller ); 560 } 561 }; 562 563 /** 564 * @update { number } this.currentTopMoveScroller 565 * */ 566 theinScroll.prototype.dragScroller = function( event ){ 567 var _this = event.data, 568 pageY = _this.startMoveScrollerPosition; 569 if ( event.type == 'mousemove' ){ 570 pageY = event.pageY; 571 } else if ( event.type == 'touchmove' ){ 572 pageY = event.originalEvent.touches[ 0 ].clientY || event.originalEvent.changedTouches[ 0 ].clientY 573 } 574 var newTopMoveScroller = _this.startMoveScrollerPosition - ( _this.startMoveYPosition - pageY ), 575 scrollingMaxLimit = _this.$scrollLine.height() - _this.pxSizeScroller; 576 if( newTopMoveScroller <= 0 ){ 577 newTopMoveScroller = 0; 578 } else if( newTopMoveScroller >= scrollingMaxLimit ){ 579 newTopMoveScroller = scrollingMaxLimit; 580 } 581 if ( _this.currentTopMoveScroller != newTopMoveScroller ){
582 _this.$scroller.css( 'top', newTopMoveScroller ); 583 _this.currentTopMoveScroller = newTopMoveScroller; 584 _this.setScrollContent(); 585 } 586 }; 587 588 theinScroll.prototype.scrollingByClickOnScrolline = function(event){ 589 var _this = event.data, 590 scrollerUpperBound = _this.$scroller.offset().top, 591 scrollerLowerBound = scrollerUpperBound + _this.$scroller.outerHeight(), 592 mouseClick = event.pageY; 593 if ( mouseClick <= scrollerUpperBound ) { 594 _this.$box.scrollTop( _this.$box.scrollTop() - _this.$box.height() * 0.85 ); 595 } 596 if ( mouseClick >= scrollerLowerBound ) { 597 _this.$box.scrollTop( _this.$box.scrollTop() + _this.$box.height() * 0.85 ); 598 } 599 }; 600 601 /** 602 * @update { number } this.widthDefaultScroll 603 * */ 604 theinScroll.prototype.hideDefaultScroll = function(){ 605 var _this = this, 606 widthDefaultScroll = Math.ceil( _this.$box.width() - _this.$container.outerWidth( true ) ); 607 // recalculate the size if default width scroll line changed 608 if ( _this.widthDefaultScroll != widthDefaultScroll ){ 609 _this.widthDefaultScroll = widthDefaultScroll; 610 611 if ( _this.options.rtl ) { 612 _this.$element.addClass( _this.prefix + 'rtl' ); 613 _this.$box.css( 'margin-left', -( _this.widthDefaultScroll ) - _this.options.addingIndent ).css( 'margin-right', 0 ); 614 } else { 615 _this.$element.removeClass( _this.prefix + 'rtl' ); 616 _this.$box.css( 'margin-right', -( _this.widthDefaultScroll ) - _this.options.addingIndent ).css( 'margin-left', 0 ); 617 } 618 619 } 620 }; 621 622 /** 623 * @update { number } this.stateScrollbarReservePlace 624 * @update { number } this.widthCustomScroll 625 * */ 626 theinScroll.prototype.reservePlaceScroll = function(){ 627 var _this = this, 628 629 widthCustomScroll = Math.ceil( _this.$scroll.outerWidth( true ) ), 630 stateScrollbarReservePlace = _this.options.reservePlace; 631 632 if ( _this.widthCustomScroll != widthCustomScroll || _this.stateScrollbarReservePlace != stateScrollbarReservePlace ){ 633 634 _this.widthCustomScroll = widthCustomScroll; 635 _this.stateScrollbarReservePlace = stateScrollbarReservePlace; 636 637 if ( _this.options.reservePlace ){ 638 var endValueCss, 639 boxPadding = ( _this.widthCustomScroll + _this.options.addingIndent ) + 'px' ; 640 if ( ( _this.options.rtl && !_this.options.otherDirection ) 641 || ( !_this.options.rtl && _this.options.otherDirection ) ) { 642 _this.$box.css( 'padding-left', boxPadding ); 643 endValueCss = { 644 'left' : _this.widthCustomScroll + 'px', 645 'right': '0' 646 }; 647 if ( _this.$upEndValue ) _this.$upEndValue.css( endValueCss ); 648 if ( _this.$downEndValue ) _this.$downEndValue.css( endValueCss ); 649 } else { 650 _this.$box.css( 'padding-right', boxPadding ); 651 endValueCss = { 652 'right' : _this.widthCustomScroll + 'px', 653 'left': '0' 654 }; 655 if ( _this.$upEndValue ) _this.$upEndValue.css( endValueCss ); 656 if ( _this.$downEndValue ) _this.$downEndValue.css( endValueCss ); 657 } 658 } else { 659 _this.$box 660 .css('padding','0') 661 .css( _this.options.rtl ? 'padding-left' : 'padding-right' , _this.options.addingIndent + 'px' ); 662 if ( _this.$upEndValue ){ 663 _this.$upEndValue.css({ 664 'right': '0', 665 'left' : '0' 666 }) 667 } 668 if ( _this.$downEndValue ){ 669 _this.$downEndValue.css({ 670 'right': '0', 671 'left' : '0' 672 }) 673 } 674 } 675 } 676 }; 677 678 /** 679 * @update { number } this.percentSizeScroller 680 * @update { number } this.pxSizeScroller 681 * @update { number } this.sizeScrollLine 682 * */ 683 theinScroll.prototype.setSizeScroller = function(){ 684 var _this = this, 685 percentSizeScroller = ( _this.$box.height() * 100 ) / _this.$container.outerHeight( true ); 686 if ( _this.percentSizeScroller != percentSizeScroller ) { 687 _this.percentSizeScroller = percentSizeScroller; 688 if (_this.percentSizeScroller >= 100) { 689 _this.percentSizeScroller = 100; 690 if ( !_this.options.reservePlace ) { 691 _this.$scroll.hide(); 692 } 693 } else { 694 _this.$scroll.show(); 695 } 696 _this.sizeScrollLine = _this.$scrollLine.height(); 697 _this.pxSizeScroller = Math.floor( ( _this.percentSizeScroller * _this.$scrollLine.height() ) / 100 ); 698 _this.$scroller.outerHeight(_this.pxSizeScroller + 'px'); 699 } 700 }; 701 702 /** 703 * @update { number } this.topPercentScroller 704 * @update { number } this.topPxScroller 705 * */ 706 theinScroll.prototype.setTopScroller = function(){ 707 var _this = this; 708 /* TODO remove */ //console.log('setTopScroller'); 709 _this.topPxScrollContent = _this.$box.scrollTop(); 710 _this.topPercentScroller = _this.topPercentScrollContent = ( _this.$box.scrollTop() * 100 ) / _this.$container.outerHeight( true ); 711 _this.topPxScroller = Math.floor( ( _this.topPercentScroller * _this.$scrollLine.height() ) / 100 );
712 _this.$scroller.css( 'top', _this.topPxScroller + 'px' ); 713 }; 714 715 /** 716 * @update { number } this.topPercentScrollContent 717 * @update { number } this.topPxScrollContent 718 * */ 719 theinScroll.prototype.setScrollContent = function(){ 720 var _this = this; 721 _this.topPercentScrollContent = ( parseInt( _this.$scroller.css( 'top' ) ) * 100 ) / _this.$scrollLine.outerHeight( true ); 722 _this.topPxScrollContent = Math.ceil( ( _this.topPercentScrollContent * _this.$container.height() ) / 100 ); 723 _this.$box.scrollTop( _this.topPxScrollContent ); 724 }; 725 726 theinScroll.prototype.checkExtremePositionScroller = function(){ 727 var _this = this; 728 if (_this.$box.scrollTop() == 0) { 729 _this.$element.addClass( _this.prefix + 'up-pos' ); 730 if ( _this.options.triggers.all || _this.options.triggers['up-pos'] ) _this.setTrigger( 'up-pos' ); 731 } else { 732 _this.$element.removeClass( _this.prefix + 'up-pos' ); 733 } 734 if ( ( _this.$box.scrollTop() + _this.$box.outerHeight() >= _this.$container.outerHeight( true ) ) 735 || ( _this.$box.outerHeight() >= _this.$container.outerHeight( true ) ) ){ 736 _this.$element.addClass( _this.prefix + 'down-pos' ); 737 if ( _this.options.triggers.all || _this.options.triggers['down-pos'] ) _this.setTrigger( 'down-pos' ); 738 } else { 739 _this.$element.removeClass( _this.prefix + 'down-pos' ); 740 } 741 }; 742 743 /** 744 * Get scrolling percentage 745 * ÐолÑÑиÑÑ Ð¿ÑоÑÐµÐ½Ñ Ð¿ÑокÑÑÑки 746 * @return { number } 747 * */ 748 theinScroll.prototype.getScrollingPercentage = function(){ 749 var diff = this.$container.outerHeight( true ) - this.$box.height(), 750 percentage = diff <= 0 ? 0 : ( this.$box.scrollTop() * 100 ) / diff; 751 return ( percentage > 100 ? 100 : percentage ); 752 }; 753 754 theinScroll.prototype.addContent = function( content, prepend, slide, duration ){ 755 var _this = this; 756 if ( typeof content == 'string' ) content = $( content ); 757 if ( typeof content == 'object' && !$.isPlainObject( content ) ) { 758 duration = ( duration >= 0 ) ? duration : _this.options.slideDuration; 759 if ( slide ) content.hide(); 760 if ( prepend ) { 761 _this.$content.prepend( content ); 762 } else { 763 _this.$content.append( content ); 764 } 765 if ( slide ) content.slideDown( duration ); 766 } 767 }; 768 769 theinScroll.prototype.clearContent = function( slide, duration ){ 770 var _this = this; 771 if ( slide ) { 772 duration = ( duration >= 0 ) ? duration : _this.options.slideDuration; 773 _this.$content.slideUp( duration, function(){ 774 _this.$content.empty().show(); 775 }); 776 } else { 777 _this.$content.empty(); 778 } 779 }; 780 781 theinScroll.prototype.getCurrent = function(){ 782 var _this = this, 783 data = { 784 'content' : { 785 'position' : { 786 'pc' : _this.topPercentScrollContent, 787 'px' : _this.topPxScrollContent 788 } 789 }, 790 'scroller' : { 791 'position' : { 792 'pc' : _this.topPercentScroller, 793 'px' : _this.topPxScroller 794 }, 795 'size' : { 796 'pc' : _this.percentSizeScroller, 797 'px' : _this.pxSizeScroller 798 } 799 }, 800 'scrollingline' : { 801 'size' : { 802 'px' : _this.$scrollLine.height() 803 } 804 }, 805 'scrolling' : _this.scrollingPercentage 806 }; 807 return data; 808 }; 809 810 /** 811 * Ðобавление ÑÑигеÑа позиÑии пÑокÑÑÑки 812 * @param { string | object } trigger name or trigger data object 813 * @param { number | string } triggering position [ 0 ], 10, '10%' 814 * @param { string } triggering condition [ '<' ], '>' 815 * @param { boolean } direction of counting from below [ false ], true 816 * */ 817 theinScroll.prototype.addScrollingTrigger = function( name, position, sign, down, everytime, move, once ){
818 if ( name && ( typeof name.name == 'string' || typeof name == 'string' ) ){ 819 if ( this.addedTriggers === false ) this.addedTriggers = {}; 820 this.addedTriggers[ name.name || name ] = { 821 position : name.position || position || 0, 822 sign : ( name.sign == '<' || name.sign == '>' ) ? name.sign : ( sign == '<' || sign == '>' ) ? sign : '>', 823 down : name.down ? name.down : down ? down : false, 824 everytime : ( name.everytime && typeof name.everytime == 'boolean' ) ? name.everytime : ( everytime && typeof everytime == 'boolean' ) ? everytime : false, 825 move : ( name.move && typeof name.move == 'boolean' ) ? name.move : ( move && typeof move == 'boolean' ) ? move : false, 826 once : ( name.once && typeof name.once == 'boolean' ) ? name.once : ( once && typeof once == 'boolean' ) ? once : false 827 }; 828 // console.log(this.addedTriggers); 829 } 830 }; 831 832 theinScroll.prototype.checkAddedTriggers = function( ) { 833 var _this = this; 834 if ( $.isPlainObject( _this.addedTriggers ) ) { 835 $.each( _this.addedTriggers, function ( n, v ) { 836 var show = false, 837 position = parseInt( _this.toNumber( v.position ) ), 838 scroll = _this.$box.scrollTop(); 839 840 841 if ( position ) { 842 843 if ( v.down ) scroll = _this.$container.height() - _this.$box.height() - scroll; 844 845 if ( ( v.sign == '>' && scroll > position ) || ( v.sign == '<' && scroll < position ) ) { 846 847 //console.log( (v.down ? 'DOWN' : 'UP')+' --- scroll '+v.sign+' position --- '+ scroll + ' '+v.sign+' '+ position); 848 849 show = true; 850 851 } else { 852 853 if ( v.everytime === 1 ) v.everytime = true; 854 855 } 856 857 858 } 859 860 861 862 if ( show ) { 863 // console.log(n+' --- move != scroll ( '+v.move+' != '+scroll+' = '+ (v.move !== scroll) + ')'); 864 if ( v.everytime !== 1 && ( ( v.move !== scroll && v.move !== true ) || v.move === false ) ) _this.setTrigger(n); 865 if ( v.once ) delete _this.addedTriggers[ n ]; 866 if ( v.everytime ) v.everytime = 1; 867 } 868 869 if ( v.move !== false ) v.move = scroll; 870 871 872 873 874 }); 875 } 876 }; 877 878 /** 879 * ÑÑÐ¸Ð³ÐµÑ 880 * triggers a public event. 881 * @param { String } event name 882 * @param { Object } data object 883 */ 884 theinScroll.prototype.setTrigger = function( name, data ){ 885 if ( typeof name != 'string' ) return false; 886 var _this = this, 887 extObj = $.extend ({ 888 "eventType" : name, 889 "plugin" : _this 890 }, _this.getCurrent()), 891 data = ( $.isPlainObject( data ) ) ? $.extend( data, extObj ) : extObj; 892 _this.$element.trigger( name + '.' + _this.options.classes.main , data ); 893 }; 894 895 theinScroll.prototype.banDragSelect = function(state){ 896 $('body').toggleClass( this.options.classes.banSelect, state === false ? false : true ); 897 }; 898 899 theinScroll.prototype.banScroll = function(state){ 900 $('body').toggleClass( this.options.classes.banScroll, state === false ? false : true ); 901 }; 902 903 $.fn.theinScroll = function(options) { 904 return this.each(function(){ 905 if(!$.data(this, 'theinScroll')){ 906 $.data(this, 'theinScroll', new theinScroll(this, options)); 907 } 908 }); 909 }; 910 911})( jQuery, window, document ); 912
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.