Add separate “show more” and “show less” links.

This fixes #64.

diff --git a/src/main/resources/i18n/sone.en.properties b/src/main/resources/i18n/sone.en.properties
index 3610afc..d3b4486 100644 (file)
--- a/src/main/resources/i18n/sone.en.properties
+++ b/src/main/resources/i18n/sone.en.properties
@@ -246,6 +246,8 @@ View.Post.LikeLink=Like
 View.Post.UnlikeLink=Unlike
 View.Post.ShowSource=Toggle Parser
 View.Post.NotDownloaded=This post has not yet been downloaded, or it has been deleted.
+View.Post.ShowMore=show more
+View.Post.ShowLess=show less
 
 View.UpdateStatus.Text.ChooseSenderIdentity=Choose the sender identity
 

diff --git a/src/main/resources/static/css/sone.css b/src/main/resources/static/css/sone.css
index fc1bfde..1ca51ae 100644 (file)
--- a/src/main/resources/static/css/sone.css
+++ b/src/main/resources/static/css/sone.css
@@ -275,6 +275,18 @@ textarea {
        display: none;
 }
 
+#sone .post .expand-post-text:before, #sone .post .expand-reply-text:before {
+       content: "» ";
+}
+
+#sone .post .shrink-post-text:before, #sone .post .shrink-reply-text:before {
+       content: "« ";
+}
+
+#sone .post .shrink-post-text {
+       cursor: pointer;
+}
+
 #sone .post .status-line {
        margin-top: 0.5ex;
        font-size: 85%;

diff --git a/src/main/resources/static/javascript/sone.js b/src/main/resources/static/javascript/sone.js
index 6e7184e..9ecea90 100644 (file)
--- a/src/main/resources/static/javascript/sone.js
+++ b/src/main/resources/static/javascript/sone.js
@@ -766,10 +766,12 @@ function ajaxifyPost(postElement) {
                                $(".post-text.short-text", post).removeClass("hidden");
                                $(".post-text.text", post).addClass("hidden");
                                $(".expand-post-text", post).removeClass("hidden");
+                               $(".shrink-post-text", post).addClass("hidden");
                        } else {
                                $(".post-text.short-text", post).addClass("hidden");
                                $(".post-text.text", post).addClass("hidden");
                                $(".expand-post-text", post).addClass("hidden");
+                               $(".shrink-post-text", post).addClass("hidden");
                        }
                        return false;
                });
@@ -780,9 +782,20 @@ function ajaxifyPost(postElement) {
                $(this).click(function() {
                        $(".post-text.text", getPostElement(this)).toggleClass("hidden");
                        $(".post-text.short-text", getPostElement(this)).toggleClass("hidden");
+                       $(".expand-post-text", getPostElement(this)).toggleClass("hidden");
+                       $(".shrink-post-text", getPostElement(this)).toggleClass("hidden");
                        return false;
                });
        });
+       $(postElement).find(".shrink-post-text").each(function() {
+               $(this).click(function() {
+                       $(".post-text.text", getPostElement(this)).toggleClass("hidden");
+                       $(".post-text.short-text", getPostElement(this)).toggleClass("hidden");
+                       $(".expand-post-text", getPostElement(this)).toggleClass("hidden");
+                       $(".shrink-post-text", getPostElement(this)).toggleClass("hidden");
+                       return false;
+               })
+       });
 
        /* add “comment” link. */
        addCommentLink(getPostId(postElement), getPostAuthor(postElement), postElement, $(postElement).find(".post-status-line .permalink-author"));
@@ -857,10 +870,12 @@ function ajaxifyReply(replyElement) {
                                $(".reply-text.short-text", reply).removeClass("hidden");
                                $(".reply-text.text", reply).addClass("hidden");
                                $(".expand-reply-text", reply).removeClass("hidden");
+                               $(".shrink-reply-text", reply).addClass("hidden");
                        } else {
                                $(".reply-text.short-text", reply).addClass("hidden");
                                $(".reply-text.text", reply).addClass("hidden");
                                $(".expand-reply-text", reply).addClass("hidden");
+                               $(".shrink-reply-text", reply).addClass("hidden");
                        }
                        return false;
                });
