* add some more options to tags (mostly directly setting class and style)
This commit is contained in:
Sarjuuk
2017-03-19 17:03:48 +01:00
parent bf0f218b28
commit 939a3f1e31
3 changed files with 360 additions and 224 deletions

View File

@@ -60,6 +60,20 @@ a.open {
color: white;
}
img.content-image {
border-radius:2px;
margin:2px;
}
img.content-image.content-image-shadowed {
box-shadow:0 3px 10px rgba(0, 0, 0, .35);
}
a:hover img.content-image {
-webkit-filter:brightness(1.35);
filter:brightness(1.35);
}
img.border {
border: 2px solid #404040;
background-color: #080808;
@@ -74,6 +88,10 @@ a:hover img.border {
background-color: #101010;
}
img.no-border {
border:0 !important;
}
.pad {
padding-bottom: 10px;
}
@@ -419,6 +437,18 @@ a.revealtoggle
padding-top:18px;
}
.markup-float-left
{
float:left;
margin:0 10px 10px 0;
}
.markup-float-right
{
float:right;
margin:10px 0 0 10px;
}
/**************************************************************/
/* CSS BELOW TO BE MOVED TO A PROPER LOCATION AND/OR REFACTOR */
/**************************************************************/

Binary file not shown.

After

Width:  |  Height:  |  Size: 17 KiB

View File

