Hey guys, I stopped working on making the text selectable a while back, but now I'm back on it, and adding that CSS declaration didn't make the text selectable. Is there something else enyo-related that could be preventing the text from being selectable? The HtmlContent kind is in a ScrollerKind, which is in a VFlexBox inside of a SlidingPane.
Check the styles in Chrome's web inspector view. It may be that your style needs to be marked !important to override a more specific selector in the enyo CSS files.
What you suggested still won't make text selectable.
However, I did try something that made me think this is a JS problem with Enyo. If I do:
enyo = null;
in the webkit inspector console, the text becomes selectable. However, it still requires
-webkit-user-select: text;
That made me think that something in enyo must be preventing the drag event from bubbling up to make the text actually selectable. So I did a search in enyo-build.js looking for preventDefault, and found the method that breaks it. Doing:
enyo.gesture.mousedown = null;
Finally makes the text selectable, without just nuking all of enyo. It does disable anything enyo that did have to do with mousedown, so I just rewrite the functions in my JS so that anything that did preventDefault didn't happen anymore, something like:
enyo.gesture.mousedown = enyo.bind(enyo.gesture, function(a) {...});
enyo.gesture.sendCustomMousedown = function(a) {...}); //didn't use "this" in enyo, so didn't need binding
with a.preventDefault removed.
This allows anything that had to do with mousedown to still work, and doesn't break anything else as far as I could tell. Is there a reason why preventDefault was put in there?
Oh well, I really only need it in Chrome, so I have a check in the code to see if I'm in Chrome and then modify enyo.gesture.mousedown and enyo.gesture.sendCustomMousedown. I don't need those for scrolling in Chrome.
Comments
-webkit-user-select:text;
* {-webkit-user-select: text !important;}
And no luck.
The app.css for the API docs provide this class definition that works to make the documentation text selectable.
However, I did try something that made me think this is a JS problem with Enyo. If I do:
enyo = null;
in the webkit inspector console, the text becomes selectable. However, it still requires
-webkit-user-select: text;
That made me think that something in enyo must be preventing the drag event from bubbling up to make the text actually selectable. So I did a search in enyo-build.js looking for preventDefault, and found the method that breaks it. Doing:
enyo.gesture.mousedown = null;
Finally makes the text selectable, without just nuking all of enyo. It does disable anything enyo that did have to do with mousedown, so I just rewrite the functions in my JS so that anything that did preventDefault didn't happen anymore, something like: with a.preventDefault removed.
This allows anything that had to do with mousedown to still work, and doesn't break anything else as far as I could tell. Is there a reason why preventDefault was put in there?
Oh well, I really only need it in Chrome, so I have a check in the code to see if I'm in Chrome and then modify enyo.gesture.mousedown and enyo.gesture.sendCustomMousedown. I don't need those for scrolling in Chrome.
Thanks for the help!