chatroom 0.0.8

data/app/assets/javascripts/chatroom/messages.js.coffee

@@ -0,0 +1,145 @@
+# Place all the behaviors and hooks related to the matching controller here.
+# All this logic will automatically be available in application.js.
+# You can use CoffeeScript in this file: http://coffeescript.org/
+
+window.Messages = 
+	# maximun or minimun your chatroom
+	minChatroom: () ->
+		$("#chatroom").slideToggle()
+		$("#chatBeam").show()
+		false
+
+	maxChatroom: () ->
+		$("#chatBeam").hide()
+		$("#chatroom").slideToggle()
+		false
+
+	# Editor: change the text in textarea
+	changeSelectionChar: (elemTag) ->
+		editor = $("#new_message_editor")
+		selectionStart = editor[0].selectionStart
+		selectionEnd = editor[0].selectionEnd
+
+		if selectionStart != selectionEnd
+			editorCharArray = editor.val().split("")
+			editorCharArray.splice(selectionEnd, 0, elemTag[1])
+			editorCharArray.splice(selectionStart, 0, elemTag[0])
+			editorText = convertTagToMark(editorCharArray.join(''))
+			editor.val(editorText)
+		false
+
+	changeFontBlod: () ->
+		Messages.changeSelectionChar(["<b>", "</b>"])
+		false
+
+	changeFontItalic: () ->
+		Messages.changeSelectionChar(["<i>", "</i>"])
+		false
+
+	changeFontColor: () ->
+		Messages.changeSelectionChar(["<span style=\"color: red\">", "</span>"])
+		false
+
+	# Editor: show all the emotions for selecting
+	constructEmotions: () ->
+		table = $("table.chatroom-emotions-images tbody")
+		if !table.has("span").length
+			for i in [0...5]
+				row = $("<tr></tr>")
+				for j in [0...8]
+					n = i * 8 + j
+					img = $("<span></span>").addClass("emotion-img")
+					img.attr("emotion", "#{n}")
+					img.css({"background": "url(\"/assets/emotions/#{n}.gif\")"})
+					img.click(Messages.selectEmotion)
+					cell = $("<td></td>").addClass("chat-cell").append(img)
+					row.append(cell)
+				table.append(row)
+		false
+	
+	displayAllEmotions: () -> 
+		Messages.constructEmotions()
+		$("table.chatroom-emotions-images").toggle()
+		false
+
+	# Editor: select one emotion to textarea
+	selectEmotion: () ->
+		img = $(this).attr("emotion")
+		imageTag = "<img src=\"/assets/emotions/#{img}.gif\" />"
+		editor = $("#new_message_editor")
+		selectionStart = editor[0].selectionStart
+		editorCharArray = editor.val().split("")
+		editorCharArray.splice(selectionStart, 0, imageTag)
+		editorText = convertTagToMark(editorCharArray.join(''))
+		editor.val(editorText)
+		$("table.chatroom-emotions-images").toggle()
+		false
+
+	# Editor: show Every color in table
+	constructColors: () ->
+		colors = [
+			"#FFFFFF", "#000000", "#EEEEC1", "#1F497D", "#4F81BD", "#C0504D", "#9BBB59", "#8064A2", "#4BACC6", "#F79646",
+			"#F2F2F2", "#7F7F7F", "#DDD9C3", "#C6D9F0", "#DBE5F1", "#F2DCDB", "#EBF1DD", "#E5E0DC", "#DBEEF3", "#FDEADA",
+			"#D8D8D8", "#595959", "#C4DB97", "#8DB3E2", "#B8CCE4", "#E5B9B7", "#D7E3BC", "#CCC1D9", "#B7DDE8", "#FBD5b5",
+			"#BFBFBF", "#3F3F3F", "#938953", "#548DD4", "#95B3D7", "#D99694", "#C3D69B", "#B2A27C", "#92CDDC", "#FAC08F",
+			"#A5A5A5", "#262626", "#494429", "#17365D", "#366092", "#953734", "#76923C", "#5F497A", "#31859B", "#E36709",
+			"#7F7F7F", "#0C0C0C", "#1D1D10", "#0F243E", "#244061", "#632423", "#4F6128", "#3F3151", "#205867", "#974806",
+			"#C00000", "#FF0000", "#FFC000", "#FFFF00", "#92D050", "#00B050", "#00B0F0", "#0070C0", "#002060", "#7030A0"
+		]
+	
+	constructColorsTab: () ->
+		colors = Messages.constructColors()
+		table = $("table.chatroom-font-colors tbody")
+		if !table.has("span").length
+			for i in [0...7]
+				row = $("<tr></tr>")
+				for j in [0...10]
+					n = i * 10 + j
+					color = $('<span></span>').addClass("font-color")
+					num = color.attr("color-num", "#{colors[n]}")
+					color.css({"background-color": "#{num.attr('color-num')}"})
+					color.click(Messages.selectColor)
+					cell = $("<td></td>").addClass("chat-cell").append(color)
+					row.append(cell)
+				table.append(row)
+		false
+	
+	displayAllColors: () ->
+		Messages.constructColorsTab()
+		$("table.chatroom-font-colors").toggle()
+		false
+		
+	# Editor: select one color for text
+	selectColor: () ->
+		color = $(this).attr("color-num")
+		fontTag = ["<span style=\"color: #{color}\">", "</span>"]
+		editor = $("#new_message_editor")
+		Messages.changeSelectionChar(fontTag)
+		$("table.chatroom-font-colors").toggle()
+		false
+		
+
+$(document).ready ->
+	$(".min-chatroom").click ->
+		Messages.minChatroom()
+		false
+
+	$(".max-chatroom").click ->
+		Messages.maxChatroom()
+		false
+
+	$(".emotions").click ->
+		Messages.displayAllEmotions()
+		false
+
+	$(".font-bloder").click ->
+		Messages.changeFontBlod()
+		false
+
+	$(".font-italic").click ->
+		Messages.changeFontItalic()
+		false
+
+	$(".font-colorer").click ->
+		Messages.displayAllColors()
+		false

