add tweet text length countdown on note interface

9 years ago · af92c0deac
5 changed files with 1612 additions and 0 deletions
--- a/controllers/controllers.php
+++ b/controllers/controllers.php
@ -83,6 +83,7 @@ $app->get('/new', function() use($app) {
      'syndication_targets' => json_decode($user->syndication_targets, true),
      'test_response' => $test_response,
      'location_enabled' => $user->location_enabled,
+      'user' => $user,
      'authorizing' => false
    ));
    $app->response()->body($html);
--- a/public/images/twitter.ico
+++ b/public/images/twitter.ico
--- a/public/js/cassis.js
+++ b/public/js/cassis.js
--- 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">
--- 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){