home *** CD-ROM | disk | FTP | other *** search
/ PC Active 2009 March / PCA223.ISO / Software / tuneup / TU2008TrialNL.exe / ie_jquery.layerbutton.js49 < prev    next >
Encoding:
Text File  |  2008-05-27  |  12.9 KB  |  404 lines
  1. /*
  2.   ==============================================================================
  3.     jQuery LayerButton plugin            Copyright (C) 2007 by Tibor Schiemann
  4.   ==============================================================================
  5.   
  6.   USAGE EXAMPLE
  7.   -------------
  8.  
  9.   $('.taskdlg-button').LayerButton(
  10.     {
  11.       'hover':
  12.       {
  13.         'imageSource':  { 'prefix': 'taskdlg_button_', 'suffix': '.png' },
  14.         'imageBorders': { 'top': 3, 'right': 3, 'bottom': 3, 'left': 3 },
  15.         'fadeIn':       { 'speed': 50,  'easing': 'easeOutQuad' },
  16.         'fadeOut':      { 'speed': 150, 'easing': 'easeOutQuad' }
  17.       }
  18.     }
  19.   );
  20. */
  21.  
  22. (function($)
  23. {
  24.   // Create our own namespace inside the jQuery namespace
  25.   $.LayerButton = {};
  26.   $.extend($.LayerButton, {
  27.     // Internal unique IDs to identify groups and buttons
  28.     runningGroupID:  0,
  29.     runningButtonID: 0,
  30.     // Automatically initializes some internal functionality on first use
  31.     initialize: function()
  32.     {
  33.       if ($.LayerButton.initialized) return;
  34.       $.LayerButton.initialized = true;
  35.       window.setInterval(
  36.         function()
  37.         {
  38.           // Remove unused hidden layers after a while
  39.           var curTime = (new Date()).getTime();
  40.           $('.lb-layer').each(
  41.             function()
  42.             {
  43.               if (this.hiddenSince)
  44.               {
  45.                 if (curTime - this.hiddenSince >= 30000)
  46.                 {
  47.                   $(this).remove();
  48.                 }
  49.               }
  50.             }
  51.           );
  52.         },
  53.         1000
  54.       );
  55.     },
  56.     getLayerID: function(aParent, aType)
  57.     {
  58.       if (aType == 'hover')
  59.       {
  60.         return 'lblayer' + aParent.LayerButton.uniqueGroupID + aType;
  61.       }
  62.       else
  63.       {
  64.         return 'lblayer' + aParent.LayerButton.uniqueButtonID + aType;
  65.       }
  66.     },
  67.     // Creates a layer on the fly and inserts it into the DOM before aParent
  68.     createLayer: function(aParent, aType)
  69.     {
  70.       $.LayerButton.initialize();
  71.       var html_contents =
  72.         '<table id="' + $.LayerButton.getLayerID(aParent, aType) + '" lbgroupid="' + aParent.LayerButton.uniqueGroupID + '" lbbuttonid="' + aParent.LayerButton.uniqueButtonID + '" class="lb-layer ' + aType + '" style="width: 10px; height: 10px; position: absolute; z-index: -1; table-layout: fixed; border-collapse: collapse; filter: alpha(opacity=0)">' +
  73.           '<col style="width: ' + aParent.LayerButton[aType].imageBorders.left + 'px"><col style="width: auto"><col style="width: ' + aParent.LayerButton[aType].imageBorders.right + 'px">' +
  74.           '<tr style="height: ' + aParent.LayerButton[aType].imageBorders.top + 'px;">' +
  75.             '<<tl>><<tm>><<tr>>' +
  76.           '</tr>' +
  77.           '<tr style="height: 100%">' +
  78.             '<<ml>><<mm>><<mr>>' +
  79.           '</tr>' +
  80.           '<tr style="height: ' + aParent.LayerButton[aType].imageBorders.bottom + 'px;">' +
  81.             '<<bl>><<bm>><<br>>' +
  82.           '</tr>' +
  83.         '</table>';
  84.       html_contents = html_contents.replace(/<<(\w+)>>/g, '<td style="padding: 0px; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod=scale,src=\'' + /*<<'#AbsoluteBaseURL#' +*/ /*>>*/ aParent.LayerButton[aType].imageSource.prefix + '$1' + aParent.LayerButton[aType].imageSource.suffix + '\');"></td>');
  85.       $('body').append(html_contents);
  86.     },
  87.     assignHoverLayer: function(aParent)
  88.     {
  89.       // Bind events
  90.       $(aParent).hover(
  91.         // Over
  92.         function()
  93.         {
  94.           // Only show the hover layer when no selected layer is visible
  95.           var selectedLayer = $.LayerButton.findLayer(aParent, 'selected', false);
  96.           if (selectedLayer.length && selectedLayer[0].visible) return;
  97.           // Resize the hover element to fit the button size
  98.           $.LayerButton.updateLayerDimensions(aParent, 'hover');
  99.           // Fade in
  100.           $.LayerButton.showLayer(aParent, 'hover');
  101.         },
  102.         // Out
  103.         function()
  104.         {
  105.           // Fade out
  106.           $.LayerButton.hideLayer(aParent, 'hover');
  107.         }
  108.       );
  109.     },
  110.     assignSelectedLayer: function(aParent)
  111.     {
  112.       // Bind events
  113.       $(aParent).click(
  114.         function()
  115.         {
  116.           $(aParent).LayerButton_Select(false);
  117.         }
  118.       );
  119.     },
  120.     findLayer: function(aParent, aType, aAutoCreate)
  121.     {
  122.       // Try to find the layer
  123.       var layerID = $.LayerButton.getLayerID(aParent, aType);
  124.       var layer   = $('#' + layerID);
  125.       // If the layer does not exist, create it on the fly
  126.       if (!layer.length && aAutoCreate)
  127.       {
  128.         $.LayerButton.createLayer(aParent, aType);
  129.         layer = $('#' + layerID);
  130.       }
  131.       return layer;
  132.     },
  133.     updateLayerDimensions: function(aParent, aType)
  134.     {
  135.       var layer = $.LayerButton.findLayer(aParent, aType, true);
  136.       if (!layer.length) return;
  137.       
  138.       // Calculate new rectangle
  139.       var new_pos  = $(aParent).offset({ scroll: false });
  140.       var new_size = {
  141.         'width':      $(aParent).innerWidth(),
  142.         'height':     $(aParent).innerHeight()
  143.       };
  144.       // Calculate current rectangle
  145.       var old_pos  = layer.offset({ scroll: false });
  146.       var old_size = {
  147.         'left':       layer.left,
  148.         'top':        layer.top,
  149.         'width':      layer.innerWidth(),
  150.         'height':     layer.innerHeight()
  151.       };
  152.       
  153.       // Update CSS properties of the hover element if necessary
  154.       if (
  155.            (new_pos.left    != old_pos.left) ||
  156.            (new_pos.top     != old_pos.top) ||
  157.            (new_size.width  != old_size.width) ||
  158.            (new_size.height != old_size.height)
  159.          )
  160.       {
  161.         // Store the previous opacity value
  162.         var oldOpacity = layer.css('opacity');
  163.         // Set the opacity to 0 to make the layer invisible, move it to its new
  164.         // location and resize it to fit the parent LayerButton
  165.         layer.css(
  166.           {
  167.             'opacity':    0,
  168.             'left':       new_pos.left,
  169.             'top':        new_pos.top,
  170.             'width':      new_size.width,
  171.             'height':     new_size.height - aParent.LayerButton[aType].imageBorders.top - aParent.LayerButton[aType].imageBorders.bottom
  172.           }
  173.         );
  174.         // Restore the opacity back to its previous value
  175.         layer.css(
  176.           {
  177.             'opacity':    oldOpacity
  178.           }
  179.         );
  180.       }
  181.     },
  182.     resetLayer: function(aParent, aType)
  183.     {
  184.       var layer = $.LayerButton.findLayer(aParent, aType, false);
  185.       if (!layer.length) return;
  186.       
  187.       layer.css(
  188.         {
  189.           'width':  '10px',
  190.           'height': '10px'
  191.         }
  192.       );
  193.     },
  194.     showLayer: function(aParent, aType)
  195.     {
  196.       var layer = $.LayerButton.findLayer(aParent, aType, true);
  197.       if (!layer.length) return;
  198.       
  199.       $.LayerButton._showLayer(
  200.         layer,
  201.         aParent.LayerButton[aType].fadeIn,
  202.         aParent.LayerButton[aType].maxOpacity
  203.       );
  204.     },
  205.     hideLayer: function(aParent, aType)
  206.     {
  207.       var layer = $.LayerButton.findLayer(aParent, aType, false);
  208.       if (!layer.length) return;
  209.       
  210.       $.LayerButton._hideLayer(layer, aParent.LayerButton[aType].fadeOut);
  211.     },
  212.     _showLayer: function(aLayer, aAnimation, aMaxOpacity)
  213.     {
  214.       aLayer
  215.         .queue('fx', [])
  216.         .stop();
  217.       aLayer[0].visible     = true;
  218.       aLayer[0].hiddenSince = 0;
  219.       
  220.       if (aAnimation)
  221.       {
  222.         aLayer
  223.           .animate(
  224.             {
  225.               opacity: (aMaxOpacity ? aMaxOpacity : 0.99)
  226.             },
  227.             aAnimation.speed,
  228.             aAnimation.easing
  229.           );
  230.       }
  231.       else
  232.       {
  233.         aLayer.css(
  234.           {
  235.             opacity: (aMaxOpacity ? aMaxOpacity : 0.99)
  236.           }
  237.         );
  238.       }
  239.     },
  240.     _hideLayer: function(aLayer, aAnimation)
  241.     {
  242.       aLayer
  243.         .queue('fx', [])
  244.         .stop();
  245.       aLayer[0].visible = false;
  246.       
  247.       if (aAnimation)
  248.       {
  249.         aLayer
  250.           .animate(
  251.             {
  252.               opacity: 0
  253.             },
  254.             aAnimation.speed,
  255.             aAnimation.easing
  256.           )
  257.           .queue(
  258.             function()
  259.             {
  260.               aLayer[0].hiddenSince = (new Date()).getTime();
  261.               $(aLayer).dequeue();
  262.             }
  263.           );
  264.       }
  265.       else
  266.       {
  267.         aLayer.css(
  268.           {
  269.             opacity: 0
  270.           }
  271.         );
  272.         aLayer[0].hiddenSince = (new Date()).getTime();
  273.       }
  274.     },
  275.     swapVisibleLayer: function(aParent, aHideLayerType, aShowLayerType, aBypassFadeIn)
  276.     {
  277.       var layerToHide = $.LayerButton.findLayer(aParent, aHideLayerType, false);
  278.       var layerToShow = $.LayerButton.findLayer(aParent, aShowLayerType, true);
  279.       if (layerToShow.length)
  280.       {
  281.         $.LayerButton._showLayer(
  282.           layerToShow,
  283.           aBypassFadeIn ? 0 : aParent.LayerButton[aShowLayerType].fadeIn,
  284.           aParent.LayerButton[aShowLayerType].maxOpacity
  285.         );
  286.       }
  287.       if (layerToHide.length)
  288.       {
  289.         $.LayerButton._hideLayer(
  290.           layerToHide,
  291.           aBypassFadeIn ? 0 : aParent.LayerButton[aShowLayerType].fadeIn
  292.         );
  293.       }
  294.     }
  295.   });
  296.   
  297.   // Add new public functionality to all jQuery objects
  298.   $.fn.extend(
  299.     {
  300.       LayerButton: function(aAttributes)
  301.       {
  302.         // Assign one unique group class ID to the whole group of
  303.         // selected elements
  304.         var uniqueGroupID = '';
  305.         if (aAttributes.groupID)
  306.         {
  307.           uniqueGroupID = aAttributes.groupID;
  308.         }
  309.         else
  310.         {
  311.           $.LayerButton.runningGroupID = $.LayerButton.runningGroupID + 1;
  312.           uniqueGroupID = $.LayerButton.runningGroupID;
  313.         }
  314.         // Initialize LayerButton functionality for each of the
  315.         // selected elements one by one
  316.         return this.each(
  317.           function()
  318.           {
  319.             // Save the given LayerButton attributes in the DOM node
  320.             // so that they can be accessed later
  321.             this.LayerButton = {};
  322.             $.extend(this.LayerButton, aAttributes);
  323.             // Create a unique button class ID
  324.             $.LayerButton.runningButtonID = $.LayerButton.runningButtonID + 1;
  325.             $.extend(this.LayerButton, {
  326.               'uniqueGroupID':  uniqueGroupID,
  327.               'uniqueButtonID': $.LayerButton.runningButtonID
  328.             });
  329.             $(this)
  330.               .addClass('lb-button')
  331.               .attr('lbgroupid',  this.LayerButton.uniqueGroupID)
  332.               .attr('lbbuttonid', this.LayerButton.uniqueButtonID);
  333.             // Has a hover layer been specified?
  334.             if (this.LayerButton.hover)
  335.             {
  336.               // Yes, bind events
  337.               $.LayerButton.assignHoverLayer(this);
  338.             }
  339.             // Has a selected layer been specified?
  340.             if (this.LayerButton.selected)
  341.             {
  342.               // Yes, bind events
  343.               $.LayerButton.assignSelectedLayer(this);
  344.             }
  345.             // Do we need to listen to events?
  346.             if (this.LayerButton.events)
  347.             {
  348.               // Handle click event
  349.               if (this.LayerButton.events.click)
  350.               {
  351.                 $(this).bind('click', this.LayerButton.events.click);
  352.               }
  353.             }
  354.           }
  355.         );
  356.       },
  357.       LayerButton_Select: function(aBypassFadeIn)
  358.       {
  359.         return this.each(
  360.           function()
  361.           {
  362.             var clickedButtonID = $(this).attr('lbbuttonid');
  363.             if (!clickedButtonID) return;
  364.             
  365.             // Resize the selected element to fit the button size
  366.             $.LayerButton.updateLayerDimensions(this, 'selected');
  367.             // Hide hover layer and show selected layer at the same time
  368.             $.LayerButton.swapVisibleLayer(this, 'hover', 'selected', aBypassFadeIn);
  369.             // Check if the clicked button belongs to a group
  370.             var clickedGroupID = $(this).attr('lbgroupid');
  371.             if (clickedGroupID)
  372.             {
  373.               // Find previously selected button(s) within the same group
  374.               var previouslySelected = $('.lb-button[lbgroupid=' + clickedGroupID + '][lbbuttonid!=' + clickedButtonID + ']');
  375.               // Hide selected layer of previously selected button (if any)
  376.               if (previouslySelected.length)
  377.               {
  378.                 previouslySelected.each(
  379.                   function()
  380.                   {
  381.                     $.LayerButton.hideLayer(this, 'selected');
  382.                   }
  383.                 );
  384.               }
  385.             }
  386.           }
  387.         );
  388.       }
  389.     }
  390.   );
  391.  
  392.   /*
  393.   $(window).resize(
  394.     function()
  395.     {
  396.       // Hide all hover elements when the window is being resized
  397.       $('.taskdlg-button-hover')
  398.         .stop()
  399.         .taskdlg_reset_hover();
  400.     }
  401.   );
  402.   */
  403.   
  404. })(jQuery);