js:choca_menu [Cyanide]

Cette page est en lecture seule. Vous pouvez afficher le texte source, mais ne pourrez pas le modifier. Contactez votre administrateur si vous pensez qu'il s'agit d'une erreur.

<CSS>

.toggle_choca { cursor: pointer; }

/* CHOCA MENU */
                                                       .wrap_nav.wrap_choca,
.dw-content > .plugin_include_content:nth-child(n)     .wrap_nav.wrap_choca,
.dw-content > .plugin_include_content:nth-child(n) p > .wrap_nav.wrap_choca {

    display: flex;
    gap: 1em;
    white-space: nowrap;
    flex-wrap: wrap;
    border-top: 3px solid var(--color-theme);
    padding-top: 0.8em;
}

.wrap_nav.wrap_choca > .wrap_column {

    float: none;
    margin: 0;
    flex-grow: 1;
}

.wrap_nav.wrap_choca > * > * {

    border: 1px solid #bcbcbc;
    box-shadow: 1px 1px 6px 3px #00000012;
    border-radius: 4px;
    padding: 0;
    margin: 0 0 10px;
    background-color: var(--color);
}

.wrap_nav.wrap_choca > * > * > :is(p,ul) {
    padding: 0.1em 0.3em;
}

.wrap_nav.wrap_choca > * > * > :is(p,a):first-of-type {
    font-weight: bold;
    display: block;
    background: #7a7a7a11;
    border: none;
    margin: 0.1em 0 0;
}

.wrap_nav.wrap_choca ul {
    list-style: none;
    margin: 0;
    overflow: visible;
}
.wrap_nav.wrap_choca ul ul {
    padding-inline: 1em;
    overflow: hidden;
}

.wrap_nav.wrap_choca .submenu-toggle {
    cursor: pointer;
    padding: 0 0.3em 0 0.3em;
    color: #999;
    display: inline-block;
    width: -webkit-fill-available;
}

/* niveau 1 */

.wrap_nav.wrap_choca > * > *:before {
    content: "▲";
    color: #999;
    float: right;
    pointer-events: none;
}
.wrap_nav.wrap_choca > * > * > P {
    cursor: pointer;
}
.wrap_nav.wrap_choca > * > * {
	transition: all .1s;
}
.wrap_nav.wrap_choca > * > *:not([open]):before {
    content: "▼";
}
.wrap_nav.wrap_choca > * > *:not([open]) {
    height: 2.0em;
    overflow: hidden;
}

.wrap_nav.wrap_choca > .wrap_column > p,
.wrap_nav.wrap_choca > *            > p:not([open])
{
    display: none;
}


/* Currently selected page */

.dokuwiki .wrap_choca .curid:before {
    content: "✱";
    color: var(--color-accent, var(--color-theme, red));
    margin-left: -0.9em;
}

.dokuwiki .wrap_choca ul ul {
    height: auto;
    overflow: hidden;
    transition: all .1s;
}
.dokuwiki .wrap_choca ul ul:not([open]) {
    height: 0;
  /*line-height: 0;*/
  /*margin-top: -10px;*/
}
.dokuwiki .wrap_choca ul ul:not([open]) * {
  /*max-height: 0;*/
  /*line-height: 0;*/
}

/********************************************************************************************************************************************************/
/* Status */

.wrap_nav.wrap_choca a span.status { padding-right: 0.2em }

