New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Touch Support #4

Closed
pspaulding opened this Issue Oct 13, 2014 · 35 comments

Comments

Projects
None yet
@pspaulding

pspaulding commented Oct 13, 2014

Any plans for touch support. I was not able to move tabs on a touch device.

@WolframHempel

This comment has been minimized.

Show comment
Hide comment
@WolframHempel

WolframHempel Oct 13, 2014

Collaborator

Hi,

Yes, mobile support is on the road map, but the question is how to ideally approach it. GoldenLayout’s UI paradigms don’t really lend themselves well to smaller mobile devices, but its component management would be a very helpful thing to have.

The current thinking is to add touch support for Splitters (lines between the boxes), but disable header and tab reordering on mobile devices by default. Let me know your thoughts, do you have a particular usecase or requirement in mind?

Collaborator

WolframHempel commented Oct 13, 2014

Hi,

Yes, mobile support is on the road map, but the question is how to ideally approach it. GoldenLayout’s UI paradigms don’t really lend themselves well to smaller mobile devices, but its component management would be a very helpful thing to have.

The current thinking is to add touch support for Splitters (lines between the boxes), but disable header and tab reordering on mobile devices by default. Let me know your thoughts, do you have a particular usecase or requirement in mind?

@pspaulding

This comment has been minimized.

Show comment
Hide comment
@pspaulding

pspaulding Oct 13, 2014

I agree that a complex layout would not work well on a small phone screen, but I think it would be entirely valid (to some extent) on a high resolution tablet.

pspaulding commented Oct 13, 2014

I agree that a complex layout would not work well on a small phone screen, but I think it would be entirely valid (to some extent) on a high resolution tablet.

@iver56

This comment has been minimized.

Show comment
Hide comment
@iver56

iver56 Oct 20, 2014

Contributor

I would like this feature too (at least for tablets, not necessarily mobile phones).

User story:
Mike is on the move, so he accesses the web app (which uses Golden Layout) on an iPad Air in landscape mode. At some point in time, he has one stack with four tabs. He would like to see one of the pages on the right side, so he drags the tab for that page to the right. The content on the right is more important and requires more space than the content on the left, so he drags the splitter a bit to the left.

Contributor

iver56 commented Oct 20, 2014

I would like this feature too (at least for tablets, not necessarily mobile phones).

User story:
Mike is on the move, so he accesses the web app (which uses Golden Layout) on an iPad Air in landscape mode. At some point in time, he has one stack with four tabs. He would like to see one of the pages on the right side, so he drags the tab for that page to the right. The content on the right is more important and requires more space than the content on the left, so he drags the splitter a bit to the left.

@eranimo

This comment has been minimized.

Show comment
Hide comment
@eranimo

eranimo Nov 4, 2014

I think Golden Layout needs a way to do layout changes based on the page size. Changing the size of the tabs to be more mobile friendly can be accomplished with CSS media queries, but on the Javascript side we need a way to declare layouts for each page size.

eranimo commented Nov 4, 2014

I think Golden Layout needs a way to do layout changes based on the page size. Changing the size of the tabs to be more mobile friendly can be accomplished with CSS media queries, but on the Javascript side we need a way to declare layouts for each page size.

@WolframHempel

This comment has been minimized.

Show comment
Hide comment
@WolframHempel

WolframHempel Nov 4, 2014

Collaborator

Hi eranimo,

agreed, it would be a good strategy to define different layouts, depending on the window size, but I don't think that there's a need to bake this into GoldenLayout - you can already perfectly do that.

Just initialise your layout like this:

var config = {
    settings: {...},
    dimensions: {...}
};

if( $(window).width() > 600 ) {
    config.content = {...}; // default layout
} else {
    config.content = {...}; // layout for smaller screens
}

myLayout = new GoldenLayout( config );

Btw, also a general update on this issue: Touch support will be added to the upcoming 1.0.5 release, watch this space for updates.

Collaborator

WolframHempel commented Nov 4, 2014

Hi eranimo,

