diff --git a/client/script.js b/client/script.js index 7785e01..e0ada2b 100644 --- a/client/script.js +++ b/client/script.js @@ -12,31 +12,31 @@ var socket = io.connect(); function sendAction(a, d) { //console.log('--> ' + a); - - var message = { + + var message = { action: a, data: d } - + socket.json.send ( message ); } -socket.on('connect', function(){ +socket.on('connect', function(){ //console.log('successful socket.io connect'); - + //let the path be the room name var path = location.pathname; - + //imediately join the room which will trigger the initializations sendAction('joinRoom', path); }) -socket.on('disconnect', function(){ +socket.on('disconnect', function(){ blockUI("Server disconnected. Refresh page to try and reconnect..."); //$('.blockOverlay').click($.unblockUI); }); -socket.on('message', function(data){ +socket.on('message', function(data){ getMessage(data); }) @@ -48,21 +48,21 @@ function unblockUI() function blockUI(message) { message = message || 'Waiting...'; - - $.blockUI({ + + $.blockUI({ message: message, - - css: { - border: 'none', - padding: '15px', - backgroundColor: '#000', - '-webkit-border-radius': '10px', - '-moz-border-radius': '10px', - opacity: .5, - color: '#fff', + + css: { + border: 'none', + padding: '15px', + backgroundColor: '#000', + '-webkit-border-radius': '10px', + '-moz-border-radius': '10px', + opacity: .5, + color: '#fff', fontSize: '20px' } - }); + }); } //respond to an action event @@ -71,9 +71,9 @@ function getMessage( m ) var message = m; //JSON.parse(m); var action = message.action; var data = message.data; - + //console.log('<-- ' + action); - + switch (action) { case 'roomAccept': @@ -81,76 +81,76 @@ function getMessage( m ) //(this is a bit of unnessary back and forth but that's okay for now) sendAction('initializeMe', null); break; - + case 'roomDeny': //this doesn't happen yet break; - + case 'moveCard': - moveCard($("#" + data.id), data.position); + moveCard($("#" + data.id), data.position); break; - + case 'initCards': initCards(data); break; - + case 'createCard': //console.log(data); - drawNewCard(data.id, data.text, data.x, data.y, data.rot, data.colour, null); + drawNewCard(data.id, data.text, data.x, data.y, data.rot, data.colour, null); break; - + case 'deleteCard': $("#" + data.id).fadeOut(500, function() {$(this).remove();} ); break; - + case 'editCard': $("#" + data.id).children('.content:first').text(data.value); break; - + case 'initColumns': initColumns(data); break; - + case 'updateColumns': initColumns(data); break; - + case 'changeTheme': changeThemeTo(data); break; - + case 'join-announce': displayUserJoined(data.sid, data.user_name); break; - + case 'leave-announce': displayUserLeft(data.sid); break; - + case 'initialUsers': displayInitialUsers(data); break; - + case 'nameChangeAnnounce': updateName( message.data.sid, message.data.user_name ); break; - + case 'addSticker': addSticker( message.data.cardId, message.data.stickerId ); break; - + case 'setBoardSize': resizeBoard( message.data ); break; - + default: //unknown message alert('unknown action: ' + JSON.stringify(message)); break; } - + } @@ -161,16 +161,19 @@ $(document).bind('keyup', function(event) { function drawNewCard(id, text, x, y, rot, colour, sticker, animationspeed) { //cards[id] = {id: id, text: text, x: x, y: y, rot: rot, colour: colour}; - - var h = '
\ + + var h = '
\ \ \ -
' + text + '
\ +
' + + text + '
\
'; - var card = $(h); + var card = $(h); card.appendTo('#board'); - + //@TODO //Draggable has a bug which prevents blur event //http://bugs.jqueryui.com/ticket/4261 @@ -178,12 +181,12 @@ function drawNewCard(id, text, x, y, rot, colour, sticker, animationspeed) //we click on a card //The following doesn't work so we will do the bug //fix recommended in the above bug report - // card.click( function() { + // card.click( function() { // $(this).focus(); // } ); - + card.draggable( - { + { snap: false, snapTolerance: 5, containment: [0,0,2000,2000], @@ -197,7 +200,7 @@ function drawNewCard(id, text, x, y, rot, colour, sticker, animationspeed) return false; } } - } + } ); //After a drag: @@ -212,41 +215,45 @@ function drawNewCard(id, text, x, y, rot, colour, sticker, animationspeed) position: ui.position, oldposition: ui.originalPosition, }; - + sendAction('moveCard', data); }); - + card.children(".droppable").droppable( - { + { accept: '.sticker', drop: function( event, ui ) { var stickerId = ui.draggable.attr("id"); var cardId = $(this).parent().attr('id'); - + addSticker( cardId, stickerId ); - + var data = { cardId: cardId, stickerId: stickerId }; sendAction('addSticker', data); - + //remove hover state to everything on the board to prevent //a jquery bug where it gets left around $('.card-hover-draggable').removeClass('card-hover-draggable'); }, hoverClass: 'card-hover-draggable' - } + } ); - + var speed = Math.floor(Math.random() * 1000); if (typeof(animationspeed) != 'undefined') speed = animationspeed; - + var startPosition = $("#create-card").position(); + + card.css( 'top' , startPosition.top - card.height()*.5 ); + card.css('left', startPosition.left - card.width() *.5 ); + card.animate({ left: x + "px", - top: y + "px" + top: y + "px" }, speed); - - card.hover( - function(){ + + card.hover( + function(){ $(this).addClass('hover'); $(this).children('.card-icon').fadeIn(10); }, @@ -255,7 +262,7 @@ function drawNewCard(id, text, x, y, rot, colour, sticker, animationspeed) $(this).children('.card-icon').fadeOut(150); } ); - + card.children('.card-icon').hover( function(){ $(this).addClass('card-icon-hover'); @@ -264,7 +271,7 @@ function drawNewCard(id, text, x, y, rot, colour, sticker, animationspeed) $(this).removeClass('card-icon-hover'); } ); - + card.children('.delete-card-icon').click( function(){ $("#" + id).remove(); @@ -273,12 +280,12 @@ function drawNewCard(id, text, x, y, rot, colour, sticker, animationspeed) } ); - card.children('.content').editable(function(value, settings) { + card.children('.content').editable(function(value, settings) { onCardChange( id, value ); return(value); - }, { + }, { type : 'textarea', - submit : 'OK', + submit : 'OK', style : 'inherit', cssclass : 'card-edit-form', type : 'textarea', @@ -286,7 +293,7 @@ function drawNewCard(id, text, x, y, rot, colour, sticker, animationspeed) onblur: 'submit', event: 'dblclick', //event: 'mouseover' }); - + //add applicable sticker if (sticker != null) $("#" + id).children('.content').addClass( sticker ); @@ -294,22 +301,22 @@ function drawNewCard(id, text, x, y, rot, colour, sticker, animationspeed) function onCardChange( id, text ) -{ +{ sendAction('editCard', { id: id, value: text }); } function moveCard(card, position) { - card.animate({ - left: position.left+"px", - top: position.top+"px" - }, 500); + card.animate({ + left: position.left+"px", + top: position.top+"px" + }, 500); } -function addSticker ( cardId , stickerId ) +function addSticker ( cardId , stickerId ) { - + cardContent = $('#' + cardId).children('.content'); - + cardContent.removeClass("sticker-red"); cardContent.removeClass("sticker-blue"); cardContent.removeClass("sticker-green"); @@ -333,9 +340,9 @@ function addSticker ( cardId , stickerId ) function createCard( id, text, x, y, rot, colour ) { drawNewCard(id, text, x, y, rot, colour, null); - + var action = "createCard"; - + var data = { id: id, text: text, @@ -344,17 +351,17 @@ function createCard( id, text, x, y, rot, colour ) rot: rot, colour: colour }; - + sendAction(action, data); - + } function randomCardColour() { var colours = ['yellow', 'green', 'blue', 'white']; - + var i = Math.floor(Math.random() * colours.length); - + return colours[i]; } @@ -363,13 +370,13 @@ function initCards( cardArray ) { //first delete any cards that exist $('.card').remove(); - + cards = cardArray; - + for (i in cardArray) { card = cardArray[i]; - + drawNewCard( card.id, card.text, @@ -391,19 +398,19 @@ function initCards( cardArray ) //---------------------------------- function drawNewColumn (columnName) -{ +{ var cls = "col"; if (totalcolumns == 0) { cls = "col first"; } - + $('#icon-col').before('

' + columnName + '

'); - $('.editable').editable(function(value, settings) { + $('.editable').editable(function(value, settings) { onColumnChange( this.id, value ); return(value); - }, { + }, { style : 'inherit', cssclass : 'card-edit-form', type : 'textarea', @@ -414,9 +421,9 @@ function drawNewColumn (columnName) xindicator: '', event: 'dblclick', //event: 'mouseover' }); - + $('.col:last').fadeIn(1500); - + totalcolumns ++; } @@ -438,63 +445,63 @@ function onColumnChange( id, text ) } else { - names.push( $(this).text() ); + names.push( $(this).text() ); } - + }); - + updateColumns(names); } function displayRemoveColumn() { if (totalcolumns <= 0) return false; - + $('.col:last').fadeOut( 150, function() { $(this).remove(); } ); - + totalcolumns --; } function createColumn( name ) { if (totalcolumns >= 8) return false; - + drawNewColumn( name ); columns.push(name); - + var action = "updateColumns"; - + var data = columns; - + sendAction(action, data); } function deleteColumn() { if (totalcolumns <= 0) return false; - + displayRemoveColumn(); columns.pop(); - + var action = "updateColumns"; - + var data = columns; - + sendAction(action, data); } function updateColumns( c ) { columns = c; - + var action = "updateColumns"; - + var data = columns; - + sendAction(action, data); } @@ -508,9 +515,9 @@ function initColumns( columnArray ) { totalcolumns = 0; columns = columnArray; - + $('.col').remove(); - + for (i in columnArray) { column = columnArray[i]; @@ -552,9 +559,9 @@ for (i=0;i' + name + '') } @@ -594,9 +601,9 @@ function displayUserLeft ( sid ) name = user_name; else name = sid; - + var id = '#user-' + sid.toString(); - + $('#names-ul').children(id).fadeOut( 1000 , function() { $(this).remove(); }); @@ -606,7 +613,7 @@ function displayUserLeft ( sid ) function updateName ( sid, name ) { var id = '#user-' + sid.toString(); - + $('#names-ul').children(id).text( name ); } @@ -615,13 +622,13 @@ function updateName ( sid, name ) function boardResizeHappened(event, ui) { - var newsize = ui.size + var newsize = ui.size sendAction( 'setBoardSize', newsize); } function resizeBoard (size) { - $( ".board-outline" ).animate( { + $( ".board-outline" ).animate( { height: size.height, width: size.width } ); @@ -630,21 +637,21 @@ function resizeBoard (size) { ////////////////////////////////////////////////////////// function calcCardOffset() { - var offsets = {}; - $(".card").each(function() { - var card = $(this); - $(".col").each(function(i) { - var col = $(this); - if(col.offset().left + col.outerWidth() > card.offset().left + card.outerWidth() || i === $(".col").size() - 1) { - offsets[card.attr('id')] = { - col: col, - x: ( (card.offset().left - col.offset().left) / col.outerWidth() ) - } - return false; - } - }); - }); - return offsets; + var offsets = {}; + $(".card").each(function() { + var card = $(this); + $(".col").each(function(i) { + var col = $(this); + if(col.offset().left + col.outerWidth() > card.offset().left + card.outerWidth() || i === $(".col").size() - 1) { + offsets[card.attr('id')] = { + col: col, + x: ( (card.offset().left - col.offset().left) / col.outerWidth() ) + } + return false; + } + }); + }); + return offsets; } @@ -652,7 +659,7 @@ function calcCardOffset() { //doSync is false if you don't want to synchronize //with all the other users who are in this room function adjustCard(offsets, doSync) { - $(".card").each(function() { + $(".card").each(function() { var card = $(this); var offset = offsets[this.id]; if(offset) { @@ -690,11 +697,11 @@ function adjustCard(offsets, doSync) { ////////////////////////////////////////////////////////// $(function() { - + if (boardInitialized == false) blockUI(''); - //setTimeout($.unblockUI, 2000); + //setTimeout($.unblockUI, 2000); $( "#create-card" ) @@ -702,17 +709,17 @@ $(function() { var rotation = Math.random() * 10 - 5; //add a bit of random rotation (+/- 10deg) uniqueID = Math.round(Math.random()*99999999); //is this big enough to assure uniqueness? //alert(uniqueID); - createCard( + createCard( 'card' + uniqueID, '', - 58, $('div.board-outline').height(),// hack - not a great way to get the new card coordinates, but most consistant ATM + 58, $('div.board-outline').height(),// hack - not a great way to get the new card coordinates, but most consistant ATM rotation, randomCardColour()); }); - - - - + + + + // Style changer $("#smallify").click(function(){ if (currentTheme == "bigcards") @@ -727,16 +734,16 @@ $(function() { { currentTheme = "bigcards"; $("link[title=cardsize]").attr("href", "css/bigcards.css"); - }*/ - + }*/ + sendAction('changeTheme', currentTheme); - - + + return false; }); - - - + + + $('#icon-col').hover( function() { $('.col-icon').fadeIn(10); @@ -745,58 +752,58 @@ $(function() { $('.col-icon').fadeOut(150); } ); - + $('#add-col').click( function(){ createColumn('New'); return false; } ); - + $('#delete-col').click( function(){ deleteColumn(); return false; } ); - - - // $('#cog-button').click( function(){ - // $('#config-dropdown').fadeToggle(); + + + // $('#cog-button').click( function(){ + // $('#config-dropdown').fadeToggle(); // } ); - - // $('#config-dropdown').hover( + + // $('#config-dropdown').hover( // function(){ /*$('#config-dropdown').fadeIn()*/ }, - // function(){ $('#config-dropdown').fadeOut() } + // function(){ $('#config-dropdown').fadeOut() } // ); - // - + // + var user_name = getCookie('scrumscrum-username'); - - - + + + $("#yourname-input").focus(function() { - if ($(this).val() == 'unknown') - { + if ($(this).val() == 'unknown') + { $(this).val(""); - } - + } + $(this).addClass('focused'); }); - + $("#yourname-input").blur(function() { if ($(this).val() == "") { - $(this).val('unknown'); + $(this).val('unknown'); } $(this).removeClass('focused'); - + setName($(this).val()); }); - + $("#yourname-input").val(user_name); $("#yourname-input").blur(); @@ -804,22 +811,22 @@ $(function() { $("#yourname-input").keypress(function(e) { - code= (e.keyCode ? e.keyCode : e.which); - if (code == 10 || code == 13) + code= (e.keyCode ? e.keyCode : e.which); + if (code == 10 || code == 13) { $(this).blur(); } - }); + }); -$( ".sticker" ).draggable({ +$( ".sticker" ).draggable({ revert: true, zIndex: 1000 }); -$( ".board-outline" ).resizable( { +$( ".board-outline" ).resizable( { ghost: false, minWidth: 700, minHeight: 400 , @@ -829,18 +836,18 @@ $( ".board-outline" ).resizable( { //A new scope for precalculating (function() { - var offsets; - - $(".board-outline").bind("resizestart", function() { - offsets = calcCardOffset(); - }); + var offsets; + + $(".board-outline").bind("resizestart", function() { + offsets = calcCardOffset(); + }); $(".board-outline").bind("resize", function(event, ui) { - adjustCard(offsets, false); - }); - $(".board-outline").bind("resizestop", function(event, ui) { - boardResizeHappened(event, ui); - adjustCard(offsets, true); - }); + adjustCard(offsets, false); + }); + $(".board-outline").bind("resizestop", function(event, ui) { + boardResizeHappened(event, ui); + adjustCard(offsets, true); + }); })(); @@ -860,18 +867,7 @@ $('#eraser').draggable( ); //disable image dragging -window.ondragstart = function() { return false; } +window.ondragstart = function() { return false; } }); - - - - - - - - - - -