DotNetNukeŽ Silverlight ToolBar
if (!window.ToolBar)
window.ToolBar = {};
ToolBar.Page = function()
{
}
// Set the size and number of buttons for the ToolBar
var ButtonSize = 55;
var NumberOfButtonsToShow = 4;
var ModuleID;
var ToolBar;
var ToolBarWindow;
var objBox = new Array();
var ToolbarBoxXAMLFile;
var CurrentLocation = 0;
var scrollPosition = 0;
var NumberOfButtons = 0;
var LeftButton;
var RightButton;
var storyboard;
var animation;
var ToolBarWidth = NumberOfButtonsToShow * ButtonSize;
ToolBar.Page.prototype =
{
handleLoad: function(control, userContext, rootElement)
{
// The Module ID is passed in the userContext
ModuleID = userContext;
// Set the number of buttons
NumberOfButtons = eval('ToolbarPhotoArray_' + ModuleID).length - 1;
// Set number of button to show
NumberOfButtonsToShow = eval('NumberOfButtonsToShow_' + ModuleID);
ToolBarWidth = NumberOfButtonsToShow * ButtonSize;
// Location of Box.xaml
ToolbarBoxXAMLFile = eval('ToolbarBoxXAMLFile_' + ModuleID);
// Get a reference to the various XAML elements
ToolBar = rootElement.findName("ToolBar");
ToolBarWindow = rootElement.findName("ToolBarWindow");
LeftButton = rootElement.findName("LeftButton");
RightButton = rootElement.findName("RightButton");
storyboard = rootElement.findName("Movebar");
animation = rootElement.findName("animateToolbar");
// Add the buttons to the Toolbar
for(i = 0; i <= NumberOfButtons; i++)
{
objBox[i] = new box("box" + i, ToolBar, CurrentLocation, ToolbarBoxXAMLFile, eval('ToolbarPhotoArray_'+ ModuleID)[i], eval('ToolbarURLArray_'+ ModuleID)[i]);
CurrentLocation = CurrentLocation + ButtonSize;
}
// Set the Clipping on the ToolBarWindow (Canvas)
// This causes only a portion of the ToolBar (that is also on the ToolBarWindow Canvas) to show
SetToolbarWindowClip(ToolBarWindow, ToolBarWidth);
// Always hide the LeftButton on page load
LeftButton.visibility = "Collapsed";
// Hide the RightButton if it is not needed
if (NumberOfButtons * ButtonSize <= (ToolBarWidth - 1))
{
RightButton.visibility = "Collapsed";
}
else
{
// Set the position of the RightButton
RightButton["Canvas.Left"] = ToolBarWidth + (ButtonSize/2);
}
// Attach event handlers to Left and Right buttons
LeftButton.addEventListener("MouseLeftButtonDown", Silverlight.createDelegate(this, this.handleMouseDown));
RightButton.addEventListener("MouseLeftButtonDown", Silverlight.createDelegate(this, this.handleMouseDown));
},
handleMouseDown: function(sender, eventArgs)
{
if(sender.Name == "LeftButton") // LeftButton
{
// Only advance Toolbar (scrollPosition) if it is not already at the the
// first Button
if(scrollPosition != 0)
{
// Move the scrollPosition
scrollPosition+=ButtonSize;
// If the LeftButton is clicked then the RightButton needs to show
RightButton.visibility = "Visible";
// Do not show LeftButton if the first Button is showing
if(scrollPosition == 0)
{
LeftButton.visibility = "Collapsed";
}
else
{
LeftButton.visibility = "Visible";
}
}
}
if(sender.Name == "RightButton") // RightButton
{
// Only advance Toolbar (scrollPosition) if there are Buttons to show
if(scrollPosition >= -((NumberOfButtons * ButtonSize) - ToolBarWidth))
{
// Move the scrollPosition
scrollPosition-=ButtonSize;
// If the RightButtonis clicked then the LeftButton needs to show
LeftButton.visibility = "Visible";
// Do not show RightButton if the last Button is showing
if(scrollPosition == -(((NumberOfButtons + 1) * ButtonSize) - ToolBarWidth))
{
RightButton.visibility = "Collapsed";
}
else
{
RightButton.visibility = "Visible";
}
}
}
// Move the ToolBar by setting it to the current scrollPosition
animation.To = scrollPosition;
storyboard.Begin();
}
}
function SetToolbarWindowClip(objToolBarWindow, dblToolBarWidth)
{
// Since the RectangleGeometry cannot be edited visually in Expression Blend
// It is ok to create it dynamically
var xamlFragment;
// Retrieve a reference to the plug-in.
var plugin = objToolBarWindow.getHost();
// Define a XAML fragment for RectangleGeometry
xamlFragment = '<RectangleGeometry Rect="0,0,xxx,100" />';
// Set the width of the RectangleGeometry to ToolBarWidth
xamlFragment = xamlFragment.replace("xxx", dblToolBarWidth);
// Create the XAML fragment
ToolBarClip = plugin.content.createFromXaml(xamlFragment);
// Set the Clip of the ToolbarWindow (Canvas) to the XAML fragment
objToolBarWindow.Clip = ToolBarClip;
}