javascript/NativeScript
1
0
Fork 0
mirror of https://github.com/NativeScript/NativeScript.git synced 2025-08-16 11:42:04 +08:00
Code Issues Packages Projects Releases Wiki Activity

Letter spacing CSS support added

Browse Source
This commit is contained in:
Vladimir Enchev
2016-03-28 14:03:48 +03:00
parent 344aac9c41
commit 1c759649df
10 changed files with 158 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
apps/ui-tests-app/css/letter-spacing.xml Normal file
View File

@ -0,0 +1,59 @@
<Page>
<StackLayout>
<Label text="labelLabel" style="text-transform: uppercase; text-decoration: underline line-through;letter-spacing: 10;" />
<Label style="text-transform: uppercase; text-decoration: underline line-through;letter-spacing: 10;">
<Label.formattedText>
<FormattedString>
<FormattedString.spans>
<Span text="label" fontAttributes="Bold" foregroundColor="#0000ff" />
<Span text="Label" fontAttributes="Italic" foregroundColor="#00ff00" />
</FormattedString.spans>
</FormattedString>
</Label.formattedText>
</Label>
<Button text="buttonButton" style="text-transform: uppercase; text-decoration: underline line-through;letter-spacing: 10;" />
<android>
<Button style="text-transform: uppercase; text-decoration: underline line-through;letter-spacing: 10;">
<Button.formattedText>
<FormattedString>
<FormattedString.spans>
<Span text="button" fontAttributes="Bold" foregroundColor="#0000ff" />
<Span text="Button" fontAttributes="Italic" foregroundColor="#00ff00" />
</FormattedString.spans>
</FormattedString>
</Button.formattedText>
</Button>
</android>
<TextField text="textField" style="text-transform: uppercase; text-decoration: underline line-through;letter-spacing: 10;" />
<android>
<TextField style="text-transform: uppercase; text-decoration: underline line-through;letter-spacing: 10;">
<TextField.formattedText>
<FormattedString>
<FormattedString.spans>
<Span text="text" fontAttributes="Bold" foregroundColor="#0000ff" />
<Span text="Field" fontAttributes="Italic" foregroundColor="#00ff00" />
</FormattedString.spans>
</FormattedString>
</TextField.formattedText>
</TextField>
</android>
<TextView text="textView" style="text-transform: uppercase; text-decoration: underline line-through;letter-spacing: 10;" />
<android>
<TextView style="text-transform: uppercase; text-decoration: underline line-through;letter-spacing: 10;">
<TextView.formattedText>
<FormattedString>
<FormattedString.spans>
<Span text="text" fontAttributes="Bold" foregroundColor="#0000ff" />
<Span text="View" fontAttributes="Italic" foregroundColor="#00ff00" />
</FormattedString.spans>
</FormattedString>
</TextView.formattedText>
</TextView>
</android>
</StackLayout>
</Page>

8
ui/button/button.ios.ts
View File