data/app/assets/stylesheets/chatroom/messages.css.scss

@@ -0,0 +1,300 @@
+// Place all the styles related to the Messages controller here.
+// They will automatically be included in application.css.
+// You can use Sass (SCSS) here: http://sass-lang.com/
+
+$blueSea: #8bf;
+$gray: #999999;
+$white: #fff;
+
+#chatroom {
+	-webkit-border-radius: 8px;
+	-moz-border-radius: 8px;
+	border-radius: 8px;
+	background-color: $white;
+	background-image: -webkit-linear-gradient(top, #8bf, #eee);
+	background-image: -moz-linear-gradient(top, #8bf, #eee);
+	background-image: -o-linear-gradient(top, #8bf, #eee);
+	-ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#1471da, endColorstr=#1C85FB)";
+	position: fixed;
+	right: 0;
+	bottom: 0;
+	width: 400px;
+	height: 550px;
+	div.min-chatroom {
+		height: 35px;
+		text-align: center;
+		cursor: pointer;
+	}
+	.chat-show {
+		#chat {
+			// a complete message including information(time) and content
+			.message-line {
+				position: relative;
+				padding: 0px;
+				margin-top: 0px;
+				margin-left: 0px;
+				margin-bottom: 20px;
+				top: 0px;
+				display: block;
+				// the message information
+				.info-message {
+					position: relative;
+					display: block;
+					margin: 0px;
+					.sender {
+						padding-left: 3px;
+						display: inline;
+						position: relative;
+						font-weight: bold;
+						font-color: $gray;
+					}
+					.send-time {
+						position: relative;
+						float: right;
+						margin-right: 10px;
+					}
+				}
+				// the message that you send
+				.say {
+					display: block;
+					position: relative;
+					margin-top: 10px;
+					padding-left: 10px;	// the message that you sent must indent 10px
+					// change the message formation
+					span {
+						top: 0;
+						left: 0;
+						position: relative;
+					}
+				}
+			}
+			position: relative;
+			height: 300px;
+			margin: 5px;
+			border: 1px solid $gray;
+			background-color: $white;
+			overflow-y: scroll;
+		}
+		span {
+			position: absolute;
+			top: 36px;
+		}
+	}
+	.chat-send {
+	//------- Form
+		.send-message {
+			margin: 8px;
+			width: 100%;
+			position: relative;
+			div.send-bar {
+				height: 16px;
+				width: 95%;
+				margin-bottom: 0px;
+				border: 1px solid $gray;
+				border-bottom: none;
+				.emotions {
+					text-decoration: none;
+					position: relative;
+					width: 18px;
+					height: 16px;
+					text-align: center;
+					cursor: pointer;
+					.emotions-icon {
+						display: inline-block;
+						position: relative;
+						background: image-url("chatroom-icons/default.png") 0px -609px no-repeat;
+						width: 18px;
+						height: 16px;
+						border-right: 1px solid $gray;
+					}
+				}
+				.font-bloder {
+					position: relative;
+					width: 18px;
+					height: 16px;
+					text-align: center;
+					cursor: pointer;
+					.font-bloder-icon {
+						display: inline-block;
+						position: relative;
+						background: image-url("chatroom-icons/default.png") 0px -416px no-repeat;
+						width: 18px;
+						height: 16px;
+						border-right: 1px solid $gray;
+					}
+				}
+				.font-italic {
+					position: relative;
+					width: 18px;
+					height: 16px;
+					text-align: center;
+					cursor: pointer;
+					.font-italic-icon {
+						display: inline-block;
+						position: relative;
+						background: image-url("chatroom-icons/default.png") 0px -432px no-repeat;
+						width: 18px;
+						height: 16px;
+						border-right: 1px solid $gray;
+					}
+				}
+				.font-colorer {
+					position: relative;
+					width: 20px;
+					height: 16px;
+					text-align: center;
+					cursor: pointer;
+					.font-colorer-icon {
+						display: inline-block;
+						position: relative;
+						background: image-url("chatroom-icons/default.png") 0px -384px no-repeat;
+						width: 20px;
+						height: 16px;
+						border-right: 1px solid $gray;
+					}
+				}
+			}
+			#new_message_editor {
+				display: inline;
+				position: relative;
+				float: left;
+				width: 94%;
+				border: 1px $gray solid;
+				font-size: 14px;
+				font-family: "Tahoma", "SimSun";
+				word-wrap: break-word;
+				line-height: 18px;
+				overflow-x: hidden;
+				outline: none;
+			}
+			div.send {
+				input[type="submit"].btn {
+					position: relative;
+					margin: 10px;
+					float: right;
+				}
+			}
+		}
+	}
+}
+
+//---------- when the chatroom hided, this thing show
+#chatBeam {
+	-webkit-border-radius: 8px;
+	-moz-border-radius: 8px;
+	border-radius: 8px;
+	background-color: $white;
+	background-image: -webkit-linear-gradient(top, #8bf, #eee);
+	background-image: -moz-linear-gradient(top, #8bf, #eee);
+	background-image: -o-linear-gradient(top, #8bf, #eee);
+	-ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#1471da, endColorstr=#1C85FB)";
+	background-repeat: repeat-x;
+	display: none;
+	position: fixed;
+	right: 0;
+	bottom: 0;
+	width: 400px;
+	div.max-chatroom {
+		height: 35px;
+		text-align: center;
+		cursor: pointer;
+	}
+}
+
+//---------- emotions
+table.chatroom-emotions-images {
+	border: 0;
+	margin: 0;
+	padding: 5px;
+	border-collapse: separate;
+	background-color: $white;
+	position: absolute;
+	left: 10px;
+	top: 2px;
+	z-index: 1;
+	display: none;
+	-webkit-border-radius: 6px;
+	-moz-border-radius: 6px;
+	border-radius: 6px;
+	tbody {
+		display: table-row-group;
+		vertical-align: middle;
+		border-color: inherit;
+		tr {
+			td.chat-cell {
+				margin: 0;
+				padding: 1px;
+				border: 1px solid #F0F0EE;
+				cursor: pointer;
+				span.emotion-img {
+					display: block;
+					overflow: hidden;
+					margin: 2px;
+					width: 24px;
+					height: 24px;
+					margin: 0;
+					padding: 0;
+					border: 0;
+					border: 1px $white solid;
+					&:hover {
+						border: 1px $blueSea solid;
+					}
+				}
+			}
+		}
+	}
+}
+
+//---------- font-color picker
+.chatroom-font-colors {
+	border: 0;
+	margin: 0;
+	padding: 2px;
+	border-collapse: separate;
+	background-color: $white;
+	position: absolute;
+	left: 14px;
+	top: 4px;
+	z-index: 1;
+	display: none;
+	-webkit-border-radius: 6px;
+	-moz-border-radius: 6px;
+	border-radius: 6px;
+	tbody {
+		display: table-row-group;
+		vertical-align: middle;
+		border-color: inherit;
+		tr {
+			td.chat-cell {
+				margin: 0;
+				padding: 1px;
+				border: 1px solid #F0F0EE;
+				cursor: pointer;
+				span.font-color {
+					display: block;
+					overflow: hidden;
+					margin: 1px;
+					width: 12px;
+					height: 12px;
+					margin: 0;
+					padding: 0;
+					border: 0;
+					border: 1px $white solid;
+					&:hover {
+						border: 1px $blueSea solid;
+					}
+				}
+			}
+		}
+	}
+}
+
+.btn {
+	color: white;
+	background-color: $blueSea;
+	cursor: pointer;
+	padding: 2px 10px 2px 10px;
+	-webkit-border-radius: 6px;
+	-moz-border-radius: 6px;
+	border-radius: 6px;
+}

data/app/controllers/chatroom/messages_controller.rb

@@ -0,0 +1,20 @@
+module Chatroom
+	class MessagesController < ApplicationController
+		# GET /messages
+		def index
+			@messages = Message.all
+		end
+
+		# POST /messages
+		# POST /messages.json
+		def create
+			@message = Message.create!(message_params)
+		end
+
+		private
+			# Never trust parameters from the scary internet, only allow the white list through.
+			def message_params
+				params.require(:message).permit(:content)
+			end
+	end
+end