[Picfinity-commit] SF.net SVN: picfinity: [58] trunk/.themes/db
Status: Beta
Brought to you by:
espadav8
Menu
▾
▴
[Picfinity-commit] SF.net SVN: picfinity: [58] trunk/.themes/db
|
From: <esp...@us...> - 2007-09-02 08:12:02
|
Revision: 58
http://picfinity.svn.sourceforge.net/picfinity/?rev=58&view=rev
Author: espadav8
Date: 2007-08-25 08:04:21 -0700 (Sat, 25 Aug 2007)
Log Message:
-----------
A lot of changes to get the comments working
JS
--
Add the functions to get the comments and post new comments
Create the form when we view an image
When a new comment is posted, reload the comments
addComment.php
--
get the data via a POST and make sure it's been real_escaped
Return either a success or error message to be handled
getcomments.php
--
Strip any slashes out that were added when the comment was added
CSS
--
A bit of clean up
Add all the comment and commentform CSS (this needs cleaning up)
XSL
--
If there are comments for the selected image then show them
Modified Paths:
--------------
trunk/.themes/db/borders.css
trunk/.themes/db/colours.css
trunk/.themes/db/db.css
trunk/.themes/db/db.js
trunk/.themes/db/db.xsl
trunk/.themes/db/getcomments.php
Added Paths:
-----------
trunk/.themes/db/addComment.php
Added: trunk/.themes/db/addComment.php
===================================================================
--- trunk/.themes/db/addComment.php (rev 0)
+++ trunk/.themes/db/addComment.php 2007-08-25 15:04:21 UTC (rev 58)
@@ -0,0 +1,62 @@
+<?php
+ require_once('../../db.inc');
+
+ $image_md5 = mysql_real_escape_string($_POST['image_id']);
+ $ajax = mysql_real_escape_string($_POST['ajax']);
+ $name = mysql_real_escape_string($_POST['name']);
+ $email = mysql_real_escape_string($_POST['email']);
+ $web = mysql_real_escape_string($_POST['web']);
+ $comment = mysql_real_escape_string($_POST['comment']);
+ $user_ip = mysql_real_escape_string($_SERVER['REMOTE_ADDR']);
+ $approved = "1";
+
+ $query = "SELECT image_id FROM images WHERE image_md5 = '$image_md5'";
+ $select_result = mysql_query($query);
+
+ if ($select_result)
+ {
+ $image_id = mysql_fetch_row($select_result);
+
+ $query = "
+ INSERT INTO comments
+ ( image_id
+ , user_name
+ , user_www
+ , user_email
+ , user_comment
+ , user_ip
+ , comment_rating
+ , approved
+ )
+ VALUES
+ ( $image_id[0]
+ , '$name'
+ , '$web'
+ , '$email'
+ , '$comment'
+ , '$user_ip'
+ , 0
+ , $approved
+ )";
+
+ $insert_result = mysql_query($query);
+ if ($insert_result)
+ {
+ header('Content-Type: text/xml');
+ echo "<success><message>Comment added successfully</message></success>";
+ }
+ else
+ {
+ header('Content-Type: text/xml');
+ echo "<error><message>Error inserting comment</message>\n"
+ ."<message>".mysql_error()."</message>\n"
+ ."<message>".$query."</message>\n</error>";
+ }
+ }
+ else
+ {
+ header('Content-Type: text/xml');
+ echo "<error><message>Image md5 doesn't exist</message></error>";
+ }
+
+?>
Modified: trunk/.themes/db/borders.css
===================================================================
--- trunk/.themes/db/borders.css 2007-08-25 14:55:36 UTC (rev 57)
+++ trunk/.themes/db/borders.css 2007-08-25 15:04:21 UTC (rev 58)
@@ -4,11 +4,6 @@
border: 0;
}
-.image a
-{
- border-bottom: 1px solid #ccc;
-}
-
.folder,
.thumbnail,
#expandedimage,
@@ -19,13 +14,22 @@
border: 1px solid #ccc;
}
+#commentform,
#expandedimagespan
{
border-top: 1px solid #ccc;
+}
+
+.image a,
+#loadingspan,
+#expandedimagespan
+{
border-bottom: 1px solid #ccc;
}
-#loadingspan
+#commentform input,
+#commentform textarea,
+#commentform button
{
- border-bottom: 1px solid #ccc;
+ border: 1px solid #000;
}
\ No newline at end of file
Modified: trunk/.themes/db/colours.css
===================================================================
--- trunk/.themes/db/colours.css 2007-08-25 14:55:36 UTC (rev 57)
+++ trunk/.themes/db/colours.css 2007-08-25 15:04:21 UTC (rev 58)
@@ -19,7 +19,10 @@
.comment.odd a,
.comment .date,
-.comment .rating
+.comment .rating,
+input,
+textarea,
+button
{
color: #000000;
}
@@ -30,6 +33,7 @@
html,
.selected a,
#linktospan a:hover,
+#addcomment a:hover,
#breadcrumbtrail ul li a:hover,
#breadcrumbtrail ul li ul li.selected
{
@@ -48,6 +52,7 @@
#linktospan a,
.image a:hover,
.comment.odd,
+#commentform,
#breadcrumbtrail ul li ul li a:hover
{
background-color: #707070;
Modified: trunk/.themes/db/db.css
===================================================================
--- trunk/.themes/db/db.css 2007-08-25 14:55:36 UTC (rev 57)
+++ trunk/.themes/db/db.css 2007-08-25 15:04:21 UTC (rev 58)
@@ -89,7 +89,8 @@
.name,
#loadingspan,
-#linktospan a
+#linktospan a,
+#addcomment a
{
font-weight: bold;
padding: 3px 0;
@@ -217,10 +218,40 @@
clear: both;
}
-
.comment .commenttext
{
clear: both;
float: left;
margin: 5px 0 0 0;
-}
\ No newline at end of file
+}
+
+
+#commentform form
+{
+ padding: 0 5px 5px 5px
+}
+
+#commentform button,
+#commentform label span
+{
+ font-size: 0.9em;
+}
+
+#commentform label,
+#commentform label span,
+#commentform button
+{
+ float: left;
+ clear: both;
+}
+
+#commentform label
+{
+ margin-bottom: 5px;
+}
+
+#commentform button,
+#commentform label span
+{
+ width: 100px;
+}
Modified: trunk/.themes/db/db.js
===================================================================
--- trunk/.themes/db/db.js 2007-08-25 14:55:36 UTC (rev 57)
+++ trunk/.themes/db/db.js 2007-08-25 15:04:21 UTC (rev 58)
@@ -397,10 +397,13 @@
imageNameDiv.className = "name";
imageNameDiv.appendChild(document.createTextNode(imageNode.getAttribute("file")));
+ var commentForm = createCommentForm(imageNode.getAttribute("id"));
+
expandedImageDiv.appendChild(linkToDiv);
expandedImageDiv.appendChild(loadingDiv);
expandedImageDiv.appendChild(imageDiv);
expandedImageDiv.appendChild(imageNameDiv);
+ expandedImageDiv.appendChild(commentForm);
var expandedImage = new Image();
expandedImage.onload = function()
@@ -414,6 +417,100 @@
return expandedImageDiv;
}
+function createCommentForm(imageID)
+{
+ var commentFormDiv = document.createElement("div")
+ commentFormDiv.setAttribute("id", "commentform");
+
+ var addCommentSpan = document.createElement("div");
+ addCommentSpan.setAttribute("id", "addcomment");
+
+ var addCommentAnchor = document.createElement("a");
+ addCommentSpan.setAttribute("href", "#");
+ addCommentAnchor.appendChild(document.createTextNode("Add Comment"));
+ addCommentAnchor.onclick = toggleCommentsForm;
+ addCommentSpan.appendChild(addCommentAnchor);
+
+ var commentForm = document.createElement("form");
+ commentForm.onsubmit = addNewComment;
+ commentForm.action = ".themes/db/postComment.php";
+ commentForm.style.display = "none";
+
+ var commentFormFieldset = document.createElement("fieldset");
+
+ var ajaxInput = document.createElement("input");
+ ajaxInput.type = "hidden";
+ ajaxInput.value = "0";
+ ajaxInput.name = "ajax";
+
+ var imageIDInput = document.createElement("input");
+ imageIDInput.type = "hidden";
+ imageIDInput.value = imageID;
+ imageIDInput.name = "image_id";
+
+ var nameLabel = createFormInput("user_name", "Name:");
+ var emailLabel = createFormInput("user_email", "Email:");
+ var webLabel = createFormInput("user_web", "Web:");
+ var commentLabel = createFormTextarea("user_comment", "Comment:");
+ var submitButton = createFormButton("submit", "Submit");
+
+ commentFormFieldset.appendChild(ajaxInput);
+ commentFormFieldset.appendChild(imageIDInput);
+ commentFormFieldset.appendChild(nameLabel);
+ commentFormFieldset.appendChild(emailLabel);
+ commentFormFieldset.appendChild(webLabel);
+ commentFormFieldset.appendChild(commentLabel);
+ commentFormFieldset.appendChild(submitButton);
+
+ commentForm.appendChild(commentFormFieldset);
+
+ commentFormDiv.appendChild(addCommentSpan);
+ commentFormDiv.appendChild(commentForm);
+
+ return commentFormDiv;
+}
+
+function createFormInput(inputName, spanText)
+{
+ var tmpLabel = document.createElement("label");
+ var tmpSpan = document.createElement("span");
+ tmpSpan.appendChild(document.createTextNode(spanText));
+ var tmpInput = document.createElement("input");
+ tmpInput.type = "text";
+ tmpInput.value = "";
+ tmpInput.name = inputName;
+
+ tmpLabel.appendChild(tmpSpan);
+ tmpLabel.appendChild(tmpInput);
+
+ return tmpLabel;
+}
+
+function createFormTextarea(textareaName, spanText)
+{
+ var tmpLabel = document.createElement("label");
+ var tmpSpan = document.createElement("span");
+ tmpSpan.appendChild(document.createTextNode(spanText));
+ var tmpTextarea = document.createElement("textarea");
+ tmpTextarea.name = textareaName;
+ tmpTextarea.rows = 3;
+ tmpTextarea.cols = 50;
+
+ tmpLabel.appendChild(tmpSpan);
+ tmpLabel.appendChild(tmpTextarea);
+
+ return tmpLabel;
+}
+
+function createFormButton(buttonType, buttonText)
+{
+ var tmpButton = document.createElement("button");
+ tmpButton.appendChild(document.createTextNode(buttonText));
+ tmpButton.type = buttonType;
+
+ return tmpButton;
+}
+
function createBreadcrumbTrail(element)
{
var breadcrumbTrailDiv = document.createElement("div");
@@ -726,11 +823,82 @@
commentsDiv.appendChild(comment);
}
- document.getElementById("expandedimage").parentNode.insertBefore(commentsDiv, document.getElementById("expandedimage").nextSibling);
+ if (document.getElementById("comments"))
+ {
+ document.getElementById("comments").parentNode.replaceChild(commentsDiv, document.getElementById("comments"));
+ }
+ else
+ {
+ document.getElementById("expandedimage").parentNode.insertBefore(commentsDiv, document.getElementById("expandedimage").nextSibling);
+ }
}
+function toggleCommentsForm()
+{
+ var commentForm = document.getElementById("commentform").getElementsByTagName("form")[0];
+ if (commentForm.style.display != "none")
+ commentForm.style.display = "none";
+ else
+ {
+ commentForm.style.display = "";
+ commentForm.getElementsByTagName("input")[0].focus();
+ }
+}
+function resetCommentsForm()
+{
+ var commentForm = document.getElementById("commentform").getElementsByTagName("form")[0];
+ commentForm.reset();
+}
+
+function addNewComment()
+{
+ if (window.XMLHttpRequest)
+ {
+ var commentForm = document.getElementById("commentform").getElementsByTagName("form")[0];
+
+ var postData = "image_id=" + commentForm.image_id.value + "&"
+ + "ajax=1&"
+ + "name=" + commentForm.user_name.value + "&"
+ + "email=" + commentForm.user_email.value + "&"
+ + "web=" + commentForm.user_web.value + "&"
+ + "comment=" + encodeURIComponent(commentForm.user_comment.value);
+
+ xmlHttp = new XMLHttpRequest();
+ xmlHttp.open("POST", ".themes/db/addComment.php", true);
+
+ xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
+ xmlHttp.setRequestHeader("Content-length", postData.length);
+ xmlHttp.setRequestHeader("Connection", "close");
+
+ xmlHttp.onreadystatechange = function() {
+ if (xmlHttp.readyState == 4)
+ {
+ checkAddedCommentReply(commentForm.image_id.value)
+ }
+ }
+ xmlHttp.send(postData);
+ return false;
+ }
+ else
+ {
+ return true;
+ }
+}
+
+function checkAddedCommentReply(imageID)
+{
+ var insertReply = xmlHttp.responseXML.documentElement;
+
+ if (insertReply.nodeName == "success")
+ {
+ resetCommentsForm();
+ toggleCommentsForm();
+ getCommentsXML(imageID);
+ }
+}
+
function getCookie(name) {
var start = document.cookie.indexOf( name + "=" );
var len = start + name.length + 1;
Modified: trunk/.themes/db/db.xsl
===================================================================
--- trunk/.themes/db/db.xsl 2007-08-25 14:55:36 UTC (rev 57)
+++ trunk/.themes/db/db.xsl 2007-08-25 15:04:21 UTC (rev 58)
@@ -295,6 +295,40 @@
</a>
</div>
<div class="name"><xsl:value-of select="@file" /></div>
+<div id="commentform">
+ <div id="addcomment">
+ <a href="#" onclick="toggleCommentsForm(); return false;">Add Comment</a>
+ </div>
+ <form action=".themes/db/postComment.php" method="post" style="display: none;" onsubmit="return addNewComment();">
+ <fieldset>
+ <input type="hidden" name="ajax" value="0" />
+ <input type="hidden" name="image_id">
+ <xsl:attribute name="value"><xsl:value-of select="@id" /></xsl:attribute>
+ </input>
+ <label>
+ <span>Name: </span>
+ <input type="text" name="user_name"/>
+ </label>
+
+ <label>
+ <span>E-mail: </span>
+ <input type="text" name="user_email"/>
+ </label>
+
+ <label>
+ <span>Web: </span>
+ <input type="text" name="user_web"/>
+ </label>
+
+ <label>
+ <span>Comment: </span>
+ <textarea cols="50" rows="3" name="user_comment"/>
+ </label>
+
+ <button type="submit">Submit</button>
+ </fieldset>
+ </form>
+</div>
</div>
<xsl:if test="count(comment) > 0">
@@ -350,7 +384,9 @@
</xsl:choose>
</span>
<span class="commenttext">
- <xsl:value-of select="comment_text" />
+ <xsl:call-template name="nl2br">
+ <xsl:with-param name="contents" select="comment_text" />
+ </xsl:call-template>
</span>
<span class="rating">
<xsl:value-of select="rating" />
@@ -381,4 +417,20 @@
</xsl:choose>
</xsl:template>
+ <xsl:template name="nl2br">
+ <xsl:param name="contents" />
+ <xsl:choose>
+ <xsl:when test="contains($contents, ' ')">
+ <xsl:value-of select="substring-before($contents, ' ')" />
+ <br />
+ <xsl:call-template name="nl2br">
+ <xsl:with-param name="contents" select="substring-after($contents, ' ')" />
+ </xsl:call-template>
+ </xsl:when>
+ <xsl:otherwise>
+ <xsl:value-of select="$contents" />
+ </xsl:otherwise>
+ </xsl:choose>
+ </xsl:template>
+
</xsl:stylesheet>
Modified: trunk/.themes/db/getcomments.php
===================================================================
--- trunk/.themes/db/getcomments.php 2007-08-25 14:55:36 UTC (rev 57)
+++ trunk/.themes/db/getcomments.php 2007-08-25 15:04:21 UTC (rev 58)
@@ -26,12 +26,12 @@
while ($row = mysql_fetch_assoc($result))
{
$comments_xml .= "<comment>"
- . "<name>$row[user_name]</name>"
- . "<www>$row[user_www]</www>"
- . "<email>$row[user_email]</email>"
- . "<comment_text>$row[user_comment]</comment_text>"
- . "<rating>$row[comment_rating]</rating>"
- . "<added>$row[date_added]</added>"
+ . "<name>".stripslashes($row['user_name'])."</name>"
+ . "<www>".stripslashes($row['user_www'])."</www>"
+ . "<email>".stripslashes($row['user_email'])."</email>"
+ . "<comment_text>".stripslashes($row['user_comment'])."</comment_text>"
+ . "<rating>".stripslashes($row['comment_rating'])."</rating>"
+ . "<added>".stripslashes($row['date_added'])."</added>"
. "</comment>";
}
$comments_xml .= "</comments>";
This was sent by the SourceForge.net collaborative development platform, the world's largest Open Source development site.
|