.wrap_menu_update_status { /* position: absolute; top: 4px; right: 32px; */ color: #FFAA0088; cursor: pointer; }

/*********************************************************************************************/
/* V1 (projets/example/ */

/*
Need design : 🧠
Need integration : ⌨💻
Need QA :🎮
Done :☑ ✓ ✅ 
*/

.wrap_nav.wrap_choca a span.status.need.design:before       { content: "🟥"; content: "🧠"; }
.wrap_nav.wrap_choca a span.status.need.integration:before  { content: "🟧"; content: "💻"; }
.wrap_nav.wrap_choca a span.status.need.qa:before           { content: "🟨"; content: "🎮"; }
.wrap_nav.wrap_choca a span.status.done:before              { content: "🟩"; content: "✅"; }

/* Combinatoire pour les noeuds parents */

/* x2 */

.wrap_nav.wrap_choca a span.status.done.need.qa:before          { content: "🟩🟨"; content: "✅🎮"; }
.wrap_nav.wrap_choca a span.status.done.need.integration:before { content: "🟩🟧"; content: "✅💻"; }
.wrap_nav.wrap_choca a span.status.done.need.design:before      { content: "🟩🟥"; content: "✅🧠";}

.wrap_nav.wrap_choca a span.status.need.qa.need.integration:before  { content: "🟨🟧"; content: "🎮💻"; }
.wrap_nav.wrap_choca a span.status.need.qa.need.design:before       { content: "🟨🟥"; content: "🎮🧠"; }

.wrap_nav.wrap_choca a span.status.need.integration.need.design:before  { content: "🟧🟥"; content: "💻🧠"; }

/* x3 */

.wrap_nav.wrap_choca a span.status.done.need.qa.need.integration:before         { content: "🟩🟨🟧"; content: "✅🎮💻"; }
.wrap_nav.wrap_choca a span.status.done.need.qa.need.design:before              { content: "🟩🟨🟥"; content: "✅🎮🧠"; }
.wrap_nav.wrap_choca a span.status.done.need.integration.need.design:before     { content: "🟩🟧🟥"; content: "✅💻🧠"; }

.wrap_nav.wrap_choca a span.status.need.qa.need.integration.need.design:before  { content: "🟨🟧🟥"; content: "🎮💻🧠"; }

/* x4 */

.wrap_nav.wrap_choca a span.status.done.need.qa.need.integration.need.design:before    { content: "🟩🟨🟧🟥"; content: "✅🎮💻🧠"; }

/*********************************************************************************************/
/* V2 (Styx / Avalon/ */

.wrap_nav.wrap_choca a span.status.design.ready:before  { color: green;  content: "✔"; /* : Design ready.      wrap design ready       */ }
.wrap_nav.wrap_choca a span.status.updated:before       { color: blue;   content: "•"; /* : New update.        wrap updated             */ }
.wrap_nav.wrap_choca a span.status.information:before   { color: yellow; content: "☀"; /* : Need information.  wrap need information   */ }
.wrap_nav.wrap_choca a span.status.review:before        { color: orange; content: "☉"; /* : To be reviewed.    wrap need review        */ }
.wrap_nav.wrap_choca a span.status.rework:before        { color: red;    content: "✖"; /* : To rework.         wrap need rework        */ }

/* Combinatoire pour les noeuds parents */

/* x2 */

.wrap_nav.wrap_choca a span.status.design.ready.updated:before      { content: "✔•"; }
.wrap_nav.wrap_choca a span.status.design.ready.information:before  { content: "✔☀"; }
.wrap_nav.wrap_choca a span.status.design.ready.review:before       { content: "✔☉"; }
.wrap_nav.wrap_choca a span.status.design.ready.rework:before       { content: "✔✖"; }

.wrap_nav.wrap_choca a span.status.updated.information:before       { content: "•☀"; }
.wrap_nav.wrap_choca a span.status.updated.review:before            { content: "•☉"; }
.wrap_nav.wrap_choca a span.status.updated.rework:before            { content: "•✖"; }

.wrap_nav.wrap_choca a span.status.information.review:before        { content: "☀☉"; }
.wrap_nav.wrap_choca a span.status.information.rework:before        { content: "☀✖"; }

.wrap_nav.wrap_choca a span.status.review.rework:before             { content: "☉✖"; }

/* x3 */

.wrap_nav.wrap_choca a span.status.design.ready.updated.information:before  { content: "✔•☀"; }
.wrap_nav.wrap_choca a span.status.design.ready.updated.review:before       { content: "✔•☉"; }
.wrap_nav.wrap_choca a span.status.design.ready.updated.rework:before       { content: "✔•✖"; }
.wrap_nav.wrap_choca a span.status.design.ready.information.review:before   { content: "✔☀☉"; }
.wrap_nav.wrap_choca a span.status.design.ready.information.rework:before   { content: "✔☀✖"; }
.wrap_nav.wrap_choca a span.status.design.ready.review.rework:before        { content: "✔☉✖"; }

.wrap_nav.wrap_choca a span.status.updated.information.review:before        { content: "•☀☉"; }
.wrap_nav.wrap_choca a span.status.updated.information.rework:before        { content: "•☀✖"; }
.wrap_nav.wrap_choca a span.status.updated.review.rework:before             { content: "•☉✖"; }

.wrap_nav.wrap_choca a span.status.information.review.rework:before         { content: "☀☉✖"; }

/* x4 */

.wrap_nav.wrap_choca a span.status.design.ready.updated.information.review:before   { content: "✔•☀☉"; }
.wrap_nav.wrap_choca a span.status.design.ready.updated.information.rework:before   { content: "✔•☀✖"; }
.wrap_nav.wrap_choca a span.status.design.ready.updated.review.rework:before        { content: "✔•☉✖"; }

.wrap_nav.wrap_choca a span.status.updated.information.review:before.rework         { content: "•☀☉X"; }

/* x5 */

.wrap_nav.wrap_choca a span.status.updated.updated.information.review.rework:before { content: "✔•☀☉✖"; }

</CSS><JS>


/* CHOCA MENU */

jQuery(function() {

    if (typeof choca_nav === 'undefined')
    {
        console.log("CYA NAV CHOCA MENU INIT");
        
        choca_nav = true;

        /* Status */

        var statuses = [

            "need_design",
            "need_integration",
            "need_qa",
            "done",
        
            "design_ready",
            "updated",
            "need_review",
            "need_information",
            "rework"           
        ];

        function at(a, i, d = false) {

            if (typeof a == "undefined" || a === false || a === null) return d;
            if (!(i in a)) return d;
            return a[i];
        }

        function cookie_get(name) {

            var json = localStorage.getItem(name, json);
          /*var json = Cookies.get(name);*/
            if (typeof json == "undefined" || json == false || json == null) json = "{}";
            value = {}; try { value = JSON.parse(json); } catch (e) { console.log("Invalid cookie json", json); }
            return value;
        }

        function cookie_set(name, value) {

            var json = "{}";
            try { json = JSON.stringify(value); } catch (e) { console.log("Invalid cookie value", value); }
          /*Cookies.set(name, json);*/
            localStorage.setItem(name, json);
        }
        
        function update_status_load(offset) {
        
            var status = jQuery(".update_status_button").text();        
            var value  = status == "⟳" ? 0 : (status == "" ? 0 : parseInt(status));
            
            value += offset;
            status = value == 0 ? "⟳" : ("" + value);
            
            jQuery(".update_status_button").html(status);
        }
        
        var update_status_button_li = jQuery('<li><a class="update_status_button" href="javascript:void(0);" style="text-decoration: none">⟳</a></li>');
        jQuery(".dw-page-icons .list-inline").prepend(update_status_button_li);

        jQuery(".update_status_button").click(function () {
            
            for (var s = 0; s < statuses.length; ++s)
            {
                var status = statuses[s];
                cookie_set("cya_choca_menu_link_status_"+status, {});
            }

            choca_menu_init_indicators(true);
        });

        function choca_menu_update_status_from_page(id, html, selector_a, selectors_spans) {
            
            for (var s = 0; s < statuses.length; ++s)
            {
                var status = statuses[s];

                var cookie_link_status = cookie_get("cya_choca_menu_link_status_"+status);

                    if (status == "need_design"      && html.indexOf("wrap_status"+" wrap_need"+" wrap_design"      ) > 0) { console.log(jQuery(selector_a).text(), "need design");      cookie_link_status[id] = 1; }
                    if (status == "need_integration" && html.indexOf("wrap_status"+" wrap_need"+" wrap_integration" ) > 0) { console.log(jQuery(selector_a).text(), "need integration"); cookie_link_status[id] = 1; }
                    if (status == "need_qa"          && html.indexOf("wrap_status"+" wrap_need"+" wrap_qa"          ) > 0) { console.log(jQuery(selector_a).text(), "need qa");          cookie_link_status[id] = 1; }
                    if (status == "done"             && html.indexOf("wrap_status"+" wrap_done"                     ) > 0) { console.log(jQuery(selector_a).text(), "done");             cookie_link_status[id] = 1; }
                    
                cookie_set("cya_choca_menu_link_status_"+status, cookie_link_status);
            }

            choca_menu_update_status_from_cookies(id, selectors_spans);
        }

        function choca_menu_update_status_from_cookies(id, selectors_spans) {
                        
            for (var s = 0; s < statuses.length; ++s)
            {
                var status = statuses[s];

                var cookie_link_status = cookie_get("cya_choca_menu_link_status_"+status);

                if (id in cookie_link_status) {
            
                    if (status == "need_design"      ) { jQuery(selectors_spans).addClass("need design");       }
                    if (status == "need_integration" ) { jQuery(selectors_spans).addClass("need integration");  }
                    if (status == "need_qa"          ) { jQuery(selectors_spans).addClass("need qa");           }
                    if (status == "done"             ) { jQuery(selectors_spans).addClass("done");              }
                }
            }
        }

        function choca_menu_init_indicators(parse_pages)
        {
            var block_index = 0;

            jQuery(".wrap_nav.wrap_choca .wrap_block").each(function() {

                ++block_index;

                var block_title = jQuery(this).find(">p a" ).first();
                var block_menu  = jQuery(this).find(">ul"  ).first();
        
                block_title.attr("data-link-id", 100*100*block_index);
                
                if (block_title.find(".status").length == 0) {

                    var block_span = jQuery('<span class="status"></span>');
                    block_title.prepend(block_span);
                }

                var block_id = 100*100*block_index;
                block_title.attr("data-link-id", block_id);
        
                console.log(block_index, block_title.text());

                if (block_title.attr("href") != "" 
                &&  block_title.attr("href") != false
                &&  block_title.attr("href") != null) {

                    var s  = ".wrap_nav.wrap_choca a[data-link-id=" + block_id + "]";
                    var s0 = ".wrap_nav.wrap_choca a[data-link-id=" + block_id + "] > span";

                    choca_menu_update_status_from_cookies(block_id, s0);
                    
                    if (parse_pages) {

                        update_status_load(1);

                        jQuery.ajax({

                            url:        block_title.attr("href"),
                            context:    block_id,
                            async:      true,
                            success:    function(data) {

                                var _block_id = this;

                                var s  = ".wrap_nav.wrap_choca a[data-link-id=" + _block_id + "]";
                                var s0 = ".wrap_nav.wrap_choca a[data-link-id=" + _block_id + "] > span";

                                choca_menu_update_status_from_page(this, data, s, s0);
                            },

                            complete: function () {

                                update_status_load(-1);
                            }
                        });
                    }
                }   

                var level1_index = 0;

                block_menu.find(">li").each(function() {

                    ++level1_index;
        
                    var lvl1_title = jQuery(this).find(">div a" ).first();
                    var lvl1_menu  = jQuery(this).find(">ul"    ).first();
        
                    lvl1_title.attr("data-link-id", 100*100*block_index+100*level1_index);

                    if (lvl1_title.find(".status").length == 0) {
                    
                        var lvl1_span = jQuery('<span class="status"></span>');
                        lvl1_title.prepend(lvl1_span);
                    }

                    var lvl1_id = 100*100*block_index + 100*level1_index;
                    lvl1_title.attr("data-link-id", lvl1_id);

                    console.log(block_index, level1_index, lvl1_title.text());

                    if (lvl1_title.attr("href") != "" 
                    &&  lvl1_title.attr("href") != false
                    &&  lvl1_title.attr("href") != null) {

                        var s  = ".wrap_nav.wrap_choca a[data-link-id=" + lvl1_id  + "]";
                        var s1 = ".wrap_nav.wrap_choca a[data-link-id=" + lvl1_id  + "] > span";
                        var s0 = ".wrap_nav.wrap_choca a[data-link-id=" + block_id + "] > span";

                        choca_menu_update_status_from_cookies(lvl1_id, s1+","+s0);
                        
                        if (parse_pages) {

                            update_status_load(1);

                            jQuery.ajax({

                                url:        lvl1_title.attr("href"),
                                context:    lvl1_id,
                                async:      true,
                                success:    function(data) {

                                    var _lvl1_id  = this;
                                    var _block_id = 100*100*parseInt(_lvl1_id / (100*100));

                                    var s  = ".wrap_nav.wrap_choca a[data-link-id=" + _lvl1_id  + "]";
                                    var s1 = ".wrap_nav.wrap_choca a[data-link-id=" + _lvl1_id  + "] > span";
                                    var s0 = ".wrap_nav.wrap_choca a[data-link-id=" + _block_id + "] > span";

                                    choca_menu_update_status_from_page(this, data, s, s1+","+s0);
                                },

                                complete: function () {

                                    update_status_load(-1);
                                }
                            });
                        }
                    }

                    var level2_index = 0;

                    lvl1_menu.find(">li").each(function() {

                        ++level2_index;
        
                        var lvl2_title = jQuery(this).find(">div a" ).first();

                        var lvl2_id = 100*100*block_index + 100*level1_index + level2_index;
                        lvl2_title.attr("data-link-id", lvl2_id);

                        if (lvl2_title.find(".status").length == 0) {
                        
                            var lvl2_span = jQuery('<span class="status"></span>');
                            lvl2_title.prepend(lvl2_span);
                        }
        
                        console.log(block_index, level1_index, level2_index, lvl2_title.text());

                        if (lvl2_title.attr("href") != "" 
                        &&  lvl2_title.attr("href") != false
                        &&  lvl2_title.attr("href") != null) {

                            var s  = ".wrap_nav.wrap_choca a[data-link-id=" + lvl2_id  + "]";
                            var s2 = ".wrap_nav.wrap_choca a[data-link-id=" + lvl2_id  + "] > span";
                            var s1 = ".wrap_nav.wrap_choca a[data-link-id=" + lvl1_id  + "] > span";
                            var s0 = ".wrap_nav.wrap_choca a[data-link-id=" + block_id + "] > span";

                            choca_menu_update_status_from_cookies(lvl2_id, s2+","+s1+","+s0);
                        
                            if (parse_pages) {
                            
                                update_status_load(1);

                                jQuery.ajax({

                                    url:        lvl2_title.attr("href"),
                                    context:    lvl2_id,
                                    async:      true,
                                    success:    function(data) {

                                        var _lvl2_id  = this;
                                        var _lvl1_id  =     100*parseInt(_lvl2_id / 100);
                                        var _block_id = 100*100*parseInt(_lvl1_id / (100*100));

                                        var s  = ".wrap_nav.wrap_choca a[data-link-id=" + _lvl2_id  + "]";
                                        var s2 = ".wrap_nav.wrap_choca a[data-link-id=" + _lvl2_id  + "] > span";
                                        var s1 = ".wrap_nav.wrap_choca a[data-link-id=" + _lvl1_id  + "] > span";
                                        var s0 = ".wrap_nav.wrap_choca a[data-link-id=" + _block_id + "] > span";

                                        choca_menu_update_status_from_page(this, data, s, s2+","+s1+","+s0);
                                    },

                                    complete: function () {

                                        update_status_load(-1);
                                    }
                                });
                            }
                        }
                    }); 
                });
            });
        }

        var page = window.location.pathname.substring(window.location.pathname.lastIndexOf('/')+1);
        
        var use_cookies_menu    = true;
        var use_cookies_submenu = true;

        /* Niveau 1 */
        
        var menu_id = 0;
                
        jQuery(".wrap_nav.wrap_choca > * > *").each(function() {
        
            ++menu_id;
            
            if (use_cookies_menu) {

                jQuery(this).attr("data-id", menu_id);

                var menu_click_coockie = cookie_get('CYA_CHOCA_MENU_CLICK');
                var hidden = at(menu_click_coockie, menu_id);
            
                if (!hidden) {
                    jQuery(this).attr('open', true);
                }
            }

            jQuery(this).find("p").first().on("click", function(event) {
            
                if (event.target.tagName == "A") return;

		if (!!jQuery(this).parent().attr("open"))
                	jQuery(this).parent().removeAttr("open");
              	else
              		jQuery(this).parent().attr("open", true);
                
                if (use_cookies_menu) {

                    var hidden = !jQuery(this).parent().attr("open");

                    var id = jQuery(this).parent().attr("data-id");

                    var menu_click_coockie = cookie_get('CYA_CHOCA_MENU_CLICK');

                    if (hidden) {
                        menu_click_coockie[id] = true;

                    } else {
                        menu_click_coockie[id] = false;
                    }

                    cookie_set('CYA_CHOCA_MENU_CLICK', menu_click_coockie);
                }
            
            });
        
        });
        
        jQuery(".toggle_choca").click(function () {
            
		if (!!jQuery(this).attr("open"))
                	jQuery(this).removeAttr("open");
              	else
              		jQuery(this).attr("open", true);
            
            	jQuery(".wrap_nav.wrap_choca > * > * > p").click();
        });
        
        /* Niveau 2 */
        
        var submenu_id = 0;
        
        jQuery(".wrap_nav.wrap_choca > * > * > ul > li").each(function() {
        
            ++submenu_id;
            
            var l2 = jQuery(this);
            
            var l2_title   = l2.find("div").first();
            var l2_submenu = l2.find("ul").first();            
            
            l2_submenu.attr("data-id", submenu_id);
            
            if (l2_submenu.find("li").length > 0)
            {
                l2_title.append('<span class="submenu-toggle" data-id="'+submenu_id+'">▼</span>');
            
                var l2_toogle = l2_title.find(".submenu-toggle").first();

                var submenu_click_coockie = cookie_get('CYA_CHOCA_MENU_SUBMENU_CLICK');
                var hidden = !at(submenu_click_coockie, submenu_id);
            
                if (!hidden) {
                    l2_submenu.attr("open", true);
                }

                jQuery(document).on('click', '.submenu-toggle[data-id="'+submenu_id+'"]', function(e) {

                    var id = jQuery(e.target).attr("data-id");
                  /*jQuery('ul[data-id="'+id+'"]').toggleClass("submenu-hidden");*/
                    if (!!jQuery('ul[data-id="'+id+'"]').attr("open"))
                    	jQuery('ul[data-id="'+id+'"]').removeAttr("open");
                    else
                    	jQuery('ul[data-id="'+id+'"]').attr("open", true);

                  /*var hidden = jQuery('ul[data-id="'+id+'"]').hasClass("submenu-hidden");*/
                    var hidden = !jQuery('ul[data-id="'+id+'"]').attr("open");
 
                    var submenu_click_coockie = cookie_get('CYA_CHOCA_MENU_SUBMENU_CLICK');

                    if (hidden) {
                        submenu_click_coockie[id] = false;
                    } else {
                        submenu_click_coockie[id] = true;
                    }

                    cookie_set('CYA_CHOCA_MENU_SUBMENU_CLICK', submenu_click_coockie);
                });
            }
        });

        choca_menu_init_indicators(false);
    }
});

</JS>