650 lines
21 KiB
JavaScript
650 lines
21 KiB
JavaScript
/**
|
|
* Copyright 2009 Google Inc.
|
|
*
|
|
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
* you may not use this file except in compliance with the License.
|
|
* You may obtain a copy of the License at
|
|
*
|
|
* http://www.apache.org/licenses/LICENSE-2.0
|
|
*
|
|
* Unless required by applicable law or agreed to in writing, software
|
|
* distributed under the License is distributed on an "AS-IS" BASIS,
|
|
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
* See the License for the specific language governing permissions and
|
|
* limitations under the License.
|
|
*/
|
|
|
|
var myUserInfo = {};
|
|
|
|
var colorPickerOpen = false;
|
|
var colorPickerSetup = false;
|
|
var previousColorId = 0;
|
|
|
|
|
|
var paduserlist = (function() {
|
|
|
|
var rowManager = (function() {
|
|
// The row manager handles rendering rows of the user list and animating
|
|
// their insertion, removal, and reordering. It manipulates TD height
|
|
// and TD opacity.
|
|
|
|
function nextRowId() {
|
|
return "usertr"+(nextRowId.counter++);
|
|
}
|
|
nextRowId.counter = 1;
|
|
// objects are shared; fields are "domId","data","animationStep"
|
|
var rowsFadingOut = []; // unordered set
|
|
var rowsFadingIn = []; // unordered set
|
|
var rowsPresent = []; // in order
|
|
|
|
var ANIMATION_START = -12; // just starting to fade in
|
|
var ANIMATION_END = 12; // just finishing fading out
|
|
function getAnimationHeight(step, power) {
|
|
var a = Math.abs(step/12);
|
|
if (power == 2) a = a*a;
|
|
else if (power == 3) a = a*a*a;
|
|
else if (power == 4) a = a*a*a*a;
|
|
else if (power >= 5) a = a*a*a*a*a;
|
|
return Math.round(26*(1-a));
|
|
}
|
|
var OPACITY_STEPS = 6;
|
|
|
|
var ANIMATION_STEP_TIME = 20;
|
|
var LOWER_FRAMERATE_FACTOR = 2;
|
|
var scheduleAnimation = padutils.makeAnimationScheduler(animateStep, ANIMATION_STEP_TIME,
|
|
LOWER_FRAMERATE_FACTOR).scheduleAnimation;
|
|
|
|
var NUMCOLS = 4;
|
|
|
|
// we do lots of manipulation of table rows and stuff that JQuery makes ok, despite
|
|
// IE's poor handling when manipulating the DOM directly.
|
|
|
|
function getEmptyRowHtml(height) {
|
|
return '<td colspan="'+NUMCOLS+'" style="border:0;height:'+height+'px"><!-- --></td>';
|
|
}
|
|
function isNameEditable(data) {
|
|
return (! data.name) && (data.status != 'Disconnected');
|
|
}
|
|
function replaceUserRowContents(tr, height, data) {
|
|
var tds = getUserRowHtml(height, data).match(/<td.*?<\/td>/gi);
|
|
if (isNameEditable(data) && tr.find("td.usertdname input:enabled").length > 0) {
|
|
// preserve input field node
|
|
for(var i=0; i<tds.length; i++) {
|
|
var oldTd = $(tr.find("td").get(i));
|
|
if (! oldTd.hasClass('usertdname')) {
|
|
oldTd.replaceWith(tds[i]);
|
|
}
|
|
}
|
|
}
|
|
else {
|
|
tr.html(tds.join(''));
|
|
}
|
|
return tr;
|
|
}
|
|
function getUserRowHtml(height, data) {
|
|
var nameHtml;
|
|
var isGuest = (data.id.charAt(0) != 'p');
|
|
if (data.name) {
|
|
nameHtml = padutils.escapeHtml(data.name);
|
|
if (isGuest && pad.getIsProPad()) {
|
|
nameHtml += ' (Guest)';
|
|
}
|
|
}
|
|
else {
|
|
nameHtml = '<input type="text" class="editempty newinput" value="unnamed" '+
|
|
(isNameEditable(data) ? '' : 'disabled="disabled" ')+
|
|
'/>';
|
|
}
|
|
|
|
return ['<td style="height:',height,'px" class="usertdswatch"><div class="swatch" style="background:'+data.color+'"> </div></td>',
|
|
'<td style="height:',height,'px" class="usertdname">',nameHtml,'</td>',
|
|
'<td style="height:',height,'px" class="usertdstatus">',padutils.escapeHtml(data.status),'</td>',
|
|
'<td style="height:',height,'px" class="activity">',padutils.escapeHtml(data.activity),'</td>'].join('');
|
|
}
|
|
function getRowHtml(id, innerHtml) {
|
|
return '<tr id="'+id+'">'+innerHtml+'</tr>';
|
|
}
|
|
function rowNode(row) {
|
|
return $("#"+row.domId);
|
|
}
|
|
function handleRowData(row) {
|
|
if (row.data && row.data.status == 'Disconnected') {
|
|
row.opacity = 0.5;
|
|
}
|
|
else {
|
|
delete row.opacity;
|
|
}
|
|
}
|
|
function handleRowNode(tr, data) {
|
|
if (data.titleText) {
|
|
var titleText = data.titleText;
|
|
window.setTimeout(function() { tr.attr('title', titleText )}, 0);
|
|
}
|
|
else {
|
|
tr.removeAttr('title');
|
|
}
|
|
}
|
|
function handleOtherUserInputs() {
|
|
// handle 'INPUT' elements for naming other unnamed users
|
|
$("#otheruserstable input.newinput").each(function() {
|
|
var input = $(this);
|
|
var tr = input.closest("tr");
|
|
if (tr.length > 0) {
|
|
var index = tr.parent().children().index(tr);
|
|
if (index >= 0) {
|
|
var userId = rowsPresent[index].data.id;
|
|
rowManagerMakeNameEditor($(this), userId);
|
|
}
|
|
}
|
|
}).removeClass('newinput');
|
|
}
|
|
|
|
// animationPower is 0 to skip animation, 1 for linear, 2 for quadratic, etc.
|
|
function insertRow(position, data, animationPower) {
|
|
position = Math.max(0, Math.min(rowsPresent.length, position));
|
|
animationPower = (animationPower === undefined ? 4 : animationPower);
|
|
|
|
var domId = nextRowId();
|
|
var row = {data: data, animationStep: ANIMATION_START, domId: domId,
|
|
animationPower: animationPower};
|
|
handleRowData(row);
|
|
rowsPresent.splice(position, 0, row);
|
|
var tr;
|
|
if (animationPower == 0) {
|
|
tr = $(getRowHtml(domId, getUserRowHtml(getAnimationHeight(0), data)));
|
|
row.animationStep = 0;
|
|
}
|
|
else {
|
|
rowsFadingIn.push(row);
|
|
tr = $(getRowHtml(domId, getEmptyRowHtml(getAnimationHeight(ANIMATION_START))));
|
|
}
|
|
handleRowNode(tr, data);
|
|
if (position == 0) {
|
|
$("table#otheruserstable").prepend(tr);
|
|
}
|
|
else {
|
|
rowNode(rowsPresent[position-1]).after(tr);
|
|
}
|
|
|
|
if (animationPower != 0) {
|
|
scheduleAnimation();
|
|
}
|
|
|
|
handleOtherUserInputs();
|
|
|
|
return row;
|
|
}
|
|
|
|
function updateRow(position, data) {
|
|
var row = rowsPresent[position];
|
|
if (row) {
|
|
row.data = data;
|
|
handleRowData(row);
|
|
if (row.animationStep == 0) {
|
|
// not currently animating
|
|
var tr = rowNode(row);
|
|
replaceUserRowContents(tr, getAnimationHeight(0), row.data).find(
|
|
"td").css('opacity', (row.opacity === undefined ? 1 : row.opacity));
|
|
handleRowNode(tr, data);
|
|
handleOtherUserInputs();
|
|
}
|
|
}
|
|
}
|
|
|
|
function removeRow(position, animationPower) {
|
|
animationPower = (animationPower === undefined ? 4 : animationPower);
|
|
var row = rowsPresent[position];
|
|
if (row) {
|
|
rowsPresent.splice(position, 1); // remove
|
|
if (animationPower == 0) {
|
|
rowNode(row).remove();
|
|
}
|
|
else {
|
|
row.animationStep = - row.animationStep; // use symmetry
|
|
row.animationPower = animationPower;
|
|
rowsFadingOut.push(row);
|
|
scheduleAnimation();
|
|
}
|
|
}
|
|
}
|
|
|
|
// newPosition is position after the row has been removed
|
|
function moveRow(oldPosition, newPosition, animationPower) {
|
|
animationPower = (animationPower === undefined ? 1 : animationPower); // linear is best
|
|
var row = rowsPresent[oldPosition];
|
|
if (row && oldPosition != newPosition) {
|
|
var rowData = row.data;
|
|
removeRow(oldPosition, animationPower);
|
|
insertRow(newPosition, rowData, animationPower);
|
|
}
|
|
}
|
|
|
|
function animateStep() {
|
|
// animation must be symmetrical
|
|
for(var i=rowsFadingIn.length-1;i>=0;i--) { // backwards to allow removal
|
|
var row = rowsFadingIn[i];
|
|
var step = ++row.animationStep;
|
|
var animHeight = getAnimationHeight(step, row.animationPower);
|
|
var node = rowNode(row);
|
|
var baseOpacity = (row.opacity === undefined ? 1 : row.opacity);
|
|
if (step <= -OPACITY_STEPS) {
|
|
node.find("td").height(animHeight);
|
|
}
|
|
else if (step == -OPACITY_STEPS+1) {
|
|
node.html(getUserRowHtml(animHeight, row.data)).find("td").css(
|
|
'opacity', baseOpacity*1/OPACITY_STEPS);
|
|
handleRowNode(node, row.data);
|
|
}
|
|
else if (step < 0) {
|
|
node.find("td").css('opacity', baseOpacity*(OPACITY_STEPS-(-step))/OPACITY_STEPS).height(animHeight);
|
|
}
|
|
else if (step == 0) {
|
|
// set HTML in case modified during animation
|
|
node.html(getUserRowHtml(animHeight, row.data)).find("td").css(
|
|
'opacity', baseOpacity*1).height(animHeight);
|
|
handleRowNode(node, row.data);
|
|
rowsFadingIn.splice(i, 1); // remove from set
|
|
}
|
|
}
|
|
for(var i=rowsFadingOut.length-1;i>=0;i--) { // backwards to allow removal
|
|
var row = rowsFadingOut[i];
|
|
var step = ++row.animationStep;
|
|
var node = rowNode(row);
|
|
var animHeight = getAnimationHeight(step, row.animationPower);
|
|
var baseOpacity = (row.opacity === undefined ? 1 : row.opacity);
|
|
if (step < OPACITY_STEPS) {
|
|
node.find("td").css('opacity', baseOpacity*(OPACITY_STEPS - step)/OPACITY_STEPS).height(animHeight);
|
|
}
|
|
else if (step == OPACITY_STEPS) {
|
|
node.html(getEmptyRowHtml(animHeight));
|
|
}
|
|
else if (step <= ANIMATION_END) {
|
|
node.find("td").height(animHeight);
|
|
}
|
|
else {
|
|
rowsFadingOut.splice(i, 1); // remove from set
|
|
node.remove();
|
|
}
|
|
}
|
|
|
|
handleOtherUserInputs();
|
|
|
|
return (rowsFadingIn.length > 0) || (rowsFadingOut.length > 0); // is more to do
|
|
}
|
|
|
|
var self = {
|
|
insertRow: insertRow,
|
|
removeRow: removeRow,
|
|
moveRow: moveRow,
|
|
updateRow: updateRow
|
|
};
|
|
return self;
|
|
}()); ////////// rowManager
|
|
|
|
var otherUsersInfo = [];
|
|
var otherUsersData = [];
|
|
|
|
function rowManagerMakeNameEditor(jnode, userId) {
|
|
setUpEditable(jnode, function() {
|
|
var existingIndex = findExistingIndex(userId);
|
|
if (existingIndex >= 0) {
|
|
return otherUsersInfo[existingIndex].name || '';
|
|
}
|
|
else {
|
|
return '';
|
|
}
|
|
}, function(newName) {
|
|
if (! newName) {
|
|
jnode.addClass("editempty");
|
|
jnode.val("unnamed");
|
|
}
|
|
else {
|
|
jnode.attr('disabled', 'disabled');
|
|
pad.suggestUserName(userId, newName);
|
|
}
|
|
});
|
|
}
|
|
|
|
function findExistingIndex(userId) {
|
|
var existingIndex = -1;
|
|
for(var i=0;i<otherUsersInfo.length;i++) {
|
|
if (otherUsersInfo[i].userId == userId) {
|
|
existingIndex = i;
|
|
break;
|
|
}
|
|
}
|
|
return existingIndex;
|
|
}
|
|
|
|
function setUpEditable(jqueryNode, valueGetter, valueSetter) {
|
|
jqueryNode.bind('focus', function(evt) {
|
|
var oldValue = valueGetter();
|
|
if (jqueryNode.val() !== oldValue) {
|
|
jqueryNode.val(oldValue);
|
|
}
|
|
jqueryNode.addClass("editactive").removeClass("editempty");
|
|
});
|
|
jqueryNode.bind('blur', function(evt) {
|
|
var newValue = jqueryNode.removeClass("editactive").val();
|
|
valueSetter(newValue);
|
|
});
|
|
padutils.bindEnterAndEscape(jqueryNode, function onEnter() {
|
|
jqueryNode.blur();
|
|
}, function onEscape() {
|
|
jqueryNode.val(valueGetter()).blur();
|
|
});
|
|
jqueryNode.removeAttr('disabled').addClass('editable');
|
|
}
|
|
|
|
function updateInviteNotice() {
|
|
if (otherUsersInfo.length == 0) {
|
|
$("#otheruserstable").hide();
|
|
$("#nootherusers").show();
|
|
}
|
|
else {
|
|
$("#nootherusers").hide();
|
|
$("#otheruserstable").show();
|
|
}
|
|
}
|
|
|
|
var knocksToIgnore = {};
|
|
var guestPromptFlashState = 0;
|
|
var guestPromptFlash = padutils.makeAnimationScheduler(
|
|
function () {
|
|
var prompts = $("#guestprompts .guestprompt");
|
|
if (prompts.length == 0) {
|
|
return false; // no more to do
|
|
}
|
|
|
|
guestPromptFlashState = 1 - guestPromptFlashState;
|
|
if (guestPromptFlashState) {
|
|
prompts.css('background', '#ffa');
|
|
}
|
|
else {
|
|
prompts.css('background', '#ffe');
|
|
}
|
|
|
|
return true;
|
|
}, 1000);
|
|
|
|
var self = {
|
|
init: function(myInitialUserInfo) {
|
|
self.setMyUserInfo(myInitialUserInfo);
|
|
|
|
$("#otheruserstable tr").remove();
|
|
|
|
if (pad.getUserIsGuest()) {
|
|
$("#myusernameedit").addClass('myusernameedithoverable');
|
|
setUpEditable($("#myusernameedit"),
|
|
function() {
|
|
return myUserInfo.name || '';
|
|
},
|
|
function(newValue) {
|
|
myUserInfo.name = newValue;
|
|
pad.notifyChangeName(newValue);
|
|
// wrap with setTimeout to do later because we get
|
|
// a double "blur" fire in IE...
|
|
window.setTimeout(function() {
|
|
self.renderMyUserInfo();
|
|
}, 0);
|
|
});
|
|
}
|
|
|
|
// color picker
|
|
$("#myswatchbox").click(showColorPicker);
|
|
$("#mycolorpicker .pickerswatchouter").click(function() {
|
|
$("#mycolorpicker .pickerswatchouter").removeClass('picked');
|
|
$(this).addClass('picked');
|
|
});
|
|
$("#mycolorpickersave").click(function() {
|
|
closeColorPicker(true);
|
|
});
|
|
$("#mycolorpickercancel").click(function() {
|
|
closeColorPicker(false);
|
|
});
|
|
//
|
|
|
|
},
|
|
setMyUserInfo: function(info) {
|
|
myUserInfo = $.extend({}, info);
|
|
|
|
self.renderMyUserInfo();
|
|
},
|
|
userJoinOrUpdate: function(info) {
|
|
if ((! info.userId) || (info.userId == myUserInfo.userId)) {
|
|
// not sure how this would happen
|
|
return;
|
|
}
|
|
|
|
var userData = {};
|
|
userData.color = pad.getColorPalette()[info.colorId];
|
|
userData.name = info.name;
|
|
userData.status = '';
|
|
userData.activity = '';
|
|
userData.id = info.userId;
|
|
// Firefox ignores \n in title text; Safari does a linebreak
|
|
userData.titleText = [info.userAgent||'', info.ip||''].join(' \n');
|
|
|
|
var existingIndex = findExistingIndex(info.userId);
|
|
|
|
var numUsersBesides = otherUsersInfo.length;
|
|
if (existingIndex >= 0) {
|
|
numUsersBesides--;
|
|
}
|
|
var newIndex = padutils.binarySearch(numUsersBesides, function(n) {
|
|
if (existingIndex >= 0 && n >= existingIndex) {
|
|
// pretend existingIndex isn't there
|
|
n++;
|
|
}
|
|
var infoN = otherUsersInfo[n];
|
|
var nameN = (infoN.name||'').toLowerCase();
|
|
var nameThis = (info.name||'').toLowerCase();
|
|
var idN = infoN.userId;
|
|
var idThis = info.userId;
|
|
return (nameN > nameThis) || (nameN == nameThis &&
|
|
idN > idThis);
|
|
});
|
|
|
|
if (existingIndex >= 0) {
|
|
// update
|
|
if (existingIndex == newIndex) {
|
|
otherUsersInfo[existingIndex] = info;
|
|
otherUsersData[existingIndex] = userData;
|
|
rowManager.updateRow(existingIndex, userData);
|
|
}
|
|
else {
|
|
otherUsersInfo.splice(existingIndex, 1);
|
|
otherUsersData.splice(existingIndex, 1);
|
|
otherUsersInfo.splice(newIndex, 0, info);
|
|
otherUsersData.splice(newIndex, 0, userData);
|
|
rowManager.updateRow(existingIndex, userData);
|
|
rowManager.moveRow(existingIndex, newIndex);
|
|
}
|
|
}
|
|
else {
|
|
otherUsersInfo.splice(newIndex, 0, info);
|
|
otherUsersData.splice(newIndex, 0, userData);
|
|
rowManager.insertRow(newIndex, userData);
|
|
}
|
|
|
|
updateInviteNotice();
|
|
|
|
self.updateNumberOfOnlineUsers();
|
|
},
|
|
updateNumberOfOnlineUsers: function(){
|
|
var online = 1; // you are always online!
|
|
for(var i=0;i<otherUsersData.length;i++) {
|
|
if(otherUsersData[i].status == "")
|
|
{
|
|
online++;
|
|
}
|
|
}
|
|
$("#online_count").text(online);
|
|
|
|
return online;
|
|
},
|
|
userLeave: function(info) {
|
|
var existingIndex = findExistingIndex(info.userId);
|
|
if (existingIndex >= 0) {
|
|
var userData = otherUsersData[existingIndex];
|
|
userData.status = 'Disconnected';
|
|
rowManager.updateRow(existingIndex, userData);
|
|
if (userData.leaveTimer) {
|
|
window.clearTimeout(userData.leaveTimer);
|
|
}
|
|
// set up a timer that will only fire if no leaves,
|
|
// joins, or updates happen for this user in the
|
|
// next N seconds, to remove the user from the list.
|
|
var thisUserId = info.userId;
|
|
var thisLeaveTimer = window.setTimeout(function() {
|
|
var newExistingIndex = findExistingIndex(thisUserId);
|
|
if (newExistingIndex >= 0) {
|
|
var newUserData = otherUsersData[newExistingIndex];
|
|
if (newUserData.status == 'Disconnected' &&
|
|
newUserData.leaveTimer == thisLeaveTimer) {
|
|
otherUsersInfo.splice(newExistingIndex, 1);
|
|
otherUsersData.splice(newExistingIndex, 1);
|
|
rowManager.removeRow(newExistingIndex);
|
|
updateInviteNotice();
|
|
}
|
|
}
|
|
}, 8000); // how long to wait
|
|
userData.leaveTimer = thisLeaveTimer;
|
|
}
|
|
updateInviteNotice();
|
|
|
|
self.updateNumberOfOnlineUsers();
|
|
},
|
|
showGuestPrompt: function(userId, displayName) {
|
|
if (knocksToIgnore[userId]) {
|
|
return;
|
|
}
|
|
|
|
var encodedUserId = padutils.encodeUserId(userId);
|
|
|
|
var actionName = 'hide-guest-prompt-'+encodedUserId;
|
|
padutils.cancelActions(actionName);
|
|
|
|
var box = $("#guestprompt-"+encodedUserId);
|
|
if (box.length == 0) {
|
|
// make guest prompt box
|
|
box = $('<div id="guestprompt-'+encodedUserId+'" class="guestprompt"><div class="choices"><a href="javascript:void(paduserlist.answerGuestPrompt(\''+encodedUserId+'\',false))">Deny</a> <a href="javascript:void(paduserlist.answerGuestPrompt(\''+encodedUserId+'\',true))">Approve</a></div><div class="guestname"><strong>Guest:</strong> '+padutils.escapeHtml(displayName)+'</div></div>');
|
|
$("#guestprompts").append(box);
|
|
}
|
|
else {
|
|
// update display name
|
|
box.find(".guestname").html('<strong>Guest:</strong> '+padutils.escapeHtml(displayName));
|
|
}
|
|
var hideLater = padutils.getCancellableAction(actionName, function() {
|
|
self.removeGuestPrompt(userId);
|
|
});
|
|
window.setTimeout(hideLater, 15000); // time-out with no knock
|
|
|
|
guestPromptFlash.scheduleAnimation();
|
|
},
|
|
removeGuestPrompt: function(userId) {
|
|
var box = $("#guestprompt-"+padutils.encodeUserId(userId));
|
|
// remove ID now so a new knock by same user gets new, unfaded box
|
|
box.removeAttr('id').fadeOut("fast", function() {
|
|
box.remove();
|
|
});
|
|
|
|
knocksToIgnore[userId] = true;
|
|
window.setTimeout(function() {
|
|
delete knocksToIgnore[userId];
|
|
}, 5000);
|
|
},
|
|
answerGuestPrompt: function(encodedUserId, approve) {
|
|
var guestId = padutils.decodeUserId(encodedUserId);
|
|
|
|
var msg = {
|
|
type: 'guestanswer',
|
|
authId: pad.getUserId(),
|
|
guestId: guestId,
|
|
answer: (approve ? "approved" : "denied")
|
|
};
|
|
pad.sendClientMessage(msg);
|
|
|
|
self.removeGuestPrompt(guestId);
|
|
},
|
|
renderMyUserInfo: function() {
|
|
if (myUserInfo.name) {
|
|
$("#myusernameedit").removeClass("editempty").val(
|
|
myUserInfo.name);
|
|
}
|
|
else {
|
|
$("#myusernameedit").addClass("editempty").val(
|
|
"Enter your name");
|
|
}
|
|
if (colorPickerOpen) {
|
|
$("#myswatchbox").addClass('myswatchboxunhoverable').removeClass(
|
|
'myswatchboxhoverable');
|
|
}
|
|
else {
|
|
$("#myswatchbox").addClass('myswatchboxhoverable').removeClass(
|
|
'myswatchboxunhoverable');
|
|
}
|
|
$("#myswatch").css('background', pad.getColorPalette()[myUserInfo.colorId]);
|
|
}
|
|
};
|
|
return self;
|
|
}());
|
|
|
|
function getColorPickerSwatchIndex(jnode) {
|
|
// return Number(jnode.get(0).className.match(/\bn([0-9]+)\b/)[1])-1;
|
|
return $("#colorpickerswatches li").index(jnode);
|
|
}
|
|
function closeColorPicker(accept) {
|
|
if (accept) {
|
|
var newColorId = getColorPickerSwatchIndex($("#colorpickerswatches .picked"));
|
|
if (newColorId >= 0) { // fails on NaN
|
|
myUserInfo.colorId = newColorId;
|
|
pad.notifyChangeColor(newColorId);
|
|
}
|
|
|
|
paduserlist.renderMyUserInfo();
|
|
} else {
|
|
pad.notifyChangeColor(previousColorId);
|
|
paduserlist.renderMyUserInfo();
|
|
}
|
|
|
|
colorPickerOpen = false;
|
|
$("#mycolorpicker").css('display', 'none');
|
|
}
|
|
|
|
function showColorPicker() {
|
|
previousColorId = myUserInfo.colorId ;
|
|
|
|
if (! colorPickerOpen) {
|
|
var palette = pad.getColorPalette();
|
|
|
|
if(!colorPickerSetup) {
|
|
var colorsList = $("#colorpickerswatches")
|
|
for(var i=0;i<palette.length;i++) {
|
|
|
|
var li = $('<li>', {
|
|
style: 'background: '+palette[i]+';'
|
|
});
|
|
|
|
li.appendTo(colorsList);
|
|
|
|
li.bind('click', function(event){
|
|
$("#colorpickerswatches li").removeClass('picked');
|
|
$(event.target).addClass("picked");
|
|
|
|
var newColorId = getColorPickerSwatchIndex($("#colorpickerswatches .picked"));
|
|
pad.notifyChangeColor(newColorId);
|
|
});
|
|
|
|
}
|
|
|
|
colorPickerSetup = true;
|
|
}
|
|
|
|
$("#mycolorpicker").css('display', 'block');
|
|
colorPickerOpen = true;
|
|
|
|
$("#colorpickerswatches li").removeClass('picked');
|
|
$($("#colorpickerswatches li")[myUserInfo.colorId]).addClass("picked"); //seems weird
|
|
}
|
|
} |