Provide functionality to hide/unhide sidebar

[segun-codes]

A significant area of the page at https://publiclab.github.io/Leaflet.DistortableImage/examples/archive is covered with a sidebar. As such, users are denied the full benefit of the entire viewport (present on a browser) for image distortion tasks etc. Therefore, there's a need to provide a functionality to hide and unhide the sidebar. For more clarity, view the attached screenshot.

Please describe the desired behavior. Through a simple user-controlled action, the sidebar should only be visible when needed and hidden at other times.

Additional context (optional) Feel free to include any applicable: code, screenshots, or gifs.

[segun-codes]

Hi @jywarren, the issue is all wired-up now as advised. @7malikk, let's begin conversation on what the design should look like.

[7malikk]

Hello @segun-codes, we could add a button toggle show/hide with an onclick event listener.

So when the sidebar is hidden, the button would it would have a transparent background and a distinct color at the top right corner of the map and at a z-index

We could use font-awesome icons for the toggle button. for simplicity.

What do you think?

[segun-codes]

@7malikk good idea there. In addition to your suggestions, let's consider that:

1. The sidebar should be visible by default and only user-action should trigger 'hide' and subsequently 'unhide' actions.
2. We need a way to make the button suggestive. For the purpose of user experience, it should be clear that the button needs to be clicked before user can attempt to place image on the map. So a tooltip (or better alternative) could be helpful here.
3. The tooltip can read 'Click to continue mapknitting' - just an example, could be refined. I hope this is no overkill though.

What's your take?

[7malikk]

@segun-codes These are very good ideas and I think they're valid we could make that tooltip a sort of more obvious sign as the tooltip requires the user to actually hover over the button.

Right?

[vanithaak]

hey @segun-codes, @7malikk ! isn't the sidebar visible by default? when we don't insert a link in the form and close the modal, it's visible in the screen. or you mean to show the sidebar with the modal, when the screen is loaded? Please correct me if I'm wrong :)

[7malikk]

hey @segun-codes, @7malikk ! isn't the sidebar visible by default? when we don't insert a link in the form and close the modal, it's visible in the screen. or you mean to show the sidebar with the modal, when the screen is loaded? Please correct me if I'm wrong :)

@vanithaak hey there, yea you're right by default the sidebar is visible when the user does not input a link and closes the modal. We could create an issue on that, instead of an empty sidebar the user should be notified the "No link = No images.." as seen on the current sidebar.

That being said what we want to achieve is to include a toggle that shows and hides the sidebar on click when the user has pictures to be added to the map.

@segun-codes @jywarren what are your thoughts on these ideas? 🤔

@vanithaak your question prompted this idea, it could lead to a sub-issue we could work on. Thank you!😊

I hope this clears things up concerning this issue though.

[Chinazaekpere-Ike]

hey @segun-codes, @7malikk ! isn't the sidebar visible by default? when we don't insert a link in the form and close the modal, it's visible in the screen. or you mean to show the sidebar with the modal, when the screen is loaded? Please correct me if I'm wrong :)

@vanithaak hey there, yea you're right by default the sidebar is visible when the user does not input a link and closes the modal. We could create an issue on that, instead of an empty sidebar the user should be notified the "No link = No images.." as seen on the current sidebar.

That being said what we want to achieve is to include a toggle that shows and hides the sidebar on click when the user has pictures to be added to the map.

@segun-codes @jywarren what are your thoughts on these ideas? 🤔

@vanithaak your question prompted this idea, it could lead to a sub-issue we could work on. Thank you!😊

I hope this clears things up concerning this issue though.

In addition to this, I'd like to suggest having the sidebar invisible/retract when any part of the map is clicked (excluding the side bar itself of course) in case the user misses the toggle button and or if it's a hassle dragging the cursor up to the toggle button every time the user wants to add an image

[segun-codes]

@segun-codes These are very good ideas and I think they're valid we could make that tooltip a sort of more obvious sign as the tooltip requires the user to actually hover over the button.

Right?

@7malikk, yes... that's the way to go.

[segun-codes]

hey @segun-codes, @7malikk ! isn't the sidebar visible by default? when we don't insert a link in the form and close the modal, it's visible in the screen. or you mean to show the sidebar with the modal, when the screen is loaded? Please correct me if I'm wrong :)

@vanithaak hey there, yea you're right by default the sidebar is visible when the user does not input a link and closes the modal. We could create an issue on that, instead of an empty sidebar the user should be notified the "No link = No images.." as seen on the current sidebar.

