Merge pull request #6977 from svbergerem/fix-char-counter-position

Fix charcounter position in publisher

app/assets/javascripts/app/views/publisher/services_view.js

@@ -37,7 +37,7 @@ app.views.PublisherServices = Backbone.View.extend({
   // keep track of character count
   _createCounter: function() {
     // remove any obsolete counters
-    this.input.siblings('.counter').remove();
+    $("#publisher .counter").remove();
 
     // create new counter
     var min = 40000;
@@ -47,7 +47,13 @@ app.views.PublisherServices = Backbone.View.extend({
         var num = parseInt($(value).attr('maxchar'));
         if (min > num) { min = num; }
       });
-      this.input.charCount({allowed: min, warning: min/10 });
+      var counter = $("<div class='counter pull-right'></div>");
+      $("#publisher-images").after(counter);
+      this.input.charCount({
+        allowed: min,
+        warning: min / 10,
+        counter: counter
+      });
     }
   },
 

app/assets/javascripts/main.js

@@ -8,7 +8,7 @@
 //= require backbone
 //= require jquery.remotipart
 //= require autosize
-//= require jquery.charcount
+//= require charcount
 //= require jquery-placeholder
 //= require rails-timeago
 //= require jquery.events.input

app/assets/javascripts/mobile/mobile.js

@@ -4,7 +4,8 @@
  *   licensed under the Affero General Public License version 3 or later.  See
  *   the COPYRIGHT file.
  */
-//= require jquery.charcount
+//= require jquery-textchange
+//= require charcount
 //= require js-routes
 //= require autosize
 //= require keycodes

app/assets/javascripts/mobile/publisher.js

@@ -20,7 +20,15 @@ $(document).ready(function(){
       }
     });
 
-    $("#status_message_text").charCount({allowed: publisherMaxChars, warning: publisherMaxChars/10 });
+    if (selectedServices.length > 0) {
+      var counter = $("<span class='counter'></span>");
+      $("#status_message_text").after(counter);
+      $("#status_message_text").charCount({
+        allowed: publisherMaxChars,
+        warning: publisherMaxChars / 10,
+        counter: counter
+      });
+    }
 
     if(hiddenField.length > 0) { hiddenField.remove(); }
     else {

app/assets/stylesheets/publisher.scss

@@ -187,12 +187,6 @@
         text-align: center;
       }
 
-      .warning {
-        color: orange;
-      }
-      .exceeded {
-        color: red;
-      }
     }
   }
 
@@ -235,16 +229,9 @@
     }
   }
 