@ -153,20 +153,20 @@ export class ButtonStyler implements style.Styler {
// text-decoration
private static setTextDecorationProperty(view: view.View, newValue: any) {
utils.ios.setTextDecorationAndTransform(view, newValue, view.style.textTransform);
utils.ios.setTextDecorationAndTransform(view, newValue, view.style.textTransform, view.style.letterSpacing);
}
private static resetTextDecorationProperty(view: view.View, nativeValue: any) {
utils.ios.setTextDecorationAndTransform(view, enums.TextDecoration.none, view.style.textTransform);
utils.ios.setTextDecorationAndTransform(view, enums.TextDecoration.none, view.style.textTransform, view.style.letterSpacing);
}
// text-transform
private static setTextTransformProperty(view: view.View, newValue: any) {
utils.ios.setTextDecorationAndTransform(view, view.style.textDecoration, newValue);
utils.ios.setTextDecorationAndTransform(view, view.style.textDecoration, newValue, view.style.letterSpacing);
}
private static resetTextTransformProperty(view: view.View, nativeValue: any) {
utils.ios.setTextDecorationAndTransform(view, view.style.textDecoration, enums.TextTransform.none);
utils.ios.setTextDecorationAndTransform(view, view.style.textDecoration, enums.TextTransform.none, view.style.letterSpacing);
}
// white-space

6
ui/styling/converters.ts
View File

@ -11,6 +11,12 @@ export function fontSizeConverter(value: string): number {
return result;
}
export function letterSpacingConverter(value: string): number {
// TODO: parse different unit types
var result: number = parseFloat(value);
return result;
}
export function textAlignConverter(value: string): string {
switch (value) {
case enums.TextAlignment.left:

2
ui/styling/style.d.ts vendored
View File

@ -72,6 +72,7 @@ declare module "ui/styling/style" {
public visibility: string;
public opacity: number;
public whiteSpace: string;
public letterSpacing: number;
constructor(parentView: View);
@ -112,6 +113,7 @@ declare module "ui/styling/style" {
export var textDecorationProperty: styleProperty.Property;
export var textTransformProperty: styleProperty.Property;
export var whiteSpaceProperty: styleProperty.Property;
export var letterSpacingProperty: styleProperty.Property;
// Helper property holding most layout related properties available in CSS.
// When layout related properties are set in CSS we chache them and send them to the native view in a single call.

15
ui/styling/style.ts
View File

@ -417,6 +417,11 @@ function isOpacityValid(value: string): boolean {
return !isNaN(parsedValue) && 0 <= parsedValue && parsedValue <= 1;
}
function isLetterSpacingValid(value: string): boolean {
var parsedValue: number = parseFloat(value);
return !isNaN(parsedValue);
}
function isFontWeightValid(value: string): boolean {
return value === enums.FontWeight.normal || value === enums.FontWeight.bold;
}
@ -729,6 +734,13 @@ export class Style extends DependencyObservable implements styling.Style {
this._setValue(whiteSpaceProperty, value);
}
get letterSpacing(): number {
return this._getValue(letterSpacingProperty);
}
set letterSpacing(value: number) {
this._setValue(letterSpacingProperty, value);
}
public _updateTextDecoration() {
if (this._getValue(textDecorationProperty) !== enums.TextDecoration.none) {
this._applyProperty(textDecorationProperty, this._getValue(textDecorationProperty));
@ -1004,6 +1016,9 @@ export var textTransformProperty = new styleProperty.Property("textTransform", "
export var whiteSpaceProperty = new styleProperty.Property("whiteSpace", "white-space",
new PropertyMetadata(undefined, AffectsLayout, undefined, isWhiteSpaceValid), converters.whiteSpaceConverter);
export var letterSpacingProperty = new styleProperty.Property("letterSpacing", "letter-spacing",
new PropertyMetadata(Number.NaN, AffectsLayout, undefined, isLetterSpacingValid), converters.letterSpacingConverter);
// Helper property holding most layout related properties available in CSS.
// When layout related properties are set in CSS we chache them and send them to the native view in a single call.
export var nativeLayoutParamsProperty = new styleProperty.Property("nativeLayoutParams", "nativeLayoutParams",

1
ui/styling/styling.d.ts vendored
View File

@ -201,6 +201,7 @@
textDecoration: string;
textTransform: string;
whiteSpace: string;
letterSpacing: number;
//@private
public _beginUpdate();

27
ui/text-base/text-base-styler.android.ts
View File

@ -108,6 +108,23 @@ export class TextBaseStyler implements style.Styler {
utils.ad.setWhiteSpace(view._nativeView, enums.WhiteSpace.normal);
}
// letter-spacing
private static getLetterSpacingProperty(view: view.View) : any {
return view.android.getLetterSpacing ? view.android.getLetterSpacing() : 0;
}
private static setLetterSpacingProperty(view: view.View, newValue: any) {
if(view.android.setLetterSpacing) {
view.android.setLetterSpacing(utils.layout.toDeviceIndependentPixels(newValue));
}
}
private static resetLetterSpacingProperty(view: view.View, nativeValue: any) {
if(view.android.setLetterSpacing) {
view.android.setLetterSpacing(nativeValue);
}
}
public static registerHandlers() {
style.registerHandler(style.colorProperty, new style.StylePropertyChangedHandler(
TextBaseStyler.setColorProperty,
@ -136,6 +153,11 @@ export class TextBaseStyler implements style.Styler {
TextBaseStyler.setWhiteSpaceProperty,
TextBaseStyler.resetWhiteSpaceProperty), "TextBase");
style.registerHandler(style.letterSpacingProperty, new style.StylePropertyChangedHandler(
TextBaseStyler.setLetterSpacingProperty,
TextBaseStyler.resetLetterSpacingProperty,
TextBaseStyler.getLetterSpacingProperty), "TextBase");
// Register the same stylers for Button.
// It also derives from TextView but is not under TextBase in our View hierarchy.
style.registerHandler(style.colorProperty, new style.StylePropertyChangedHandler(
@ -164,5 +186,10 @@ export class TextBaseStyler implements style.Styler {
style.registerHandler(style.whiteSpaceProperty, new style.StylePropertyChangedHandler(
TextBaseStyler.setWhiteSpaceProperty,
TextBaseStyler.resetWhiteSpaceProperty), "Button");
style.registerHandler(style.letterSpacingProperty, new style.StylePropertyChangedHandler(
TextBaseStyler.setLetterSpacingProperty,
TextBaseStyler.resetLetterSpacingProperty,
TextBaseStyler.getLetterSpacingProperty), "Button");
}
}

21
ui/text-base/text-base-styler.ios.ts
View File

@ -38,20 +38,20 @@ export class TextBaseStyler implements style.Styler {
// text-decoration
private static setTextDecorationProperty(view: view.View, newValue: any) {
utils.ios.setTextDecorationAndTransform(view, newValue, view.style.textTransform);
utils.ios.setTextDecorationAndTransform(view, newValue, view.style.textTransform, view.style.letterSpacing);
}
private static resetTextDecorationProperty(view: view.View, nativeValue: any) {
utils.ios.setTextDecorationAndTransform(view, enums.TextDecoration.none, view.style.textTransform);
utils.ios.setTextDecorationAndTransform(view, enums.TextDecoration.none, view.style.textTransform, view.style.letterSpacing);
}
// text-transform
private static setTextTransformProperty(view: view.View, newValue: any) {
utils.ios.setTextDecorationAndTransform(view, view.style.textDecoration, newValue);
utils.ios.setTextDecorationAndTransform(view, view.style.textDecoration, newValue, view.style.letterSpacing);
}
private static resetTextTransformProperty(view: view.View, nativeValue: any) {
utils.ios.setTextDecorationAndTransform(view, view.style.textDecoration, enums.TextTransform.none);
utils.ios.setTextDecorationAndTransform(view, view.style.textDecoration, enums.TextTransform.none, view.style.letterSpacing);
}
// white-space
@ -63,6 +63,15 @@ export class TextBaseStyler implements style.Styler {
utils.ios.setWhiteSpace(view._nativeView, enums.WhiteSpace.normal);
}
// letter-spacing
private static setLetterSpacingProperty(view: view.View, newValue: any) {
utils.ios.setTextDecorationAndTransform(view, view.style.textDecoration, enums.TextTransform.none, newValue);
}
private static resetLetterSpacingProperty(view: view.View, nativeValue: any) {
utils.ios.setTextDecorationAndTransform(view, view.style.textDecoration, enums.TextTransform.none, 0);
}
// color
private static setColorProperty(view: view.View, newValue: any) {
var ios = <utils.ios.TextUIView>view._nativeView;
@ -106,5 +115,9 @@ export class TextBaseStyler implements style.Styler {
style.registerHandler(style.whiteSpaceProperty, new style.StylePropertyChangedHandler(
TextBaseStyler.setWhiteSpaceProperty,
TextBaseStyler.resetWhiteSpaceProperty), "TextBase");
style.registerHandler(style.letterSpacingProperty, new style.StylePropertyChangedHandler(
TextBaseStyler.setLetterSpacingProperty,
TextBaseStyler.resetLetterSpacingProperty), "TextBase");
}
}

2
utils/utils.d.ts vendored
View File

@ -145,7 +145,7 @@
* Module with ios specific utilities.
*/
module ios {
export function setTextDecorationAndTransform(view: any, decoration: string, transform: string);
export function setTextDecorationAndTransform(view: any, decoration: string, transform: string, letterSpacing : number);
export function setWhiteSpace(view, value: string, parentView?: any);
export function setTextAlignment(view, value: string);

29
utils/utils.ios.ts
View File

@ -1,4 +1,5 @@
import dts = require("utils/utils");
import types = require("utils/types");
import common = require("./utils-common");
import {Color} from "color";
import enums = require("ui/enums");
@ -49,7 +50,9 @@ export module ios {
}
}
export function setTextDecorationAndTransform(v: any, decoration: string, transform: string) {
export function setTextDecorationAndTransform(v: any, decoration: string, transform: string, letterSpacing: number) {
let hasLetterSpacing = types.isNumber(letterSpacing) && !isNaN(letterSpacing);
if (v.formattedText) {
if (v.style.textDecoration.indexOf(enums.TextDecoration.none) === -1) {
@ -69,6 +72,22 @@ export module ios {
let span = v.formattedText.spans.getItem(i);
span.text = getTransformedText(v, span.text, transform);
}
if (hasLetterSpacing) {
let attrText;
if(v._nativeView instanceof UIButton){
attrText = (<UIButton>v._nativeView).attributedTitleForState(UIControlState.UIControlStateNormal);
} else {
attrText = v._nativeView.attributedText;
}
attrText.addAttributeValueRange(NSKernAttributeName, letterSpacing, { location: 0, length: v._nativeView.attributedText.length });
if(v._nativeView instanceof UIButton){
(<UIButton>v._nativeView).setAttributedTitleForState(attrText, UIControlState.UIControlStateNormal);
}
}
} else {
let source = v.text;
let attributes = new Array();
@ -76,7 +95,7 @@ export module ios {
var decorationValues = (decoration + "").split(" ");
if (decorationValues.indexOf(enums.TextDecoration.none) === -1) {
if (decorationValues.indexOf(enums.TextDecoration.none) === -1 || hasLetterSpacing) {
let dict = new Map<string, number>();
if (decorationValues.indexOf(enums.TextDecoration.underline) !== -1) {
@ -87,6 +106,10 @@ export module ios {
dict.set(NSStrikethroughStyleAttributeName, NSUnderlineStyle.NSUnderlineStyleSingle);
}
if (hasLetterSpacing) {
dict.set(NSKernAttributeName, letterSpacing);
}
attributes.push({ attrs: dict, range: NSValue.valueWithRange(range) });
}
@ -238,7 +261,7 @@ export function openUrl(location: string): boolean {
class UIDocumentInteractionControllerDelegateImpl extends NSObject implements UIDocumentInteractionControllerDelegate {
public static ObjCProtocols = [UIDocumentInteractionControllerDelegate];
public getViewController() : UIViewController {
public getViewController(): UIViewController {
var frame = require("ui/frame");
return frame.topmost().currentPage.ios;
}