-
Notifications
You must be signed in to change notification settings - Fork 591
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #515 from nianxiongdi/a11yd
docs(*): add gitbook related a11y guide
- Loading branch information
Showing
57 changed files
with
10,788 additions
and
149 deletions.
There are no files selected for viewing
Binary file not shown.
Binary file not shown.
685 changes: 685 additions & 0 deletions
685
_book/gitbook/fonts/fontawesome/fontawesome-webfont.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file not shown.
Binary file not shown.
Binary file not shown.
240 changes: 240 additions & 0 deletions
240
_book/gitbook/gitbook-plugin-fontsettings/fontsettings.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,240 @@ | ||
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 | ||
}; | ||
}); | ||
|
||
|
Oops, something went wrong.