nocebo/diaspora
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix charcounter position in publisher

Browse source
This commit is contained in:
Steffen van Bergerem 2016-08-13 01:44:41 +02:00
parent 16618e1054
commit da5aef2b75
No known key found for this signature in database
GPG key ID: 2F08F75F9525C7E0
8 changed files with 156 additions and 77 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
app/assets/javascripts/app/views/publisher/services_view.js
View file

@ -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
});
}
},

2
app/assets/javascripts/main.js
View file

@ -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

3
app/assets/javascripts/mobile/mobile.js
View file

@ -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

10
app/assets/javascripts/mobile/publisher.js
View file

@ -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 {

15
app/assets/stylesheets/publisher.scss
View file

@ -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 {

33
lib/assets/javascripts/charcount.js Normal file
View file

@ -0,0 +1,33 @@
// @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

102
spec/javascripts/lib/charcounter_spec.js Normal file
View file

@ -0,0 +1,102 @@
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");
});
});
});

58
vendor/assets/javascripts/jquery.charcount.js vendored
View file

@ -1,58 +0,0 @@
/*
* 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);