API tools faq
paste
Advertisement
fruffl

cinematic

fruffl
May 30th, 2012
65
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
jQuery 15.09 KB | None | 0 0
raw download clone embed print report
  1.     cinematic : function(__SELF, SETTINGS)
  2.     {
  3.         var regName = 'app-cinematic';
  4.        
  5.         /*
  6.         based on .w_10
  7.         */
  8.         var __settings =
  9.         {
  10.             bioscoop : null, // id of target
  11.             autoplay :
  12.             {
  13.                 enabled : false,
  14.                 interval : 10,
  15.                 showNext : true,
  16.                 showPlay : true,
  17.                 showPrev : true,
  18.                 showTimer : true,
  19.             },
  20.             thumbs :
  21.             {
  22.                 preloadAllBeforeShow : false,
  23.                 callBackAfterShow : function() {},
  24.                 asCssBackgroundImage : true // otherwise img-tag
  25.             },
  26.             loader :
  27.             {
  28.                 lines           : 16,
  29.                 length          : 50,
  30.                 width           : 1,
  31.                 radius          : 40,
  32.                 rotate          : 0,
  33.                 color           : '#00FF1A',
  34.                 speed           : 1.9,
  35.                 trail           : 100,
  36.                 shadow          : false,
  37.                 hwaccel         : true,
  38.                 className       : 'ddlsl',
  39.                 zIndex          : -1,//2e9,
  40.                 top             : 0,
  41.                 left            : 'auto'
  42.             }
  43.         };
  44.        
  45.         var log =
  46.         {
  47.             n : function(t, l)
  48.             {
  49.                 $.tri4m.log('tri4m.app.cinematic: ' + t, l);
  50.             },
  51.             t : function(t, l)
  52.             {
  53.                 log.n('trigger: ' + t, l);
  54.             },
  55.             t107 : function(t, l)
  56.             {
  57.                 log.t('preload-cinematic-thumb: ' + t, l);
  58.             },
  59.             t108 : function(t, l)
  60.             {
  61.                 log.t('preload-cinematic-image: ' + t, l);
  62.             }
  63.         }
  64.        
  65.         var __instance = function(element)
  66.         {
  67.             var _queue = [],
  68.             _element = element,
  69.             _isset = $.tri4m.global.__INSTANCE_REGISTRY__.isset(element, regName),
  70.             _init, _dom, _reg = {}, _bnd = {}, _update,
  71.             _ctrl =
  72.             {
  73.                 onActivation : function(scrollrollerItem)
  74.                 {
  75.                     scrollrollerItem.parent().data('tri4m.ui.scrollroller.listitem.state', {ai : scrollrollerItem});
  76.                     scrollrollerItem.find('a').trigger('preload-cinematic-image');
  77.                 },
  78.                 pause : function()
  79.                 {
  80.                 },
  81.                 play : function()
  82.                 {
  83.                 },
  84.                 next : function(scrollroller)
  85.                 {
  86.                     scrollroller.trigger('activate-next-or-first', [_ctrl.onActivation]);
  87.                 },
  88.                 prev : function(scrollroller)
  89.                 {
  90.                     scrollroller.trigger('activate-next-or-first', [_ctrl.onActivation]);
  91.                 }
  92.             };
  93.            
  94.             _c =
  95.             {
  96.                 o : function(t)
  97.                 {
  98.                     var p = {width: 0, height: 0};
  99.                     p.width = (typeof t === 'undefined' || t.innerWidth() === 0) ? $(window).width() : t.innerWidth();
  100.                     p.height = (typeof t === 'undefined' || t.innerHeight() === 0) ? $(window).height() : t.innerHeight();
  101.                     return p;
  102.                 },
  103.                 i : function(image, target)
  104.                 {
  105.                     var p = {width: 0, height: 0, left: 0, top: 0};
  106.                    
  107.                     if(typeof image !== 'object'
  108.                     || typeof image.width === 'undefined'
  109.                     || typeof image.height === 'undefined') return p;
  110.                    
  111.                     var iw = image.width;
  112.                     var ih = image.height;
  113.                     var ir = ih / iw;
  114.                    
  115.                     var w = _c.o(target);
  116.                     var ww = w.width;
  117.                     var wh = w.height;
  118.                     var wr = wh / ww;
  119.                    
  120.                     switch(true)
  121.                     {
  122.                         case (wr > ir):
  123.                             p.width  = Math.round(wh/ir);
  124.                             p.height = wh;
  125.                             break;
  126.                         case (typeof $('body.fit-images').size() !== 'undefined'):
  127.                             p.width  = ww;
  128.                             p.height = wh;
  129.                             break;
  130.                         case (ir > 1 || ir === 1):
  131.                             var j = wh / ih;
  132.                             p.width  = Math.round(iw * j);
  133.                             p.height = wh;
  134.                             break;
  135.                         default:
  136.                             p.width  = ww;
  137.                             p.height = Math.round(ww * ir);
  138.                             break;
  139.                     }
  140.                    
  141.                     p.left = Math.round((ww - p.width)  / 2);
  142.                     p.top  = Math.round((wh - p.height) / 2);
  143.                    
  144.                     return p;
  145.                 }
  146.             };
  147.            
  148.             _j =
  149.             {
  150.                 isw : false,
  151.                 window : function()
  152.                 {
  153.                     var d = _reg.j.get('d');
  154.                     var wait = setInterval(function()
  155.                     {
  156.                         clearInterval(wait);
  157.                         _j.isw = false;
  158.                         d.find('img:visible')
  159.                         .each(function()
  160.                         {
  161.                             $(this).animate(_c.i({width : $(this).width(), height : $(this).height()}, d), 500, 'easeOutCubic');
  162.                         });
  163.                     }, 600);
  164.                    
  165.                     if(true === _j.isw)
  166.                         clearInterval(wait);
  167.                    
  168.                     _j.isw = true;
  169.                 }
  170.             }
  171.            
  172.             _update = function()
  173.             {
  174.                 var j = _reg.j, __i = 'li', __a = 'a',
  175.                     ba = _bnd.a.toValueObject(), bi = _bnd.i.toValueObject(), bt = _bnd.t.toValueObject();
  176.                    
  177.                 j.register('a', $(__a, j.get('l')), false);
  178.                 j.register('i', $(__i, j.get('l')), false);
  179.                 j.get('a').addClass('tri4m-app-cinematic-resourcelink').hide();
  180.                 j.get('i').addClass('tri4m-app-cinematic-resourceitem');
  181.                
  182.                 var a = j.get('a'), i = j.get('i'), _a = '<a />';
  183.                
  184.                 i.each(function(index)
  185.                 {
  186.                     for(var i in bi) $(this).unbind(i).bind(i, bi[i]);
  187.                     var it = $(this).find(__a + '.tri4m-app-cinematic-resourcethumb').eq(0);
  188.                     if(it.length === 0)
  189.                         $(this).append($(_a).addClass('tri4m-app-cinematic-resourcethumb').hide());
  190.                    
  191.                 });
  192.                
  193.                 j.register('t', $(__a + '.tri4m-app-cinematic-resourcethumb', j.get('i')), false);                         
  194.                 var t = j.get('t');
  195.                
  196.                 a.each(function(index)
  197.                 {
  198.                     for(var i in ba) $(this).unbind(i).bind(i, ba[i]);
  199.                 });
  200.                
  201.                 t.each(function(index)
  202.                 {
  203.                     for(var i in bt) $(this).unbind(i).bind(i, bt[i]);
  204.                    
  205.                     var ds = $(this).data(_reg.n.get('dts'));
  206.                     var dv = { i : index };
  207.                     if(!ds)
  208.                     {
  209.                         dv.created = false;
  210.                         $(this).data(_reg.n.get('dts'), dv).trigger('preload-cinematic-thumb');
  211.                     }
  212.                     else
  213.                     {
  214.                         $(this).data(_reg.n.get('dts'), dv);
  215.                     }
  216.                        
  217.                 });
  218.                
  219.             };
  220.                                    
  221.             _dom = function()
  222.             {
  223.                 var j = _reg.j, _d = '<div />', _l = '<ul />', __d = 'div', __i = 'li', __a = 'a', _a = '<a />', __l = 'ul';
  224.                 var d = $('#' + __settings.bioscoop).find(__d).eq(0);
  225.                 var l = _element.find(__l).eq(0); // 0: cur is ul
  226.                
  227.                 j.register('b', $('#' + __settings.bioscoop), true);
  228.                 j.register('d', ((d.length === 0) ? $(_d).appendTo(j.get('b')) : d), true);
  229.                 j.register('l', ((l.length === 0) ? $(_element).wrap(_d) : l), true);
  230.                 j.register('c', j.get('l').parent());
  231.                
  232.                 j.get('l').addClass('tri4m-app-cinematic-list');
  233.                 j.get('b').addClass('tri4m-app-cinematic-bioscoop');
  234.                 j.get('d').addClass('tri4m-app-cinematic-decorontwerp')
  235.                     .css({overflow: 'hidden'})
  236.                     .data(_reg.n.get('dcs'), { initialized : false });
  237.                 j.get('c').addClass('tri4m-ui-scrollroller-x tri4m-app-gallery-thumbs tri4m-app-cinematics')
  238.                 //j.get('c').addClass('tri4m-ui-scrollroller-x tri4m-app-cinematics')
  239.                     .tri4m().proto().ui().scrollroller
  240.                     ({
  241.                         sensitive: true,
  242.                         easing :
  243.                         {
  244.                             duration : 400,
  245.                             callback :
  246.                             {
  247.                                 item :
  248.                                 {
  249.                                     deactivate : function(e)
  250.                                     {
  251.                                         $(this).trigger('activate-first');
  252.                                     }
  253.                                 }
  254.                             }
  255.                         }
  256.                     });
  257.                    
  258.             };
  259.            
  260.             _init = function()
  261.             {
  262.                 if(true === _isset) return;
  263.                 _reg.j = new $.tri4m.global.__CLASS__.__VARIABLE__.__REGISTRY__();
  264.                 _reg.n = new $.tri4m.global.__CLASS__.__VARIABLE__.__REGISTRY__();
  265.                 _bnd.a = new $.tri4m.global.__CLASS__.__VARIABLE__.__REGISTRY__();
  266.                 _bnd.t = new $.tri4m.global.__CLASS__.__VARIABLE__.__REGISTRY__();
  267.                 _bnd.i = new $.tri4m.global.__CLASS__.__VARIABLE__.__REGISTRY__();
  268.                 _bnd.r = new $.tri4m.global.__CLASS__.__VARIABLE__.__REGISTRY__();
  269.                
  270.                 _reg.n.register('dcs', 'tri4m.app.cinematic.state');
  271.                 _reg.n.register('dts', 'tri4m.app.cinematic.thumbstate');
  272.                                        
  273.                 _bnd.i.register('click', function()
  274.                 {
  275.                     $(this).trigger('activate', [_ctrl.onActivation]);
  276.                 });
  277.                
  278.                 _bnd.t.register('preload-cinematic-thumb', function(e)
  279.                 {
  280.                     if(typeof ILLI === 'undefined')
  281.                     {
  282.                         $(this).parent().prepend('<span>where is ILLI?</span>');
  283.                         log.t107('ILLI is undefined (required for thumb-url)', 2);
  284.                         return;
  285.                     }
  286.                    
  287.                    
  288.                     var t = $(this), p = t.parent().css({opacity : 0}),
  289.                     i = t.data(_reg.n.get('dts')).i,
  290.                     href = $('a.tri4m-app-cinematic-resourcelink', p).attr('href');
  291.                    
  292.                     log.t107('init ' + i);
  293.                    
  294.                     if(typeof _queue[i] !== 'undefined' && _queue[i].status === true)
  295.                         return;
  296.                        
  297.                    
  298.                     log.t107('push to queue ' + i);
  299.                        
  300.                     _queue[i] = {status : false, error : false, attempt : 0, thumb : t, parent : p, src : null, image : $('<img />').addClass('tri4m-app-cinematic-thumbnail').css({opacity : 0})};
  301.                    
  302.                     var islast = (_queue.length === _reg.j.get('t').length);
  303.                    
  304.                     if(true === islast)
  305.                         log.t107('is last ' + i);
  306.                    
  307.                     var dequeue = function()
  308.                     {
  309.                    
  310.                         log.t107('try dequeue: caller is ' + i);
  311.                         if(true === __settings.thumbs.preloadAllBeforeShow)
  312.                         {
  313.                             if(false === islast)
  314.                                 return;
  315.                                
  316.                             log.t107('try dequeue: preloadAllBeforeShow = true');
  317.                            
  318.                             var success = true;
  319.                             for(var idx in _queue)
  320.                                 if(_queue[idx].status === false)
  321.                                     success = false;
  322.                            
  323.                             if(false === success)
  324.                             {
  325.                                 log.t107('try dequeue: success = false');
  326.                                 var refetch = setInterval(function()
  327.                                 {
  328.                                     clearInterval(refetch);
  329.                                    
  330.                                     log.t107('try again');
  331.                                     dequeue();
  332.                                 }, 50);
  333.                                
  334.                                 return;
  335.                             }
  336.                         }
  337.                        
  338.                         log.t107('try dequeue: start iteration');
  339.                         for(var idx in _queue)
  340.                         {
  341.                             if(true === _queue[idx].error)
  342.                             {
  343.                                 log.t107('try dequeue: error: ' + src, 3);
  344.                                 log.t107('try dequeue: --continue');
  345.                                 continue;
  346.                             }
  347.                            
  348.                             (function()
  349.                             {
  350.                                 log.t107('try dequeue: auto-init ' + idx);
  351.                                 var cur = _queue[idx];
  352.                                 var islast = _queue.length === _queue[idx - 1];
  353.                                 var wait = setInterval(function()
  354.                                 {
  355.                                     cur.attempt++;
  356.                                     if(false === __settings.thumbs.preloadAllBeforeShow
  357.                                     && cur.status === false)
  358.                                     {
  359.                                         log.t107('try dequeue: waiting: preloadAllBeforeShow = false, cur.status = false, try = ' + cur.attempt + ' index = ' + idx + ', caller = ' + i);
  360.                                        
  361.                                         if(cur.attempt >= 10)
  362.                                         {
  363.                                             log.t107('try dequeue: waiting: preloadAllBeforeShow = false, cur.status = false, max.attempts = 10, index = ' + idx + ', caller = ' + i);
  364.                                             log.t107('try dequeue: waiting: -- index ' + idx + ' was kicked from #list (idle flood), caller = ' + i);
  365.                                             clearInterval(wait);
  366.                                         }
  367.                                        
  368.                                         log.t107('try dequeue: waiting: coffeetime index = ' + idx + ', caller = ' + i);
  369.                                         return;
  370.                                     }
  371.                                        
  372.                                     clearInterval(wait);
  373.                                    
  374.                                     if(true === __settings.thumbs.asCssBackgroundImage)
  375.                                     {
  376.                                         log.t107('try dequeue: asCssBackgroundImage = true ' + idx);
  377.                                         cur.parent.css({'background-image' : 'url("' + cur.src + '")'});
  378.                                         cur.parent.animate({opacity : 1}, 500);
  379.                                     }
  380.                                     else
  381.                                     {
  382.                                         log.t107('try dequeue: asCssBackgroundImage = false ' + idx);
  383.                                         cur.parent.prepend(cur.image);
  384.                                         cur.image.animate({opacity : 1}, 500);
  385.                                     }
  386.                                    
  387.                                    
  388.                                     //if(islast === true) __settings.thumbs.callBackAfterShow();
  389.                                        
  390.                                 }, idx * 50);
  391.                             })();
  392.                         }
  393.                     }
  394.                    
  395.                     var load = function(src)
  396.                     {
  397.                         log.t107('try load: ' + src);
  398.                         var IMG = new Image();
  399.                         $(IMG)
  400.                         .addClass('dummy')
  401.                         .hide()
  402.                         .load(function()
  403.                         {
  404.                             log.t107('try load: complete: ' + src);
  405.                             $(IMG).remove();
  406.                             t.wait = setInterval(function()
  407.                             {
  408.                                 clearInterval(t.wait);
  409.                                 log.t107('try load: append: ' + src);
  410.                                 _queue[i].image.attr('src', src);
  411.                                 _queue[i].src = src;
  412.                                 _queue[i].status = true;
  413.                                 dequeue();
  414.                                
  415.                             }, 100);
  416.                            
  417.                             IMG.onload = function(){};
  418.                         })
  419.                         .error(function()
  420.                         {
  421.                             log.t107('try load: error: ' + src, 3);
  422.                             _queue[i].image.attr('src', src);
  423.                             _queue[i].src = src;
  424.                             _queue[i].status = true;
  425.                             _queue[i].error = true;
  426.                             dequeue();
  427.                             IMG.onerror = function(){};
  428.                         });
  429.                        
  430.                            
  431.                         $(IMG).attr('src', src);
  432.                         t.append(IMG);
  433.                        
  434.                     };
  435.                        
  436.                     t.idle = setInterval(function()
  437.                     {
  438.                         clearInterval(t.idle);
  439.                         log.t107('try get thumb for ' + i + ': ' + href);
  440.                         // create thumb url from img-a-href
  441.                         ILLI.router.create.thumb(href, p.height(), p.width(), function(url)
  442.                         {
  443.                             log.t107('thumb for ' + i + ' is ' + url);
  444.                             t.attr('href', url);
  445.                             load(url);
  446.                            
  447.                         });
  448.                     }, 100);
  449.                 });
  450.                                        
  451.                 _bnd.a.register('preload-cinematic-image', function()
  452.                 {
  453.                     var src  = $(this).attr('href');
  454.                     log.t108('init ' + src);
  455.                     /*
  456.                     if(_reg.j.get('d').children('div.hidden').length === 0)
  457.                     {
  458.                         var hidden = $('<div />').hide().addClass('hidden');
  459.                         _reg.j.get('d').prepend(hidden);
  460.                     }
  461.                     */
  462.                     var load = function()
  463.                     {
  464.                         log.t108('try load: ' + src);
  465.                         if(_reg.j.get('d').children('img' + "[src='" + src + "']").length === 0)
  466.                         {
  467.                             log.t108('try load: unknown source ' + src);
  468.                             var img = $('<img />').css({position: 'absolute'}).addClass('tri4m-app-cinematic-image').css('position', 'absolute');
  469.                            
  470.                             var IMG = new Image();
  471.                             $(IMG)
  472.                             .hide()
  473.                             .load(function()
  474.                             {
  475.                                 log.t108('try load: complete: ' + src);
  476.                                 var css = _c.i(IMG, _reg.j.get('d'));
  477.                                 $(IMG).remove();
  478.                                 var wait = setInterval(function()
  479.                                 {
  480.                                     clearInterval(wait);
  481.                                     log.t108('try load: append: ' + src);
  482.                                     _reg.j.get('d').prepend(img.attr('src', src).css(css));
  483.                                     _reg.j.get('d').animate({opacity : 1}, 500);
  484.                                 }, 100);
  485.                                
  486.                                 IMG.onload = function(){};
  487.                             })
  488.                             .error(function()
  489.                             {
  490.                                 log.t108('try load: error: ' + src, 3);
  491.                                 IMG.onerror = function(){};
  492.                             });
  493.                            
  494.                             $(IMG).attr('src', src);
  495.                             _reg.j.get('d').html(IMG);
  496.                            
  497.                         }
  498.                         else
  499.                         {
  500.                             log.t108('try load: known source ' + src);
  501.                             var img = _reg.j.get('d').children('img' + "[src='" + src + "']");
  502.                             img.show();
  503.                             _reg.j.get('d').animate({opacity : 1}, 500);
  504.                         }
  505.                     };
  506.                    
  507.                     if(_reg.j.get('d').children('img').length === 0)
  508.                     {
  509.                         log.t108('try load: bioscoop has no images -- construct squence');
  510.                         _reg.j.get('d').css({opacity : 0});
  511.                         load();
  512.                     }
  513.                     else
  514.                     {
  515.                         log.t108('try load: bioscoop has images -- destruct-construct squence');
  516.                         _reg.j.get('d').stop().animate({opacity : 0}, 500, function()
  517.                         {
  518.                             $('img', _reg.j.get('d')).remove();
  519.                             load();
  520.                         });
  521.                     }
  522.                    
  523.                    
  524.                 }, true);
  525.                
  526.                 _bnd.r.register('resize.resolutionchange', _j.window, true);
  527.                 var foo = false;
  528.                 __settings.thumbs.callBackAfterShow = function()
  529.                 {
  530.                     if(true === foo) return;
  531.                     foo = true;
  532.                     _update();
  533.                 };
  534.                 _dom();
  535.                 _update();
  536.                
  537.                 var br = _bnd.r.toValueObject();
  538.                 for(var i in br) { $(window).bind(i, br[i]); }
  539.             };
  540.            
  541.            
  542.            
  543.             if(__settings.bioscoop === null)
  544.             {
  545.                 __settings.bioscoop = 'target';
  546.                 $('body').prepend('<div id="'+ __settings.bioscoop +'"/>');
  547.             }
  548.            
  549.             _init();
  550.        
  551.         };
  552.        
  553.         var instance = new __instance(__SELF);
  554.         $.tri4m.global.__INSTANCE_REGISTRY__.register(__SELF, regName, instance);
  555.     }
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!