agreed, it would be a good strategy to define different layouts, depending on the window size, but I don't think that there's a need to bake this into GoldenLayout - you can already perfectly do that.

Just initialise your layout like this:

var config = {
    settings: {...},
    dimensions: {...}
};

if( $(window).width() > 600 ) {
    config.content = {...}; // default layout
} else {
    config.content = {...}; // layout for smaller screens
}

myLayout = new GoldenLayout( config );

Btw, also a general update on this issue: Touch support will be added to the upcoming 1.0.5 release, watch this space for updates.

@eranimo

This comment has been minimized.

Show comment
Hide comment
@eranimo

eranimo Nov 4, 2014

Your example shows how to change things when the browser window resizes, which is good, but what about when a single container resizes?

eranimo commented Nov 4, 2014

Your example shows how to change things when the browser window resizes, which is good, but what about when a single container resizes?

@WolframHempel

This comment has been minimized.

Show comment
Hide comment
@WolframHempel

WolframHempel Nov 5, 2014

Collaborator

Sorry, I'm not quite sure what you mean by 'container'.

If you're referring to a GoldenLayout container, they emit a resize event that you can subscribe to like this:

myLayout.registerComponent( 'example', function( container, state ) {
    container.on( 'resize', function(){
         // do something with container.width and container.height
    });
});

If you are referring to a DOM element you would just change window in the above example to whatever container you'd need.

You can also tell an existing layout to resize to the measurements of the DOM element that it lives in by calling

myLayout.updateSize();
Collaborator

WolframHempel commented Nov 5, 2014

Sorry, I'm not quite sure what you mean by 'container'.

If you're referring to a GoldenLayout container, they emit a resize event that you can subscribe to like this:

myLayout.registerComponent( 'example', function( container, state ) {
    container.on( 'resize', function(){
         // do something with container.width and container.height
    });
});

If you are referring to a DOM element you would just change window in the above example to whatever container you'd need.

You can also tell an existing layout to resize to the measurements of the DOM element that it lives in by calling

myLayout.updateSize();

deepstreamIO pushed a commit that referenced this issue Nov 11, 2014

@ghost

This comment has been minimized.

Show comment
Hide comment
@ghost

ghost Nov 17, 2014

Contributor

Release 1.0.5 introduces basic touch support. It hasn't been as extensively tested on as big a number of devices as I'd like it to. I'll leave this issue open for a few more days and try to hassle everyone with a smartphone or tablet along my way to try it out. Please add your comments if it doesn't work for you/ your usecase isn't satisfied.

Contributor

ghost commented Nov 17, 2014

Release 1.0.5 introduces basic touch support. It hasn't been as extensively tested on as big a number of devices as I'd like it to. I'll leave this issue open for a few more days and try to hassle everyone with a smartphone or tablet along my way to try it out. Please add your comments if it doesn't work for you/ your usecase isn't satisfied.

@iver56

This comment has been minimized.

Show comment
Hide comment
@iver56

iver56 Nov 17, 2014

Contributor

I gave it a quick spin last week. It didn't work in Chrome on my laptop with touchscreen and Windows 8.1. What didn't work: I could grab a tab, but not drag it around (ie. it was stuck on one position). Also, the drag proxy wouldn't snap back to place when I released my finger from the screen.

Contributor

iver56 commented Nov 17, 2014

I gave it a quick spin last week. It didn't work in Chrome on my laptop with touchscreen and Windows 8.1. What didn't work: I could grab a tab, but not drag it around (ie. it was stuck on one position). Also, the drag proxy wouldn't snap back to place when I released my finger from the screen.

@clearly

This comment has been minimized.

Show comment
Hide comment
@clearly

clearly Mar 10, 2015

+1 Assumed iPad support was there.

clearly commented Mar 10, 2015

+1 Assumed iPad support was there.

@bfattori

This comment has been minimized.

Show comment
Hide comment
@bfattori

bfattori Apr 21, 2015

Why not use HammerJS for touch support? You could also use a long-press for moving tabs around. Long-press-and-hold, the tab visually detaches, drag it around and release when it's in a good spot.

