Add a settings category for the pad creation screen
This commit is contained in:
yflory
@@ -4,9 +4,11 @@ define([
|
||||
'/bower_components/nthen/index.js',
|
||||
'/common/sframe-common.js',
|
||||
'/common/common-interface.js',
|
||||
'/common/common-ui-elements.js',
|
||||
'/common/common-util.js',
|
||||
'/common/common-hash.js',
|
||||
'/customize/messages.js',
|
||||
'/common/hyperscript.js',
|
||||
|
||||
'/bower_components/file-saver/FileSaver.min.js',
|
||||
'css!/bower_components/bootstrap/dist/css/bootstrap.min.css',
|
||||
@@ -18,9 +20,11 @@ define([
|
||||
nThen,
|
||||
SFCommon,
|
||||
UI,
|
||||
UIElements,
|
||||
Util,
|
||||
Hash,
|
||||
Messages
|
||||
Messages,
|
||||
h
|
||||
)
|
||||
{
|
||||
var saveAs = window.saveAs;
|
||||
@@ -41,21 +45,31 @@ define([
|
||||
'cp-settings-thumbnails',
|
||||
'cp-settings-userfeedback'
|
||||
],
|
||||
'creation': [
|
||||
'cp-settings-creation-owned',
|
||||
'cp-settings-creation-expire',
|
||||
'cp-settings-creation-skip',
|
||||
'cp-settings-creation-template'
|
||||
],
|
||||
'drive': [
|
||||
'cp-settings-backup-drive',
|
||||
'cp-settings-import-local-pads',
|
||||
'cp-settings-reset-drive'
|
||||
'cp-settings-drive-backup',
|
||||
'cp-settings-drive-import-local',
|
||||
'cp-settings-drive-reset'
|
||||
],
|
||||
'pad': [
|
||||
'cp-settings-pad-width',
|
||||
],
|
||||
'code': [
|
||||
'cp-settings-indent-unit',
|
||||
'cp-settings-indent-type'
|
||||
'cp-settings-code-indent-unit',
|
||||
'cp-settings-code-indent-type'
|
||||
]
|
||||
};
|
||||
|
||||
var createInfoBlock = function () {
|
||||
var create = {};
|
||||
|
||||
// Account settings
|
||||
|
||||
create['info-block'] = function () {
|
||||
var $div = $('<div>', {'class': 'cp-settings-info-block'});
|
||||
|
||||
var $account = $('<div>', {'class': 'cp-sidebarlayout-element'}).appendTo($div);
|
||||
@@ -81,7 +95,7 @@ define([
|
||||
};
|
||||
|
||||
// Create the block containing the display name field
|
||||
var createDisplayNameInput = function () {
|
||||
create['displayname'] = function () {
|
||||
var $div = $('<div>', {'class': 'cp-settings-displayname cp-sidebarlayout-element'});
|
||||
$('<label>', {'for' : 'cp-settings-displayname'}).text(Messages.user_displayName).appendTo($div);
|
||||
var $inputBlock = $('<div>', {'class': 'cp-sidebarlayout-input-block'}).appendTo($div);
|
||||
@@ -124,111 +138,49 @@ define([
|
||||
return $div;
|
||||
};
|
||||
|
||||
var createIndentUnitSelector = function () {
|
||||
var $div = $('<div>', {
|
||||
'class': 'cp-settings-indent-unit cp-sidebarlayout-element'
|
||||
});
|
||||
$('<label>').text(Messages.settings_codeIndentation).appendTo($div);
|
||||
|
||||
var $inputBlock = $('<div>', {
|
||||
'class': 'cp-sidebarlayout-input-block',
|
||||
}).appendTo($div);
|
||||
|
||||
var $input = $('<input>', {
|
||||
'min': 1,
|
||||
'max': 8,
|
||||
type: 'number',
|
||||
}).on('change', function () {
|
||||
var val = parseInt($input.val());
|
||||
if (typeof(val) !== 'number') { return; }
|
||||
common.setAttribute(['codemirror', 'indentUnit'], val);
|
||||
}).appendTo($inputBlock);
|
||||
|
||||
common.getAttribute(['codemirror', 'indentUnit'], function (e, val) {
|
||||
if (e) { return void console.error(e); }
|
||||
if (typeof(val) !== 'number') {
|
||||
$input.val(2);
|
||||
} else {
|
||||
$input.val(val);
|
||||
}
|
||||
});
|
||||
create['language-selector'] = function () {
|
||||
var $div = $('<div>', {'class': 'cp-settings-language-selector cp-sidebarlayout-element'});
|
||||
$('<label>').text(Messages.language).appendTo($div);
|
||||
var $b = common.createLanguageSelector($div);
|
||||
$b.find('button').addClass('btn btn-secondary');
|
||||
return $div;
|
||||
};
|
||||
|
||||
var createIndentTypeSelector = function () {
|
||||
var key = 'indentWithTabs';
|
||||
|
||||
var $div = $('<div>', {
|
||||
'class': 'cp-settings-indent-type cp-sidebarlayout-element'
|
||||
});
|
||||
$('<label>').text(Messages.settings_codeUseTabs).appendTo($div);
|
||||
|
||||
var $inputBlock = $('<div>', {
|
||||
'class': 'cp-sidebarlayout-input-block',
|
||||
}).css('flex-flow', 'column')
|
||||
.appendTo($div);
|
||||
|
||||
var $input = $('<input>', {
|
||||
type: 'checkbox',
|
||||
}).on('change', function () {
|
||||
var val = $input.is(':checked');
|
||||
if (typeof(val) !== 'boolean') { return; }
|
||||
common.setAttribute(['codemirror', key], val);
|
||||
}).appendTo($inputBlock);
|
||||
|
||||
/*proxy.on('change', ['settings', 'codemirror', key], function (o, n) {
|
||||
$input[0].checked = !!n;
|
||||
});*/
|
||||
|
||||
common.getAttribute(['codemirror', key], function (e, val) {
|
||||
if (e) { return void console.error(e); }
|
||||
$input[0].checked = !!val;
|
||||
});
|
||||
return $div;
|
||||
};
|
||||
|
||||
var createPadWidthSelector = function () {
|
||||
var $div = $('<div>', {
|
||||
'class': 'cp-settings-pad-width cp-sidebarlayout-element'
|
||||
});
|
||||
$('<span>', {'class': 'label'}).text(Messages.settings_padWidth).appendTo($div);
|
||||
|
||||
create['logout-everywhere'] = function () {
|
||||
if (!common.isLoggedIn()) { return; }
|
||||
var $div = $('<div>', { 'class': 'cp-settings-logout-everywhere cp-sidebarlayout-element'});
|
||||
$('<label>', { 'for': 'cp-settings-logout-everywhere'})
|
||||
.text(Messages.settings_logoutEverywhereTitle).appendTo($div);
|
||||
$('<span>', {'class': 'cp-sidebarlayout-description'})
|
||||
.text(Messages.settings_padWidthHint).appendTo($div);
|
||||
.text(Messages.settings_logoutEverywhere).appendTo($div);
|
||||
var $button = $('<button>', {
|
||||
id: 'cp-settings-logout-everywhere',
|
||||
'class': 'btn btn-primary'
|
||||
}).text(Messages.settings_logoutEverywhereButton)
|
||||
.appendTo($div);
|
||||
var $ok = $('<span>', {'class': 'fa fa-check', title: Messages.saved}).hide().appendTo($div);
|
||||
var $spinner = $('<span>', {'class': 'fa fa-spinner fa-pulse'}).hide().appendTo($div);
|
||||
|
||||
var $ok = $('<span>', {'class': 'fa fa-check', title: Messages.saved});
|
||||
var $spinner = $('<span>', {'class': 'fa fa-spinner fa-pulse'});
|
||||
$button.click(function () {
|
||||
|
||||
var $label = $('<label>', { 'for': 'cp-settings-padwidth', 'class': 'noTitle' })
|
||||
.text(Messages.settings_padWidthLabel);
|
||||
var $input = $('<input>', {
|
||||
type: 'checkbox',
|
||||
id: 'cp-settings-padwidth'
|
||||
}).on('change', function () {
|
||||
$spinner.show();
|
||||
$ok.hide();
|
||||
var val = $input.is(':checked');
|
||||
common.setAttribute(['pad', 'width'], val, function () {
|
||||
$spinner.hide();
|
||||
$ok.show();
|
||||
UI.confirm(Messages.settings_logoutEverywhereConfirm, function (yes) {
|
||||
if (!yes) { return; }
|
||||
$spinner.show();
|
||||
$ok.hide();
|
||||
|
||||
sframeChan.query('Q_SETTINGS_LOGOUT', null, function () {
|
||||
$spinner.hide();
|
||||
$ok.show();
|
||||
window.setTimeout(function () {
|
||||
$ok.fadeOut(1500);
|
||||
}, 2500);
|
||||
});
|
||||
});
|
||||
}).appendTo($div);
|
||||
$label.appendTo($div);
|
||||
|
||||
$ok.hide().appendTo($div);
|
||||
$spinner.hide().appendTo($div);
|
||||
|
||||
|
||||
common.getAttribute(['pad', 'width'], function (e, val) {
|
||||
if (e) { return void console.error(e); }
|
||||
if (val) {
|
||||
$input.attr('checked', 'checked');
|
||||
}
|
||||
});
|
||||
return $div;
|
||||
};
|
||||
|
||||
var createResetTips = function () {
|
||||
create['resettips'] = function () {
|
||||
var $div = $('<div>', {'class': 'cp-settings-resettips cp-sidebarlayout-element'});
|
||||
$('<label>').text(Messages.settings_resetTips).appendTo($div);
|
||||
$('<span>', {'class': 'cp-sidebarlayout-description'})
|
||||
@@ -249,7 +201,7 @@ define([
|
||||
return $div;
|
||||
};
|
||||
|
||||
var createThumbnails = function () {
|
||||
create['thumbnails'] = function () {
|
||||
var $div = $('<div>', {'class': 'cp-settings-thumbnails cp-sidebarlayout-element'});
|
||||
$('<label>').text(Messages.settings_thumbnails).appendTo($div);
|
||||
|
||||
@@ -301,8 +253,286 @@ define([
|
||||
return $div;
|
||||
};
|
||||
|
||||
var createBackupDrive = function () {
|
||||
var $div = $('<div>', {'class': 'cp-settings-backup-drive cp-sidebarlayout-element'});
|
||||
create['userfeedback'] = function () {
|
||||
var $div = $('<div>', { 'class': 'cp-settings-userfeedback cp-sidebarlayout-element'});
|
||||
|
||||
$('<span>', {'class': 'label'}).text(Messages.settings_userFeedbackTitle).appendTo($div);
|
||||
|
||||
var $label = $('<label>', { 'for': 'cp-settings-userfeedback', 'class': 'noTitle' })
|
||||
.text(Messages.settings_userFeedback);
|
||||
|
||||
$('<span>', {'class': 'cp-sidebarlayout-description'})
|
||||
.append(Messages.settings_userFeedbackHint1)
|
||||
.append(Messages.settings_userFeedbackHint2).appendTo($div);
|
||||
|
||||
var $ok = $('<span>', {'class': 'fa fa-check', title: Messages.saved});
|
||||
var $spinner = $('<span>', {'class': 'fa fa-spinner fa-pulse'});
|
||||
|
||||
var $checkbox = $('<input>', {
|
||||
'type': 'checkbox',
|
||||
id: 'cp-settings-userfeedback'
|
||||
}).on('change', function () {
|
||||
$spinner.show();
|
||||
$ok.hide();
|
||||
var val = $checkbox.is(':checked') || false;
|
||||
common.setAttribute(['general', 'allowUserFeedback'], val, function () {
|
||||
$spinner.hide();
|
||||
$ok.show();
|
||||
});
|
||||
});
|
||||
|
||||
$checkbox.appendTo($div);
|
||||
$label.appendTo($div);
|
||||
|
||||
$ok.hide().appendTo($div);
|
||||
$spinner.hide().appendTo($div);
|
||||
|
||||
if (privateData.feedbackAllowed) {
|
||||
$checkbox[0].checked = true;
|
||||
}
|
||||
return $div;
|
||||
};
|
||||
|
||||
// Pad Creation settings
|
||||
|
||||
var setHTML = function (e, html) {
|
||||
e.innerHTML = html;
|
||||
return e;
|
||||
};
|
||||
create['creation-owned'] = function () {
|
||||
if (!common.isLoggedIn()) { return; }
|
||||
var owned = h('div.cp-settings-creation-owned.cp-sidebarlayout-element', [
|
||||
h('label', [
|
||||
Messages.creation_ownedTitle
|
||||
]),
|
||||
setHTML(h('p.cp-sidebarlayout-description'),
|
||||
Messages.creation_owned1 + '<br>' + Messages.creation_owned2),
|
||||
h('input#cp-creation-owned-true.cp-creation-owned-value', {
|
||||
type: 'radio',
|
||||
name: 'cp-creation-owned',
|
||||
value: 1,
|
||||
}),
|
||||
h('label', { 'for': 'cp-creation-owned-true' }, Messages.creation_ownedTrue),
|
||||
h('input#cp-creation-owned-false.cp-creation-owned-value', {
|
||||
type: 'radio',
|
||||
name: 'cp-creation-owned',
|
||||
value: 0,
|
||||
checked: 'checked'
|
||||
}),
|
||||
h('label', { 'for': 'cp-creation-owned-false' }, Messages.creation_ownedFalse),
|
||||
h('span.fa.fa-check', {title: Messages.saved}),
|
||||
h('span.fa.fa-spinner.fa-pulse'),
|
||||
]);
|
||||
|
||||
var $owned = $(owned);
|
||||
|
||||
var $ok = $owned.find('.fa-check');
|
||||
var $spinner = $owned.find('.fa-spinner');
|
||||
|
||||
$owned.find('input').change(function () {
|
||||
$spinner.show();
|
||||
$ok.hide();
|
||||
var val = parseInt($owned.find('[name="cp-creation-owned"]:checked').val());
|
||||
common.setAttribute(['general', 'creation', 'owned'], val, function (e) {
|
||||
if (e) { return void console.error(e); }
|
||||
$spinner.hide();
|
||||
$ok.show();
|
||||
});
|
||||
});
|
||||
common.getAttribute(['general', 'creation', 'owned'], function (e, val) {
|
||||
if (val) {
|
||||
$owned.find('#cp-creation-owned-true').attr('checked', true);
|
||||
}
|
||||
});
|
||||
|
||||
return $owned;
|
||||
};
|
||||
create['creation-expire'] = function () {
|
||||
if (!common.isLoggedIn()) { return; }
|
||||
var expire = h('div.cp-settings-creation-expire.cp-sidebarlayout-element', [
|
||||
h('label', [
|
||||
Messages.creation_expireTitle
|
||||
]),
|
||||
setHTML(h('p.cp-sidebarlayout-description'),
|
||||
Messages.creation_expire1 + '<br>' + Messages.creation_expire2),
|
||||
h('input#cp-creation-expire-false.cp-creation-expire-value', {
|
||||
type: 'radio',
|
||||
name: 'cp-creation-expire',
|
||||
value: 0,
|
||||
checked: 'checked'
|
||||
}),
|
||||
h('label', { 'for': 'cp-creation-expire-false' }, Messages.creation_expireFalse),
|
||||
h('input#cp-creation-expire-true.cp-creation-expire-value', {
|
||||
type: 'radio',
|
||||
name: 'cp-creation-expire',
|
||||
value: 1
|
||||
}),
|
||||
h('label', { 'for': 'cp-creation-expire-true' }, [
|
||||
Messages.creation_expireTrue,
|
||||
h('span.cp-creation-expire-picker', [
|
||||
h('input#cp-creation-expire-val', {
|
||||
type: "number",
|
||||
min: 1,
|
||||
max: 100,
|
||||
value: 3
|
||||
}),
|
||||
h('select#cp-creation-expire-unit', [
|
||||
h('option', { value: 'hour' }, Messages.creation_expireHours),
|
||||
h('option', { value: 'day' }, Messages.creation_expireDays),
|
||||
h('option', {
|
||||
value: 'month',
|
||||
selected: 'selected'
|
||||
}, Messages.creation_expireMonths)
|
||||
])
|
||||
])
|
||||
]),
|
||||
h('span.fa.fa-check', {title: Messages.saved}),
|
||||
h('span.fa.fa-spinner.fa-pulse'),
|
||||
]);
|
||||
|
||||
var $expire = $(expire);
|
||||
|
||||
var $ok = $expire.find('.fa-check');
|
||||
var $spinner = $expire.find('.fa-spinner');
|
||||
|
||||
var getValue = function () {
|
||||
if(!parseInt($expire.find('[name="cp-creation-expire"]:checked').val())) { return 0; }
|
||||
var unit = 0;
|
||||
switch ($expire.find('#cp-creation-expire-unit').val()) {
|
||||
case "hour" : unit = 3600; break;
|
||||
case "day" : unit = 3600 * 24; break;
|
||||
case "month": unit = 3600 * 24 * 30; break;
|
||||
default: unit = 0;
|
||||
}
|
||||
return ($expire.find('#cp-creation-expire-val').val() || 0) * unit;
|
||||
};
|
||||
$expire.find('input, select').change(function () {
|
||||
$spinner.show();
|
||||
$ok.hide();
|
||||
common.setAttribute(['general', 'creation', 'expire'], getValue(), function (e) {
|
||||
if (e) { return void console.error(e); }
|
||||
$spinner.hide();
|
||||
$ok.show();
|
||||
});
|
||||
});
|
||||
common.getAttribute(['general', 'creation', 'expire'], function (e, val) {
|
||||
UIElements.setExpirationValue(val, $expire);
|
||||
});
|
||||
|
||||
return $expire;
|
||||
};
|
||||
create['creation-skip'] = function () {
|
||||
if (!common.isLoggedIn()) { return; }
|
||||
var skip = h('div.cp-settings-creation-skip.cp-sidebarlayout-element', [
|
||||
h('label', [
|
||||
Messages.settings_creationSkip
|
||||
]),
|
||||
setHTML(h('p.cp-sidebarlayout-description'), Messages.settings_creationSkipHint),
|
||||
h('input#cp-creation-skip-true.cp-creation-skip-value', {
|
||||
type: 'radio',
|
||||
name: 'cp-creation-skip',
|
||||
value: 1,
|
||||
}),
|
||||
h('label', { 'for': 'cp-creation-skip-true' }, Messages.settings_creationSkipTrue),
|
||||
h('input#cp-creation-skip-false.cp-creation-skip-value', {
|
||||
type: 'radio',
|
||||
name: 'cp-creation-skip',
|
||||
value: 0,
|
||||
checked: 'checked'
|
||||
}),
|
||||
h('label', { 'for': 'cp-creation-skip-false' }, Messages.settings_creationSkipFalse),
|
||||
h('span.fa.fa-check', {title: Messages.saved}),
|
||||
h('span.fa.fa-spinner.fa-pulse'),
|
||||
]);
|
||||
|
||||
var $div = $(skip);
|
||||
|
||||
var $ok = $div.find('.fa-check');
|
||||
var $spinner = $div.find('.fa-spinner');
|
||||
|
||||
$div.find('input').change(function () {
|
||||
$spinner.show();
|
||||
$ok.hide();
|
||||
var val = parseInt($div.find('[name="cp-creation-skip"]:checked').val());
|
||||
// If we don't skip the pad creation screen, we dont' need settings to hide the templates
|
||||
// modal
|
||||
if (!val) {
|
||||
$('.cp-settings-creation-template').addClass('cp-settings-creation-skipped');
|
||||
} else {
|
||||
$('.cp-settings-creation-template').removeClass('cp-settings-creation-skipped');
|
||||
}
|
||||
common.setAttribute(['general', 'creation', 'skip'], val, function (e) {
|
||||
if (e) { return void console.error(e); }
|
||||
$spinner.hide();
|
||||
$ok.show();
|
||||
});
|
||||
});
|
||||
common.getAttribute(['general', 'creation', 'skip'], function (e, val) {
|
||||
if (val) {
|
||||
$div.find('#cp-creation-skip-true').attr('checked', true);
|
||||
return;
|
||||
}
|
||||
// If we don't skip the pad creation screen, we dont' need settings to hide the templates
|
||||
// modal
|
||||
$('.cp-settings-creation-template').addClass('cp-settings-creation-skipped');
|
||||
});
|
||||
|
||||
return $div;
|
||||
};
|
||||
create['creation-template'] = function () {
|
||||
var skip = h('div.cp-settings-creation-template.cp-sidebarlayout-element', [
|
||||
h('label', [
|
||||
Messages.settings_templateSkip
|
||||
]),
|
||||
setHTML(h('p.cp-sidebarlayout-description'), Messages.settings_templateSkipHint),
|
||||
h('input#cp-creation-template-true.cp-creation-template-value', {
|
||||
type: 'radio',
|
||||
name: 'cp-creation-template',
|
||||
value: 1,
|
||||
}),
|
||||
h('label', { 'for': 'cp-creation-template-true' }, Messages.settings_creationSkipTrue),
|
||||
h('input#cp-creation-template-false.cp-creation-template-value', {
|
||||
type: 'radio',
|
||||
name: 'cp-creation-template',
|
||||
value: 0,
|
||||
checked: 'checked'
|
||||
}),
|
||||
h('label', { 'for': 'cp-creation-template-false' }, Messages.settings_creationSkipFalse),
|
||||
h('span.fa.fa-check', {title: Messages.saved}),
|
||||
h('span.fa.fa-spinner.fa-pulse'),
|
||||
]);
|
||||
|
||||
var $div = $(skip);
|
||||
|
||||
var $ok = $div.find('.fa-check');
|
||||
var $spinner = $div.find('.fa-spinner');
|
||||
|
||||
$div.find('input').change(function () {
|
||||
$spinner.show();
|
||||
$ok.hide();
|
||||
var val = parseInt($div.find('[name="cp-creation-template"]:checked').val());
|
||||
common.setAttribute(['general', 'creation', 'noTemplate'], val, function (e) {
|
||||
if (e) { return void console.error(e); }
|
||||
$spinner.hide();
|
||||
$ok.show();
|
||||
});
|
||||
});
|
||||
common.getAttribute(['general', 'creation', 'noTemplate'], function (e, val) {
|
||||
if (val) {
|
||||
$div.find('#cp-creation-template-true').attr('checked', true);
|
||||
}
|
||||
});
|
||||
|
||||
return $div;
|
||||
};
|
||||
|
||||
|
||||
|
||||
|
||||
// Drive settings
|
||||
|
||||
create['drive-backup'] = function () {
|
||||
var $div = $('<div>', {'class': 'cp-settings-drive-backup cp-sidebarlayout-element'});
|
||||
|
||||
var accountName = privateData.accountName;
|
||||
var displayName = metadataMgr.getUserData().name || '';
|
||||
@@ -350,113 +580,9 @@ define([
|
||||
return $div;
|
||||
};
|
||||
|
||||
var createResetDrive = function () {
|
||||
var $div = $('<div>', {'class': 'cp-settings-reset-drive cp-sidebarlayout-element'});
|
||||
$('<label>').text(Messages.settings_resetNewTitle).appendTo($div);
|
||||
$('<span>', {'class': 'cp-sidebarlayout-description'})
|
||||
.text(Messages.settings_reset).appendTo($div);
|
||||
var $button = $('<button>', {'id': 'cp-settings-reset-drive', 'class': 'btn btn-danger'})
|
||||
.text(Messages.settings_resetButton).appendTo($div);
|
||||
|
||||
$button.click(function () {
|
||||
UI.prompt(Messages.settings_resetPrompt, "", function (val) {
|
||||
if (val !== "I love CryptPad") {
|
||||
UI.alert(Messages.settings_resetError);
|
||||
return;
|
||||
}
|
||||
sframeChan.query("Q_SETTINGS_DRIVE_RESET", null, function (err) {
|
||||
if (err) { return void console.error(err); }
|
||||
UI.alert(Messages.settings_resetDone);
|
||||
});
|
||||
}, undefined, true);
|
||||
});
|
||||
|
||||
return $div;
|
||||
};
|
||||
|
||||
var createUserFeedbackToggle = function () {
|
||||
var $div = $('<div>', { 'class': 'cp-settings-userfeedback cp-sidebarlayout-element'});
|
||||
|
||||
$('<span>', {'class': 'label'}).text(Messages.settings_userFeedbackTitle).appendTo($div);
|
||||
|
||||
var $label = $('<label>', { 'for': 'cp-settings-userfeedback', 'class': 'noTitle' })
|
||||
.text(Messages.settings_userFeedback);
|
||||
|
||||
$('<span>', {'class': 'cp-sidebarlayout-description'})
|
||||
.append(Messages.settings_userFeedbackHint1)
|
||||
.append(Messages.settings_userFeedbackHint2).appendTo($div);
|
||||
|
||||
var $ok = $('<span>', {'class': 'fa fa-check', title: Messages.saved});
|
||||
var $spinner = $('<span>', {'class': 'fa fa-spinner fa-pulse'});
|
||||
|
||||
var $checkbox = $('<input>', {
|
||||
'type': 'checkbox',
|
||||
id: 'cp-settings-userfeedback'
|
||||
}).on('change', function () {
|
||||
$spinner.show();
|
||||
$ok.hide();
|
||||
var val = $checkbox.is(':checked') || false;
|
||||
common.setAttribute(['general', 'allowUserFeedback'], val, function () {
|
||||
$spinner.hide();
|
||||
$ok.show();
|
||||
});
|
||||
});
|
||||
|
||||
$checkbox.appendTo($div);
|
||||
$label.appendTo($div);
|
||||
|
||||
$ok.hide().appendTo($div);
|
||||
$spinner.hide().appendTo($div);
|
||||
|
||||
if (privateData.feedbackAllowed) {
|
||||
$checkbox[0].checked = true;
|
||||
}
|
||||
return $div;
|
||||
};
|
||||
|
||||
var createUsageButton = function () {
|
||||
common.createUsageBar(function (err, $bar) {
|
||||
if (err) { return void console.error(err); }
|
||||
APP.$usage.html('').append($bar);
|
||||
}, true);
|
||||
};
|
||||
|
||||
var createLogoutEverywhere = function () {
|
||||
var $div = $('<div>', { 'class': 'cp-settings-logout-everywhere cp-sidebarlayout-element'});
|
||||
$('<label>', { 'for': 'cp-settings-logout-everywhere'})
|
||||
.text(Messages.settings_logoutEverywhereTitle).appendTo($div);
|
||||
$('<span>', {'class': 'cp-sidebarlayout-description'})
|
||||
.text(Messages.settings_logoutEverywhere).appendTo($div);
|
||||
var $button = $('<button>', {
|
||||
id: 'cp-settings-logout-everywhere',
|
||||
'class': 'btn btn-primary'
|
||||
}).text(Messages.settings_logoutEverywhereButton)
|
||||
.appendTo($div);
|
||||
var $ok = $('<span>', {'class': 'fa fa-check', title: Messages.saved}).hide().appendTo($div);
|
||||
var $spinner = $('<span>', {'class': 'fa fa-spinner fa-pulse'}).hide().appendTo($div);
|
||||
|
||||
$button.click(function () {
|
||||
|
||||
UI.confirm(Messages.settings_logoutEverywhereConfirm, function (yes) {
|
||||
if (!yes) { return; }
|
||||
$spinner.show();
|
||||
$ok.hide();
|
||||
|
||||
sframeChan.query('Q_SETTINGS_LOGOUT', null, function () {
|
||||
$spinner.hide();
|
||||
$ok.show();
|
||||
window.setTimeout(function () {
|
||||
$ok.fadeOut(1500);
|
||||
}, 2500);
|
||||
});
|
||||
});
|
||||
});
|
||||
return $div;
|
||||
};
|
||||
|
||||
var createImportLocalPads = function () {
|
||||
create['drive-import-local'] = function () {
|
||||
if (!common.isLoggedIn()) { return; }
|
||||
var $div = $('<div>', {'class': 'cp-settings-import-local-pads cp-sidebarlayout-element'});
|
||||
var $div = $('<div>', {'class': 'cp-settings-drive-import-local cp-sidebarlayout-element'});
|
||||
$('<label>', {'for' : 'cp-settings-import-local-pads'})
|
||||
.text(Messages.settings_import).appendTo($div);
|
||||
$('<span>', {'class': 'cp-sidebarlayout-description'})
|
||||
@@ -484,14 +610,146 @@ define([
|
||||
return $div;
|
||||
};
|
||||
|
||||
var createLanguageSelector = function () {
|
||||
var $div = $('<div>', {'class': 'cp-settings-language-selector cp-sidebarlayout-element'});
|
||||
$('<label>').text(Messages.language).appendTo($div);
|
||||
var $b = common.createLanguageSelector($div);
|
||||
$b.find('button').addClass('btn btn-secondary');
|
||||
create['drive-reset'] = function () {
|
||||
var $div = $('<div>', {'class': 'cp-settings-drive-reset cp-sidebarlayout-element'});
|
||||
$('<label>').text(Messages.settings_resetNewTitle).appendTo($div);
|
||||
$('<span>', {'class': 'cp-sidebarlayout-description'})
|
||||
.text(Messages.settings_reset).appendTo($div);
|
||||
var $button = $('<button>', {'id': 'cp-settings-reset-drive', 'class': 'btn btn-danger'})
|
||||
.text(Messages.settings_resetButton).appendTo($div);
|
||||
|
||||
$button.click(function () {
|
||||
UI.prompt(Messages.settings_resetPrompt, "", function (val) {
|
||||
if (val !== "I love CryptPad") {
|
||||
UI.alert(Messages.settings_resetError);
|
||||
return;
|
||||
}
|
||||
sframeChan.query("Q_SETTINGS_DRIVE_RESET", null, function (err) {
|
||||
if (err) { return void console.error(err); }
|
||||
UI.alert(Messages.settings_resetDone);
|
||||
});
|
||||
}, undefined, true);
|
||||
});
|
||||
|
||||
return $div;
|
||||
};
|
||||
|
||||
// Rich text pads settings
|
||||
|
||||
create['pad-width'] = function () {
|
||||
var $div = $('<div>', {
|
||||
'class': 'cp-settings-pad-width cp-sidebarlayout-element'
|
||||
});
|
||||
$('<span>', {'class': 'label'}).text(Messages.settings_padWidth).appendTo($div);
|
||||
|
||||
$('<span>', {'class': 'cp-sidebarlayout-description'})
|
||||
.text(Messages.settings_padWidthHint).appendTo($div);
|
||||
|
||||
var $ok = $('<span>', {'class': 'fa fa-check', title: Messages.saved});
|
||||
var $spinner = $('<span>', {'class': 'fa fa-spinner fa-pulse'});
|
||||
|
||||
var $label = $('<label>', { 'for': 'cp-settings-padwidth', 'class': 'noTitle' })
|
||||
.text(Messages.settings_padWidthLabel);
|
||||
var $input = $('<input>', {
|
||||
type: 'checkbox',
|
||||
id: 'cp-settings-padwidth'
|
||||
}).on('change', function () {
|
||||
$spinner.show();
|
||||
$ok.hide();
|
||||
var val = $input.is(':checked');
|
||||
common.setAttribute(['pad', 'width'], val, function () {
|
||||
$spinner.hide();
|
||||
$ok.show();
|
||||
});
|
||||
}).appendTo($div);
|
||||
$label.appendTo($div);
|
||||
|
||||
$ok.hide().appendTo($div);
|
||||
$spinner.hide().appendTo($div);
|
||||
|
||||
|
||||
common.getAttribute(['pad', 'width'], function (e, val) {
|
||||
if (e) { return void console.error(e); }
|
||||
if (val) {
|
||||
$input.attr('checked', 'checked');
|
||||
}
|
||||
});
|
||||
return $div;
|
||||
};
|
||||
|
||||
// Code settings
|
||||
|
||||
create['code-indent-unit'] = function () {
|
||||
var $div = $('<div>', {
|
||||
'class': 'cp-settings-code-indent-unit cp-sidebarlayout-element'
|
||||
});
|
||||
$('<label>').text(Messages.settings_codeIndentation).appendTo($div);
|
||||
|
||||
var $inputBlock = $('<div>', {
|
||||
'class': 'cp-sidebarlayout-input-block',
|
||||
}).appendTo($div);
|
||||
|
||||
var $input = $('<input>', {
|
||||
'min': 1,
|
||||
'max': 8,
|
||||
type: 'number',
|
||||
}).on('change', function () {
|
||||
var val = parseInt($input.val());
|
||||
if (typeof(val) !== 'number') { return; }
|
||||
common.setAttribute(['codemirror', 'indentUnit'], val);
|
||||
}).appendTo($inputBlock);
|
||||
|
||||
common.getAttribute(['codemirror', 'indentUnit'], function (e, val) {
|
||||
if (e) { return void console.error(e); }
|
||||
if (typeof(val) !== 'number') {
|
||||
$input.val(2);
|
||||
} else {
|
||||
$input.val(val);
|
||||
}
|
||||
});
|
||||
return $div;
|
||||
};
|
||||
|
||||
create['code-indent-type'] = function () {
|
||||
var key = 'indentWithTabs';
|
||||
|
||||
var $div = $('<div>', {
|
||||
'class': 'cp-settings-code-indent-type cp-sidebarlayout-element'
|
||||
});
|
||||
$('<label>').text(Messages.settings_codeUseTabs).appendTo($div);
|
||||
|
||||
var $inputBlock = $('<div>', {
|
||||
'class': 'cp-sidebarlayout-input-block',
|
||||
}).css('flex-flow', 'column')
|
||||
.appendTo($div);
|
||||
|
||||
var $input = $('<input>', {
|
||||
type: 'checkbox',
|
||||
}).on('change', function () {
|
||||
var val = $input.is(':checked');
|
||||
if (typeof(val) !== 'boolean') { return; }
|
||||
common.setAttribute(['codemirror', key], val);
|
||||
}).appendTo($inputBlock);
|
||||
|
||||
/*proxy.on('change', ['settings', 'codemirror', key], function (o, n) {
|
||||
$input[0].checked = !!n;
|
||||
});*/
|
||||
|
||||
common.getAttribute(['codemirror', key], function (e, val) {
|
||||
if (e) { return void console.error(e); }
|
||||
$input[0].checked = !!val;
|
||||
});
|
||||
return $div;
|
||||
};
|
||||
|
||||
// Settings app
|
||||
|
||||
var createUsageButton = function () {
|
||||
common.createUsageBar(function (err, $bar) {
|
||||
if (err) { return void console.error(err); }
|
||||
APP.$usage.html('').append($bar);
|
||||
}, true);
|
||||
};
|
||||
|
||||
var hideCategories = function () {
|
||||
APP.$rightside.find('> div').hide();
|
||||
@@ -514,6 +772,7 @@ define([
|
||||
if (key === 'drive') { $category.append($('<span>', {'class': 'fa fa-hdd-o'})); }
|
||||
if (key === 'code') { $category.append($('<span>', {'class': 'fa fa-file-code-o' })); }
|
||||
if (key === 'pad') { $category.append($('<span>', {'class': 'fa fa-file-word-o' })); }
|
||||
if (key === 'creation') { $category.append($('<span>', {'class': 'fa fa-plus-circle' })); }
|
||||
|
||||
if (key === active) {
|
||||
$category.addClass('cp-leftside-active');
|
||||
@@ -561,22 +820,10 @@ define([
|
||||
|
||||
// Content
|
||||
var $rightside = APP.$rightside;
|
||||
$rightside.append(createInfoBlock());
|
||||
$rightside.append(createDisplayNameInput());
|
||||
$rightside.append(createLanguageSelector());
|
||||
$rightside.append(createIndentUnitSelector());
|
||||
$rightside.append(createIndentTypeSelector());
|
||||
|
||||
if (common.isLoggedIn()) {
|
||||
$rightside.append(createLogoutEverywhere());
|
||||
for (var f in create) {
|
||||
if (typeof create[f] !== "function") { continue; }
|
||||
$rightside.append(create[f]());
|
||||
}
|
||||
$rightside.append(createResetTips());
|
||||
$rightside.append(createThumbnails());
|
||||
$rightside.append(createBackupDrive());
|
||||
$rightside.append(createImportLocalPads());
|
||||
$rightside.append(createResetDrive());
|
||||
$rightside.append(createUserFeedbackToggle());
|
||||
$rightside.append(createPadWidthSelector());
|
||||
|
||||
// TODO RPC
|
||||
//obj.proxy.on('change', [], refresh);
|
||||
|
||||
Reference in New Issue
Block a user