|Discussion

Ben's tips: Making widget tabs more useful in Igloo

Community Discussions

Published

May 27, 2022

| 1,248 views

| 14 followers

Published

May 27, 2022

1,248

Offline

Benjamin Kahn

I get a LOT of questions from my users about how to use Igloo. Some of these questions are interesting enough to share widely. I'll try and remember to post some of the questions (and hopefully answers!) here.

Widget tabs on pages

The Widget Tabs Enhancement is fantastic!

While it can take a while to learn how to use it, even non-technical users can create easy to navigate pages that users can navigate easily. And by allowing a tab to show/hide multiple widgets, have multiple tabs on the page, icons in the tabs themselves, and even nested tabs, this extension can grow with most user needs.

So what's missing?

I get these complaints from users about tabs:

If I open a link in a tab other than the first one on the page, hitting the back button restores back to the first tab again
I can't share a link to a page with a particular tab open
I can't bookmark a page with a particular tab open

Can we fix it?

Well, the best way to fix it would be for Igloo to add this functionality to the extension. There are a few ideas on this, but they haven't seen much interest. One is even marked as "Unlikely to Implement!"

So, we need to solve it ourselves

This will require JavaScript. This code can either go on the Advanced panel for a particular page OR in the footer code for your site.

<script type="text/javascript">
//<![CDATA[

jQuery(document).ready(function() {
    let h = window.location.hash;
    const tabholder = "#ig-page-view .ps-tabs .ig-widget-html-content";

    if (document.querySelector(tabholder) != null) {

        if (h.substring(1, 5) == "tab-") {
            hash_tab_select("first");
        }
        add_click_handlers();

        var tabelementToObserve = document.querySelector(tabholder);
        var tabobserver = new MutationObserver(function() {
            if (h.substring(1, 5) == "tab-") {
                hash_tab_select("observer");
            }
            add_click_handlers();
        });

        tabobserver.observe(tabelementToObserve, {
            childList: true
        });
 
        addEventListener('hashchange', (event) => {
          h = window.location.hash;
          if (h.substring(1, 5) == "tab-") {
            hash_tab_select ("first");
          }
        });
    }

    function add_click_handlers() {
        jQuery(tabholder + " li").each(
            function(idx) {
                that = jQuery(this);

                if (!that.data("clickset")) {
                    add_click_handler(that);
                }

            }
        )
    }

    function add_click_handler(obj) {
        obj.data("clickset", true);
        obj.click(function() {
            that = jQuery(this);
            history.replaceState(null, "", window.location.origin + window.location.pathname + "#tab-" + that[0].classList[0]);
        });
    }

    function hash_tab_select(where) {
        jQuery(tabholder + " li")
            .each(
                function(idx) {
                    that = jQuery(this);

                    // Check to see if this tab was picked
                    if (that[0].classList[0] == h.substring(5)) {
                        console.log("Triggering tab click from " + where);
                        that.trigger('mousedown').focus()
                    }
                }
            );
    }

})

//]]>
</script>

Whew! That's a lot of code! But it should solve all the issues listed above.

Let me know if you have tried it out. And REALLY let me know if you have issues with the above!

EDIT July 27, 2022: Add the ability to watch for HASH changes in case links on the page want to set the tab.

Attachments

tabs-additions.js

Ben's tips: Making widget tabs more useful in Igloo

Widget tabs on pages

So what's missing?

Can we fix it?

So, we need to solve it ourselves

0 Conclusions

Attachments

Comments (19)

Related Content (4)

19 Replies