it-swarm-eu.dev

Pomozte rozšířit vlastní stránku přetahování stránek na obrazovce se seznamem administrátorů

Používám následující kód, který transformuje libovolnou hierarchickou stránku nebo vlastní příspěvek typu s možností přeuspořádání stránek pomocí jednoduchého přetažení. (Tento kód také přidává nový filtr zobrazení na hierarchické stránky, aby se věci zjednodušily).

Problém, který potřebuji pomoci, s níž v současné době nefunguje, je možnost přetáhnout jeden strom stránek do jiného stromu stránek nebo ze stávajícího stromu stránek.

Mohl by někdo poskytnout úpravy kódu potřebné pro rozšíření této funkce?

Pokud víte o lepším způsobu, jak dosáhnout stejných cílů s jiným kódem než rozšířením kódu uvedeného níže, uveďte také příspěvek.

AKTUALIZOVANÉ: Tento kód jsem také zveřejnil zde: https://Gist.github.com/812204

POZNÁMKA: pro všechny ty, kteří by si to chtěli vyzkoušet, stačí udělat následující.

1. Zkopírujte/překreslete kód uvedený níže v souboru themes function.php ".

///////////////////////////////////////////////////////////////////////////////////////////
// CODE TO ADD POST PER PAGE FILTER
///////////////////////////////////////////////////////////////////////////////////////////    
    add_filter( 'edit_posts_per_page', 'reorder_edit_posts_per_page', 10, 2 );
    function reorder_edit_posts_per_page( $per_page, $post_type ) {

        // CHECK USER PERMISSIONS
        if ( !current_user_can('edit_others_pages') )
            return;
        $post_type_object = get_post_type_object( $post_type );

        // ONLY APPLY TO HIERARCHICAL POST TYPE
        if ( !$post_type_object->hierarchical )
            return;

        // ADD POST PER PAGE DROP DOWN UI
        add_action( 'restrict_manage_posts', 'reorder_posts_per_page_filter' );

        // ADD SPECIAL STYLES (MOVE CURSOR & SPINNING LOADER AFTER REORDER)
        wp_enqueue_script( 'page-ordering', get_bloginfo('stylesheet_directory') . '/custom/js/page-resorting.js', array('jquery-ui-sortable'), '0.8.4', true );
        add_action( 'admin_print_styles', 'reorder_admin_styles' );

        if ( isset( $_GET['spo'] ) && is_numeric( $_GET['spo'] ) && ( $_GET['spo'] == -1 || ($_GET['spo']%10) == 0 ) ) :
            global $edit_per_page, $user_ID;
            $per_page = $_GET['spo'];
            if ( $per_page == -1 )
                $per_page = 99999;
            update_user_option( $user_ID, $edit_per_page, $per_page );
        endif;
        return $per_page;
    }


    // STYLING CSS FOR THE AJAX
       function reorder_admin_styles() {
        echo '<style type="text/css">table.widefat tbody th, table.widefat tbody td { cursor: move; }</style>';
       }


    // FUNCTION TO CREATE THE NUMBER OF POSTS PER PAGE DROPDOWN UI
       function reorder_posts_per_page_filter() {
        global $per_page;       
        $spo = isset($_GET['spo']) ? (int)$_GET['spo'] : $per_page;
       ?>
        Display:<select name="spo" style="width: 100px;">
            <option<?php selected( $spo, -1 ); ?> value="-1"><?php _e('All Results'); ?></option>
            <?php for( $i=10;$i<=100;$i+=10 ) : ?>
            <option<?php selected( $spo, $i ); ?> value="<?php echo $i ?>"><?php echo $i; ?> <?php _e('Results'); ?></option>
            <?php endfor; ?>        
        </select>
       <?php
       } 



    ///////////////////////////////////////////////////////////////////////////////////////////////////////////////
    // ACTUAL AJAX REQUEST FOR SORTING PAGES 
    ///////////////////////////////////////////////////////////////////////////////////////////////////////////////

    add_action( 'wp_ajax_simple_page_ordering', 'reorder_do_page_ordering' );
    function reorder_do_page_ordering() {

        // RECHECK PERMISSIONS
        if ( !current_user_can('edit_others_pages') || !isset($_POST['id']) || empty($_POST['id']) || ( !isset($_POST['previd']) && !isset($_POST['nextid']) ) )
            die(-1);

        // IS IT A REAL POST?
        if ( !$post = get_post( $_POST['id'] ) )
            die(-1);
        $previd = isset($_POST['previd']) ? $_POST['previd'] : false;
        $nextid = isset($_POST['nextid']) ? $_POST['nextid'] : false;
        if ( $previd ) {

            // FETCH ALL THE SIBLINGS (RELATIVE ORDERING)
            $siblings = get_posts(array( 'depth' => 1, 'numberposts' => -1, 'post_type' => $post->post_type, 'post_status' => 'publish,pending,draft,future,private', 'post_parent' => $post->post_parent, 'orderby' => 'menu_order', 'order' => 'ASC', 'exclude' => $post->ID ));
            foreach( $siblings as $sibling ) :

                // BEGIN UPDATING MENU ORDERS
                if ( $sibling->ID == $previd ) {
                    $menu_order = $sibling->menu_order + 1;
                    // UPDATE THE ACTUAL MOVED POST TO 1 AFTER PREV
                    wp_update_post(array( 'ID' => $post->ID, 'menu_order' => $menu_order ));
                    continue;
                }

                // NOTHING LEFT TO DO - NUMBERS CORRECTLY PADDED
                if ( isset($menu_order) && $menu_order < $sibling->menu_order )
                    break; 

                // NEED TO UPDATE THE SIBLINGS MENU ORDER AS WELL
                if ( isset($menu_order) ) {
                    $menu_order++;
                    // UPDATE THE ACTUAL MOVED POST TO 1 AFTER PREV
                    wp_update_post(array( 'ID' => $sibling->ID, 'menu_order' => $menu_order )); 
                }       
            endforeach;
        }

        if ( !isset($menu_order) && $nextid ) {

            // FETCH ALL THE SIBLINGS (RELATIVE ORDERING)
            $siblings = get_posts(array( 'depth' => 1, 'numberposts' => -1, 'post_type' => $post->post_type, 'post_status' => 'publish,pending,draft,future,private', 'post_parent' => $post->post_parent, 'orderby' => 'menu_order', 'order' => 'DESC', 'exclude' => $post->ID ));
            foreach( $siblings as $sibling ) :

                // START UPDATING MENU ORDERS
                if ( $sibling->ID == $nextid ) {
                    $menu_order = $sibling->menu_order - 1;
                    // UPDATE THE ACTUAL MOVED POST TO 1 AFTER PREV
                    wp_update_post(array( 'ID' => $post->ID, 'menu_order' => $menu_order ));
                    continue;
                }

                // NOTHING LEFT TO DO - NUMBER ALREADY PADDED
                if ( isset($menu_order) && $menu_order > $sibling->menu_order )
                    break; 

                // NEED TO UPDATE THE SIBLING MENU ORDER
                if ( isset($menu_order) ) {
                    $menu_order--;
                    // UPDATE THE ACTUAL MOVED POST TO 1 AFTER PREV
                    wp_update_post(array( 'ID' => $sibling->ID, 'menu_order' => $menu_order )); 
                }       
            endforeach;
        }

        // FETCH ALL THE SIBLINGS WITH RELATIVE ORDERING AND IF THE MOVED POST HAS CHILDREN REFRESH THE PAGE
        $children = get_posts(array( 'depth' => 1, 'numberposts' => 1, 'post_type' => $post->post_type, 'post_status' => 'publish,pending,draft,future,private', 'post_parent' => $post->ID ));
        if ( !empty($children) )
            die('children');
        die();
    }

