Add touch support (BS $1000)

[saltyfoam]

I have GrapesJS integrated into a solution being built and I'm looking for a developer to add touch support to GrapesJS, for our use and also to have it put out to the community. I am also looking for a developer to assist with GrapesJS integration and improvements for our site.

[denim2x]

@saltyfoam Do you require touch support within the editor itself or within the template?

[saltyfoam]

I'd like to be able to use this editor on a touch device such as a tablet, so we need anything you can do with a mouse to be achievable with touch. I am currently using DragDropTouch.js for other parts of the Web site so if you could use that here it would be great as it seems to work for all the environments I want to support.

[saltyfoam]

How is this implementation coming along?

[cmcintosh]

If no-body has looked at taking this up, I may take a look at it.

[artf]

https://www.bountysource.com/issues/48502777-add-touch-support-bs-1000 seems like @denim2x still working on this

[saltyfoam]

Seems like there's been no activity on this for a month. I think cmcintosh could work on it.

[bayareawebpro]

Take a look at https://hammerjs.github.io

[Unsigno]

If you still interested on this feature and no one is working on it I would like to have a look .

I understand we are talking about handle user input on touch devices, no about responsive design ( can be improved but is not the target here ) . If some one can clarify i will be happy to start it :)

[saltyfoam]

This feature is still very important to my project and there is no one actively working on it. I believe it would also be great to have this feature for other people to use GrapesJS in a touch environment. At this point the goal is just to be able to create and edit a document with GrapesJS using a large touch enabled device such as a laptop, we can deal with smaller devices as a separate issue.

[Unsigno]

Oki, I'll check the code and if I think I can complete the issue I'll mark it as started. This should be forked from master and pushed to dev, right ?

[artf]

Hi @Unsigno you should only interact with the dev branch, so fork from dev and make PR to dev

[Unsigno]

It's being harder than I expected, but after some problems mapping the current code and looking for solutions, I think I'm on track to solve the dragging problems . I am basing my solution on the pruposed DragDropTouch polyfill, but it seems not supported on IE11 and Edge ( browsers using poiter events instead touch events ) is this acceptable ?

Are there another missing features for tocuh devices ? I was looking for it, but since i am not a real user and i can't test with all browsers, I'd appreciate some reports.

[saltyfoam]

Hi,

We do support Edge on our Web site for drag and drop and touch and so I took a closer look and it looks like we’re also loading the following so perhaps with both polyfills we can get this to work on those environments.

https://github.com/CamHenlin/TouchPolyfill

Dominique

---

