Add "block-content" to allow user comments on block level elements in quickstart docs.

7 files changed, 575 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