summaryrefslogtreecommitdiff
path: root/demos/quickstart/protected/controls/Comments
diff options
context:
space:
mode:
Diffstat (limited to 'demos/quickstart/protected/controls/Comments')
-rw-r--r--demos/quickstart/protected/controls/Comments/CommentBlock.php107
-rw-r--r--demos/quickstart/protected/controls/Comments/CommentBlock.tpl63
-rw-r--r--demos/quickstart/protected/controls/Comments/comments.css226
-rw-r--r--demos/quickstart/protected/controls/Comments/comments.js179
-rw-r--r--demos/quickstart/protected/controls/Comments/right_back.pngbin0 -> 545 bytes
-rw-r--r--demos/quickstart/protected/controls/Comments/right_tag.pngbin0 -> 602 bytes
-rw-r--r--demos/quickstart/protected/controls/Comments/tag.gifbin0 -> 226 bytes
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
Binary files differ
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
Binary files differ
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
Binary files differ
generated by cgit v1.2.3 (git 2.46.0) at 2024-11-08 06:55:03 +0000