etherpad-lite/static/js/pad_docbar.js

453 lines
11 KiB
JavaScript
Raw Normal View History

2011-03-26 14:10:41 +01:00
/**
* Copyright 2009 Google Inc.
2011-07-07 19:59:34 +02:00
*
2011-03-26 14:10:41 +01:00
* 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
2011-07-07 19:59:34 +02:00
*
2011-03-26 14:10:41 +01:00
* http://www.apache.org/licenses/LICENSE-2.0
2011-07-07 19:59:34 +02:00
*
2011-03-26 14:10:41 +01:00
* 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.
*/
2011-07-07 19:59:34 +02:00
var paddocbar = (function()
{
2011-03-26 14:10:41 +01:00
var isTitleEditable = false;
var isEditingTitle = false;
var isEditingPassword = false;
var enabled = false;
2011-07-07 19:59:34 +02:00
function getPanelOpenCloseAnimator(panelName, panelHeight)
{
var wrapper = $("#" + panelName + "-wrapper");
var openingClass = "docbar" + panelName + "-opening";
var openClass = "docbar" + panelName + "-open";
var closingClass = "docbar" + panelName + "-closing";
function setPanelState(action)
{
2011-03-26 14:10:41 +01:00
$("#docbar").removeClass(openingClass).removeClass(openClass).
2011-07-07 19:59:34 +02:00
removeClass(closingClass);
if (action != "closed")
{
$("#docbar").addClass("docbar" + panelName + "-" + action);
2011-03-26 14:10:41 +01:00
}
}
2011-07-07 19:59:34 +02:00
function openCloseAnimate(state)
{
function pow(x)
{
x = 1 - x;
x *= x * x;
return 1 - x;
}
2011-03-26 14:10:41 +01:00
2011-07-07 19:59:34 +02:00
if (state == -1)
{
2011-03-26 14:10:41 +01:00
// startng to open
setPanelState("opening");
wrapper.css('height', '0');
}
2011-07-07 19:59:34 +02:00
else if (state < 0)
{
2011-03-26 14:10:41 +01:00
// opening
2011-07-07 19:59:34 +02:00
var height = Math.round(pow(state + 1) * (panelHeight - 1)) + 'px';
2011-03-26 14:10:41 +01:00
wrapper.css('height', height);
}
2011-07-07 19:59:34 +02:00
else if (state == 0)
{
2011-03-26 14:10:41 +01:00
// open
setPanelState("open");
2011-07-07 19:59:34 +02:00
wrapper.css('height', panelHeight - 1);
2011-03-26 14:10:41 +01:00
}
2011-07-07 19:59:34 +02:00
else if (state < 1)
{
2011-03-26 14:10:41 +01:00
// closing
setPanelState("closing");
2011-07-07 19:59:34 +02:00
var height = Math.round((1 - pow(state)) * (panelHeight - 1)) + 'px';
2011-03-26 14:10:41 +01:00
wrapper.css('height', height);
}
2011-07-07 19:59:34 +02:00
else if (state == 1)
{
2011-03-26 14:10:41 +01:00
// closed
setPanelState("closed");
wrapper.css('height', '0');
}
}
return padutils.makeShowHideAnimator(openCloseAnimate, false, 25, 500);
}
var currentPanel = null;
2011-07-07 19:59:34 +02:00
function setCurrentPanel(newCurrentPanel)
{
if (currentPanel != newCurrentPanel)
{
2011-03-26 14:10:41 +01:00
currentPanel = newCurrentPanel;
padutils.cancelActions("hide-docbar-panel");
}
}
var panels;
2011-07-07 19:59:34 +02:00
function changePassword(newPass)
{
if ((newPass || null) != (self.password || null))
{
2011-03-26 14:10:41 +01:00
self.password = (newPass || null);
pad.notifyChangePassword(newPass);
}
self.renderPassword();
}
var self = {
title: null,
password: null,
2011-07-07 19:59:34 +02:00
init: function(opts)
{
2011-03-26 14:10:41 +01:00
panels = {
2011-07-07 19:59:34 +02:00
impexp: {
animator: getPanelOpenCloseAnimator("impexp", 160)
},
savedrevs: {
animator: getPanelOpenCloseAnimator("savedrevs", 79)
},
options: {
animator: getPanelOpenCloseAnimator("options", 114)
},
security: {
animator: getPanelOpenCloseAnimator("security", 130)
}
2011-03-26 14:10:41 +01:00
};
isTitleEditable = opts.isTitleEditable;
self.title = opts.initialTitle;
self.password = opts.initialPassword;
2011-07-07 19:59:34 +02:00
$("#docbarimpexp").click(function()
{
self.togglePanel("impexp");
});
$("#docbarsavedrevs").click(function()
{
self.togglePanel("savedrevs");
});
$("#docbaroptions").click(function()
{
self.togglePanel("options");
});
$("#docbarsecurity").click(function()
{
self.togglePanel("security");
});
2011-03-26 14:10:41 +01:00
$("#docbarrenamelink").click(self.editTitle);
2011-07-07 19:59:34 +02:00
$("#padtitlesave").click(function()
{
self.closeTitleEdit(true);
});
$("#padtitlecancel").click(function()
{
self.closeTitleEdit(false);
});
padutils.bindEnterAndEscape($("#padtitleedit"), function()
{
$("#padtitlesave").trigger('click');
}, function()
{
$("#padtitlecancel").trigger('click');
});
2011-03-26 14:10:41 +01:00
2011-07-07 19:59:34 +02:00
$("#options-close").click(function()
{
self.setShownPanel(null);
});
$("#security-close").click(function()
{
self.setShownPanel(null);
});
2011-03-26 14:10:41 +01:00
2011-07-07 19:59:34 +02:00
if (pad.getIsProPad())
{
2011-03-26 14:10:41 +01:00
self.initPassword();
}
enabled = true;
self.render();
// public/private
2011-07-07 19:59:34 +02:00
$("#security-access input").bind("change click", function(evt)
{
pad.changePadOption('guestPolicy', $("#security-access input[name='padaccess']:checked").val());
2011-03-26 14:10:41 +01:00
});
self.setGuestPolicy(opts.guestPolicy);
},
2011-07-07 19:59:34 +02:00
setGuestPolicy: function(newPolicy)
{
$("#security-access input[value='" + newPolicy + "']").attr("checked", "checked");
2011-03-26 14:10:41 +01:00
self.render();
},
2011-07-07 19:59:34 +02:00
initPassword: function()
{
2011-03-26 14:10:41 +01:00
self.renderPassword();
2011-07-07 19:59:34 +02:00
$("#password-clearlink").click(function()
{
2011-03-26 14:10:41 +01:00
changePassword(null);
});
2011-07-07 19:59:34 +02:00
$("#password-setlink, #password-display").click(function()
{
2011-03-26 14:10:41 +01:00
self.enterPassword();
});
2011-07-07 19:59:34 +02:00
$("#password-cancellink").click(function()
{
2011-03-26 14:10:41 +01:00
self.exitPassword(false);
});
2011-07-07 19:59:34 +02:00
$("#password-savelink").click(function()
{
2011-03-26 14:10:41 +01:00
self.exitPassword(true);
});
2011-07-07 19:59:34 +02:00
padutils.bindEnterAndEscape($("#security-passwordedit"), function()
{
self.exitPassword(true);
}, function()
{
self.exitPassword(false);
});
2011-03-26 14:10:41 +01:00
},
2011-07-07 19:59:34 +02:00
enterPassword: function()
{
2011-03-26 14:10:41 +01:00
isEditingPassword = true;
$("#security-passwordedit").val(self.password || '');
self.renderPassword();
$("#security-passwordedit").focus().select();
},
2011-07-07 19:59:34 +02:00
exitPassword: function(accept)
{
2011-03-26 14:10:41 +01:00
isEditingPassword = false;
2011-07-07 19:59:34 +02:00
if (accept)
{
2011-03-26 14:10:41 +01:00
changePassword($("#security-passwordedit").val());
}
2011-07-07 19:59:34 +02:00
else
{
2011-03-26 14:10:41 +01:00
self.renderPassword();
}
},
2011-07-07 19:59:34 +02:00
renderPassword: function()
{
if (isEditingPassword)
{
2011-03-26 14:10:41 +01:00
$("#password-nonedit").hide();
$("#password-inedit").show();
}
2011-07-07 19:59:34 +02:00
else
{
$("#password-nonedit").toggleClass('nopassword', !self.password);
2011-03-26 14:10:41 +01:00
$("#password-setlink").html(self.password ? "Change..." : "Set...");
2011-07-07 19:59:34 +02:00
if (self.password)
{
2011-03-26 14:10:41 +01:00
$("#password-display").html(self.password.replace(/./g, '&#8226;'));
}
2011-07-07 19:59:34 +02:00
else
{
2011-03-26 14:10:41 +01:00
$("#password-display").html("None");
}
$("#password-inedit").hide();
$("#password-nonedit").show();
}
},
2011-07-07 19:59:34 +02:00
togglePanel: function(panelName)
{
if (panelName in panels)
{
if (currentPanel == panelName)
{
2011-03-26 14:10:41 +01:00
self.setShownPanel(null);
}
2011-07-07 19:59:34 +02:00
else
{
2011-03-26 14:10:41 +01:00
self.setShownPanel(panelName);
}
}
},
2011-07-07 19:59:34 +02:00
setShownPanel: function(panelName)
{
function animateHidePanel(panelName, next)
{
2011-03-26 14:10:41 +01:00
var delay = 0;
2011-07-07 19:59:34 +02:00
if (panelName == 'options' && isEditingPassword)
{
2011-03-26 14:10:41 +01:00
// give user feedback that the password they've
// typed in won't actually take effect
self.exitPassword(false);
delay = 500;
}
2011-07-07 19:59:34 +02:00
window.setTimeout(function()
{
2011-03-26 14:10:41 +01:00
panels[panelName].animator.hide();
2011-07-07 19:59:34 +02:00
if (next)
{
2011-03-26 14:10:41 +01:00
next();
}
}, delay);
}
2011-07-07 19:59:34 +02:00
if (!panelName)
{
if (currentPanel)
{
2011-03-26 14:10:41 +01:00
animateHidePanel(currentPanel);
setCurrentPanel(null);
}
}
2011-07-07 19:59:34 +02:00
else if (panelName in panels)
{
if (currentPanel != panelName)
{
if (currentPanel)
{
animateHidePanel(currentPanel, function()
{
2011-03-26 14:10:41 +01:00
panels[panelName].animator.show();
setCurrentPanel(panelName);
});
}
2011-07-07 19:59:34 +02:00
else
{
2011-03-26 14:10:41 +01:00
panels[panelName].animator.show();
setCurrentPanel(panelName);
}
}
}
},
2011-07-07 19:59:34 +02:00
isPanelShown: function(panelName)
{
if (!panelName)
{
return !currentPanel;
2011-03-26 14:10:41 +01:00
}
2011-07-07 19:59:34 +02:00
else
{
2011-03-26 14:10:41 +01:00
return (panelName == currentPanel);
}
},
2011-07-07 19:59:34 +02:00
changeTitle: function(newTitle)
{
2011-03-26 14:10:41 +01:00
self.title = newTitle;
self.render();
},
2011-07-07 19:59:34 +02:00
editTitle: function()
{
if (!enabled)
{
2011-03-26 14:10:41 +01:00
return;
}
$("#padtitleedit").val(self.title);
isEditingTitle = true;
self.render();
$("#padtitleedit").focus().select();
},
2011-07-07 19:59:34 +02:00
closeTitleEdit: function(accept)
{
if (!enabled)
{
2011-03-26 14:10:41 +01:00
return;
}
2011-07-07 19:59:34 +02:00
if (accept)
{
2011-03-26 14:10:41 +01:00
var newTitle = $("#padtitleedit").val();
2011-07-07 19:59:34 +02:00
if (newTitle)
{
2011-03-26 14:10:41 +01:00
newTitle = newTitle.substring(0, 80);
self.title = newTitle;
pad.notifyChangeTitle(newTitle);
}
}
isEditingTitle = false;
self.render();
},
2011-07-07 19:59:34 +02:00
changePassword: function(newPass)
{
if (newPass)
{
2011-03-26 14:10:41 +01:00
self.password = newPass;
}
2011-07-07 19:59:34 +02:00
else
{
2011-03-26 14:10:41 +01:00
self.password = null;
}
self.renderPassword();
},
2011-07-07 19:59:34 +02:00
render: function()
{
if (isEditingTitle)
{
2011-03-26 14:10:41 +01:00
$("#docbarpadtitle").hide();
$("#docbarrenamelink").hide();
$("#padtitleedit").show();
$("#padtitlebuttons").show();
2011-07-07 19:59:34 +02:00
if (!enabled)
{
2011-03-26 14:10:41 +01:00
$("#padtitleedit").attr('disabled', 'disabled');
}
2011-07-07 19:59:34 +02:00
else
{
2011-03-26 14:10:41 +01:00
$("#padtitleedit").removeAttr('disabled');
}
}
2011-07-07 19:59:34 +02:00
else
{
2011-03-26 14:10:41 +01:00
$("#padtitleedit").hide();
$("#padtitlebuttons").hide();
var titleSpan = $("#docbarpadtitle span");
titleSpan.html(padutils.escapeHtml(self.title));
2011-07-07 19:59:34 +02:00
$("#docbarpadtitle").attr('title', (pad.isPadPublic() ? "Public Pad: " : "") + self.title);
2011-03-26 14:10:41 +01:00
$("#docbarpadtitle").show();
2011-07-07 19:59:34 +02:00
if (isTitleEditable)
{
var titleRight = $("#docbarpadtitle").position().left + $("#docbarpadtitle span").position().left + Math.min($("#docbarpadtitle").width(), $("#docbarpadtitle span").width());
2011-03-26 14:10:41 +01:00
$("#docbarrenamelink").css('left', titleRight + 10).show();
}
2011-07-07 19:59:34 +02:00
if (pad.isPadPublic())
{
2011-03-26 14:10:41 +01:00
$("#docbar").addClass("docbar-public");
}
2011-07-07 19:59:34 +02:00
else
{
2011-03-26 14:10:41 +01:00
$("#docbar").removeClass("docbar-public");
}
}
},
2011-07-07 19:59:34 +02:00
disable: function()
{
2011-03-26 14:10:41 +01:00
enabled = false;
self.render();
},
2011-07-07 19:59:34 +02:00
handleResizePage: function()
{
2011-03-26 14:10:41 +01:00
padsavedrevs.handleResizePage();
},
2011-07-07 19:59:34 +02:00
hideLaterIfNoOtherInteraction: function()
{
return padutils.getCancellableAction('hide-docbar-panel', function()
{
self.setShownPanel(null);
});
2011-03-26 14:10:41 +01:00
}
};
return self;
}());