Adapt Learning Community: Popup when clicking drawer

Hi everybody

I can't seem to find a good solution for this, but maybe others have had a similar issue.

I'm trying to create an extension with a button in the drawer that, when clicked, will show a popup-window. I've managed to create a button in the drawer and showing the popup alright, by copying how adapt-contrib-resources is doing it.

This works just fine, as long as my extension isn't the only extension using the drawer (e.g. if resources is enabled). However if my extension IS the only one using the drawer and the user clicks the "nav__drawer-btn", the popup shows as expected, but the "shadow"-div is also appearing.

The code calls the Adapt.trigger('drawer:closeDrawer'); which works fine when there are more than one extension using the drawer, but it fails to remove the "shadow"-div when my extension is the only one.

Any help would be great!

I'm using CLI: 2.1.9 and Framework: 5.6.1

Extension code:

function setupSelectiveFeedback(resourcesData) {

Adapt.on('selectiveFeedback:clickedDrawer', function () {

Adapt.trigger('drawer:closeDrawer');

showPopup();

});

}

function initSelectiveFeedback() {

var courseSelectiveFeedback = Adapt.course.get('_selectiveFeedback');

if (!courseSelectiveFeedback || courseSelectiveFeedback.isEnabled === false) return;

var drawerObject = {

title: courseSelectiveFeedback.drawerTitle,

description: courseSelectiveFeedback.drawerBody,

className: 'is-selectiveFeedback',

drawerOrder: courseSelectiveFeedback._drawerOrder || 0

};

Adapt.drawer.addItem(drawerObject, 'selectiveFeedback:clickedDrawer');

setupSelectiveFeedback(courseSelectiveFeedback);

}

function showPopup(){

$('#popup-selectiveFeedback').show();

}

You probably want to use the notify API instead of making your own popup.

Adapt.notify.popup({
title: "popup title",
body: "popup body"
});

Show parent | Reply

Alright, yes, but it's more than just a popup with title and body. It's gonna have a lot more going ;) I just used the word popup, to make my point as understandable as possible :D

I've ended up doing this (although it's not pretty):

If there is less than 1 button in the drawer, hide '.drawer, #shadow' with $('.drawer, #shadow').hide(); and close the drawer as soon as it opens.

Adapt.on('selectiveFeedback:clickedDrawer', function () {
            if ($('.drawer__item').length < 1) {
                $('.drawer, #shadow').hide();
                Adapt.once('drawer:opened', () => {
                    Adapt.trigger('drawer:closeDrawer');
                });
            } else {
                Adapt.trigger('drawer:closeDrawer');
            }
            showPopup();
        });

Show parent | Reply

this is a bit of a guess... I think it may be due to you using drawer.addItem whereas I think what you want is drawer.triggerCustomView. or possibly a combination of both.

Essentially drawer.addItem is for declaring that you want an extension to be included in the drawer. When there are multiple extensions included in the drawer, when it opens it will then show you a menu of those items.

Typically you then run Adapt.drawer.triggerCustomView to display your extension in the drawer in response to that button being clicked. But, when there's only one thing registered with the drawer, the behaviour is a bit different (because it'd be daft to show the drawer menu with just one item in it) so it goes straight into triggering the display for the sole drawer item... which is the bit you're missing, which is perhaps why it's getting a bit messed up.

Some relevant code snippets:

Glossary registering itself with the drawer.

Glossary triggering custom view when drawer glossary button clicked (or when drawer opened and glossary is the only thing in the drawer)

Hope this helps

Show parent | Reply

Thanks Matt, but I don't think I completely understand.

I have to use Adapt.drawer.addItem to add my extension to the drawer, right? Adapt.drawer.triggerCustomView does not add my extension to the drawer.

Adapt.drawer.triggerCustomView is used to open a new "page" in the drawer, right? Like what the resource extension does, but we don't need this new "page".

We are trying to make a studylist that pops in an overlay page, when the user clicks the studylist-button in the drawer. We have already created popup studylist as its own div overlaying the entire Adapt course and the only thing we want the drawer button to do, is to show this div-element when clicked.

So clicking the studylist-button in the drawer should:

1. close the drawer

2. show the div-element

The problem we have, is that when the user opens the studylist, it calls Adapt.trigger('drawer:closeDrawer'); which works fine when there are more than one extension using the drawer. However when only the studylist extension is using the drawer clicking the drawer-btn results in the shadow staying visible and not disappearing.

Here are the two scenarios mentioned as links, as I don't know how to explain it. The first link link where it works and the other where it doesn't.

https://web.moch.dk/hta/adaptforum-studylist/working/index.html

https://web.moch.dk/hta/adaptforum-studylist/notWorking/index.html

Show parent | Reply

Hi Henrik

OK so the drawer has two 'modes' of behaviour

1) 'menu mode' is where, when opened, it shows a menu of all extensions that are in the drawer. clicking the relevant menu item then displays the actual drawer extension by triggering the event that the extension will have registered and will be listening out for. However, if only one extension has registered itself with the drawer, this bit is skipped (as there's no point showing a menu with just one item in it) and instead it goes straight into triggering that event.

2) 'display mode' is what is shown when you either click a drawer menu item OR - if there is only one extension that has registered with the drawer - when you click on the main navbar drawer button

So, Adapt.drawer.addItem registers your extension with the drawer 'menu' and ensures it will get a drawer menu button if the drawer is opened and has more than one extension displaying in it.

Adapt.drawer.triggerCustomView defines what happens when that drawer menu button is clicked (or if the drawer is opened when there's only one extension displaying in it).

The way you have it configured, the 'study list' button will only show in the drawer if there's more than one extension registered with the drawer but won't work as intended if it's the only item registered with the drawer - purely because it's not been designed to be used that way (essentially hijacking the 'menu mode' functionality).

Essentially you can skip using Adapt.drawer.addItem (adapt-contrib-pageLevelProgress does - it has its own button for opening the drawer and so doesn't need to be shown in the menu if the drawer is opened via the usual drawer button) - but not Adapt.drawer.triggerCustomView

Show parent | Reply

Thanks again Matt! The 'menu mode' and 'display mode' makes total sense! Very clever :)

Sorry for being such a pain, it's probably because I want to make the drawer do something, its not supposed to.

The studylist is not a custom view in the 'display mode', but a <div> appended to the '#wrapper'.

Anyway, adapt-contrib-pageLevelProgress has the advantage of having its own button in the nav-bar. We didn't want our studylist extension to have that and it shouldn't have a custom view in the 'display mode' either. However, it should have a button in the 'menu mode'.

I tried to remove the Adapt.drawer.addItem, but then if there are not other extensions using the drawer, the burger menu (nav__drawer-btn) in the navigation bar disappears. I suppose it only appears if at least one plugin calls the Adapt.drawer.addItem. Is that right?

Show parent | Reply

However, it should have a button in the 'menu mode'.

Right, but the problem is that, unless you are only using this in one course where you know exactly what will and won't be in the drawer, you cannot guarantee that the drawer will ever display in 'menu mode'. Which is exactly the problem you are getting in your not working example.

You therefore need to account for the display mode as well.

I get that you don't want to display the studylist itself in display mode, you want a button that opens the studylist 'overlay'. It's this button that should be rendered in your 'display mode'.

However, this will have the unfortunate side-effect of meaning that, when there's more than one extension in the drawer, your learner will have to click three times to get to the studylist overlay.

Perhaps one workaround would be to have your selectiveFeedback:clickedDrawer handler check how many items there are in the drawer at that point. If > 1 then immediately show the studylist popup. But if there's just one, do drawer.triggerCustomView to render the studylist button into the drawer.

Either that or, seeing as you just want a button that opens an overlay, don't put it in the drawer at all. Just inject the button into the navbar.

Show parent | Reply