primero
Este commit está contenido en:
2
chat/README.md
Archivo ejecutable
2
chat/README.md
Archivo ejecutable
@@ -0,0 +1,2 @@
|
||||
# chatSocketAchex
|
||||
http://oscaruhp.github.io/chatSocketAchex
|
||||
59
chat/chatSocketAchex.css
Archivo ejecutable
59
chat/chatSocketAchex.css
Archivo ejecutable
@@ -0,0 +1,59 @@
|
||||
.chatpluginchat
|
||||
{
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.chatpluginchat li
|
||||
{
|
||||
margin-bottom: 10px;
|
||||
padding-bottom: 5px;
|
||||
border-bottom: 1px dotted #B3A9A9;
|
||||
}
|
||||
|
||||
.chatpluginchat li.left .chat-body
|
||||
{
|
||||
margin-left: 60px;
|
||||
}
|
||||
|
||||
.chatpluginchat li.right .chat-body
|
||||
{
|
||||
margin-right: 60px;
|
||||
}
|
||||
|
||||
|
||||
.chatpluginchat li .chat-body p
|
||||
{
|
||||
margin: 0;
|
||||
color: #777777;
|
||||
}
|
||||
|
||||
.panel .slidedown .glyphicon, .chatpluginchat .glyphicon
|
||||
{
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.panel-body
|
||||
{
|
||||
overflow-y: scroll;
|
||||
height: 250px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track
|
||||
{
|
||||
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
|
||||
background-color: #F5F5F5;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar
|
||||
{
|
||||
width: 12px;
|
||||
background-color: #F5F5F5;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb
|
||||
{
|
||||
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
|
||||
background-color: #555;
|
||||
}
|
||||
155
chat/chatSocketAchex.js
Archivo ejecutable
155
chat/chatSocketAchex.js
Archivo ejecutable
@@ -0,0 +1,155 @@
|
||||
$.fn.extend({ChatSocket: function(opciones) {
|
||||
var ChatSocket=this;
|
||||
|
||||
var idChat=$(ChatSocket).attr('id');
|
||||
defaults = {
|
||||
ws,
|
||||
Room:"RoomDeveloteca",
|
||||
pass:"1234",
|
||||
lblTitulChat:" Chat Develoteca.com ",
|
||||
lblCampoEntrada:"Menssage",
|
||||
lblEnviar:"Send",
|
||||
textoAyuda:"Develoteca",
|
||||
Nombre:"Anónimo",
|
||||
|
||||
urlImg:"http://placehold.it/50/55C1E7/fff&text=U",
|
||||
btnEntrar:"btnEntrar",
|
||||
btnEnviar:"btnEnviar",
|
||||
lblBtnEnviar:"Enviar",
|
||||
lblTxtEntrar:"txtEntrar",
|
||||
lblTxtEnviar:"txtMensaje",
|
||||
lblBtnEntrar:"Enter",
|
||||
idDialogo:"DialogoEntrada",
|
||||
classChat:"",
|
||||
idOnline:"ListaOnline",
|
||||
lblUsuariosOnline:"Users joined",
|
||||
lblEntradaNombre:"Name:",
|
||||
panelColor:"success"
|
||||
}
|
||||
|
||||
var opciones = $.extend({}, defaults, opciones);
|
||||
|
||||
var ws;
|
||||
var Room=opciones.Room;
|
||||
var pass=opciones.pass;
|
||||
var lblTitulChat=opciones.lblTitulChat;
|
||||
var lblCampoEntrada=opciones.lblCampoEntrada;
|
||||
var lblEnviar=opciones.lblBtnEnviar;
|
||||
var textoAyuda=opciones.textoAyuda;
|
||||
var Nombre=opciones.Nombre;
|
||||
|
||||
var urlImg=opciones.urlImg;
|
||||
var btnEntrar=opciones.btnEntrar;
|
||||
var btnEnviar=opciones.btnEnviar;
|
||||
var lblBtnEnviar=opciones.lblBtnEnviar;
|
||||
var lblTxtEntrar=opciones.lblTxtEntrar;
|
||||
var lblTxtEnviar=opciones.lblTxtEnviar;
|
||||
var lblBtnEntrar=opciones.lblBtnEntrar;
|
||||
var idDialogo=opciones.idDialogo;
|
||||
var classChat=opciones.classChat;
|
||||
var idOnline=opciones.idOnline;
|
||||
var lblUsuariosOnline=opciones.lblUsuariosOnline;
|
||||
var lblEntradaNombre=opciones.lblEntradaNombre;
|
||||
var panelColor=opciones.panelColor;
|
||||
if( $('#'+idOnline).length==0 )
|
||||
{
|
||||
idOnline=idChat+"listaOnline";
|
||||
$('#'+idChat).append('<br/><div id="'+idOnline+'"></div>');
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
function IniciarConexion(){
|
||||
conex='{"setID":"'+Room+'","passwd":"'+pass+'"}';
|
||||
ws= new WebSocket("ws://achex.ca:4010");
|
||||
ws.onopen= function(){ ws.send(conex); }
|
||||
ws.onmessage= function(Mensajes){
|
||||
var MensajesObtenidos=Mensajes.data;
|
||||
var obj = jQuery.parseJSON(MensajesObtenidos);
|
||||
AgregarItem(obj);
|
||||
|
||||
if(obj.sID!=null){
|
||||
|
||||
|
||||
if( $('#'+obj.sID).length==0 )
|
||||
{
|
||||
|
||||
$('#listaOnline').append('<li class="list-group-item" id="'+obj.sID+'"><span class="label label-success">●</span> - '+obj.Nombre+'</li>');
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
ws.onclose= function(){
|
||||
alert("Conexión cerrada");
|
||||
}
|
||||
}
|
||||
IniciarConexion();
|
||||
function iniciarChat(){
|
||||
Nombre=$('#'+lblTxtEntrar).val();
|
||||
$('#'+idDialogo).hide();
|
||||
$('#'+idOnline).show();
|
||||
|
||||
CrearChat();
|
||||
UsuarioOnline();
|
||||
getOnline();
|
||||
}
|
||||
|
||||
function CrearEntrada(){
|
||||
$('#'+idChat).append('<div id="'+idDialogo+'" class="'+classChat+'" id="InputNombre"><div class="panel-footer" style="margin-top:100px;"><div class="input-group"><input id="'+lblTxtEntrar+'" type="text" class="form-control input-sm" placeholder="'+lblEntradaNombre+'"><span class="input-group-btn"><button id="'+btnEntrar+'" class="btn btn-success btn-sm" >'+lblBtnEntrar+'</button></span></div></div></div>');
|
||||
$('#'+idOnline).append(' <div class="panel panel-'+panelColor+'"><div class="panel-heading"><span class="glyphicon glyphicon-user"></span> '+lblUsuariosOnline+'</div><div class="panel-body"><ul class="list-group" id="listaOnline"></ul></div><div class="panel-footer"><div class="input-group"><div><a href="http://develoteca.com">by develoteca.com</a></div></span></div></div></div>');
|
||||
$("#"+lblTxtEntrar).keyup(function (e) {if (e.keyCode == 13) { iniciarChat(); }});
|
||||
$("#"+btnEntrar).click(function(){
|
||||
iniciarChat();
|
||||
});
|
||||
}
|
||||
function CrearChat(){
|
||||
$('#'+idChat ).append( '<div class="'+classChat+'"><div class="panel panel-'+panelColor+'"><div class="panel-heading"><span class="glyphicon glyphicon-comment"></span>'+lblTitulChat+" : "+Nombre+'<div class="btn-group pull-right"><button type="button" onclick="alert(\''+textoAyuda+'\')" class="btn btn-default btn-xs dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-chevron-down"></span></button></div></div><div class="panel-body"><ul class="chatpluginchat"></ul></div><div class="panel-footer"><div class="input-group"><input id="'+lblTxtEnviar+'" type="text" class="form-control input-sm" placeholder="'+lblCampoEntrada+'" /><span class="input-group-btn"><button class="btn btn-warning btn-sm" id="'+btnEnviar+'">'+lblEnviar+'</button></span></div></div></div></div><li class="left clearfix itemtemplate" style="display:none"><span class="chat-img pull-left"><img src="'+urlImg+'" alt="User Avatar" class="img-circle" id="Foto"/></span><div class="chat-body clearfix"><div class="header"><strong class="primary-font" id="Nombre">Nombre</strong><small class="pull-right text-muted"><span class="glyphicon glyphicon-asterisk"></span><span id="Tiempo">12 mins ago</span></small></div> <p id="Contenido">Contenido</p></div></li>');
|
||||
|
||||
$("#"+lblTxtEnviar).keyup(function (e) {if (e.keyCode == 13) { EnviarMensaje();}});
|
||||
$("#"+btnEnviar).click(function () {EnviarMensaje();});
|
||||
|
||||
}
|
||||
|
||||
function EnviarMensaje(){
|
||||
ws.send('{"to":"'+Room+'","Nombre":"'+Nombre+'","Contenido":"'+$('#'+lblTxtEnviar).val()+'"}');
|
||||
$("#"+lblTxtEnviar).val('');
|
||||
|
||||
};
|
||||
function UsuarioOnline(){
|
||||
ws.send('{"to":"'+Room+'","Nombre":"'+Nombre+'"}');
|
||||
}
|
||||
function AgregarItem(Obj){
|
||||
|
||||
if((Obj.Contenido!=null)&&(Obj.Nombre!=null)){
|
||||
|
||||
$( ".itemtemplate" ).clone().appendTo( ".chatpluginchat" );
|
||||
$('.chatpluginchat .itemtemplate').show(10);
|
||||
$('.chatpluginchat .itemtemplate #Nombre').html(Obj.Nombre);
|
||||
$('.chatpluginchat .itemtemplate #Contenido').html(Obj.Contenido);
|
||||
|
||||
var formattedDate = new Date();
|
||||
var d = formattedDate.getUTCDate();
|
||||
var m = formattedDate.getMonth();
|
||||
var y = formattedDate.getFullYear();
|
||||
var h= formattedDate.getHours();
|
||||
var min= formattedDate.getMinutes();
|
||||
|
||||
Fecha=d+"/"+m+"/"+y+" "+h+":"+min;
|
||||
|
||||
$('.chatpluginchat .itemtemplate #Tiempo').html(Fecha);
|
||||
$('.chatpluginchat .itemtemplate').removeClass("itemtemplate");
|
||||
}
|
||||
}
|
||||
function getOnline() {
|
||||
setInterval(UsuarioOnline, 3000);
|
||||
}
|
||||
|
||||
|
||||
CrearEntrada();
|
||||
// Fin
|
||||
|
||||
}
|
||||
});
|
||||
5
chat/css/bootstrap.min.css
vendido
Archivo ejecutable
5
chat/css/bootstrap.min.css
vendido
Archivo ejecutable
Las diferiencias del archivo han sido suprimidas porque una o mas lineas son muy largas
232
chat/css/prism.css
Archivo ejecutable
232
chat/css/prism.css
Archivo ejecutable
@@ -0,0 +1,232 @@
|
||||
/* http://prismjs.com/download.html?themes=prism-coy&languages=markup+css+clike+javascript */
|
||||
/**
|
||||
* prism.js Coy theme for JavaScript, CoffeeScript, CSS and HTML
|
||||
* Based on https://github.com/tshedor/workshop-wp-theme (Example: http://workshop.kansan.com/category/sessions/basics or http://workshop.timshedor.com/category/sessions/basics);
|
||||
* @author Tim Shedor
|
||||
*/
|
||||
|
||||
code[class*="language-"],
|
||||
pre[class*="language-"] {
|
||||
color: black;
|
||||
font-family: Consolas, Monaco, 'Andale Mono', monospace;
|
||||
direction: ltr;
|
||||
text-align: left;
|
||||
white-space: pre;
|
||||
word-spacing: normal;
|
||||
word-break: normal;
|
||||
line-height: 1.5;
|
||||
|
||||
-moz-tab-size: 4;
|
||||
-o-tab-size: 4;
|
||||
tab-size: 4;
|
||||
|
||||
-webkit-hyphens: none;
|
||||
-moz-hyphens: none;
|
||||
-ms-hyphens: none;
|
||||
hyphens: none;
|
||||
}
|
||||
|
||||
/* Code blocks */
|
||||
pre[class*="language-"] {
|
||||
position: relative;
|
||||
margin: .5em 0;
|
||||
-webkit-box-shadow: -1px 0px 0px 0px #358ccb, 0px 0px 0px 1px #dfdfdf;
|
||||
-moz-box-shadow: -1px 0px 0px 0px #358ccb, 0px 0px 0px 1px #dfdfdf;
|
||||
box-shadow: -1px 0px 0px 0px #358ccb, 0px 0px 0px 1px #dfdfdf;
|
||||
border-left: 10px solid #358ccb;
|
||||
background-color: #fdfdfd;
|
||||
background-image: -webkit-linear-gradient(transparent 50%, rgba(69, 142, 209, 0.04) 50%);
|
||||
background-image: -moz-linear-gradient(transparent 50%, rgba(69, 142, 209, 0.04) 50%);
|
||||
background-image: -ms-linear-gradient(transparent 50%, rgba(69, 142, 209, 0.04) 50%);
|
||||
background-image: -o-linear-gradient(transparent 50%, rgba(69, 142, 209, 0.04) 50%);
|
||||
background-image: linear-gradient(transparent 50%, rgba(69, 142, 209, 0.04) 50%);
|
||||
background-size: 3em 3em;
|
||||
background-origin: content-box;
|
||||
overflow: visible;
|
||||
max-height: 30em;
|
||||
}
|
||||
|
||||
code[class*="language"] {
|
||||
max-height: inherit;
|
||||
height: 100%;
|
||||
padding: 0 1em;
|
||||
display: block;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
/* Margin bottom to accomodate shadow */
|
||||
:not(pre) > code[class*="language-"],
|
||||
pre[class*="language-"] {
|
||||
background-color: #fdfdfd;
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
/* Inline code */
|
||||
:not(pre) > code[class*="language-"] {
|
||||
position: relative;
|
||||
padding: .2em;
|
||||
-webkit-border-radius: 0.3em;
|
||||
-moz-border-radius: 0.3em;
|
||||
-ms-border-radius: 0.3em;
|
||||
-o-border-radius: 0.3em;
|
||||
border-radius: 0.3em;
|
||||
color: #c92c2c;
|
||||
border: 1px solid rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
pre[class*="language-"]:before,
|
||||
pre[class*="language-"]:after {
|
||||
content: '';
|
||||
z-index: -2;
|
||||
display: block;
|
||||
position: absolute;
|
||||
bottom: 0.75em;
|
||||
left: 0.18em;
|
||||
width: 40%;
|
||||
height: 20%;
|
||||
-webkit-box-shadow: 0px 13px 8px #979797;
|
||||
-moz-box-shadow: 0px 13px 8px #979797;
|
||||
box-shadow: 0px 13px 8px #979797;
|
||||
-webkit-transform: rotate(-2deg);
|
||||
-moz-transform: rotate(-2deg);
|
||||
-ms-transform: rotate(-2deg);
|
||||
-o-transform: rotate(-2deg);
|
||||
transform: rotate(-2deg);
|
||||
}
|
||||
|
||||
:not(pre) > code[class*="language-"]:after,
|
||||
pre[class*="language-"]:after {
|
||||
right: 0.75em;
|
||||
left: auto;
|
||||
-webkit-transform: rotate(2deg);
|
||||
-moz-transform: rotate(2deg);
|
||||
-ms-transform: rotate(2deg);
|
||||
-o-transform: rotate(2deg);
|
||||
transform: rotate(2deg);
|
||||
}
|
||||
|
||||
.token.comment,
|
||||
.token.block-comment,
|
||||
.token.prolog,
|
||||
.token.doctype,
|
||||
.token.cdata {
|
||||
color: #7D8B99;
|
||||
}
|
||||
|
||||
.token.punctuation {
|
||||
color: #5F6364;
|
||||
}
|
||||
|
||||
.token.property,
|
||||
.token.tag,
|
||||
.token.boolean,
|
||||
.token.number,
|
||||
.token.function-name,
|
||||
.token.constant,
|
||||
.token.symbol,
|
||||
.token.deleted {
|
||||
color: #c92c2c;
|
||||
}
|
||||
|
||||
.token.selector,
|
||||
.token.attr-name,
|
||||
.token.string,
|
||||
.token.char,
|
||||
.token.function,
|
||||
.token.builtin,
|
||||
.token.inserted {
|
||||
color: #2f9c0a;
|
||||
}
|
||||
|
||||
.token.operator,
|
||||
.token.entity,
|
||||
.token.url,
|
||||
.token.variable {
|
||||
color: #a67f59;
|
||||
background: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
.token.atrule,
|
||||
.token.attr-value,
|
||||
.token.keyword,
|
||||
.token.class-name {
|
||||
color: #1990b8;
|
||||
}
|
||||
|
||||
.token.regex,
|
||||
.token.important {
|
||||
color: #e90;
|
||||
}
|
||||
|
||||
.language-css .token.string,
|
||||
.style .token.string {
|
||||
color: #a67f59;
|
||||
background: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
.token.important {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.token.bold {
|
||||
font-weight: bold;
|
||||
}
|
||||
.token.italic {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.token.entity {
|
||||
cursor: help;
|
||||
}
|
||||
|
||||
.namespace {
|
||||
opacity: .7;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 767px) {
|
||||
pre[class*="language-"]:before,
|
||||
pre[class*="language-"]:after {
|
||||
bottom: 14px;
|
||||
-webkit-box-shadow: none;
|
||||
-moz-box-shadow: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/* Plugin styles */
|
||||
.token.tab:not(:empty):before,
|
||||
.token.cr:before,
|
||||
.token.lf:before {
|
||||
color: #e0d7d1;
|
||||
}
|
||||
|
||||
/* Plugin styles: Line Numbers */
|
||||
pre[class*="language-"].line-numbers {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
pre[class*="language-"].line-numbers code {
|
||||
padding-left: 3.8em;
|
||||
}
|
||||
|
||||
pre[class*="language-"].line-numbers .line-numbers-rows {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
/* Plugin styles: Line Highlight */
|
||||
pre[class*="language-"][data-line] {
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
padding-left: 0;
|
||||
}
|
||||
pre[data-line] code {
|
||||
position: relative;
|
||||
padding-left: 4em;
|
||||
}
|
||||
pre .line-highlight {
|
||||
margin-top: 0;
|
||||
}
|
||||
166
chat/index.htm
Archivo ejecutable
166
chat/index.htm
Archivo ejecutable
@@ -0,0 +1,166 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>chatSocketAchex.js</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<!-- bootstrap -->
|
||||
<link rel="stylesheet" href="css/bootstrap.min.css">
|
||||
<link rel="stylesheet" href="css/prism.css">
|
||||
|
||||
<script src="js/jquery.min.js"></script>
|
||||
<script src="js/prism.js"></script>
|
||||
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
|
||||
<script src="chatSocketAchex.js"></script>
|
||||
<link rel="stylesheet" type="text/css" href="chatSocketAchex.css">
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-4 text-center">
|
||||
<div class="well" >
|
||||
<a href="http://develoteca.com">
|
||||
<img src="http://develoteca.com/wp-content/themes/site/img/develoteca.png"/>
|
||||
<br/>by develoteca.com
|
||||
</a>
|
||||
|
||||
</div>
|
||||
<a href="https://github.com/oscaruhp/chatSocketAchex/archive/gh-pages.zip" class="btn3d btn btn-success btn-lg">Download v1.0</a>
|
||||
<br/><br/>
|
||||
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
|
||||
<!-- lateral -->
|
||||
<ins class="adsbygoogle"
|
||||
style="display:inline-block;width:300px;height:250px"
|
||||
data-ad-client="ca-pub-4331617637495482"
|
||||
data-ad-slot="7438564459"></ins>
|
||||
<script>
|
||||
(adsbygoogle = window.adsbygoogle || []).push({});
|
||||
</script>
|
||||
<div class="col-md-12 well">
|
||||
<h3>Thank you for comments</h3>
|
||||
<div id="fb-root"></div>
|
||||
|
||||
<div id="fb-root"></div>
|
||||
<script>(function(d, s, id) {
|
||||
var js, fjs = d.getElementsByTagName(s)[0];
|
||||
if (d.getElementById(id)) return;
|
||||
js = d.createElement(s); js.id = id;
|
||||
js.src = "//connect.facebook.net/es_MX/sdk.js#xfbml=1&version=v2.5&appId=132799306837455";
|
||||
fjs.parentNode.insertBefore(js, fjs);
|
||||
}(document, 'script', 'facebook-jssdk'));</script>
|
||||
|
||||
<div class="fb-comments" data-href="http://oscaruhp.github.io/chatSocketAchex/" data-width="300" data-numposts="5"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-8">
|
||||
<br/>
|
||||
<h1 class="text-center"><span style="color:#449D44">chatSocketAchex</span> jQuery Plugin</h1>
|
||||
|
||||
<h1>chatSocketAchex (Demo)</h1>
|
||||
<div class="row alert alert-info">
|
||||
|
||||
<div class="col-lg-4">
|
||||
<div id="ListaOnline">
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="col-lg-8">
|
||||
<div id="Elchat"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
$('#Elchat').ChatSocket({'lblEntradaNombre':'Enter a user name in the field below for the chat room'});
|
||||
</script>
|
||||
|
||||
<h2>chatSocketAchex jQuery</h2>
|
||||
<h3>Quick start</h3>
|
||||
1.- Include the files
|
||||
<pre><code class="language-markup">
|
||||
<br>
|
||||
<!-- Bootstrap and JQuery --><br>
|
||||
<script src="jquery.min.js"> </script>
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
|
||||
|
||||
<!-- Plugin -->
|
||||
<link rel="stylesheet" type="text/css" href="chatSocketAchex.css">
|
||||
<script src="chatSocketAchex.js"></script>
|
||||
|
||||
</code></pre>
|
||||
|
||||
2.- Create HTML Element
|
||||
<pre><code class="language-markup">
|
||||
<div id="Elchat"></div>
|
||||
</code></pre>
|
||||
|
||||
|
||||
3.- Call the the plugin on a container as your wish
|
||||
<pre><code class="language-javascript">
|
||||
$('#Elchat').ChatSocket();
|
||||
</code></pre>
|
||||
|
||||
|
||||
4.- All done!
|
||||
|
||||
<h2>Options</h2>
|
||||
you can custom by passing options when call the plugin, all available options are listed below.
|
||||
call the the plugin on a container wish you wish
|
||||
|
||||
|
||||
<pre><code class="language-javascript">
|
||||
$('#Elchat').ChatSocket({
|
||||
option: value,
|
||||
option2: value2
|
||||
});
|
||||
|
||||
</code></pre>
|
||||
Demo (Options)
|
||||
<pre><code class="language-javascript">
|
||||
{
|
||||
Room:"RoomDeveloteca", // important - room or user
|
||||
pass:"1234", // important - pass of room or user
|
||||
lblTitulChat:" Chat Develoteca.com ", //Chat Name
|
||||
lblCampoEntrada:"Menssage",
|
||||
lblEnviar:"Send",
|
||||
textoAyuda:"Develoteca", // Help button
|
||||
Nombre:"Anónimo", // default Name.
|
||||
urlImg:"http://placehold.it/50/55C1E7/fff&text=U", // Avatar chat
|
||||
btnEntrar:"btnEntrar",
|
||||
btnEnviar:"btnEnviar",
|
||||
lblBtnEnviar:"Enviar",
|
||||
lblTxtEntrar:"txtEntrar",
|
||||
lblTxtEnviar:"txtMensaje",
|
||||
lblBtnEntrar:"Enter", // Joined button
|
||||
idDialogo:"DialogoEntrada",
|
||||
classChat:"", // add class chat
|
||||
idOnline:"ListaOnline", // id control users joined
|
||||
lblUsuariosOnline:"Users joined", // text users online
|
||||
lblEntradaNombre:"Name:",
|
||||
panelColor:"success"
|
||||
}
|
||||
</code></pre>
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading"><h1> </h1></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
|
||||
|
||||
ga('create', 'UA-74824848-1', 'auto');
|
||||
ga('send', 'pageview');
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
49
chat/index.html
Archivo ejecutable
49
chat/index.html
Archivo ejecutable
@@ -0,0 +1,49 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>chatSocketAchex.js</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<!-- bootstrap -->
|
||||
|
||||
<link rel="stylesheet" href="css/bootstrap.min.css">
|
||||
<link rel="stylesheet" href="css/prism.css">
|
||||
|
||||
<script src="js/jquery.min.js"></script>
|
||||
<script src="js/prism.js"></script>
|
||||
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
|
||||
<script src="chatSocketAchex.js"></script>
|
||||
<link rel="stylesheet" type="text/css" href="chatSocketAchex.css">
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
|
||||
|
||||
<div class="col-md-12">
|
||||
<br/>
|
||||
|
||||
|
||||
|
||||
<div class="row alert alert-info">
|
||||
|
||||
<div class="col-lg-4">
|
||||
<div id="ListaOnline">
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="col-lg-8">
|
||||
<div id="Elchat"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
$('#Elchat').ChatSocket({'lblEntradaNombre':'Enter a user name in the field below for the chat room'});
|
||||
</script>
|
||||
|
||||
|
||||
7
chat/js/bootstrap.min.js
vendido
Archivo ejecutable
7
chat/js/bootstrap.min.js
vendido
Archivo ejecutable
Las diferiencias del archivo han sido suprimidas porque una o mas lineas son muy largas
5
chat/js/jquery.min.js
vendido
Archivo ejecutable
5
chat/js/jquery.min.js
vendido
Archivo ejecutable
Las diferiencias del archivo han sido suprimidas porque una o mas lineas son muy largas
6
chat/js/prism.js
Archivo ejecutable
6
chat/js/prism.js
Archivo ejecutable
@@ -0,0 +1,6 @@
|
||||
/* http://prismjs.com/download.html?themes=prism-coy&languages=markup+css+clike+javascript */
|
||||
self="undefined"!=typeof window?window:"undefined"!=typeof WorkerGlobalScope&&self instanceof WorkerGlobalScope?self:{};var Prism=function(){var e=/\blang(?:uage)?-(?!\*)(\w+)\b/i,t=self.Prism={util:{encode:function(e){return e instanceof n?new n(e.type,t.util.encode(e.content),e.alias):"Array"===t.util.type(e)?e.map(t.util.encode):e.replace(/&/g,"&").replace(/</g,"<").replace(/\u00a0/g," ")},type:function(e){return Object.prototype.toString.call(e).match(/\[object (\w+)\]/)[1]},clone:function(e){var n=t.util.type(e);switch(n){case"Object":var a={};for(var r in e)e.hasOwnProperty(r)&&(a[r]=t.util.clone(e[r]));return a;case"Array":return e.map(function(e){return t.util.clone(e)})}return e}},languages:{extend:function(e,n){var a=t.util.clone(t.languages[e]);for(var r in n)a[r]=n[r];return a},insertBefore:function(e,n,a,r){r=r||t.languages;var i=r[e];if(2==arguments.length){a=arguments[1];for(var l in a)a.hasOwnProperty(l)&&(i[l]=a[l]);return i}var s={};for(var o in i)if(i.hasOwnProperty(o)){if(o==n)for(var l in a)a.hasOwnProperty(l)&&(s[l]=a[l]);s[o]=i[o]}return t.languages.DFS(t.languages,function(t,n){n===r[e]&&t!=e&&(this[t]=s)}),r[e]=s},DFS:function(e,n,a){for(var r in e)e.hasOwnProperty(r)&&(n.call(e,r,e[r],a||r),"Object"===t.util.type(e[r])?t.languages.DFS(e[r],n):"Array"===t.util.type(e[r])&&t.languages.DFS(e[r],n,r))}},highlightAll:function(e,n){for(var a,r=document.querySelectorAll('code[class*="language-"], [class*="language-"] code, code[class*="lang-"], [class*="lang-"] code'),i=0;a=r[i++];)t.highlightElement(a,e===!0,n)},highlightElement:function(a,r,i){for(var l,s,o=a;o&&!e.test(o.className);)o=o.parentNode;if(o&&(l=(o.className.match(e)||[,""])[1],s=t.languages[l]),a.className=a.className.replace(e,"").replace(/\s+/g," ")+" language-"+l,o=a.parentNode,/pre/i.test(o.nodeName)&&(o.className=o.className.replace(e,"").replace(/\s+/g," ")+" language-"+l),s){var u=a.textContent;if(u){u=u.replace(/^(?:\r?\n|\r)/,"");var g={element:a,language:l,grammar:s,code:u};if(t.hooks.run("before-highlight",g),r&&self.Worker){var c=new Worker(t.filename);c.onmessage=function(e){g.highlightedCode=n.stringify(JSON.parse(e.data),l),t.hooks.run("before-insert",g),g.element.innerHTML=g.highlightedCode,i&&i.call(g.element),t.hooks.run("after-highlight",g)},c.postMessage(JSON.stringify({language:g.language,code:g.code}))}else g.highlightedCode=t.highlight(g.code,g.grammar,g.language),t.hooks.run("before-insert",g),g.element.innerHTML=g.highlightedCode,i&&i.call(a),t.hooks.run("after-highlight",g)}}},highlight:function(e,a,r){var i=t.tokenize(e,a);return n.stringify(t.util.encode(i),r)},tokenize:function(e,n){var a=t.Token,r=[e],i=n.rest;if(i){for(var l in i)n[l]=i[l];delete n.rest}e:for(var l in n)if(n.hasOwnProperty(l)&&n[l]){var s=n[l];s="Array"===t.util.type(s)?s:[s];for(var o=0;o<s.length;++o){var u=s[o],g=u.inside,c=!!u.lookbehind,f=0,h=u.alias;u=u.pattern||u;for(var p=0;p<r.length;p++){var d=r[p];if(r.length>e.length)break e;if(!(d instanceof a)){u.lastIndex=0;var m=u.exec(d);if(m){c&&(f=m[1].length);var y=m.index-1+f,m=m[0].slice(f),v=m.length,k=y+v,b=d.slice(0,y+1),w=d.slice(k+1),N=[p,1];b&&N.push(b);var O=new a(l,g?t.tokenize(m,g):m,h);N.push(O),w&&N.push(w),Array.prototype.splice.apply(r,N)}}}}}return r},hooks:{all:{},add:function(e,n){var a=t.hooks.all;a[e]=a[e]||[],a[e].push(n)},run:function(e,n){var a=t.hooks.all[e];if(a&&a.length)for(var r,i=0;r=a[i++];)r(n)}}},n=t.Token=function(e,t,n){this.type=e,this.content=t,this.alias=n};if(n.stringify=function(e,a,r){if("string"==typeof e)return e;if("Array"===t.util.type(e))return e.map(function(t){return n.stringify(t,a,e)}).join("");var i={type:e.type,content:n.stringify(e.content,a,r),tag:"span",classes:["token",e.type],attributes:{},language:a,parent:r};if("comment"==i.type&&(i.attributes.spellcheck="true"),e.alias){var l="Array"===t.util.type(e.alias)?e.alias:[e.alias];Array.prototype.push.apply(i.classes,l)}t.hooks.run("wrap",i);var s="";for(var o in i.attributes)s+=o+'="'+(i.attributes[o]||"")+'"';return"<"+i.tag+' class="'+i.classes.join(" ")+'" '+s+">"+i.content+"</"+i.tag+">"},!self.document)return self.addEventListener?(self.addEventListener("message",function(e){var n=JSON.parse(e.data),a=n.language,r=n.code;self.postMessage(JSON.stringify(t.util.encode(t.tokenize(r,t.languages[a])))),self.close()},!1),self.Prism):self.Prism;var a=document.getElementsByTagName("script");return a=a[a.length-1],a&&(t.filename=a.src,document.addEventListener&&!a.hasAttribute("data-manual")&&document.addEventListener("DOMContentLoaded",t.highlightAll)),self.Prism}();"undefined"!=typeof module&&module.exports&&(module.exports=Prism);;
|
||||
Prism.languages.markup={comment:/<!--[\w\W]*?-->/,prolog:/<\?[\w\W]+?\?>/,doctype:/<!DOCTYPE[\w\W]+?>/,cdata:/<!\[CDATA\[[\w\W]*?]]>/i,tag:{pattern:/<\/?[^\s>\/]+(?:\s+[^\s>\/=]+(?:=(?:("|')(?:\\\1|\\?(?!\1)[\w\W])*\1|[^\s'">=]+))?)*\s*\/?>/i,inside:{tag:{pattern:/^<\/?[^\s>\/]+/i,inside:{punctuation:/^<\/?/,namespace:/^[^\s>\/:]+:/}},"attr-value":{pattern:/=(?:('|")[\w\W]*?(\1)|[^\s>]+)/i,inside:{punctuation:/[=>"']/}},punctuation:/\/?>/,"attr-name":{pattern:/[^\s>\/]+/,inside:{namespace:/^[^\s>\/:]+:/}}}},entity:/&#?[\da-z]{1,8};/i},Prism.hooks.add("wrap",function(t){"entity"===t.type&&(t.attributes.title=t.content.replace(/&/,"&"))});;
|
||||
Prism.languages.css={comment:/\/\*[\w\W]*?\*\//,atrule:{pattern:/@[\w-]+?.*?(;|(?=\s*\{))/i,inside:{rule:/@[\w-]+/}},url:/url\((?:(["'])(\\(?:\r\n|[\w\W])|(?!\1)[^\\\r\n])*\1|.*?)\)/i,selector:/[^\{\}\s][^\{\};]*?(?=\s*\{)/,string:/("|')(\\(?:\r\n|[\w\W])|(?!\1)[^\\\r\n])*\1/,property:/(\b|\B)[\w-]+(?=\s*:)/i,important:/\B!important\b/i,"function":/[-a-z0-9]+(?=\()/i,punctuation:/[(){};:]/},Prism.languages.css.atrule.inside.rest=Prism.util.clone(Prism.languages.css),Prism.languages.markup&&(Prism.languages.insertBefore("markup","tag",{style:{pattern:/<style[\w\W]*?>[\w\W]*?<\/style>/i,inside:{tag:{pattern:/<style[\w\W]*?>|<\/style>/i,inside:Prism.languages.markup.tag.inside},rest:Prism.languages.css},alias:"language-css"}}),Prism.languages.insertBefore("inside","attr-value",{"style-attr":{pattern:/\s*style=("|').*?\1/i,inside:{"attr-name":{pattern:/^\s*style/i,inside:Prism.languages.markup.tag.inside},punctuation:/^\s*=\s*['"]|['"]\s*$/,"attr-value":{pattern:/.+/i,inside:Prism.languages.css}},alias:"language-css"}},Prism.languages.markup.tag));;
|
||||
Prism.languages.clike={comment:[{pattern:/(^|[^\\])\/\*[\w\W]*?\*\//,lookbehind:!0},{pattern:/(^|[^\\:])\/\/.*/,lookbehind:!0}],string:/("|')(\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/,"class-name":{pattern:/((?:(?:class|interface|extends|implements|trait|instanceof|new)\s+)|(?:catch\s+\())[a-z0-9_\.\\]+/i,lookbehind:!0,inside:{punctuation:/(\.|\\)/}},keyword:/\b(if|else|while|do|for|return|in|instanceof|function|new|try|throw|catch|finally|null|break|continue)\b/,"boolean":/\b(true|false)\b/,"function":/[a-z0-9_]+(?=\()/i,number:/\b-?(0x[\dA-Fa-f]+|\d*\.?\d+([Ee]-?\d+)?)\b/,operator:/[-+]{1,2}|!|<=?|>=?|={1,3}|&{1,2}|\|?\||\?|\*|\/|~|\^|%/,punctuation:/[{}[\];(),.:]/};;
|
||||
Prism.languages.javascript=Prism.languages.extend("clike",{keyword:/\b(as|async|await|break|case|catch|class|const|continue|debugger|default|delete|do|else|enum|export|extends|false|finally|for|from|function|get|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|set|static|super|switch|this|throw|true|try|typeof|var|void|while|with|yield)\b/,number:/\b-?(0x[\dA-Fa-f]+|0b[01]+|0o[0-7]+|\d*\.?\d+([Ee][+-]?\d+)?|NaN|Infinity)\b/,"function":/(?!\d)[a-z0-9_$]+(?=\()/i}),Prism.languages.insertBefore("javascript","keyword",{regex:{pattern:/(^|[^/])\/(?!\/)(\[.+?]|\\.|[^/\\\r\n])+\/[gimyu]{0,5}(?=\s*($|[\r\n,.;})]))/,lookbehind:!0}}),Prism.languages.insertBefore("javascript","class-name",{"template-string":{pattern:/`(?:\\`|\\?[^`])*`/,inside:{interpolation:{pattern:/\$\{[^}]+\}/,inside:{"interpolation-punctuation":{pattern:/^\$\{|\}$/,alias:"punctuation"},rest:Prism.languages.javascript}},string:/[\s\S]+/}}}),Prism.languages.markup&&Prism.languages.insertBefore("markup","tag",{script:{pattern:/<script[\w\W]*?>[\w\W]*?<\/script>/i,inside:{tag:{pattern:/<script[\w\W]*?>|<\/script>/i,inside:Prism.languages.markup.tag.inside},rest:Prism.languages.javascript},alias:"language-javascript"}});;
|
||||
Referencia en una nueva incidencia
Block a user