That being said what we want to achieve is to include a toggle that shows and hides the sidebar on click when the user has pictures to be added to the map.

@segun-codes @jywarren what are your thoughts on these ideas? 🤔

@vanithaak your question prompted this idea, it could lead to a sub-issue we could work on. Thank you!😊

I hope this clears things up concerning this issue though.

@vanithaak, yes the sidebar appears by default. My comment about it is actually to ensure that behaviour is preserved; @7malikk, I agree with you. As per the new issue, not sure I got your message clearly though so I'm unable to react.

[7malikk]

@segun-codes These are very good ideas and I think they're valid we could make that tooltip a sort of more obvious sign as the tooltip requires the user to actually hover over the button.

Right?

@7malikk, yes... that's the way to go.

@segun-codes i was going to ask the same thing.

What do you think should be our first step?

• We need to come up with a position for the icon on the map.

• Next we add an event to toggle open and close, similar to what happens when user submits a link.

Thoughts?

[7malikk]

hey @segun-codes, @7malikk ! isn't the sidebar visible by default? when we don't insert a link in the form and close the modal, it's visible in the screen. or you mean to show the sidebar with the modal, when the screen is loaded? Please correct me if I'm wrong :)

@vanithaak hey there, yea you're right by default the sidebar is visible when the user does not input a link and closes the modal. We could create an issue on that, instead of an empty sidebar the user should be notified the "No link = No images.." as seen on the current sidebar.

That being said what we want to achieve is to include a toggle that shows and hides the sidebar on click when the user has pictures to be added to the map.

@segun-codes @jywarren what are your thoughts on these ideas? 🤔

@vanithaak your question prompted this idea, it could lead to a sub-issue we could work on. Thank you!😊

I hope this clears things up concerning this issue though.

@vanithaak, yes the sidebar appears by default. My comment about it is actually to ensure that behaviour is preserved;

@7malikk, I agree with you. As per the new issue, not sure I got your message clearly though so I'm unable to react.

@segun-codes the issue I'm proposing can be resolved when we work on the toggle feature but I'm proposing we make it a separate issue entire so others could get an issue to work.

The crux of the issue is, when you navigate here instead of imputing a url and the user closes the modal. The side bar opens showing a message "No link = No images".

What I propose is that the user gets a notification/pop up showing the message "No link = No images" or a refactored one.

Does this clear things up?

[segun-codes]

hey @segun-codes, @7malikk ! isn't the sidebar visible by default? when we don't insert a link in the form and close the modal, it's visible in the screen. or you mean to show the sidebar with the modal, when the screen is loaded? Please correct me if I'm wrong :)

@vanithaak hey there, yea you're right by default the sidebar is visible when the user does not input a link and closes the modal. We could create an issue on that, instead of an empty sidebar the user should be notified the "No link = No images.." as seen on the current sidebar. That being said what we want to achieve is to include a toggle that shows and hides the sidebar on click when the user has pictures to be added to the map. @segun-codes @jywarren what are your thoughts on these ideas? 🤔 @vanithaak your question prompted this idea, it could lead to a sub-issue we could work on. Thank you!😊 I hope this clears things up concerning this issue though.

In addition to this, I'd like to suggest having the sidebar invisible/retract when any part of the map is clicked (excluding the side bar itself of course) in case the user misses the toggle button and or if it's a hassle dragging the cursor up to the toggle button every time the user wants to add an image

@Chinazaekpere-Ike, now this is capable of further improving UX, thank you. But then, do you also think user action in form of inadvertent and intermittent clicking of the map could reduce UX given that the sidebar will keep sliding in and out as a result?

@jywarren @7malikk, your thoughts will also come in handy here.. thanks.

[segun-codes]

@segun-codes These are very good ideas and I think they're valid we could make that tooltip a sort of more obvious sign as the tooltip requires the user to actually hover over the button.

Right?

@7malikk, yes... that's the way to go.

@segun-codes i was going to ask the same thing.

What do you think should be our first step?

• We need to come up with a position for the icon on the map.
• Next we add an event to toggle open and close, similar to what happens when user submits a link.

Thoughts?

@7malikk sorry, I edited out the message you just reacted to. I wanted us to start having this same discussion but figured we could quickly look at the nice idea suggested by @Chinazaekpere-Ike first and summarize the design approach in bulletpoints for @jywarren to approve before we make the next progress.... or what do you think?

