Merge pull request #530 from glowing-bear/twemoji

Adds emoji support using Twitter's twemoji
This commit is contained in:
Tor Hveem 2015-01-13 13:58:06 +01:00
commit 638a4595c7
5 changed files with 38 additions and 3 deletions

View file

@ -83,4 +83,4 @@ If you wish to submit code, we try to make the contribution process as simple as
We'd also like to ask you to join our IRC channel, #glowing-bear on freenode, so we can discuss your ideas and changes. We'd also like to ask you to join our IRC channel, #glowing-bear on freenode, so we can discuss your ideas and changes.
If you're curious about the projects we're using, here's a list: [AngularJS](https://angularjs.org/), [Bootstrap](http://getbootstrap.com/), [Underscore](http://underscorejs.org/), [favico.js](http://lab.ejci.net/favico.js/), and [zlib.js](https://github.com/imaya/zlib.js). Technology-wise, [WebSockets](http://en.wikipedia.org/wiki/WebSocket) are the most important part, but we also use [local storage](https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Storage#localStorage), the [Notification Web API](https://developer.mozilla.org/en/docs/Web/API/notification), and last (but not least) [Apache Cordova](https://cordova.apache.org/) for our mobile app. If you're curious about the projects we're using, here's a list: [AngularJS](https://angularjs.org/), [Bootstrap](http://getbootstrap.com/), [Underscore](http://underscorejs.org/), [favico.js](http://lab.ejci.net/favico.js/), [twemoji](https://github.com/twitter/twemoji), and [zlib.js](https://github.com/imaya/zlib.js). Technology-wise, [WebSockets](http://en.wikipedia.org/wiki/WebSocket) are the most important part, but we also use [local storage](https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Storage#localStorage), the [Notification Web API](https://developer.mozilla.org/en/docs/Web/API/notification), and last (but not least) [Apache Cordova](https://cordova.apache.org/) for our mobile app.

View file

@ -522,6 +522,14 @@ li.buffer.indent.private a {
user-select: none; user-select: none;
} }
/* Scales emoji to font size */
img.emoji {
height: 1em;
width: 1em;
margin: 0 .05em 0 .1em;
vertical-align: -0.1em;
}
/* */ /* */
/* Mobile layout */ /* Mobile layout */
/* */ /* */

View file

@ -18,6 +18,7 @@
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular-sanitize.min.js"></script> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular-sanitize.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular-touch.min.js"></script> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular-touch.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.7.0/underscore-min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.7.0/underscore-min.js"></script>
<script src="//twemoji.maxcdn.com/twemoji.min.js"></script>
<script type="text/javascript" src="3rdparty/inflate.min.js"></script> <script type="text/javascript" src="3rdparty/inflate.min.js"></script>
<script type="text/javascript" src="js/localstorage.js"></script> <script type="text/javascript" src="js/localstorage.js"></script>
<script type="text/javascript" src="js/weechat.js"></script> <script type="text/javascript" src="js/weechat.js"></script>
@ -272,7 +273,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="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"><!-- --><td class="message"><!--
--><div ng-repeat="metadata in ::bufferline.metadata" plugin data="::metadata"></div><!-- --><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 | linky:'_blank' | DOMfilter:'irclinky' | DOMfilter:'inlinecolour'"></span> --><span ng-repeat="part in ::bufferline.content" class="text" ng-class="::part.classes" ng-bind-html="::part.text | linky:'_blank' | DOMfilter:'irclinky' | DOMfilter:'emojify':enableJSEmoji | DOMfilter:'inlinecolour' "></span>
</td> </td>
</tr> </tr>
<tr class="readmarker" ng-if="activeBuffer().lastSeen==$index"> <tr class="readmarker" ng-if="activeBuffer().lastSeen==$index">
@ -427,6 +428,16 @@ $ openssl req -nodes -newkey rsa:4096 -keyout relay.pem -x509 -days 365 -out rel
</div> </div>
</form> </form>
</li> </li>
<li>
<form class="form-inline" role="form">
<div class="checkbox">
<label>
<input type="checkbox" ng-model="enableJSEmoji">
Enable non-native Emoji support <span class="text-muted settings-help">Displays Emoji characters as images</span>
</label>
</div>
</form>
</li>
</ul> </ul>
</div> </div>
<div class="modal-footer"> <div class="modal-footer">

View file

@ -73,6 +73,9 @@ weechat.filter('DOMfilter', ['$filter', '$sce', function($filter, $sce) {
return text; return text;
} }
// hacky way to pass an extra argument without using .apply, which
// would require assembling an argument array. PERFORMANCE!!!
var extraArgument = (arguments.length > 2) ? arguments[2] : null;
var filterFunction = $filter(filter); var filterFunction = $filter(filter);
var el = document.createElement('div'); var el = document.createElement('div');
el.innerHTML = text; el.innerHTML = text;
@ -80,7 +83,7 @@ weechat.filter('DOMfilter', ['$filter', '$sce', function($filter, $sce) {
// Recursive DOM-walking function applying the filter to the text nodes // Recursive DOM-walking function applying the filter to the text nodes
var process = function(node) { var process = function(node) {
if (node.nodeType === 3) { // text node if (node.nodeType === 3) { // text node
var value = filterFunction(node.nodeValue); var value = filterFunction(node.nodeValue, extraArgument);
if (value !== node.nodeValue) { if (value !== node.nodeValue) {
// we changed something. create a new node to replace the current one // we changed something. create a new node to replace the current one
// we could also only add its children but that would probably incur // we could also only add its children but that would probably incur
@ -136,4 +139,15 @@ weechat.filter('getBufferQuickKeys', function () {
}; };
}); });
// Emojifis the string using https://github.com/twitter/twemoji
weechat.filter('emojify', function() {
return function(text, enable_JS_Emoji) {
if (enable_JS_Emoji === true) {
return twemoji.parse(text);
} else {
return(text);
}
};
});
})(); })();

View file

@ -298,6 +298,8 @@ weechat.controller('WeechatCtrl', ['$rootScope', '$scope', '$store', '$timeout',
$store.bind($scope, "fontsize", "14px"); $store.bind($scope, "fontsize", "14px");
// Save setting for readline keybindings // Save setting for readline keybindings
$store.bind($scope, "readlineBindings", false); $store.bind($scope, "readlineBindings", false);
// Save settings for non-native Emoji support
$store.bind($scope, "enableJSEmoji", false);
if (!$scope.fontfamily) { if (!$scope.fontfamily) {
if (utils.isMobileUi()) { if (utils.isMobileUi()) {