2. kroky Vzhledem k tomu, že níže uvedený skript volá vlastní soubor JS, musíme tento soubor také přepravit a zahrnout. Pokud nechcete výše uvedený skript upravovat, přejděte a vytvořte složku v kořenovém adresáři složky motivu a volejte ji "vlastní". Dále v této složce vytvořte další složku s názvem "js". Dále vytvořte nový soubor v této složce nazvaný "page-resorting.js" a za tímto kódem vložte tento kód. Poté, co je to provedeno, měli byste být schopni změnit pořadí pomocí přetažení všech stránek v oblasti admin.

/////////////////////////////////////////////////////////////////////////////////////////////////////
// THIS SCRIPT APPLIES TO THE CUSTOM SCRIPT MODIFICATION ALLOWING HIERARCHICAL PAGES TO BE REORDERED
/////////////////////////////////////////////////////////////////////////////////////////////////////


jQuery("table.widefat tbody").sortable({  
    cursor: 'move',
    axis: 'y',
    containment: 'table.widefat',
    scrollSensitivity: 40,
    helper: function(e, ui) {                   
        ui.children().each(function() { jQuery(this).width(jQuery(this).width()); });
        return ui;
    },
    start: function(event, ui) {
        if ( ! ui.item.hasClass('alternate') ) ui.item.css( 'background-color', '#ffffff' );
        ui.item.children('td, th').css('border','none');
        ui.item.css( 'outline', '1px solid #dfdfdf' );
    },
    stop: function(event, ui) {     
        ui.item.removeAttr('style');
        ui.item.children('td, th').removeAttr('style');
    },
    update: function(event, ui) {   
        if ( ui.item.hasClass('inline-editor') ) {
            jQuery("table.widefat tbody").sortable('cancel');
            alert( 'Please close the quick editor before reordering this item.' );
            return;
        }

        var postid = ui.item.find('.check-column input').val(); // THIS POST ID
        var postparent = ui.item.find('.post_parent').html();   // POST PARENT

        var prevpostid = ui.item.prev().find('.check-column input').val();
        var nextpostid = ui.item.next().find('.check-column input').val();

        // can only sort in same tree

        var prevpostparent = undefined;
        if ( prevpostid != undefined ) {
            var prevpostparent = ui.item.prev().find('.post_parent').html()
            if ( prevpostparent != postparent) prevpostid = undefined;
        }

        var nextpostparent = undefined;
        if ( nextpostid != undefined ) {
            nextpostparent = ui.item.next().find('.post_parent').html();
            if ( nextpostparent != postparent) nextpostid = undefined;
        }   

        // DISPLAY AN ALERT MESSAGE IF ANY OF THE FOLLOWING TAKES PLACE
        // IF PREVIOUS AND NEXT ARE NOT AT THE SAME TREE LEVEL OR NOT AT THE SAME TREE LEVEL AND THE PREVIOUS PAGE IS THE PARENT OF THE NEXT OR JUST MOVED BENEATH ITS OWN CHILDREN                     
        if ( ( prevpostid == undefined && nextpostid == undefined ) || ( nextpostid == undefined && nextpostparent == prevpostid ) || ( nextpostid != undefined && prevpostparent == postid ) ) {
            jQuery("table.widefat tbody").sortable('cancel');
            alert( "SORRY, THIS ACTION IS NOT POSSIBLE!\n\n>>> WHY THIS DOES NOT WORK:\nDrag-and-Drop capabilities only work for items within their current tree.\n\n>>> HERE IS HOW YOU CAN MOVE IT:\nIn order to move this item to the location you specified you simply need to use the \"Quick Edit\" link and modify the associated \"Parent\" page.\n\n>>> LOCATING THE QUICK EDIT LINK:\nOn the post you want to move, just hover over the post title and click on the \"Quick Edit\" link which appears below the title." );
            return;
        }

        // SHOW AJAX SPINNING SAVE ELEMENT
        ui.item.find('.check-column input').hide().after('<img alt="processing" src="images/wpspin_light.gif" class="waiting" style="margin-left: 6px;" />');

        // EXECUTE THE SORTING VIA AJAX
        jQuery.post( ajaxurl, { action: 'simple_page_ordering', id: postid, previd: prevpostid, nextid: nextpostid }, function(response){           
            if ( response == 'children' ) window.location.reload();
            else ui.item.find('.check-column input').show().siblings('img').remove();
        });

        // FIX CELL COLORS
        jQuery( 'table.widefat tbody tr' ).each(function(){
            var i = jQuery('table.widefat tbody tr').index(this);
            if ( i%2 == 0 ) jQuery(this).addClass('alternate');
            else jQuery(this).removeClass('alternate');
        });
    }
}).disableSelection();
1
NetConstructor.com

