major refactoring for toolbar. CAN HAZ LESS
This commit is contained in:
ansuz
parent
7504f79e05
commit
cbeaa8d609
@ -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 $style;
|
||||||
|
|
||||||
|
var styleToolbar = function ($container, href) {
|
||||||
|
href = href || '/customize/toolbar.css';
|
||||||
|
|
||||||
|
$.ajax({
|
||||||
|
url: href,
|
||||||
|
dataType: 'text',
|
||||||
|
success: function (data) {
|
||||||
|
$container.append($('<style>').text(data));
|
||||||
|
},
|
||||||
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
var createRealtimeToolbar = function ($container) {
|
var createRealtimeToolbar = function ($container) {
|
||||||
var id = uid();
|
var $toolbar = $('<div>', {
|
||||||
$container.prepend(
|
'class': TOOLBAR_CLS,
|
||||||
'<div class="' + TOOLBAR_CLS + '" id="' + id + '">' +
|
id: uid(),
|
||||||
'<div class="rtwysiwyg-toolbar-leftside"></div>' +
|
})
|
||||||
'<div class="rtwysiwyg-toolbar-rightside"></div>' +
|
.append($('<div>', {'class': LEFTSIDE_CLS}))
|
||||||
'</div>'
|
.append($('<div>', {'class': RIGHTSIDE_CLS}));
|
||||||
);
|
|
||||||
var toolbar = $container.find('#'+id);
|
|
||||||
|
|
||||||
var swap = function (str, dict) {
|
$container.prepend($toolbar);
|
||||||
return str.replace(/\{\{(.*?)\}\}/g, function (all, block) {
|
styleToolbar($container);
|
||||||
//console.log(block);
|
return $toolbar;
|
||||||
return dict[block] || block;
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
var css = swap(function(){/*
|
|
||||||
<style>
|
|
||||||
.{{TOOLBAR_CLS}} {
|
|
||||||
color: #666;
|
|
||||||
font-weight: bold;
|
|
||||||
height: 26px;
|
|
||||||
margin-bottom: -3px;
|
|
||||||
display: inline-block;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
.{{TOOLBAR_CLS}} a {
|
|
||||||
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 + '">⇐ Back</div>');
|
'class': BACK_CLS,
|
||||||
var $ret = $container.find('#'+id);
|
id: uid(),
|
||||||
$ret.on('click', function () {
|
}).html('⇐ 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;
|
||||||
});
|
});
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user