[Chinazaekpere-Ike]

hey @segun-codes, @7malikk ! isn't the sidebar visible by default? when we don't insert a link in the form and close the modal, it's visible in the screen. or you mean to show the sidebar with the modal, when the screen is loaded? Please correct me if I'm wrong :)

@vanithaak hey there, yea you're right by default the sidebar is visible when the user does not input a link and closes the modal. We could create an issue on that, instead of an empty sidebar the user should be notified the "No link = No images.." as seen on the current sidebar. That being said what we want to achieve is to include a toggle that shows and hides the sidebar on click when the user has pictures to be added to the map. @segun-codes @jywarren what are your thoughts on these ideas? 🤔 @vanithaak your question prompted this idea, it could lead to a sub-issue we could work on. Thank you!😊 I hope this clears things up concerning this issue though.

In addition to this, I'd like to suggest having the sidebar invisible/retract when any part of the map is clicked (excluding the side bar itself of course) in case the user misses the toggle button and or if it's a hassle dragging the cursor up to the toggle button every time the user wants to add an image

@Chinazaekpere-Ike, now this is capable of further improving UX, thank you. But then, do you also think user action in form of inadvertent and intermittent clicking of the map could reduce UX given that the sidebar will keep sliding in and out as a result?

@jywarren @7malikk, your thoughts will also come in handy here.. thanks.

No I don't think so

It won't affect the UX because this feature will only be made for the sidebar to slide out (disappear). For the side bar to reappear again the user will have to click on the regular toggler button meaning they won't be any accidental clicks.

For more clarity I have attached a sample video from Bootstraps hamburger menu -->

https://user-images.githubusercontent.com/108843939/196058027-8a0185af-8a27-4a65-a60d-1554ec1bae6c.mp4

[7malikk]

hey @segun-codes, @7malikk ! isn't the sidebar visible by default? when we don't insert a link in the form and close the modal, it's visible in the screen. or you mean to show the sidebar with the modal, when the screen is loaded? Please correct me if I'm wrong :)

@vanithaak hey there, yea you're right by default the sidebar is visible when the user does not input a link and closes the modal. We could create an issue on that, instead of an empty sidebar the user should be notified the "No link = No images.." as seen on the current sidebar. That being said what we want to achieve is to include a toggle that shows and hides the sidebar on click when the user has pictures to be added to the map. @segun-codes @jywarren what are your thoughts on these ideas? 🤔 @vanithaak your question prompted this idea, it could lead to a sub-issue we could work on. Thank you!😊 I hope this clears things up concerning this issue though.

In addition to this, I'd like to suggest having the sidebar invisible/retract when any part of the map is clicked (excluding the side bar itself of course) in case the user misses the toggle button and or if it's a hassle dragging the cursor up to the toggle button every time the user wants to add an image

@Chinazaekpere-Ike, now this is capable of further improving UX, thank you. But then, do you also think user action in form of inadvertent and intermittent clicking of the map could reduce UX given that the sidebar will keep sliding in and out as a result? @jywarren @7malikk, your thoughts will also come in handy here.. thanks.

No I don't think so

It won't affect the UX because this feature will only be made for the sidebar to slide out (disappear). For the side bar to reappear again the user will have to click on the regular toggler button meaning they won't be any accidental clicks.

For more clarity I have attached a sample video from Bootstraps hamburger menu -->

BS.Slidebar.SlideIn.n.Out.mp4

Yes, @Chinazaekpere-Ike I understand what you mean and it is an excellent idea it will improve UX. @segun-codes I think @Chinazaekpere-Ike's idea is a great addition we can now move to the steps we intend to take to archive this feat

[7malikk]

Toggle open/close in sidebar

• [x] Create a toggle button (positioned at the top right corner of the map)
• [x] When a user submits a URL, the sidebar should open up with the button to toggle close
• [ ] When the user clicks on any part of the map that is not the sidebar interface, the sidebar, if open, should close

Sub-Task

• [ ] Create a notification/pop-up: if the user does not provide a URL and closes the modal, the user should get a notification/pop-up reading "No link = No images" or a better message.

@segun-codes @Chinazaekpere-Ike @vanithaak @jywarren

This is a summary of the various ideas, correct me if I missed any or if you have a contradicting opinion. If there are no corrections, let's move to steps to achieve complete these tasks.

Thank you all for the input so far

[segun-codes]

