From 24ad9f957d8f56a209518a28f42fbfae2e482b54 Mon Sep 17 00:00:00 2001 From: =?utf8?q?Aleksander=20=C5=81ukasz?= Date: Wed, 28 May 2014 11:33:35 +0200 Subject: [PATCH 1/1] editor: gutter comments - refactoring and clean up --- .../canvas/comments/comments.js | 60 +++++++------------ .../canvas/comments/comments.less | 2 - .../modules/documentCanvas/canvas/gutter.js | 5 -- 3 files changed, 22 insertions(+), 45 deletions(-) diff --git a/src/editor/modules/documentCanvas/canvas/comments/comments.js b/src/editor/modules/documentCanvas/canvas/comments/comments.js index 632616b..3076f52 100644 --- a/src/editor/modules/documentCanvas/canvas/comments/comments.js +++ b/src/editor/modules/documentCanvas/canvas/comments/comments.js @@ -1,7 +1,7 @@ define(function(require) { 'use strict'; -/* globals Node, gettext */ +/* globals gettext */ var $ = require('libs/jquery'), @@ -11,7 +11,20 @@ var $ = require('libs/jquery'), commentTemplate = require('libs/text!./comment.html'); -var View = function(node, user) { +var makeAutoResizable = function(textarea) { + textarea.on('input', function() { + resize(textarea); + }); +}; + +var resize = function(textarea) { + if(textarea.prop('scrollHeight') > textarea.prop('clientHeight')) { + textarea.height(textarea.prop('scrollHeight')); + } +}; + + +var CommentsView = function(node, user) { this.node = node; this.user = user; this.dom = $(_.template(commentsTemplate)()); @@ -22,13 +35,9 @@ var View = function(node, user) { this.textarea.on('input', function() { this.addButton.attr('disabled', this.textarea.val() === ''); - - if (this.textarea.prop('scrollHeight') > this.textarea.prop('clientHeight')) { - this.textarea.height(this.textarea.prop('scrollHeight')); - } - - }.bind(this)); + makeAutoResizable(this.textarea); + this.addButton.hide(); this.cancelButton.hide(); this.textarea.on('focus', function() { @@ -82,47 +91,29 @@ var View = function(node, user) { }; -_.extend(View.prototype, { +_.extend(CommentsView.prototype, { render: function() { this.list.empty(); - - // while(this.node.getTagName() === 'span' && this.node.parent()) { - // this.node = this.node.parent(); - // } this.textarea.attr('placeholder', gettext('Comment')); this.node.contents() .filter(function(child) { - return child.nodeType === Node.ELEMENT_NODE && child.getTagName() === 'aside' && child.getClass() === 'comment'; - //return child.is({tag: 'aside', klass: 'comment'}); - + return child.is({tag: 'aside', klass: 'comment'}); }) .forEach(function(commentNode) { var commentView = new CommentView(commentNode); this.list.append(commentView.dom); this.textarea.attr('placeholder', gettext('Respond') + '...'); }.bind(this)); - }, onActivated: function() { - //if(this.list.find('.comment').length === 0) { this.dom.find('.newComment').toggle(true); - //} - //this.dom.show(); - }, onDeactivated: function() { this.dom.find('.newComment').toggle(false); this.addButton.hide(); this.cancelButton.hide(); - //this.dom.hide(); - }, - - getHeight: function() { - return this.dom.outerHeight(); - } - }); @@ -193,13 +184,8 @@ var CommentView = function(commentNode) { this.textarea = this.editElement.find('textarea'); this.textarea.on('input', function() { this.dom.find('.edit-save-btn').attr('disabled', this.textarea.val() === ''); - - if (this.textarea.prop('scrollHeight') > this.textarea.prop('clientHeight')) { - this.textarea.height(this.textarea.prop('scrollHeight')); - } - - }.bind(this)); + makeAutoResizable(this.textarea); }; $.extend(CommentView.prototype, { @@ -207,9 +193,7 @@ $.extend(CommentView.prototype, { this.contentElement.hide(); this.editElement.show(); this.textarea.val(this.node.object.getText()); - if(this.textarea.prop('scrollHeight') > this.textarea.prop('clientHeight')) { - this.textarea.height(this.textarea.prop('scrollHeight')); - } + resize(this.textarea); this.textarea.focus(); }, saveEditing: function() { @@ -230,6 +214,6 @@ $.extend(CommentView.prototype, { }); -return View; +return CommentsView; }); \ No newline at end of file diff --git a/src/editor/modules/documentCanvas/canvas/comments/comments.less b/src/editor/modules/documentCanvas/canvas/comments/comments.less index 4c68e64..688d3f8 100644 --- a/src/editor/modules/documentCanvas/canvas/comments/comments.less +++ b/src/editor/modules/documentCanvas/canvas/comments/comments.less @@ -52,8 +52,6 @@ .newComment { margin-top: 10px; - - } textarea { diff --git a/src/editor/modules/documentCanvas/canvas/gutter.js b/src/editor/modules/documentCanvas/canvas/gutter.js index a382871..b6bd665 100644 --- a/src/editor/modules/documentCanvas/canvas/gutter.js +++ b/src/editor/modules/documentCanvas/canvas/gutter.js @@ -46,7 +46,6 @@ var GutterGroupView = function(gutterView, group) { $.extend(GutterGroupView.prototype, { remove: function() { this.group.off('viewAdded', this.onViewAdded); - this.group.off('offsetChange', this.onOffsetChange); this.group.off('focusToggled', this.onFocusToggled); this.dom.detach(); }, @@ -79,10 +78,6 @@ $.extend(ViewGroup.prototype, Backbone.Events, { getOffsetHint: function() { return _.isFunction(this.params.offsetHint) ? this.params.offsetHint() : this.params.offsetHint; }, - setOffset: function(offset) { - this.trigger('offsetChange', offset); - this._offset = offset; - }, addView: function(view) { this.views.push(view); this.trigger('viewAdded', view); -- 2.20.1