Add createDropdown and createLanguageSelector in cryptpad-common

pull/1/head
yflory 8 years ago
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,54 +845,48 @@ define([
return $block;
};
var createNewFolderButton = function () {
var $listButton = $('<a>', {
'class': 'newElement'
}).text(Messages.fm_folder);
$listButton.click(function () {
var onCreated = function (info) {
module.newFolder = info.newPath;
refresh();
};
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);
if (!APP.editable) { return; }
var $innerblock = $('<div>', {'class': 'dropdown-bar-content'});
// Create dropdown
var options = [];
if (isInRoot) {
$innerblock.append(createNewFolderButton());
$innerblock.append('<hr>');
options.push({
tag: 'a',
attributes: {'class': 'newFolder'},
content: Messages.fm_folder
});
options.push({tag: '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);
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);
$block.append($button).append($innerblock);
// Custom style:
$block.find('button').addClass('newElement');
$button.click(function (e) {
e.stopPropagation();
$innerblock.toggle();
// Handlers
$block.find('a.newFolder').click(function () {
var onCreated = function (info) {
module.newFolder = info.newPath;
refresh();
};
filesOp.createNewFolder(currentPath, null, onCreated);
});
return $block;

Loading…
Cancel
Save