浏览代码

Layout and updates

Updated timeago
added echo from server
fixed time layout and added wrapping
Nathaniel van Diepen 10 年之前
父节点
当前提交
2aca90344a
共有 4 个文件被更改,包括 147 次插入25 次删除
  1. 4 0
      app/OmnomIRC.js
  2. 15 3
      app/www/css/style.css
  3. 19 4
      app/www/js/jquery.timeago.js
  4. 109 18
      app/www/js/omnomirc.js

+ 4 - 0
app/OmnomIRC.js

@@ -94,6 +94,10 @@ io.sockets.on('connection',function(socket){
 		logger.debug('message sent to '+data.room);
 		io.sockets.in(data.room).emit('message',data);
 	});
+	socket.on('echo',function(data){
+		logger.debug('echoing to '+data.room);
+		socket.emit('message',data);
+	});
 	socket.on('names',function(data){
 		var sockets = io.sockets.clients(data.name),
 			i;

+ 15 - 3
app/www/css/style.css

@@ -18,6 +18,11 @@ html,body{
 .cell{
 	display: table-cell;
 }
+.date_cell{
+	word-wrap: normal;
+	white-space: pre;
+	word-break: keep-all;
+}
 .unselectable,#tabs-list div.tab{
 	-webkit-touch-callout: none;
 	-webkit-user-select: none;
@@ -136,8 +141,11 @@ html,body{
 #content,#head,#users,#entry,#input,#send,#settings{
 	border-color: black;
 	border-width: 1px;
-	overflow: hidden;
 	position: absolute;
+	overflow: hidden;
+}
+#content{
+	overflow-y: scroll;
 }
 #users,#input,#send,#settings{
 	position: fixed;
@@ -146,14 +154,18 @@ html,body{
 	list-style-type: none;
 	margin: 0;
 	padding: 0;
-	overflow: auto;
+	overflow-y: auto;
+	word-wrap: break-word;
+	white-space: pre-wrap;
+	word-break: break-all;
 }
 #content-list,#user-list,#tabs-list{
 	width: 100%;
 	height: 100%;
 }
-#settings-list{
+#content-list,#settings-list{
 	display: table;
+	table-layout: fixed;
 }
 #settings-list > li{
 	line-height: 4px;

+ 19 - 4
app/www/js/jquery.timeago.js

@@ -3,7 +3,7 @@
  * updating fuzzy timestamps (e.g. "4 minutes ago" or "about 1 day ago").
  *
  * @name timeago
- * @version 1.1.0
+ * @version 1.3.0
  * @requires jQuery v1.2.3+
  * @author Ryan McGeary
  * @license MIT License - http://www.opensource.org/licenses/mit-license.php
@@ -41,6 +41,7 @@
       refreshMillis: 60000,
       allowFuture: false,
       localeTitle: false,
+      cutoff: 0,
       strings: {
         prefixAgo: null,
         prefixFromNow: null,
@@ -127,12 +128,22 @@
       refresh_el();
       var $s = $t.settings;
       if ($s.refreshMillis > 0) {
-        setInterval(refresh_el, $s.refreshMillis);
+        this._timeagoInterval = setInterval(refresh_el, $s.refreshMillis);
       }
     },
     update: function(time){
       $(this).data('timeago', { datetime: $t.parse(time) });
       refresh.apply(this);
+    },
+    updateFromDOM: function(){
+      $(this).data('timeago', { datetime: $t.parse( $t.isTime(this) ? $(this).attr("datetime") : $(this).attr("title") ) });
+      refresh.apply(this);
+    },
+    dispose: function () {
+      if (this._timeagoInterval) {
+        window.clearInterval(this._timeagoInterval);
+        this._timeagoInterval = null;
+      }
     }
   };
 
@@ -150,8 +161,12 @@
 
   function refresh() {
     var data = prepareData(this);
+    var $s = $t.settings;
+
     if (!isNaN(data.datetime)) {
-      $(this).text(inWords(data.datetime));
+      if ( $s.cutoff == 0 || distance(data.datetime) < $s.cutoff) {
+        $(this).text(inWords(data.datetime));
+      }
     }
     return this;
   }
@@ -181,4 +196,4 @@
   // fix for IE6 suckage
   document.createElement("abbr");
   document.createElement("time");
-}));
+}));

+ 109 - 18
app/www/js/omnomirc.js

