private async Task ProcessParameters()
{
IStyled styled = Id == null ? StyledService : StyledService.WithId(Id);
string classname = null;
if (ComposeAttributes == null)
{
string content = RenderAsString();
content = ApplyTheme(content);
if (IsKeyframes)
{
classname = styled.Keyframes(content);
}
else if (Classname != null && MediaQuery == MediaQueries.None && _previousClassname == null)
{
//html elements
styled.Css(ApplyPseudoClass(Classname), content);
}
else if (MediaQuery != MediaQueries.None && ClassnameChanged.HasDelegate)
{
//If ClassnameChanged has a delegate then @bind-Classname was used and this is a "new" style
//Otherwise Classname was used and this an existing style which will be handled in OnParametersSet
content = WrapWithMediaQuery(content);
classname = styled.Css(content);
}
else if (Classname != null && MediaQuery != MediaQueries.None && !ClassnameChanged.HasDelegate && _previousClassname == null)
{
//Media query support for classes where an existing Classname already exists
content = WrapWithMediaQuery(ApplyPseudoClass(Classname), content);
styled.Css(GetMediaQuery(), content);
}
else if (Classname == null && PseudoClass == PseudoClasses.None && MediaQuery != MediaQueries.None && _previousClassname == null)
{
//Media queries for html elements
styled.Css(GetMediaQuery(), content);
}
else if (Classname != null && PseudoClass != PseudoClasses.None && MediaQuery == MediaQueries.None && _previousClassname == null)
{
content = WrapWithMediaQuery(ApplyPseudoClass(Classname), content);
styled.Css(content);
}
else
{
classname = styled.Css(content);
/*if (_previousClassname == null)
* {
* classname = styled.Css(content);
* }*/
}
await NotifyChanged(classname);
}
else
{
if (ClassnameChanged.HasDelegate)
{
StringBuilder sb = new StringBuilder();
IList <string> labels = new List <string>();
IList <string> composeClasses = GetComposeClasses();
foreach (string cls in composeClasses)
{
string selector = ComposeAttributes[cls].ToString();
IList <IRule> rules = StyleSheet.GetRules(Id, selector);
if (rules != null)
{
foreach (IRule rule in rules)
{
if (rule.Selector != selector)
{
string pseudo = rule.Selector.Replace("." + selector, "");
sb.Append('&').Append(pseudo).Append('{');
}
foreach (Declaration decleration in rule.Declarations)
{
sb.Append(decleration.ToString());
}
if (rule.Label != null)
{
labels.Add(rule.Label);
}
if (rule.Selector != selector)
{
sb.Append('}');
}
}
}
}
if (sb.Length != 0)
{
string css = sb.ToString();
if (labels.Count != 0)
{
string labelStr = string.Join("-", labels);
css = $"label:{labelStr};{css}";
}
classname = styled.Css(css);
await NotifyChanged(classname);
}
}
}
}
private async Task InitThemeCss()
{
string themeName = Theme ?? DefaultSettings.DefaultTheme;
string uri = themeName.ToLower().StartsWith("http") ? themeName : "_content/BlazorPrettyCode/" + themeName + ".json";
string strJson = await GetFromCacheOrNetwork(uri);
Themes.Theme theme = JsonSerializer.Deserialize <Themes.Theme>(strJson);
_showLineNumbers = ShowLineNumbers ?? DefaultSettings.ShowLineNumbers;
_styled.AddGoogleFonts(GetFonts(theme));
StringBuilder sb = new StringBuilder();
sb.Append("overflow-y: auto;");
sb.Append("margin-bottom: 1em;");
IDictionary <string, string> settings = GetThemeValuesDictionary(theme);
if (settings.ContainsKey("background-color"))
{
sb.Append("background-color: ").Append(settings["background-color"]).Append(';');
}
_baseDiv = _styled.Css(sb.ToString());
_themePreClass = _styled.Css(GetThemeValues(theme));
_themeTagSymbolsClass = _styled.Css(GetThemeValues(theme, "Tag symbols"));
_themeTagNameClass = _styled.Css(GetThemeValues(theme, "Tag name"));
_themeAttributeNameClass = _styled.Css(GetThemeValues(theme, "Attribute name"));
_themeAttributeValueClass = _styled.Css(GetThemeValues(theme, "Attribute value"));
_themeQuotedStringClass = _styled.Css(GetThemeValues(theme, "String"));
_themeRazorKeywordClass = _styled.Css(GetThemeValues(theme, "Razor Keyword"));
_themeTextClass = _styled.Css(GetThemeValues(theme, "Text"));
_themeCssProperty = _styled.Css(GetThemeValues(theme, "CSS Propery"));
_themeCssClass = _styled.Css(GetThemeValues(theme, "CSS Class"));
_highlightLines = GetLineNumbers(HighlightLines);
if (_highlightLines.Count > 0)
{
_themeRowHighlight = _styled.Css(GetThemeValues(theme, "Row Highlight"));
IDictionary <string, string> dictionary = GetThemeValuesDictionary(theme, "Row Highlight");
string color = dictionary.ContainsKey("background-color") ? dictionary["background-color"] : "rgba(0, 0, 0, 0.9)";
string border = $"border-left: 0.5rem solid {color};";
_themeRowHighlightBorder = _styled.Css(border);
}
}
public void ApplyTypography(ITypographyOptions options)
{
Styles styles = new Styles();
VerticalRhythm vr = new VerticalRhythm(new VerticalRhythmOptions(options));
VerticalRhythm = vr;
BaseLine baseLine = vr.EstablishBaseline();
string rhythm1 = vr.Rhythm(1);
//Not sure if html section is correct see:
//https://github.com/KyleAMathews/typography.js/blob/master/packages/typography/src/utils/createStyles.js#L55-L61
string bodyFontFamily = string.Join(",", options.BodyFontFamily.Select(f => WrapFontFamily(f)));
string headerFontFamily = string.Join(",", options.HeaderFontFamily.Select(f => WrapFontFamily(f)));
styles.Add("html", $@"
font-size: {baseLine.FontSize};
font-family: {bodyFontFamily};
line-height: {baseLine.LineHeight}em;
box-sizing: border-box;
overflow-y: scroll;
");
// box-sizing reset.
styles.Add(new List <string>
{
"*",
"*:before",
"*:after"
}, @"
box-sizing: inherit;
");
// Base body styles.
styles.Add("body", $@"
color: {options.BodyColor};
font-family: {bodyFontFamily};
font-weight: {options.BodyWeight};
word-wrap: break-word;
font-kerning: normal;
-moz-font-feature-settings: ""kern"", ""liga"", ""clig"", ""calt"";
-ms-font-feature-settings: ""kern"", ""liga"", ""clig"", ""calt"";
-webkit-font-feature-settings: ""kern"", ""liga"", ""clig"", ""calt"";
font-feature-settings: ""kern"", ""liga"", ""clig"", ""calt"";
");
// Make images responsive.
styles.Add("img", "max-width: 100%;");
// All block elements get one rhythm of bottom margin by default
// or whatever is passed in as option.
string blockMarginBottom = "";
if (float.TryParse(options.BlockMarginBottom, out float result))
{
blockMarginBottom = vr.Rhythm(result);
}
else if (!string.IsNullOrWhiteSpace(options.BlockMarginBottom))
{
blockMarginBottom = options.BlockMarginBottom;
}
else
{
blockMarginBottom = rhythm1;
}
// Reset margin/padding to 0.
styles.Add(new List <string>
{
"h1",
"h2",
"h3",
"h4",
"h5",
"h6",
"hgroup",
"ul",
"ol",
"dl",
"dd",
"p",
"figure",
"pre",
"table",
"fieldset",
"blockquote",
"form",
"noscript",
"iframe",
"img",
"hr",
"address"
}, $@"
margin-left: 0;
margin-right: 0;
margin-top: 0;
padding-bottom: 0;
padding-left: 0;
padding-right: 0;
padding-top: 0;
margin-bottom: {blockMarginBottom};
");
// Basic blockquote styles
styles.Add("blockquote", $@"
margin-right: {rhythm1};
margin-bottom: {blockMarginBottom};
margin-left: {rhythm1};
");
// b, strong.
styles.Add(new List <string> {
"b",
"strong",
"dt",
"th"
}, $@"
font-weight: {options.BoldWeight};
");
// hr.
styles.Add("hr", $@"
background: {vr.Gray(80)};
border: none;
height: 1px;
margin-bottom: calc({blockMarginBottom} - 1px);
");
// ol, ul.
styles.Add(new List <string>
{
"ol",
"ul"
}, $@"
list-style-position: outside;
list-style-image: none;
margin-left: {rhythm1};
");
// li.
styles.Add("li", $@"
margin-bottom: calc({blockMarginBottom} / 2);
");
// Remove default padding on list items.
styles.Add(new List <string>
{
"ol li",
"ul li"
}, @"
padding-left: 0;
");
// children ol, ul.
styles.Add(new List <string>
{
"li > ol",
"li > ul"
}, $@"
margin-left: {rhythm1};
margin-bottom: calc({blockMarginBottom} / 2);
margin-top: calc({blockMarginBottom} / 2);
");
// Remove margin-bottom on the last-child of a few block elements
// The worst offender of this seems to be markdown => html compilers
// as they put paragraphs within LIs amoung other oddities.
styles.Add(new List <string> {
"blockquote *:last-child",
"li *:last-child",
"p *:last-child"
}, @"
margin-bottom: 0;
");
// Ensure li > p is 1/2 margin — this is another markdown => compiler oddity.
styles.Add("li > p", $@"
margin-bottom: calc({blockMarginBottom} / 2);
");
// Make generally smaller elements, smaller.
BaseLine smaller = vr.AdjustFontSizeTo("85%");
styles.Add(new List <string> {
"code",
"kbd",
"pre",
"samp"
}, $@"
{smaller}
");
// Abbr, Acronym.
styles.Add(new List <string> {
"abbr",
"acronym"
}, $@"
border-bottom: 1px dotted {vr.Gray(50)};
cursor: help;
");
styles.Add("abbr[title]", $@"
border-bottom: 1px dotted {vr.Gray(50)};
cursor: help;
text-decoration: none;
");
// Table styles.
BaseLine tableBaseLine = vr.AdjustFontSizeTo(options.BaseFontSize, null, null);
styles.Add("table", $@"
{tableBaseLine}
border-collapse: collapse;
width: 100%;
");
styles.Add("thead", @"
text-align: left;
");
string rhythmTwoThirds = vr.Rhythm(2 / 3f);
string rhythmHalf = vr.Rhythm(1 / 2f);
styles.Add(new List <string>
{
"td",
"th"
}, $@"
text-align: left;
border-bottom: 1px solid {vr.Gray(88)};
font-feature-settings: ""tnum"";
-moz-font-feature-settings: ""tnum"";
-ms-font-feature-settings: ""tnum"";
-webkit-font-feature-settings: ""tnum"";
padding-left: {rhythmTwoThirds};
padding-right:{rhythmTwoThirds};
padding-top: {rhythmHalf};
padding-bottom: calc({rhythmHalf} - 1px);
");
styles.Add("th:first-child,td:first-child", @"
padding-left: 0;
");
styles.Add("th:last-child,td:last-child", @"
padding-right: 0;
");
// Create styles for headers.
styles.Add(new List <string>
{
"h1",
"h2",
"h3",
"h4",
"h5",
"h6"
}, $@"
color: {options.HeaderColor};
font-family: {headerFontFamily};
font-weight: {options.HeaderWeight};
text-rendering: optimizeLegibility;
");
// Set header sizes.
BaseLine h1 = vr.Scale(5 / 5f);
BaseLine h2 = vr.Scale(3 / 5f);
BaseLine h3 = vr.Scale(2 / 5f);
BaseLine h4 = vr.Scale(0 / 5f);
BaseLine h5 = vr.Scale(-1 / 5f);
BaseLine h6 = vr.Scale(-1.5f / 5f);
styles.Add("h1", $@"
{h1}
");
styles.Add("h2", $@"
{h2}
");
styles.Add("h3", $@"
{h3}
");
styles.Add("h4", $@"
{h4}
");
styles.Add("h5", $@"
{h5}
");
styles.Add("h6", $@"
{h6}
");
// TODO add support for Breakpoints here. (Missing in Typography.js)
// Call plugins if any.
if (options.Plugins != null)
{
foreach (IPlugin plugin in options.Plugins)
{
plugin.Run(styles, options, vr);
}
}
// Call OverrideStyles function on options (if set).
options.OverrideStyles?.Invoke(styles, vr, options);
// Call overrideThemeStyles function on options (if set).
options.OverrideThemeStyles?.Invoke(styles, vr, options);
//Write styles
//First clear old styles
_styled.ClearStyles();
// Set google fonts
if (options.GoogleFonts != null)
{
List <BlazorStyled.GoogleFont> list = options.GoogleFonts.Select(font => new BlazorStyled.GoogleFont {
Name = font.Name, Styles = font.Styles
}).ToList();
_styled.AddGoogleFonts(list);
}
if (options.IncludeNormalize.HasValue && options.IncludeNormalize.Value)
{
_styled.Css(_mixins.Normalize() + styles.ToString());
}
else
{
_styled.Css(styles.ToString());
}
}
private async Task ProcessParameters()
{
IStyled styled = Id == null ? StyledService : Priority.HasValue ? StyledService.WithId(Id, Priority.Value) : StyledService.WithId(Id);
string classname = null;
string content = ChildContent.RenderAsSimpleString();
int _currentHash = CalculateHash(content);
if (content != null && content.Length > 0 && (_currentHash != _previousHash || _currentHash == _previousHash && ComposeAttributes != null))
{
if (IsKeyframes)
{
classname = styled.Keyframes(content);
}
else if (Classname != null && MediaQuery == MediaQueries.None && _previousClassname == null)
{
//html elements
styled.Css(ApplyPseudoClass(Classname), content);
}
else if (MediaQuery != MediaQueries.None && ClassnameChanged.HasDelegate)
{
//If ClassnameChanged has a delegate then @bind-Classname was used and this is a "new" style
//Otherwise Classname was used and this an existing style which will be handled below
content = WrapWithMediaQuery("&{" + content + "}");
classname = styled.Css(content);
}
else if (Classname != null && MediaQuery != MediaQueries.None && !ClassnameChanged.HasDelegate && _previousClassname == null)
{
//Media query support for classes where an existing Classname already exists
content = WrapClass(ApplyPseudoClass(Classname), content);
styled.Css(WrapWithMediaQuery(content));
}
else if (Classname == null && PseudoClass == PseudoClasses.None && MediaQuery != MediaQueries.None && _previousClassname == null)
{
//Media queries for html elements
styled.Css(GetMediaQuery(), content);
}
else if (Classname != null && PseudoClass != PseudoClasses.None && MediaQuery == MediaQueries.None && _previousClassname == null)
{
content = WrapClass(ApplyPseudoClass(Classname), content);
styled.Css(content);
}
else
{
if (PseudoClass == PseudoClasses.None && MediaQuery == MediaQueries.None)
{
classname = styled.Css(content);
}
}
if (ComposeAttributes == null || !ClassnameChanged.HasDelegate)
{
await NotifyChanged(classname);
}
}
if (ComposeAttributes != null && ClassnameChanged.HasDelegate)
{
StringBuilder sb = new StringBuilder();
if (classname != null)
{
sb.Append(classname).Append(" ");
}
IList <string> composeClasses = GetComposeClasses();
foreach (string cls in composeClasses)
{
string selector = ComposeAttributes[cls].ToString();
sb.Append(selector).Append(" ");
}
if (sb.Length != 0)
{
classname = sb.ToString().Trim();
await NotifyChanged(classname);
}
}
if (GlobalStyle != null & classname != null && _currentHash != _previousHash)
{
_previousHash = _currentHash; // This needs to be done here even though it is also two lines down. Do not remove!
StyledService.SetGlobalStyle(GlobalStyle, classname);
}
_previousHash = _currentHash;
}