8 files changed, 577 insertions, 0 deletions
diff --git a/demos/quickstart/protected/controls/Comments/CommentBlock.php b/demos/quickstart/protected/controls/Comments/CommentBlock.php
new file mode 100644
index 00000000..63b25c72
--- /dev/null
+++ b/demos/quickstart/protected/controls/Comments/CommentBlock.php
@@ -0,0 +1,107 @@
+<?php
+
+Prado::using('System.Data.*');
+Prado::using('System.Web.UI.ActiveControls.*');
+Prado::using('System.Data.ActiveRecord.TActiveRecordManager');
+
+$db = new TDbConnection('mysql:host=localhost;dbname=xxxx', 'yyyy', 'zzzz');
+$manager = TActiveRecordManager::getInstance();
+$manager->setDbConnection($db);
+
+class CommentRecord extends TActiveRecord
+{
+	public $id;
+	public $username;
+	public $date_added;
+	public $page;
+	public $block_id;
+	public $content;
+
+	public static $_tablename='qs_comments';
+
+	public static function finder()
+	{
+		return self::getRecordFinder('CommentRecord');
+	}
+}
+
+class CommentBlock extends TTemplateControl
+{
+	private $_page;
+
+	function onLoad($param)
+	{
+		if(!$this->Page->IsCallBack)
+		{
+			$count = array();
+			$data = $this->getCommentData();
+			foreach($data as $r)
+			{
+				if(!isset($count[$r->block_id]))
+					$count[$r->block_id]=0;
+				$count[$r->block_id]++;
+			}
+			$js = "var comment_count = ".TJavascript::encode($count).";\n";
+			$this->Page->ClientScript->registerBeginScript('count',$js);
+			$this->comments->dataSource = $data;
+			$this->comments->dataBind();
+		}
+	}
+
+	function getCommentData()
+	{
+		return CommentRecord::finder()->findAllByPage($this->getCurrentPagePath());
+	}
+
+	function add_comment($sender, $param)
+	{
+		if(!$this->Page->IsValid)
+			return;
+		$record = new CommentRecord;
+		$record->username = $this->username->Text;
+		$record->date_added = date('Y-m-d h:i:s');
+		$record->page = $this->getCurrentPagePath();
+		$record->block_id = $this->block_id->Value;
+		$record->content = $this->content->Text;
+		$record->save();
+
+		$this->content->Text = '';
+		$this->password->Text = '';
+		$cc = $this->Page->CallbackClient;
+		$cc->appendContent('comment-list', $this->format_message($record));
+		$cc->callClientFunction('hide_add_comment');
+		$cc->callClientFunction('increment_count_tag', $record->block_id);
+		if(!$this->Page->IsCallBack)
+		{
+			$this->comments->dataSource = $this->getCommentData();
+			$this->comments->dataBind();
+		}
+	}
+
+	protected function getCurrentPagePath()
+	{
+		if(is_null($this->_page))
+		{
+			$page = str_replace($this->Service->BasePath, '', $this->Page->Template->TemplateFile);
+			$this->_page = str_replace('\\', '/', $page);
+		}
+		return $this->_page;
+	}
+
+	function validate_credential($sender, $param)
+	{
+		$param->IsValid = $this->password->Text == 'Prado';
+	}
+
+	protected function format_message($record)
+	{
+		$username=htmlspecialchars($record->username);
+		$content=nl2br(htmlspecialchars($record->content));
+		return <<<EOD
+	<div class="comment c-{$record->block_id}">
+		<span><a href="#">{$username}</a> on {$record->date_added}.</span>
+		<div>{$content}</div>
+	</div>
+EOD;
+	}
+}
+\ No newline at end of file
diff --git a/demos/quickstart/protected/controls/Comments/CommentBlock.tpl b/demos/quickstart/protected/controls/Comments/CommentBlock.tpl
new file mode 100644
index 00000000..831938f2
--- /dev/null
+++ b/demos/quickstart/protected/controls/Comments/CommentBlock.tpl
@@ -0,0 +1,63 @@
+<com:TStyleSheet StyleSheetUrl=<%~ comments.css %> />
+<!-- 
+	<%~ right_back.png %>
+	<%~ right_tag.png %>  
+	<%~ tag.gif %>  
+-->
+<h2 style="margin-bottom: 0.4em; margin-top: 2em; border-bottom: 0 none" id="comments-header">User Comments</h2>
+<div id="user-comments">
+	<ul id="comment-nav">
+		<li><a href="#comment-list" style="display:none" id="show-comment-link" >View Comments</a></li>
+		<li><a href="#add-comment" class="active" id="add-comment-link">Add New Comment</a></li>
+	</ul>
+	<a href="javascript:;" class="right-tab" style="display:none" id="close-comments">Close</a>
+	<a href="#" class="right-tab" id="to-top">Top</a>
+<div id="comment-list">
+	<com:TRepeater ID="comments">
+		<prop:ItemTemplate>
+		<%# $this->parent->parent->format_message($this->DataItem) %>
+		</prop:ItemTemplate>
+	</com:TRepeater>
+</div>
+	<div id="add-comment">
+
+		<div class="username">
+			<div>
+			<com:TLabel ForControl="username" Text="Username/Password:" />
+			<span class="hint">(must have 5 or more posts in forum)</span>
+			<com:TRequiredFieldValidator
+				Style="font-weight: bold"
+				ControlToValidate="username"
+				ErrorMessage="*" />
+			</div>
+			<com:TTextBox ID="username" /> /
+			<com:TTextBox ID="password" TextMode="Password" />
+			<com:TActiveCustomValidator
+				ID="credential_validator"
+				ControlToValidate="password"
+				OnServerValidate="validate_credential"
+				ErrorMessage="Incorrect username/password" />
+		</div>
+		<div class="content">
+			<div>
+			<com:TLabel ForControl="content" Text="Comment:" />
+			<com:TRequiredFieldValidator
+				Style="font-weight: bold"
+				ControlToValidate="content"
+				ErrorMessage="*" />
+			</div>
+			<com:TTextBox TextMode="MultiLine" ID="content" />
+			<com:THiddenField ID="block_id" Value="top-content"/>
+		</div>
+
+		<div class="submit">
+			<com:TActiveButton Text="Add Comment" OnClick="add_comment" />
+		</div>
+	</div>
+</div>
+
+<div id="modal-background"></div>
+<com:TClientScript PradoScripts="prado" ScriptUrl=<%~ comments.js %> >
+	var hidden_block_id = '<%= $this->block_id->ClientID %>';
+	var content_textare_id = '<%= $this->content->ClientID %>';
+</com:TClientScript>
diff --git a/demos/quickstart/protected/controls/Comments/comments.css b/demos/quickstart/protected/controls/Comments/comments.css
new file mode 100644
index 00000000..fb03951f
--- /dev/null
+++ b/demos/quickstart/protected/controls/Comments/comments.css
@@ -0,0 +1,226 @@
+body
+{
+	background-image: url(right_back.png);
+	background-position: right;
+	background-repeat: repeat-y;
+}
+
+.languages
+{
+	margin-right: 80px !important;
+}
+
+div#content
+{
+	padding-right: 75px;
+}
+
+.block-content
+{
+	border-bottom: 1px dashed white;
+	border-top: 1px dashed white;
+	border-right: 1px solid white;
+	background-color: White;
+	position: relative;
+	z-index: 0;
+	display: block;
+}
+
+div.block-content
+{
+	margin-top: 0 !important;
+}
+
+.block-hover
+{
+	border-bottom: 1px dashed #0cf;
+	border-top: 1px dashed #0cf;
+	border-right-color: #0cf;
+	border-right-style: solid;
+	background-color: #F9FCFF;
+	padding-right: 9px;
+	margin-right: -9px;
+}
+
+div.block-hover
+{
+	border-bottom: 1px dashed #0cf !important;
+	border-top: 1px dashed #0cf !important;
+	border-right-color: #0cf !important;
+	border-right-style: solid !important;
+	background-color: #F9FCFF !important;
+	padding-right: 9px !important;
+	margin-right: -9px !important;
+}
+
+.block-comment-tag
+{
+	width: 51px;
+	float: right;
+	margin-right: -60px;
+	text-align: center;
+	color: #6495ED;
+	font-weight: bold;
+	cursor: pointer;
+}
+
+.block-comment-tag-ie
+{
+	width: 60px;
+	float: right;
+	margin-right: -69px;
+	text-align: center;
+	color: #6495ED;
+	font-weight: bold;
+	cursor: pointer;
+}
+
+.block-comment-tag div
+{
+	padding-top: 4px;
+	background-image: url(tag.gif);
+	background-repeat: no-repeat;
+	height: 26px;
+}
+
+.block-comment-tag-ie div
+{
+	padding-top: 4px;
+	background-image: url(tag.gif);
+	background-repeat: no-repeat;
+	height: 26px;
+	background-position: 9px 0px;
+}
+
+#user-comments
+{
+	border: 1px solid #B3CC8B;
+	padding: 10px;
+	background-color: #E5EDD7;
+/*	position: absolute;
+	margin-right: 80px; */
+	z-index: 100;
+}
+
+#comment-list, #add-comment
+{
+/*	height: 320px;*/
+	background-color: White;
+	padding: 10px;
+	clear: both;
+	border-top: 10px solid white;
+	margin-top: -3px;
+}
+
+#comment-list
+{
+/*	overflow: auto;*/
+}
+
+#comment-nav, #comment-nav li
+{
+	display: inline;
+	list-style: none;
+	margin: 0;
+	padding: 0;
+}
+
+#comment-nav
+{
+	display: block;
+	height: 26px;
+}
+
+#comment-nav li a
+{
+	float: left;
+	padding: 0.4em 1.5em;
+	color: #9BB190;
+	text-decoration: none;
+	font-weight: bold;
+	background-color: #ECF0EA;
+	margin-right: 5px;
+}
+
+#comment-nav li a.active
+{
+	color: #556B2F;
+	background-color: White;
+}
+
+#user-comments .right-tab
+{
+	text-decoration: none;
+	padding: 0.4em 1em;
+	float:right;
+	color: #556B2F;
+	background-color: White;
+	margin-top: -1.95em;
+}
+
+#comment-list .comment
+{
+	margin-bottom: 2em;
+}
+
+#comment-list .comment span
+{
+	font-size: 0.85em;
+	border-bottom: 1px dotted #ccc;
+	padding: 0.2em;
+	display: block;
+}
+
+#comment-list .comment div
+{
+
+	padding: 0.5em;
+}
+
+#add-comment label
+{
+	font-weight: bold;
+}
+#add-comment .hint
+{
+	font-size: 0.8em;
+	font-weight: normal;
+}
+
+#add-comment .username input
+{
+	width: 180px
+}
+
+#add-comment .content
+{
+	margin-top: 0.5em;
+}
+
+#add-comment .content textarea
+{
+	width: 95%;
+	height: 180px;
+}
+
+
+#add-comment .submit
+{
+	border-top: 1px solid #ccc;
+	margin-top: 1em;
+	padding: 1em;
+}
+
+#add-comment .submit input
+{
+	width: 130px;
+}
+
+
+#modal-background
+{
+	background-color: #556B2F;
+	position: absolute;
+	z-index: 0;
+	filter: Alpha(Opacity=50);
+}
+\ No newline at end of file
diff --git a/demos/quickstart/protected/controls/Comments/comments.js b/demos/quickstart/protected/controls/Comments/comments.js
new file mode 100644
index 00000000..4e0cdf67
--- /dev/null
+++ b/demos/quickstart/protected/controls/Comments/comments.js
@@ -0,0 +1,179 @@
+var currentCommentID;
+
+function show_comment_list()
+{
+	$('comment-list').show();
+	$('add-comment').hide();
+	$('show-comment-link').addClassName("active");
+	$('add-comment-link').removeClassName("active");
+}
+
+function show_add_comment()
+{
+	$('comment-list').hide();
+	$('add-comment').show();
+	$('show-comment-link').removeClassName("active");
+	$('add-comment-link').addClassName("active");
+}
+
+function hide_add_comment()
+{
+	$('user-comments').hide();
+	$('modal-background').hide();
+	$(content_textare_id).value = '';
+	$(currentCommentID).style.zIndex = 0;
+}
+
+function show_comments(block)
+{
+	var id = block.id
+	currentCommentID = id;
+	$(hidden_block_id).value = id;
+	var commentBlock = $('user-comments');
+	var pos = Position.cumulativeOffset(block);
+	var top = pos[1] + block.offsetHeight;
+	commentBlock.style.top = top+"px";
+	commentBlock.style.width = (block.offsetWidth-22)+"px";
+
+	commentBlock.show();
+	var list = $('comment-list');
+	var count=0;
+	for(var i=0, k=list.childNodes.length; i < k; i++)
+	{
+		var node = list.childNodes[i];
+		if(node.nodeType == 1) //an element node
+		{
+			if(node.className.indexOf(id) >= 0)
+			{
+				node.style.display="block"
+				count++;
+			}
+			else
+				node.style.display="none";
+		}
+	}
+
+	list.show();
+	if(count > 0)
+		show_comment_list();
+	else
+		show_add_comment();
+
+	var background = $('modal-background');
+	background.style.top="0px";
+	background.style.left="0px";
+	background.style.opacity="0.5";
+	background.style.width = document.body.offsetWidth+"px";
+	background.style.height = document.body.offsetHeight+"px";
+	background.show();
+	block.style.zIndex = 100;
+	block.style.paddingRight="9px";
+	block.style.marginRight="-9px";
+
+}
+
+function show_block(block)
+{
+	while(block && block.className.indexOf("block-content") < 0)
+		block = block.parentNode;
+	if(block && block.className.indexOf("block-content") >= 0)
+	{
+		block.addClassName('block-hover');
+		var tag = $('tag-'+block.id);
+//		if(tag.className.indexOf("tag-shown")<=0)
+			tag.firstChild.style.visibility="visible"
+	}
+}
+
+function hide_block(block)
+{
+	while(block && block.className.indexOf("block-hover") < 0)
+		block = block.parentNode;
+	if(block && block.className.indexOf("block-hover") >= 0)
+	{
+		block.removeClassName('block-hover');
+		var tag = $('tag-'+block.id);
+		if(tag.className.indexOf("tag-shown")<=0)
+			tag.firstChild.style.visibility="hidden"
+	}
+}
+
+function add_comment_tag(el)
+{
+	var dim = Element.getDimensions(el);
+	var comments = get_comment_count(el.id);
+	var style = "height:"+(dim.height > 35 ? dim.height : 35)+"px;";
+	var cssClass = dim.height ? "block-comment-tag" : "block-comment-tag-ie";
+	var title = "View "+comments+" comments"
+	var innerStyle="";
+	if(comments <= 0)
+	{
+		innerStyle = " visibility:hidden;";
+		comments = "add";
+		title = "Add new comment";
+	}
+	else
+		cssClass += " tag-shown";
+	var id = "tag-"+el.id;
+	var tag = "<div id='"+id+"' class='"+cssClass+"' style='"+style+"'><div style='"+innerStyle+"' title='"+title+"'>"+comments+"</div>&nbsp;</div>";
+	new Insertion.Before(el, tag);
+	var tag_div = $(id);
+	Event.observe(tag_div, "mouseover", function(e){ show_block(el); });
+	Event.observe(tag_div, "mouseout", function(e){ hide_block(el); });
+	Event.observe(tag_div, "click", function(e) { show_comments(el); Event.stop(e); });
+}
+
+function increment_count_tag(id)
+{
+	var tag = $('tag-'+id);
+	if(tag && tag.firstChild)
+	{
+		if(tag.className.indexOf("tag-shown") >= 0)
+		{
+			var count = Number(tag.firstChild.innerHTML);
+			tag.firstChild.innerHTML = (++count)+"";
+			tag.firstChild.style.visibility="visible";
+		}
+		else
+		{
+			tag.firstChild.innerHTML = "1";
+			tag.addClassName("tag-shown");
+			tag.firstChild.style.visibility="visible";
+		}
+	}
+}
+
+function get_comment_count(id)
+{
+	return comment_count[id] ? comment_count[id] : 0;
+}
+
+//initialize the comment js
+
+(function()
+{
+	var userComments = $('user-comments');
+	userComments.style.position="absolute";
+	userComments.style.marginRight="80px";
+	var commentList = $('comment-list');
+	commentList.style.height="320px";
+	$('add-comment').style.height="320px";
+	commentList.style.overflow="auto";
+	$('show-comment-link').style.display="";
+	$('to-top').hide();
+	$('close-comments').show();
+	userComments.hide();
+	$('comments-header').hide();
+
+	$$('#content .block-content').each(function(el)
+	{
+		Event.observe(el, 'mouseover', function(e){ show_block(Event.element(e)); });
+		Event.observe(el, 'mouseout', function(e){ hide_block(Event.element(e)); });
+		add_comment_tag(el);
+	});
+
+	Event.observe($('show-comment-link'), "click", function(e) { show_comment_list(); Event.stop(e); });
+	Event.observe($('add-comment-link'), "click", function(e) { show_add_comment();	Event.stop(e); });
+	Event.observe($('close-comments'), "click", function(e) { hide_add_comment(); Event.stop(e); });
+
+})();
diff --git a/demos/quickstart/protected/controls/Comments/right_back.png b/demos/quickstart/protected/controls/Comments/right_back.png
new file mode 100644
index 00000000..d591e24e
--- /dev/null
+++ b/demos/quickstart/protected/controls/Comments/right_back.png
diff --git a/demos/quickstart/protected/controls/Comments/right_tag.png b/demos/quickstart/protected/controls/Comments/right_tag.png
new file mode 100644
index 00000000..20adda2f
--- /dev/null
+++ b/demos/quickstart/protected/controls/Comments/right_tag.png
diff --git a/demos/quickstart/protected/controls/Comments/tag.gif b/demos/quickstart/protected/controls/Comments/tag.gif
new file mode 100644
index 00000000..654b61de
--- /dev/null
+++ b/demos/quickstart/protected/controls/Comments/tag.gif
diff --git a/demos/quickstart/protected/controls/Layout.tpl b/demos/quickstart/protected/controls/Layout.tpl
index 87013156..5426a221 100644
--- a/demos/quickstart/protected/controls/Layout.tpl
+++ b/demos/quickstart/protected/controls/Layout.tpl
@@ -42,7 +42,9 @@
 	</prop:FooterTemplate>
 </com:TRepeater>
 <div id="content">
+<p class="block-content" id="top-content" style="border-color: transparent; height:1px; margin: 0; padding: 0; background-color: transparent"></p>
 <com:TContentPlaceHolder ID="body" />
+<com:Application.controls.Comments.CommentBlock Visible="false" />
 </div>
 </td>
 </tr>