-  &.with-location .counter {
-    bottom: -62px;
-  }
-
   .counter {
-    bottom: -25px;
-    height: 30px;
     line-height: 30px;
-    position: absolute;
-    right: 10px;
+    margin-right: 10px;
   }
 
   &:not(.with-location) .publisher-buttonbar {

lib/assets/javascripts/charcount.js

+// @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPL-v3-or-Later
+
+/*
+ * char count plugin
+ * options are:
+ * - allowed: number of allowed characters
+ * - warning: number of left characters when a warning should be displayed
+ * - counter: jQuery element to use as the counter
+ */
+$.fn.charCount = function(opts) {
+  this.each(function() {
+    var $this = $(this);
+    var counter = opts.counter;
+
+    var update = function() {
+      var count = $this.val().length;
+
+      if (count > opts.allowed) {
+        counter.removeClass("text-warning").addClass("text-danger");
+      } else if (count > opts.allowed - opts.warning) {
+        counter.removeClass("text-danger").addClass("text-warning");
+      } else {
+        counter.removeClass("text-danger").removeClass("text-warning");
+      }
+
+      counter.text(opts.allowed - count);
+    };
+
+    $this.on("textchange", update);
+    update();
+  });
+};
+// @license-end

spec/javascripts/lib/charcounter_spec.js

+describe("$.fn.charCount", function() {
+  beforeEach(function() {
+    this.input = $("<textarea></textarea>");
+    this.counter = $("<div class='charcounter'></div>");
+    // See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/repeat
+    this.repeat = function(str, count) {
+      var rpt = "";
+      for (;;) {
+        if ((count & 1) === 1) {
+          rpt += str;
+        }
+        count >>>= 1;
+        if (count === 0) {
+          break;
+        }
+        str += str;
+      }
+      return rpt;
+    };
+  });
+
+  context("on initialization", function() {
+    beforeEach(function() {
+      this.input.val(this.repeat("a", 10));
+    });
+
+    it("shows the correct number of available chars", function() {
+      this.input.charCount({allowed: 12, warning: 1, counter: this.counter});
+      expect(this.counter.text()).toEqual("2");
+    });
+
+    it("shows the normal text if there are enough chars left", function() {
+      this.input.charCount({allowed: 12, warning: 2, counter: this.counter});
+      expect(this.counter).not.toHaveClass("text-warning");
+      expect(this.counter).not.toHaveClass("text-danger");
+    });
+
+    it("shows a warning if there almost no chars left", function() {
+      this.input.charCount({allowed: 12, warning: 3, counter: this.counter});
+      expect(this.counter).toHaveClass("text-warning");
+      expect(this.counter).not.toHaveClass("text-danger");
+    });
+
+    it("shows an error if the limit exceeded", function() {
+      this.input.charCount({allowed: 9, warning: 3, counter: this.counter});
+      expect(this.counter).not.toHaveClass("text-warning");
+      expect(this.counter).toHaveClass("text-danger");
+    });
+  });
+
+  context("on text changes", function() {
+    it("updates the number of available chars", function() {
+      this.input.val("a");
+      this.input.charCount({allowed: 100, warning: 10, counter: this.counter});
+      expect(this.counter.text()).toEqual("99");
+
+      this.input.val(this.repeat("a", 99));
+      this.input.trigger("textchange");
+      expect(this.counter.text()).toEqual("1");
+
+      this.input.val(this.repeat("a", 102));
+      this.input.trigger("textchange");
+      expect(this.counter.text()).toEqual("-2");
+
+      this.input.val("");
+      this.input.trigger("textchange");
+      expect(this.counter.text()).toEqual("100");
+    });
+
+    it("updates the counter classes", function() {
+      this.input.val("a");
+      this.input.charCount({allowed: 100, warning: 10, counter: this.counter});
+      expect(this.counter).not.toHaveClass("text-warning");
+      expect(this.counter).not.toHaveClass("text-danger");
+
+      this.input.val(this.repeat("a", 90));
+      this.input.trigger("textchange");
+      expect(this.counter).not.toHaveClass("text-warning");
+      expect(this.counter).not.toHaveClass("text-danger");
+
+      this.input.val(this.repeat("a", 91));
+      this.input.trigger("textchange");
+      expect(this.counter).toHaveClass("text-warning");
+      expect(this.counter).not.toHaveClass("text-danger");
+
+      this.input.val(this.repeat("a", 100));
+      this.input.trigger("textchange");
+      expect(this.counter).toHaveClass("text-warning");
+      expect(this.counter).not.toHaveClass("text-danger");
+
+      this.input.val(this.repeat("a", 101));
+      this.input.trigger("textchange");
+      expect(this.counter).not.toHaveClass("text-warning");
+      expect(this.counter).toHaveClass("text-danger");
+
+      this.input.val("");
+      this.input.trigger("textchange");
+      expect(this.counter).not.toHaveClass("text-warning");
+      expect(this.counter).not.toHaveClass("text-danger");
+    });
+  });
+});

vendor/assets/javascripts/jquery.charcount.js

-/*
- * 	Character Count Plugin - jQuery plugin
- * 	Dynamic character count for text areas and input fields
- *	written by Alen Grakalic	
- *	http://cssglobe.com/post/7161/jquery-plugin-simplest-twitterlike-dynamic-character-count-for-textareas
- *
- *	Copyright (c) 2009 Alen Grakalic (http://cssglobe.com)
- *	Dual licensed under the MIT (MIT-LICENSE.txt)
- *	and GPL (GPL-LICENSE.txt) licenses.
- *
- *	Built for jQuery library
- *	http://jquery.com
- *
- */
- 
-(function($) {
-
-	$.fn.charCount = function(options){
-	  
-		// default configuration properties
-		var defaults = {	
-			allowed: 140,		
-			warning: 25,
-			css: 'counter',
-			counterElement: 'span',
-			cssWarning: 'warning',
-			cssExceeded: 'exceeded',
-			counterText: ''
-		}; 
-			
-		var options = $.extend(defaults, options); 
-		
-		function calculate(obj){
-			var count = $(obj).val().length;
-			var available = options.allowed - count;
-			if(available <= options.warning && available >= 0){
-				$(obj).next().addClass(options.cssWarning);
-			} else {
-				$(obj).next().removeClass(options.cssWarning);
-			}
-			if(available < 0){
-				$(obj).next().addClass(options.cssExceeded);
-			} else {
-				$(obj).next().removeClass(options.cssExceeded);
-			}
-			$(obj).next().html(options.counterText + available);
-		};
-				
-		this.each(function() {  			
-			$(this).after('<'+ options.counterElement +' class="' + options.css + '">'+ options.counterText +'</'+ options.counterElement +'>');
-			calculate(this);
-			$(this).keyup(function(){calculate(this)});
-			$(this).change(function(){calculate(this)});
-		});
-	  
-	};
-
-})(jQuery);