From: Unsigno notifications@github.com Sent: Monday, March 12, 2018 5:19:53 PM To: artf/grapesjs Cc: saltyfoam; Mention Subject: Re: [artf/grapesjs] Add touch support (BS $1000) (#241)

It's being harder than I expected, but after some problems mapping the current code and looking for solutions, I think I'm on track to solve the dragging problems . I am basing my solution on the pruposed DragDropTouch polyfill, but it seems not supported on IE11 and Edge ( browsers using poiter events instead touch events ) is this acceptable ?

Are there another missing features for tocuh devices ? I was looking for it, but since i am not a real user and i can't test with all browsers, I'd appreciate some reports.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHubhttps://github.com/artf/grapesjs/issues/241#issuecomment-372504937, or mute the threadhttps://github.com/notifications/unsubscribe-auth/AbWkx-9JkVmCLexyi4rdV_pjVwAAQZqbks5tdxCpgaJpZM4O-IHQ.

[Unsigno]

Thanks, will take a look, i hope no issues overlaping polyfills. If it throw problems will implement the drag polyfill over pointers .

Are there another known missed features for touch devices ?

[saltyfoam]

We haven’t been able to use this framework at all on touch devices so I don’t know if there are other missing features.

We are currently loading both polyfills and using drag and drop so hopefully you won’t have conflicts either.

Dominique

On Mar 12, 2018, at 5:58 PM, Unsigno notifications@github.com<mailto:notifications@github.com> wrote:

Thanks, will take a look, i hope no issues overlaping polyfills. If it throw problems will implement the drag polyfill over pointers .

Are there another missed features for touch devices ?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHubhttps://github.com/artf/grapesjs/issues/241#issuecomment-372510864, or mute the threadhttps://github.com/notifications/unsubscribe-auth/AbWkx1WBRjVvGEDy1ev3ZWNtMhW71VH2ks5tdxmmgaJpZM4O-IHQ.

[devontrae]

I think this would be pretty useful, so I'll take a crack at it as well.

[Unsigno]

@devontrae I am currently working on this , please look for another issue .

[devontrae]

@unsigno alright, well if you need a partner you know where to find me!

[artsrun-gasparyan]

Have you had any luck with this issue? I've tried to play with this feature but hit my share of obstacles.

[Unsigno]

No luck needed to solve issues :p

Yes, there are some obstacles , but i still working on it. I have some things working but still some issues to fix, i hope send a PR soon .

[Unsigno]

I published a working version , still with some bugs , buts looks working and so you can test and report . https://github.com/Unsigno/grapesjs

Currently i am looking to fix the ColorPicker and trying to improve the DragDropTouch behavior .

@saltyfoam I added the touch polyfill and tested on IE/Edge ( on local version ) , it produces the same result on mouse and touch devices , but currently GrapesJS is not supported on IE/Edge . Since this should be a different issue , can i assume that producing the same result on touch and mouse as added touch support on that browsers ??

[saltyfoam]

Hi,

I am travelling until next week so I will look at it then.

Dominique

---

From: Unsigno notifications@github.com Sent: Thursday, March 29, 2018 3:22:59 PM To: artf/grapesjs Cc: saltyfoam; Mention Subject: Re: [artf/grapesjs] Add touch support (BS $1000) (#241)

I published a working version , still with some bugs , buts looks working and so you can test and report . https://github.com/Unsigno/grapesjs

Currently i am looking to fix the ColorPicker and trying to improve the DragDropTouch behavior .

@saltyfoamhttps://github.com/saltyfoam I added the touch polyfill and tested on IE/Edge ( on local version ) , it produces the same result on mouse and touch devices , but currently GrapesJS is not supported on IE/Edge . Since this should be a different issue , can i assume that producing the same result on touch and mouse as added touch support on that browsers ??

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHubhttps://github.com/artf/grapesjs/issues/241#issuecomment-377233350, or mute the threadhttps://github.com/notifications/unsubscribe-auth/AbWkx-yVaGbnvbaZat75iPVYQx_EIBycks5tjOAzgaJpZM4O-IHQ.

[saltyfoam]

Hi Unsigno,

I appreciate the work you've put into this! I tried out your solution with our existing code base on a Windows 10 laptop and I was able to drag components using touch but they would not drop. I tried on Edge, Chrome and Firefox with the same results.

I put together a package that reproduces our deployment so you could have a look. You can download it from http://uberfine.com/Test/GrapesJS3.zip and place it where your Web server can serve it, then load the Designer.htm into your Web browser.

At this point all I tried to do was drag the "Basic Header" component onto the top of the page. It works with the mouse but not with touch. The problem may be due to a difference between the JavaScript files I'm loading (such as DragDropTouch.js and touchpolyfill.min.js) and the ones you're using. This deployment was implemented by another engineer and he's no longer on the team so unfortunately I don't know much about how he integrated this.

Dominique

[Unsigno]

Looking on it. Can you try the Grapes example ( a empty page with Grapes ) ? just to be sure if it is working for you , so i can focus on conflicts .

[saltyfoam]

I just tried the index.html in the grapesjs root folder and I am able to drop the “Block” element on Chrome using touch! So it would appear that the “drop” problem has something to do with my deployment, and not the environment.

Now just to add another wrinkle into all this, when I just retested with Edge I am able to not only drag but also drop using Edge! I guess I didn’t try it too much because I expected it to fail. I am not able to drop on Chrome or Firefox however.

So to recap, in my deployment (i.e. the package I provided) I can drag and drop on Edge using touch, and I can only drag on Chrome and Firefox using touch (no drop on these). Using index.html I am able to drag and drop in all three browsers.

Dominique

---

From: Unsigno notifications@github.com Sent: Wednesday, April 4, 2018 1:22:49 PM To: artf/grapesjs Cc: saltyfoam; Mention Subject: Re: [artf/grapesjs] Add touch support (BS $1000) (#241)

Looking on it. Can you try the Grapes example ( a empty page with Grapes ) ? just to be sure if it is working for you , so i can focus on conflicts .

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHubhttps://github.com/artf/grapesjs/issues/241#issuecomment-378732755, or mute the threadhttps://github.com/notifications/unsubscribe-auth/AbWkx2Xr4Eybu87gMHR3Ogpn48y0c-s-ks5tlSuZgaJpZM4O-IHQ.

[Unsigno]

Ok , i have some ideas to test, lets me some time to test and find a generic solution .

You could update DragDropTouch on your development too , because many changes are there and just the first "instance" apply .

[saltyfoam]

I updated my DragDropTouch.js from https://github.com/Bernardo-Castilho/dragdroptouch and it seems to behave the same way.

Dominique

---

From: Unsigno notifications@github.com Sent: Thursday, April 5, 2018 10:34:57 AM To: artf/grapesjs Cc: saltyfoam; Mention Subject: Re: [artf/grapesjs] Add touch support (BS $1000) (#241)

Ok , i have some ideas to test, lets me some time to test and find a generic solution .

You could update DragDropTouch on your development too , because many changes are there and just the first "instance" apply .

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHubhttps://github.com/artf/grapesjs/issues/241#issuecomment-379016329, or mute the threadhttps://github.com/notifications/unsubscribe-auth/AbWkx6jwEcqFrK8_54o_ySD045CNp7_eks5tllXBgaJpZM4O-IHQ.

[Unsigno]

This is the older version , you can use https://github.com/Unsigno/grapesjs/blob/dev/src/utils/DragDropTouch.js . I don't created a new fork for that , but will do it .

[saltyfoam]

This version does resolve the drop issue on those two browsers!

I did some additional testing on other devices and I see one issue remaining. It affects the Chrome browser (iOS, Windows, Chromebook, Android, and iOS), the iOS native browser and Firefox (Windows) but strangely enough not Edge.

The issue is that when you start dragging an item from the right side panel (such as the Basic Header) the icon that is being dragged stops moving as soon as the green line appears in the main panel indicating where the object will be dropped. I can move my finger around and as a result move the green line around indicating that the drag operation is succeeding, but the icon does not follow my finger while it is over the white areas of the screen but is instead “stuck” to the right panel or the panel at the top (i.e. the black background areas). I’m not sure whether the problem is that the showing of the green line locks the icon in place or that the icon can’t escape the black areas of the screen (probably the latter?).

Dominique

---

From: Unsigno notifications@github.com Sent: Thursday, April 5, 2018 10:50:28 AM To: artf/grapesjs Cc: saltyfoam; Mention Subject: Re: [artf/grapesjs] Add touch support (BS $1000) (#241)

This is the older version , you can use https://github.com/Unsigno/grapesjs/blob/dev/src/utils/DragDropTouch.js . I don't created a new fork for that , but will do it .

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHubhttps://github.com/artf/grapesjs/issues/241#issuecomment-379020989, or mute the threadhttps://github.com/notifications/unsubscribe-auth/AbWkx3O_l3G9kMEGWQxHEBmanfZDONUDks5tlllkgaJpZM4O-IHQ.

[Unsigno]

I'm glad to hear that. I know what you mean , its the latter one , it can't enter the iframe . I was looking on the colorpicker, and will look it tomorrow . I hope push this fixes tomorrow .

[Unsigno]

Hi , I updated my Grapes repo , it adds :

• Touch events polyfill for IE/Edge
• Fix ColorPicker drag on touch devices
• Fix DragDropTouch draggable thumbnail

(*) note, it updates DragDropTouch , so if you are using it on your main project you require overwrite that file

Currently all looks working for me , wait for your new :)

[saltyfoam]

Hi,

I updated GrapesJS and DragDropTouch and things are working much better now. I did notice issues with the color picker. On IE it often doesn’t stay open and instead closes immediately. It also seems to result in the color #NaNNaNNaN in the edit box instead of the correct values for what I chose. I only did a bit of testing but this looks promising. 😊 I’ll do some more testing later today and if all is well I’ll look at how I release the funds to you.

On a different topic, I have a question for you. This work that you’ve been doing is in order to incorporate the GrapesJS into a product I’m building (see it at http://socialattache.com). GrapesJS is a small feature of the product - basically a Web Page / Landing Page / Email editor, but we have much more going on that will require a front end expert in JavaScript and CSS. Other libraries we use include jsPlumb and ckeditor and we’re also researching how to incorporate video and webinars. Would you be interested in joining the team, initially to complete the GrapesJS work and in future to work on other features? Our team members work at their own pace, as they have time.

Dominique

---

From: Unsigno notifications@github.com Sent: Sunday, April 8, 2018 1:02:31 PM To: artf/grapesjs Cc: saltyfoam; Mention Subject: Re: [artf/grapesjs] Add touch support (BS $1000) (#241)

Hi , I updated my Grapes repo , it adds :

• Touch events polyfill for IE/Edge

• Fix ColorPicker drag on touch devices

• Fix DragDropTouch draggable thumbnail

• note, it updates DragDropTouch , so if you are using it on your main project you require overwrite that file

Currently all looks working for me , wait for your new :)

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHubhttps://github.com/artf/grapesjs/issues/241#issuecomment-379578170, or mute the threadhttps://github.com/notifications/unsubscribe-auth/AbWkx29HExJR2cPjgTMcdgwjTFsyT8wPks5tmmzXgaJpZM4O-IHQ.

[Unsigno]

Checking the issue.

Sounds good, you can send me a contat to gddg1989@gmail.com.

[Unsigno]

Ok , sorry for the timming , but i was losed with a error produced on IE emulator . After solving that, all works , and i can't reproduce your errors .

Are you testing on emulator or a real device ?? Is a single Grapes who produces that ??

In a single instance the colorpicker works for me , and i can't run your enviroment since i need some more files , and fixes .

You found some other bugs related to the issue , or i can send the PR to claim funds ??

[saltyfoam]

I will take another look later today and get back to you.

Dominique

On Apr 11, 2018, at 6:01 PM, Unsigno notifications@github.com<mailto:notifications@github.com> wrote:

Ok , sorry for the timming , but i was losed with a error produced on IE emulator . After solving that, all works , and i can't reproduce your errors .

Are you testing on emulator or a real device ?? Is a single Grapes who produces that ??

In a single instance the colorpicker works for me , and i can't run your enviroment since i need some more files , and fixes .

You found some other bugs related to the issue , or i can send the PR to claim funds ??

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHubhttps://github.com/artf/grapesjs/issues/241#issuecomment-380641530, or mute the threadhttps://github.com/notifications/unsubscribe-auth/AbWkx8100SRWtBKf8Caoqc2IRLWjSv9bks5tnqeEgaJpZM4O-IHQ.

[saltyfoam]

I am using real devices, no emulators.

What other files and fixes do you need to run the package I sent you? The only bug I am aware of is the wrong case being used for WebSite.css at the bottom of Designer.htm (sorry about that).

I don’t know what you mean by « single Grapes ».

Dominique

On Apr 11, 2018, at 6:01 PM, Unsigno notifications@github.com<mailto:notifications@github.com> wrote:

Ok , sorry for the timming , but i was losed with a error produced on IE emulator . After solving that, all works , and i can't reproduce your errors .

Are you testing on emulator or a real device ?? Is a single Grapes who produces that ??

In a single instance the colorpicker works for me , and i can't run your enviroment since i need some more files , and fixes .

You found some other bugs related to the issue , or i can send the PR to claim funds ??

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHubhttps://github.com/artf/grapesjs/issues/241#issuecomment-380641530, or mute the threadhttps://github.com/notifications/unsubscribe-auth/AbWkx8100SRWtBKf8Caoqc2IRLWjSv9bks5tnqeEgaJpZM4O-IHQ.

[saltyfoam]

Hi,

I put the package I sent you online and added your improvements so we can all test using the same code base. It’s available at:

http://uberfine.com/Test/GrapesJS3/Designer.htm

I recorded a video reproducing the two issues I see with the color picker:

http://uberfine.com/Test/GrapesJS3/ColorPickerBugs.wmv

When the color picker is working correctly I’ll release the funds to you as the rest seems to be working OK.

Dominique

---

From: Unsigno notifications@github.com Sent: Wednesday, April 11, 2018 6:01:56 PM To: artf/grapesjs Cc: saltyfoam; Mention Subject: Re: [artf/grapesjs] Add touch support (BS $1000) (#241)

Ok , sorry for the timming , but i was losed with a error produced on IE emulator . After solving that, all works , and i can't reproduce your errors .

Are you testing on emulator or a real device ?? Is a single Grapes who produces that ??

In a single instance the colorpicker works for me , and i can't run your enviroment since i need some more files , and fixes .

You found some other bugs related to the issue , or i can send the PR to claim funds ??

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHubhttps://github.com/artf/grapesjs/issues/241#issuecomment-380641530, or mute the threadhttps://github.com/notifications/unsubscribe-auth/AbWkx8100SRWtBKf8Caoqc2IRLWjSv9bks5tnqeEgaJpZM4O-IHQ.

[Unsigno]

Ok, thanks for your support, it helps . With "single Grapes" I mean using a empty page with Grapes, just to avoid unrealated problems .

I tested your enviroment, but i was having issue with IE ( on local and online version using mouse or emulated touch ), throwing many 'Object don't accept propertie or method "From"' , related to Array class . So it don't runs properly Grapes.

Any way i found the posible problem , since i don't build the project and you are using the minified version of Grapes ( so you enviroment haven't the latest changes ). Now the problem is that i have an issue passing the tests on build . Will solve it and talk you later .

On you enviroment you could include 'touchpolyfill' before 'DragDropTouch', i am not sure if the order will cause some problem , but just in case .

PD: sorry for my english level

[Unsigno]

Oki , finally i fixed the tests and build the project . This should fix your issues . Try adding 'touchpolyfill' before 'DragDropTouch' too .

Wait for your news .

[saltyfoam]

If you like, feel free to send me a ZIP file of exactly what you want me to put up on my site and I’ll do that so we can both be testing with the same sources.

---

From: Unsigno notifications@github.com Sent: Friday, April 13, 2018 2:01:12 AM To: artf/grapesjs Cc: saltyfoam; Mention Subject: Re: [artf/grapesjs] Add touch support (BS $1000) (#241)

Ok, thanks for your support, it helps . With "single Grapes" I mean using a empty page with Grapes, just to avoid unrealated problems .

I tested your enviroment, but i was having issue with IE ( on local and online version using mouse or emulated touch ), throwing many 'Object don't accept propertie or method "From"' , related to Array class . So it don't runs properly Grapes.

Any way i found the posible problem , since i don't build the project and you are using the minified version of Grapes ( so you enviroment haven't the latest changes ). Now the problem is that i have an issue passing the tests on build . Will solve it and talk you later .

On you enviroment you could include 'touchpolyfill' before 'DragDropTouch', i am not sure if the order will cause some problem , but just in case .

PD: sorry for my english level

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHubhttps://github.com/artf/grapesjs/issues/241#issuecomment-381072332, or mute the threadhttps://github.com/notifications/unsubscribe-auth/AbWkxyCewe1rdif0ufZOKgIQ1l2BkeRDks5toGlXgaJpZM4O-IHQ.

[Unsigno]

Now you can update grapes.min.js and DragDropTouch.js files on your project from my repo, and in your Designer.html switch lines 17-18 just in case. I can't run your project on IE but if it works for you currently , this should solve the colorpicker issue.

If you have issues running your project on IE, you can clone my repo and run the example page.

Just tell me if you have some issue to run it or need some more help .

[saltyfoam]

The color picker seems to work better now. The only remaining issue there is that it doesn’t stay open on IE but we can deal with that separately. I’ll go look at releasing the funds for you.

With respect to the project I’m working on, and getting you involved, the first task would be to complete the GrapesJS integration. Have a look at the “Layout Editor Design” document I included in the ZIP file. It explains my vision for how the GrapesJS would be used by my customers (who don’t know HTML) in order to build a Web page from some provided components (similar to how ClickFunnels and other builders work). There is also a “Layout Editor Changes” document I provided which was put together by the last engineer who worked on this for me. And finally there is a video I put together to give you a bit more info:

http://uberfine.com/Test/GrapesJS3/GrapesJSTask2.wmv

Let me know how much you think it’ll cost to complete this effort and then we can discuss whether it should be broken down into weekly tasks or how we should break it down and mark progress.

Dominique

---

From: Unsigno notifications@github.com Sent: Friday, April 13, 2018 8:37:55 AM To: artf/grapesjs Cc: saltyfoam; Mention Subject: Re: [artf/grapesjs] Add touch support (BS $1000) (#241)

Now you can update grapes.min.jshttps://github.com/Unsigno/grapesjs/blob/dev/dist/grapes.min.js and DragDropTouch.jshttps://github.com/Unsigno/grapesjs/blob/dev/src/utils/DragDropTouch.js files on your project from my repo, and in your Designer.html switch lines 17-18 just in case. I can't run your project on IE but if it works for you currently , this should solve the colorpicker issue.

If you have issues running your project on IE, you can clone my repo and run the example page.

Just tell me if you have some issue to run it or need some more help .

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHubhttps://github.com/artf/grapesjs/issues/241#issuecomment-381174972, or mute the threadhttps://github.com/notifications/unsubscribe-auth/AbWkx_s5MYxMmhVA_0Zj7YOpIxOwjvnDks5toMZTgaJpZM4O-IHQ.

[Unsigno]

I have responded to your email and we can follow the thread there.

About the video, I need to review the operation of the selector and the restrictions of the blocks to propose a solution, I know that there is already part of what you need defined, but I have to see how it works and its scalability. Will check your docs too and talk you later.

[tluyben]

Was this fix integrated in the main branch? The branch that @saltyfoam published on his site seems to work fine, but the main branch does not (I can drag & drop elements, but I cannot change their content on touch devices).

Thanks!

[artf]

I didn't get further updates on the PR https://github.com/artf/grapesjs/pull/1042

[patricio-zenfolio]

Hi guys, not sure about the current status of this. We are having issues on iOS touch devices:

• We included the plugin grapesjs-touch and drag&drop works fine.
• What is not working is the blocks selection and scrolling on the canvas section (nothing happens on touch)
• Kind of solved the first issue with the code hints from mikereem in https://github.com/artf/grapesjs-touch/issues/1

But the scrolling is not working. Is working for anyone else?

On Android tablets all touch functionality seems to be working fine.