5 |
6 |
7 |
--------------------------------------------------------------------------------
/convo/assets/js/search.js:
--------------------------------------------------------------------------------
1 | document.querySelector('[data-search]').addEventListener('keyup', filter)
2 |
3 | function filter() {
4 | var term = document.querySelector('[data-search]').value
5 | var tag = document.querySelectorAll('[data-searchable] li ')
6 | for (i = 0; i < tag.length; i++) {
7 | if (tag[i].innerHTML.indexOf(term) !== -1) {
8 | tag[i].style.display = 'block'
9 | } else {
10 | tag[i].style.display = 'none'
11 | }
12 | }
13 | }
14 |
--------------------------------------------------------------------------------
/convo/assets/js/index.js:
--------------------------------------------------------------------------------
1 | // For clicking/highlight the users on the left sidebar
2 | $('.person[data-chat=person1]').addClass('active');
3 |
4 | $('.left .person').mousedown(function () {
5 | if ($(this).hasClass('.active')) {
6 | return false;
7 | } else {
8 | var personName = $(this).find('.name').text();
9 | $('.left .person').removeClass('active');
10 | $(this).addClass('active');
11 | }
12 | });
13 |
14 |
15 |
16 | // Side Panel switch
17 | $(".heading-compose").click(function () {
18 | $(".side-two").css({
19 | "left": "0"
20 | });
21 | });
22 |
23 | $(".newMessage-back").click(function () {
24 | $(".side-two").css({
25 | "left": "-100%"
26 | });
27 | });
28 |
--------------------------------------------------------------------------------
/convo/assets/css/reset.min.css:
--------------------------------------------------------------------------------
1 | html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}
--------------------------------------------------------------------------------
/convo/assets/js/vue.js:
--------------------------------------------------------------------------------
1 | new Vue({
2 | el: '.container',
3 | data: function data() {return {
4 | users: [],
5 | errors: [],
6 | show: true };},
7 |
8 |
9 | mounted: function mounted() {
10 | this.getUsers();
11 | },
12 |
13 | methods: {
14 | getUsers: function getUsers() {var _this = this;
15 | axios.get('https://randomuser.me/api/?results=3').
16 | then(function (response) {
17 | console.log(JSON.stringify(response.data.results));
18 | _this.users = response.data.results;
19 | }).
20 | catch(function (e) {
21 | _this.errors.push(e);
22 | });
23 | } },
24 |
25 |
26 | filters: {
27 | capitalize: function capitalize(value) {
28 | if (!value) return '';
29 | value = value.toString();
30 | return value.charAt(0).toUpperCase() + value.slice(1);
31 | } } });
--------------------------------------------------------------------------------
/convo/assets/js/ripple-button.js:
--------------------------------------------------------------------------------
1 | $(function() {
2 |
3 | $(".ripple").on('click', function(e) {
4 |
5 | if ($(this).find('span').length === 0) {
6 |
7 | $(this).append('');
8 |
9 | var ripple = $(this).find('span'),
10 | size = ( $(this).innerWidth() > $(this).innerHeight() ) ? $(this).innerWidth()*2 : $(this).innerHeight()*2,
11 | clickY = $(this).offset().top,
12 | clickX = $(this).offset().left,
13 | x = e.pageX - clickX,
14 | y = e.pageY - clickY;
15 |
16 | ripple.css({
17 | 'top': y +'px',
18 | 'left': x +'px',
19 | });
20 |
21 | ripple.animate({
22 | 'width': size +'px',
23 | 'height': size +'px',
24 | 'margin-top': -size/2 +'px',
25 | 'margin-left': -size/2 +'px',
26 | 'opacity': 0,
27 | }, 450, function() {
28 | $(this).remove();
29 | });
30 |
31 | }
32 |
33 | });
34 |
35 | });
--------------------------------------------------------------------------------
/convo/assets/css/style_two.css:
--------------------------------------------------------------------------------
1 | /*User names tags*/
2 |
3 | .tag {
4 | font-family: "Segoe UI";
5 | font-size: 0.77rem;
6 | color: #6e7687;
7 | background-color: #f7f7f7;
8 | border-radius: 3px;
9 | padding: 0 .5rem;
10 | line-height: 2em;
11 | display: -ms-inline-flexbox;
12 | display: inline-flex;
13 | cursor: default;
14 | font-weight: 400;
15 | -webkit-user-select: none;
16 | -moz-user-select: none;
17 | -ms-user-select: none;
18 | user-select: none;
19 | }
20 |
21 | a.tag {
22 | text-decoration: none;
23 | cursor: pointer;
24 | transition: .3s color, .3s background;
25 | }
26 |
27 | a.tag:hover {
28 | background-color: rgba(110, 118, 135, 0.2);
29 | color: inherit;
30 | }
31 |
32 | .tag-addon {
33 | display: inline-block;
34 | padding: 0 .5rem;
35 | color: inherit;
36 | text-decoration: none;
37 | background: rgba(0, 0, 0, 0.06);
38 | margin: 0 -.5rem 0 .5rem;
39 | text-align: center;
40 | min-width: 1.5rem;
41 | }
42 |
43 | .tag-addon:last-child {
44 | border-top-right-radius: 3px;
45 | border-bottom-right-radius: 3px;
46 | }
47 |
48 | .tag-addon i {
49 | vertical-align: middle;
50 | margin: 0 -.25rem;
51 | }
52 |
53 | a.tag-addon {
54 | text-decoration: none;
55 | cursor: pointer;
56 | transition: .3s color, .3s background;
57 | }
58 |
59 | a.tag-addon:hover {
60 | background: rgba(0, 0, 0, 0.16);
61 | color: inherit;
62 | }
63 |
64 | .tag-avatar {
65 | width: 1.5rem;
66 | height: 1.5rem;
67 | border-radius: 3px 0 0 3px;
68 | margin: 0 .5rem 0 -.5rem;
69 | }
70 |
71 | .ava {
72 | width: 1.5rem;
73 | height: 1.5rem;
74 | line-height: 2rem;
75 | display: inline-block;
76 | background: #ced4da no-repeat center/cover;
77 | position: relative;
78 | text-align: center;
79 | color: #868e96;
80 | font-weight: 600;
81 | vertical-align: bottom;
82 | font-size: .875rem;
83 | -webkit-user-select: none;
84 | -moz-user-select: none;
85 | -ms-user-select: none;
86 | user-select: none;
87 | }
88 |
--------------------------------------------------------------------------------
/convo/assets/js/emoji.js:
--------------------------------------------------------------------------------
1 | var emojis = JSON.parse('[{"name":null,"width":"72","height":"72"},{"name":null,"width":"72","height":"72"},{"name":null,"width":"72","height":"72"},{"name":null,"width":"72","height":"72"},{"name":null,"width":"72","height":"72"},{"name":null,"width":"72","height":"72"},{"name":null,"width":"72","height":"72"},{"name":null,"width":"72","height":"72"},{"name":null,"width":"72","height":"72"},{"name":null,"width":"72","height":"72"},{"name":null,"width":"72","height":"72"},{"name":null,"width":"72","height":"72"},{"name":null,"width":"72","height":"72"},{"name":null,"width":"72","height":"72"},{"name":null,"width":"72","height":"72"},{"name":null,"width":"72","height":"72"},{"name":null,"width":"72","height":"72"},{"name":null,"width":"72","height":"72"},{"name":null,"width":"72","height":"72"},{"name":null,"width":"72","height":"72"},{"name":"./assets/img/good.gif","width":"72","height":"72"},{"name":"./assets/img/cry.gif","width":"72","height":"72"},{"name":"./assets/img/hug.gif","width":"72","height":"72"},{"name":"./assets/img/laugh.gif","width":"72","height":"72"},{"name":"./assets/img/love.gif","width":"72","height":"72"},{"name":"./assets/img/zzz.gif","width":"72","height":"72"}]');
2 | // Not Made to be production level I made this quickly for testing a websocket server and added the emojies for fun!
3 | // Selectors
4 | var messages = document.querySelector('.msg-container')
5 | var btn = document.querySelector('.submit')
6 | var input = document.querySelector('.input input')
7 | var emojiholder = document.querySelector('.emoji-holder')
8 | var emojiwrapper = document.querySelector('.emoji-wrapper')
9 | var emojibtn = document.querySelector('.emoji-btn')
10 |
11 | // Button/Enter Key
12 | btn.addEventListener('click', sendMessage)
13 | input.addEventListener('keyup', function (evt) {
14 | if (evt.keyCode == 13) sendMessage()
15 | })
16 | emojibtn.addEventListener('click', function (e) {
17 | e.stopPropagation()
18 | this.classList.toggle('open')
19 | })
20 | document.body.addEventListener('click', function () {
21 | emojibtn.classList.remove('open')
22 | })
23 |
24 | // Messenger Functions
25 | function sendMessage() {
26 | var msg = input.value;
27 | input.value = ''
28 | writeLine(msg)
29 | }
30 |
31 | function addMessage(evt) {
32 | console.log(evt);
33 | var msg = evt.data ? JSON.parse(evt.data) : evt;
34 | writeLine(`${msg.FROM}: ${msg.MESSAGE}`)
35 | }
36 |
37 | function writeLine(text) {
38 | var message = document.createElement('div')
39 | message.classList.add('emoji-message')
40 | message.innerHTML = ' ' + text
41 | messages.appendChild(message)
42 | messages.scrollTop = messages.scrollHeight;
43 | }
44 |
45 | // Load the Emojies
46 | for (var i = 0; i < emojis.length; i++) {
47 | if (emojis[i].name == null) continue
48 | emojiwrapper.innerHTML += `
49 | ',a='',f=function(a){var b;return b=document.createElement("div"),b.innerHTML=a,b.children[0]},g=e=null,d=function(a){return k(a),g.className+=" "+a},k=function(a){return g.className=g.className.replace(new RegExp("(^| )"+a.split(" ").join("|")+"( |$)","gi")," ")},i={},h=function(a,b){return d(a),null!=i[a]&&clearTimeout(i[a]),i[a]=setTimeout(function(){return k(a),delete i[a]},1e3*b)},m=function(a){var b,c,d,e;d={day:86400,hour:3600,minute:60,second:1};for(c in d)if(b=d[c],a>=b)return e=Math.floor(a/b),[e,c];return["now",""]},l=function(){var c,h;return g=f(b),document.body.appendChild(g),null!=Offline.reconnect&&Offline.getOption("reconnect")&&(g.appendChild(f(a)),c=g.querySelector(".offline-ui-retry"),h=function(a){return a.preventDefault(),Offline.reconnect.tryNow()},null!=c.addEventListener?c.addEventListener("click",h,!1):c.attachEvent("click",h)),d("offline-ui-"+Offline.state),e=g.querySelector(".offline-ui-content")},j=function(){return l(),Offline.on("up",function(){return k("offline-ui-down"),d("offline-ui-up"),h("offline-ui-up-2s",2),h("offline-ui-up-5s",5)}),Offline.on("down",function(){return k("offline-ui-up"),d("offline-ui-down"),h("offline-ui-down-2s",2),h("offline-ui-down-5s",5)}),Offline.on("reconnect:connecting",function(){return d("offline-ui-connecting"),k("offline-ui-waiting")}),Offline.on("reconnect:tick",function(){var a,b,c;return d("offline-ui-waiting"),k("offline-ui-connecting"),a=m(Offline.reconnect.remaining),b=a[0],c=a[1],e.setAttribute("data-retry-in-value",b),e.setAttribute("data-retry-in-unit",c)}),Offline.on("reconnect:stopped",function(){return k("offline-ui-connecting offline-ui-waiting"),e.setAttribute("data-retry-in-value",null),e.setAttribute("data-retry-in-unit",null)}),Offline.on("reconnect:failure",function(){return h("offline-ui-reconnect-failed-2s",2),h("offline-ui-reconnect-failed-5s",5)}),Offline.on("reconnect:success",function(){return h("offline-ui-reconnect-succeeded-2s",2),h("offline-ui-reconnect-succeeded-5s",5)})},"complete"===document.readyState?j():null!=document.addEventListener?document.addEventListener("DOMContentLoaded",j,!1):(c=document.onreadystatechange,document.onreadystatechange=function(){return"complete"===document.readyState&&j(),"function"==typeof c?c.apply(null,arguments):void 0})}.call(this);
--------------------------------------------------------------------------------
/convo/index.html:
--------------------------------------------------------------------------------
1 |
2 |
43 |
44 |
45 |
56 |
57 |
58 |
275 |
276 |
277 |
278 |
279 |
280 |
293 |
294 |
312 |
313 |
314 |
315 |
325 |
326 |
330 |
331 |
332 |
333 |
334 |
335 |
336 |
337 |
338 |
339 |
340 |
341 |
--------------------------------------------------------------------------------
/convo/assets/js/require.min.js:
--------------------------------------------------------------------------------
1 | /** vim: et:ts=4:sw=4:sts=4
2 | * @license RequireJS 2.3.5 Copyright jQuery Foundation and other contributors.
3 | * Released under MIT license, https://github.com/requirejs/requirejs/blob/master/LICENSE
4 | */
5 | var requirejs,require,define;!function(global,setTimeout){function commentReplace(e,t){return t||""}function isFunction(e){return"[object Function]"===ostring.call(e)}function isArray(e){return"[object Array]"===ostring.call(e)}function each(e,t){if(e){var i;for(i=0;i
59 |
60 |
273 |
274 |
61 |
62 |
63 |
169 |
170 |
171 |
172 |
173 |
174 |
64 |
65 |
66 |
166 |
167 |
168 |
67 |
68 |
99 |
100 |
101 |
102 |
103 |
69 | 
70 |
71 |
72 |
73 |
70 |
74 |
81 |
82 |
97 |
98 |
75 |
76 |
77 |
78 |
79 |
80 |
104 |
105 |
165 |
106 |
107 |
108 |
109 |
110 |
164 |
111 |
163 | -
112 |
-
113 |
114 |
115 | kevin minion
116 | Just now
117 | Are you there bro?
118 |
119 | -
120 |
121 |
122 | bo jackson
123 |
124 | 3:52 AM
125 | It disappear all by itself? Dude you lying
126 |
127 | -
128 |
129 |
130 | michael jordan
131 |
132 | 7:08 PM
133 | Yo bro, you won't believe what amma bout
134 | to tellyou
135 |
136 | -
137 |
138 |
139 | jane doe
140 |
141 | 2:09 PM
142 | This is that, you know the drill
143 |
144 |
145 | -
146 |
147 |
148 | scrat
149 | Yesterday
150 | Where is my nut?
151 |
152 | -
153 |
154 |
155 | jane doe
156 |
157 | 2:09 PM
158 | This is that, you know the drill
159 |
160 |
161 |
175 |
176 |
197 |
198 |
272 |
199 |
200 |
203 |
204 |
271 |
205 |
249 |
250 |
253 |
254 |
255 |
256 |
270 |
206 |
207 |
248 | -
208 |
209 |
210 |
211 |
212 |
228 |
229 |
230 |
244 |
245 |
213 |
214 |
215 |
216 |
214 |
217 |
218 | Dude are you up?!!
219 |
220 |
221 |
222 |
223 |
224 |
225 |
226 |
227 |