@@ -43,20 +43,24 @@
 		selectedTab=0,
 		settings = {
 			colour: false,
-			timestamp: '',
+			timestamp: 'exact',
 			server: location.origin,
 			autojoin: [
 				'#omnimaga',
 				'#omnimaga-fr',
 				'#irp'
 			],
-			scrollspeed: 100
+			scrollspeed: 100,
+			theme: 'default'
 		},
 		tabs = [],
 		properties = {
 			nick: 'User',
 			sig: '',
-			tabs: tabs
+			tabs: tabs,
+			themes: [
+				'default'
+			]
 		},
 		commands = [
 			{
@@ -69,6 +73,7 @@
 			},
 			{
 				cmd: 'me',
+				help: 'Say something in third person',
 				fn: function(args){
 					var i,ret='';
 					for(i=1;i<args.length;i++){
@@ -91,11 +96,23 @@
 			{
 				cmd: 'help',
 				fn: function(args){
-					var m = 'Commands:',i;
-					for(i in commands){
-						m += ' '+commands[i].cmd;
+					if(typeof args[1] == 'undefined'){
+						var m = 'Commands:',i;
+						for(i in commands){
+							m += ' '+commands[i].cmd;
+						}
+						$o.msg(m);
+					}else{
+						var i,cmd;
+						for(i in commands){
+							cmd = commands[i];
+							if(cmd.cmd == args[1] && typeof cmd.help != 'undefined'){
+								$o.msg('Command /'+cmd.cmd+': '+cmd.help);
+								return;
+							}
+						}
+						$o.send('/help');
 					}
-					$o.msg(m);
 				}
 			},
 			{
@@ -109,14 +126,19 @@
 					$o.refreshTabs();
 				}
 			},
-			{
+			{ // clear
 				cmd: 'clear',
 				fn: function(args){
 					$cl.html('');
 					tabs[selectedTab].body = document.createDocumentFragment();
+					socket.emit('echo',{
+						room: tabs[selectedTab].name,
+						message: 'messages cleared',
+						name: 0
+					});
 				}
 			},
-			{
+			{ // close
 				cmd: 'close',
 				fn: function(args){
 					if(args.length > 1){
@@ -126,7 +148,7 @@
 					}
 				}
 			},
-			{
+			{ // tabs
 				cmd: 'tabs',
 				fn: function(args){
 					$o.msg('tabs:');
@@ -185,11 +207,7 @@
 						child,
 						i,
 						msg = function(msg){
-							if(settings.timestamp == ''){
-								string = '<span class="cell"></span>';
-							}else{
-								string = '<span class="cell">[<abbr class="date date_'+time+'" title="'+date.toISOString()+'"></abbr>]</span>';
-							}
+							string = '<span class="cell date_cell">[<abbr class="date date_'+time+'" title="'+date.toISOString()+'"></abbr>]</span>';
 							child = $('<li>').html(string+'<span class="cell">'+msg.htmlentities().replace(
 								/(https?:\/\/(([-\w\.]+)+(:\d+)?(\/([\w/_\.]*(\?\S+)?)?)?))/g,
 								"<a href=\"$1\" title=\"\">$1</a>"
@@ -202,6 +220,12 @@
 						msg('	* '+data.message);
 					}
 					abbrDate('abbr.date_'+time);
+					if(settings.timestamp == ''){
+						$('.date_cell').css('visibility','hidden');
+					}else{
+						$('.date_cell').css('visibility','visible');
+					}
+					
 				}
 			}
 		],
@@ -237,12 +261,35 @@
 						}
 					}
 					$(this).text(text);
-				});
+				}).timeago('dispose');
 			}
 		},
 		socket,$i,$s,$h,$cl,$tl,hht;
 	$.extend($o,{
 		version: '3.0',
+		register: {
+			theme: function(name){
+				if(-1==$.inArray(properties.themes,name)){
+					properties.themes.push(name);
+					return true;
+				}
+				return false;
+			},
+			command: function(name,fn,help){
+				if(-1==$.inArray(commands,name)){
+					var o = {
+						cmd: name,
+						fn: fn
+					};
+					if(typeof help != 'undefined'){
+						o.help = help;
+					}
+					commands.push(o);
+					return true;
+				}
+				return false;
+			}
+		},
 		connect: function(server){
 			if($o.connected()){
 				socket.disconnect();
@@ -274,6 +321,10 @@
 					type,
 					values = false;
 				switch(name){
+					case 'theme':
+						type = 'select';
+						values = properties.themes;
+						break;
 					case 'autojoin':type = 'array';break;
 					case 'timestamp':type = 'string';break;
 					default:
@@ -292,7 +343,14 @@
 				settings[name] = value;
 				$.localStorage('settings',JSON.stringify(settings));
 				switch(name){
-					case 'timestamp':abbrDate('abbr.date');break;
+					case 'timestamp':
+						abbrDate('abbr.date');
+						if(settings.timestamp == ''){
+							$('.date_cell').css('visibility','hidden');
+						}else{
+							$('.date_cell').css('visibility','visible');
+						}
+					break;
 				}
 				if(typeof render == 'undefined'){
 					$o.renderSettings();
@@ -421,6 +479,18 @@
 					break;
 			}
 			$(tabs[$o.tabIdForName(tabName) || selectedTab].body).append(frag);
+			var scroll = [],i,html;
+			for(i in tabs){
+				html = '';
+				$(tabs[i].body).children().each(function(){
+					html += this.outerHTML;
+				});
+				scroll.push({
+					name: tabs[i].name,
+					body: html
+				});
+			}
+			$.localStorage('tabs',scroll);
 			if(typeof tabName == 'undefined' || tabName == tabs[selectedTab].name){
 				$o.selectTab(selectedTab);
 			}
@@ -468,10 +538,31 @@
 				}
 				return false;
 			})()){
+				var scroll = $.localStorage('tabs'),
+					i,
+					frag = document.createDocumentFragment();
+				for(i in scroll){
+					if(scroll[i].name == name){
+						$(frag)
+							.append(scroll[i].body)
+							.append(
+								$('<li>').html('<span class="to_remove">-- loaded old scrollback --</span>')
+							)
+							.children()
+							.children('.remove')
+							.remove();
+						$(frag)
+							.children()
+							.children('.to_remove')
+							.removeClass('to_remove')
+							.addClass('remove');
+						event('loading old tab scrollback for '+name);
+					}
+				}
 				tabs.push({
 					name: name,
 					title: title,
-					body: document.createDocumentFragment(),
+					body: frag,
 					names: []
 				});
 				$tl.append($o.tabObj(tabs.length-1));