Skip to content

Latest commit

 

History

History
122 lines (104 loc) · 5.73 KB

UISplitText.md

File metadata and controls

122 lines (104 loc) · 5.73 KB
Raw

UISplitText

Kind: global class
Npmpackage:
Properties

Name Type Description
arg.splitType TextSplitType | string STRING determing if the UISplitText should break a UITextField into individuals words or characters; defaults to TextSplitType.WORDS.
arg.allowSpaceOnBreaks boolean BOOLEAN determining if a line break should include a space following non-punctuational characters. For example: "word " rather than "word"; defaults to false.



arg.spaceBreakIncludes string STRING determining what specific characters should be included as part of any line breaks if arg.allowSpaceOnBreaks is set to true; defaults to a-z, A-Z, and 0-9 represented as '[a-z0-9].'
arg.splitWordSpacing number NUMBER by which to multiply the default empty space size used between each word; defaults to a multiple of 1, which is 100% of the default word spacing. Do not confuse this with letter-spacing, which is defined in the spacing property.
arg.splitLeading number NUMBER by which to multiply the default line space value used between each line; defaults to a multiple of 1, which is 100% of the default line spacing. Do not confuse this with line-spacing, which is defined in the leading property.
arg.debug boolean BOOLEAN for if you want a debug version featuring a background color and an unadulterated and un-split UITextField to compare your UISplitText instance to; defaults to false.

new UISplitText(arg)

This is a display object class, utilizing UISplitText and UIComponent. By extending UIComponent this has all of its native properties and methods. See UISplitText and UIComponent for more info.

Import from ad-ui 

import { UISplitText } from 'ad-ui'



It is a DOM UIComponent element that contains text and handles its styling, layout, and formatting in all the same ways as UITextField. The difference, however, is the it returns a container with each line, word, or character of text broken into individual UITextFields.

By default, a UISplitText will convert a UITextField into individual words or letters, and group them into UIComponents.

For Example:
setting the splitType to TextSplitType.WORDS will create a UIComponent per line and a UITextField per word.
setting the splitType to TextSplitType.CHARACTERS will create a UIComponent per line, a UIComponent per word, and a UITextField per character.

UISplitText returns a UIComponent, representing the main container of the lines, words, and possibly characters.
This container contains arrays:

// an array of every line of text; each line is a UIComponent
_mySplitText.lines;

// an array of every word of text. If arg.splitType === TextSplitType.CHARACTERS, these will be UIComponents, otherwise they are UITextFields
_mySplitText.words;

// an array of every character of text; each character is a [UITextField](#UITextField)
_mySplitText.characters;



Sample:

// creates a [UITextField](#UITextField) that breaks each character of the text value into its own [UITextField](#UITextField)
T.mySplitText = new UISplitText({
	target : View.main,
	id : 'my-textfield',
	css : {
		x : 50,
		y : 200,
		width : 300,
		height : 90
	},
	fontSize : 30,
	fontFamily : 'template_font',
	format : TextFormat.INLINE,
	alignText : Align.CENTER,
	bufferText : {
		top : 1,
		bottom : 1,
		left : 5,
		right : 5
	},
	leading : .8,
	spacing : 2,
	text : 'This is my awesome sentence!',
	splitType: TextSplitType.CHARACTERS
});

// tweens the main container for the lines, words, and characters
TweenLite.from ( View.main.mySplitText.lines[l], 1, {scale: 0 });

// tweens each LINE of text from an alpha of 0
for (let l = 0; l < View.main.mySplitText.lines.length; l++){
	TweenLite.from ( View.main.mySplitText.lines[l], 1, {alpha: 0 });
}

// tweens each WORD of text from a rotation of 180
for (let w = 0; w < View.main.mySplitText.words.length; w++){
	TweenLite.from ( View.main.mySplitText.words[w], 1, {rotation: 180 });
}

// tweens each CHARACTER of text from a scale of of 2
for (let c = 0; c < View.main.mySplitText.characters.length; c++){
	TweenLite.from ( View.main.mySplitText.characters[c], 1, {scale: 2 });
}
Param Type Description
arg arg The OBJECT containing all of your UITextField and UISplitText arguments

UISplitText.wordSpacing : number

READ-ONLY : NUMBER representing how much space exists between each word; affected by arg.splitWordSpacing on instantiation.

Kind: static property of UISplitText
Example

// get
console.log(myUISplitText.wordSpacing)

const _word1 = myUISplitText.words[0]
const _word2 = myUISplitText.words[1]
_word1.x = _word2.x + _word2.width + myUISplitText.wordSpacing