Ne opravdu odpověď, ale možná odpověď leží v tom někde. Rozbalil jsem navmenu js skript a odstranil to, co se zdálo být kódem, který umožňuje přetahování položek vnořených nav. Není to hezké.

Nemyslím si, že jQuery UI je přetahovací/linkové moduly podporují vnoření prvků, a to je s největší pravděpodobností věc, která bude dělat, nebo zlomit, zda si to tak fungovat. Skript navmenu má poněkud hloubkovou a těžko dešifrovatelnou množinu objektů a funkcí, které se používají k výpočtu vnitřní a vnější šířky nebo hloubky. Chtěl bych se pokusit přijít na to, ale mám svůj vlastní problém s mým ajax post přílohy nahrávání dynamické metabox plugin a dělat, že práce stále ještě.

Možná, že se na to podíváte, i když vám dá nějaký náhled na to, co potřebujete udělat ve vašem kódu, pokud jste dokonce schopni používat jqUI.

Zde je celý soubor nav-menu.js rozbalený, https://Gist.github.com/820633 Existují kusy, které budete potřebovat k zobrazení vazby to dohromady, abych to pochopil, což jsem nezahrnul.

depthToPx: function (c) {
    return c * a.options.menuItemDepthPerLevel
},
pxToDepth: function (c) {
    return Math.floor(c / a.options.menuItemDepthPerLevel)
}

