When swapping the form view, move elements of one form instead of swapping 2

different forms with each other.

boards/static/css/base.css

@@ -1,76 +1,81 b''
 .ui-button {
    display: none;
 }
 
 .ui-dialog-content {
     padding: 0;
     min-height: 0;
 }
 
 .mark_btn {
     cursor: pointer;
 }
 
 .img-full {
     position: fixed;
     background-color: #CCC;
     border: 1px solid #000;
     cursor: pointer;
 }
 
 .strikethrough {
     text-decoration: line-through;
 }
 
 .post_preview {
     z-index: 300;
     position:absolute;
 }
 
 .gallery_image {
     display: inline-block;
 }
 
 @media print {
     .post-form-w {
         display: none;
     }
 }
 
 input[name="image"] {
      display: block;
      width: 100px;
      height: 100px;
      cursor: pointer;
      position: absolute;
      opacity: 0;
      z-index: 1;
 }
 
 .file_wrap {
      width: 100px;
      height: 100px;
      border: solid 1px white;
      display: inline-block;
 }
 
 form > .file_wrap {
     float: left;
 }
 
 .file-thumb {
     width: 100px;
     height: 100px;
     background-size: cover;
     background-position: center;
 }
 
 .compact-form-text {
     margin-left:110px;
 }
 
 textarea, input {
     -moz-box-sizing: border-box;
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
-}
  No newline at end of file
+}
+
+.compact-form-text > textarea {
+    height: 100px;
+    width: 100%;
+}

boards/static/js/form.js

@@ -1,45 +1,45 b''
-var isCompact = true;
+var isCompact = false;
 
 $('input[name=image]').wrap($('<div class="file_wrap"></div>'));
 
 $('body').on('change', 'input[name=image]', function(event) {
     var file = event.target.files[0];
 
     if(file.type.match('image.*')) {
         var fileReader = new FileReader();
 
         fileReader.addEventListener("load", function(event) {
             var wrapper = $('.file_wrap');
 
             wrapper.find('.file-thumb').remove();
             wrapper.append(
                 $('<div class="file-thumb" style="background-image: url('+event.target.result+')"></div>')
             );
         });
 
         fileReader.readAsDataURL(file);
     }
 });
 
-var compactForm = $('.swappable-form-compact');
 var fullForm = $('.swappable-form-full');
 
 function swapForm() {
-    compactForm.toggle();
-    fullForm.toggle();
-
     if (isCompact) {
-        var oldText = compactForm.find('textarea')[0].value;
-        fullForm.find('textarea')[0].value = oldText;
+        // TODO Use IDs (change the django form code) instead of absolute numbers
+        fullForm.find('textarea').appendTo(fullForm.find('.form-row')[4]);
+        fullForm.find('.file_wrap').appendTo(fullForm.find('.form-row')[7]);
+        fullForm.find('.form-row').show();
     } else {
-        var oldText = fullForm.find('textarea')[0].value;
-        compactForm.find('textarea')[0].value = oldText;
+        fullForm.find('textarea').appendTo($('.compact-form-text'));
+        fullForm.find('.file_wrap').insertBefore($('.compact-form-text'));
+        fullForm.find('.form-row').hide();
+        fullForm.find('input[type=text]').val('');
     }
     isCompact = !isCompact;
-    
+
     scrollToBottom();
 }
 
-if (compactForm.length > 0) {
-    fullForm.toggle();
-}
+$(document).ready(function() {
+    swapForm();
+})

boards/templates/boards/thread.html

@@ -1,108 +1,95 b''
 {% extends "boards/base.html" %}
 
 {% load i18n %}
 {% load cache %}
 {% load static from staticfiles %}
 {% load board %}
 
 {% block head %}
     <title>{{ opening_post.get_title|striptags|truncatewords:10 }}
         - {{ site_name }}</title>
 {% endblock %}
 
 {% block content %}
     {% spaceless %}
     {% get_current_language as LANGUAGE_CODE %}
 
     {% cache 600 thread_view thread.id thread.last_edit_time moderator LANGUAGE_CODE %}
 
     <div class="image-mode-tab">
         <a class="current_mode" href="{% url 'thread' opening_post.id %}">{% trans 'Normal mode' %}</a>,
         <a href="{% url 'thread_mode' opening_post.id 'gallery' %}">{% trans 'Gallery mode' %}</a>
     </div>
 
     {% if bumpable %}
         <div class="bar-bg">
             <div class="bar-value" style="width:{{ bumplimit_progress }}%" id="bumplimit_progress">
             </div>
             <div class="bar-text">
                 <span id="left_to_limit">{{ posts_left }}</span> {% trans 'posts to bumplimit' %}
             </div>
         </div>
     {% endif %}
 
     <div class="thread">
         {% with can_bump=thread.can_bump %}
         {% for post in thread.get_replies %}
             {% if forloop.first %}
                 {% post_view post moderator=moderator is_opening=True thread=thread can_bump=can_bump opening_post_id=opening_post.id %}
             {% else %}
                 {% post_view post moderator=moderator is_opening=False thread=thread can_bump=can_bump opening_post_id=opening_post.id %}
             {% endif %}
         {% endfor %}
         {% endwith %}
     </div>
 
     {% if not thread.archived %}
 
     <div class="post-form-w" id="form">
         <script src="{% static 'js/panel.js' %}"></script>
         <div class="form-title">{% trans "Reply to thread" %} #{{ opening_post.id }}</div>
         <div class="post-form" id="compact-form">
-            <div class="swappable-form-compact">
-            <form enctype="multipart/form-data" method="post"
-                    >{% csrf_token %}
-                <input type="file" name="image" accept="image/*"/>
-                <div class="compact-form-text">
-                    <textarea name="text" style="height: 100px;
-                width: 100%;
-                "></textarea>
-                </div>
-                <div class="form-submit">
-                    <input type="submit" value="{% trans "Post" %}"/>
-                </div>
-            </form>
-            </div>
             <div class="swappable-form-full">
                 <form enctype="multipart/form-data" method="post"
                         >{% csrf_token %}
+                        <div class="compact-form-text"></div>
                     {{ form.as_div }}
                     <div class="form-submit">
                         <input type="submit" value="{% trans "Post" %}"/>
                     </div>
                 </form>
             </div>
             <a onclick="swapForm(); return false;" href="#">
                 {% trans 'Switch mode' %}
             </a>
             <div><a href="{% url "staticpage" name="help" %}">
                 {% trans 'Text syntax' %}</a></div>
         </div>
     </div>
 
     <script src="{% static 'js/jquery.form.min.js' %}"></script>
     <script src="{% static 'js/thread_update.js' %}"></script>
     {% endif %}
 
     <script src="{% static 'js/form.js' %}"></script>
     <script src="{% static 'js/thread.js' %}"></script>
 
     {% endcache %}
 
     {% endspaceless %}
 {% endblock %}
 
 {% block metapanel %}
 
     {% get_current_language as LANGUAGE_CODE %}
 
     <span class="metapanel" data-last-update="{{ last_update }}">
         {% cache 600 thread_meta thread.last_edit_time moderator LANGUAGE_CODE %}
             <span id="reply-count">{{ thread.get_reply_count }}</span>/{{ max_replies }} {% trans 'replies' %},
             <span id="image-count">{{ thread.get_images_count }}</span> {% trans 'images' %}.
             {% trans 'Last update: ' %}<span id="last-update">{{ thread.last_edit_time }}</span>
             [<a href="rss/">RSS</a>]
         {% endcache %}
     </span>
 
 {% endblock %}