From c794b877f4ce0192674c5271a68cf09f9b00cc9c Mon Sep 17 00:00:00 2001 From: Darren Date: Wed, 4 Sep 2013 20:08:16 +0100 Subject: [PATCH] Panel/channel/server views split up; message element specific to channel view; --- client/assets/css/style.css | 6 +- client/assets/src/models/server.js | 2 +- client/assets/src/views/channel.js | 148 ++++++++++++++++++++++++++++- client/assets/src/views/panel.js | 148 +---------------------------- 4 files changed, 152 insertions(+), 152 deletions(-) diff --git a/client/assets/css/style.css b/client/assets/css/style.css index ba813e5..f223001 100644 --- a/client/assets/css/style.css +++ b/client/assets/css/style.css @@ -63,13 +63,11 @@ html, body { height:100%; } #kiwi .panel_container { overflow-y:auto; height:100%; } - - - -#kiwi .messages { +#kiwi .panel { overflow-x:wrap; border:none; display: none; } + #kiwi .messages a {} #kiwi .messages.active { display:block; } diff --git a/client/assets/src/models/server.js b/client/assets/src/models/server.js index 2f7ddee..a275393 100644 --- a/client/assets/src/models/server.js +++ b/client/assets/src/models/server.js @@ -4,7 +4,7 @@ _kiwi.model.Server = _kiwi.model.Panel.extend({ initialize: function (attributes) { var name = "Server"; - this.view = new _kiwi.view.Panel({"model": this, "name": name}); + this.view = new _kiwi.view.Channel({"model": this, "name": name}); this.set({ "scrollback": [], "name": name diff --git a/client/assets/src/views/channel.js b/client/assets/src/views/channel.js index 2e3e8fd..c041f02 100644 --- a/client/assets/src/views/channel.js +++ b/client/assets/src/views/channel.js @@ -1,6 +1,6 @@ _kiwi.view.Channel = _kiwi.view.Panel.extend({ events: function(){ - var parent_events = _kiwi.view.Panel.prototype.events; + var parent_events = this.constructor.__super__.events; if(_.isFunction(parent_events)){ parent_events = parent_events(); @@ -16,6 +16,11 @@ _kiwi.view.Channel = _kiwi.view.Panel.extend({ initialize: function (options) { this.initializePanel(options); + + // Container for all the messages + this.$messages = $('
'); + this.$el.append(this.$messages); + this.model.bind('change:topic', this.topic, this); if (this.model.get('members')) { @@ -32,13 +37,148 @@ _kiwi.view.Channel = _kiwi.view.Panel.extend({ if (this.model.isChannel()) { this.$el.append('
' + _kiwi.global.i18n.translate('client_views_channel_joining').fetch() + '
'); } + + this.model.bind('msg', this.newMsg, this); + this.msg_count = 0; }, - // Override the existing newMsg() method to remove the joining channel loader - newMsg: function () { - return this.constructor.__super__.newMsg.apply(this, arguments); + + newMsg: function (msg) { + var re, line_msg, + nick_colour_hex, nick_hex, is_highlight, msg_css_classes = '', + time_difference, + sb = this.model.get('scrollback'), + prev_msg = sb[sb.length-2]; + + // Nick highlight detecting + if ((new RegExp('(^|\\W)(' + escapeRegex(_kiwi.app.connections.active_connection.get('nick')) + ')(\\W|$)', 'i')).test(msg.msg)) { + is_highlight = true; + msg_css_classes += ' highlight'; + } + + // Escape any HTML that may be in here + msg.msg = $('
').text(msg.msg).html(); + + // Make the channels clickable + re = new RegExp('(?:^|\\s)([' + escapeRegex(_kiwi.gateway.get('channel_prefix')) + '][^ ,\\007]+)', 'g'); + msg.msg = msg.msg.replace(re, function (match) { + return '' + match + ''; + }); + + + // Parse any links found + msg.msg = msg.msg.replace(/(([A-Za-z][A-Za-z0-9\-]*\:\/\/)|(www\.))([\w.\-]+)([a-zA-Z]{2,6})(:[0-9]+)?(\/[\w#!:.?$'()[\]*,;~+=&%@!\-\/]*)?/gi, function (url) { + var nice = url, + extra_html = ''; + + // Add the http if no protoocol was found + if (url.match(/^www\./)) { + url = 'http://' + url; + } + + // Shorten the displayed URL if it's going to be too long + if (nice.length > 100) { + nice = nice.substr(0, 100) + '...'; + } + + // Get any media HTML if supported + extra_html = _kiwi.view.MediaMessage.buildHtml(url); + + // Make the link clickable + return '' + nice + '' + extra_html; + }); + + + // Convert IRC formatting into HTML formatting + msg.msg = formatIRCMsg(msg.msg); + + + // Add some colours to the nick (Method based on IRSSIs nickcolor.pl) + nick_colour_hex = (function (nick) { + var nick_int = 0, rgb; + + _.map(nick.split(''), function (i) { nick_int += i.charCodeAt(0); }); + rgb = hsl2rgb(nick_int % 255, 70, 35); + rgb = rgb[2] | (rgb[1] << 8) | (rgb[0] << 16); + + return '#' + rgb.toString(16); + })(msg.nick); + + msg.nick_style = 'color:' + nick_colour_hex + ';'; + + // Generate a hex string from the nick to be used as a CSS class name + nick_hex = msg.nick_css_class = ''; + if (msg.nick) { + _.map(msg.nick.split(''), function (char) { + nick_hex += char.charCodeAt(0).toString(16); + }); + msg_css_classes += ' nick_' + nick_hex; + } + + if (prev_msg) { + // Time difference between this message and the last (in minutes) + time_difference = (msg.date.getTime() - prev_msg.date.getTime())/1000/60; + if (prev_msg.nick === msg.nick && time_difference < 1) { + msg_css_classes += ' repeated_nick'; + } + } + + // Build up and add the line + msg.msg_css_classes = msg_css_classes; + line_msg = '
<%- time %>
<%- nick %>
<%= msg %>
'; + this.$messages.append(_.template(line_msg, msg)); + + // Activity/alerts based on the type of new message + if (msg.type.match(/^action /)) { + this.alert('action'); + + } else if (is_highlight) { + _kiwi.app.view.alertWindow('* ' + _kiwi.global.i18n.translate('client_views_panel_activity').fetch()); + _kiwi.app.view.favicon.newHighlight(); + _kiwi.app.view.playSound('highlight'); + this.alert('highlight'); + + } else { + // If this is the active panel, send an alert out + if (this.model.isActive()) { + _kiwi.app.view.alertWindow('* ' + _kiwi.global.i18n.translate('client_views_panel_activity').fetch()); + } + this.alert('activity'); + } + + if (this.model.isQuery() && !this.model.isActive()) { + _kiwi.app.view.alertWindow('* ' + _kiwi.global.i18n.translate('client_views_panel_activity').fetch()); + if (!is_highlight) { + _kiwi.app.view.favicon.newHighlight(); + } + _kiwi.app.view.playSound('highlight'); + } + + // Update the activity counters + (function () { + // Only inrement the counters if we're not the active panel + if (this.model.isActive()) return; + + var $act = this.model.tab.find('.activity'); + $act.text((parseInt($act.text(), 10) || 0) + 1); + if ($act.text() === '0') { + $act.addClass('zero'); + } else { + $act.removeClass('zero'); + } + }).apply(this); + + this.scrollToBottom(); + + // Make sure our DOM isn't getting too large (Acts as scrollback) + this.msg_count++; + if (this.msg_count > (parseInt(_kiwi.global.settings.get('scrollback'), 10) || 250)) { + $('.msg:first', this.$messages).remove(); + this.msg_count--; + } }, + topic: function (topic) { if (typeof topic !== 'string' || !topic) { topic = this.model.get("topic"); diff --git a/client/assets/src/views/panel.js b/client/assets/src/views/panel.js index 5cb4879..0e71206 100644 --- a/client/assets/src/views/panel.js +++ b/client/assets/src/views/panel.js @@ -1,6 +1,6 @@ _kiwi.view.Panel = Backbone.View.extend({ tagName: "div", - className: "panel messages", + className: "panel", events: { }, @@ -24,154 +24,16 @@ _kiwi.view.Panel = Backbone.View.extend({ this.alert_level = 0; - this.model.bind('msg', this.newMsg, this); - this.msg_count = 0; - this.model.set({"view": this}, {"silent": true}); }, render: function () { var that = this; - this.$el.empty(); - _.each(this.model.get('scrollback'), function (msg) { - that.newMsg(msg); - }); - }, - - newMsg: function (msg) { - var re, line_msg, $this = this.$el, - nick_colour_hex, nick_hex, is_highlight, msg_css_classes = '', - time_difference, - sb = this.model.get('scrollback'), - prev_msg = sb[sb.length-2]; - - // Nick highlight detecting - if ((new RegExp('(^|\\W)(' + escapeRegex(_kiwi.app.connections.active_connection.get('nick')) + ')(\\W|$)', 'i')).test(msg.msg)) { - is_highlight = true; - msg_css_classes += ' highlight'; - } - - // Escape any HTML that may be in here - msg.msg = $('
').text(msg.msg).html(); - - // Make the channels clickable - re = new RegExp('(?:^|\\s)([' + escapeRegex(_kiwi.gateway.get('channel_prefix')) + '][^ ,\\007]+)', 'g'); - msg.msg = msg.msg.replace(re, function (match) { - return '' + match + ''; - }); - - - // Parse any links found - msg.msg = msg.msg.replace(/(([A-Za-z][A-Za-z0-9\-]*\:\/\/)|(www\.))([\w.\-]+)([a-zA-Z]{2,6})(:[0-9]+)?(\/[\w#!:.?$'()[\]*,;~+=&%@!\-\/]*)?/gi, function (url) { - var nice = url, - extra_html = ''; - - // Add the http if no protoocol was found - if (url.match(/^www\./)) { - url = 'http://' + url; - } - - // Shorten the displayed URL if it's going to be too long - if (nice.length > 100) { - nice = nice.substr(0, 100) + '...'; - } - - // Get any media HTML if supported - extra_html = _kiwi.view.MediaMessage.buildHtml(url); - - // Make the link clickable - return '' + nice + '' + extra_html; - }); - - - // Convert IRC formatting into HTML formatting - msg.msg = formatIRCMsg(msg.msg); - - - // Add some colours to the nick (Method based on IRSSIs nickcolor.pl) - nick_colour_hex = (function (nick) { - var nick_int = 0, rgb; - - _.map(nick.split(''), function (i) { nick_int += i.charCodeAt(0); }); - rgb = hsl2rgb(nick_int % 255, 70, 35); - rgb = rgb[2] | (rgb[1] << 8) | (rgb[0] << 16); - - return '#' + rgb.toString(16); - })(msg.nick); - - msg.nick_style = 'color:' + nick_colour_hex + ';'; - - // Generate a hex string from the nick to be used as a CSS class name - nick_hex = msg.nick_css_class = ''; - if (msg.nick) { - _.map(msg.nick.split(''), function (char) { - nick_hex += char.charCodeAt(0).toString(16); - }); - msg_css_classes += ' nick_' + nick_hex; - } - - if (prev_msg) { - // Time difference between this message and the last (in minutes) - time_difference = (msg.date.getTime() - prev_msg.date.getTime())/1000/60; - if (prev_msg.nick === msg.nick && time_difference < 1) { - msg_css_classes += ' repeated_nick'; - } - } - - // Build up and add the line - msg.msg_css_classes = msg_css_classes; - line_msg = '
<%- time %>
<%- nick %>
<%= msg %>
'; - $this.append(_.template(line_msg, msg)); - - // Activity/alerts based on the type of new message - if (msg.type.match(/^action /)) { - this.alert('action'); - - } else if (is_highlight) { - _kiwi.app.view.alertWindow('* ' + _kiwi.global.i18n.translate('client_views_panel_activity').fetch()); - _kiwi.app.view.favicon.newHighlight(); - _kiwi.app.view.playSound('highlight'); - this.alert('highlight'); - - } else { - // If this is the active panel, send an alert out - if (this.model.isActive()) { - _kiwi.app.view.alertWindow('* ' + _kiwi.global.i18n.translate('client_views_panel_activity').fetch()); - } - this.alert('activity'); - } - - if (this.model.isQuery() && !this.model.isActive()) { - _kiwi.app.view.alertWindow('* ' + _kiwi.global.i18n.translate('client_views_panel_activity').fetch()); - if (!is_highlight) { - _kiwi.app.view.favicon.newHighlight(); - } - _kiwi.app.view.playSound('highlight'); - } - - // Update the activity counters - (function () { - // Only inrement the counters if we're not the active panel - if (this.model.isActive()) return; - - var $act = this.model.tab.find('.activity'); - $act.text((parseInt($act.text(), 10) || 0) + 1); - if ($act.text() === '0') { - $act.addClass('zero'); - } else { - $act.removeClass('zero'); - } - }).apply(this); - - this.scrollToBottom(); - - // Make sure our DOM isn't getting too large (Acts as scrollback) - this.msg_count++; - if (this.msg_count > (parseInt(_kiwi.global.settings.get('scrollback'), 10) || 250)) { - $('.msg:first', this.$el).remove(); - this.msg_count--; - } + //this.$el.empty(); + //_.each(this.model.get('scrollback'), function (msg) { + // that.newMsg(msg); + //}); }, -- 2.25.1