Hi Harbs, if once typenames and classnames are set, if UIBase changes the way it manages className to use element.classList, things will be more easy and a matter of use add/remove/toggle methods in element.classList. right? if people changes className directly will be bad, unless he/she wants to override it completely (and if they want to do that since they needed, why not?)
2018-03-12 17:51 GMT+01:00 Harbs <harbs.li...@gmail.com>: > Right, but Carlos is using: element.classList.toggle("primary", value); > (and similar) > > That will be overwritten if someone sets myButton.className = “foo_class”; > (where myButton is some kind of UIBase) > > You cannot even do something like this: myButton.className = > myButton.className + “ foo_class”; because the properties such as > “primary” are not being included in the typeNames or classNames. > > Harbs > > > On Mar 12, 2018, at 6:42 PM, Alex Harui <aha...@adobe.com.INVALID> > wrote: > > > > Well, it isn't fair if someone writes to element.className, but we > control > > what happens when someone writes to UIBase.className. I just want it to > > be as simple as possible and PAYG. > > > > -Alex > > > > On 3/12/18, 9:21 AM, "Harbs" <harbs.li...@gmail.com <mailto: > harbs.li...@gmail.com>> wrote: > > > >> I’m pretty sure your solution will only work if the user doesn’t set a > >> className of their own. Setting className overwrites the entire > classList. > >> > >>> On Mar 12, 2018, at 5:45 PM, Carlos Rovira <carlosrov...@apache.org> > >>> wrote: > >>> > >>> Hi > >>> > >>> I made some simplification that works ok in Jewel: > >>> > >>> 1.- remove CSSClassList and use element.classList since is native and > >>> supported in all browsers we target, this simplifies code, and removes > >>> classes from core. > >>> 2.- I still need to use some additional code that can be simplified. > I'm > >>> doing: > >>> > >>> element.classList.toggle("primary", value); > >>> setClassName(computeFinalClassNames()); > >>> classList has its own toggle function that makes super easy to manage > >>> adds > >>> and removes, so no need to have a custom function in royale > >>> > >>> that uses: > >>> > >>> COMPILE::JS > >>> override protected function computeFinalClassNames():String > >>> { > >>> return super.computeFinalClassNames() + " " + element.classList; > >>> } > >>> > >>> I'd like to remove that and change the "setClassName" call to nothing, > >>> if > >>> we change UIBase to simple use classList > >>> > >>> My guess is that we can have "typenames" and "classNames" but once all > >>> set, > >>> all can be managed with classList to add/remove since this is native > and > >>> manages all itself > >>> > >>> thoughts? > >>> > >>> > >>> > >>> > >>> > >>> 2018-03-12 14:01 GMT+01:00 Carlos Rovira <carlosrov...@apache.org>: > >>> > >>>> Hi, > >>>> > >>>> long thread and very useful read here. Since Jewel is very similar to > >>>> MDL > >>>> in adding/removing classes I want to comment here some things: > >>>> > >>>> 1.- I just changed jewel typenames to the constructor and things works > >>>> ok, > >>>> I could remove the createElement override > >>>> 2.- I have into account the use of typenames as something inmutable > (as > >>>> part of definition of a component) and classNames as things that are > >>>> put by > >>>> developer, or change at runtime due to some user operation > >>>> > >>>> Then: > >>>> > >>>> 3.- Why not use classList [1] instead of create our own CSSClassList ? > >>>> is > >>>> well supported in the browsers we are targeting > >>>> > >>>> Something more "light" :) > >>>> > >>>> 4.- I know that order in html classes are not relevant, in the > >>>> execution. > >>>> And most of people here doesn't mind if typenames are before or after > >>>> classNames. So hope this doesn't make any problem to anyone here: > >>>> Can I change the code to put typeNames before classNames in > >>>> computeFinalClassNames? I think this not affects anyone since is a > >>>> small > >>>> change and helps me to get organized classnames and identify things. I > >>>> think is better to see in final html typeNames first then classNames > so > >>>> "inheritance" (to call it some way), could be easy detected by the eye > >>>> > >>>> Thanks > >>>> > >>>> Carlos > >>>> > >>>> > >>>> [1] > >>>> https://na01.safelinks.protection.outlook.com/?url= > https%3A%2F%2Fwww.w3s <https://na01.safelinks.protection.outlook.com/?url= > https%3A%2F%2Fwww.w3s> > >>>> chools.com <http://chools.com/>%2FJsref%2Fprop_element_classlist.asp& > data=02%7C01%7Caharui%40 > >>>> adobe.com <http://adobe.com/>%7C8ce390a012154f8f2a8a08d588354aa0% > 7Cfa7b1b5a7b34438794aed2c17 > >>>> 8decee1%7C0%7C0%7C636564684909764090&sdata= > OOh4TK5LKB75CGn6U4%2BeaVC%2Fi > >>>> V%2BHgGzDj8fqrBB%2BCcs%3D&reserved=0 > >>>> > >>>> > >>>> > >>>> > >>>> > >>>> > >>>> -- > >>>> Carlos Rovira > >>>> > >>>> https://na01.safelinks.protection.outlook.com/?url= > http%3A%2F%2Fabout.me <https://na01.safelinks.protection.outlook.com/?url= > http%3A%2F%2Fabout.me> > >>>> %2Fcarlosrovira&data=02%7C01%7Caharui%40adobe.com < > http://40adobe.com/>%7C8ce390a012154f8f2a8a > >>>> 08d588354aa0%7Cfa7b1b5a7b34438794aed2c178de > cee1%7C0%7C0%7C63656468490976 > >>>> 4090&sdata=HDNJQ8VZuNS5lhOBU2ZsRrGQAgG5qOxiIQJKkOaTZV4%3D&reserved=0 > >>>> > >>>> > >>> > >>> > >>> -- > >>> Carlos Rovira > >>> > >>> https://na01.safelinks.protection.outlook.com/?url= > http%3A%2F%2Fabout.me% <https://na01.safelinks. > protection.outlook.com/?url=http%3A%2F%2Fabout.me%> > >>> 2Fcarlosrovira&data=02%7C01%7Caharui%40adobe.com <http://40adobe.com/ > >%7C8ce390a012154f8f2a8a08 > >>> d588354aa0%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0% > 7C63656468490976409 > >>> 0&sdata=HDNJQ8VZuNS5lhOBU2ZsRrGQAgG5qOxiIQJKkOaTZV4%3D&reserved=0 > > -- Carlos Rovira http://about.me/carlosrovira