publiclab / PublicLab.Editor

I clicked on several tool buttons such (e.g table, link etc...) and all corresponding popups occurs. However, they stay on screen until you click again on the icon that triggered the pop-up.

I expect a pop-up to close when I do one of the following:

click the esc button,
click on the page,
click on another pop-up (to close previously opened pop-up).

This issue can be replicated on the publiclab editor by clicking the tool buttons as you see in the image above.

Thanks for opening your first issue! This space is protected by our Code of Conduct - and we're here to help.
Please follow the issue template to help us help you 👍🎉😄
If you have screenshots or a gif to share demonstrating the issue, that's really helpful! 📸
Do join our Gitter channel for some brainstorming discussions.

@TildaDares I'm willing to work on this, please.

Good catch @NARUDESIGNS! Go ahead🎉

Thank you @TildaDares I will attempt to work on it and revert.

hey @NARUDESIGNS are you working on it, if you are busy, I can work on it ?

Hi @NARUDESIGNS, can @RaviAnand111 work on this?

Sure, @RaviAnand111 can work on it. I'm currently working on completing the conversion of all test files from jasmine tests to jest tests.
cc @TildaDares

Hey guys, I found out that, to make popups to disappear on click on the page or another pop-up is to add
$("...").attr('data-trigger', 'focus');, so I have added it in table and others but I am not able to find module or code for attachments, insert link, insert image where can I find those modules code. ?
@TildaDares @NARUDESIGNS @jywarren
Thanks

@RaviAnand111 You should be able to make those changes in this file

PublicLab.Editor/src/adapters/PublicLab.Woofmark.js

Lines 318 to 327 in 1ab7b20

    
           wysiwyg.stylePrompt = function() { 
        
             $(".wk-prompt button, span.wk-prompt-browse").addClass("btn btn-outline-secondary"); 
        
             $(".wk-prompt input") 
        
                 .addClass("input form-control") 
        
                 .css("margin-bottom", "5px"); 
        
           }; 
        
           $( 
        
               ".wk-commands button.woofmark-command-attachment, .wk-commands button.woofmark-command-image" 
        
           ).click(wysiwyg.stylePrompt);

Hey @TildaDares , where can I find .wk-prompt .wk-command classes in html, I can't find it, it is just being called by jquery. and it is somehow working.
@NARUDESIGNS

Hey @TildaDares @NARUDESIGNS, as in the image, click has been crossed in vs code and on hovering it is saying it has been deprecated so is this function working or not?

2022-01-08.20-27-04.mp4

Hi everyone, I wanted to know your views on it ? Am I missing something here ?

why are we using older bootstrap version and functions ?

Hey @TildaDares @NARUDESIGNS, as in the image, click has been crossed in vs code and on hovering it is saying it has been deprecated so is this function working or not?

@RaviAnand111 I think it still works, I've seen some other events crossed in vscode as well.

I don't know much how popovers work yet but this was the approach I wanted to take:
I think there is something like $('.element').popover('hide') and so I wanted to do a check if the esc button is clicked, or if an element that isn't the popped over modal is clicked then based on that, I'd trigger the $('.element').popover('hide') method to hide it.
@RaviAnand111

Ok, Thanks, @NARUDESIGNS I will try doing that.

I tried something that worked but it will require a little more code. Here's the snippet I tried:

 $('.woofmark-command-table').popover({html: true});

+  let popoverIsOpen = false;
  $('.wk-commands .woofmark-command-table').click(function() {
+    popoverIsOpen = !popoverIsOpen;
    $('.ple-table-size').click(function(e) {
      wysiwyg.runCommand(function(chunks, mode) {
        var table = createTable(
            +Number($('.ple-table-popover #tableCols').text()),
            +Number($('.ple-table-popover #tableRows').text())
        );

        if (mode === 'markdown') chunks.before += table;
        else {
          chunks.before += _module.wysiwyg.parseMarkdown(table);
          setTimeout(_module.afterParse, 0); // do this asynchronously so it applies Boostrap table styling
        }

        $('.woofmark-command-table').popover('toggle');
      });
    });

+    $(':not(".woofmark-command-table")').click((e) => {
+      if (popoverIsOpen && !e.target.classList.contains("woofmark-command-table")) {
+        // console.log("popover is opened and should now close");
+        $('.woofmark-command-table').click();
+      }
+    });
  });