bfattori commented Apr 21, 2015

Why not use HammerJS for touch support? You could also use a long-press for moving tabs around. Long-press-and-hold, the tab visually detaches, drag it around and release when it's in a good spot.

@Sawtaytoes

This comment has been minimized.

Show comment
Hide comment
@Sawtaytoes

Sawtaytoes Sep 16, 2015

Is touch still being worked on? I tried a few solutions on my machine such as FastClick to fake touch as mouse clicks. Sadly, this did not work :(.

I've found GoldenLayout provides a lot of useful features, but the lack of touch compatibility is a real problem for me as any projects I've worked on in the last 3 years--including the one I'm working on now--all require touch.

Sawtaytoes commented Sep 16, 2015

Is touch still being worked on? I tried a few solutions on my machine such as FastClick to fake touch as mouse clicks. Sadly, this did not work :(.

I've found GoldenLayout provides a lot of useful features, but the lack of touch compatibility is a real problem for me as any projects I've worked on in the last 3 years--including the one I'm working on now--all require touch.

@WolframHempel

This comment has been minimized.

Show comment
Hide comment
@WolframHempel

WolframHempel Mar 30, 2016

Collaborator

After a number of attempts in that direction, touch support somewhat worked - but not even in a remotely smooth fashion. GoldenLayout will be re-released completely open with an MIT license very soon. I'll add a help-wanted label, maybe a mobile gesture god can jump in

Collaborator

WolframHempel commented Mar 30, 2016

After a number of attempts in that direction, touch support somewhat worked - but not even in a remotely smooth fashion. GoldenLayout will be re-released completely open with an MIT license very soon. I'll add a help-wanted label, maybe a mobile gesture god can jump in

@bfattori

This comment has been minimized.

Show comment
Hide comment
@bfattori

bfattori Mar 30, 2016

I've used Hammer with great result.

Brett
On Mar 30, 2016 2:35 AM, "Wolfram Hempel" notifications@github.com wrote:

After a number of attempts in that direction, touch support somewhat
worked - but not even in a remotely smooth fashion. GoldenLayout will be
re-released completely open with an MIT license very soon. I'll add a
help-wanted label, maybe a mobile gesture god can jump in


You are receiving this because you commented.
Reply to this email directly or view it on GitHub
#4 (comment)

bfattori commented Mar 30, 2016

I've used Hammer with great result.

Brett
On Mar 30, 2016 2:35 AM, "Wolfram Hempel" notifications@github.com wrote:

After a number of attempts in that direction, touch support somewhat
worked - but not even in a remotely smooth fashion. GoldenLayout will be
re-released completely open with an MIT license very soon. I'll add a
help-wanted label, maybe a mobile gesture god can jump in


You are receiving this because you commented.
Reply to this email directly or view it on GitHub
#4 (comment)

@steveupr

This comment has been minimized.

Show comment
Hide comment
@steveupr

steveupr May 11, 2016

I have spent some time and now have quite a lot of the drag and drop working on touch devices. createDragSource and splitters are working, tabs and panels open and close.

However, dragging tabs is a bit harder. The touchmove handler is bound to the tab but as the tab is destroyed on its journey to its new location, the touchmove handler is destroyed at the same time. This is different behaviour from the mousemove handler which targets the element under the mouse pointer (i.e. DragProxy.element).

I think the way to solve this is to bind the touchmove event to the DragProxy.element, rather than the tab. I'm still working on it but would happily take suggestions from those of you who are more familiar with the framework.

steveupr commented May 11, 2016

I have spent some time and now have quite a lot of the drag and drop working on touch devices. createDragSource and splitters are working, tabs and panels open and close.

However, dragging tabs is a bit harder. The touchmove handler is bound to the tab but as the tab is destroyed on its journey to its new location, the touchmove handler is destroyed at the same time. This is different behaviour from the mousemove handler which targets the element under the mouse pointer (i.e. DragProxy.element).

I think the way to solve this is to bind the touchmove event to the DragProxy.element, rather than the tab. I'm still working on it but would happily take suggestions from those of you who are more familiar with the framework.

@davdtm

This comment has been minimized.

Show comment
Hide comment
@davdtm

davdtm Jul 12, 2016

Hi, I was trying to use this library on a touch device but it seems that the support is still very poor (I should more properly say that I couldn't do anything). Could you please tell me what should be currently doable (after version 1.0.5) and whether you plan to improve this feature? this library looks beautiful and full of features but I think that the lack of a decent support for touch is a too strong limitation nowadays. I'd like to use this code as basis of a quite complex commercial website for scientific analysis but I cannot think to start without any reasonable support for touch. Thanks and regards

davdtm commented Jul 12, 2016

Hi, I was trying to use this library on a touch device but it seems that the support is still very poor (I should more properly say that I couldn't do anything). Could you please tell me what should be currently doable (after version 1.0.5) and whether you plan to improve this feature? this library looks beautiful and full of features but I think that the lack of a decent support for touch is a too strong limitation nowadays. I'd like to use this code as basis of a quite complex commercial website for scientific analysis but I cannot think to start without any reasonable support for touch. Thanks and regards

@davdtm

This comment has been minimized.

Show comment
Hide comment
@davdtm

davdtm Jul 12, 2016

steveupr, could you please share your changes? Perhaps, by working together we may make some step forward (if you're still active on the subject)

thanks

davdtm commented Jul 12, 2016

steveupr, could you please share your changes? Perhaps, by working together we may make some step forward (if you're still active on the subject)

thanks

@steveupr

This comment has been minimized.

Show comment
Hide comment
@steveupr

steveupr Jul 12, 2016

Hi. I have a fork that now has full touch support (on iPad/iPhone at least). However, I've made quite a few styling changes so I'd say it isn't the right version to merge back in to the main repo.

The fork is probably quite far behind as I haven't made any changes for a few months but I will do a cleanup and get a suitable version cobbled together for a PR next week.

https://github.com/steveupr/golden-layout/commits/master

steveupr commented Jul 12, 2016

Hi. I have a fork that now has full touch support (on iPad/iPhone at least). However, I've made quite a few styling changes so I'd say it isn't the right version to merge back in to the main repo.

The fork is probably quite far behind as I haven't made any changes for a few months but I will do a cleanup and get a suitable version cobbled together for a PR next week.

https://github.com/steveupr/golden-layout/commits/master

@davdtm

This comment has been minimized.

Show comment
Hide comment
@davdtm

davdtm Jul 12, 2016

That's great steveupr, thanks a lot. I look forward to seeing a "touchable" release...

davdtm commented Jul 12, 2016

That's great steveupr, thanks a lot. I look forward to seeing a "touchable" release...

@davdtm

This comment has been minimized.

Show comment
Hide comment
@davdtm

davdtm Aug 4, 2016

Sorry for bothering steveupr, any update regarding the support for touch, by chance?

davdtm commented Aug 4, 2016

Sorry for bothering steveupr, any update regarding the support for touch, by chance?

@ldetomi

This comment has been minimized.

Show comment
Hide comment
@ldetomi

ldetomi Sep 9, 2016

Contributor

Hello steveupr,
I found this topic about possibility to have touch support in GoldenLayout. About 2 months ago you promised a fork in which Touch could be used to drag&drop GoldenLayout panes. Any chance to have it in near future? I'm very interested in this and in 2016 is necessary to think plugins touch-enabled.

THANK YOU.

Contributor

ldetomi commented Sep 9, 2016

Hello steveupr,
I found this topic about possibility to have touch support in GoldenLayout. About 2 months ago you promised a fork in which Touch could be used to drag&drop GoldenLayout panes. Any chance to have it in near future? I'm very interested in this and in 2016 is necessary to think plugins touch-enabled.

THANK YOU.

@davdtm

This comment has been minimized.

Show comment
Hide comment
@davdtm

davdtm Sep 14, 2016

Hi steveupr, do you think you'll find some time for the cleanup you mentioned, in the next future? This is a beautiful framework that may be used in many applications, leaving it as is (i.e., incomplete and/or not updated) really sounds as a waste of time and efforts, that's a true pity in my personal opinion

davdtm commented Sep 14, 2016

Hi steveupr, do you think you'll find some time for the cleanup you mentioned, in the next future? This is a beautiful framework that may be used in many applications, leaving it as is (i.e., incomplete and/or not updated) really sounds as a waste of time and efforts, that's a true pity in my personal opinion

@steveupr

This comment has been minimized.

Show comment
Hide comment
@steveupr

steveupr Sep 16, 2016

Hi @davdtm

Here is my fork: https://github.com/steveupr/golden-layout

It needs the latest GL source merged in but it works on iOS devices. To drag a window around, click and hold to release it, then position where you like.

I will try to get a PR raised and get it merged in to the main project.

steveupr commented Sep 16, 2016

Hi @davdtm

Here is my fork: https://github.com/steveupr/golden-layout

It needs the latest GL source merged in but it works on iOS devices. To drag a window around, click and hold to release it, then position where you like.

I will try to get a PR raised and get it merged in to the main project.

@davdtm

This comment has been minimized.

Show comment
Hide comment
@davdtm

davdtm Sep 16, 2016

steveupr, thank you very much! I'm looking forward to trying it

davdtm commented Sep 16, 2016

steveupr, thank you very much! I'm looking forward to trying it

@ldetomi ldetomi referenced this issue Sep 19, 2016

Open

Tab height #110

@davdtm

This comment has been minimized.

Show comment
Hide comment
@davdtm

davdtm Sep 23, 2016

Hi steveupr, it seems that the PR list has been completely emptied in the last few days, so I'm very confident that your changes may be merged pretty soon if you send them. Could you please set up a PR and submit it when you've time? thanks

davdtm commented Sep 23, 2016

Hi steveupr, it seems that the PR list has been completely emptied in the last few days, so I'm very confident that your changes may be merged pretty soon if you send them. Could you please set up a PR and submit it when you've time? thanks

@sholybonoly

This comment has been minimized.

Show comment
Hide comment
@sholybonoly

sholybonoly Nov 14, 2016

Contributor

Hi there,

Just wondering if there was any update on this one? Any upcoming plans to merge in changes?

Thanks!

Contributor

sholybonoly commented Nov 14, 2016

Hi there,

Just wondering if there was any update on this one? Any upcoming plans to merge in changes?

Thanks!

@mattgodbolt

This comment has been minimized.

Show comment
Hide comment
@mattgodbolt

mattgodbolt Nov 14, 2016

Collaborator

I'm sorry if I've missed a PR; will check back and see what I can find.
Thanks for your patience.
On Mon, Nov 14, 2016 at 4:58 PM, sholybonoly notifications@github.com
wrote:

Hi there,

Just wondering if there was any update on this one? Any upcoming plans to
merge in changes?

Thanks!


You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
#4 (comment),
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAmsdS1VXf0vNc-u0xi5KH31djWptoa6ks5q-Od5gaJpZM4CuDld
.

Collaborator

mattgodbolt commented Nov 14, 2016

I'm sorry if I've missed a PR; will check back and see what I can find.
Thanks for your patience.
On Mon, Nov 14, 2016 at 4:58 PM, sholybonoly notifications@github.com
wrote:

Hi there,

Just wondering if there was any update on this one? Any upcoming plans to
merge in changes?

Thanks!


You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
#4 (comment),
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAmsdS1VXf0vNc-u0xi5KH31djWptoa6ks5q-Od5gaJpZM4CuDld
.

@sholybonoly

This comment has been minimized.

Show comment
Hide comment
@sholybonoly

sholybonoly Nov 15, 2016

Contributor

Thanks Matt.. no PR it seems yet. Reading above, I'm not sure if @steveupr has any plans to create a PR for this or how much work it will be to merge with current source now.

Contributor

sholybonoly commented Nov 15, 2016

Thanks Matt.. no PR it seems yet. Reading above, I'm not sure if @steveupr has any plans to create a PR for this or how much work it will be to merge with current source now.

@mattgodbolt

This comment has been minimized.

Show comment
Hide comment
@mattgodbolt

mattgodbolt Nov 15, 2016

Collaborator

Thanks @sholybonoly I thought I'd missed something.

Collaborator

mattgodbolt commented Nov 15, 2016

Thanks @sholybonoly I thought I'd missed something.

@ldetomi

This comment has been minimized.

Show comment
Hide comment
@ldetomi

ldetomi Jan 25, 2017

Contributor

I found another thread related:

Please, @steveupr do you have any plans to merge your branch?

Contributor

ldetomi commented Jan 25, 2017

I found another thread related:

Please, @steveupr do you have any plans to merge your branch?

@LarissaSmith

This comment has been minimized.

Show comment
Hide comment
@LarissaSmith

LarissaSmith Feb 17, 2017

Contributor

I started the process of updating and pulling in steveupr's work on my fork at https://github.com/LarissaSmith/golden-layout. Splitters and header buttons work as far as I've tested (iPad and Windows 10). Tabs can be dragged out, but it takes a second touch on the proxy to dock them. It looks like steveupr worked on the issue:

I think the way to solve this is to bind the touchmove event to the DragProxy.element, rather than the tab.

I left out steveupr's code implementing this solution because it didn't work in my tests. From everything I read online, it takes a second touch before newly bound touchmove handlers will activate.

Have I missed something @steveupr? I will keep looking at this, but for now, perhaps I should make the PR as is.

Contributor

LarissaSmith commented Feb 17, 2017

I started the process of updating and pulling in steveupr's work on my fork at https://github.com/LarissaSmith/golden-layout. Splitters and header buttons work as far as I've tested (iPad and Windows 10). Tabs can be dragged out, but it takes a second touch on the proxy to dock them. It looks like steveupr worked on the issue:

I think the way to solve this is to bind the touchmove event to the DragProxy.element, rather than the tab.

I left out steveupr's code implementing this solution because it didn't work in my tests. From everything I read online, it takes a second touch before newly bound touchmove handlers will activate.

Have I missed something @steveupr? I will keep looking at this, but for now, perhaps I should make the PR as is.

@ldetomi

This comment has been minimized.

Show comment
Hide comment
@ldetomi

ldetomi Feb 18, 2017

Contributor

@LarissaSmith Great Larissa!!!!! I'm waiting this fix since july... I sincerely hope that developing of this lovely plugin will re-start with this kind of improvements!!!

Contributor

ldetomi commented Feb 18, 2017

@LarissaSmith Great Larissa!!!!! I'm waiting this fix since july... I sincerely hope that developing of this lovely plugin will re-start with this kind of improvements!!!

@LarissaSmith

This comment has been minimized.

Show comment
Hide comment
@LarissaSmith

LarissaSmith Feb 23, 2017

Contributor

My PR, #225, has been pulled.

Contributor

LarissaSmith commented Feb 23, 2017

My PR, #225, has been pulled.

@mattgodbolt

This comment has been minimized.

Show comment
Hide comment
@mattgodbolt

mattgodbolt May 11, 2017

Collaborator

We're still missing the drag event stuff. If anyone knows how to do that I'd love to fix it!

Collaborator

mattgodbolt commented May 11, 2017

We're still missing the drag event stuff. If anyone knows how to do that I'd love to fix it!

@nopmop

This comment has been minimized.

Show comment
Hide comment
@nopmop

nopmop May 18, 2018

Contributor

@LarissaSmith thanks for the great PR. We extended further touch support in the new ES6 tree (src/js_es6). @bfattori @pspaulding @davdtm and others interested are welcome to checkout & test, and raise new issues.
Closing this for now.

Contributor

nopmop commented May 18, 2018

@LarissaSmith thanks for the great PR. We extended further touch support in the new ES6 tree (src/js_es6). @bfattori @pspaulding @davdtm and others interested are welcome to checkout & test, and raise new issues.
Closing this for now.

@nopmop nopmop closed this May 18, 2018

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment