mirror of
https://github.com/darkwire/darkwire.io.git
synced 2025-07-18 10:49:02 +00:00
Added browserify, es2015 to publicjs
This commit is contained in:
Dan Seripap
parent
d4010ff2c5
commit
217d967e08
23
gulpfile.js
23
gulpfile.js
@ -1,6 +1,12 @@
|
||||
var gulp = require('gulp');
|
||||
var uglify = require('gulp-uglify');
|
||||
var nodemon = require('gulp-nodemon');
|
||||
var browserify = require('browserify');
|
||||
var babel = require('babelify');
|
||||
var source = require('vinyl-source-stream');
|
||||
var buffer = require('vinyl-buffer');
|
||||
|
||||
// var bundler =
|
||||
|
||||
gulp.task('watch', function() {
|
||||
gulp.watch('src/js/main.js', ['build']);
|
||||
@ -9,11 +15,22 @@ gulp.task('watch', function() {
|
||||
gulp.task('build', ['uglify']);
|
||||
|
||||
gulp.task('uglify', function() {
|
||||
gulp.src('src/js/main.js')
|
||||
gulp.src('src/public/main.js')
|
||||
.pipe(uglify())
|
||||
.pipe(gulp.dest('src/public'));
|
||||
});
|
||||
|
||||
gulp.task('bundle', function() {
|
||||
return browserify('src/js/main.js', { debug: true }).transform(babel.configure({
|
||||
presets: ["es2015"]
|
||||
})).bundle()
|
||||
.pipe(source('main.js'))
|
||||
.pipe(buffer())
|
||||
.pipe(uglify())
|
||||
.pipe(gulp.dest('src/public'))
|
||||
|
||||
});
|
||||
|
||||
gulp.task('start', function() {
|
||||
nodemon({
|
||||
script: 'index.js',
|
||||
@ -22,6 +39,6 @@ gulp.task('start', function() {
|
||||
env: {
|
||||
'NODE_ENV': 'development'
|
||||
},
|
||||
tasks: ['build']
|
||||
tasks: ['bundle']
|
||||
})
|
||||
})
|
||||
});
|
||||
|
||||
@ -5,6 +5,8 @@
|
||||
"main": "index.js",
|
||||
"dependencies": {
|
||||
"babel": "^5.8.23",
|
||||
"babelify": "^7.2.0",
|
||||
"browserify": "^13.0.0",
|
||||
"compression": "^1.6.0",
|
||||
"connect-redis": "^3.0.1",
|
||||
"express": "^4.13.3",
|
||||
@ -17,9 +19,13 @@
|
||||
"shortid": "^2.2.4",
|
||||
"socket.io": "^1.4.0",
|
||||
"underscore": "^1.8.3",
|
||||
"uuid": "^2.0.1"
|
||||
"uuid": "^2.0.1",
|
||||
"vinyl-buffer": "^1.0.0",
|
||||
"vinyl-source-stream": "^1.1.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"babel-preset-es2015": "^6.3.13",
|
||||
"compression": "^1.6.0",
|
||||
"gulp-nodemon": "^2.0.6"
|
||||
},
|
||||
"scripts": {
|
||||
|
||||
109
src/js/main.js
109
src/js/main.js
@ -1,54 +1,53 @@
|
||||
var fs = window.RequestFileSystem || window.webkitRequestFileSystem;
|
||||
let fs = window.RequestFileSystem || window.webkitRequestFileSystem;
|
||||
|
||||
window.favicon = new Favico({
|
||||
animation:'pop',
|
||||
type : 'rectangle'
|
||||
});
|
||||
|
||||
$(function() {
|
||||
var isActive = false;
|
||||
var newMessages = 0;
|
||||
var FADE_TIME = 150; // ms
|
||||
var TYPING_TIMER_LENGTH = 400; // ms
|
||||
var COLORS = [
|
||||
let isActive = false;
|
||||
let newMessages = 0;
|
||||
let FADE_TIME = 150; // ms
|
||||
let TYPING_TIMER_LENGTH = 400; // ms
|
||||
let COLORS = [
|
||||
'#e21400', '#91580f', '#f8a700', '#f78b00',
|
||||
'#58dc00', '#287b00', '#a8f07a', '#4ae8c4',
|
||||
'#3b88eb', '#3824aa', '#a700ff', '#d300e7'
|
||||
];
|
||||
|
||||
window.favicon = new Favico({
|
||||
animation:'pop',
|
||||
type : 'rectangle'
|
||||
});
|
||||
let $window = $(window);
|
||||
let $usernameInput = $('.usernameInput'); // Input for username
|
||||
let $messages = $('.messages'); // Messages area
|
||||
let $inputMessage = $('.inputMessage'); // Input message input box
|
||||
let $key = $('.key');
|
||||
let $genKey = $('.new_key');
|
||||
let $participants = $('#participants');
|
||||
|
||||
// Initialize variables
|
||||
var $window = $(window);
|
||||
var $usernameInput = $('.usernameInput'); // Input for username
|
||||
var $messages = $('.messages'); // Messages area
|
||||
var $inputMessage = $('.inputMessage'); // Input message input box
|
||||
var $key = $('.key');
|
||||
var $genKey = $('.new_key');
|
||||
var $participants = $('#participants');
|
||||
let $chatPage = $('.chat.page'); // The chatroom page
|
||||
|
||||
var $chatPage = $('.chat.page'); // The chatroom page
|
||||
|
||||
var users = [];
|
||||
let users = [];
|
||||
|
||||
// Prompt for setting a username
|
||||
var username;
|
||||
var connected = false;
|
||||
var typing = false;
|
||||
var lastTypingTime;
|
||||
var $currentInput = $usernameInput.focus();
|
||||
var encryptionKey;
|
||||
let username;
|
||||
let connected = false;
|
||||
let typing = false;
|
||||
let lastTypingTime;
|
||||
let $currentInput = $usernameInput.focus();
|
||||
let encryptionKey;
|
||||
|
||||
var clipboard = new Clipboard('.copyable');
|
||||
let clipboard = new Clipboard('.copyable');
|
||||
|
||||
var roomId = window.location.pathname.length ? window.location.pathname : null;
|
||||
let roomId = window.location.pathname.length ? window.location.pathname : null;
|
||||
|
||||
if (!roomId) return;
|
||||
|
||||
var socket = io(roomId);
|
||||
let socket = io(roomId);
|
||||
$('#roomIdKey').text(roomId.replace('/', ''));
|
||||
|
||||
function addParticipantsMessage (data) {
|
||||
var message = '';
|
||||
var headerMsg = '';
|
||||
let message = '';
|
||||
let headerMsg = '';
|
||||
|
||||
$participants.text(data.numUsers);
|
||||
}
|
||||
@ -81,7 +80,7 @@ $(function() {
|
||||
// Don't allow sending if key is empty
|
||||
if (!encryptionKey.trim().length) return;
|
||||
|
||||
var message = $inputMessage.val();
|
||||
let message = $inputMessage.val();
|
||||
// Prevent markup from being injected into the message
|
||||
message = cleanInput(message);
|
||||
// if there is a non-empty message and a socket connection
|
||||
@ -107,8 +106,8 @@ $(function() {
|
||||
|
||||
// Log a message
|
||||
function log (message, options) {
|
||||
var html = options && options.html === true || false;
|
||||
var $el;
|
||||
let html = options && options.html === true || false;
|
||||
let $el;
|
||||
if (html) {
|
||||
$el = $('<li>').addClass('log').html(message);
|
||||
} else {
|
||||
@ -122,21 +121,21 @@ $(function() {
|
||||
if (!data.message.trim().length) return;
|
||||
|
||||
// Don't fade the message in if there is an 'X was typing'
|
||||
var $typingMessages = getTypingMessages(data);
|
||||
let $typingMessages = getTypingMessages(data);
|
||||
options = options || {};
|
||||
if ($typingMessages.length !== 0) {
|
||||
options.fade = false;
|
||||
$typingMessages.remove();
|
||||
}
|
||||
|
||||
var $usernameDiv = $('<span class="username"/>')
|
||||
let $usernameDiv = $('<span class="username"/>')
|
||||
.text(data.username)
|
||||
.css('color', getUsernameColor(data.username));
|
||||
var $messageBodyDiv = $('<span class="messageBody">')
|
||||
let $messageBodyDiv = $('<span class="messageBody">')
|
||||
.html(data.message);
|
||||
|
||||
var typingClass = data.typing ? 'typing' : '';
|
||||
var $messageDiv = $('<li class="message"/>')
|
||||
let typingClass = data.typing ? 'typing' : '';
|
||||
let $messageDiv = $('<li class="message"/>')
|
||||
.data('username', data.username)
|
||||
.addClass(typingClass)
|
||||
.append($usernameDiv, $messageBodyDiv);
|
||||
@ -164,7 +163,7 @@ $(function() {
|
||||
// options.prepend - If the element should prepend
|
||||
// all other messages (default = false)
|
||||
function addMessageElement (el, options) {
|
||||
var $el = $(el);
|
||||
let $el = $(el);
|
||||
|
||||
// Setup default options
|
||||
if (!options) {
|
||||
@ -192,7 +191,7 @@ $(function() {
|
||||
|
||||
// Prevents input from having injected markup
|
||||
function cleanInput (input) {
|
||||
var message = $('<div/>').html(input).text();
|
||||
let message = $('<div/>').html(input).text();
|
||||
message = Autolinker.link(message);
|
||||
return message;
|
||||
}
|
||||
@ -207,8 +206,8 @@ $(function() {
|
||||
lastTypingTime = (new Date()).getTime();
|
||||
|
||||
setTimeout(function () {
|
||||
var typingTimer = (new Date()).getTime();
|
||||
var timeDiff = typingTimer - lastTypingTime;
|
||||
let typingTimer = (new Date()).getTime();
|
||||
let timeDiff = typingTimer - lastTypingTime;
|
||||
if (timeDiff >= TYPING_TIMER_LENGTH && typing) {
|
||||
socket.emit('stop typing');
|
||||
typing = false;
|
||||
@ -227,12 +226,12 @@ $(function() {
|
||||
// Gets the color of a username through our hash function
|
||||
function getUsernameColor (username) {
|
||||
// Compute hash code
|
||||
var hash = 7;
|
||||
for (var i = 0; i < username.length; i++) {
|
||||
let hash = 7;
|
||||
for (let i = 0; i < username.length; i++) {
|
||||
hash = username.charCodeAt(i) + (hash << 5) - hash;
|
||||
}
|
||||
// Calculate color
|
||||
var index = Math.abs(hash % COLORS.length);
|
||||
let index = Math.abs(hash % COLORS.length);
|
||||
return COLORS[index];
|
||||
}
|
||||
|
||||
@ -259,7 +258,7 @@ $(function() {
|
||||
|
||||
$inputMessage.on('input propertychange paste change', function() {
|
||||
updateTyping();
|
||||
var message = $(this).val().trim();
|
||||
let message = $(this).val().trim();
|
||||
if (message.length) {
|
||||
$('#send-message-btn').addClass('active');
|
||||
} else {
|
||||
@ -273,7 +272,7 @@ $(function() {
|
||||
});
|
||||
|
||||
$genKey.click(function () {
|
||||
var key = (Math.random() * Math.random()).toString(36).substring(7);
|
||||
let key = (Math.random() * Math.random()).toString(36).substring(7);
|
||||
updateKeyVal(key);
|
||||
});
|
||||
|
||||
@ -286,7 +285,7 @@ $(function() {
|
||||
|
||||
users = data.users;
|
||||
|
||||
var key = (Math.random() * Math.random()).toString(36).substring(7);
|
||||
let key = (Math.random() * Math.random()).toString(36).substring(7);
|
||||
|
||||
if (data.numUsers > 1) {
|
||||
$('#join-modal').modal('show');
|
||||
@ -401,12 +400,12 @@ $(function() {
|
||||
}
|
||||
|
||||
$('#join-modal .key').on('input propertychange paste change', function() {
|
||||
var val = $(this).val().trim();
|
||||
let val = $(this).val().trim();
|
||||
joinKeyInputChanged(val);
|
||||
});
|
||||
|
||||
$('#settings-modal input.key').on('input propertychange paste change', function() {
|
||||
var val = $(this).val().trim();
|
||||
let val = $(this).val().trim();
|
||||
if (val !== encryptionKey && val.length) {
|
||||
$('#settings-modal #save-key-edit').removeAttr('disabled');
|
||||
} else {
|
||||
@ -422,7 +421,7 @@ $(function() {
|
||||
function renderParticipantsList() {
|
||||
$('#participants-modal ul.users').empty();
|
||||
_.each(users, function(username) {
|
||||
var li;
|
||||
let li;
|
||||
if (username === window.username) {
|
||||
// User is me
|
||||
li = $("<li>" + username + " <span class='you'>(you)</span></li>").css('color', getUsernameColor(username));
|
||||
@ -468,7 +467,7 @@ $(function() {
|
||||
}
|
||||
|
||||
function saveKey() {
|
||||
var key = $('.edit-key input.key').val().trim();
|
||||
let key = $('.edit-key input.key').val().trim();
|
||||
if (!key.length) return;
|
||||
$('.edit-key').hide();
|
||||
$('.read-key').show();
|
||||
@ -480,7 +479,7 @@ $(function() {
|
||||
});
|
||||
|
||||
function checkJoinKey() {
|
||||
var key = $('#join-modal input').val().trim();
|
||||
let key = $('#join-modal input').val().trim();
|
||||
if (!key.length) return;
|
||||
updateKeyVal(key);
|
||||
$('#join-modal').modal('hide');
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user