mirrors/etherpad-lite
1
0
Fork 0
mirror of https://github.com/ether/etherpad-lite.git synced 2025-04-26 10:26:15 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions 17

css: adds UI skin variants builder (only for colibris skin)

Browse source
This commit is contained in:
Sebastian Castro 2020-04-09 08:41:00 +02:00 • committed by muxator
parent cbc6304243
commit c6f5ced23c
4 changed files with 95 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

55
src/static/js/skin_variants.js Normal file
View file

@ -0,0 +1,55 @@
// Specific hash to display the skin variants builder popup
if (window.location.hash.toLowerCase() == "#skinvariantsbuilder") {
$('#skin-variants').addClass('popup-show');
$('.skin-variant').change(function() {
updateSkinVariantsClasses();
});
var containers = ['editor', 'background', 'toolbar'];
var colors = ['super-light', 'light', 'dark', 'super-dark'];
updateCheckboxFromSkinClasses();
updateSkinVariantsClasses();
// add corresponding classes when config change
function updateSkinVariantsClasses() {
var domsToUpdate = [
$('html'),
$('iframe[name=ace_outer]').contents().find('html'),
$('iframe[name=ace_outer]').contents().find('iframe[name=ace_inner]').contents().find('html')
];
colors.forEach(function(color) {
containers.forEach(function(container) {
domsToUpdate.forEach(function(el) { el.removeClass(color + '-' + container); });
})
})
domsToUpdate.forEach(function(el) { el.removeClass('full-width-editor'); });
var new_classes = [];
$('.skin-variant-color').each(function() {
new_classes.push($(this).val() + "-" + $(this).data('container'));
})
if ($('#skin-variant-full-width').is(':checked')) new_classes.push("full-width-editor");
domsToUpdate.forEach(function(el) { el.addClass(new_classes.join(" ")); });
$('#skin-variants-result').val('"skinVariants": "' + new_classes.join(" ") + '"');
}
// run on init
function updateCheckboxFromSkinClasses() {
$('html').attr('class').split(' ').forEach(function(classItem) {
var container = classItem.split('-').slice(-1);
var container = classItem.substring(classItem.lastIndexOf("-") + 1, classItem.length);
if (containers.indexOf(container) > -1) {
var color = classItem.substring(0, classItem.lastIndexOf("-"));
$('.skin-variant-color[data-container="' + container + '"').val(color);
}
})
$('#skin-variant-full-width').prop('checked', $('html').hasClass('full-width-editor'));
}
}