Add createDropdown and createLanguageSelector in cryptpad-common
This commit is contained in:
yflory
parent
29c8f0bbef
commit
efffd4974f
@ -20,13 +20,7 @@
|
|||||||
|
|
||||||
|
|
||||||
|
|
||||||
<span id="language-selector" class="dropdown-bar">
|
<span id="language-selector" class="dropdown-bar"></span>
|
||||||
<button>
|
|
||||||
<span class="buttonTitle" data-localozation="language"></span>
|
|
||||||
<span class="fa fa-caret-down"></span>
|
|
||||||
</button>
|
|
||||||
<div class="left cryptpad-dropdown dropdown-bar-content"></div>
|
|
||||||
</span>
|
|
||||||
|
|
||||||
<div id="main">
|
<div id="main">
|
||||||
<center>
|
<center>
|
||||||
|
|||||||
@ -20,13 +20,7 @@
|
|||||||
|
|
||||||
|
|
||||||
|
|
||||||
<span id="language-selector" class="dropdown-bar">
|
<span id="language-selector" class="dropdown-bar"></span>
|
||||||
<button>
|
|
||||||
<span class="buttonTitle" data-localozation="language"></span>
|
|
||||||
<span class="fa fa-caret-down"></span>
|
|
||||||
</button>
|
|
||||||
<div class="left cryptpad-dropdown dropdown-bar-content"></div>
|
|
||||||
</span>
|
|
||||||
|
|
||||||
<div id="main">
|
<div id="main">
|
||||||
<center>
|
<center>
|
||||||
|
|||||||
@ -39,25 +39,11 @@ define([
|
|||||||
|
|
||||||
// Language selector
|
// Language selector
|
||||||
var $sel = $('#language-selector');
|
var $sel = $('#language-selector');
|
||||||
var $innerblock = $sel.find(".dropdown-bar-content");
|
Cryptpad.createLanguageSelector(undefined, $sel);
|
||||||
var $button = $sel.find('button');
|
|
||||||
var languages = Messages._languages;
|
|
||||||
for (var l in languages) {
|
|
||||||
$('<a>', {
|
|
||||||
'class': 'languageValue',
|
|
||||||
'data-value': l,
|
|
||||||
'href': '#',
|
|
||||||
}).text(languages[l]).appendTo($innerblock);
|
|
||||||
}
|
|
||||||
$button.click(function (e) {
|
|
||||||
e.stopPropagation();
|
|
||||||
$innerblock.toggle();
|
|
||||||
});
|
|
||||||
LS.main($sel);
|
|
||||||
Messages._applyTranslation();
|
|
||||||
$sel.show();
|
$sel.show();
|
||||||
|
|
||||||
$(window).click(function () {
|
$(window).click(function () {
|
||||||
$innerblock.hide();
|
$sel.find('.cryptpad-dropdown').hide();
|
||||||
});
|
});
|
||||||
|
|
||||||
var makeRecentPadsTable = function (recentPads) {
|
var makeRecentPadsTable = function (recentPads) {
|
||||||
|
|||||||
@ -20,13 +20,7 @@
|
|||||||
|
|
||||||
|
|
||||||
|
|
||||||
<span id="language-selector" class="dropdown-bar">
|
<span id="language-selector" class="dropdown-bar"></span>
|
||||||
<button>
|
|
||||||
<span class="buttonTitle" data-localozation="language"></span>
|
|
||||||
<span class="fa fa-caret-down"></span>
|
|
||||||
</button>
|
|
||||||
<div class="left cryptpad-dropdown dropdown-bar-content"></div>
|
|
||||||
</span>
|
|
||||||
|
|
||||||
<div id="main">
|
<div id="main">
|
||||||
<center>
|
<center>
|
||||||
|
|||||||
@ -17,13 +17,7 @@
|
|||||||
<body>
|
<body>
|
||||||
{{fork}}
|
{{fork}}
|
||||||
|
|
||||||
<span id="language-selector" class="dropdown-bar">
|
<span id="language-selector" class="dropdown-bar"></span>
|
||||||
<button>
|
|
||||||
<span class="buttonTitle" data-localozation="language"></span>
|
|
||||||
<span class="fa fa-caret-down"></span>
|
|
||||||
</button>
|
|
||||||
<div class="left cryptpad-dropdown dropdown-bar-content"></div>
|
|
||||||
</span>
|
|
||||||
|
|
||||||
<div id="main">
|
<div id="main">
|
||||||
{{logo}}
|
{{logo}}
|
||||||
|
|||||||
@ -20,13 +20,7 @@
|
|||||||
|
|
||||||
|
|
||||||
|
|
||||||
<span id="language-selector" class="dropdown-bar">
|
<span id="language-selector" class="dropdown-bar"></span>
|
||||||
<button>
|
|
||||||
<span class="buttonTitle" data-localozation="language"></span>
|
|
||||||
<span class="fa fa-caret-down"></span>
|
|
||||||
</button>
|
|
||||||
<div class="left cryptpad-dropdown dropdown-bar-content"></div>
|
|
||||||
</span>
|
|
||||||
|
|
||||||
<div id="main">
|
<div id="main">
|
||||||
<center>
|
<center>
|
||||||
|
|||||||
@ -923,6 +923,88 @@ define([
|
|||||||
return button;
|
return button;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
// Create a button with a dropdown menu
|
||||||
|
// input is a config object with parameters:
|
||||||
|
// - container (optional): the dropdown container (span)
|
||||||
|
// - text (optional): the button text value
|
||||||
|
// - options: array of {tag: "", attributes: {}, content: "string"}
|
||||||
|
//
|
||||||
|
// allowed options tags: ['a', 'hr', 'p']
|
||||||
|
var createDropdown = common.createDropdown = function (config) {
|
||||||
|
if (typeof config !== "object" || !isArray(config.options)) { return; }
|
||||||
|
|
||||||
|
var allowedTags = ['a', 'p', 'hr'];
|
||||||
|
var isValidOption = function (o) {
|
||||||
|
if (typeof o !== "object") { return false; }
|
||||||
|
if (!o.tag || allowedTags.indexOf(o.tag) === -1) { return false; }
|
||||||
|
return true;
|
||||||
|
};
|
||||||
|
|
||||||
|
// Container
|
||||||
|
var $container = $(config.container);
|
||||||
|
if (!config.container) {
|
||||||
|
$container = $('<span>', {
|
||||||
|
'class': 'dropdown-bar'
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Button
|
||||||
|
var $button = $('<button>', {
|
||||||
|
'class': ''
|
||||||
|
}).append($('<span>', {'class': 'buttonTitle'}).text(config.text || ""));
|
||||||
|
$('<span>', {
|
||||||
|
'class': 'fa fa-caret-down',
|
||||||
|
}).appendTo($button);
|
||||||
|
|
||||||
|
// Menu
|
||||||
|
var $innerblock = $('<div>', {'class': 'cryptpad-dropdown dropdown-bar-content'});
|
||||||
|
if (config.left) { $innerblock.addClass('left'); }
|
||||||
|
|
||||||
|
config.options.forEach(function (o) {
|
||||||
|
if (!isValidOption(o)) { return; }
|
||||||
|
$('<' + o.tag + '>', o.attributes || {}).html(o.content || '').appendTo($innerblock);
|
||||||
|
});
|
||||||
|
|
||||||
|
$container.append($button).append($innerblock);
|
||||||
|
|
||||||
|
$button.click(function (e) {
|
||||||
|
e.stopPropagation();
|
||||||
|
$innerblock.toggle();
|
||||||
|
});
|
||||||
|
|
||||||
|
return $container;
|
||||||
|
};
|
||||||
|
|
||||||
|
var createLanguageSelector = common.createLanguageSelector = function ($container, $block) {
|
||||||
|
var options = [];
|
||||||
|
var languages = Messages._languages;
|
||||||
|
for (var l in languages) {
|
||||||
|
options.push({
|
||||||
|
tag: 'a',
|
||||||
|
attributes: {
|
||||||
|
'class': 'languageValue',
|
||||||
|
'data-value': l,
|
||||||
|
'href': '#',
|
||||||
|
},
|
||||||
|
content: languages[l] // Pretty name of the language value
|
||||||
|
});
|
||||||
|
}
|
||||||
|
var dropdownConfig = {
|
||||||
|
text: Messages.language, // Button initial text
|
||||||
|
options: options, // Entries displayed in the menu
|
||||||
|
left: true, // Open to the left of the button
|
||||||
|
container: $block // optional
|
||||||
|
};
|
||||||
|
var $block = createDropdown(dropdownConfig);
|
||||||
|
$block.attr('id', 'language-selector');
|
||||||
|
|
||||||
|
if ($container) {
|
||||||
|
$block.appendTo($container);
|
||||||
|
}
|
||||||
|
|
||||||
|
Messages._initSelector($block);
|
||||||
|
};
|
||||||
|
|
||||||
/*
|
/*
|
||||||
* Alertifyjs
|
* Alertifyjs
|
||||||
*/
|
*/
|
||||||
|
|||||||
@ -352,7 +352,7 @@ define([
|
|||||||
$linkContainer.append($aTagSmall).append($aTagBig);
|
$linkContainer.append($aTagSmall).append($aTagBig);
|
||||||
};
|
};
|
||||||
|
|
||||||
var createUserAdmin = function ($topContainer, lagElement) {
|
var createUserAdmin = function ($topContainer, lagElement, Cryptpad) {
|
||||||
var $lag = $(lagElement);
|
var $lag = $(lagElement);
|
||||||
|
|
||||||
var $userContainer = $('<span>', {
|
var $userContainer = $('<span>', {
|
||||||
@ -366,37 +366,7 @@ define([
|
|||||||
$userContainer.append($lag);
|
$userContainer.append($lag);
|
||||||
|
|
||||||
// Dropdown language selector
|
// Dropdown language selector
|
||||||
var $fa_caretdown = $('<span>', {
|
Cryptpad.createLanguageSelector($userContainer);
|
||||||
'class': 'fa fa-caret-down',
|
|
||||||
});
|
|
||||||
|
|
||||||
var $block = $('<span>', {
|
|
||||||
'class': 'dropdown-bar',
|
|
||||||
id: 'language-selector'
|
|
||||||
});
|
|
||||||
var $button = $('<button>', {
|
|
||||||
'class': ''
|
|
||||||
}).append($('<span>', {'class': 'buttonTitle'}).text(Messages.language)).append($fa_caretdown);
|
|
||||||
|
|
||||||
var $innerblock = $('<div>', {'class': 'left cryptpad-dropdown dropdown-bar-content'});
|
|
||||||
|
|
||||||
var languages = Messages._languages;
|
|
||||||
for (var l in languages) {
|
|
||||||
$('<a>', {
|
|
||||||
'class': 'languageValue',
|
|
||||||
'data-value': l,
|
|
||||||
'href': '#',
|
|
||||||
}).text(languages[l]).appendTo($innerblock);
|
|
||||||
}
|
|
||||||
$block.append($button).append($innerblock);
|
|
||||||
$button.click(function (e) {
|
|
||||||
e.stopPropagation();
|
|
||||||
$innerblock.toggle();
|
|
||||||
});
|
|
||||||
$block.appendTo($userContainer);
|
|
||||||
|
|
||||||
Messages._initSelector($block);
|
|
||||||
// End language selector
|
|
||||||
|
|
||||||
/*$select.on('mousedown', function (e) {
|
/*$select.on('mousedown', function (e) {
|
||||||
e.stopPropagation();
|
e.stopPropagation();
|
||||||
@ -496,7 +466,7 @@ define([
|
|||||||
var $titleElement = createTitle(toolbar.find('.' + TOP_CLS), readOnly, config.title, Cryptpad);
|
var $titleElement = createTitle(toolbar.find('.' + TOP_CLS), readOnly, config.title, Cryptpad);
|
||||||
var $linkElement = createLinkToMain(toolbar.find('.' + TOP_CLS));
|
var $linkElement = createLinkToMain(toolbar.find('.' + TOP_CLS));
|
||||||
var lagElement = createLagElement();
|
var lagElement = createLagElement();
|
||||||
var $userAdminElement = createUserAdmin(toolbar.find('.' + TOP_CLS), lagElement);
|
var $userAdminElement = createUserAdmin(toolbar.find('.' + TOP_CLS), lagElement, Cryptpad);
|
||||||
var spinner = createSpinner($userAdminElement);
|
var spinner = createSpinner($userAdminElement);
|
||||||
var userData = config.userData;
|
var userData = config.userData;
|
||||||
// readOnly = 1 (readOnly enabled), 0 (disabled), -1 (old pad without readOnly mode)
|
// readOnly = 1 (readOnly enabled), 0 (disabled), -1 (old pad without readOnly mode)
|
||||||
|
|||||||
@ -845,12 +845,43 @@ define([
|
|||||||
return $block;
|
return $block;
|
||||||
};
|
};
|
||||||
|
|
||||||
var createNewFolderButton = function () {
|
var createNewButton = function (isInRoot) {
|
||||||
var $listButton = $('<a>', {
|
if (!APP.editable) { return; }
|
||||||
'class': 'newElement'
|
|
||||||
}).text(Messages.fm_folder);
|
|
||||||
|
|
||||||
$listButton.click(function () {
|
|
||||||
|
// Create dropdown
|
||||||
|
var options = [];
|
||||||
|
if (isInRoot) {
|
||||||
|
options.push({
|
||||||
|
tag: 'a',
|
||||||
|
attributes: {'class': 'newFolder'},
|
||||||
|
content: Messages.fm_folder
|
||||||
|
});
|
||||||
|
options.push({tag: 'hr'});
|
||||||
|
}
|
||||||
|
AppConfig.availablePadTypes.forEach(function (type) {
|
||||||
|
options.push({
|
||||||
|
tag: 'a',
|
||||||
|
attributes: {
|
||||||
|
'class': 'newdoc',
|
||||||
|
'data-type': type,
|
||||||
|
'href': '/' + type + '/#?path=' + encodeURIComponent(currentPath),
|
||||||
|
'target': '_blank'
|
||||||
|
},
|
||||||
|
content: Messages.type[type]
|
||||||
|
});
|
||||||
|
});
|
||||||
|
var dropdownConfig = {
|
||||||
|
text: Messages.fm_newButton,
|
||||||
|
options: options
|
||||||
|
};
|
||||||
|
var $block = Cryptpad.createDropdown(dropdownConfig);
|
||||||
|
|
||||||
|
// Custom style:
|
||||||
|
$block.find('button').addClass('newElement');
|
||||||
|
|
||||||
|
// Handlers
|
||||||
|
$block.find('a.newFolder').click(function () {
|
||||||
var onCreated = function (info) {
|
var onCreated = function (info) {
|
||||||
module.newFolder = info.newPath;
|
module.newFolder = info.newPath;
|
||||||
refresh();
|
refresh();
|
||||||
@ -858,43 +889,6 @@ define([
|
|||||||
filesOp.createNewFolder(currentPath, null, onCreated);
|
filesOp.createNewFolder(currentPath, null, onCreated);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
return $listButton;
|
|
||||||
};
|
|
||||||
|
|
||||||
var createNewButton = function (isInRoot) {
|
|
||||||
var $block = $('<div>', {'class': 'dropdown-bar'});
|
|
||||||
if (!APP.editable) { return $block; }
|
|
||||||
|
|
||||||
var $button = $('<button>', {
|
|
||||||
'class': 'newElement'
|
|
||||||
}).text(Messages.fm_newButton);
|
|
||||||
|
|
||||||
var $innerblock = $('<div>', {'class': 'dropdown-bar-content'});
|
|
||||||
|
|
||||||
if (isInRoot) {
|
|
||||||
$innerblock.append(createNewFolderButton());
|
|
||||||
$innerblock.append('<hr>');
|
|
||||||
}
|
|
||||||
|
|
||||||
AppConfig.availablePadTypes.forEach(function (type) {
|
|
||||||
var $button = $('<a>', {
|
|
||||||
'class': 'newElement newdoc',
|
|
||||||
'data-type': type,
|
|
||||||
'href': '/' + type + '/#?path=' + encodeURIComponent(currentPath),
|
|
||||||
'target': '_blank'
|
|
||||||
}).text(Messages.type[type]);
|
|
||||||
|
|
||||||
$innerblock.append($button);
|
|
||||||
});
|
|
||||||
|
|
||||||
$block.append($button).append($innerblock);
|
|
||||||
|
|
||||||
$button.click(function (e) {
|
|
||||||
e.stopPropagation();
|
|
||||||
$innerblock.toggle();
|
|
||||||
});
|
|
||||||
|
|
||||||
return $block;
|
return $block;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user