Add createDropdown and createLanguageSelector in cryptpad-common
yflory
parent
29c8f0bbef
commit
efffd4974f
|
|
@ -20,13 +20,7 @@
|
|||
|
||||
|
||||
|
||||
<span id="language-selector" class="dropdown-bar">
|
||||
<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>
|
||||
<span id="language-selector" class="dropdown-bar"></span>
|
||||
|
||||
<div id="main">
|
||||
<center>
|
||||
|
|
|
|||
|
|
@ -20,13 +20,7 @@
|
|||
|
||||
|
||||
|
||||
<span id="language-selector" class="dropdown-bar">
|
||||
<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>
|
||||
<span id="language-selector" class="dropdown-bar"></span>
|
||||
|
||||
<div id="main">
|
||||
<center>
|
||||
|
|
|
|||
|
|
@ -39,25 +39,11 @@ define([
|
|||
|
||||
// Language selector
|
||||
var $sel = $('#language-selector');
|
||||
var $innerblock = $sel.find(".dropdown-bar-content");
|
||||
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();
|
||||
Cryptpad.createLanguageSelector(undefined, $sel);
|
||||
$sel.show();
|
||||
|
||||
$(window).click(function () {
|
||||
$innerblock.hide();
|
||||
$sel.find('.cryptpad-dropdown').hide();
|
||||
});
|
||||
|
||||
var makeRecentPadsTable = function (recentPads) {
|
||||
|
|
|
|||
|
|
@ -20,13 +20,7 @@
|
|||
|
||||
|
||||
|
||||
<span id="language-selector" class="dropdown-bar">
|
||||
<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>
|
||||
<span id="language-selector" class="dropdown-bar"></span>
|
||||
|
||||
<div id="main">
|
||||
<center>
|
||||
|
|
|
|||
|
|
@ -17,13 +17,7 @@
|
|||
<body>
|
||||
{{fork}}
|
||||
|
||||
<span id="language-selector" class="dropdown-bar">
|
||||
<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>
|
||||
<span id="language-selector" class="dropdown-bar"></span>
|
||||
|
||||
<div id="main">
|
||||
{{logo}}
|
||||
|
|
|
|||
|
|
@ -20,13 +20,7 @@
|
|||
|
||||
|
||||
|
||||
<span id="language-selector" class="dropdown-bar">
|
||||
<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>
|
||||
<span id="language-selector" class="dropdown-bar"></span>
|
||||
|
||||
<div id="main">
|
||||
<center>
|
||||
|
|
|
|||
|
|
@ -923,6 +923,88 @@ define([
|
|||
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
|
||||
*/
|
||||
|
|
|
|||
|
|
@ -352,7 +352,7 @@ define([
|
|||
$linkContainer.append($aTagSmall).append($aTagBig);
|
||||
};
|
||||
|
||||
var createUserAdmin = function ($topContainer, lagElement) {
|
||||
var createUserAdmin = function ($topContainer, lagElement, Cryptpad) {
|
||||
var $lag = $(lagElement);
|
||||
|
||||
var $userContainer = $('<span>', {
|
||||
|
|
@ -366,37 +366,7 @@ define([
|
|||
$userContainer.append($lag);
|
||||
|
||||
// Dropdown language selector
|
||||
var $fa_caretdown = $('<span>', {
|
||||
'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
|
||||
Cryptpad.createLanguageSelector($userContainer);
|
||||
|
||||
/*$select.on('mousedown', function (e) {
|
||||
e.stopPropagation();
|
||||
|
|
@ -496,7 +466,7 @@ define([
|
|||
var $titleElement = createTitle(toolbar.find('.' + TOP_CLS), readOnly, config.title, Cryptpad);
|
||||
var $linkElement = createLinkToMain(toolbar.find('.' + TOP_CLS));
|
||||
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 userData = config.userData;
|
||||
// readOnly = 1 (readOnly enabled), 0 (disabled), -1 (old pad without readOnly mode)
|
||||
|
|
|
|||
|
|
@ -845,12 +845,43 @@ define([
|
|||
return $block;
|
||||
};
|
||||
|
||||
var createNewFolderButton = function () {
|
||||
var $listButton = $('<a>', {
|
||||
'class': 'newElement'
|
||||
}).text(Messages.fm_folder);
|
||||
var createNewButton = function (isInRoot) {
|
||||
if (!APP.editable) { return; }
|
||||
|
||||
$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) {
|
||||
module.newFolder = info.newPath;
|
||||
refresh();
|
||||
|
|
@ -858,43 +889,6 @@ define([
|
|||
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;
|
||||
};
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue