html_ruby checkboxs.html.erb
checkboxs.html.erb
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body {
user-select: none;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
}
label {
display: block;
width: 290px;
height: 170px;
position: absolute;
z-index: 1;
background: rgba(230, 230, 230, 1);
padding-top: 110px;
text-align: center;
}
label.gameover {
background: rgba(240, 240, 240, 1);
}
<% 0.upto(9) do |i| %>
#cb-<%= i %>:checked ~ #layer-<%= i+1 %> {
z-index: <%= i+2 %>;
}
<% end %>
</style>
</head>
<body>
<form>
<% 0.upto(9) do |i| %>
<input type="checkbox" id="cb-<%= i %>" />
<% end %>
<input type="reset" id="restart" />
<label for="restart" id="layer-10" class="gameover">Game over!<br/><label for="restart" id="layer-10"></label>
<% 9.downto(0) do |i| %>
<label for="cb-<%= i %>" id="layer-<%= i %>">Tap here!<br/><label for="cb-<%= i %>" id="layer-<%= i %>"></label>
<% end %>
</form>
</body>
</html>html_ruby radios.html.erb
radios.html.erb
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body {
user-select: none;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
}
label {
display: block;
width: 290px;
height: 170px;
position: absolute;
z-index: 1;
background: rgb(230, 230, 230);
padding-top: 110px;
text-align: center;
}
<% 0.upto(9) do |i| %>
#radio-<%= i %>:checked ~ #layer-<%= i+1 %> {
z-index: <%= i+2 %>;
}
<% end %>
</style>
</head>
<body>
<form>
<% 0.upto(9) do |i| %>
<input type="radio" name="radio" id="radio-<%= i %>" />
<% end %>
<% 9.downto(0) do |i| %>
<label for="radio-<%= i %>" id="layer-<%= i %>">Tap here!<br/><label for="radio-<%= i %>" id="layer-<%= i %>"></label>
<% end %>
</form>
</body>
</html>html_ruby all_items.html.erb
all_items.html.erb
<h1>Welcome to Zapazon!</h1>
<p>The new Milk Road</p>
<div class="row">
<% @products.each do |product| %>
<div class="col-md-4">
<div class="well">
<div style ="height:150px;">
<%= image_tag product.image.url(:thumb) %>
</div>
<p><a href="#" data-toggle="modal" data-target="#myModal_<%= product.id %>">
<span class="glyphicon glyphicon-plus"></span> quick info
</a></p>
<p><strong> <%= number_to_currency product.price %> </strong></p>
<p><%= product.name %></p>
<div style ="height:150px;">
<p><%= product.description %></p>
</div>
<p>Made by <%= product.brand %></p>
<p>
<%# product.rating.times do %>
<!-- <span class="glyphicon glyphicon-star yellow"></span> -->
<%# end %>
</p>
</div>
</div>
<div class="modal fade" id="myModal_<%= product.id %>" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel"><%= product.name =%></h4>
</div>
<div class="modal-body">
<p><%= product.price =%></p>
<p><%= product.description =%></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<% end %>
</div>
<!-- Modal -->
html_ruby feed.html.erb
feed.html.erb
<div class="panel panel-default">
<div class="panel-body">
<h1>Your Twitter Feed</h1>
<p>Here is what your friends are saying:</p>
</div>
</div>
<div class="row">
<div class="current-user-profile-box col-md-4 panel panel-default">
<div class="panel-body">
<div class="row">
<h3><%= current_user.name %> </h3>
<p><%= current_user.username %> </p>
</div>
<div class="row">
<div class="col-md-4">
<span class="small-text">TWEETS</span><br />
<%= current_user.tweets.count %>
</div>
<div class="col-md-4">
<span class="small-text">FOLLOWING</span><br />
<%= current_user.following.length %>
</div>
<div class="col-md-4">
<span class="small-text">FOLLOWERS</span><br />
<%= @follower_count %>
</div>
</div>
</div>
</div>
<div class="following-feed-box col-md-7 col-md-offset-1 panel panel-default">
<div class="panel-body">
<% @following_tweets.each do |tweet| %>
<p>
<strong><%= link_to tweet.user.username, user_profile_path(id: tweet.user.id) %>:</strong><br />
<%= tweet.message %>
</p>
<% end %>
</div>
</div>
</div> html_ruby Twitteriffic Nav Bar
Twitteriffic Nav Bar
application.html.erb
<!DOCTYPE html>
<html>
<head>
<title>Twitteriffic</title>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
<%= csrf_meta_tags %>
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<%= link_to "Tweeteriffic", root_path, class: "navbar-brand" %>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-left">
<li><%= link_to "All Tweets", tweets_path %></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<% if user_signed_in? %>
<li><%= link_to "Edit Profile", edit_user_registration_path %></li>
<li><%= link_to "Sign Out", destroy_user_session_path, method: :delete %></li>
<% else %>
<li><%= link_to "Sign Up", new_user_registration_path %></li>
<li><%= link_to "Forgot Password", new_user_password_path %></li>
<% end %>
</ul>
</div>
</div>
</nav>
<%= yield %>
</body>
</html>
html_ruby httpd.conf.erb
httpd.conf.erb
ServerTokens OS
ServerRoot "/etc/httpd"
PidFile run/httpd.pid
Timeout 60
KeepAlive Off
MaxKeepAliveRequests 100
KeepAliveTimeout 15
<IfModule prefork.c>
StartServers 8
MinSpareServers 5
MaxSpareServers 20
ServerLimit 256
MaxClients 256
MaxRequestsPerChild 4000
</IfModule>
<IfModule worker.c>
StartServers 4
MaxClients 300
MinSpareThreads 25
MaxSpareThreads 75
ThreadsPerChild 25
MaxRequestsPerChild 0
</IfModule>
Listen 80
LoadModule auth_basic_module modules/mod_auth_basic.so
LoadModule auth_digest_module modules/mod_auth_digest.so
LoadModule authn_file_module modules/mod_authn_file.so
LoadModule authn_alias_module modules/mod_authn_alias.so
LoadModule authn_anon_module modules/mod_authn_anon.so
LoadModule authn_dbm_module modules/mod_authn_dbm.so
LoadModule authn_default_module modules/mod_authn_default.so
LoadModule authz_host_module modules/mod_authz_host.so
LoadModule authz_user_module modules/mod_authz_user.so
LoadModule authz_owner_module modules/mod_authz_owner.so
LoadModule authz_groupfile_module modules/mod_authz_groupfile.so
LoadModule authz_dbm_module modules/mod_authz_dbm.so
LoadModule authz_default_module modules/mod_authz_default.so
LoadModule ldap_module modules/mod_ldap.so
LoadModule authnz_ldap_module modules/mod_authnz_ldap.so
LoadModule include_module modules/mod_include.so
LoadModule log_config_module modules/mod_log_config.so
LoadModule logio_module modules/mod_logio.so
LoadModule env_module modules/mod_env.so
LoadModule ext_filter_module modules/mod_ext_filter.so
LoadModule mime_magic_module modules/mod_mime_magic.so
LoadModule expires_module modules/mod_expires.so
LoadModule deflate_module modules/mod_deflate.so
LoadModule headers_module modules/mod_headers.so
LoadModule usertrack_module modules/mod_usertrack.so
LoadModule setenvif_module modules/mod_setenvif.so
LoadModule mime_module modules/mod_mime.so
LoadModule dav_module modules/mod_dav.so
LoadModule status_module modules/mod_status.so
LoadModule autoindex_module modules/mod_autoindex.so
LoadModule info_module modules/mod_info.so
LoadModule dav_fs_module modules/mod_dav_fs.so
LoadModule vhost_alias_module modules/mod_vhost_alias.so
LoadModule negotiation_module modules/mod_negotiation.so
LoadModule dir_module modules/mod_dir.so
LoadModule actions_module modules/mod_actions.so
LoadModule speling_module modules/mod_speling.so
LoadModule userdir_module modules/mod_userdir.so
LoadModule alias_module modules/mod_alias.so
LoadModule substitute_module modules/mod_substitute.so
LoadModule rewrite_module modules/mod_rewrite.so
LoadModule proxy_module modules/mod_proxy.so
LoadModule proxy_balancer_module modules/mod_proxy_balancer.so
LoadModule proxy_ftp_module modules/mod_proxy_ftp.so
LoadModule proxy_http_module modules/mod_proxy_http.so
LoadModule proxy_ajp_module modules/mod_proxy_ajp.so
LoadModule proxy_connect_module modules/mod_proxy_connect.so
LoadModule cache_module modules/mod_cache.so
LoadModule suexec_module modules/mod_suexec.so
LoadModule disk_cache_module modules/mod_disk_cache.so
LoadModule cgi_module modules/mod_cgi.so
LoadModule version_module modules/mod_version.so
Include conf.d/*.conf
User apache
Group apache
ServerAdmin root@localhost
UseCanonicalName Off
DocumentRoot "/var/www/html"
<Directory />
Options FollowSymLinks
AllowOverride None
</Directory>
<Directory "/var/www/html">
Options Indexes FollowSymLinks
AllowOverride None
Order allow,deny
Allow from all
</Directory>
<IfModule mod_userdir.c>
UserDir disabled
</IfModule>
DirectoryIndex index.html index.html.var
AccessFileName .htaccess
<Files ~ "^\.ht">
Order allow,deny
Deny from all
Satisfy All
</Files>
TypesConfig /etc/mime.types
DefaultType text/plain
<IfModule mod_mime_magic.c>
MIMEMagicFile conf/magic
</IfModule>
HostnameLookups Off
ErrorLog logs/error_log
LogLevel warn
LogFormat "%h %l %u %t \"%r\" %>s %b \"%{Referer}i\" \"%{User-Agent}i\"" combined
LogFormat "%h %l %u %t \"%r\" %>s %b" common
LogFormat "%{Referer}i -> %U" referer
LogFormat "%{User-agent}i" agent
CustomLog logs/access_log combined
ServerSignature On
Alias /icons/ "/var/www/icons/"
<Directory "/var/www/icons">
Options Indexes MultiViews FollowSymLinks
AllowOverride None
Order allow,deny
Allow from all
</Directory>
<IfModule mod_dav_fs.c>
DAVLockDB /var/lib/dav/lockdb
</IfModule>
ScriptAlias /cgi-bin/ "/var/www/cgi-bin/"
<Directory "/var/www/cgi-bin">
AllowOverride None
Options None
Order allow,deny
Allow from all
</Directory>
IndexOptions FancyIndexing VersionSort NameWidth=* HTMLTable Charset=UTF-8
AddIconByEncoding (CMP,/icons/compressed.gif) x-compress x-gzip
AddIconByType (TXT,/icons/text.gif) text/*
AddIconByType (IMG,/icons/image2.gif) image/*
AddIconByType (SND,/icons/sound2.gif) audio/*
AddIconByType (VID,/icons/movie.gif) video/*
AddIcon /icons/binary.gif .bin .exe
AddIcon /icons/binhex.gif .hqx
AddIcon /icons/tar.gif .tar
AddIcon /icons/world2.gif .wrl .wrl.gz .vrml .vrm .iv
AddIcon /icons/compressed.gif .Z .z .tgz .gz .zip
AddIcon /icons/a.gif .ps .ai .eps
AddIcon /icons/layout.gif .html .shtml .htm .pdf
AddIcon /icons/text.gif .txt
AddIcon /icons/c.gif .c
AddIcon /icons/p.gif .pl .py
AddIcon /icons/f.gif .for
AddIcon /icons/dvi.gif .dvi
AddIcon /icons/uuencoded.gif .uu
AddIcon /icons/script.gif .conf .sh .shar .csh .ksh .tcl
AddIcon /icons/tex.gif .tex
AddIcon /icons/bomb.gif core
AddIcon /icons/back.gif ..
AddIcon /icons/hand.right.gif README
AddIcon /icons/folder.gif ^^DIRECTORY^^
AddIcon /icons/blank.gif ^^BLANKICON^^
DefaultIcon /icons/unknown.gif
ReadmeName README.html
HeaderName HEADER.html
AddLanguage ca .ca
AddLanguage cs .cz .cs
AddLanguage da .dk
AddLanguage de .de
AddLanguage el .el
AddLanguage en .en
AddLanguage eo .eo
AddLanguage es .es
AddLanguage et .et
AddLanguage fr .fr
AddLanguage he .he
AddLanguage hr .hr
AddLanguage it .it
AddLanguage ja .ja
AddLanguage ko .ko
AddLanguage ltz .ltz
AddLanguage nl .nl
AddLanguage nn .nn
AddLanguage no .no
AddLanguage pl .po
AddLanguage pt .pt
AddLanguage pt-BR .pt-br
AddLanguage ru .ru
AddLanguage sv .sv
AddLanguage zh-CN .zh-cn
AddLanguage zh-TW .zh-tw
LanguagePriority en ca cs da de el eo es et fr he hr it ja ko ltz nl nn no pl pt pt-BR ru sv zh-CN zh-TW
ForceLanguagePriority Prefer Fallback
AddDefaultCharset UTF-8
AddType application/x-compress .Z
AddType application/x-gzip .gz .tgz
AddType application/x-x509-ca-cert .crt
AddType application/x-pkcs7-crl .crl
AddHandler type-map var
AddType text/html .shtml
AddOutputFilter INCLUDES .shtml
Alias /error/ "/var/www/error/"
<IfModule mod_negotiation.c>
<IfModule mod_include.c>
<Directory "/var/www/error">
AllowOverride None
Options IncludesNoExec
AddOutputFilter Includes html
AddHandler type-map var
Order allow,deny
Allow from all
LanguagePriority en es de fr
ForceLanguagePriority Prefer Fallback
</Directory>
</IfModule>
</IfModule>
BrowserMatch "Mozilla/2" nokeepalive
BrowserMatch "MSIE 4\.0b2;" nokeepalive downgrade-1.0 force-response-1.0
BrowserMatch "RealPlayer 4\.0" force-response-1.0
BrowserMatch "Java/1\.0" force-response-1.0
BrowserMatch "JDK/1\.0" force-response-1.0
BrowserMatch "Microsoft Data Access Internet Publishing Provider" redirect-carefully
BrowserMatch "MS FrontPage" redirect-carefully
BrowserMatch "^WebDrive" redirect-carefully
BrowserMatch "^WebDAVFS/1.[0123]" redirect-carefully
BrowserMatch "^gnome-vfs/1.0" redirect-carefully
BrowserMatch "^XML Spy" redirect-carefully
BrowserMatch "^Dreamweaver-WebDAV-SCM1" redirect-carefully
html_ruby rails中聊天应用程序的教程代码片段。教程链接http://goo.gl/l3e8zN
rails中聊天应用程序的教程代码片段。教程链接http://goo.gl/l3e8zN
users.js
var ready = function () {
/**
* When the send message link on our home page is clicked
* send an ajax request to our rails app with the sender_id and
* recipient_id
*/
$('.start-conversation').click(function (e) {
e.preventDefault();
var sender_id = $(this).data('sid');
var recipient_id = $(this).data('rip');
$.post("/conversations", { sender_id: sender_id, recipient_id: recipient_id }, function (data) {
chatBox.chatWith(data.conversation_id);
});
});
/**
* Used to minimize the chatbox
*/
$(document).on('click', '.toggleChatBox', function (e) {
e.preventDefault();
var id = $(this).data('cid');
chatBox.toggleChatBoxGrowth(id);
});
/**
* Used to close the chatbox
*/
$(document).on('click', '.closeChat', function (e) {
e.preventDefault();
var id = $(this).data('cid');
chatBox.close(id);
});
/**
* Listen on keypress' in our chat textarea and call the
* chatInputKey in chat.js for inspection
*/
$(document).on('keydown', '.chatboxtextarea', function (event) {
var id = $(this).data('cid');
chatBox.checkInputKey(event, $(this), id);
});
/**
* When a conversation link is clicked show up the respective
* conversation chatbox
*/
$('a.conversation').click(function (e) {
e.preventDefault();
var conversation_id = $(this).data('cid');
chatBox.chatWith(conversation_id);
});
}
$(document).ready(ready);
$(document).on("page:load", ready);
user.rb
class User < ActiveRecord::Base
devise :database_authenticatable, :registerable,
:recoverable, :rememberable, :trackable, :validatable
has_many :conversations, :foreign_key => :sender_id
end
user.html.erb
<% @users.each_with_index do |user, index| %>
<tr>
<td><%= index +=1 %></td>
<td><%= user.name %></td>
<td>
<%= link_to "Send Message", "#", class: "btn btn-success btn-xs start-conversation",
"data-sid" => current_user.id, "data-rip" => user.id %>
</td>
</tr>
<% end %>
show.html.erb
<div class="chatboxhead">
<div class="chatboxtitle">
<i class="fa fa-comments"></i>
<h1><%= @reciever.name %> </h1>
</div>
<div class="chatboxoptions">
<%= link_to "<i class='fa fa-minus'></i> ".html_safe, "#", class: "toggleChatBox", "data-cid" => @conversation.id %>
<%= link_to "<i class='fa fa-times'></i> ".html_safe, "#", class: "closeChat", "data-cid" => @conversation.id %>
</div>
<br clear="all"/>
</div>
<div class="chatboxcontent">
<% if @messages.any? %>
<%= render @messages %>
<% end %>
</div>
<div class="chatboxinput">
<%= form_for([@conversation, @message], :remote => true, :html => {id: "conversation_form_#{@conversation.id}"}) do |f| %>
<%= f.text_area :body, class: "chatboxtextarea", "data-cid" => @conversation.id %>
<% end %>
</div>
<%= subscribe_to conversation_path(@conversation) %>
routes.rb
Rails.application.routes.draw do
devise_for :users
authenticated :user do
root 'users#index'
end
unauthenticated :user do
devise_scope :user do
get "/" => "devise/sessions#new"
end
end
resources :conversations do
resources :messages
end
end
meta.html.erb
<meta content='<%= user_signed_in? ? current_user.id : "" %>' name='user-id'/>
messages_helper.rb
module MessagesHelper
def self_or_other(message)
message.user == current_user ? "self" : "other"
end
def message_interlocutor(message)
message.user == message.conversation.sender ? message.conversation.sender : message.conversation.recipient
end
end
messages_controller.rb
class MessagesController < ApplicationController
before_filter :authenticate_user!
def create
@conversation = Conversation.find(params[:conversation_id])
@message = @conversation.messages.build(message_params)
@message.user_id = current_user.id
@message.save!
@path = conversation_path(@conversation)
end
private
def message_params
params.require(:message).permit(:body)
end
end
message.rb
class Message < ActiveRecord::Base
belongs_to :conversation
belongs_to :user
validates_presence_of :body, :conversation_id, :user_id
end
create_conversations.rb
class CreateConversations < ActiveRecord::Migration
def change
create_table :conversations do |t|
t.integer :sender_id
t.integer :recipient_id
t.timestamps
end
add_index :conversations, :sender_id
add_index :conversations, :recipient_id
end
end
create.js.erb
<% publish_to @path do %>
var id = "<%= @conversation.id %>";
var chatbox = $("#chatbox_" + id + " .chatboxcontent");
var sender_id = "<%= @message.user.id %>";
var reciever_id = $('meta[name=user-id]').attr("content");
chatbox.append("<%= j render( partial: @message ) %>");
chatbox.scrollTop(chatbox[0].scrollHeight);
if(sender_id != reciever_id){
chatBox.chatWith(id);
chatbox.children().last().removeClass("self").addClass("other");
chatbox.scrollTop(chatbox[0].scrollHeight);
chatBox.notify();
}
<% end %>
conversations_controller.rb
class ConversationsController < ApplicationController
before_filter :authenticate_user!
layout false
def create
if Conversation.between(params[:sender_id],params[:recipient_id]).present?
@conversation = Conversation.between(params[:sender_id],params[:recipient_id]).first
else
@conversation = Conversation.create!(conversation_params)
end
render json: { conversation_id: @conversation.id }
end
def show
@conversation = Conversation.find(params[:id])
@reciever = interlocutor(@conversation)
@messages = @conversation.messages
@message = Message.new
end
private
def conversation_params
params.permit(:sender_id, :recipient_id)
end
def interlocutor(conversation)
current_user == conversation.recipient ? conversation.sender : conversation.recipient
end
end
conversation.rb
class Conversation < ActiveRecord::Base
belongs_to :sender, :foreign_key => :sender_id, class_name: 'User'
belongs_to :recipient, :foreign_key => :recipient_id, class_name: 'User'
has_many :messages, dependent: :destroy
validates_uniqueness_of :sender_id, :scope => :recipient_id
scope :involving, -> (user) do
where("conversations.sender_id =? OR conversations.recipient_id =?",user.id,user.id)
end
scope :between, -> (sender_id,recipient_id) do
where("(conversations.sender_id = ? AND conversations.recipient_id =?) OR (conversations.sender_id = ? AND conversations.recipient_id =?)", sender_id,recipient_id, recipient_id, sender_id)
end
end
chat.js
/**
* Chat logic
*
* Most of the js functionality is inspired from anatgarg.com
* jQuery tag Module from the tutorial
* http://anantgarg.com/2009/05/13/gmail-facebook-style-jquery-chat/
*
*/
var chatboxFocus = new Array();
var chatBoxes = new Array();
var ready = function () {
chatBox = {
/**
* creates an inline chatbox on the page by calling the
* createChatBox function passing along the unique conversation_id
*
* @param conversation_id
*/
chatWith: function (conversation_id) {
chatBox.createChatBox(conversation_id);
$("#chatbox_" + conversation_id + " .chatboxtextarea").focus();
},
/**
* closes the chatbox by essentially hiding it from the page
*
* @param conversation_id
*/
close: function (conversation_id) {
$('#chatbox_' + conversation_id).css('display', 'none');
chatBox.restructure();
},
/**
* Plays a notification sound when a new chat message arrives
*/
notify: function () {
var audioplayer = $('#chatAudio')[0];
audioplayer.play();
},
/**
* Handles 'smart layouts' of the chatboxes. Like when new chatboxes are
* added or removed from the view, it restructures them so that they appear
* neatly aligned on the page
*/
restructure: function () {
align = 0;
for (x in chatBoxes) {
chatbox_id = chatBoxes[x];
if ($("#chatbox_" + chatbox_id).css('display') != 'none') {
if (align == 0) {
$("#chatbox_" + chatbox_id).css('right', '20px');
} else {
width = (align) * (280 + 7) + 20;
$("#chatbox_" + chatbox_id).css('right', width + 'px');
}
align++;
}
}
},
/**
* Takes in two parameters. It is responsible for fetching the specific conversation's
* html page and appending it to the body of our home page e.g if conversation_id = 1
*
* $.get("conversations/1, function(data){
* // rest of the logic here
* }, "html")
*
* @param conversation_id
* @param minimizeChatBox
*/
createChatBox: function (conversation_id, minimizeChatBox) {
if ($("#chatbox_" + conversation_id).length > 0) {
if ($("#chatbox_" + conversation_id).css('display') == 'none') {
$("#chatbox_" + conversation_id).css('display', 'block');
chatBox.restructure();
}
$("#chatbox_" + conversation_id + " .chatboxtextarea").focus();
return;
}
$("body").append('<div id="chatbox_' + conversation_id + '" class="chatbox"></div>')
$.get("conversations/" + conversation_id, function (data) {
$('#chatbox_' + conversation_id).html(data);
$("#chatbox_" + conversation_id + " .chatboxcontent").scrollTop($("#chatbox_" + conversation_id + " .chatboxcontent")[0].scrollHeight);
}, "html");
$("#chatbox_" + conversation_id).css('bottom', '0px');
chatBoxeslength = 0;
for (x in chatBoxes) {
if ($("#chatbox_" + chatBoxes[x]).css('display') != 'none') {
chatBoxeslength++;
}
}
if (chatBoxeslength == 0) {
$("#chatbox_" + conversation_id).css('right', '20px');
} else {
width = (chatBoxeslength) * (280 + 7) + 20;
$("#chatbox_" + conversation_id).css('right', width + 'px');
}
chatBoxes.push(conversation_id);
if (minimizeChatBox == 1) {
minimizedChatBoxes = new Array();
if ($.cookie('chatbox_minimized')) {
minimizedChatBoxes = $.cookie('chatbox_minimized').split(/\|/);
}
minimize = 0;
for (j = 0; j < minimizedChatBoxes.length; j++) {
if (minimizedChatBoxes[j] == conversation_id) {
minimize = 1;
}
}
if (minimize == 1) {
$('#chatbox_' + conversation_id + ' .chatboxcontent').css('display', 'none');
$('#chatbox_' + conversation_id + ' .chatboxinput').css('display', 'none');
}
}
chatboxFocus[conversation_id] = false;
$("#chatbox_" + conversation_id + " .chatboxtextarea").blur(function () {
chatboxFocus[conversation_id] = false;
$("#chatbox_" + conversation_id + " .chatboxtextarea").removeClass('chatboxtextareaselected');
}).focus(function () {
chatboxFocus[conversation_id] = true;
$('#chatbox_' + conversation_id + ' .chatboxhead').removeClass('chatboxblink');
$("#chatbox_" + conversation_id + " .chatboxtextarea").addClass('chatboxtextareaselected');
});
$("#chatbox_" + conversation_id).click(function () {
if ($('#chatbox_' + conversation_id + ' .chatboxcontent').css('display') != 'none') {
$("#chatbox_" + conversation_id + " .chatboxtextarea").focus();
}
});
$("#chatbox_" + conversation_id).show();
},
/**
* Responsible for listening to the keypresses when chatting. If the Enter button is pressed,
* we submit our conversation form to our rails app
*
* @param event
* @param chatboxtextarea
* @param conversation_id
*/
checkInputKey: function (event, chatboxtextarea, conversation_id) {
if (event.keyCode == 13 && event.shiftKey == 0) {
event.preventDefault();
message = chatboxtextarea.val();
message = message.replace(/^\s+|\s+$/g, "");
if (message != '') {
$('#conversation_form_' + conversation_id).submit();
$(chatboxtextarea).val('');
$(chatboxtextarea).focus();
$(chatboxtextarea).css('height', '44px');
}
}
var adjustedHeight = chatboxtextarea.clientHeight;
var maxHeight = 94;
if (maxHeight > adjustedHeight) {
adjustedHeight = Math.max(chatboxtextarea.scrollHeight, adjustedHeight);
if (maxHeight)
adjustedHeight = Math.min(maxHeight, adjustedHeight);
if (adjustedHeight > chatboxtextarea.clientHeight)
$(chatboxtextarea).css('height', adjustedHeight + 8 + 'px');
} else {
$(chatboxtextarea).css('overflow', 'auto');
}
},
/**
* Responsible for handling minimize and maximize of the chatbox
*
* @param conversation_id
*/
toggleChatBoxGrowth: function (conversation_id) {
if ($('#chatbox_' + conversation_id + ' .chatboxcontent').css('display') == 'none') {
var minimizedChatBoxes = new Array();
if ($.cookie('chatbox_minimized')) {
minimizedChatBoxes = $.cookie('chatbox_minimized').split(/\|/);
}
var newCookie = '';
for (i = 0; i < minimizedChatBoxes.length; i++) {
if (minimizedChatBoxes[i] != conversation_id) {
newCookie += conversation_id + '|';
}
}
newCookie = newCookie.slice(0, -1)
$.cookie('chatbox_minimized', newCookie);
$('#chatbox_' + conversation_id + ' .chatboxcontent').css('display', 'block');
$('#chatbox_' + conversation_id + ' .chatboxinput').css('display', 'block');
$("#chatbox_" + conversation_id + " .chatboxcontent").scrollTop($("#chatbox_" + conversation_id + " .chatboxcontent")[0].scrollHeight);
} else {
var newCookie = conversation_id;
if ($.cookie('chatbox_minimized')) {
newCookie += '|' + $.cookie('chatbox_minimized');
}
$.cookie('chatbox_minimized', newCookie);
$('#chatbox_' + conversation_id + ' .chatboxcontent').css('display', 'none');
$('#chatbox_' + conversation_id + ' .chatboxinput').css('display', 'none');
}
}
}
/**
* Cookie plugin
*
* Copyright (c) 2006 Klaus Hartl (stilbuero.de)
* Dual licensed under the MIT and GPL licenses:
* http://www.opensource.org/licenses/mit-license.php
* http://www.gnu.org/licenses/gpl.html
*
*/
jQuery.cookie = function (name, value, options) {
if (typeof value != 'undefined') { // name and value given, set cookie
options = options || {};
if (value === null) {
value = '';
options.expires = -1;
}
var expires = '';
if (options.expires && (typeof options.expires == 'number' || options.expires.toUTCString)) {
var date;
if (typeof options.expires == 'number') {
date = new Date();
date.setTime(date.getTime() + (options.expires * 24 * 60 * 60 * 1000));
} else {
date = options.expires;
}
expires = '; expires=' + date.toUTCString(); // use expires attribute, max-age is not supported by IE
}
// CAUTION: Needed to parenthesize options.path and options.domain
// in the following expressions, otherwise they evaluate to undefined
// in the packed version for some reason...
var path = options.path ? '; path=' + (options.path) : '';
var domain = options.domain ? '; domain=' + (options.domain) : '';
var secure = options.secure ? '; secure' : '';
document.cookie = [name, '=', encodeURIComponent(value), expires, path, domain, secure].join('');
} else { // only name given, get cookie
var cookieValue = null;
if (document.cookie && document.cookie != '') {
var cookies = document.cookie.split(';');
for (var i = 0; i < cookies.length; i++) {
var cookie = jQuery.trim(cookies[i]);
// Does this cookie string begin with the name we want?
if (cookie.substring(0, name.length + 1) == (name + '=')) {
cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
break;
}
}
}
return cookieValue;
}
};
}
$(document).ready(ready);
$(document).on("page:load", ready);
chat.css
/**
* GMAIL Like chat css
* CREDITS: http://css-tricks.com/replicating-google-hangouts-chat/
*
*/
.chatbox {
position: fixed;
position: expression("absolute");
width: 280px;
display: none;
}
.chatboxhead {
background: #666;
color: white;
padding: 0.5rem;
overflow: hidden;
border-right: 1px solid rgba(85, 85, 85, 0.87);
border-left: 1px solid rgba(85, 85, 85, 0.87);
}
.chatboxhead h1 {
display: inline;
font-size: 17px;
font-weight: 700;
}
.chatboxblink {
background-color: #176689;
border-right: 1px solid #176689;
border-left: 1px solid #176689;
}
.chatboxcontent {
font-family: arial, sans-serif;
height: 280px;
width: 280px;
overflow-y: auto;
padding: 7px;
border-left: 1px solid #cccccc;
border-right: 1px solid #cccccc;
border-bottom: 1px solid #eeeeee;
background: #e5e5e5;
line-height: 1.3em;
list-style: none;
}
.chatboxcontent li {
padding: 0.5rem;
overflow: hidden;
display: flex;
}
.chatboxcontent .avatar {
width: 40px;
position: relative;
}
.chatboxcontent .avatar img {
display: block;
width: 100%;
}
.other .avatar:after {
content: "";
position: absolute;
top: 0;
right: 0;
width: 0;
height: 0;
border: 5px solid white;
border-left-color: transparent;
border-bottom-color: transparent;
}
.self {
justify-content: flex-end;
align-items: flex-end;
}
.self .chatboxmessagecontent {
order: 1;
border-bottom-right-radius: 0;
}
.self .avatar {
order: 2;
}
.self .avatar:after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 0;
border: 5px solid white;
border-right-color: transparent;
border-top-color: transparent;
box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}
.chatboxmessagecontent {
background: white;
padding: 10px;
border-radius: 2px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
.chatboxmessagecontent p {
font-size: 12px;
margin: 0 0 0.2rem 0;
-ms-word-break: break-all;
/* Non standard for webkit */
word-break: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
}
.chatboxmessagecontent time {
font-size: 9px;
color: #ccc;
}
.chatboxinput {
padding: 5px;
background-color: #ffffff;
border-left: 1px solid #cccccc;
border-right: 1px solid #cccccc;
border-bottom: 1px solid #cccccc;
}
.chatboxtextarea {
width: 262px;
height: 44px;
padding: 3px 0pt 3px 3px;
border: 1px solid #eeeeee;
margin: 1px;
overflow: hidden;
resize: none !important;
}
.chatboxtextareaselected {
border: 2px solid #878787;
margin: 0;
}
.chatboxmessage {
margin-left: 1em;
}
.chatboxinfo {
margin-left: -1em;
color: #666666;
}
.chatboxoptions {
float: right;
}
.chatboxoptions a {
text-decoration: none;
color: white;
font-weight: bold;
}
.chatboxtitle {
float: left;
}
application.html.erb
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<meta content='<%= user_signed_in? ? current_user.id : "" %>' name='user-id'/>
<title>Chatty</title>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
<%= stylesheet_link_tag '//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css' %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
<%= csrf_meta_tags %>
<!-- shiv here -->
</head>
<body>
<%= render 'layouts/nav' %>
<div class="container">
<!-- flash messages here -->
<%= yield %>
</div>
<audio id="chatAudio"><source src="/sounds/notification.mp3" type="audio/mpeg"></audio>
</body>
</html>
_message.html.erb
<li class="<%= self_or_other(message) %>">
<div class="avatar">
<img src="http://placehold.it/50x50" />
</div>
<div class="chatboxmessagecontent">
<p><%= message.body %></p>
<time datetime="<%= message.created_at %>" title="<%= message.created_at.strftime("%d %b %Y at %I:%M%p") %>">
<%= message_interlocutor(message).name %> • <%= message.created_at.strftime("%H:%M %p") %>
</time>
</div>
</li>html_ruby RNB，Vim colorscheme模板
RNB，Vim colorscheme模板
rnb.erb
<%
# RNB, A VIM COLORSCHEME TEMPLATE
# Author: Romain Lafourcade (https://github.com/romainl)
# Canonical URL: https://gist.github.com/romainl/5cd2f4ec222805f49eca
# This template is designed to help vimmers create their own colorschemes
# without much effort.
#
# You will need Ruby to generate your colorscheme but Ruby knowledge is
# not needed at all.
#
# The process is divided in four steps:
# 1. start by editing your colorscheme's information,
# 2. define your colors,
# 3. define your highlight groups and links,
# 4. and generate your colorscheme.
# Step 1: information
#
# Make sure the name of your colorscheme is unique and attractive.
# The description should fit in a single line with no linefeed.
# 'background' can be "light" or "dark".
information = {
author: "foo",
email: "foo@foo.foo",
name: "bar",
description: "Lorem ipsum dolor sit amet.",
background: "light",
webpage: "http://www.example.com"
}
# Step 2: colors
#
# black = [ give each color a distinctive name
# "#000000", hexadecimal color for GVim/MacVim
# 0, integer between 0 and 255 for terminals supporting 256 colors
# "black" color name for color terminals, can be "darkred", "red", "darkgreen",
# "green", "darkyellow", "yellow", "darkblue", "blue", "darkmagenta",
# "magenta", "black", "darkgrey", "grey", "white"
# ]
#
# If your colors are defined correctly, the resulting colorscheme is guaranteed
# to work in GVim (Windows/Linux), MacVim, and any properly set up terminal emulator.
#
# The colors below are the first 16 colors of the xterm palette. They
# are only here as an example so you can get rid of them, I won't be mad.
black = ["#000000", 0, "black"]
darkred = ["#800000", 1, "darkred"]
darkgreen = ["#008000", 2, "darkgreen"]
darkyellow = ["#808000", 3, "darkyellow"]
darkblue = ["#000080", 4, "darkblue"]
darkmagenta = ["#800080", 5, "darkmagenta"]
darkcyan = ["#008080", 6, "darkcyan"]
gray = ["#c0c0c0", 7, "gray"]
darkgray = ["#808080", 8, "darkgray"]
red = ["#ff0000", 9, "red"]
green = ["#00ff00", 10, "green"]
yellow = ["#ffff00", 11, "yellow"]
blue = ["#0000ff", 12, "blue"]
magenta = ["#ff00ff", 13, "magenta"]
cyan = ["#00ffff", 14, "cyan"]
white = ["#ffffff", 15, "white"]
# Step 3: highlights
#
# You can define highlight groups like this:
# [ "Normal", name of the highlight group
# white, the color used for background color, or use "NONE", "fg" or "bg"
# darkgray, the color used for foreground color, or use "NONE", "fg" or "bg"
# "NONE" style, can be "bold", "underline", "reverse", "italic",
# "standout", "NONE" or "undercurl"
# ]
#
# or link an highlight group to another:
# [ "Title", "Normal" ]
#
# In GUI Vim, there is an additional color for the undercurl used to
# highlighting spelling mistakes:
# [ "SpellBad", name of the highlight group
# "NONE", the color used for background color, or use "NONE", "fg" or "bg"
# red, the color used for foreground color, or use "NONE", "fg" or "bg"
# "undercurl", style
# red color used for the undercurl
# ]
#
# The highlight groups below are fairly standard and should give you a
# working colorscheme. Some syntax scripts and plugins may define their own, though,
# so feel free to add them to this array as needed.
highlights = [
[ "Normal", white, darkgray, "NONE" ],
[ "NonText", white, darkgray, "NONE" ],
[ "Comment", white, darkgray, "NONE" ],
[ "Constant", white, darkgray, "NONE" ],
[ "Error", white, darkgray, "NONE" ],
[ "Identifier", white, darkgray, "NONE" ],
[ "Ignore", white, darkgray, "NONE" ],
[ "PreProc", white, darkgray, "NONE" ],
[ "Special", white, darkgray, "NONE" ],
[ "Statement", white, darkgray, "NONE" ],
[ "String", white, darkgray, "NONE" ],
[ "Number", white, darkgray, "NONE" ],
[ "Todo", white, darkgray, "NONE" ],
[ "Type", white, darkgray, "NONE" ],
[ "Underlined", white, darkgray, "NONE" ],
[ "StatusLine", white, darkgray, "NONE" ],
[ "StatusLineNC", white, darkgray, "NONE" ],
[ "VertSplit", white, darkgray, "NONE" ],
[ "TabLine", white, darkgray, "NONE" ],
[ "TabLineFill", white, darkgray, "NONE" ],
[ "TabLineSel", white, darkgray, "NONE" ],
[ "Title", white, darkgray, "NONE" ],
[ "CursorLine", white, darkgray, "NONE" ],
[ "LineNr", white, darkgray, "NONE" ],
[ "CursorLineNr", white, darkgray, "NONE" ],
[ "helpLeadBlank", white, darkgray, "NONE" ],
[ "helpNormal", white, darkgray, "NONE" ],
[ "Visual", white, darkgray, "NONE" ],
[ "VisualNOS", white, darkgray, "NONE" ],
[ "Pmenu", white, darkgray, "NONE" ],
[ "PmenuSbar", white, darkgray, "NONE" ],
[ "PmenuSel", white, darkgray, "NONE" ],
[ "PmenuThumb", white, darkgray, "NONE" ],
[ "FoldColumn", white, darkgray, "NONE" ],
[ "Folded", white, darkgray, "NONE" ],
[ "WildMenu", white, darkgray, "NONE" ],
[ "SpecialKey", white, darkgray, "NONE" ],
[ "DiffAdd", white, darkgray, "NONE" ],
[ "DiffChange", white, darkgray, "NONE" ],
[ "DiffDelete", white, darkgray, "NONE" ],
[ "DiffText", white, darkgray, "NONE" ],
[ "IncSearch", white, darkgray, "NONE" ],
[ "Search", white, darkgray, "NONE" ],
[ "Directory", white, darkgray, "NONE" ],
[ "MatchParen", white, darkgray, "NONE" ],
[ "SpellBad", white, darkgray, "NONE", red ],
[ "SpellCap", white, darkgray, "NONE", blue ],
[ "SpellLocal", white, darkgray, "NONE", magenta ],
[ "SpellRare", white, darkgray, "NONE", cyan ],
[ "ColorColumn", white, darkgray, "NONE" ],
[ "signColumn", white, darkgray, "NONE" ],
[ "ErrorMsg", white, darkgray, "NONE" ],
[ "ModeMsg", white, darkgray, "NONE" ],
[ "MoreMsg", white, darkgray, "NONE" ],
[ "Question", white, darkgray, "NONE" ],
[ "WarningMsg", white, darkgray, "NONE" ],
[ "Cursor", white, darkgray, "NONE" ],
[ "CursorColumn", white, darkgray, "NONE" ]
]
# Step 4: generation
#
# From a separate shell:
# $ erb -T - bar.erb > bar.vim
#
# From Vim:
# :!erb -T - % > %:r.vim
# These online resources can help you design your colorscheme:
# * http://upload.wikimedia.org/wikipedia/en/1/15/Xterm_256color_chart.svg
# the xterm palette
# * http://whatcolor.herokuapp.com/
# play with hexadecimal colors right in the address bar (currently down)
# * http://color.hailpixel.com/
# similar concept, fuzzier implementation
# * http://colourco.de/
# similar concept, fancier implementation
# * http://www.colr.org/
# extract a palette from an image
# * http://colores.manugarri.com/
# search for 'word', get images and color palettes
# * http://www.colourlovers.com/palettes
# user-created palettes
# * http://www.perbang.dk/color+scheme/
# a no-nonsense colorscheme generator
# * https://color.adobe.com/
# Adobe's fancy colorscheme generator
# * http://paletton.com/
# The classic 'Color Scheme Designer', rebranded
# A few general advices:
# * The Windows console is limited to the 16 "ANSI" colors but it has a few of
# them interverted which makes numbers impractical. Use color names instead:
# :help cterm-colors
# * The Windows console (yeah…) doesn't do italics, underlines or bolded text;
# it is limited to normal and reverse. Keep that in mind if you want
# your colorscheme to be usable in as many environments as possible by as many
# people as possible.
# * All of the terminal emulators in use these days allow their users to
# change the 16 so-called "ANSI" colors. It is also possible on some platforms
# to change some or all of the 256 colors in the xterm palette. Don't take
# anything for granted.
# * When used against a light background, strong colors work better than muted
# ones. Light or dark does'nt really matters. Also, it is harder to discriminate
# between two similar colors on a light background.
# * Both stong and muted colors work well against a dark background. It is also
# easier to work with similar colors, but dark colors don't work at all.
# * Use as many text samples as possible. String-heavy languages may look completely
# different than keyword-heavy ones. This can have an impact on the usability
# of your colorscheme.
# * Most terminal emulators and terminal multiplexers currently in use on unix-like
# systems support 256 color but they almost always default to a '$TERM' that tells
# Vim otherwise. Your users will need to make sure their terminal emulator/multiplexer
# is correctly set up if they want to enjoy the best possible experience.
# Many thanks to Barry Arthur (https://github.com/dahu) for the original idea.
# You don't need to edit anything beyond this line.
-%>
" <%= information[:name] %>.vim -- Vim color scheme.
" Author: <%= information[:author] %> (<%= information[:email] %>)
" Webpage: <%= information[:webpage] %>
" Description: <%= information[:description] %>
hi clear
if exists("syntax_on")
syntax reset
endif
let colors_name = "<%= information[:name] %>"
if &t_Co >= 256 || has("gui_running")
<% for highlight in highlights -%>
<% if highlight.length == 2 -%>
hi link <%= highlight[0] %> <%= highlight[1] %>
<% elsif highlight.length == 4 -%>
hi <%= highlight[0] %> ctermbg=<%= highlight[1].kind_of?(String) ? highlight[1] : highlight[1][1] %> ctermfg=<%= highlight[2].kind_of?(String) ? highlight[2] : highlight[2][1] %> cterm=<%= highlight[3] %> guibg=<%= highlight[1].kind_of?(String) ? highlight[1] : highlight[1][0] %> guifg=<%= highlight[2].kind_of?(String) ? highlight[2] : highlight[2][0] %> gui=<%= highlight[3] %>
<% if highlight[0] == "Normal" -%>
set background=<%= information[:background] %>
<% end -%>
<% else -%>
hi <%= highlight[0] %> ctermbg=<%= highlight[1].kind_of?(String) ? highlight[1] : highlight[1][1] %> ctermfg=<%= highlight[2].kind_of?(String) ? highlight[2] : highlight[2][1] %> cterm=<%= highlight[3] %> guibg=<%= highlight[1].kind_of?(String) ? highlight[1] : highlight[1][0] %> guifg=<%= highlight[2].kind_of?(String) ? highlight[2] : highlight[2][0] %> gui=<%= highlight[3] %> guisp=<%= highlight[4].kind_of?(String) ? highlight[4] : highlight[4][0] %>
<% end -%>
<% end -%>
elseif &t_Co == 8 || $TERM !~# '^linux' || &t_Co == 16
set t_Co=16
<% for highlight in highlights -%>
<% if highlight.length == 2 -%>
hi link <%= highlight[0] %> <%= highlight[1] %>
<% else -%>
hi <%= highlight[0] %> ctermbg=<%= highlight[1].kind_of?(String) ? highlight[1] : highlight[1][2] %> ctermfg=<%= highlight[2].kind_of?(String) ? highlight[2] : highlight[2][2] %> cterm=<%= highlight[3] %>
<% if highlight[0] == "Normal" -%>
set background=<%= information[:background] %>
<% end -%>
<% end -%>
<% end -%>
endif
" Generated with RNB (https://gist.github.com/romainl/5cd2f4ec222805f49eca)
html_ruby haproxy.cfg.erb
haproxy.cfg.erb
haproxy.cfg.erb
global
log 127.0.0.1 local0
log 127.0.0.1 local1 notice
#log loghost local0 info
maxconn 4096
user haproxy
group haproxy
stats socket /var/run/haproxy.sock user haproxy group haproxy
defaults
log global
mode http
retries 3
timeout client 50s
timeout connect 5s
timeout server 50s
option dontlognull
option httplog
option redispatch
balance roundrobin
frontend http
maxconn 2000
bind 0.0.0.0:80
default_backend servers-http
backend servers-http
mode http
<% @pool_members.each do |member| -%>
server <%= member[:hostname] %> <%= member[:ipaddress] %>:<%= node["myapache"]["port"] %> weight 1 maxconn 1 check
<% end -%>
html_ruby index.html.erb
index.html.erb
index.html.erb
<h1>Hello, <%= node["myapache"]["greeting"] %></h1>
<p>
This is a <%= node["platform"] %> <%= node["platform_version"] %> server with <%= node["memory"]["total"] %> RAM.
<br><br>
The CentOS servers in your organization have the following FQDN/IP Addresses:-
<ul>
<% @nodes.each do |node| %>
<li><%= node['fqdn'] %> / <%= node['cloud']['public_ipv4'] %></li>
<% end %>
</ul>
</p>