scroll.js

define(function(require, exports, module) {
	var jQuery = require('jquery'),
	Events = require('events');
	//基于jquery.ui
	require('vendor/jquery.ui');
	require('vendor/jquery.mousewhell');

	(function($) {

		var scrollbar = function(config) {
			var _config = {
				//父节点
				target: null,
				//正文节点
				mask: null,
				//步数
				scrollStep: 10,
				//是否允许鼠标操作
				allowMouseWheel: true,
				//定位位置 支持左右上下
				position: ['right'],
				maskmarign: 5,
				barlen: 3,
				barPos: 5
			};
			this.wrapcls = 'jScrollbar';
			this.maskcls = 'jScrollbar_mask';
			this.barTemplate = '<div class="jScrollbar_draggable"><a href="#" class="draggable"></a></div>';
			this.config = $.extend(_config, config);
		};

		$.extend(scrollbar.prototype, {
			_IntNum: function(str) {
				return parseInt(str, 10);
			},
			//重新计算容器高宽比值
			_fixDiff: function(target, mask) {
				var self = this;
				var th = self._IntNum($(target).height()),
				tw = self._IntNum($(target).width()),
				mh = self._IntNum($(mask).innerHeight()),
				mw = self._IntNum($(mask).innerWidth()),
				ST = self._IntNum($(mask).scrollTop()),
				SL = self._IntNum($(mask).scrollLeft()),
				dragh = self._IntNum((mh * th - (th * (mh - th))) / mh),
				dragw = self._IntNum((mw * th - (tw * (mw - tw))) / mw),
				diffh = mh - th,
				diffw = mw - tw;
				return {
					diffh: diffh,
					diffw: diffw,
					ST: ST,
					SL: SL,
					dragh: diffh < 0 ? 0: dragh,
					dragw: diffw < 0 ? 0: dragw,
					th: th,
					tw: tw,
					mh: mh,
					mw: mw
				};
			},
			//装载样式，初始化滚动条
			_buildScrollbar: function(target, mask, directions) {
				var self = this,
				cg = self.config;
				$(target).addClass(self.wrapcls);
				$(mask).addClass(self.maskcls);
				$(mask).css({
					'left': cg.maskmarign,
					'top': cg.maskmarign
				});
				var o = this._fixDiff(target, mask);
				directions.forEach(function(direction) {
					var bar = $(self.barTemplate);
					$(target).append(bar);
					bar.addClass(direction);
					if (direction == 'left' || direction == 'right') {
						bar.height(o.th);
						bar.find('.draggable').height(o.dragh);
					} else {
						bar.width(o.tw);
						bar.find('.draggable').width(o.dragw);
					}
				});
			},
			//绑定必须的dom事件
			_bindAction: function(target, mask) {
				var self = this,
				cg = self.config,
				draggables = ['.left', '.right', '.top', '.bottom'];
				$(target).on("click", ".draggable a", function(e) {
					e.preventDefault();
				});
				draggables.forEach(function(item) {
					var drag = $(target).find(item + ' a'),
					containment = $(target).find(item);
					if (containment) {
						var axis;
						if (item == '.left' || item == '.right') axis = 'y';
						else axis = 'x';
						drag.draggable({
							axis: axis,
							containment: containment,
							scroll: false,
							drag: function(event, ui) {
								var diff, scroll, left, top, o = self._fixDiff(target, mask);
								if (item == '.left' || item == '.right') {
									diff = o.diffh;
									scroll = o.th - o.dragh;
									top = (ui.position.top * (diff / scroll));
									$(mask).css('top', '-' + top + 'px');
								} else {
									diff = o.diffw;
									scroll = o.tw - o.dragw;
									left = (ui.position.left * (diff / scroll));
									$(mask).css('left', '-' + left + 'px');
								}
							}
						});
					}
				});
				if (cg.allowMouseWheel) {
					$(target).mousewheel(function(objEvent, intDelta) {
						var o = self._fixDiff(target, mask),
						masktop = self._IntNum($(mask).css('top')),
						RelativeTop,
						draggable = $(target).find('.left .draggable,.right .draggable');
						if (intDelta > 0 && masktop < 0) {
                            draggable.stop(true,true).animate({
                                top:'-='+cg.scrollStep+'px'
                            },100);
                            $(mask).stop(true,true).animate({
                                top: '+=' + ((o.mh * cg.scrollStep) / o.th) + 'px' 
                            },100,function(){
								RelativeTop = self._IntNum($(draggable).css('top'));
								if (RelativeTop < 0) {
                                    console.log('top');
									draggable.animate({
										top: 0
									},
									100);
									$(mask).css({
										top: cg.maskmarign
									});
								}
                            });
						} else if (intDelta < 0 && masktop > - o.diffh) {
							draggable.stop(true, true).animate({
								top: '+=' + cg.scrollStep + 'px'
							},
							100);
                            $(mask).stop(true,true).animate({
                                top: '-=' + ((o.mh * cg.scrollStep) / o.th) + 'px' 
                            },100,function(){
								RelativeTop = self._IntNum($(draggable).css('top')) + self._IntNum($(draggable).height());
                                if(RelativeTop > o.th){
                                    draggable.animate({
                                        top:o.th - o.dragh
                                    });
                                    $(mask).css({
                                        top:- (o.mh - o.th)
                                    });
                                }
                            });
						}
						objEvent.preventDefault();
					});
				}
			},
			//重绘
			resize: function() {
				var self = this,
				cg = self.config,
				target = cg.target,
				mask = cg.mask,
				o = this._fixDiff(target, mask);
				cg.position.forEach(function(direction) {
					if (direction == 'left' || direction == 'right') {
						$(target).find('.' + direction + ' .draggable').height(o.dragh);
					} else {
						$(target).find('.' + direction + ' .draggable').width(o.dragw);
					}
				});
			},
			//初始化box
			init: function() {
				var self = this,
				cg = self.config,
				target = cg.target,
				mask = cg.mask;
				if (target && mask) {
					self._buildScrollbar(target, mask, cg.position);
					self._bindAction(target, mask);
				}
			}
		});
		//事件绑定
		Events.mixTo(scrollbar);
		//绑定插件 
		$.fn.jScrollbar = function(op) {
			if (this.length > 0) {
				return this.each(function() {
					op['target'] = this;
					var bar = new scrollbar(op);
					$(this).data('scrollbar', bar);
					bar.init();
				});
			}
		};
	})(jQuery);
});