Rails チュートリアル (第 10 章、演習 7) のマイクロポスト キャラクター カウントダウンを試みました。ここの情報をベースとして使用し、StackOverflow の回答hereおよびhereの助けを借りて使用しました。
画面上ではこんな感じで、文字数制限に近づくにつれて徐々に文字が赤くなっていき、マイクロポストがオーバーリミットになると投稿ボタンが無効になり、 のように仕上がります。
現在の実装は次のようになります。
ビュー/共有/_micropost_form.html.haml
= form_for @micropost do |f|
= render 'shared/error_messages', object: f.object
.field= f.text_area :content, placeholder: t('.compose_micropost')
%span
.remaining= t('.characters_remaining').html_safe
.countdown
= f.submit t('.post'), class: "btn btn-large btn-primary"
assets/javascripts/microposts.js.coffee
updateCountdownAttributes = (toRemove, toAdd = null) ->
for attr in toRemove
$(".remaining, .countdown").removeClass attr
if toAdd
$(".remaining, .countdown").addClass toAdd
if toAdd is "overlimit"
$("input.btn.btn-large.btn-primary").attr("disabled", "true")
else
$("input.btn.btn-large.btn-primary").removeAttr("disabled")
updateCountdown = ->
remaining = 140 - $("#micropost_content").val().length
toRemove = ["nearlimit", "almostlimit", "overlimit"]
if remaining > 19
updateCountdownAttributes(toRemove)
if remaining < 20
toAdd = (toRemove.filter (attr) -> attr is "nearlimit").toString()
updateCountdownAttributes(toRemove, toAdd)
if remaining < 11
toAdd = (toRemove.filter (attr) -> attr is "almostlimit").toString()
updateCountdownAttributes(toRemove, toAdd)
if remaining < 0
toAdd = (toRemove.filter (attr) -> attr is "overlimit").toString()
updateCountdownAttributes(toRemove, toAdd)
$(".countdown").text remaining
$(document).ready ->
$(".countdown").text 140
$("#micropost_content").change updateCountdown
$("#micropost_content").keyup updateCountdown
$("#micropost_content").keydown updateCountdown
$("#micropost_content").keypress updateCountdown
アセット/スタイルシート/custom.css.scss
...
/* Micropost character countdown */
.remaining, .countdown {
display: inline;
color: $grayLight;
float: right;
}
.overlimit {
color: $red;
}
.almostlimit {
color: hsl(360, 57%, 21%);
}
.nearlimit {
color: $gray;
}
構成/ロケール/en.yml
en:
...
shared:
...
micropost_form:
compose_micropost: "Compose new micropost..."
post: "Post"
characters_remaining: " characters remaining."
ここから、2 つの質問/問題があります。
1つ目は、できれば「残り文字数」の文字列を適切に複数形にしたいということです。おそらく次のようなものです：
ビュー/共有/_micropost_form.html.haml
...
%span
.remaining= t('.characters_remaining', count: [[.countdown value]]).html_safe
.countdown
...
構成/ロケール/en.yml
...
micropost_form:
...
characters_remaining:
one: " character remaining."
other: " characters remaining."
.countdownただし、 div 内の値をパラメーターに渡す方法で取得する方法がわかりませんcount。これどうやってするの？
最初の問題が解決できると仮定すると、マイナスの文字数を取り除き、代わりに「残り-2文字」を「2文字オーバー」に変更したいと考えています。おそらく、ビューである種の分岐ロジックといくつかのJavaScriptを使用して、負の数を正の数に変更します...? ここではよくわからないので、助けていただければ幸いです。
ビュー/共有/_micropost_form.html.haml
...
%span
- [[ if .countdown value < 0 ]]
.remaining= t('.characters_over',
count: [[positive .countdown value]]).html_safe
- [[ else ]]
.remaining= t('.characters_remaining', count: [[.countdown value]]).html_safe
.countdown
...
構成/ロケール/en.yml
...
micropost_form:
...
characters_remaining:
one: " character remaining."
other: " characters remaining."
characters_over:
one: " character over."
other: " characters over."