The lines with the "+" sign are the lines I added. And the file is PublicLab.RichTextModule.Table.js from line 79.
What I did was basically add a popoverIsOpen boolean so that when the popover is triggered, this boolean is set to true.
the part where you see $(':not(".woofmark-command-table")').click... is basically saying, if any element is clicked other than the table button (which usually triggers the popover), call the click() method on the table button which will then close the popover and set popoverIsOpen to false.

This works but with some issues, if you click on any elements in the popover, it will also close the popover since the rule is to close it when any element other than the table button is clicked. This will require more code, but the way I plan to tackle this one is to have all the classes of elements in the popover in an array and do a check against them in the if block.

This is great, and the idea with array is cool too, I was getting confused in this part of how to shut down pop over when something else is clicked.
@NARUDESIGNS

I have also find a way , with least no of code lines.

I have also find a way , with least no of code lines.

Awesome, please share. @RaviAnand111

How do I share the code like you did ? @NARUDESIGNS

` ```javaScript

// code in here

``` `

Please use 3 backticks, not 4
@RaviAnand111

See the last line with + in this code

     $('.woofmark-command-table').attr('data-content', builder);
     $('.woofmark-command-table').attr('data-container', 'body');
     $('.woofmark-command-table').attr('data-placement', 'top');
  + $('.woofmark-command-table').attr('data-trigger', 'focus');

By just adding this, button is doing everything we want, execpt one thing,
popup is disappearing on clicking everything but the popup button, to make that happen I am trying to write code,

OK cool. But I have a question, when you click on the popover itself or any of it's child elements like the - and + buttons, does it disappear?
@RaviAnand111

No, id does not, @NARUDESIGNS

OK, cool!

I have a doubt, let me check

actually, it is disappearing on clicking its child elements, sorry about that, I didn't check it earlier.

so, now I'd have to write code for popup button and child elements except add button also.

What do you think ?

actually, it is disappearing on clicking its child elements, sorry about that, I didn't check it earlier.

Oh ok, this was the issue with my own approach as well. How do you intend to tackle this?

I don't know yet, I have solved the problem with the popup button and now it can be used to disappear, now I just have to do the same with child buttons, I will try to do that, and tell you what I got.

hey guys, I am so sorry, I gave my whole day to this problem and I still couldn't solve it, I am getting more and more confused.
@NARUDESIGNS @TildaDares

It's okay @RaviAnand111 we all feel like that sometimes. I'm currently confused with what actions to take for some of my task but we can always communicate to see how we can make progress 💪

So for now, you've been able to solve the part where a click on the page or on the table button can hide the popover.

But the problem is that when you click on elements in the popover, it also hides the popover right?

sure, @NARUDESIGNS , thanks,

yes that is the problem

See the last line with + in this code

     $('.woofmark-command-table').attr('data-content', builder);
     $('.woofmark-command-table').attr('data-container', 'body');
     $('.woofmark-command-table').attr('data-placement', 'top');
  + $('.woofmark-command-table').attr('data-trigger', 'focus');

Can you please tell me what file you added this line to?

I'd also work on my initial solution (though it's more code than yours) to see if I'm able to solve this problem you're having as I also have that problem with my initial solution.

yeah sure, the file is src/modules/PublicLab.RichTextModule.Table.js,
and there is 1 more problem, on adding the code I said, the popover is not disappearing on clicking on the table button so that is also a problem to be solved,
overall the solution you gave is much better than the code I advised,
so tell me what should we do.

Ok, maybe what I can do is to try to fix it, make a PR and we can evaluate the changes together, and based on that, we can solve for other popovers. How about that?

Ok, I am going to make a PR then

	wysiwyg.stylePrompt = function() {
	$(".wk-prompt button, span.wk-prompt-browse").addClass("btn btn-outline-secondary");
	$(".wk-prompt input")
	.addClass("input form-control")
	.css("margin-bottom", "5px");
	};

	$(
	".wk-commands button.woofmark-command-attachment, .wk-commands button.woofmark-command-image"
	).click(wysiwyg.stylePrompt);

Multiple pop-ups at once when tool buttons are clicked.