using
MonoSoftware.MonoX.Utilities;
using
MonoSoftware.Web;
using
System;
using
System.Collections.Generic;
using
System.ComponentModel;
using
System.Web.UI;
using
MonoSoftware.MonoX.oEmbed;
namespace
MonoSoftware.MonoX.ModuleGallery
{
/// <summary>
/// Slide show Web part used to display a sliding list of images.
/// </summary>
[ParseChildren(
true
), PersistChildren(
false
)]
public
partial
class
SlideShow : BaseAutoRegisterPart, IExcludeAutoRegisterPart
{
#region Properties
private
int
_slideWidth = 460;
/// <summary>
/// Width of the images.
/// </summary>
public
int
SlideWidth
{
get
{
return
_slideWidth; }
set
{ _slideWidth = value; }
}
private
List<SlideShowItem> _slideShowItems;
/// <summary>
/// List of SlideShowItems that hold the image, url and the title of each slide.
/// </summary>
[DesignerSerializationVisibility(DesignerSerializationVisibility.Visible)]
[PersistenceMode(PersistenceMode.InnerProperty)]
public
List<SlideShowItem> SlideShowItems
{
get
{
if
(_slideShowItems ==
null
)
_slideShowItems =
new
List<SlideShowItem>();
return
_slideShowItems;
}
set
{ _slideShowItems = value; }
}
private
int
_oEmbedHeight = 0;
/// <summary>
/// Max height of oEmbed content.
/// </summary>
public
int
oEmbedHeight
{
get
{
return
_oEmbedHeight; }
set
{ _oEmbedHeight = value; }
}
private
int
_oEmbedWidth = 0;
/// <summary>
/// Max width of oEmbed content.
/// </summary>
public
int
oEmbedWidth
{
get
{
return
_oEmbedWidth; }
set
{ _oEmbedWidth = value; }
}
#endregion
#region Page events
protected
void
Page_PreRender(
object
sender, EventArgs e)
{
string
js = @"
var currentPosition = 0;
var slideWidth =
" + this.SlideWidth.ToString() + @"
;
var slides = $(
'.slide'
);
var numberOfSlides = slides.length;
$(document).ready(function(){
SlideShow();
var prm = Sys.WebForms.PageRequestManager.getInstance();
if
(prm !=
null
) {
prm.add_endRequest(function(s, e) {
SlideShow();
});
}
});
function SlideShow() {
slides = $(
'.slide'
);
numberOfSlides = slides.length;
$(
'#slidesContainer'
).css(
'overflow'
,
'hidden'
);
slides
.wrapAll(
'<div id=""slideInner""></div>'
)
// Float left to display horizontally, readjust .slides width
.css({
'float'
:
'left'
,
'width'
: slideWidth
});
$(
'#slideInner'
).css(
'width'
, slideWidth * numberOfSlides);
$(
'#slideshow'
)
.prepend(
'<span class=""control"" id=""leftControl"">Clicking moves left</span>'
)
.append(
'<span class=""control"" id=""rightControl"">Clicking moves right</span>'
);
manageControls(currentPosition);
$(
'.control'
)
.bind(
'click'
, function(){
currentPosition = ($(
this
).attr(
'id'
)==
'rightControl'
) ? currentPosition+1 : currentPosition-1;
manageControls(currentPosition);
$(
'#slideInner'
).animate({
'marginLeft'
: slideWidth*(-currentPosition)
});
});
}
function manageControls(position){
if
(position==0){ $(
'#leftControl'
).hide() }
else
{ $(
'#leftControl'
).show() }
if
(position==numberOfSlides-1){ $(
'#rightControl'
).hide() }
else
{ $(
'#rightControl'
).show() }
}
";
JavascriptUtility.RegisterStartupScript(
this
,
this
.GetType(),
"slideShowScript"
, js,
true
);
BindData();
}
#endregion
#region Methods
/// <summary>
/// Apply web part property changes (Note: Overridden property still needs to be marked as <see cref="MonoSoftware.MonoX.WebPartApplyChangesAttribute"/>).
/// <para>
/// Note: Marked with <see cref="MonoSoftware.MonoX.WebPartApplyChangesAttribute"/> attribute so it is called from ApplyChanges event in the editor part to refresh the module appearance.
/// </para>
/// </summary>
[WebPartApplyChanges]
public
override
void
ApplyChanges()
{
base
.ApplyChanges();
BindData();
}
private
void
BindData()
{
if
(
this
.SlideShowItems !=
null
)
{
rptItems.DataSource =
this
.SlideShowItems;
rptItems.DataBind();
}
}
/// <summary>
/// Adds a slide show item to the list.
/// </summary>
/// <param name="imageUrl">Image URL.</param>
/// <param name="url">Navigation URL.</param>
/// <param name="title">Image title.</param>
public
void
AddItem(
string
imageUrl,
string
url,
string
title)
{
this
.SlideShowItems.Add(
new
SlideShowItem(UrlFormatter.ResolveUrl(imageUrl), url, title));
}
/// <summary>
/// Formats the URL of the slider resource, supports oEmbed protocol.
/// </summary>
/// <param name="imageUrl">Image URL.</param>
/// <param name="title">Image title.</param>
/// <param name="additionalAttributes">Any additional attributes that should be displayed in the img tag.</param>
/// <returns>Formatted URL.</returns>
public
string
FormatUrl(
string
imageUrl,
string
title,
string
additionalAttributes)
{
if
(!
string
.IsNullOrEmpty(imageUrl))
{
if
(imageUrl.Trim().StartsWith(
"["
))
{
Embedder embedder =
new
Embedder();
embedder.MaxWidth =
this
.oEmbedWidth;
embedder.MaxHeight =
this
.oEmbedHeight;
return
embedder.EmbedContent(imageUrl);
}
else
return
string
.Format(
"<img src=\"{0}\" alt=\"{1}\" {2}/>"
, UrlFormatter.ResolveUrl(imageUrl), title, additionalAttributes);
}
else
return
string
.Empty;
}
#endregion
}
#region Related classes
/// <summary>
/// Slide show item.
/// </summary>
public
class
SlideShowItem
{
private
string
_url;
/// <summary>
/// Url to which the user is transferred when he clicks on a slide.
/// </summary>
[NotifyParentProperty(
true
), Browsable(
true
), Bindable(
true
)]
public
string
Url
{
get
{
return
_url; }
set
{ _url = value; }
}
private
string
_imageUrl;
/// <summary>
/// Image URL of the slide.
/// </summary>
[NotifyParentProperty(
true
), Browsable(
true
), Bindable(
true
)]
public
string
ImageUrl
{
get
{
return
_imageUrl; }
set
{ _imageUrl = value; }
}
private
string
_title;
/// <summary>
/// Title of the slide.
/// </summary>
[NotifyParentProperty(
true
), Browsable(
true
), Bindable(
true
)]
public
string
Title
{
get
{
return
_title; }
set
{ _title = value; }
}
/// <summary>
/// Constructor.
/// </summary>
public
SlideShowItem()
:
this
(String.Empty, String.Empty, String.Empty)
{ }
/// <summary>
/// Constructor.
/// </summary>
/// <param name="imageUrl">Image URL.</param>
/// <param name="url">Redirect URL.</param>
/// <param name="title">Slide title.</param>
public
SlideShowItem(
string
imageUrl,
string
url,
string
title)
{
this
.Url = url;
this
.ImageUrl = imageUrl;
this
.Title = title;
}
}
#endregion
}
The usage is same as before - note that I included the new haight and width properties for the embedded resources: