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

Merge pull request #6104 from svbergerem/jquery-autosize

Browse source 
Replace jquery.autoresize with autosize
This commit is contained in:
Jonne Haß 2015-06-14 22:19:47 +02:00
commit 15aa40631e
14 changed files with 41 additions and 295 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
Changelog.md
View file

@ -31,6 +31,7 @@ bind to an UNIX socket at `unix:tmp/diaspora.sock`. Please change your local
* Update listen configuration to listen on unix sockets by default [#5974](https://github.com/diaspora/diaspora/pull/5974)
* Port to Bootstrap 3 [#6015](https://github.com/diaspora/diaspora/pull/6015)
* Use a fixed width for the mobile drawer [#6057](https://github.com/diaspora/diaspora/pull/6057)
* Replace jquery.autoresize with autosize [#6104](https://github.com/diaspora/diaspora/pull/6104)
## Bug fixes
* Destroy Participation when removing interactions with a post [#5852](https://github.com/diaspora/diaspora/pull/5852)

1
Gemfile
View file

@ -112,6 +112,7 @@ source "https://rails-assets.org" do
gem "rails-assets-jquery-textchange", "0.2.3"
gem "rails-assets-perfect-scrollbar", "0.6.2"
gem "rails-assets-jakobmattsson--jquery-elastic", "1.6.11"
gem "rails-assets-autosize", "3.0.6"
end
gem "facebox-rails", "0.2.0"

2
Gemfile.lock
View file

@ -516,6 +516,7 @@ GEM
bundler (>= 1.3.0, < 2.0)
railties (= 4.2.1)
sprockets-rails
rails-assets-autosize (3.0.6)
rails-assets-diaspora_jsxc (0.1.1)
rails-assets-jquery (~> 1.11.1)
rails-assets-jquery-colorbox (~> 1.5.14)
@ -820,6 +821,7 @@ DEPENDENCIES
rack-rewrite (= 1.5.1)
rack-ssl (= 1.4.1)
rails (= 4.2.1)
rails-assets-autosize (= 3.0.6)!
rails-assets-diaspora_jsxc (~> 0.1.1)!
rails-assets-highlightjs (= 8.5.0)!
rails-assets-jakobmattsson--jquery-elastic (= 1.6.11)!

8
app/assets/javascripts/app/views/comment_stream_view.js
View file

@ -30,8 +30,8 @@ app.views.CommentStream = app.views.Base.extend({
this.model.comments.each(this.appendComment, this);
// add autoexpanders to new comment textarea
this.$("textarea").autoResize({'extraSpace' : 10});
this.$('textarea').val(this.textareaValue);
this.$("textarea").val(this.textareaValue);
autosize(this.$("textarea"));
},
presenter: function(){
@ -44,7 +44,7 @@ app.views.CommentStream = app.views.Base.extend({
createComment: function(evt) {
if(evt){ evt.preventDefault(); }
var commentText = $.trim(this.$('.comment_box').val());
this.$(".comment_box").val("");
this.$(".comment_box").css("height", "");
@ -62,7 +62,7 @@ app.views.CommentStream = app.views.Base.extend({
return false;
}
},
appendComment: function(comment) {
// Set the post as the comment's parent, so we can check
// on post ownership in the Comment view.

9
app/assets/javascripts/app/views/publisher_view.js
View file

@ -44,9 +44,6 @@ app.views.Publisher = Backbone.View.extend({
// init mentions plugin
Mentions.initialize(this.inputEl);
// init autoresize plugin
this.inputEl.autoResize({ "extraSpace" : 10, "maxHeight" : Infinity });
// if there is data in the publisher we ask for a confirmation
// before the user is able to leave the page
$(window).on("beforeunload", _.bind(this._beforeUnload, this));
@ -97,6 +94,9 @@ app.views.Publisher = Backbone.View.extend({
this.viewPollCreator.render();
});
// init autosize plugin
autosize(this.inputEl);
this.initSubviews();
this.checkSubmitAvailability();
return this;
@ -147,6 +147,7 @@ app.views.Publisher = Backbone.View.extend({
this.prefillText = txt;
this.inputEl.trigger("input");
autosize.update(this.inputEl);
this.handleTextchange();
},
@ -373,6 +374,7 @@ app.views.Publisher = Backbone.View.extend({
this.hiddenInputEl.val("");
this.inputEl.trigger("keyup")
.trigger("keydown");
autosize.update(this.inputEl);
// remove mentions
this.inputEl.mentionsInput("reset");
@ -429,6 +431,7 @@ app.views.Publisher = Backbone.View.extend({
// visually 'open' the publisher
this.$el.removeClass("closed");
this.wrapperEl.addClass("active");
autosize.update(this.inputEl);
// fetch contacts for mentioning
Mentions.fetchContacts();

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

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

4
app/assets/stylesheets/bookmarklet.scss
View file

@ -1,2 +1,2 @@
#bookmarklet { padding:10px 10px 30px 10px; margin-top: 0; }
body.page-status_messages.action-bookmarklet { margin-top: 0px }
#bookmarklet { padding-bottom: 30px; margin-top: 0; }
body.page-status_messages.action-bookmarklet { margin-top: 0px }

1
app/assets/stylesheets/comments.scss
View file

@ -40,6 +40,7 @@
.comment_box {
width: 95%;
height: 35px;
resize: none;
}
textarea.comment_box:focus, textarea.comment_box:valid, textarea.comment_box:active {
border-color: $border-dark-grey;

12
app/views/status_messages/bookmarklet.html.haml
View file

@ -1,5 +1,7 @@
.container#bookmarklet
.row
%h4
=t('bookmarklet.post_something')
= render partial: 'publisher/publisher', locals: { aspect: :profile, :selected_aspects => @aspects, :aspect_ids => @aspect_ids }
#bookmarklet
.container
.row
.col-md-12
%h4
=t('bookmarklet.post_something')
= render partial: 'publisher/publisher', locals: { aspect: :profile, :selected_aspects => @aspects, :aspect_ids => @aspect_ids }

1
config/.jshint.json
View file

@ -38,6 +38,7 @@
"predef": [
"_",
"autosize",
"Backbone",
"gon",
"Handlebars",

1
config/.jshint_ignore
View file

@ -1,4 +1,3 @@
vendor/assets/javascripts/**.js
lib/assets/javascripts/fileuploader-custom.js
lib/assets/javascripts/jquery.autoresize.js
lib/assets/javascripts/jquery.mentionsInput.js

274
lib/assets/javascripts/jquery.autoresize.js
View file

@ -1,274 +0,0 @@
/*
* jQuery.fn.autoResize 1.14
* --
* https://github.com/padolsey/jQuery.fn.autoResize
* --
* This program is free software. It comes without any warranty, to
* the extent permitted by applicable law. You can redistribute it
* and/or modify it under the terms of the Do What The Fuck You Want
* To Public License, Version 2, as published by Sam Hocevar. See
* http://sam.zoy.org/wtfpl/COPYING for more details. */
(function($){
var uid = 'ar' + +new Date,
defaults = autoResize.defaults = {
onResize: function(){},
onBeforeResize: function(){return 123},
onAfterResize: function(){return 555},
animate: {
duration: 200,
complete: function(){}
},
extraSpace: 50,
minHeight: 'original',
maxHeight: 500,
minWidth: 'original',
maxWidth: 500
};
autoResize.cloneCSSProperties = [
'lineHeight', 'textDecoration', 'letterSpacing',
'fontSize', 'fontFamily', 'fontStyle', 'fontWeight',
'textTransform', 'textAlign', 'direction', 'wordSpacing', 'fontSizeAdjust',
'paddingTop', 'paddingLeft', 'paddingBottom', 'paddingRight', 'width'
];
autoResize.cloneCSSValues = {
position: 'absolute',
top: -9999,
left: -9999,
opacity: 0,
overflow: 'hidden'
};
autoResize.resizableFilterSelector = [
'textarea:not(textarea.' + uid + ')',
'input:not(input[type])',
'input[type=text]',
'input[type=password]',
'input[type=email]',
'input[type=url]'
].join(',');
autoResize.AutoResizer = AutoResizer;
$.fn.autoResize = autoResize;
function autoResize(config) {
this.filter(autoResize.resizableFilterSelector).each(function(){
new AutoResizer( $(this), config );
});
return this;
}
function AutoResizer(el, config) {
if (el.data('AutoResizer')) {
el.data('AutoResizer').destroy();
}
config = this.config = $.extend({}, autoResize.defaults, config);
this.el = el;
this.nodeName = el[0].nodeName.toLowerCase();
this.originalHeight = el.height();
this.previousScrollTop = null;
this.value = el.val();
if (config.maxWidth === 'original') config.maxWidth = el.width();
if (config.minWidth === 'original') config.minWidth = el.width();
if (config.maxHeight === 'original') config.maxHeight = el.height();
if (config.minHeight === 'original') config.minHeight = el.height();
if (this.nodeName === 'textarea') {
el.css({
resize: 'none',
overflowY: 'hidden'
});
}
el.data('AutoResizer', this);
// Make sure onAfterResize is called upon animation completion
config.animate.complete = (function(f){
return function() {
config.onAfterResize.call(el);
return f.apply(this, arguments);
};
}(config.animate.complete));
this.bind();
}
AutoResizer.prototype = {
bind: function() {
var check = $.proxy(function(){
this.check();
return true;
}, this);
this.unbind();
this.el
.bind('keyup.autoResize', check)
//.bind('keydown.autoResize', check)
.bind('change.autoResize', check)
.bind('paste.autoResize', function() {
setTimeout(function() { check(); }, 0);
});
if (!this.el.is(':hidden')) {
this.check(null, true);
}
},
unbind: function() {
this.el.unbind('.autoResize');
},
createClone: function() {
var el = this.el,
clone = this.nodeName === 'textarea' ? el.clone() : $('<span/>');
this.clone = clone;
$.each(autoResize.cloneCSSProperties, function(i, p){
clone[0].style[p] = el.css(p);
});
clone
.removeAttr('name')
.removeAttr('id')
.addClass(uid)
.attr('tabIndex', -1)
.css(autoResize.cloneCSSValues);
if (this.nodeName === 'textarea') {
clone.height('auto');
} else {
clone.width('auto').css({
whiteSpace: 'nowrap'
});
}
},
check: function(e, immediate) {
if (!this.clone) {
this.createClone();
this.injectClone();
}
var config = this.config,
clone = this.clone,
el = this.el,
value = el.val();
// Do nothing if value hasn't changed
if (value === this.prevValue) { return true; }
this.prevValue = value;
if (this.nodeName === 'input') {
clone.text(value);
// Calculate new width + whether to change
var cloneWidth = clone.width(),
newWidth = (cloneWidth + config.extraSpace) >= config.minWidth ?
cloneWidth + config.extraSpace : config.minWidth,
currentWidth = el.width();
newWidth = Math.min(newWidth, config.maxWidth);
if (
(newWidth < currentWidth && newWidth >= config.minWidth) ||
(newWidth >= config.minWidth && newWidth <= config.maxWidth)
) {
config.onBeforeResize.call(el);
config.onResize.call(el);
el.scrollLeft(0);
if (config.animate && !immediate) {
el.stop(1,1).animate({
width: newWidth
}, config.animate);
} else {
el.width(newWidth);
config.onAfterResize.call(el);
}
}
return;
}
// TEXTAREA
clone.width(el.width()).height(0).val(value).scrollTop(10000);
var scrollTop = clone[0].scrollTop;
// Don't do anything if scrollTop hasen't changed:
if (this.previousScrollTop === scrollTop) {
return;
}
this.previousScrollTop = scrollTop;
if (scrollTop + config.extraSpace >= config.maxHeight) {
el.css('overflowY', '');
scrollTop = config.maxHeight;
immediate = true;
} else if (scrollTop <= config.minHeight) {
scrollTop = config.minHeight;
} else {
el.css('overflowY', 'hidden');
scrollTop += config.extraSpace;
}
config.onBeforeResize.call(el);
config.onResize.call(el);
// Either animate or directly apply height:
if (config.animate && !immediate) {
el.stop(1,1).animate({
height: scrollTop
}, config.animate);
} else {
el.height(scrollTop);
config.onAfterResize.call(el);
}
},
destroy: function() {
this.unbind();
this.el.removeData('AutoResizer');
this.clone.remove();
delete this.el;
delete this.clone;
},
injectClone: function() {
(
autoResize.cloneContainer ||
(autoResize.cloneContainer = $('<arclones/>').appendTo('body'))
).append(this.clone);
}
};
})(jQuery);

6
spec/javascripts/app/views/comment_stream_view_spec.js
View file

@ -22,10 +22,10 @@ describe("app.views.CommentStream", function(){
});
it("autoResizes the new comment textarea", function(){
spyOn($.fn, "autoResize");
spyOn(window, "autosize");
this.view.postRenderTemplate();
expect($.fn.autoResize).toHaveBeenCalled();
expect($.fn.autoResize.calls.mostRecent().object.selector).toBe("textarea");
expect(window.autosize).toHaveBeenCalled();
expect(window.autosize.calls.mostRecent().args[0].selector).toBe("textarea");
});
});

14
spec/javascripts/helpers/SpecHelper.js
View file

@ -42,8 +42,6 @@ var customMatchers = {
beforeEach(function() {
$('#jasmine_content').html(spec.readFixture("underscore_templates"));
jasmine.clock().install();
jasmine.Ajax.install();
@ -64,6 +62,18 @@ beforeEach(function() {
// add custom matchers for flash messages
jasmine.addMatchers(customMatchers);
// PhantomJS 1.9.8 doesn't support bind yet
// See https://github.com/ariya/phantomjs/issues/10522
// and https://github.com/colszowka/phantomjs-gem
/* jshint -W121 */
Function.prototype.bind = Function.prototype.bind || function (thisp) {
var fn = this;
return function () {
return fn.apply(thisp, arguments);
};
};
/* jshint +W121 */
});
afterEach(function() {