|
|
<div class="detailsPopupContainer">
<div class="popupDialog">
<div scope="DetailsContent" class="screenContent nested0">
<div id="tabs">
<ul>
<li><a href="#tabs-1">Video Details</a></li>
<li>
<a href="#tabs-2"><span>
<div scope="ReviewsInfo" style="display: inline;">
<!--showfrom:comm-empty:yes-->
No user reviews yet
<!--showstop:comm-empty:yes-->
<!--showfrom:comm-empty:no-->
{CommCount} user review(s)
<!--showstop:comm-empty:no-->
</div></span>
</a>
</li>
</ul>
<div id="tabs-1">
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td colspan="2">
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<div class="videoPackshot" style="color: {Category}">{Category} video category</div>
</td>
<td valign="top" style="padding-left:20px;">
<b>{ID}</b><br />
<div style="height:25px;display:block;">{Name}</div><br />
<div scope="ReviewsInfo2">
<a href="javascript:void(0)" class="reviewsLink">
<!--showfrom:comm-empty:yes-->
Be first to review this video!
<!--showstop:comm-empty:yes-->
<!--showfrom:comm-empty:no-->
User Rating: {Rating} / {CommCount} review(s)
<!--showstop:comm-empty:no-->
</a>
</div>
</td>
</tr>
</table>
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td colspan="2">
<div>
<h3>Description:</h3>
</div>
<div class="ui-widget-content ui-corner-all" style="display:block;overflow:hidden;overflow-y:scroll;height:100px;padding:10px;">
{Description}
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table cellpadding="0" cellspacing="0" border="0" width="100%" style="margin-top:20px;">
<tr>
<td>
<div scope="AlikeVideosHeader" class="ui-widget ui-widget-content ui-corner-all" style="padding: 10px;">
<b>Other videos in this category</b> (showing {FromItemNum}-{ToItemNum} of {TotalItemCount})
</div>
</td>
<td style="width:180px;text-align:right;"><div scope="AlikeVideosPager"></div></td>
</tr>
<tr>
<td colspan="2">
<div scope="AlikeVideosRepeater">
<div scope="VideoItem"></div>
</div>
</td>
</tr>
</table>
</div>
<div id="tabs-2">
<div scope="CommentsContent" class="screenContent nested1">
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td>
<table cellpadding="0" cellspacing="5px" border="0" class="ui-widget-content ui-corner-all ui-state-hover" style="padding:5px;font-weight:bold;margin-bottom:10px;">
<tr>
<td style="text-align:right;">Total number of reviews:</td>
<td>{CommCount}</td>
<td rowspan="2" style="padding-left:20px;"><a href="javascript:void(0)" class="buttonAddNew">Write New Comment</a></td>
</tr>
<tr>
<td style="text-align:right;">Average user rating:</td>
<td>{Rating}</td>
</tr>
</table>
</td>
</tr>
</table>
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td>
<div scope="CommentsHeader" class="ui-widget-content ui-corner-all" style="padding: 10px;">
<b>User Comments:</b> (showing {FromItemNum}-{ToItemNum} of {TotalItemCount})
</div>
</td>
<td style="width:180px;text-align: right;"><div scope="CommentsPager"></div></td>
</tr>
</table>
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td>
<div scope="CommentsRepeater">
<div class="commentPanel ui-widget ui-widget-content ui-corner-all">
<div class="commentHeader">
<span class="ui-state-default ui-corner-all" style="padding:2px;">#{Num}</span> <b>Posted by <u>{Author}</u> on {Date}</b>
<div style="float:right;padding:2px;" class="ui-state-highlight ui-corner-all">Rated {Rated} of 5</div>
</div>
{Text}
</div>
</div>
</td>
</tr>
</table>
</div>
<div scope="AddCommentScreen" class="screenContent nested2">
<table cellpadding="0" cellspacing="10px" border="0" class="ui-widget-content ui-corner-all" style="padding:10px;margin-bottom:10px;">
<tr>
<td style="text-align:right;">Enter your name:</td>
<td><input type="text" class="inputName" style="width:300px;" /></td>
</tr>
<tr>
<td style="text-align:right;">Rate this video:</td>
<td>
<div class="panelRadios">
<input type="radio" id="radioRate1" name="VideoRating" value="1" /><label for="radioRate1">1</label>
<input type="radio" id="radioRate2" name="VideoRating" value="2" /><label for="radioRate2">2</label>
<input type="radio" id="radioRate3" name="VideoRating" value="3" /><label for="radioRate3">3</label>
<input type="radio" id="radioRate4" name="VideoRating" value="4" /><label for="radioRate4">4</label>
<input type="radio" id="radioRate5" name="VideoRating" value="5" checked="checked" /><label for="radioRate5">5</label>
</div>
</td>
</tr>
<tr>
<td style="text-align:right;" valign="top">Your comment:</td>
<td><textarea cols="20" rows="5" style="overflow:scroll;width:300px;" class="inputComment"></textarea></td>
</tr>
<tr>
<td colspan="2">
<div scope="ErrorDisplay">
<div class="ui-widget">
<div style="padding: 0pt 0.7em;" class="ui-state-error ui-corner-all">
<p><span style="float: left; margin-right: 0.3em;" class="ui-icon ui-icon-alert"></span><strong>Error:</strong> {ErrorMessage}</p>
</div>
</div>
</div>
</td>
</tr>
</table>
<div>
<a href="javascript:void(0)" class="buttonSubmit">Submit Comment</a>
<a href="javascript:void(0)" class="buttonCancel">Cancel</a>
</div>
</div>
<div class="screenWait nested1" style="display: none;">
</div>
</div>
</div>
</div>
<div class="screenWait nested0" style="display: none;">
</div>
</div>
<script language="javascript" type="text/javascript">
; (function($)
{
$(document).ready(function()
{
$(".popupDialog").dialog({
autoOpen: false,
width: 900,
height: 600,
resizable: false,
modal: true,
draggable: false
});
$(".buttonPopup").live("click", function()
{
var videoID = $(this).attr("videoID");
$(".popupDialog").data("VideoID", videoID);
var dialogTitle = "Video Details Popup: <span style='text-decoration:underline;'>" + videoID + "</span>";
$(".popupDialog").dialog("option", "title", dialogTitle);
$(".popupDialog").dialog("open");
$(".popupDialog .screenContent.nested0").css("display", "none");
$(".popupDialog .screenWait.nested0").css("display", "block");
AspNetDaST.Action('{ScopeClientID}', 'LoadContent', videoID);
});
AspNetDaST.AddRefreshHandler("{DetailsContent_ScopeID}", function()
{
// setup tab control
$(".popupDialog #tabs").tabs({
select: function(e, ui)
{
if (ui.index == 1)
{
$(".popupDialog .screenContent.nested1").css("display", "none");
$(".popupDialog .screenContent.nested2").css("display", "none");
$(".popupDialog .screenWait.nested1").css("display", "block");
AspNetDaST.Action('{ScopeClientID}', 'LoadComments', '');
}
}
});
$(".screenContent .reviewsLink").click(function()
{
$(".popupDialog #tabs").tabs("select", 1);
return false;
});
$(".popupDialog .screenWait.nested0").css("display", "none");
$(".popupDialog .screenContent.nested0").css("display", "block");
});
AspNetDaST.AddRefreshHandler("{CommentsContent_ScopeID}", function()
{
$(".popupDialog .screenContent.nested1 .buttonAddNew").button();
$(".popupDialog .screenContent.nested1 .buttonAddNew").click(function()
{
$(".popupDialog .screenContent.nested1").css("display", "none");
$(".popupDialog .screenContent.nested2").css("display", "none");
$(".popupDialog .screenWait.nested1").css("display", "block");
AspNetDaST.Action('{ScopeClientID}', 'ShowAddCommentScreen', '');
return false;
});
$(".popupDialog .screenWait.nested1").css("display", "none");
$(".popupDialog .screenContent.nested1").css("display", "block");
});
AspNetDaST.AddRefreshHandler("{AddCommentScreen_ScopeID}", function()
{
$(".popupDialog .screenContent.nested2 .panelRadios").buttonset();
$(".popupDialog .screenContent.nested2 .buttonSubmit").button();
$(".popupDialog .screenContent.nested2 .buttonCancel").button();
$(".popupDialog .screenContent.nested2 .buttonSubmit").click(function()
{
var userInput =
{
"Name": $(".popupDialog .screenContent.nested2 .inputName").val(),
"Rated": parseInt($(".popupDialog .screenContent.nested2 .panelRadios input:radio:checked").val()),
"Comment": $(".popupDialog .screenContent.nested2 .inputComment").val()
};
$(".popupDialog .screenContent.nested1").css("display", "none");
$(".popupDialog .screenContent.nested2").css("display", "none");
$(".popupDialog .screenWait.nested1").css("display", "block");
AspNetDaST.Action('{ScopeClientID}', 'SubmitComment', JSON.stringify(userInput));
return false;
});
$(".popupDialog .screenContent.nested2 .buttonCancel").click(function()
{
$(".popupDialog .screenContent.nested1").css("display", "none");
$(".popupDialog .screenContent.nested2").css("display", "none");
$(".popupDialog .screenWait.nested1").css("display", "block");
AspNetDaST.Action('{ScopeClientID}', 'CancelComment', '');
return false;
});
$(".popupDialog .screenWait.nested1").css("display", "none");
$(".popupDialog .screenContent.nested2").css("display", "block");
});
AspNetDaST.AddRefreshHandler("{ErrorDisplay_ScopeID}", function()
{
$(".popupDialog .screenWait.nested1").css("display", "none");
$(".popupDialog .screenContent.nested2").css("display", "block");
});
});
})(jQuery);
</script>
</div>
|
By viewing downloads associated with this article you agree to the Terms of Service and the article's licence.
If a file you wish to view isn't highlighted, and is a text file (not binary), please
let us know and we'll add colourisation support for it.
Software Architect with over 15 years in IT field. Started with deep math and C++ Computer Vision software. Currently in .NET and PHP web development. Creator of DaST pattern, open-source frameworks, and plugins. Interested in cutting Edge IT, open-source, Web 2.0, .NET, MVC, C++, Java, jQuery, Mobile tech, and extreme sports.
Submit an article or tip