hey @segun-codes, @7malikk ! isn't the sidebar visible by default? when we don't insert a link in the form and close the modal, it's visible in the screen. or you mean to show the sidebar with the modal, when the screen is loaded? Please correct me if I'm wrong :)

@vanithaak hey there, yea you're right by default the sidebar is visible when the user does not input a link and closes the modal. We could create an issue on that, instead of an empty sidebar the user should be notified the "No link = No images.." as seen on the current sidebar. That being said what we want to achieve is to include a toggle that shows and hides the sidebar on click when the user has pictures to be added to the map. @segun-codes @jywarren what are your thoughts on these ideas? 🤔 @vanithaak your question prompted this idea, it could lead to a sub-issue we could work on. Thank you!😊 I hope this clears things up concerning this issue though.

In addition to this, I'd like to suggest having the sidebar invisible/retract when any part of the map is clicked (excluding the side bar itself of course) in case the user misses the toggle button and or if it's a hassle dragging the cursor up to the toggle button every time the user wants to add an image

@Chinazaekpere-Ike, now this is capable of further improving UX, thank you. But then, do you also think user action in form of inadvertent and intermittent clicking of the map could reduce UX given that the sidebar will keep sliding in and out as a result? @jywarren @7malikk, your thoughts will also come in handy here.. thanks.

No I don't think so It won't affect the UX because this feature will only be made for the sidebar to slide out (disappear). For the side bar to reappear again the user will have to click on the regular toggler button meaning they won't be any accidental clicks. For more clarity I have attached a sample video from Bootstraps hamburger menu --> BS.Slidebar.SlideIn.n.Out.mp4

Yes, @Chinazaekpere-Ike I understand what you mean and it is an excellent idea it will improve UX. @segun-codes I think @Chinazaekpere-Ike's idea is a great addition we can now move to the steps we intend to take to archive this feat

@7malikk, this is fine then. We should proceed to next step fast.

[segun-codes]

Toggle open/close in sidebar

• [ ] Create a toggle button (positioned at the top right corner of the map)
• [ ] When a user submits a URL, the sidebar should open up with the button to toggle close
• [ ] When the user clicks on any part of the map that is not the sidebar interface, the sidebar, if open, should close

Sub-Task

• [ ] Create a notification/pop-up: if the user does not provide a URL and closes the modal, the user should get a notification/pop-up reading "No link = No images" or a better message.

@segun-codes @Chinazaekpere-Ike @vanithaak @jywarren

This is a summary of the various ideas, correct me if I missed any or if you have a contradicting opinion. If there are no corrections, let's move to steps to achieve complete these tasks.

Thank you all for the input so far

@7malikk, have you suggestion on how we should split? For instance, I can take tasks #1 & 2 and you #3 & 4 or maybe the reverse way too??

[7malikk]

Toggle open/close in sidebar

• [ ] Create a toggle button (positioned at the top right corner of the map)

• [ ] When a user submits a URL, the sidebar should open up with the button to toggle close

• [ ] When the user clicks on any part of the map that is not the sidebar interface, the sidebar, if open, should close

Sub-Task

• [ ] Create a notification/pop-up: if the user does not provide a URL and closes the modal, the user should get a notification/pop-up reading "No link = No images" or a better message.

@segun-codes @Chinazaekpere-Ike @vanithaak @jywarren

This is a summary of the various ideas, correct me if I missed any or if you have a contradicting opinion. If there are no corrections, let's move to steps to achieve complete these tasks.

Thank you all for the input so far

@7malikk, have you suggestion on how we should split? For instance, I can take tasks #1 & 2 and you #3 & 4 or maybe the reverse way too??

@segun-codes the reverse is fine by me. Thank you! We can get to work.

[segun-codes]

Toggle open/close in sidebar

• [ ] Create a toggle button (positioned at the top right corner of the map)

• [ ] When a user submits a URL, the sidebar should open up with the button to toggle close

• [ ] When the user clicks on any part of the map that is not the sidebar interface, the sidebar, if open, should close

Sub-Task

• [ ] Create a notification/pop-up: if the user does not provide a URL and closes the modal, the user should get a notification/pop-up reading "No link = No images" or a better message.

@segun-codes @Chinazaekpere-Ike @vanithaak @jywarren

This is a summary of the various ideas, correct me if I missed any or if you have a contradicting opinion. If there are no corrections, let's move to steps to achieve complete these tasks.

Thank you all for the input so far