@@ -871,6 +886,17 @@ function ajaxifyReply(replyElement) {
                $(this).click(function() {
                        $(".reply-text.text", getReplyElement(this)).toggleClass("hidden");
                        $(".reply-text.short-text", getReplyElement(this)).toggleClass("hidden");
+                       $(".expand-reply-text", getReplyElement(this)).toggleClass("hidden");
+                       $(".shrink-reply-text", getReplyElement(this)).toggleClass("hidden");
+                       return false;
+               });
+       });
+       $(replyElement).find(".shrink-reply-text").each(function() {
+               $(this).click(function() {
+                       $(".reply-text.text", getReplyElement(this)).toggleClass("hidden");
+                       $(".reply-text.short-text", getReplyElement(this)).toggleClass("hidden");
+                       $(".expand-reply-text", getReplyElement(this)).toggleClass("hidden");
+                       $(".shrink-reply-text", getReplyElement(this)).toggleClass("hidden");
                        return false;
                });
        });

diff --git a/src/main/resources/templates/include/viewPost.html b/src/main/resources/templates/include/viewPost.html
index 04e467c..62df741 100644 (file)
--- a/src/main/resources/templates/include/viewPost.html
+++ b/src/main/resources/templates/include/viewPost.html
@@ -27,7 +27,8 @@
                        <div class="post-text raw-text<%if !raw> hidden<%/if>"><% originalText></div>
                        <div class="post-text text<%if raw> hidden<%/if><%if !shortText|match key=parsedText> hidden<%/if>"><% parsedText></div>
                        <div class="post-text short-text<%if raw> hidden<%/if><%if shortText|match key=parsedText> hidden<%/if>"><% shortText></div>
-                       <%if !shortText|match key=parsedText><%if !raw><a class="expand-post-text" href="viewPost.html?post=<% post.id|html>&amp;raw=true">…</a><%/if><%/if>
+                       <%if !shortText|match key=parsedText><%if !raw><a class="expand-post-text" href="viewPost.html?post=<% post.id|html>&amp;raw=true"><%= View.Post.ShowMore|l10n|html></a><%/if><%/if>
+                       <%if !shortText|match key=parsedText><%if !raw><a class="shrink-post-text hidden"><%= View.Post.ShowLess|l10n|html></a><%/if><%/if>
                </div>
                <div class="post-status-line status-line<%if !post.loaded> hidden<%/if>">
                        <div class="bookmarks">

diff --git a/src/main/resources/templates/include/viewReply.html b/src/main/resources/templates/include/viewReply.html
index f8c7452..4ec2e29 100644 (file)
--- a/src/main/resources/templates/include/viewReply.html
+++ b/src/main/resources/templates/include/viewReply.html
@@ -15,7 +15,8 @@
                        <div class="reply-text raw-text<%if !raw> hidden<%/if>"><% originalText></div>
                        <div class="reply-text text<%if raw> hidden<%/if><%if !shortText|match key=parsedText> hidden<%/if>"><% parsedText></div>
                        <div class="reply-text short-text<%if raw> hidden<%/if><%if shortText|match key=parsedText> hidden<%/if>"><% shortText></div>
-                       <%if !shortText|match key=parsedText><%if !raw><a class="expand-reply-text" href="viewPost.html?post=<% reply.post.id|html>&amp;raw=true">…</a><%/if><%/if>
+                       <%if !shortText|match key=parsedText><%if !raw><a class="expand-reply-text" href="viewPost.html?post=<% reply.post.id|html>&amp;raw=true"><%= View.Post.ShowMore|l10n|html></a><%/if><%/if>
+                       <%if !shortText|match key=parsedText><%if !raw><a class="shrink-reply-text hidden"><%= View.Post.ShowLess|l10n|html></a><%/if><%/if>
                </div>
                <div class="reply-status-line status-line">
                        <div class="time"><% reply.time|date format="MMM d, yyyy, HH:mm:ss"></div>