API tools faq
paste
Advertisement
fruffl

Scrollroll Proto App

fruffl
May 29th, 2012
78
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
jQuery 13.48 KB | None | 0 0
raw download clone embed print report
  1.  
  2.         __SCROLLROLLER__ : function($item, settings)
  3.         {
  4.            
  5.             /*if(false === $item.hasClass('tri4m-ui-scrollroller-y')
  6.             && false === $item.hasClass('tri4m-ui-scrollroller-x'))
  7.                 return $item;*/
  8.                
  9.             var __settings = jQuery.extend
  10.             (
  11.                 true,
  12.                 {
  13.                     items : null,
  14.                     sensitive : true,
  15.                     ignoreChilds : true,
  16.                     easing :
  17.                     {
  18.                         method : 'easeOutCubic',
  19.                         duration : 400,
  20.                         callback :
  21.                         {
  22.                             container :
  23.                             {
  24.                                 init : function(){},
  25.                                 mouseleave : function(){}
  26.                             },
  27.                             item :
  28.                             {
  29.                                 activate : function(){},
  30.                                 deactivate : function(){}
  31.                             },
  32.                             window :
  33.                             {
  34.                                 resolutionchange : function(){}
  35.                             }
  36.                         }
  37.                     }
  38.                 },
  39.                 settings
  40.             );
  41.            
  42.             var __instance = function($item)
  43.             {
  44.                 var _element    = $item,
  45.                     _align      = null,
  46.                     _isf        = function(c) { return (typeof(c) == 'function'); },
  47.                     _isset      = $.tri4m.global.__PROTO__.__TRI4M__.isset($item, 'scrollroller'),
  48.                     _reg        = {},
  49.                     _bnd        = {},
  50.                     _x, _y, _f, _m, _a, _c, _j, _dom, _update, _insert, _init;
  51.                    
  52.                 _x = function()
  53.                 {
  54.                     this.cp = function(x,f) { return { a : 'scrollLeft', p : x, c : f}; };
  55.                     this.cm = function(e)   { return { t : { d : _f.l().outerWidth(), o : _f.l()[0].offsetLeft },
  56.                                        r : { d : _reg.j.get('c').width(), o : _reg.j.get('c').offset().left },
  57.                                        i : { d : e.pageX },
  58.                                        A : { d : _reg.j.get('w').width() },
  59.                                        m : 4 }; };
  60.                     this.cc = function()    { return { c : _f.x().data(_reg.n.get('dlm')).i.p.c.x, d : _reg.j.get('c').width() }; };
  61.                     this.id = function(t)   { return t.outerWidth(true); };
  62.                     this.ik = function(p)   { return {x : p, y : 0}; };
  63.                     this.is = function(d)   { return d; };
  64.                     this.iw = function(d)   { _reg.j.get('l').addClass('ui-helper-clearfix'); if(d > _reg.j.get('c').width()) _reg.j.get('w').width(d); };
  65.                     this.ac = function(t)   { _c.p(_c.c(), t); };
  66.                     this.ap = function(x)   { _c.p(x); };
  67.                 };
  68.                 _y = function()
  69.                 {
  70.                     this.cp = function(y,f) { return { a : 'scrollTop', p : y, c : f}; };                                          
  71.                     this.cm = function(e)   { return { t : { d : _f.l().outerHeight(true), o : _f.l()[0].offsetTop },
  72.                                        r : { d : _reg.j.get('c').height(), o : _reg.j.get('c').offset().top },
  73.                                        i : { d : e.pageY },
  74.                                        A : { d : _reg.j.get('w').height() },
  75.                                        m : 1 }; };
  76.                     this.cc = function()    { return { c : _f.x().data(_reg.n.get('dlm')).i.p.c.y, d : _reg.j.get('c').height() }; };  
  77.                     this.id = function(t)   { return t.outerHeight(true); };
  78.                     this.ik = function(p)   { return {x : 0, y : p}; };
  79.                     this.is = function(d)   { return d - parseInt($('li:first-child', _reg.j.get('l')).css("margin-bottom"), 10); };
  80.                     this.iw = function(d)   { if(d > _reg.j.get('c').height()) _reg.j.get('w').height(d); };
  81.                     this.ac = function(t)   { _c.p(_c.c(), t); };
  82.                     this.ap = function(y)   { _c.p(y); };
  83.                 };                                                     
  84.                 _f =
  85.                 {
  86.                     f : function()  { return $('ul:first > li', _reg.j.get('w')).filter(':first'); },
  87.                     l : function()  { return $('ul:first > li', _reg.j.get('w')).filter(':last'); },
  88.                     a : function()  { return $(_reg.j.get('i')).filter(function() { return ($(this).data(_reg.n.get('dls')).a === true); }); },
  89.                     x : function()  { var a = _f.a(); return (a.length === 1) ? a : _f.f(); },
  90.                     e : function(i) { return $('ul:first > li', _reg.j.get('w')).filter(':eq(' + i + ')' ); }
  91.                 };
  92.                 _m =
  93.                 {
  94.                     r : function(o)
  95.                     {
  96.                         var f = (!o.m || o.m === 0) ? 1 : o.m;
  97.                         return (((o.i.d - o.r.o) * ((o.t.o + o.t.d + (o.A.d / f)) - o.r.d) / o.r.d ) - (o.A.d / (f * 2)));
  98.                     },
  99.                     c : function(o) { return o.c - (o.d / 2); }
  100.                 };
  101.                 _a =
  102.                 {
  103.                     s : function(o)
  104.                     {
  105.                         var c = (true === _isf(o.c)) ? o.c : function(){}, a = {}, t = $(this), d = _reg.c.get('easd'), m = _reg.c.get('easm');
  106.                         a[o.a] = o.p;
  107.                         return _reg.j.get('c').stop().animate(a, d, m,
  108.         // w00t?
  109.                             //function() { return c(t); }
  110.                             c
  111.                         );
  112.                     }
  113.                 };                         
  114.                 _c =
  115.                 {
  116.                     c : function()      { return _m.c(_align.cc()); },
  117.                     m : function(e)     { return _m.r(_align.cm(e)); },
  118.                     p : function(p,c)   { return _a.s(_align.cp(p,c));  }
  119.                 };                         
  120.                 _j =
  121.                 {
  122.                     window      : function()    { _align.ac(_reg.c.get('ecbr')); },
  123.                     mouseleave  : function()    { _align.ac(_reg.c.get('ecbl')); },
  124.                     init        : function()    { _align.ac(_reg.c.get('ecbi')); },
  125.                     activation  : function()    { _align.ac(_reg.c.get('ecba')); },
  126.                     deactivation    : function()    { _align.ac(_reg.c.get('ecbd')); },
  127.                     mousemove   : function(p)   { _align.ap(p); }
  128.                 };                             
  129.                 _dom = function()
  130.                 {
  131.                     var j = _reg.j, _d = '<div/>', _l = '<ul/>', __d = 'div', __l = 'ul', __i = 'li';
  132.                     j.register('c', _element, true);                               
  133.                     var w = _element.find(__d).eq(0);
  134.                     j.register('w', ((w.length === 0) ? $(_d).appendTo(j.get('c')) : w), true);                            
  135.                     var l = _reg.j.get('w').find(__l).eq(0);
  136.                     j.register('l', ((l.length === 0) ? $(_l).appendTo(j.get('w')) : l), true);                            
  137.                     var i = $(__i, j.get('l'));
  138.                     j.register('i', i, false);                             
  139.                     j.get('w').addClass('tri4m-ui-scrollroller-wrapper');
  140.                     j.get('l').addClass('tri4m-ui-scrollroller-list');
  141.                     j.get('i').addClass('tri4m-ui-scrollroller-listitem');
  142.                     j.get('c').addClass('tri4m-ui-scrollroller')
  143.                         .css({overflow: 'hidden'})
  144.                         .data(_reg.n.get('dcs'), { initialized : false, i : null, mouseover : false });
  145.                 };
  146.                 _update = function()
  147.                 {
  148.                     var td = 0, b = _align, j = _reg.j, i = $('li', j.get('l'));
  149.                     j.set('i', i);                             
  150.                     i.each(function(index)
  151.                     {
  152.                         var t = $(this), d = b.id(t), dc = d / 2, p = td, pc = dc + p, k = b.ik(p), kc = b.ik(pc), bi = _bnd.i.toValueObject();
  153.                         for(var i in bi) t.unbind(i).bind(i, bi[i]);
  154.                         t.data(_reg.n.get('dlm'),  { i : { m : { f : d, h : dc }, p : { a : k, c : kc } } })
  155.                          .data(_reg.n.get('dls'), { i : index, d : false, a : false })
  156.                          /*
  157.                          .click(function(e)
  158.                             {
  159.                                 var t = $(e.target);
  160.                                 t.trigger('activate');
  161.                                 //alert($(this).data(_reg.n.get('dls')).i);
  162.                             })
  163.                             */
  164.                         ;
  165.                          
  166.                         td = b.is(p + d);
  167.                        
  168.                         //t.html(index);
  169.                     });
  170.                    
  171.                     b.iw(td);
  172.                    
  173.                 };                         
  174.                 _insert = function(index)
  175.                 {
  176.                     var l = _reg.j.get('i').length, i = $('<li/>').addClass('tri4m-ui-scrollroller-listitem tri4m-ui-scrollroller-listitem-insert');
  177.                     if(index === undefined) index = l;                             
  178.                     (index >= l)
  179.                         ? i.appendTo(_reg.j.get('l'))
  180.                         : i.insertBefore(_reg.j.get('i')[index]);
  181.                    
  182.                     _update();
  183.                 };
  184.                 _init = function()
  185.                 {
  186.                     if(true === _isset) return;
  187.                     _reg.j = new $.tri4m.global.__CLASS__.__VARIABLE__.__REGISTRY__();
  188.                     _reg.n = new $.tri4m.global.__CLASS__.__VARIABLE__.__REGISTRY__();
  189.                     _reg.c = new $.tri4m.global.__CLASS__.__VARIABLE__.__REGISTRY__();
  190.                     _bnd.r = new $.tri4m.global.__CLASS__.__VARIABLE__.__REGISTRY__();
  191.                     _bnd.c = new $.tri4m.global.__CLASS__.__VARIABLE__.__REGISTRY__();
  192.                     _bnd.i = new $.tri4m.global.__CLASS__.__VARIABLE__.__REGISTRY__();
  193.                    
  194.                     _reg.n  .register('dls', 'tri4m.ui.scrollroller.listitem.state')
  195.                         .register('dlm', 'tri4m.ui.scrollroller.listitem.math')
  196.                         .register('dcs', 'tri4m.ui.scrollroller.state');
  197.                    
  198.                     _reg.c  .register('easd', __settings.easing.duration)
  199.                         .register('easm', __settings.easing.method)
  200.                         .register('ecbl', __settings.easing.callback.container.mouseleave)
  201.                         .register('ecbi', __settings.easing.callback.container.init)
  202.                         .register('ecba', __settings.easing.callback.item.activate)
  203.                         .register('ecbd', __settings.easing.callback.item.deactivate)
  204.                         .register('ecbr', __settings.easing.callback.window.resolutionchange)
  205.                         .register('class.active', 'tri4m-ui-scrollroller-listitem-active');
  206.                    
  207.                     if(!_element.hasClass('tri4m-ui-scrollroller-x')
  208.                     && !_element.hasClass('tri4m-ui-scrollroller-y'))
  209.                         _element.addClass('tri4m-ui-scrollroller-x');
  210.                                                        
  211.                     _align = _element.hasClass('tri4m-ui-scrollroller-x')
  212.                         ? new _x
  213.                         : new _y;
  214.                    
  215.                     _bnd.i
  216.                     .register('adjust-activate', _j.activation, true)
  217.                     .register('adjust-deactivate', _j.deactivation, true)
  218.                     .register('activate', function(e, c)
  219.                     {
  220.                         var t  = $(e.target),
  221.                             ci = _reg.j.get('c').data(_reg.n.get('dcs')),
  222.                             dc = t.data(_reg.n.get('dls')),
  223.                             ds = t.data(_reg.n.get('dlm'));
  224.                        
  225.                         if(ci.i === dc.i) return;                                      
  226.                         _f.a().trigger('deactivate');
  227.                        
  228.                         ci.i = dc.i;
  229.                         dc.a = true;
  230.                        
  231.                         ds.m = { x : e.pageX, y : e.pageY };
  232.                         ds.c = { x : (_reg.j.get('c').offset().left), y : (_reg.j.get('c').offset().top) };
  233.                         ds.w = { x : (_reg.j.get('w').offset().left), y : (_reg.j.get('w').offset().top) };
  234.                        
  235.                         _reg.j.get('c')
  236.                             .data(_reg.n.get('dcs'), ci);
  237.                         t.toggleClass(_reg.c.get('class.active'))
  238.                             .data(_reg.n.get('dlm'), ds)
  239.                             .data(_reg.n.get('dls'), dc);
  240.                        
  241.                         if(true === _isf(c)) c(t);
  242.                     }, true)
  243.                     .register('deactivate', function(e, c)
  244.                     {
  245.                         var t  = $(this), ci = _reg.j.get('c').data(_reg.n.get('dcs')), dl = _f.a().data(_reg.n.get('dls'));                                   
  246.                         ci.i = null; dl.a = false;                                 
  247.                         _reg.j.get('c').data(_reg.n.get('dcs'), ci);
  248.                         t.toggleClass(_reg.c.get('class.active')).data(_reg.n.get('dls'), dl);                                     
  249.                         if(true === _isf(c)) c(t);
  250.                     }, true);
  251.                    
  252.                     _bnd.c
  253.                     .register('activate-index', function(e, i, c)
  254.                     {
  255.                         var l  = _reg.j.get('i').size() - 1;
  256.                         return (i > l || i < 0) ? null : _f.e(i).trigger('activate', [c]).trigger('adjust-activate');
  257.                     }, true)
  258.                     .register('activate-first', function(e, c)
  259.                     {
  260.                         var t = $(e.target);
  261.                         return t.trigger('activate-index', [0, c]);
  262.                     }, true)
  263.                     .register('activate-last', function(e, c)
  264.                     {
  265.                         var t = $(e.target), l = _reg.j.get('i').size() - 1;
  266.                         return t.trigger('activate-index', [l, c]);
  267.                     }, true)
  268.                     .register('activate-next', function(e, c)
  269.                     {
  270.                         var t = $(e.target), a = _reg.j.get('c').data(_reg.n.get('dcs')).i;
  271.                         if(a === null) return null;
  272.                         var n = a + 1;
  273.                         return t.trigger('activate-index', [n, c]);
  274.                     }, true)
  275.                     .register('activate-next-or-index', function(e, i, c)
  276.                     {
  277.                         var t = $(e.target), a = _reg.j.get('c').data(_reg.n.get('dcs')).i;
  278.                         return (a === null) ? t.trigger('activate-index', [i, c]) : t.trigger('activate-next', [c]);
  279.                     }, true)
  280.                     .register('activate-next-or-first', function(e, c)
  281.                     {
  282.                         var t = $(e.target), l = _reg.j.get('i').size() - 1, a = _reg.j.get('c').data(_reg.n.get('dcs')).i;
  283.                         return (a === null || a === l)  ? t.trigger('activate-first', [c]) : t.trigger('activate-next', [c]);
  284.                     }, true)
  285.                     .register('activate-prev', function(e, c)
  286.                     {
  287.                         var t  = $(e.target), a = _reg.j.get('c').data(_reg.n.get('dcs')).i;
  288.                         if(a === null) return null;
  289.                         var p = a - 1;
  290.                         return t.trigger('activate-index', [p, c]);
  291.                     }, true)
  292.                     .register('activate-prev-or-index', function(e, i, c)
  293.                     {
  294.                         var t  = $(e.target), a = _reg.j.get('c').data(_reg.n.get('dcs')).i;
  295.                         return (a === null) ? t.trigger('activate-index', [i, c]) : t.trigger('activate-prev', [c]);
  296.                     }, true)
  297.                     .register('activate-prev-or-last', function(e, c)
  298.                     {
  299.                         var t  = $(e.target), a = _reg.j.get('c').data(_reg.n.get('dcs')).i;
  300.                         if(a === null) return t.trigger('activate-first', [c]);
  301.                         return (a === 0) ? t.trigger('activate-last', [c]) : t.trigger('activate-prev', [c]);
  302.                     }, true)
  303.                     .register('deactivate-item', function(e, c)
  304.                     {
  305.                         return _f.a().trigger('deactivate', [c]).trigger('adjust-deactivate', [e]);
  306.                     }, true)
  307.                     .register('disable-item', function(e, i, c)
  308.                     {
  309.                     }, true)
  310.                     .register('disable-items', function(e, iArr, c)
  311.                     {
  312.                     }, true)
  313.                     .register('enable-item', function(e, i, c)
  314.                     {
  315.                     }, true)
  316.                     .register('enable-items', function(e, iArr, c)
  317.                     {
  318.                     }, true)
  319.                     .register('append-item', function(e, i, c)
  320.                     {
  321.                     }, true)
  322.                     .register('prepend-item', function(e, i, c)
  323.                     {
  324.                     }, true)
  325.                     .register('insert-item', function(e, i, item, c)
  326.                     {
  327.                     }, true)
  328.                     .register('disable-all', function(e, c)
  329.                     {
  330.                     }, true)
  331.                     .register('enable-all', function(e, c)
  332.                     {
  333.                     }, true);
  334.                        
  335.                     _bnd.r
  336.                     .register('resize.resolutionchange', _j.window, true)
  337.                    
  338.                     _dom();
  339.                     _update();
  340.                    
  341.                     var bc = _bnd.c.toValueObject(), br = _bnd.r.toValueObject(), j = _reg.j;
  342.                    
  343.                     for(var i in br) { $(window).bind(i, br[i]); }
  344.                     for(var i in bc) j.get('c').unbind(i).bind(i, bc[i]);
  345.                    
  346.                     if(true === __settings.sensitive) j.get('c')
  347.                         .mouseenter(function(e)
  348.                         {
  349.                             $(this).data(_reg.n.get('dcs')).mouseover = true;
  350.                         })
  351.                         .mousemove(function(e)
  352.                         {
  353.                             _j.mousemove(_c.m(e));
  354.                             $(this).data(_reg.n.get('dcs')).mouseover = true;
  355.                         })
  356.                         .mouseleave(function(e)
  357.                         {
  358.                             _j.mouseleave();
  359.                             $(this).data(_reg.n.get('dcs')).mouseover = false;
  360.                         });
  361.                 };
  362.                
  363.                 _init();
  364.                
  365.                
  366.                 this.world = function()
  367.                 {
  368.                     var a = (_align instanceof _x) ? 'x' : 'y';
  369.                     alert(a + ' world');
  370.                 }
  371.             }
  372.            
  373.             var instance = new __instance($item, true);
  374.             $.tri4m.global.__PROTO__.__TRI4M__.register($item, 'scrollroller', instance);
  375.            
  376.         }
  377.     },
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!