'You're relying on undocumented functionality where Canvas makes jQueryUI widgets out of rich content that has the following class names: .dialogue, .draggable, .resizable, .sortable, .accordion, .tabs.
Canvas is moving away from jQueryUI for our own widgets and this behavior will go away. Rather than relying on the internals of Canvas's JavaScript, you should use your own custom JS file to do any such customizations.'
I am really just wondering if anybody knows what is going on because our style guide has not yet been updated to reflect this change. We are using accordions in many places and if Canvas deprecates this functionality is going to break a lot of our materials. Thus I want to get out in front of this as quickly as possible. It sounds like Canvas is going to be using their own widgets. Will we still have access to those? If so when can we expect the style guide to be updated?
Any insight into this matter would be appreciated.
also - once jQueryUI is deprecated, do you think it's possible to query the api for all instances of the enhanceable classes and programatically update them? Thoughts!?!
I am not a React expert, but I spent some time talking with Ryan in April and have a better sense than before. I left without a good solution, so I can't tell you what to do.
I'm not completely sure what you mean by ReactUI components, so I'll try a couple of different paths.
function MyComponent (){ return<IconAddLine /> }
Those React components are not HTML, they're JavaScript-ish, but they're not even real JavaScript, it's JSX, which needs processed with React. You can use React without JSX, but not JSX without React (don't take that as an absolute statement, take it as a strong recommendation).
If that's what you're talking about, their recommendation in the Style Guide is for creating your JSX file to compile into JavaScript for inclusion in your project. They are definitely not mean to be included in a regular HTML page. You may be able to add them as part of the packaging with your custom JavaScript at the account or subaccount level, but more likely for someone writing an LTI who wants to make it look like Canvas, not for someone adding enhanceable_content type stuff within a page.
If you're talking about adding data-reactid or other react attributes to items, then no. You should never add those directly to a page, but let React add them for you. React has a virtual DOM and it uses those to sync with the browser's DOM. You cannot add items to the browser's DOM and have React be aware of them. In fact, there was a case a couple of weeks ago where someone was customizing Canvas through JavaScript and when Canvas re-rendered the virtual DOM, it wiped out their changes (and they weren't even messing with the data-reactid part). I imagine this will happen more and more as Canvas moves more to ReactJS. On the other hand, if you add a data-reactid to your elements and it happens to duplicate one that is already there, I'm not sure what will happen, but Ryan warned me that we could break Canvas if we mess around with things in the wrong way.
It's that part that worries me the most about doing awesome things inside Canvas using React. Canvas doesn't expose their React to us and if we include our own, there's a good chance it would conflict with theirs. Yet Canvas has this really cool UI library that's accessible and all that, but they're not going to expose it to us from within Canvas and if we include it ourselves, we could break things. That's where I get the notion this would be better from an LTI perspective where your code runs totally separate from their code. But a lot of what I do is to modify the experience within the browser and add functionality there, but some of it depends on jQuery-UI, which is why I'm looking for a non-React way to replace things.
Yes, this can be done, but what are you going to change it to?
A better solution might be to leave the code as it is and add the custom JavaScript to look for enchanceable_content classes and then apply the accordion or tabs or other widget to it. That way you don't need to change the content of your pages at all.
The current system adds a class of enhanced to a page once it's been processed, so you can work on your solution while you're waiting for it get deprecated. You can go through and look for .enhanceable_content that is not inside a .enhanced element and apply the changes that you would make once the jquery-UI is deprecated.
Responding to myself -- one reason to change it is to suppress the warnings about it being deprecated. I didn't think of that until I was just now playing with how to load jQuery UI.
Even though jQueryUI and RequireJS are not the same thing, just a reminder that the shift from RequireJS to webpack goes live with this coming release.
I know this discussion has had a resolution for quite some time. I just thought it would be helpful to note there is still documentation out there that this is still possible somehow without any addition to one's custom JS file:
