1 | ;
|
2 | Object.defineProperty(exports, "__esModule", { value: true });
|
3 | exports.HtmlTag = void 0;
|
4 | var utils_1 = require("./utils");
|
5 | /**
|
6 | * @class Autolinker.HtmlTag
|
7 | * @extends Object
|
8 | *
|
9 | * Represents an HTML tag, which can be used to easily build/modify HTML tags programmatically.
|
10 | *
|
11 | * Autolinker uses this abstraction to create HTML tags, and then write them out as strings. You may also use
|
12 | * this class in your code, especially within a {@link Autolinker#replaceFn replaceFn}.
|
13 | *
|
14 | * ## Examples
|
15 | *
|
16 | * Example instantiation:
|
17 | *
|
18 | * var tag = new Autolinker.HtmlTag( {
|
19 | * tagName : 'a',
|
20 | * attrs : { 'href': 'http://google.com', 'class': 'external-link' },
|
21 | * innerHtml : 'Google'
|
22 | * } );
|
23 | *
|
24 | * tag.toAnchorString(); // <a href="http://google.com" class="external-link">Google</a>
|
25 | *
|
26 | * // Individual accessor methods
|
27 | * tag.getTagName(); // 'a'
|
28 | * tag.getAttr( 'href' ); // 'http://google.com'
|
29 | * tag.hasClass( 'external-link' ); // true
|
30 | *
|
31 | *
|
32 | * Using mutator methods (which may be used in combination with instantiation config properties):
|
33 | *
|
34 | * var tag = new Autolinker.HtmlTag();
|
35 | * tag.setTagName( 'a' );
|
36 | * tag.setAttr( 'href', 'http://google.com' );
|
37 | * tag.addClass( 'external-link' );
|
38 | * tag.setInnerHtml( 'Google' );
|
39 | *
|
40 | * tag.getTagName(); // 'a'
|
41 | * tag.getAttr( 'href' ); // 'http://google.com'
|
42 | * tag.hasClass( 'external-link' ); // true
|
43 | *
|
44 | * tag.toAnchorString(); // <a href="http://google.com" class="external-link">Google</a>
|
45 | *
|
46 | *
|
47 | * ## Example use within a {@link Autolinker#replaceFn replaceFn}
|
48 | *
|
49 | * var html = Autolinker.link( "Test google.com", {
|
50 | * replaceFn : function( match ) {
|
51 | * var tag = match.buildTag(); // returns an {@link Autolinker.HtmlTag} instance, configured with the Match's href and anchor text
|
52 | * tag.setAttr( 'rel', 'nofollow' );
|
53 | *
|
54 | * return tag;
|
55 | * }
|
56 | * } );
|
57 | *
|
58 | * // generated html:
|
59 | * // Test <a href="http://google.com" target="_blank" rel="nofollow">google.com</a>
|
60 | *
|
61 | *
|
62 | * ## Example use with a new tag for the replacement
|
63 | *
|
64 | * var html = Autolinker.link( "Test google.com", {
|
65 | * replaceFn : function( match ) {
|
66 | * var tag = new Autolinker.HtmlTag( {
|
67 | * tagName : 'button',
|
68 | * attrs : { 'title': 'Load URL: ' + match.getAnchorHref() },
|
69 | * innerHtml : 'Load URL: ' + match.getAnchorText()
|
70 | * } );
|
71 | *
|
72 | * return tag;
|
73 | * }
|
74 | * } );
|
75 | *
|
76 | * // generated html:
|
77 | * // Test <button title="Load URL: http://google.com">Load URL: google.com</button>
|
78 | */
|
79 | var HtmlTag = /** @class */ (function () {
|
80 | /**
|
81 | * @method constructor
|
82 | * @param {Object} [cfg] The configuration properties for this class, in an Object (map)
|
83 | */
|
84 | function HtmlTag(cfg) {
|
85 | if (cfg === void 0) { cfg = {}; }
|
86 | /**
|
87 | * @cfg {String} tagName
|
88 | *
|
89 | * The tag name. Ex: 'a', 'button', etc.
|
90 | *
|
91 | * Not required at instantiation time, but should be set using {@link #setTagName} before {@link #toAnchorString}
|
92 | * is executed.
|
93 | */
|
94 | this.tagName = ''; // default value just to get the above doc comment in the ES5 output and documentation generator
|
95 | /**
|
96 | * @cfg {Object.<String, String>} attrs
|
97 | *
|
98 | * An key/value Object (map) of attributes to create the tag with. The keys are the attribute names, and the
|
99 | * values are the attribute values.
|
100 | */
|
101 | this.attrs = {}; // default value just to get the above doc comment in the ES5 output and documentation generator
|
102 | /**
|
103 | * @cfg {String} innerHTML
|
104 | *
|
105 | * The inner HTML for the tag.
|
106 | */
|
107 | this.innerHTML = ''; // default value just to get the above doc comment in the ES5 output and documentation generator
|
108 | /**
|
109 | * @protected
|
110 | * @property {RegExp} whitespaceRegex
|
111 | *
|
112 | * Regular expression used to match whitespace in a string of CSS classes.
|
113 | */
|
114 | this.whitespaceRegex = /\s+/; // default value just to get the above doc comment in the ES5 output and documentation generator
|
115 | this.tagName = cfg.tagName || '';
|
116 | this.attrs = cfg.attrs || {};
|
117 | this.innerHTML = cfg.innerHtml || cfg.innerHTML || ''; // accept either the camelCased form or the fully capitalized acronym as in the DOM
|
118 | }
|
119 | /**
|
120 | * Sets the tag name that will be used to generate the tag with.
|
121 | *
|
122 | * @param {String} tagName
|
123 | * @return {Autolinker.HtmlTag} This HtmlTag instance, so that method calls may be chained.
|
124 | */
|
125 | HtmlTag.prototype.setTagName = function (tagName) {
|
126 | this.tagName = tagName;
|
127 | return this;
|
128 | };
|
129 | /**
|
130 | * Retrieves the tag name.
|
131 | *
|
132 | * @return {String}
|
133 | */
|
134 | HtmlTag.prototype.getTagName = function () {
|
135 | return this.tagName || '';
|
136 | };
|
137 | /**
|
138 | * Sets an attribute on the HtmlTag.
|
139 | *
|
140 | * @param {String} attrName The attribute name to set.
|
141 | * @param {String} attrValue The attribute value to set.
|
142 | * @return {Autolinker.HtmlTag} This HtmlTag instance, so that method calls may be chained.
|
143 | */
|
144 | HtmlTag.prototype.setAttr = function (attrName, attrValue) {
|
145 | var tagAttrs = this.getAttrs();
|
146 | tagAttrs[attrName] = attrValue;
|
147 | return this;
|
148 | };
|
149 | /**
|
150 | * Retrieves an attribute from the HtmlTag. If the attribute does not exist, returns `undefined`.
|
151 | *
|
152 | * @param {String} attrName The attribute name to retrieve.
|
153 | * @return {String} The attribute's value, or `undefined` if it does not exist on the HtmlTag.
|
154 | */
|
155 | HtmlTag.prototype.getAttr = function (attrName) {
|
156 | return this.getAttrs()[attrName];
|
157 | };
|
158 | /**
|
159 | * Sets one or more attributes on the HtmlTag.
|
160 | *
|
161 | * @param {Object.<String, String>} attrs A key/value Object (map) of the attributes to set.
|
162 | * @return {Autolinker.HtmlTag} This HtmlTag instance, so that method calls may be chained.
|
163 | */
|
164 | HtmlTag.prototype.setAttrs = function (attrs) {
|
165 | Object.assign(this.getAttrs(), attrs);
|
166 | return this;
|
167 | };
|
168 | /**
|
169 | * Retrieves the attributes Object (map) for the HtmlTag.
|
170 | *
|
171 | * @return {Object.<String, String>} A key/value object of the attributes for the HtmlTag.
|
172 | */
|
173 | HtmlTag.prototype.getAttrs = function () {
|
174 | return this.attrs || (this.attrs = {});
|
175 | };
|
176 | /**
|
177 | * Sets the provided `cssClass`, overwriting any current CSS classes on the HtmlTag.
|
178 | *
|
179 | * @param {String} cssClass One or more space-separated CSS classes to set (overwrite).
|
180 | * @return {Autolinker.HtmlTag} This HtmlTag instance, so that method calls may be chained.
|
181 | */
|
182 | HtmlTag.prototype.setClass = function (cssClass) {
|
183 | return this.setAttr('class', cssClass);
|
184 | };
|
185 | /**
|
186 | * Convenience method to add one or more CSS classes to the HtmlTag. Will not add duplicate CSS classes.
|
187 | *
|
188 | * @param {String} cssClass One or more space-separated CSS classes to add.
|
189 | * @return {Autolinker.HtmlTag} This HtmlTag instance, so that method calls may be chained.
|
190 | */
|
191 | HtmlTag.prototype.addClass = function (cssClass) {
|
192 | var classAttr = this.getClass(), whitespaceRegex = this.whitespaceRegex, classes = (!classAttr) ? [] : classAttr.split(whitespaceRegex), newClasses = cssClass.split(whitespaceRegex), newClass;
|
193 | while (newClass = newClasses.shift()) {
|
194 | if (utils_1.indexOf(classes, newClass) === -1) {
|
195 | classes.push(newClass);
|
196 | }
|
197 | }
|
198 | this.getAttrs()['class'] = classes.join(" ");
|
199 | return this;
|
200 | };
|
201 | /**
|
202 | * Convenience method to remove one or more CSS classes from the HtmlTag.
|
203 | *
|
204 | * @param {String} cssClass One or more space-separated CSS classes to remove.
|
205 | * @return {Autolinker.HtmlTag} This HtmlTag instance, so that method calls may be chained.
|
206 | */
|
207 | HtmlTag.prototype.removeClass = function (cssClass) {
|
208 | var classAttr = this.getClass(), whitespaceRegex = this.whitespaceRegex, classes = (!classAttr) ? [] : classAttr.split(whitespaceRegex), removeClasses = cssClass.split(whitespaceRegex), removeClass;
|
209 | while (classes.length && (removeClass = removeClasses.shift())) {
|
210 | var idx = utils_1.indexOf(classes, removeClass);
|
211 | if (idx !== -1) {
|
212 | classes.splice(idx, 1);
|
213 | }
|
214 | }
|
215 | this.getAttrs()['class'] = classes.join(" ");
|
216 | return this;
|
217 | };
|
218 | /**
|
219 | * Convenience method to retrieve the CSS class(es) for the HtmlTag, which will each be separated by spaces when
|
220 | * there are multiple.
|
221 | *
|
222 | * @return {String}
|
223 | */
|
224 | HtmlTag.prototype.getClass = function () {
|
225 | return this.getAttrs()['class'] || "";
|
226 | };
|
227 | /**
|
228 | * Convenience method to check if the tag has a CSS class or not.
|
229 | *
|
230 | * @param {String} cssClass The CSS class to check for.
|
231 | * @return {Boolean} `true` if the HtmlTag has the CSS class, `false` otherwise.
|
232 | */
|
233 | HtmlTag.prototype.hasClass = function (cssClass) {
|
234 | return (' ' + this.getClass() + ' ').indexOf(' ' + cssClass + ' ') !== -1;
|
235 | };
|
236 | /**
|
237 | * Sets the inner HTML for the tag.
|
238 | *
|
239 | * @param {String} html The inner HTML to set.
|
240 | * @return {Autolinker.HtmlTag} This HtmlTag instance, so that method calls may be chained.
|
241 | */
|
242 | HtmlTag.prototype.setInnerHTML = function (html) {
|
243 | this.innerHTML = html;
|
244 | return this;
|
245 | };
|
246 | /**
|
247 | * Backwards compatibility method name.
|
248 | *
|
249 | * @param {String} html The inner HTML to set.
|
250 | * @return {Autolinker.HtmlTag} This HtmlTag instance, so that method calls may be chained.
|
251 | */
|
252 | HtmlTag.prototype.setInnerHtml = function (html) {
|
253 | return this.setInnerHTML(html);
|
254 | };
|
255 | /**
|
256 | * Retrieves the inner HTML for the tag.
|
257 | *
|
258 | * @return {String}
|
259 | */
|
260 | HtmlTag.prototype.getInnerHTML = function () {
|
261 | return this.innerHTML || "";
|
262 | };
|
263 | /**
|
264 | * Backward compatibility method name.
|
265 | *
|
266 | * @return {String}
|
267 | */
|
268 | HtmlTag.prototype.getInnerHtml = function () {
|
269 | return this.getInnerHTML();
|
270 | };
|
271 | /**
|
272 | * Override of superclass method used to generate the HTML string for the tag.
|
273 | *
|
274 | * @return {String}
|
275 | */
|
276 | HtmlTag.prototype.toAnchorString = function () {
|
277 | var tagName = this.getTagName(), attrsStr = this.buildAttrsStr();
|
278 | attrsStr = (attrsStr) ? ' ' + attrsStr : ''; // prepend a space if there are actually attributes
|
279 | return ['<', tagName, attrsStr, '>', this.getInnerHtml(), '</', tagName, '>'].join("");
|
280 | };
|
281 | /**
|
282 | * Support method for {@link #toAnchorString}, returns the string space-separated key="value" pairs, used to populate
|
283 | * the stringified HtmlTag.
|
284 | *
|
285 | * @protected
|
286 | * @return {String} Example return: `attr1="value1" attr2="value2"`
|
287 | */
|
288 | HtmlTag.prototype.buildAttrsStr = function () {
|
289 | if (!this.attrs)
|
290 | return ""; // no `attrs` Object (map) has been set, return empty string
|
291 | var attrs = this.getAttrs(), attrsArr = [];
|
292 | for (var prop in attrs) {
|
293 | if (attrs.hasOwnProperty(prop)) {
|
294 | attrsArr.push(prop + '="' + attrs[prop] + '"');
|
295 | }
|
296 | }
|
297 | return attrsArr.join(" ");
|
298 | };
|
299 | return HtmlTag;
|
300 | }());
|
301 | exports.HtmlTag = HtmlTag;
|
302 |
|
303 | //# sourceMappingURL=html-tag.js.map
|