|
|
|
require(['gitbook', 'jquery'], function(gitbook, $) {
|
|
|
|
// Configuration
|
|
|
|
var MAX_SIZE = 4,
|
|
|
|
MIN_SIZE = 0,
|
|
|
|
BUTTON_ID;
|
|
|
|
|
|
|
|
// Current fontsettings state
|
|
|
|
var fontState;
|
|
|
|
|
|
|
|
// Default themes
|
|
|
|
var THEMES = [
|
|
|
|
{
|
|
|
|
config: 'white',
|
|
|
|
text: 'White',
|
|
|
|
id: 0
|
|
|
|
},
|
|
|
|
{
|
|
|
|
config: 'sepia',
|
|
|
|
text: 'Sepia',
|
|
|
|
id: 1
|
|
|
|
},
|
|
|
|
{
|
|
|
|
config: 'night',
|
|
|
|
text: 'Night',
|
|
|
|
id: 2
|
|
|
|
}
|
|
|
|
];
|
|
|
|
|
|
|
|
// Default font families
|
|
|
|
var FAMILIES = [
|
|
|
|
{
|
|
|
|
config: 'serif',
|
|
|
|
text: 'Serif',
|
|
|
|
id: 0
|
|
|
|
},
|
|
|
|
{
|
|
|
|
config: 'sans',
|
|
|
|
text: 'Sans',
|
|
|
|
id: 1
|
|
|
|
}
|
|
|
|
];
|
|
|
|
|
|
|
|
// Return configured themes
|
|
|
|
function getThemes() {
|
|
|
|
return THEMES;
|
|
|
|
}
|
|
|
|
|
|
|
|
// Modify configured themes
|
|
|
|
function setThemes(themes) {
|
|
|
|
THEMES = themes;
|
|
|
|
updateButtons();
|
|
|
|
}
|
|
|
|
|
|
|
|
// Return configured font families
|
|
|
|
function getFamilies() {
|
|
|
|
return FAMILIES;
|
|
|
|
}
|
|
|
|
|
|
|
|
// Modify configured font families
|
|
|
|
function setFamilies(families) {
|
|
|
|
FAMILIES = families;
|
|
|
|
updateButtons();
|
|
|
|
}
|
|
|
|
|
|
|
|
// Save current font settings
|
|
|
|
function saveFontSettings() {
|
|
|
|
gitbook.storage.set('fontState', fontState);
|
|
|
|
update();
|
|
|
|
}
|
|
|
|
|
|
|
|
// Increase font size
|
|
|
|
function enlargeFontSize(e) {
|
|
|
|
e.preventDefault();
|
|
|
|
if (fontState.size >= MAX_SIZE) return;
|
|
|
|
|
|
|
|
fontState.size++;
|
|
|
|
saveFontSettings();
|
|
|
|
}
|
|
|
|
|
|
|
|
// Decrease font size
|
|
|
|
function reduceFontSize(e) {
|
|
|
|
e.preventDefault();
|
|
|
|
if (fontState.size <= MIN_SIZE) return;
|
|
|
|
|
|
|
|
fontState.size--;
|
|
|
|
saveFontSettings();
|
|
|
|
}
|
|
|
|
|
|
|
|
// Change font family
|
|
|
|
function changeFontFamily(configName, e) {
|
|
|
|
if (e && e instanceof Event) {
|
|
|
|
e.preventDefault();
|
|
|
|
}
|
|
|
|
|
|
|
|
var familyId = getFontFamilyId(configName);
|
|
|
|
fontState.family = familyId;
|
|
|
|
saveFontSettings();
|
|
|
|
}
|
|
|
|
|
|
|
|
// Change type of color theme
|
|
|
|
function changeColorTheme(configName, e) {
|
|
|
|
if (e && e instanceof Event) {
|
|
|
|
e.preventDefault();
|
|
|
|
}
|
|
|
|
|
|
|
|
var $book = gitbook.state.$book;
|
|
|
|
|
|
|
|
// Remove currently applied color theme
|
|
|
|
if (fontState.theme !== 0)
|
|
|
|
$book.removeClass('color-theme-'+fontState.theme);
|
|
|
|
|
|
|
|
// Set new color theme
|
|
|
|
var themeId = getThemeId(configName);
|
|
|
|
fontState.theme = themeId;
|
|
|
|
if (fontState.theme !== 0)
|
|
|
|
$book.addClass('color-theme-'+fontState.theme);
|
|
|
|
|
|
|
|
saveFontSettings();
|
|
|
|
}
|
|
|
|
|
|
|
|
// Return the correct id for a font-family config key
|
|
|
|
// Default to first font-family
|
|
|
|
function getFontFamilyId(configName) {
|
|
|
|
// Search for plugin configured font family
|
|
|
|
var configFamily = $.grep(FAMILIES, function(family) {
|
|
|
|
return family.config == configName;
|
|
|
|
})[0];
|
|
|
|
// Fallback to default font family
|
|
|
|
return (!!configFamily)? configFamily.id : 0;
|
|
|
|
}
|
|
|
|
|
|
|
|
// Return the correct id for a theme config key
|
|
|
|
// Default to first theme
|
|
|
|
function getThemeId(configName) {
|
|
|
|
// Search for plugin configured theme
|
|
|
|
var configTheme = $.grep(THEMES, function(theme) {
|
|
|
|
return theme.config == configName;
|
|
|
|
})[0];
|
|
|
|
// Fallback to default theme
|
|
|
|
return (!!configTheme)? configTheme.id : 0;
|
|
|
|
}
|
|
|
|
|
|
|
|
function update() {
|
|
|
|
var $book = gitbook.state.$book;
|
|
|
|
|
|
|
|
$('.font-settings .font-family-list li').removeClass('active');
|
|
|
|
$('.font-settings .font-family-list li:nth-child('+(fontState.family+1)+')').addClass('active');
|
|
|
|
|
|
|
|
$book[0].className = $book[0].className.replace(/\bfont-\S+/g, '');
|
|
|
|
$book.addClass('font-size-'+fontState.size);
|
|
|
|
$book.addClass('font-family-'+fontState.family);
|
|
|
|
|
|
|
|
if(fontState.theme !== 0) {
|
|
|
|
$book[0].className = $book[0].className.replace(/\bcolor-theme-\S+/g, '');
|
|
|
|
$book.addClass('color-theme-'+fontState.theme);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
function init(config) {
|
|
|
|
// Search for plugin configured font family
|
|
|
|
var configFamily = getFontFamilyId(config.family),
|
|
|
|
configTheme = getThemeId(config.theme);
|
|
|
|
|
|
|
|
// Instantiate font state object
|
|
|
|
fontState = gitbook.storage.get('fontState', {
|
|
|
|
size: config.size || 2,
|
|
|
|
family: configFamily,
|
|
|
|
theme: configTheme
|
|
|
|
});
|
|
|
|
|
|
|
|
update();
|
|
|
|
}
|
|
|
|
|
|
|
|
function updateButtons() {
|
|
|
|
// Remove existing fontsettings buttons
|
|
|
|
if (!!BUTTON_ID) {
|
|
|
|
gitbook.toolbar.removeButton(BUTTON_ID);
|
|
|
|
}
|
|
|
|
|
|
|
|
// Create buttons in toolbar
|
|
|
|
BUTTON_ID = gitbook.toolbar.createButton({
|
|
|
|
icon: 'fa fa-font',
|
|
|
|
label: 'Font Settings',
|
|
|
|
className: 'font-settings',
|
|
|
|
dropdown: [
|
|
|
|
[
|
|
|
|
{
|
|
|
|
text: 'A',
|
|
|
|
className: 'font-reduce',
|
|
|
|
onClick: reduceFontSize
|
|
|
|
},
|
|
|
|
{
|
|
|
|
text: 'A',
|
|
|
|
className: 'font-enlarge',
|
|
|
|
onClick: enlargeFontSize
|
|
|
|
}
|
|
|
|
],
|
|
|
|
$.map(FAMILIES, function(family) {
|
|
|
|
family.onClick = function(e) {
|
|
|
|
return changeFontFamily(family.config, e);
|
|
|
|
};
|
|
|
|
|
|
|
|
return family;
|
|
|
|
}),
|
|
|
|
$.map(THEMES, function(theme) {
|
|
|
|
theme.onClick = function(e) {
|
|
|
|
return changeColorTheme(theme.config, e);
|
|
|
|
};
|
|
|
|
|
|
|
|
return theme;
|
|
|
|
})
|
|
|
|
]
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
// Init configuration at start
|
|
|
|
gitbook.events.bind('start', function(e, config) {
|
|
|
|
var opts = config.fontsettings;
|
|
|
|
|
|
|
|
// Generate buttons at start
|
|
|
|
updateButtons();
|
|
|
|
|
|
|
|
// Init current settings
|
|
|
|
init(opts);
|
|
|
|
});
|
|
|
|
|
|
|
|
// Expose API
|
|
|
|
gitbook.fontsettings = {
|
|
|
|
enlargeFontSize: enlargeFontSize,
|
|
|
|
reduceFontSize: reduceFontSize,
|
|
|
|
setTheme: changeColorTheme,
|
|
|
|
setFamily: changeFontFamily,
|
|
|
|
getThemes: getThemes,
|
|
|
|
setThemes: setThemes,
|
|
|
|
getFamilies: getFamilies,
|
|
|
|
setFamilies: setFamilies
|
|
|
|
};
|
|
|
|
});
|
|
|
|
|
|
|
|
|