made answer editor be folded by default

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
@@ -2429,6 +2429,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
  */
 var SimpleEditor = function(attrs) {
@@ -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 %}
-<div style="margin-top: 15px">
-    <a
-        class="button submit"
-        href="{% url "edit_answer" previous_answer.id %}"
-    >{% trans %}Edit Your Previous Answer{% endtrans %}</a>
-    <span>{% trans %}(only one answer per user is allowed){% endtrans %}</span>
-    <div class="invisible">
-        {# hidden because we still need js from the tinymce widget #}
-        {% include "question/new_answer_form.html" %}
+    <div style="margin-top: 15px">
+        <a
+            class="button submit"
+            href="{% url "edit_answer" previous_answer.id %}"
+        >{% trans %}Edit Your Previous Answer{% endtrans %}</a>
+        <span>{% trans %}(only one answer per user is allowed){% endtrans %}</span>
+        <div class="invisible">
+            {# hidden because we still need js from the tinymce widget #}
+            {% include "question/new_answer_form.html" %}
+        </div>
     </div>
-</div>
 {% endif %}
 {% if question.closed == False and request.user == question.author %}{# this is outside the form on purpose #}
 <input 
diff --git a/askbot/templates/question/javascript.html b/askbot/templates/question/javascript.html
index d32e14c5..f58b4acc 100644
--- a/askbot/templates/question/javascript.html
+++ b/askbot/templates/question/javascript.html
@@ -84,4 +84,11 @@
             CPValidator.getAnswerFormMessages()
         );
     }
+    (function() {
+        var editorBox = $('.folded-editor');
+        if (editorBox.length) {
+            var foldedEditor = new FoldedEditor();
+            foldedEditor.decorate(editorBox);
+        }
+    })();
 </script>
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 %}
                 </p>
             {% endif %}
-            {{ macros.edit_post(
-                    answer,
-                    user = request.user,
-                    editor_type = settings.EDITOR_TYPE
-                )
-            }}
-            <input id="add-answer-btn" type="submit" class="submit after-editor" style="float:left"/>
-            <script type="text/javascript">
-                askbot['functions']['renderAddAnswerButton']();
-            </script>
-            {% 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 %}
+            <div class="folded-editor" tabindex="6">
+                <p class="prompt"><a>{% trans %}Add answer{% endtrans %}</a></p>
+                <div class="editor-proper">
+                    {{ macros.edit_post(
+                            answer,
+                            user = request.user,
+                            editor_type = settings.EDITOR_TYPE
+                        )
+                    }}
+                    <input id="add-answer-btn" type="submit" class="submit after-editor" style="float:left"/>
+                    <script type="text/javascript">
+                        askbot['functions']['renderAddAnswerButton']();
+                    </script>
+                    {% 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 %}
+                </div>
+            </div>
         {% endif %}
     {% endif %}
 </form>