Rewriting gallery mode.

boards/static/js/thread.js

@@ -1,106 +1,56 b''
-var image_mode = 0;
-var normal_dom, table_dom;
-
-function add_panel(after)
-{
-    var nav_top = $(after);
-    if (nav_top.length === 0) return;
-    nav_top = nav_top[0];
-
-    var tab_bar = $('<div class="image-mode-tab" role="radiogroup" aria-label="Image mode"></div>');
-
-    var tab;
-
-    tab = $('<input type="radio" class="image-mode-normal" name="image-mode" value="0" checked="checked"/>');
-    tab.on("change", tab_handler);
-
-    var label_normal = gettext('Normal');
-    tab = $('<label>' + label_normal + '</label>').prepend(tab);
-    tab_bar.append(tab);
-
-    tab = $('<input type="radio" class="image-mode-table" name="image-mode" value="1"/>');
-    tab.on("change", tab_handler);
-
-    var label_gallery = gettext('Gallery');
-    tab = $('<label>' + label_gallery + '</label>').prepend(tab);
-    tab_bar.append(tab);
-
-    tab_bar.insertAfter(nav_top);
-}
-
-function tab_handler(ev)
-{
-    var current_el = $(this);
-
-    if (!current_el.prop('checked')) return;
+function addGalleryPanel() {
+    var gallery = $('a[class="thumb"]').clone(true),
+        normal = $('.post').clone(true);
 
-    var new_mode = parseInt(current_el.val(), 10);
-    if (new_mode === image_mode) return;
-    image_mode = new_mode;
-
-    make_normal_dom();
-    make_table_dom();
-
-    switch(new_mode) {
-        case 0:
-            $('#posts-table').replaceWith(normal_dom);
-            break;
-        case 1:
-            $('#posts').replaceWith(table_dom);
-            break;
-    }
+    $('.navigation_panel').filter(':first').after(
+        '<div class="image-mode-tab" role="radiogroup" aria-label="Image mode2">' +
+        '<label><input type="radio" class="image-mode-normal" name="image-mode" value="0" checked="checked"/>'+ gettext('Normal') +'</label>' +
+        '<label><input type="radio" class="image-mode-table" name="image-mode" value="1"/>'+ gettext('Gallery') +'</label>' +
+        '</div>'
+    );
 
-    //TODO: временно
-    addImgPreview();
-}
-
-function make_normal_dom()
-{
-    if (typeof normal_dom === 'undefined') {
-        normal_dom = $('#posts').clone(true);
-    }
-}
-
-function make_table_dom()
-{
-    if (typeof table_dom !== 'undefined') return;
-
-    table_dom = $('<div id="posts-table"></div>');
-    $('#posts > .post > .image > a').each(
-        function(){
-            table_dom.append(
-                $(this).clone().attr('target', '_blank')
+    $('input[name="image-mode"]').change(function() {
+        //gallery mode
+        if($(this).val() === '1') {
+            $('#posts').replaceWith(
+                $('<div id="posts-table"></div>').append(gallery)
             );
         }
+        //normal mode
+        else {
+            $('#posts-table').replaceWith(
+                $('<div id="posts"></div>').append(normal)
     );
 }
+    });
+}
 
 function moveCaretToEnd(el) {
         if (typeof el.selectionStart == "number") {
             el.selectionStart = el.selectionEnd = el.value.length;
         } else if (typeof el.createTextRange != "undefined") {
             el.focus();
             var range = el.createTextRange();
             range.collapse(false);
             range.select();
         }
 }
 
 function addQuickReply(postId) {
     var textToAdd = '>>' + postId + '\n\n';
     var textAreaId = '#id_text';
     $(textAreaId).val($(textAreaId).val()+ textToAdd);
 
     var textarea = document.getElementById('id_text');
     $(textAreaId).focus();
     moveCaretToEnd(textarea);
 
     $("html, body").animate({ scrollTop: $(textAreaId).offset().top }, "slow");
 }
 
 
 
 $(document).ready(function(){
-    add_panel('.navigation_panel');
+    addGalleryPanel();
     addRefLinkMap();
 });