UNPKG

8.07 kBTypeScriptView Raw
1/**
2 * @class Autolinker.HtmlTag
3 * @extends Object
4 *
5 * Represents an HTML tag, which can be used to easily build/modify HTML tags programmatically.
6 *
7 * Autolinker uses this abstraction to create HTML tags, and then write them out as strings. You may also use
8 * this class in your code, especially within a {@link Autolinker#replaceFn replaceFn}.
9 *
10 * ## Examples
11 *
12 * Example instantiation:
13 *
14 * var tag = new Autolinker.HtmlTag( {
15 * tagName : 'a',
16 * attrs : { 'href': 'http://google.com', 'class': 'external-link' },
17 * innerHtml : 'Google'
18 * } );
19 *
20 * tag.toAnchorString(); // <a href="http://google.com" class="external-link">Google</a>
21 *
22 * // Individual accessor methods
23 * tag.getTagName(); // 'a'
24 * tag.getAttr( 'href' ); // 'http://google.com'
25 * tag.hasClass( 'external-link' ); // true
26 *
27 *
28 * Using mutator methods (which may be used in combination with instantiation config properties):
29 *
30 * var tag = new Autolinker.HtmlTag();
31 * tag.setTagName( 'a' );
32 * tag.setAttr( 'href', 'http://google.com' );
33 * tag.addClass( 'external-link' );
34 * tag.setInnerHtml( 'Google' );
35 *
36 * tag.getTagName(); // 'a'
37 * tag.getAttr( 'href' ); // 'http://google.com'
38 * tag.hasClass( 'external-link' ); // true
39 *
40 * tag.toAnchorString(); // <a href="http://google.com" class="external-link">Google</a>
41 *
42 *
43 * ## Example use within a {@link Autolinker#replaceFn replaceFn}
44 *
45 * var html = Autolinker.link( "Test google.com", {
46 * replaceFn : function( match ) {
47 * var tag = match.buildTag(); // returns an {@link Autolinker.HtmlTag} instance, configured with the Match's href and anchor text
48 * tag.setAttr( 'rel', 'nofollow' );
49 *
50 * return tag;
51 * }
52 * } );
53 *
54 * // generated html:
55 * // Test <a href="http://google.com" target="_blank" rel="nofollow">google.com</a>
56 *
57 *
58 * ## Example use with a new tag for the replacement
59 *
60 * var html = Autolinker.link( "Test google.com", {
61 * replaceFn : function( match ) {
62 * var tag = new Autolinker.HtmlTag( {
63 * tagName : 'button',
64 * attrs : { 'title': 'Load URL: ' + match.getAnchorHref() },
65 * innerHtml : 'Load URL: ' + match.getAnchorText()
66 * } );
67 *
68 * return tag;
69 * }
70 * } );
71 *
72 * // generated html:
73 * // Test <button title="Load URL: http://google.com">Load URL: google.com</button>
74 */
75export declare class HtmlTag {
76 /**
77 * @cfg {String} tagName
78 *
79 * The tag name. Ex: 'a', 'button', etc.
80 *
81 * Not required at instantiation time, but should be set using {@link #setTagName} before {@link #toAnchorString}
82 * is executed.
83 */
84 private tagName;
85 /**
86 * @cfg {Object.<String, String>} attrs
87 *
88 * An key/value Object (map) of attributes to create the tag with. The keys are the attribute names, and the
89 * values are the attribute values.
90 */
91 private attrs;
92 /**
93 * @cfg {String} innerHTML
94 *
95 * The inner HTML for the tag.
96 */
97 private innerHTML;
98 /**
99 * @protected
100 * @property {RegExp} whitespaceRegex
101 *
102 * Regular expression used to match whitespace in a string of CSS classes.
103 */
104 protected whitespaceRegex: RegExp;
105 /**
106 * @method constructor
107 * @param {Object} [cfg] The configuration properties for this class, in an Object (map)
108 */
109 constructor(cfg?: HtmlTagCfg);
110 /**
111 * Sets the tag name that will be used to generate the tag with.
112 *
113 * @param {String} tagName
114 * @return {Autolinker.HtmlTag} This HtmlTag instance, so that method calls may be chained.
115 */
116 setTagName(tagName: string): this;
117 /**
118 * Retrieves the tag name.
119 *
120 * @return {String}
121 */
122 getTagName(): string;
123 /**
124 * Sets an attribute on the HtmlTag.
125 *
126 * @param {String} attrName The attribute name to set.
127 * @param {String} attrValue The attribute value to set.
128 * @return {Autolinker.HtmlTag} This HtmlTag instance, so that method calls may be chained.
129 */
130 setAttr(attrName: string, attrValue: string): this;
131 /**
132 * Retrieves an attribute from the HtmlTag. If the attribute does not exist, returns `undefined`.
133 *
134 * @param {String} attrName The attribute name to retrieve.
135 * @return {String} The attribute's value, or `undefined` if it does not exist on the HtmlTag.
136 */
137 getAttr(attrName: string): string;
138 /**
139 * Sets one or more attributes on the HtmlTag.
140 *
141 * @param {Object.<String, String>} attrs A key/value Object (map) of the attributes to set.
142 * @return {Autolinker.HtmlTag} This HtmlTag instance, so that method calls may be chained.
143 */
144 setAttrs(attrs: {
145 [attr: string]: string;
146 }): this;
147 /**
148 * Retrieves the attributes Object (map) for the HtmlTag.
149 *
150 * @return {Object.<String, String>} A key/value object of the attributes for the HtmlTag.
151 */
152 getAttrs(): {
153 [key: string]: string;
154 };
155 /**
156 * Sets the provided `cssClass`, overwriting any current CSS classes on the HtmlTag.
157 *
158 * @param {String} cssClass One or more space-separated CSS classes to set (overwrite).
159 * @return {Autolinker.HtmlTag} This HtmlTag instance, so that method calls may be chained.
160 */
161 setClass(cssClass: string): this;
162 /**
163 * Convenience method to add one or more CSS classes to the HtmlTag. Will not add duplicate CSS classes.
164 *
165 * @param {String} cssClass One or more space-separated CSS classes to add.
166 * @return {Autolinker.HtmlTag} This HtmlTag instance, so that method calls may be chained.
167 */
168 addClass(cssClass: string): this;
169 /**
170 * Convenience method to remove one or more CSS classes from the HtmlTag.
171 *
172 * @param {String} cssClass One or more space-separated CSS classes to remove.
173 * @return {Autolinker.HtmlTag} This HtmlTag instance, so that method calls may be chained.
174 */
175 removeClass(cssClass: string): this;
176 /**
177 * Convenience method to retrieve the CSS class(es) for the HtmlTag, which will each be separated by spaces when
178 * there are multiple.
179 *
180 * @return {String}
181 */
182 getClass(): string;
183 /**
184 * Convenience method to check if the tag has a CSS class or not.
185 *
186 * @param {String} cssClass The CSS class to check for.
187 * @return {Boolean} `true` if the HtmlTag has the CSS class, `false` otherwise.
188 */
189 hasClass(cssClass: string): boolean;
190 /**
191 * Sets the inner HTML for the tag.
192 *
193 * @param {String} html The inner HTML to set.
194 * @return {Autolinker.HtmlTag} This HtmlTag instance, so that method calls may be chained.
195 */
196 setInnerHTML(html: string): this;
197 /**
198 * Backwards compatibility method name.
199 *
200 * @param {String} html The inner HTML to set.
201 * @return {Autolinker.HtmlTag} This HtmlTag instance, so that method calls may be chained.
202 */
203 setInnerHtml(html: string): this;
204 /**
205 * Retrieves the inner HTML for the tag.
206 *
207 * @return {String}
208 */
209 getInnerHTML(): string;
210 /**
211 * Backward compatibility method name.
212 *
213 * @return {String}
214 */
215 getInnerHtml(): string;
216 /**
217 * Override of superclass method used to generate the HTML string for the tag.
218 *
219 * @return {String}
220 */
221 toAnchorString(): string;
222 /**
223 * Support method for {@link #toAnchorString}, returns the string space-separated key="value" pairs, used to populate
224 * the stringified HtmlTag.
225 *
226 * @protected
227 * @return {String} Example return: `attr1="value1" attr2="value2"`
228 */
229 protected buildAttrsStr(): string;
230}
231export interface HtmlTagCfg {
232 tagName?: string;
233 attrs?: {
234 [key: string]: string;
235 };
236 innerHtml?: string;
237 innerHTML?: string;
238}