infra
/
cryptpad
2
1
Fork 0
Code Issues Pull Requests Projects Releases 1 Activity

major refactoring for toolbar. CAN HAZ LESS

Browse Source
pull/1/head
ansuz 9 years ago
parent 7504f79e05
commit cbeaa8d609
1 changed files with 85 additions and 143 deletions
Show Stats Download Patch File Download Diff File

224
www/common/toolbar.js
Unescape Escape View File

@ -1,160 +1,88 @@
define([ define([
'/common/messages.js' '/common/messages.js',
'/bower_components/jquery/dist/jquery.min.js',
], function (Messages) { ], function (Messages) {
var $ = window.jQuery;
/** Id of the element for getting debug info. */ var Bar = {
var DEBUG_LINK_CLS = 'rtwysiwyg-debug-link'; constants: {},
};
/** Id of the div containing the user list. */ /** Id of the div containing the user list. */
var USER_LIST_CLS = 'rtwysiwyg-user-list'; var USER_LIST_CLS = Bar.constants.userlist = 'cryptpad-user-list';
/** Id of the button to change my username. */ /** Id of the button to change my username. */
var USERNAME_BUTTON_GROUP = 'cryptpad-changeName'; var USERNAME_BUTTON_GROUP = Bar.constants.changeName = 'cryptpad-changeName';
/** Id of the div containing the lag info. */ /** Id of the div containing the lag info. */
var LAG_ELEM_CLS = 'rtwysiwyg-lag'; var LAG_ELEM_CLS = Bar.constants.lag = 'cryptpad-lag';
/** The toolbar class which contains the user list, debug link and lag. */ /** The toolbar class which contains the user list, debug link and lag. */
var TOOLBAR_CLS = 'rtwysiwyg-toolbar'; var TOOLBAR_CLS = Bar.constants.toolbar = 'cryptpad-toolbar';
var LEFTSIDE_CLS = Bar.constants.leftside = 'cryptpad-toolbar-leftside';
var RIGHTSIDE_CLS = Bar.constants.rightside = 'cryptpad-toolbar-rightside';
var BACK_CLS = Bar.constants.back = 'cryptpad-back';
var SPINNER_CLS = Bar.constants.spinner = 'cryptpad-spinner';
/** Key in the localStore which indicates realtime activity should be disallowed. */ /** Key in the localStore which indicates realtime activity should be disallowed. */
var LOCALSTORAGE_DISALLOW = 'rtwysiwyg-disallow'; // TODO remove? will never be used in cryptpad
var LOCALSTORAGE_DISALLOW = Bar.constants.localstorageDisallow = 'cryptpad-disallow';
var SPINNER_DISAPPEAR_TIME = 3000; var SPINNER_DISAPPEAR_TIME = 3000;
var SPINNER = [ '-', '\\', '|', '/' ]; var SPINNER = [ '-', '\\', '|', '/' ];
var uid = function () { var uid = function () {
return 'rtwysiwyg-uid-' + String(Math.random()).substring(2); return 'cryptpad-uid-' + String(Math.random()).substring(2);
}; };
var createRealtimeToolbar = function ($container) { var $style;
var id = uid();
$container.prepend( var styleToolbar = function ($container, href) {
'<div class="' + TOOLBAR_CLS + '" id="' + id + '">' + href = href || '/customize/toolbar.css';
'<div class="rtwysiwyg-toolbar-leftside"></div>' +
'<div class="rtwysiwyg-toolbar-rightside"></div>' + $.ajax({
'</div>' url: href,
); dataType: 'text',
var toolbar = $container.find('#'+id); success: function (data) {
$container.append($('<style>').text(data));
var swap = function (str, dict) { },
return str.replace(/\{\{(.*?)\}\}/g, function (all, block) {
//console.log(block);
return dict[block] || block;
}); });
}; };
var css = swap(function(){/* var createRealtimeToolbar = function ($container) {
<style> var $toolbar = $('<div>', {
.{{TOOLBAR_CLS}} { 'class': TOOLBAR_CLS,
color: #666; id: uid(),
font-weight: bold; })
height: 26px; .append($('<div>', {'class': LEFTSIDE_CLS}))
margin-bottom: -3px; .append($('<div>', {'class': RIGHTSIDE_CLS}));
display: inline-block;
width: 100%; $container.prepend($toolbar);
} styleToolbar($container);
.{{TOOLBAR_CLS}} a { return $toolbar;
float: right;
}
.{{TOOLBAR_CLS}} div {
padding: 0 10px;
height: 1.5em;
line-height: 25px;
height: 22px;
}
.{{TOOLBAR_CLS}} div.rtwysiwyg-back {
padding: 0;
font-weight: bold;
cursor: pointer;
color: #000;
}
.{{USERNAME_BUTTON_GROUP}} {
float: left;
cursor: pointer;
}
.{{USERNAME_BUTTON_GROUP}} button {
padding: 0;
margin-right: 5px;
}
.rtwysiwyg-toolbar-leftside div {
float: left;
}
.rtwysiwyg-toolbar-leftside {
float: left;
}
.rtwysiwyg-toolbar-rightside {
float: right;
}
.rtwysiwyg-lag {
float: right;
}
.rtwysiwyg-spinner {
float: left;
}
.gwt-TabBar {
display:none;
}
.{{DEBUG_LINK_CLS}}:link {
color:transparent;
}
.{{DEBUG_LINK_CLS}}:link:hover {
color:blue;
}
.gwt-TabPanelBottom {
border-top: 0 none;
}
.{{TOOLBAR_CLS}} button {
box-sizing: border-box;
height: 100%;
background-color: inherit;
border: 1px solid #A6A6A6;
border-radius: 5px;
margin-right: 5px;
padding-right: 5px;
padding-left: 5px;
}
.{{TOOLBAR_CLS}} .rightside-button {
float: right;
cursor: pointer;
}
.{{TOOLBAR_CLS}} .leftside-button {
cursor: pointer;
float: left;
}
.{{TOOLBAR_CLS}} select {
border: 0px;
margin-left: 5px;
margin-right: 5px;
padding-left: 5px;
}
</style>
*/}.toString().slice(14,-3), {
TOOLBAR_CLS: TOOLBAR_CLS,
USERNAME_BUTTON_GROUP: USERNAME_BUTTON_GROUP,
DEBUG_LINK_CLS: DEBUG_LINK_CLS,
}).trim();
toolbar.append(css);
return toolbar;
}; };
var createEscape = function ($container) { var createEscape = function ($container) {
var id = uid(); var $back = $('<div>', {
$container.append('<div class="rtwysiwyg-back" id="' + id + '">&#8656; Back</div>'); 'class': BACK_CLS,
var $ret = $container.find('#'+id); id: uid(),
$ret.on('click', function () { }).html('&#8656; Back').click(function () {
window.location.href = '/'; window.location.href = '/';
}); });
return $ret[0]; $container.append($back);
return $back[0];
}; };
var createSpinner = function ($container) { var createSpinner = function ($container) {
var id = uid(); var $spinner = $('<div>', {
$container.append('<div class="rtwysiwyg-spinner" id="'+id+'"></div>'); id: uid(),
return $container.find('#'+id)[0]; 'class': SPINNER_CLS,
});
$container.append($spinner);
return $spinner[0];
}; };
var kickSpinner = function (spinnerElement, reversed) { var kickSpinner = function (spinnerElement, reversed) {
@ -168,9 +96,12 @@ define([
}; };
var createUserList = function ($container) { var createUserList = function ($container) {
var id = uid(); var $userlist = $('<div>', {
$container.append('<div class="' + USER_LIST_CLS + '" id="'+id+'"></div>'); 'class': USER_LIST_CLS,
return $container.find('#'+id)[0]; id: uid(),
});
$container.append($userlist);
return $userlist[0];
}; };
var getOtherUsers = function(myUserName, userList, userData) { var getOtherUsers = function(myUserName, userList, userData) {
@ -191,9 +122,17 @@ define([
}; };
var createChangeName = function($container, userList, buttonID) { var createChangeName = function($container, userList, buttonID) {
var id = uid(); var $span = $('<span>', {
userList.innerHTML = '<button id="' + buttonID + '" class="'+USERNAME_BUTTON_GROUP+'" >Change name</button><span id="' + id + '"></span>'; id: uid(),
return $container.find('#'+id)[0]; });
var $button = $('<button>', {
id: buttonID,
'class': USERNAME_BUTTON_GROUP,
}).text('Change name');
$(userList).append($button);
$button.after($span);
return $span[0];
}; };
var updateUserList = function (myUserName, listElement, userList, userData) { var updateUserList = function (myUserName, listElement, userList, userData) {
@ -212,9 +151,12 @@ define([
}; };
var createLagElement = function ($container) { var createLagElement = function ($container) {
var id = uid(); var $lag = $('<div>', {
$container.append('<div class="' + LAG_ELEM_CLS + '" id="'+id+'"></div>'); 'class': LAG_ELEM_CLS,
return $container.find('#'+id)[0]; id: uid(),
});
$container.append($lag);
return $lag[0];
}; };
var checkLag = function (getLag, lagElement) { var checkLag = function (getLag, lagElement) {
@ -235,12 +177,12 @@ define([
lagElement.textContent = lagMsg; lagElement.textContent = lagMsg;
}; };
var create = function ($container, myUserName, realtime, getLag, userList, config) { var create = Bar.create = function ($container, myUserName, realtime, getLag, userList, config) {
var toolbar = createRealtimeToolbar($container); var toolbar = createRealtimeToolbar($container);
createEscape(toolbar.find('.rtwysiwyg-toolbar-leftside')); createEscape(toolbar.find('.' + LEFTSIDE_CLS));
var userListElement = createUserList(toolbar.find('.rtwysiwyg-toolbar-leftside')); var userListElement = createUserList(toolbar.find('.' + LEFTSIDE_CLS));
var spinner = createSpinner(toolbar.find('.rtwysiwyg-toolbar-rightside')); var spinner = createSpinner(toolbar.find('.' + RIGHTSIDE_CLS));
var lagElement = createLagElement(toolbar.find('.rtwysiwyg-toolbar-rightside')); var lagElement = createLagElement(toolbar.find('.' + RIGHTSIDE_CLS));
var userData = config.userData; var userData = config.userData;
var changeNameID = config.changeNameID; var changeNameID = config.changeNameID;
var saveContentID = config.saveContentID || config.exportContentID; var saveContentID = config.saveContentID || config.exportContentID;
@ -296,5 +238,5 @@ define([
}; };
}; };
return { create: create }; return Bar;
}); });

Write Preview
Loading…
Cancel
Save