menuItemDepth: function () {
    var c = a.isRTL ? this.eq(0).css("margin-right") : this.eq(0).css("margin-left");
    return a.pxToDepth(c && -1 != c.indexOf("px") ? c.slice(0, -2) : 0)
},
updateDepthClass: function (d, c) {
    return this.each(function () {
        var e = b(this);
        c = c || e.menuItemDepth();
        b(this).removeClass("menu-item-depth-" + c).addClass("menu-item-depth-" + d)
    })
},
shiftDepthClass: function (c) {
    return this.each(function () {
        var d = b(this),
            e = d.menuItemDepth();
        b(this).removeClass("menu-item-depth-" + e).addClass("menu-item-depth-" + (e + c))
    })
},
childMenuItems: function () {
    var c = b();
    this.each(function () {
        var d = b(this),
            f = d.menuItemDepth(),
            e = d.next();
        while (e.length && e.menuItemDepth() > f) {
            c = c.add(e);
            e = e.next()
        }
    });
    return c
},
updateParentMenuItemDBId: function () {
    return this.each(function () {
        var e = b(this),
            c = e.find(".menu-item-data-parent-id"),
            f = e.menuItemDepth(),
            d = e.prev();
        if (f == 0) {
            c.val(0)
        } else {
            while (!d[0] || !d[0].className || -1 == d[0].className.indexOf("menu-item") || (d.menuItemDepth() != f - 1)) {
                d = d.prev()
            }
            c.val(d.find(".menu-item-data-db-id").val())
        }
    })
}

Toto je sortables init metoda, která dělá nějaké bláznivé algebraické E = Mc2 hledá věci lol