@7malikk, have you suggestion on how we should split? For instance, I can take tasks #1 & 2 and you #3 & 4 or maybe the reverse way too??

@segun-codes the reverse is fine by me. Thank you! We can get to work.

Okay, many thanks @7malikk @Chinazaekpere-Ike @vanithaak .

[segun-codes]

Toggle open/close in sidebar

• [ ] Create a toggle button (positioned at the top right corner of the map)
• [ ] When a user submits a URL, the sidebar should open up with the button to toggle close
• [ ] When the user clicks on any part of the map that is not the sidebar interface, the sidebar, if open, should close

Sub-Task

• [ ] Create a notification/pop-up: if the user does not provide a URL and closes the modal, the user should get a notification/pop-up reading "No link = No images" or a better message.

@segun-codes @Chinazaekpere-Ike @vanithaak @jywarren This is a summary of the various ideas, correct me if I missed any or if you have a contradicting opinion. If there are no corrections, let's move to steps to achieve complete these tasks. Thank you all for the input so far

@7malikk, have you suggestion on how we should split? For instance, I can take tasks #1 & 2 and you #3 & 4 or maybe the reverse way too??

@7malikk , please remember the tooltip for task #1, I just remembered it.

[7malikk]

@segun-codes yea I thought of it, if the sidebar opens up when the user submits a url, there will be no need for a tooltip. What do you think?

[7malikk]

@segun-codes How is it going on your end?

[segun-codes]

@segun-codes yea I thought of it, if the sidebar opens up when the user submits a url, there will be no need for a tooltip. What do you think?

@7malikk, tooltip is still a good idea given that it's a memory aid. You will be surprised at how useful it can be for distracted users (especially), so it's my opinion that we keep it.

[7malikk]

@segun-codes yea I thought of it, if the sidebar opens up when the user submits a url, there will be no need for a tooltip. What do you think?

@7malikk, tooltip is still a good idea given that it's a memory aid. You will be surprised how useful it can be for distracted users, so it's my opinion that we keep it.

Alright, I'll implement that too.

How's yours coming along? @segun-codes

[segun-codes]

@segun-codes yea I thought of it, if the sidebar opens up when the user submits a url, there will be no need for a tooltip. What do you think?

@7malikk, tooltip is still a good idea given that it's a memory aid. You will be surprised how useful it can be for distracted users, so it's my opinion that we keep it.

Alright, I'll implement that too.

How's yours coming along? @segun-codes

Just started working on it, and really, it's a "so far so good" story for now. And yours? I saw the icon disappearance issue you mentioned.

[7malikk]

@segun-codes yea I thought of it, if the sidebar opens up when the user submits a url, there will be no need for a tooltip. What do you think?

@7malikk, tooltip is still a good idea given that it's a memory aid. You will be surprised how useful it can be for distracted users, so it's my opinion that we keep it.

Alright, I'll implement that too.

How's yours coming along? @segun-codes

Just started working on it, and really, it's a "so far so good" story for now. And yours? I saw the icon disappearance issue you mentioned.

That's great to hear

All done except the tooltip and the disappearing icon, what do you think I could do?

[segun-codes]

@segun-codes yea I thought of it, if the sidebar opens up when the user submits a url, there will be no need for a tooltip. What do you think?

@7malikk, tooltip is still a good idea given that it's a memory aid. You will be surprised how useful it can be for distracted users, so it's my opinion that we keep it.

Alright, I'll implement that too.

How's yours coming along? @segun-codes

Just started working on it, and really, it's a "so far so good" story for now. And yours? I saw the icon disappearance issue you mentioned.

That's great to hear

All done except the tooltip and the disappearing icon, what do you think I could do?

@7malikk Oh! nice. As for the issue, I haven't given it a deep thought yet but hope there's no event being fired without your knowledge that may be (in)!directly responsible for this. If you haven't, you may want to go through the project documentation (see ReadMe.md file) just to get more familiar with background events being fired here and there and see if they have a role to play in the issue of concern.

[segun-codes]

@7malikk, I have now completed, tested my part. It's ready for integration following which we can raise a pull request.

Meanwhile, have you made any progress with the icon disappearance issue? If it persists, maybe we can do a quick google meet just for me to also see the issue live. Perhaps, my thought may be stimulated better. Thanks.

[7malikk]

@segun-codes That sounds good.

Yea let's have that meeting, it should help with the integration too. When will be convenient for you?