mirror of
https://github.com/NativeScript/NativeScript.git
synced 2025-08-17 04:33:20 +08:00
Add support for CSS font-weight + sample app for testing fonts
Resolves #1862
This commit is contained in:
Rossen Hristov
@ -1,62 +1,178 @@
|
||||
import { View } from "ui/core/view";
|
||||
import { EventData } from "data/observable";
|
||||
import { LayoutBase } from "ui/layouts/layout-base";
|
||||
import { Page, NavigatedData } from "ui/page";
|
||||
import { StackLayout } from "ui/layouts/stack-layout";
|
||||
import { ScrollView } from "ui/scroll-view";
|
||||
import { Label } from "ui/label";
|
||||
import { TextField } from "ui/text-field";
|
||||
import { TextView } from "ui/text-view";
|
||||
import { Button } from "ui/button";
|
||||
import { FontStyle, FontWeight } from "ui/enums";
|
||||
import typeUtils = require("utils/types");
|
||||
import { Color } from "color";
|
||||
import * as font from "ui/styling/font";
|
||||
|
||||
const fontFamilies = ["system", "sans-serif", "serif", "monospace"];
|
||||
const fontWeights = [FontWeight.normal, FontWeight.bold];
|
||||
const fontStyles = [FontStyle.normal, FontStyle.italic];
|
||||
const genericFontFamilies = [
|
||||
"system",
|
||||
"sans-serif",
|
||||
"serif",
|
||||
"monospace",
|
||||
];
|
||||
var fontFamilies = [];
|
||||
var fontNames = [];
|
||||
const embeddedFontNames = [
|
||||
"Entypo",
|
||||
"EvilIcons",
|
||||
"FontAwesome",
|
||||
"Ionicons",
|
||||
"Material-Design-Iconic-Font",
|
||||
"MaterialIcons",
|
||||
];
|
||||
const fontStyles = [
|
||||
FontStyle.normal,
|
||||
FontStyle.italic
|
||||
];
|
||||
const fontWeights = [
|
||||
FontWeight.thin,
|
||||
FontWeight.extraLight,
|
||||
FontWeight.light,
|
||||
FontWeight.normal,
|
||||
FontWeight.medium,
|
||||
FontWeight.semiBold,
|
||||
FontWeight.bold,
|
||||
FontWeight.extraBold,
|
||||
FontWeight.black,
|
||||
];
|
||||
|
||||
export function onStackLayoutLoaded(args: EventData) {
|
||||
var layout = <LayoutBase>args.object;
|
||||
_generateViews(() => { return new Label(); }, layout);
|
||||
_generateViews(() => { return new TextField(); }, layout);
|
||||
_generateViews(() => { return new TextView(); }, layout);
|
||||
_generateViews(() => { return new Button(); }, layout);
|
||||
var green = new Color("Green");
|
||||
var red = new Color("Red");
|
||||
var white = new Color("White");
|
||||
var black = new Color("Black");
|
||||
|
||||
var compareIgnoreCase = function (a, b) {
|
||||
return a.toLowerCase().localeCompare(b.toLowerCase());
|
||||
};
|
||||
|
||||
if (font.ios) {
|
||||
for (var f = 0; f < embeddedFontNames.length; f++) {
|
||||
font.ios.registerFont(`fonts/${embeddedFontNames[f]}.ttf`);
|
||||
}
|
||||
|
||||
var font_internal = <any>font;
|
||||
font_internal.ensureSystemFontSets();
|
||||
|
||||
(<Set<string>>font_internal.systemFontFamilies).forEach(f => fontFamilies.push(f));
|
||||
fontFamilies = fontFamilies.sort(compareIgnoreCase);
|
||||
|
||||
(<Set<string>>font_internal.systemFonts).forEach(f => fontNames.push(f));
|
||||
fontNames = fontNames.sort(compareIgnoreCase);
|
||||
}
|
||||
|
||||
function _generateViews(factory: () => View, layout: LayoutBase) {
|
||||
for (var f = 0; f < fontFamilies.length; f++) {
|
||||
for (var w = 0; w < fontWeights.length; w++) {
|
||||
for (var s = 0; s < fontStyles.length; s++) {
|
||||
var view = factory();
|
||||
var css = `font-family: ${fontFamilies[f]}; font-weight: ${fontWeights[w]}; font-style: ${fontStyles[s]};`;
|
||||
(<any>view).text = `${typeUtils.getClass(view)} ${css}`;
|
||||
(<any>view).textWrap = true;
|
||||
view.style.textAlignment = "left";
|
||||
view.setInlineStyle(css);
|
||||
view.margin = "1 0";
|
||||
view.borderWidth = 1;
|
||||
view.height = 75;
|
||||
view.color = new Color("Black");
|
||||
view.backgroundColor = new Color("LightGray");
|
||||
view.on("loaded", args => {
|
||||
(<any>view).text += _getFontInfo(view);
|
||||
});
|
||||
export function onPageLoaded(args: NavigatedData) {
|
||||
var page = <Page>args.object;
|
||||
var scrollView = new ScrollView();
|
||||
var stackLayout = new StackLayout();
|
||||
generateLabels(stackLayout);
|
||||
scrollView.content = stackLayout;
|
||||
page.content = scrollView;
|
||||
}
|
||||
|
||||
function generateLabels(layout: StackLayout) {
|
||||
layout.addChild(prepareTitle("Generic Font Families", 24));
|
||||
for (var f = 0; f < genericFontFamilies.length; f++) {
|
||||
layout.addChild(prepareTitle(genericFontFamilies[f], 20));
|
||||
for (var s = 0; s < fontStyles.length; s++) {
|
||||
for (var w = 0; w < fontWeights.length; w++) {
|
||||
var view = prepareLabel(genericFontFamilies[f], fontStyles[s], fontWeights[w]);
|
||||
layout.addChild(view);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function _getFontInfo(view: View): string {
|
||||
if (view.ios) {
|
||||
var uiFont: UIFont;
|
||||
if (view.ios instanceof UIButton) {
|
||||
uiFont = view.ios.titleLabel.font;
|
||||
if (fontFamilies.length > 0)
|
||||
{
|
||||
layout.addChild(prepareTitle("Font Families", 24));
|
||||
}
|
||||
for (var f = 0; f < fontFamilies.length; f++) {
|
||||
layout.addChild(prepareTitle(fontFamilies[f], 20));
|
||||
for (var s = 0; s < fontStyles.length; s++) {
|
||||
for (var w = 0; w < fontWeights.length; w++) {
|
||||
var view = prepareLabel(fontFamilies[f], fontStyles[s], fontWeights[w]);
|
||||
layout.addChild(view);
|
||||
}
|
||||
}
|
||||
else if (view.ios.font) {
|
||||
uiFont = view.ios.font;
|
||||
}
|
||||
|
||||
return ` ${uiFont.fontName} ${uiFont.pointSize}pt.`;
|
||||
}
|
||||
|
||||
return "";
|
||||
if (fontNames.length > 0) {
|
||||
layout.addChild(prepareTitle("Phone Fonts", 24));
|
||||
}
|
||||
for (var f = 0; f < fontNames.length; f++) {
|
||||
var view = prepareLabel(fontNames[f], "normal", "normal");
|
||||
layout.addChild(view);
|
||||
}
|
||||
|
||||
if (embeddedFontNames.length > 0) {
|
||||
layout.addChild(prepareTitle("Embedded Fonts", 24));
|
||||
}
|
||||
for (var f = 0; f < embeddedFontNames.length; f++) {
|
||||
var view = prepareLabel(embeddedFontNames[f], "normal", "normal");
|
||||
layout.addChild(view);
|
||||
}
|
||||
}
|
||||
|
||||
function prepareTitle(text: string, fontSize: number) {
|
||||
var title = new Label();
|
||||
title.text = text;
|
||||
title.height = 100;
|
||||
title.backgroundColor = black;
|
||||
title.color = white;
|
||||
title.fontSize = fontSize;
|
||||
title.style.fontStyle = "italic";
|
||||
title.borderWidth = 1;
|
||||
title.borderColor = white;
|
||||
title.textAlignment = "center";
|
||||
return title;
|
||||
}
|
||||
|
||||
function prepareLabel(fontFamily: string, fontStyle: string, fontWeight: string): View {
|
||||
var label = new Label();
|
||||
label["font-family"] = fontFamily;
|
||||
var fontFamilyCss = `font-family: ${fontFamily}; `;
|
||||
var fontStyleCss = fontStyle !== FontStyle.normal ? `font-style: ${fontStyle}; ` : "";
|
||||
var fontWeightCss = fontWeight !== FontWeight.normal ? `font-weight: ${fontWeight}; ` : "";
|
||||
var css = `${fontFamilyCss}${fontStyleCss}${fontWeightCss}`;
|
||||
label.text = `${typeUtils.getClass(label) } {${css}};`;
|
||||
label.textWrap = true;
|
||||
label.style.textAlignment = "left";
|
||||
label.borderWidth = 1;
|
||||
label.borderColor = black;
|
||||
label.style.padding = "2";
|
||||
label.setInlineStyle(css);
|
||||
label.on("loaded", args => {
|
||||
var sender = <Label>args.object;
|
||||
if (sender.ios) {
|
||||
var uiFont = _getUIFont(label);
|
||||
sender.text += `\niOS Font: ${uiFont.fontName};`;
|
||||
if (genericFontFamilies.indexOf(fontFamily) !== -1) {
|
||||
return;
|
||||
}
|
||||
if (uiFont.fontName.replace(" ", "").indexOf((<string>sender["font-family"]).replace(" ", "")) !== -1) {
|
||||
sender.color = green;
|
||||
}
|
||||
else {
|
||||
sender.color = red;
|
||||
}
|
||||
}
|
||||
});
|
||||
if (fontFamily === "FontAwesome") {
|
||||
label.text += "\uF17B\uF10B";
|
||||
}
|
||||
return label;
|
||||
}
|
||||
|
||||
function _getUIFont(view: any): UIFont {
|
||||
if (view.ios) {
|
||||
if (view.ios instanceof UIButton) {
|
||||
return view.ios.titleLabel.font;
|
||||
}
|
||||
else if (view.ios.font) {
|
||||
return view.ios.font;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,5 +1,3 @@
|
||||
<Page xmlns="http://schemas.nativescript.org/tns.xsd" >
|
||||
<ScrollView>
|
||||
<StackLayout loaded="onStackLayoutLoaded"/>
|
||||
</ScrollView>
|
||||
<Page xmlns="http://schemas.nativescript.org/tns.xsd"
|
||||
loaded="onPageLoaded">
|
||||
</Page>
|
||||
Reference in New Issue
Block a user