SNSメンバーのタイムライン(PC版のみ/コメントは未実装)に文字数カウント機能を追加

apps/pc_frontend/modules/timeline/templates/_timelineAll.php

@@ -12,8 +12,10 @@
 
 
 <?php use_javascript('/opTimelinePlugin/js/timeline-loader.api.js') ?>
+<?php use_javascript('/opTimelinePlugin/js/counter.js') ?>
 <?php use_stylesheet('/opTimelinePlugin/css/bootstrap.css', 'last') ?>
 <?php use_stylesheet('/opTimelinePlugin/css/timeline.css', 'last') ?>
+<?php use_stylesheet('/opTimelinePlugin/css/counter.css', 'last') ?>
 
 <script type="text/javascript">
 $(function(){
@@ -31,10 +33,11 @@
 
     <div class="timeline">
       <div class="timeline-postform well">
-        <textarea id="timeline-textarea" class="input-xlarge" rows="1" placeholder="今何してる？"></textarea>
+        <textarea id="timeline-textarea" class="input-xlarge" rows="1" placeholder="今何してる？" onkeypress="return (this.value.length < 1139)"></textarea>
         <div id="timeline-submit-loader"><?php echo op_image_tag('ajax-loader.gif', array()) ?></div>
         <div id="timeline-submit-error"></div>
         <div id="timeline-submit-area">
+        <span id="counter"></span>
           <button id="timeline-submit-button" class="btn btn-primary timeline-submit">投稿</button>
         </div>
       </div>

web/css/counter.css

@@ -0,0 +1,7 @@
+#counter{
+  position: absolute;
+  top: 75px;
+  left: 340px;
+  font-size: 18px;
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+}

web/js/counter.js

@@ -0,0 +1,46 @@
+/*
+ *  OpenPNE - opTimelinePlugin Character Count Script 1.00
+ *  Createed by Yudai Sonoda
+ *  http://net-top.jp/
+ *
+ *  The author is completely abandoned the right of this script.
+ *  (It is also possible diversion to other projects)
+ *
+ *  Built for jQuery library
+ *  http://jquery.com/
+ *  and opTimelinePlugin
+ *  https://github.com/kashiwasan/
+ *
+ */
+
+$(function ()
+  {
+
+    // Configuration
+    var allowed = 140;
+    var warning = 25;
+    var textarea = $('#timeline-textarea');
+    var counter = $('#counter');
+
+    counter.text(allowed);
+    textarea.keyup(function ()
+      {
+         count = (allowed - $(this).val().length);
+         counter.text(count);
+         if (count <= warning && count >= 0) {
+           counter.css({
+             color : '#FFA500'
+           })
+         }
+         else if (count < 0) {
+           counter.css({
+             color : '#FF0000'
+           })
+         }
+         else {
+           counter.css({
+             color : '#000000'
+           })
+         }
+     });
+});