@@ -194,7 +194,9 @@ var Markup = {
diff: { req: false, valid: /^[0-9]+$/ },
icon: { req: false, valid: /^false$/ },
domain: { req: false, valid: /^(beta|mop|ptr|www|de|es|fr|ru|pt)$/ },
site: { req: false, valid: /^(beta|mop|ptr|www|de|es|fr|ru|pt)$/ }
site: { req: false, valid: /^(beta|mop|ptr|www|de|es|fr|ru|pt)$/ },
tempname: { req: false }
},
validate: function(attr)
{
@@ -209,16 +211,19 @@ var Markup = {
var url = domainInfo[0];
var nameCol = domainInfo[1];
var rel = [];
var tempname = null;
if(attr.diff)
rel.push('diff=' + attr.diff);
if(attr.tempname)
tempname = attr.tempname;
if(g_achievements[id] && g_achievements[id][nameCol])
{
var ach = g_achievements[id];
return '<a href="' + url + '?achievement=' + id + '"' + (rel.length ? ' rel="' + rel.join('&') + '"' : '') + (!attr.icon ? ' class="icontiny"><img src="' + g_staticUrl + '/images/wow/icons/tiny/' + ach.icon.toLowerCase() + '.gif"' : '') + Markup._addGlobalAttributes(attr) + ' align="absmiddle" /> <span class="tinyicontxt">' + Markup._safeHtml(ach[nameCol]) + '</span></a>';
}
return '<a href="' + url + '?achievement=' + id + '"' + (rel.length ? ' rel="' + rel.join('&') + '"' : '') + Markup._addGlobalAttributes(attr) + '>(' + LANG.types[10][0] + ' #' + id + ')</a>';
return '<a href="' + url + '?achievement=' + id + '"' + (rel.length ? ' rel="' + rel.join('&') + '"' : '') + Markup._addGlobalAttributes(attr) + '>' + (tempname ? tempname : ('(' + LANG.types[10][0] + ' #' + l + ')')) + '</a>';
},
toText: function(attr)
{
@@ -537,6 +542,7 @@ var Markup = {
'float': { req: false, valid: /^(left|right)$/i },
align: { req: false, valid: /^(left|right|center)$/i },
margin: { req: false, valid: /^\d+(px|em|\%)$/ },
style: { req: false, valid: /^[^"<>]+$/ },
width: { req: false, valid: /^[0-9]+(px|em|\%)$/ }
},
allowedClass: MARKUP_CLASS_STAFF,
@@ -553,20 +559,13 @@ var Markup = {
if(attr.width)
styles.push('width: ' + attr.width);
if (attr['float'])
{
styles.push('float: ' + attr['float']);
if(attr.margin === undefined)
{
if(attr['float'] == 'left')
styles.push('margin: 0 10px 10px 0');
else
styles.push('margin: 0 0 10px 10px');
}
}
classes.push('markup-float-' + attr['float']);
if(attr.align)
styles.push('text-align: ' + attr.align);
if(attr.margin)
styles.push('margin: ' + attr.margin);
if(attr.style && Markup.allow >= Markup.CLASS_STAFF)
styles.push(attr.style)
if(attr.first)
classes.push('first');
if(attr.last)
@@ -810,6 +809,7 @@ var Markup = {
{
unnamed: { req: false, valid: /^first$/i },
clear: { req: false, valid: /^(true|both|left|right)$/i },
style: { req: false, valid: /^[^"<>]+$/ },
toc: { req: false, valid: /^false$/i }
},
toHtml: function(attr)
@@ -824,13 +824,18 @@ var Markup = {
classes.push('last');
if(classes.length > 0)
str += ' class="' + classes.join(' ') + '"';
var styles = [];
if(attr.clear)
{
if(attr.clear == 'true' || attr.clear == 'both')
str += ' style="clear: both"';
styles.push('clear: both');
else
str += ' style="clear: ' + attr.clear + '"';
styles.push('clear: ' + attr.clear);
}
if(attr.style && Markup.allow >= Markup.CLASS_STAFF)
styles.push(attr.style);
if(styles.length)
str += ' styles="' + styles.join(';') + '"';
return [str + '>', '</h2>'];
},
fromHtml: function(str)
@@ -848,6 +853,7 @@ var Markup = {
attr:
{
unnamed: { req: false, valid: /^first$/i },
style: { req: false, valid: /^[^"<>]+$/ },
toc: { req: false, valid: /^false$/i }
},
allowedClass: MARKUP_CLASS_STAFF,
@@ -863,6 +869,11 @@ var Markup = {
classes.push('last');
if(classes.length > 0)
str += ' class="' + classes.join(' ') + '"';
var styles = [];
if(attr.style && Markup.allow >= Markup.CLASS_STAFF)
styles.push(attr.style);
if(styles.length)
str += ' styles="' + styles.join(';') + '"';
return [str + '>', '</h3>'];
},
fromHtml: function(str)
@@ -1031,6 +1042,7 @@ var Markup = {
height: { req: false, valid: /^[0-9]+$/ },
'float': { req: false, valid: /^(left|right|center)$/i },
border: { req: false, valid: /^[0-9]+$/ },
shadow: { req: false, valid: /^(true|false)$/ },
margin: { req: false, valid: /^[0-9]+$/ }
},
blogSize: /^(thumb|normal)$/i,
@@ -1052,6 +1064,8 @@ var Markup = {
toHtml: function(attr)
{
var str = '<img' + Markup._addGlobalAttributes(attr);
var classes = [];
var styles = [];
var post = '';
if(attr.src)
@@ -1103,21 +1117,39 @@ var Markup = {
}
else
{
str += ' style="float: ' + attr['float'] + ';';
styles.push('float: ' + attr['float']);
if(!attr.margin)
attr.margin = 10;
if(attr['float'] == 'left')
str += ' margin: 0 ' + attr.margin + 'px ' + attr.margin + 'px 0"';
styles.push('margin: 0 ' + attr.margin + 'px ' + attr.margin + 'px 0');
else
str += ' margin: 0 0 ' + attr.margin + 'px ' + attr.margin + 'px"';
styles.push('margin: 0 0 ' + attr.margin + 'px ' + attr.margin + 'px');
}
}
if(attr.border != 0)
str += ' class="border"';
if(attr.border)
{
if (attr.border == 0)
classes.push('no-border');
else
{
classes.push('border');
styles.push('border-width:' + attr.border + 'px');
}
}
else
{
classes.push('content-image');
if (attr.shadow == 'true')
classes.push('content-image-shadowed');
}
if(attr.title)
str += ' alt="' + attr.title + '"';
else
str += ' alt=""';
if (classes.length)
str += ' class="' + classes.join(' ') + '"';
if (styles.length)
str += ' style="' + styles.join(';') + '"';
str += ' />' + post;
return str;
},
@@ -1156,7 +1188,8 @@ var Markup = {
unnamed: { req: true, valid: /^[0-9]+$/ },
icon: { req: false, valid: /^false$/i },
domain: { req: false, valid: /^(beta|mop|ptr|www|de|es|fr|ru|pt)$/ },
site: { req: false, valid: /^(beta|mop|ptr|www|de|es|fr|ru|pt)$/ }
site: { req: false, valid: /^(beta|mop|ptr|www|de|es|fr|ru|pt)$/ },
tempname: { req: false }
},
validate: function(attr)
{
@@ -1170,7 +1203,10 @@ var Markup = {
var domainInfo = Markup._getDatabaseDomainInfo(attr);
var url = domainInfo[0];
var nameCol = domainInfo[1];
var tempname = null;
if(attr.tempname)
tempname = attr.tempname;
if(g_items[id] && g_items[id][nameCol])
{
var item = g_items[id];
@@ -1178,7 +1214,7 @@ var Markup = {
str += Markup._safeHtml(item[nameCol]) + '</span></a>';
return str;
}
return '<a href="' + url + '?item=' + id + '"' + Markup._addGlobalAttributes(attr) + '>(' + LANG.types[3][0] + ' #' + id + ')</a>';
return '<a href="' + url + '?item=' + id + '"' + Markup._addGlobalAttributes(attr) + '>' + (tempname ? tempname : ('(' + LANG.types[3][0] + ' #' + c + ')')) + '</a>';
},
toText: function(attr)
{
@@ -1237,6 +1273,11 @@ var Markup = {
empty: false,
itrim: true,
allowedParents: { ul: 1, ol: 1 },
attr:
{
"class": { req: false, valid: /^[a-z0-9 _-]+$/i },
style: { req: false, valid: /^[^<>]+$/ }
},
helpText: function()
{
var str = '';
@@ -1481,6 +1522,8 @@ var Markup = {
slot: { req: false, valid: /^[0-9]+$/ },
humanoid: { req: false, valid: /^1$/ },
'float': { req: false, valid: /^(left|right)$/i },
border: { req: false, valid: /^[0-9]+$/ },
shadow: { req: false, valid: /^(true|false)$/ },
img: { req: false, valid: /\S+/ },
link: { req: false, valid: /\S+/ },
label: { req: false, valid: /[\S ]+/ }
@@ -1490,21 +1533,38 @@ var Markup = {
toHtml: function(attr)
{
var str = '';
var classes = [];
var styles = [];
if(attr['float'])
classes.push('markup-float-' + attr['float']);
if(attr.border)
{
if(attr.border == 0)
classes.push('no-border');
else
{
classes.push('border');
styles.push('border-width:' + attr.border + 'px');
}
}
else
{
classes.push('content-image');
if(attr.shadow == 'true')
classes.push('content-image-shadowed');
}
if(attr.npc)
{
str = '<a' + Markup._addGlobalAttributes(attr) + ' href="#modelviewer:1:' + attr.npc + ':' + (attr.humanoid ? '1' : '0') +
'" onclick="ModelViewer.show({ type: 1, displayId: ' + attr.npc + ', slot: ' + attr.slot + ', ' + (attr.humanoid ? 'humanoid: 1, ' : '') +
'displayAd: 1, fromTag: 1' + (attr.link ? ", link: '" + Markup._safeJsString(attr.link) + "'" : '') + (attr.label ? ", label: '" + Markup._safeJsString(attr.label) + "'" : '') +
' });"><img alt="' + Markup._safeHtml(attr._contents) + '" title="' + Markup._safeHtml(attr._contents) + '" src="' +
(attr.img ? attr.img : g_staticUrl + '/modelviewer/thumbs/npc/' + attr.npc + '.png" width="150" height="150') + '" class="border" ';
if(attr['float'])
{
str += 'style="float: ' + attr['float'] + '; ';
if(attr['float'] == 'left')
str += 'margin: 0 10px 10px 0" ';
else
str += 'margin: 0 0 10px 10px" ';
}
(attr.img ? attr.img : g_staticUrl + '/modelviewer/thumbs/npc/' + attr.npc + '.png" width="150" height="150') + ' ';
if(classes.length)
str += 'class="' + classes.join(' ') + '"';
if(styles.length)
str += ' style="' + styles.join(';') + '"';
str += '/></a>';
return [ str ];
}
@@ -1513,15 +1573,11 @@ var Markup = {
str = '<a' + Markup._addGlobalAttributes(attr) + ' href="#modelviewer:2:' + attr.object + '" onclick="ModelViewer.show({ type: 2, displayId: ' +
attr.object + ', displayAd: 1, fromTag: 1' + (attr.link ? ", link: '" + Markup._safeJsString(attr.link) + "'" : '') + (attr.label ? ", label: '" + Markup._safeJsString(attr.label) + "'" : '') +
' });"><img alt="' + Markup._safeHtml(attr._contents) + '" title="' + Markup._safeHtml(attr._contents) + '" src="' +
(attr.img ? attr.img : g_staticUrl + '/modelviewer/thumbs/obj/' + attr.object + '.png" width="150" height="150') + '" class="border" ';
if(attr['float'])
{
str += 'style="float: ' + attr['float'] + '; ';
if(attr['float'] == 'left')
str += 'margin: 0 10px 10px 0" ';
else
str += 'margin: 0 0 10px 10px" ';
}
(attr.img ? attr.img : g_staticUrl + '/modelviewer/thumbs/obj/' + attr.object + '.png" width="150" height="150') + ' ';
if(classes.length)
str += 'class="' + classes.join(' ') + '"';
if(styles.length)
str += ' style="' + styles.join(';') + '"';
str += '/></a>';
return [ str ];
}
@@ -1531,15 +1587,11 @@ var Markup = {
'" onclick="ModelViewer.show({ type: 3, displayId: ' + attr.item + ', slot: ' + attr.slot + ', displayAd: 1, fromTag: 1' +
(attr.link ? ", link: '" + Markup._safeJsString(attr.link) + "'" : '') + (attr.label ? ", label: '" + Markup._safeJsString(attr.label) + "'" : '') +
' });"><img alt="' + Markup._safeHtml(attr._contents) + '" title="' + Markup._safeHtml(attr._contents) + '" src="' +
(attr.img ? attr.img : g_staticUrl + '/modelviewer/thumbs/item/' + attr.item + '.png" width="150" height="150') + '" class="border" ';
if(attr['float'])
{
str += 'style="float: ' + attr['float'] + '; ';
if(attr['float'] == 'left')
str += 'margin: 0 10px 10px 0" ';
else
str += 'margin: 0 0 10px 10px" ';
}
(attr.img ? attr.img : g_staticUrl + '/modelviewer/thumbs/item/' + attr.item + '.png" width="150" height="150') + ' ';
if(classes.length)
str += 'class="' + classes.join(' ') + '"';
if(styles.length)
str += ' style="' + styles.join(';') + '"';
str += '/></a>';
return [ str ];
}
@@ -1879,6 +1931,8 @@ var Markup = {
wowhead: { req: false, valid: /^true$/ },
display: { req: false, valid: /^block$/ },
align: { req: false, valid: /^(left|right|center)$/i },
"float": { req: false, valid: /^(left|right|none)$/i },
clear: { req: false, valid: /^(left|right|both)$/i },
collapse: { req: false, valid: /^true$/ }
},
allowedModes: { article: 1, quickfacts: 1, comment: 1 },
@@ -1894,21 +1948,25 @@ var Markup = {
{
var str = '<div' + Markup._addGlobalAttributes(attr);
var styles = [];
var classes = ['quote'];
if(attr.display)
styles.push('display: ' + attr.display);
if(attr.align)
styles.push('text-align: ' + attr.align);
if (attr.clear)
styles.push('clear: ' + attr.clear);
if(styles.length)
str += ' style="' + styles.join('; ') + '" ';
str += ' class="quote';
if(attr.first)
str += ' first';
classes.push('first');
if(attr.last)
str += ' last';
classes.push('last');
if (attr['float'])
classes.push('markup-float-' + attr['float']);
if(classes.length)
str += ' class="' + classes.join(' ');
if(attr.blizzard) {
if(attr.unnamed && attr.blizzard)
{
@@ -2064,7 +2122,8 @@ var Markup = {
width: { req: false, valid: /^[0-9]+$/ },
height: { req: false, valid: /^[0-9]+$/ },
'float': { req: false, valid: /^(left|right)$/i },
border: { req: false, valid: /^[0-9]+$/ }
border: { req: false, valid: /^[0-9]+$/ },
shadow: { req: false, valid: /^(true|false)$/ }
},
taglessSkip: true,
allowedClass: MARKUP_CLASS_STAFF,
@@ -2078,6 +2137,8 @@ var Markup = {
},
toHtml: function(attr)
{
var classes = [];
var styles = [];
var url = '';
var thumb = '';
@@ -2112,16 +2173,30 @@ var Markup = {
str += ' width="' + attr.width + '"';
if(attr.size && attr.height)
str += ' height="' + attr.height + '"';
if(attr.border != 0)
str += 'class="border" ';
if(attr['float']) {
str += 'style="float: ' + attr['float'] + '; ';
if(attr['float'] == 'left')
str += 'margin: 0 10px 10px 0';
if(attr.border)
{
if(attr.border == 0)
classes.push('no-border');
else
str += 'margin: 0 0 10px 10px';
str += '" ';
{
classes.push('border');
styles.push('border-width:' + attr.border + 'px');
}
}
else
{
classes.push('content-image');
if(attr.shadow == 'true')
classes.push('content-image-shadowed');
}
if(attr['float'])
classes.push('markup-float-' + attr['float']);
if(classes.length)
str += ' class="' + classes.join(' ') + '"';
if(styles.length)
str += ' style="' + styles.join(';') + '"';
str += 'alt="" ';
var screenshot = {
@@ -2249,7 +2324,8 @@ var Markup = {
return str.replace(/<small\b[\s\S]*?>([\s\S]*?)<\/small>/gi, '[small]$1[/small]');
}
},
sound: {
sound:
{
empty: true,
attr:
{
@@ -2386,6 +2462,8 @@ var Markup = {
empty: false,
attr:
{
"class": { req: false, valid: /^[a-z0-9 _-]+$/i },
style: { req: false, valid: /^[^<>]+$/ },
unnamed: { req: false, valid: /^(hidden|invisible)$/ },
tooltip: { req: false, valid: /\S+/ },
tooltip2: { req: false, valid: /\S+/ }
@@ -2423,6 +2501,7 @@ var Markup = {
domain: { req: false, valid: /^(beta|mop|ptr|www|de|es|fr|ru|pt)$/ },
site: { req: false, valid: /^(beta|mop|ptr|www|de|es|fr|ru|pt)$/ },
buff: { req: false, valid: /^true$/ },
tempname: { req: false }
},
validate: function(attr)
{
@@ -2437,11 +2516,14 @@ var Markup = {
var url = domainInfo[0];
var nameCol = domainInfo[1];
var rel = [];
var tempname = null;
if(attr.buff)
rel.push('buff');
if(attr.diff)
rel.push('diff=' + attr.diff);
if(attr.tempname)
tempname = attr.tempname;
if(g_spells[id] && g_spells[id][nameCol])
{
@@ -2449,7 +2531,7 @@ var Markup = {
return '<a href="' + url + '?spell=' + id + '"' + (rel.length ? ' rel="' + rel.join('&') + '"' : '') + (!attr.icon ? ' class="icontiny"><img src="' + g_staticUrl + '/images/wow/icons/tiny/' + spell.icon.toLowerCase() + '.gif"' : '') + Markup._addGlobalAttributes(attr) + ' align="absmiddle" /> <span class="tinyicontxt">' + Markup._safeHtml(spell[nameCol]) + '</span></a>';
}
return '<a href="' + url + '?spell=' + id + '"' + (rel.length ? ' rel="' + rel.join('&') + '"' : '') + '>(' + LANG.types[6][0] + ' #' + id + ')</a>';
return '<a href="' + url + '?spell=' + id + '"' + (rel.length ? ' rel="' + rel.join('&') + '"' : '') + '>' + (tempname ? tempname : ('(' + LANG.types[6][0] + ' #' + f + ')')) + '</a>';
},
toText: function(attr)
{
@@ -2564,7 +2646,8 @@ var Markup = {
itrim: true,
allowedClass: MARKUP_CLASS_STAFF,
allowedChildren: { tab: 1 },
attr: {
attr:
{
name: { req: true, valid: /\S+/ },
width: { req: false, valid: /^[0-9]+(px|em|\%)$/ }
},
@@ -2606,7 +2689,8 @@ var Markup = {
itrim: true,
allowedClass: MARKUP_CLASS_STAFF,
allowedParents: { tabs: 1 },
attr: {
attr:
{
name: { req:true, valid: /[\S ]+/ },
icon: { req:false, valid: /\S+/ }
},
@@ -2975,8 +3059,10 @@ var Markup = {
unnamed: { req: false, valid: /\S+/ },
rel: { req: false, valid: /(item|quest|spell|achievement|event|npc|object|itemset|currency)=([0-9]+)/ },
onclick: { req: false, valid: /[\S ]+/ },
style: { req: false, valid: /^[^"<>]+$/ },
tooltip: { req: false, valid: /\S+/ },
tooltip2: { req: false, valid: /\S+/ }
tooltip2: { req: false, valid: /\S+/ },
newwindow: { req: false, valid: /^true$/ }
},
validate: function(attr)
{
@@ -3007,7 +3093,7 @@ var Markup = {
if(Markup._isUrlSafe(target, true))
{
var pre = '<a' + Markup._addGlobalAttributes(attr) + ' href="' + Markup._fixUrl(target) + '"';
if(Markup._isUrlExternal(target))
if(Markup._isUrlExternal(target) || attr.newwindow)
pre += ' target="_blank"';
if(attr.rel)
pre += ' rel="' + attr.rel + '"';
@@ -3015,6 +3101,8 @@ var Markup = {
pre += ' onclick="' + attr.onclick + '"';
if(attr.tooltip && Markup.tooltipTags[attr.tooltip])
pre += ' onmouseover="$WH.Tooltip.showAtCursor(event, Markup.tooltipTags[\'' + attr.tooltip + '\'], 0, 0, ' + (Markup.tooltipBare[attr.tooltip] ? 'null' : "'q'") + ', ' + (attr.tooltip2 && Markup.tooltipTags[attr.tooltip2] ? "Markup.tooltipTags['" + attr.tooltip2 + "']" : 'null') + ')" onmousemove="$WH.Tooltip.cursorUpdate(event)" onmouseout="$WH.Tooltip.hide()"';
if(attr.style && Markup.allow >= Markup.CLASS_STAFF)
pre += ' style="' + attr.style + '"';
pre += '>';
return [pre, '</a>'];
}
@@ -3058,6 +3146,7 @@ var Markup = {
id: { req: true, valid: /^[0-9]+$/ },
unnamed: { req: false, valid: /^embed$/i },
'float': { req: false, valid: /^(left|right)$/i }, // Thumbnail only
shadow: { req: false, valid: /^(true|false)$/ }, // Thumbnail only
border: { req: false, valid: /^[0-9]+$/ } // Thumbnail only
},
ltrim: true,
@@ -3068,6 +3157,8 @@ var Markup = {
if(g_videos[attr.id])
{
var html = '', video = g_videos[attr.id];
var classes = [];
var styles = [];
if(attr.unnamed)
{
if(video.videoType == 1) // YouTube
@@ -3080,16 +3171,29 @@ var Markup = {
html += '<div style="position: relative; display: -moz-inline-stack; display: inline-block; zoom: 1; *display: inline"><a href="' + $WH.sprintf(vi_siteurls[video.videoType], video.videoId) + '" onclick="if(!g_isLeftClick(event)) return; VideoViewer.show({videos: \'' + Markup.uid + '\', pos: ' + g_videos[Markup.uid].length + '}); return false;"' + Markup._addGlobalAttributes(attr) + '>';
html += '<img src="' + $WH.sprintf(vi_thumbnails[video.videoType], video.videoId) + '" ';
if(attr.border != 0)
html += 'class="border" ';
if(attr['float']) {
html += 'style="float: ' + attr['float'] + '; ';
if(attr['float'] == 'left')
html += 'margin: 0 10px 10px 0';
if(attr.border)
{
if(attr.border == 0)
classes.push('no-border');
else
html += 'margin: 0 0 10px 10px';
html += '" ';
{
classes.push('border');
styles.push('border-width:' + attr.border + 'px');
}
}
else
{
classes.push('content-image');
if(attr.shadow == 'true')
classes.push('content-image-shadowed');
}
if(attr['float'])
classes.push('markup-float-' + attr['float']);
if(classes.length)
html += 'class="' + classes.join(' ') + '" ';
if(styles.length)
html += ' style="' + styles.join(';') + '"';
if(video.hasCaption)
html += 'alt="' + Markup.removeTags(video.caption, { mode: Markup.MODE_SIGNATURE, skipReset: true }) + '" ';
@@ -3350,6 +3454,8 @@ var Markup = {
attribs += ' title="' + Markup._safeQuotes(attr.title) + '"';
if(attr['class'])
attribs += ' class="' + attr['class'] + '"';
if(attr.style)
attribs += ' style="' + attr.style + '"';
if(attr['data-highlight'])
attribs += ' data-highlight="' + attr['data-highlight'] + '"';