initSortables: function () {
    var p = 0,
        e, t, d, l, o, f, c, i, s, m = a.menuList.offset().left,
        h = b("body"),
        q, n = r();
    m += a.isRTL ? a.menuList.width() : 0;
    a.menuList.sortable({
        handle: ".menu-item-handle",
        placeholder: "sortable-placeholder",
        start: function (A, z) {
            var u, x, w, v, y;
            if (a.isRTL) {
                z.item[0].style.right = "auto"
            }
            s = z.item.children(".menu-item-transport");
            e = z.item.menuItemDepth();
            j(z, e);
            w = (z.item.next()[0] == z.placeholder[0]) ? z.item.next() : z.item;
            v = w.childMenuItems();
            s.append(v);
            u = s.outerHeight();
            u += (u > 0) ? (z.placeholder.css("margin-top").slice(0, -2) * 1) : 0;
            u += z.helper.outerHeight();
            i = u;
            u -= 2;
            z.placeholder.height(u);
            q = e;
            v.each(function () {
                var B = b(this).menuItemDepth();
                q = (B > q) ? B : q
            });
            x = z.helper.find(".menu-item-handle").outerWidth();
            x += a.depthToPx(q - e);
            x -= 2;
            z.placeholder.width(x);
            y = z.placeholder.next();
            y.css("margin-top", i + "px");
            z.placeholder.detach();
            b(this).sortable("refresh");
            z.item.after(z.placeholder);
            y.css("margin-top", 0);
            k(z)
        },
        stop: function (x, w) {
            var v, u = p - e;
            v = s.children().insertAfter(w.item);
            if (u != 0) {
                w.item.updateDepthClass(p);
                v.shiftDepthClass(u);
                g(u)
            }
            a.registerChange();
            w.item.updateParentMenuItemDBId();
            w.item[0].style.top = 0;
            if (a.isRTL) {
                w.item[0].style.left = "auto";
                w.item[0].style.right = 0
            }
            a.refreshMenuTabs(true)
        },
        change: function (v, u) {
            if (!u.placeholder.parent().hasClass("menu")) {
                (l.length) ? l.after(u.placeholder) : a.menuList.prepend(u.placeholder)
            }
            k(u)
        },
        sort: function (w, v) {
            var y = v.helper.offset(),
                u = a.isRTL ? y.left + v.helper.width() : y.left,
                x = a.negateIfRTL * a.pxToDepth(u - m);
            if (x > d || y.top < f) {
                x = d
            } else {
                if (x < t) {
                    x = t
                }
            }
            if (x != p) {
                j(v, x)
            }
            if (c && y.top + i > c) {
                o.after(v.placeholder);
                k(v);
                b(this).sortable("refreshPositions")
            }
        }
    });

    function k(u) {
        var v;
        l = u.placeholder.prev();
        o = u.placeholder.next();
        if (l[0] == u.item[0]) {
            l = l.prev()
        }
        if (o[0] == u.item[0]) {
            o = o.next()
        }
        f = (l.length) ? l.offset().top + l.height() : 0;
        c = (o.length) ? o.offset().top + o.height() / 3 : 0;
        t = (o.length) ? o.menuItemDepth() : 0;
        if (l.length) {
            d = ((v = l.menuItemDepth() + 1) > a.options.globalMaxDepth) ? a.options.globalMaxDepth : v
        } else {
            d = 0
        }
    }
    function j(u, v) {
        u.placeholder.updateDepthClass(v, p);
        p = v
    }
    function r() {
        if (!h[0].className) {
            return 0
        }
        var u = h[0].className.match(/menu-max-depth-(\d+)/);
        return u && u[1] ? parseInt(u[1]) : 0
    }
    function g(u) {
        var v, w = n;
        if (u === 0) {
            return
        } else {
            if (u > 0) {
                v = q + u;
                if (v > n) {
                    w = v
                }
            } else {
                if (u < 0 && q == n) {
                    while (!b(".menu-item-depth-" + w, a.menuList).length && w > 0) {
                        w--
                    }
                }
            }
        }
        h.removeClass("menu-max-depth-" + n).addClass("menu-max-depth-" + w);
        n = w
    }
}

By bylo pěkné, kdyby měli dev verzi tohoto souboru, jako to dělají s jinými skripty v WP. Zhuštěný jediný dopis vars jsou příliš mnoho na to, aby se s mnou právě teď vypořádali. Je to prostě abecední polévka.

2
jaredwilli