[jira] [Commented] (TRINIDAD-2399) support css client side rules in skinning framework

["Anand V Nath (JIRA)" <de...@myfaces.apache.org>]

    [ https://issues.apache.org/jira/browse/TRINIDAD-2399?page=com.atlassian.jira.plugin.system.issuetabpanels:comment-tabpanel&focusedCommentId=13700488#comment-13700488 ] 

Anand V Nath commented on TRINIDAD-2399:
----------------------------------------

The proposal is to add bottom up support for client side css rules. All rules which are not processed currently will be rendered out as 

@rule {
  selector {
     property: value;
     ...
  } 
}

Only exception is @page and @font-face which will be rendered as selector rules:

@rule { property: value; ... }

1. org.apache.myfaces.trinidadinternal.skin.SkinCSSDocumentHandler - To add logic to parse css rule store it locally and make it available for org.apache.myfaces.trinidadinternal.skin.SkinStyleSheetNode.

// holds the parsed value of client side css rules
// Eg: "@media foo1 {"
private String _clientRule;

// existing inner class
private static class CompleteSelectorNode {
  // modify this to contain _clientRule
}
  
// existing method
private List <SkinStyleSheetNode> _createSkinStyleSheetNodes(...)
{
  ...
  // pass the _clientRule for SkinStyleSheetNode creation
}

/**
 * parses the special client side rules which are to be rendered as selectors
 * and not rules
 * @param atRule - client side rule content
 * e.g. - @page:first { margin: 1in; }
 * e.g. - @font-face { font-family: MyHelvetica; font-weight: bold; }
 */
private void _parseClientSideSelector(String atRule) 
{
  // process the @page and @font-face client rules separately so that they are rendered as selectors
}

2. org.apache.myfaces.trinidadinternal.skin.SkinStyleSheetNode - To capture the client side css rules, like we do for @agent etc

// member variable to store client side css rules
private final String _clientRule;

// existing method
public boolean matches(...) {
  // Compare the client side css rules also for deciding matching SkinStyleSheetNodes
  // This ensures that same client side css rules are getting merged in skin hierarchy 
  // Also, makes the nested rules work.
}
  
// provide getter for client side css rules so that it can be accessed later.
public String getClientRule()
{
  return _clientRule;
}

3. org.apache.myfaces.trinidadinternal.style.xml.parse.StyleNode - add client side css rules support into this

private final String _clientRule;

public String getClientRule() {
  return _clientRule;
}

/**
 * util method to determine is a StyleNode has clientRule or not
 * @return true if clientRule exists
 */
public boolean hasClientRule()
{
  return _clientRule != null && !_clientRule.isEmpty();
}

/**
 * utility method to generate the cache id for a StyleNode.
 * cache id is used in StyleSheetDocument object while resolving StyleNodes.
 * cache id helps in distinguishing same selectors wrapped in different clientRules.
 *
 * @return cacheId - clientRule if exists + selector or name whichever exist.
 */
String getCacheId()
{
  // return the cache id as clientRule if exists + selector or name whichever exist.
}

4. org.apache.myfaces.trinidadinternal.style.xml.parse.StyleSheetDocument - change the resolution logic because there is a cache based on selector name, now the cache should also honor client side css rules as well.

// existing method
public Iterator<StyleNode> getStyles(StyleContext context) {
  // make sure the the iterator returned here has the resolved StyleNodes  containing same _clientRule .
}

// existing method
public Iterator<IconNode> getIcons(StyleContext context) {
  // make sure the the iterator returned here has the resolved StyleNodes within the IconNodes containing same _clientRule.
}


// existing inner class
private static class StyleEntry {
  // This class needs to be made clientRule aware so that it generates the StyleNode objects with the clientRule
}

5. org.apache.myfaces.trinidadinternal.style.util.CSSGenerationUtils - rendering of skin should take care of grouping org.apache.myfaces.trinidadinternal.style.xml.parse.StyleNode having same css rule and render it under one rule.

// existing method
public static void writeCSS(...) {
  // Any StyleNode having same property string is grouped together.
  // eg; a {color:red }, b {color:red}
  // will be grouped as [color:red, {a , b}]
  // this grouping now needs to be done after an extra check for client side css rules
  // eg; a {color:red }, b {color:red}, @media { c {color:red} }
  // should be grouped as [color:red, {a , b}], {"@media", [color:red, {c}]}
  // so that they are rendered separately
  // selectors containing same properties within the same clientRule needs to be rendered together
  // eg; @media only screen { myStyleA { color:red; } }, @media only screen { myStyleB { color:red; } }
  // should be rended as @media only screen { myStyleA, myStyleB { color: red; } }


  // when writing out StyleNodes check for client side css rules
  // render the client side css rules followed by the property string and 
  // close with an extra brace for the client side css rules 
}
                
> support css client side rules in skinning framework
> ---------------------------------------------------
>
>                 Key: TRINIDAD-2399
>                 URL: https://issues.apache.org/jira/browse/TRINIDAD-2399
>             Project: MyFaces Trinidad
>          Issue Type: New Feature
>          Components: Skinning
>    Affects Versions: 2.1.0-core
>            Reporter: Anand V Nath
>
> This ER is for introducing client side css rule support in skinning framework.
> Here's a list of known CSS at-rules:
>     @document - uses nested selectors that need to be resolved
>     @font-face - probably safe to blindly pass through
>     @keyframes - probably safe to blindly pass through
>     @media - uses nested selectors that need to be resolved
>     @page - probably safe to blindly pass through
>     @supports - uses nested selectors that need to be resolved
> These rules can be split into two based on its usage:
> @document, @keyframes, @media, @support uses following syntax:
> @rule {
>   selector 
>   { 
>     property : value; 
>     property : value; 
>     property : value; 
>   }
> }
> @font-face and @page uses following syntax:
> @rule {
>   property : value; 
>   property : value; 
>   property : value; 
> }

--
This message is automatically generated by JIRA.
If you think it was sent incorrectly, please contact your JIRA administrators
For more information on JIRA, see: http://www.atlassian.com/software/jira