tobast/glowingbear-mainbox
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Merge pull request #492 from glowing-bear/fix-filters

Browse source 
Fix inline colour filter by applying to text nodes only
This commit is contained in:
Tor Hveem 2014-10-28 01:17:47 +01:00
commit f5d4162790
2 changed files with 49 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
index.html
View file

@ -269,7 +269,7 @@ $ openssl req -nodes -newkey rsa:4096 -keyout relay.pem -x509 -days 365 -out rel
<td class="prefix"><a ng-click="addMention(bufferline.prefix)"><span ng-repeat="part in ::bufferline.prefix" ng-class="::part.classes" ng-bind="::part.text"></span></a></td><!--
--><td class="message"><!--
--><div ng-repeat="metadata in ::bufferline.metadata" plugin data="::metadata"></div><!--
--><span ng-repeat="part in ::bufferline.content" class="text" ng-class="::part.classes" ng-bind-html="::part.text | irclinky:'_blank' | inlinecolour"></span>
--><span ng-repeat="part in ::bufferline.content" class="text" ng-class="::part.classes" ng-bind-html="::part.text | irclinky:'_blank' | DOMfilter:'inlinecolour'"></span>
</td>
</tr>
<tr class="readmarker" ng-if="activeBuffer().lastSeen==$index">

50
js/filters.js
View file

@ -36,7 +36,7 @@ weechat.filter('irclinky', ['$filter', function($filter) {
};
}]);
weechat.filter('inlinecolour', ['$sce', function($sce) {
weechat.filter('inlinecolour', function() {
return function(text) {
if (!text) {
return text;
@ -46,7 +46,53 @@ weechat.filter('inlinecolour', ['$sce', function($sce) {
var hexColourRegex = /(^|[^&])\#([0-9a-f]{6})($|[^\w'"])/gmi;
var substitute = '$1#$2 <div class="colourbox" style="background-color:#$2"></div> $3';
return $sce.trustAsHtml(text.replace(hexColourRegex, substitute));
return text.replace(hexColourRegex, substitute);
};
});
// apply a filter to an HTML string's text nodes, and do so with not exceedingly terrible performance
weechat.filter('DOMfilter', ['$filter', '$sce', function($filter, $sce) {
return function(text, filter) {
if (!text || !filter) {
return text;
}
var filterFunction = $filter(filter);
var el = document.createElement('div');
el.innerHTML = text;
// Recursive DOM-walking function applying the filter to the text nodes
var process = function(node) {
if (node.nodeType === 3) { // text node
var value = filterFunction(node.nodeValue);
if (value !== node.nodeValue) {
// we changed something. create a new node to replace the current one
// we could also only add its children but that would probably incur
// more overhead than it would gain us
var newNode = document.createElement('span');
newNode.innerHTML = value;
var parent = node.parentNode;
var sibling = node.nextSibling;
parent.removeChild(node);
if (sibling) {
parent.insertBefore(newNode, sibling);
} else {
parent.appendChild(newNode);
}
}
}
// recurse
node = node.firstChild;
while (node) {
process(node);
node = node.nextSibling;
}
};
process(el);
return $sce.trustAsHtml(el.innerHTML);
};
}]);
})();