UNPKG

7.84 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 * @method constructor
100 * @param {Object} [cfg] The configuration properties for this class, in an Object (map)
101 */
102 constructor(cfg?: HtmlTagCfg);
103 /**
104 * Sets the tag name that will be used to generate the tag with.
105 *
106 * @param {String} tagName
107 * @return {Autolinker.HtmlTag} This HtmlTag instance, so that method calls may be chained.
108 */
109 setTagName(tagName: string): this;
110 /**
111 * Retrieves the tag name.
112 *
113 * @return {String}
114 */
115 getTagName(): string;
116 /**
117 * Sets an attribute on the HtmlTag.
118 *
119 * @param {String} attrName The attribute name to set.
120 * @param {String} attrValue The attribute value to set.
121 * @return {Autolinker.HtmlTag} This HtmlTag instance, so that method calls may be chained.
122 */
123 setAttr(attrName: string, attrValue: string): this;
124 /**
125 * Retrieves an attribute from the HtmlTag. If the attribute does not exist, returns `undefined`.
126 *
127 * @param {String} attrName The attribute name to retrieve.
128 * @return {String} The attribute's value, or `undefined` if it does not exist on the HtmlTag.
129 */
130 getAttr(attrName: string): string;
131 /**
132 * Sets one or more attributes on the HtmlTag.
133 *
134 * @param {Object.<String, String>} attrs A key/value Object (map) of the attributes to set.
135 * @return {Autolinker.HtmlTag} This HtmlTag instance, so that method calls may be chained.
136 */
137 setAttrs(attrs: {
138 [attr: string]: string;
139 }): this;
140 /**
141 * Retrieves the attributes Object (map) for the HtmlTag.
142 *
143 * @return {Object.<String, String>} A key/value object of the attributes for the HtmlTag.
144 */
145 getAttrs(): {
146 [key: string]: string;
147 };
148 /**
149 * Sets the provided `cssClass`, overwriting any current CSS classes on the HtmlTag.
150 *
151 * @param {String} cssClass One or more space-separated CSS classes to set (overwrite).
152 * @return {Autolinker.HtmlTag} This HtmlTag instance, so that method calls may be chained.
153 */
154 setClass(cssClass: string): this;
155 /**
156 * Convenience method to add one or more CSS classes to the HtmlTag. Will not add duplicate CSS classes.
157 *
158 * @param {String} cssClass One or more space-separated CSS classes to add.
159 * @return {Autolinker.HtmlTag} This HtmlTag instance, so that method calls may be chained.
160 */
161 addClass(cssClass: string): this;
162 /**
163 * Convenience method to remove one or more CSS classes from the HtmlTag.
164 *
165 * @param {String} cssClass One or more space-separated CSS classes to remove.
166 * @return {Autolinker.HtmlTag} This HtmlTag instance, so that method calls may be chained.
167 */
168 removeClass(cssClass: string): this;
169 /**
170 * Convenience method to retrieve the CSS class(es) for the HtmlTag, which will each be separated by spaces when
171 * there are multiple.
172 *
173 * @return {String}
174 */
175 getClass(): string;
176 /**
177 * Convenience method to check if the tag has a CSS class or not.
178 *
179 * @param {String} cssClass The CSS class to check for.
180 * @return {Boolean} `true` if the HtmlTag has the CSS class, `false` otherwise.
181 */
182 hasClass(cssClass: string): boolean;
183 /**
184 * Sets the inner HTML for the tag.
185 *
186 * @param {String} html The inner HTML to set.
187 * @return {Autolinker.HtmlTag} This HtmlTag instance, so that method calls may be chained.
188 */
189 setInnerHTML(html: string): this;
190 /**
191 * Backwards compatibility method name.
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 * Retrieves the inner HTML for the tag.
199 *
200 * @return {String}
201 */
202 getInnerHTML(): string;
203 /**
204 * Backward compatibility method name.
205 *
206 * @return {String}
207 */
208 getInnerHtml(): string;
209 /**
210 * Generates the HTML string for the tag.
211 *
212 * @return {String}
213 */
214 toAnchorString(): string;
215 /**
216 * Support method for {@link #toAnchorString}, returns the string space-separated key="value" pairs, used to populate
217 * the stringified HtmlTag.
218 *
219 * @protected
220 * @return {String} Example return: `attr1="value1" attr2="value2"`
221 */
222 protected buildAttrsStr(): string;
223}
224export interface HtmlTagCfg {
225 tagName?: string;
226 attrs?: {
227 [key: string]: string;
228 };
229 innerHtml?: string;
230 innerHTML?: string;
231}