diff options
| author | Aaron Parecki <aaron@parecki.com> | 2016-04-06 11:21:23 -0700 |
|---|---|---|
| committer | Aaron Parecki <aaron@parecki.com> | 2016-04-06 11:21:23 -0700 |
| commit | af92c0deac162cba11dba2e13d2d8e4801af00b2 (patch) | |
| tree | 1789cc4e580bc9985908b8d56e80f2c568fc6f3c /views | |
| parent | 8409b668d89294aada62bdebb7a69c504ad3833e (diff) | |
add tweet text length countdown on note interface
Diffstat (limited to 'views')
| -rw-r--r-- | views/layout.php | 1 | ||||
| -rw-r--r-- | views/new-post.php | 26 |
2 files changed, 27 insertions, 0 deletions
diff --git a/views/layout.php b/views/layout.php index f783406..f853edd 100644 --- a/views/layout.php +++ b/views/layout.php @@ -30,6 +30,7 @@ <script src="/js/jquery-1.7.1.min.js"></script> <script src="/js/script.js"></script> <script src="/js/date.js"></script> + <script src="/js/cassis.js"></script> </head> <body role="document"> diff --git a/views/new-post.php b/views/new-post.php index 4453e15..532a5ca 100644 --- a/views/new-post.php +++ b/views/new-post.php @@ -4,6 +4,7 @@ <form role="form" style="margin-top: 20px;" id="note_form"> <div class="form-group"> + <div id="note_content_remaining" class="pcheck206"><img src="/images/twitter.ico"> <span>140</span></div> <label for="note_content"><code>content</code></label> <textarea id="note_content" value="" class="form-control" style="height: 4em;"></textarea> </div> @@ -103,9 +104,34 @@ </div> </div> +<style type="text/css"> +#note_content_remaining { + float: right; + font-size: 0.8em; + font-weight: bold; +} + + +.pcheck206 { color: #6ba15c; } /* tweet fits within the limit even after adding RT @username */ +.pcheck207 { color: #c4b404; } /* danger zone, tweet will overflow when RT @username is added */ +.pcheck200,.pcheck208 { color: #59cb3a; } /* exactly fits 140 chars, both with or without RT */ +.pcheck413 { color: #a73b3b; } /* over max tweet length */ + +</style> + <script> $(function(){ + $("#note_content").on('change keyup', function(e){ + var text = $("#note_content").val(); + var tweet_length = tw_text_proxy(text).length; + var tweet_check = tw_length_check(text, 140, "<?= $this->user->twitter_username ?>"); + var remaining = 140 - tweet_length; + $("#note_content_remaining span").html(remaining); + $("#note_content_remaining").removeClass("pcheck200 pcheck206 pcheck207 pcheck208 pcheck413"); + $("#note_content_remaining").addClass("pcheck"+tweet_check); + }); + // ctrl-s to save $(window).on('keydown', function(e){ if(e.keyCode == 83 && e.ctrlKey){ |