From e4e4e933f210f0ef6ca3f740da411574aa61ace1 Mon Sep 17 00:00:00 2001 From: Evgeny Fadeev Date: Wed, 10 Apr 2013 01:55:33 -0400 Subject: made answer editor be folded by default --- askbot/media/js/post.js | 62 +++++++++++++++++++++++++- askbot/media/style/style.css | 23 +++++++--- askbot/media/style/style.less | 18 ++++++++ askbot/templates/question/content.html | 20 ++++----- askbot/templates/question/javascript.html | 7 +++ askbot/templates/question/new_answer_form.html | 43 ++++++++++-------- 6 files changed, 136 insertions(+), 37 deletions(-) diff --git a/askbot/media/js/post.js b/askbot/media/js/post.js index 4e1e8da2..514dfeab 100644 --- a/askbot/media/js/post.js +++ b/askbot/media/js/post.js @@ -2427,6 +2427,55 @@ QASwapper.prototype.startSwapping = function(){ } }; +/** + * @constructor + * An element that encloses an editor and everything inside it. + * By default editor is hidden and user sees a box with a prompt + * suggesting to make a post. + * When user clicks, editor becomes accessible. + */ +var FoldedEditor = function() { + WrappedElement.call(this); +}; +inherits(FoldedEditor, WrappedElement); + +FoldedEditor.prototype.getOpenHandler = function() { + var editorBox = this._editorBox; + var promptBox = this._prompt; + var editor = this._editor; + var me = this; + return function() { + promptBox.hide(); + editorBox.show(); + me.getElement().addClass('unfolded'); + if (editor) { + editor.focus(); + setTimeout(function() {editor.focus()}, 100); + } + }; +}; + +FoldedEditor.prototype.decorate = function(element) { + this._element = element; + this._prompt = element.find('.prompt'); + this._editorBox = element.find('.editor-proper'); + + var editorType = askbot['settings']['editorType']; + if (editorType === 'tinymce') { + var editor = new TinyMCE(); + editor.decorate(element.find('textarea')); + this._editor = editor; + } else if (editorType === 'markdown') { + var editor = new WMD(); + editor.decorate(element); + this._editor = editor; + } + + var openHandler = this.getOpenHandler(); + element.click(openHandler); + element.focus(openHandler); +}; + /** * @constructor * a simple textarea-based editor @@ -2557,6 +2606,12 @@ WMD.prototype.createDom = function(){ } }; +WMD.prototype.decorate = function(element) { + this._element = element; + this._textarea = element.find('textarea'); + this._previewer = element.find('.wmd-preview'); +}; + WMD.prototype.start = function(){ Attacklab.Util.startEditor(true, this._enabled_buttons, this.getIdSeed()); }; @@ -2591,7 +2646,7 @@ TinyMCE.prototype.setHighlight = function() {}; TinyMCE.prototype.putCursorAtEnd = function() {}; TinyMCE.prototype.focus = function() { - //tinymce.execCommand('mceFocus', false, this._id); + tinymce.execCommand('mceFocus', false, this._id); //@todo: make this general to all editors var winH = $(window).height(); @@ -2640,6 +2695,11 @@ TinyMCE.prototype.createDom = function() { this._element.append(textarea); }; +TinyMCE.prototype.decorate = function(element) { + this._element = element; + this._id = element.attr('id'); +}; + /** * @constructor * @todo: change this to generic object description editor diff --git a/askbot/media/style/style.css b/askbot/media/style/style.css index 66004b25..669101be 100644 --- a/askbot/media/style/style.css +++ b/askbot/media/style/style.css @@ -1799,18 +1799,27 @@ ul#related-tags li { margin-top: 3px; margin-right: 7px; } -.wmd-container { +.folded-editor { border: #cce6ec 3px solid; - transition: 1s; + height: 100px; + outline: none; + width: 100%; } -.wmd-container textarea { +.folded-editor .editor-proper { + display: none; +} +.folded-editor p.prompt { + margin: 5px 8px; + display: block; +} +.folded-editor.unfolded { border: none; } -.wmd-container.inactive { - border-color: #ddd; +.wmd-container { + border: #cce6ec 3px solid; } -.wmd-container.inactive .mceToolbar { - display: none; +.wmd-container textarea { + border: none; } .users-page .wmd-container { width: auto; diff --git a/askbot/media/style/style.less b/askbot/media/style/style.less index 5ee2eab3..448b3e04 100644 --- a/askbot/media/style/style.less +++ b/askbot/media/style/style.less @@ -1898,6 +1898,24 @@ ul#related-tags li { margin-right:7px; } +.folded-editor { + border:#cce6ec 3px solid; + height: 100px; + outline: none; + width: 100%; + + .editor-proper { + display: none; + } + p.prompt { + margin: 5px 8px; + display: block; + } +} +.folded-editor.unfolded { + border: none; +} + .wmd-container { border:#cce6ec 3px solid; textarea { diff --git a/askbot/templates/question/content.html b/askbot/templates/question/content.html index fe11d8e3..23286ce0 100644 --- a/askbot/templates/question/content.html +++ b/askbot/templates/question/content.html @@ -26,17 +26,17 @@ {% if new_answer_allowed %} {% include "question/new_answer_form.html" %} {% else %} -
- {% trans %}Edit Your Previous Answer{% endtrans %} - {% trans %}(only one answer per user is allowed){% endtrans %} - {% endif %} {% if question.closed == False and request.user == question.author %}{# this is outside the form on purpose #} diff --git a/askbot/templates/question/new_answer_form.html b/askbot/templates/question/new_answer_form.html index 2235f4f4..b65e0e3d 100644 --- a/askbot/templates/question/new_answer_form.html +++ b/askbot/templates/question/new_answer_form.html @@ -35,25 +35,30 @@ {% endif %}

{% endif %} - {{ macros.edit_post( - answer, - user = request.user, - editor_type = settings.EDITOR_TYPE - ) - }} - - - {% if settings.WIKI_ON %} - {{ macros.checkbox_in_div(answer.wiki) }} - {% endif %} - {% if settings.GROUPS_ENABLED and - request.user.is_authenticated() and - request.user.can_make_group_private_posts() - %} - {{ macros.checkbox_in_div(answer.post_privately) }} - {% endif %} +
+

{% trans %}Add answer{% endtrans %}

+
+ {{ macros.edit_post( + answer, + user = request.user, + editor_type = settings.EDITOR_TYPE + ) + }} + + + {% if settings.WIKI_ON %} + {{ macros.checkbox_in_div(answer.wiki) }} + {% endif %} + {% if settings.GROUPS_ENABLED and + request.user.is_authenticated() and + request.user.can_make_group_private_posts() + %} + {{ macros.checkbox_in_div(answer.post_privately) }} + {% endif %} +
+
{% endif %} {% endif %} -- cgit v1.2.3-1-g7c22