Skip to content

Commit

Permalink
Update to use list style parser from ListItem
Browse files Browse the repository at this point in the history
  • Loading branch information
@niklasvh
niklasvh committed Dec 24, 2017
1 parent afa5d7c commit 9046e0d
Show file tree
Hide file tree
Showing 5 changed files with 93 additions and 53 deletions.
2 changes: 1 addition & 1 deletion package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

3 changes: 1 addition & 2 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -77,7 +77,6 @@
"homepage": "https://html2canvas.hertzen.com",
"license": "MIT",
"dependencies": {
"punycode": "2.1.0",
"liststyletype-formatter": "latest"
"punycode": "2.1.0"
}
}
131 changes: 84 additions & 47 deletions src/ListItem.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -92,7 +92,7 @@ export const inlineListItemElement = (
}
} else if (typeof container.listIndex === 'number') {
text = node.ownerDocument.createTextNode(
createCounterText(container.listIndex, listStyle.listStyleType)
createCounterText(container.listIndex, listStyle.listStyleType, true)
);
wrapper.appendChild(text);
wrapper.style.top = `${container.bounds.top - MARGIN_TOP}px`;
Expand Down Expand Up @@ -363,10 +363,10 @@ const createAdditiveCounter = (
max: number,
symbols,
fallback: ListStyleType,
suffix: string = '. '
suffix: string
) => {
if (value < min || value > max) {
return createCounterText(value, fallback);
return createCounterText(value, fallback, suffix.length > 0);
}

return (
Expand Down Expand Up @@ -404,7 +404,7 @@ const createCounterStyleFromRange = (
codePointRangeStart: number,
codePointRangeEnd: number,
isNumeric: boolean,
suffix: string = '. '
suffix: string
): string => {
const codePointRangeLength = codePointRangeEnd - codePointRangeStart + 1;

Expand Down Expand Up @@ -451,7 +451,7 @@ const createCJKCounter = (
flags: number
): string => {
if (value < -9999 || value > 9999) {
return createCounterText(value, LIST_STYLE_TYPE.CJK_DECIMAL);
return createCounterText(value, LIST_STYLE_TYPE.CJK_DECIMAL, suffix.length > 0);
}
let tmp = Math.abs(value);
let string = suffix;
Expand Down Expand Up @@ -490,7 +490,14 @@ const CHINESE_FORMAL_MULTIPLIERS = '拾佰仟萬';
const JAPANESE_NEGATIVE = 'マイナス';
const KOREAN_NEGATIVE = '마이너스 ';

const createCounterText = (value: number, type: ListStyleType): string => {
export const createCounterText = (
value: number,
type: ListStyleType,
appendSuffix: boolean
): string => {
const defaultSuffix = appendSuffix ? '. ' : '';
const cjkSuffix = appendSuffix ? '、' : '';
const koreanSuffix = appendSuffix ? ', ' : '';
switch (type) {
case LIST_STYLE_TYPE.DISC:
return '•';
Expand All @@ -499,56 +506,72 @@ const createCounterText = (value: number, type: ListStyleType): string => {
case LIST_STYLE_TYPE.SQUARE:
return '◾';
case LIST_STYLE_TYPE.DECIMAL_LEADING_ZERO:
const string = createCounterStyleFromRange(value, 48, 57, true);
const string = createCounterStyleFromRange(value, 48, 57, true, defaultSuffix);
return string.length < 4 ? `0${string}` : string;
case LIST_STYLE_TYPE.CJK_DECIMAL:
return createCounterStyleFromSymbols(value, '〇一二三四五六七八九', '、');
return createCounterStyleFromSymbols(value, '〇一二三四五六七八九', cjkSuffix);
case LIST_STYLE_TYPE.LOWER_ROMAN:
return createAdditiveCounter(
value,
1,
3999,
ROMAN_UPPER,
LIST_STYLE_TYPE.DECIMAL
LIST_STYLE_TYPE.DECIMAL,
defaultSuffix
).toLowerCase();
case LIST_STYLE_TYPE.UPPER_ROMAN:
return createAdditiveCounter(value, 1, 3999, ROMAN_UPPER, LIST_STYLE_TYPE.DECIMAL);
return createAdditiveCounter(
value,
1,
3999,
ROMAN_UPPER,
LIST_STYLE_TYPE.DECIMAL,
defaultSuffix
);
case LIST_STYLE_TYPE.LOWER_GREEK:
return createCounterStyleFromRange(value, 945, 969, false);
return createCounterStyleFromRange(value, 945, 969, false, defaultSuffix);
case LIST_STYLE_TYPE.LOWER_ALPHA:
return createCounterStyleFromRange(value, 97, 122, false);
return createCounterStyleFromRange(value, 97, 122, false, defaultSuffix);
case LIST_STYLE_TYPE.UPPER_ALPHA:
return createCounterStyleFromRange(value, 65, 90, false);
return createCounterStyleFromRange(value, 65, 90, false, defaultSuffix);
case LIST_STYLE_TYPE.ARABIC_INDIC:
return createCounterStyleFromRange(value, 1632, 1641, true);
return createCounterStyleFromRange(value, 1632, 1641, true, defaultSuffix);
case LIST_STYLE_TYPE.ARMENIAN:
case LIST_STYLE_TYPE.UPPER_ARMENIAN:
return createAdditiveCounter(value, 1, 9999, ARMENIAN, LIST_STYLE_TYPE.DECIMAL);
return createAdditiveCounter(
value,
1,
9999,
ARMENIAN,
LIST_STYLE_TYPE.DECIMAL,
defaultSuffix
);
case LIST_STYLE_TYPE.LOWER_ARMENIAN:
return createAdditiveCounter(
value,
1,
9999,
ARMENIAN,
LIST_STYLE_TYPE.DECIMAL
LIST_STYLE_TYPE.DECIMAL,
defaultSuffix
).toLowerCase();
case LIST_STYLE_TYPE.BENGALI:
return createCounterStyleFromRange(value, 2534, 2543, true);
return createCounterStyleFromRange(value, 2534, 2543, true, defaultSuffix);
case LIST_STYLE_TYPE.CAMBODIAN:
case LIST_STYLE_TYPE.KHMER:
return createCounterStyleFromRange(value, 6112, 6121, true);
return createCounterStyleFromRange(value, 6112, 6121, true, defaultSuffix);
case LIST_STYLE_TYPE.CJK_EARTHLY_BRANCH:
return createCounterStyleFromSymbols(value, '子丑寅卯辰巳午未申酉戌亥', '、');
return createCounterStyleFromSymbols(value, '子丑寅卯辰巳午未申酉戌亥', cjkSuffix);
case LIST_STYLE_TYPE.CJK_HEAVENLY_STEM:
return createCounterStyleFromSymbols(value, '甲乙丙丁戊己庚辛壬癸', '、');
return createCounterStyleFromSymbols(value, '甲乙丙丁戊己庚辛壬癸', cjkSuffix);
case LIST_STYLE_TYPE.CJK_IDEOGRAPHIC:
case LIST_STYLE_TYPE.TRAD_CHINESE_INFORMAL:
return createCJKCounter(
value,
'零一二三四五六七八九',
CHINESE_INFORMAL_MULTIPLIERS,
'負',
'、',
cjkSuffix,
CJK_TEN_COEFFICIENTS | CJK_TEN_HIGH_COEFFICIENTS | CJK_HUNDRED_COEFFICIENTS
);
case LIST_STYLE_TYPE.TRAD_CHINESE_FORMAL:
Expand All @@ -557,7 +580,7 @@ const createCounterText = (value: number, type: ListStyleType): string => {
'零壹貳參肆伍陸柒捌玖',
CHINESE_FORMAL_MULTIPLIERS,
'負',
'、',
cjkSuffix,
CJK_ZEROS |
CJK_TEN_COEFFICIENTS |
CJK_TEN_HIGH_COEFFICIENTS |
Expand All @@ -569,7 +592,7 @@ const createCounterText = (value: number, type: ListStyleType): string => {
'零一二三四五六七八九',
CHINESE_INFORMAL_MULTIPLIERS,
'负',
'、',
cjkSuffix,
CJK_TEN_COEFFICIENTS | CJK_TEN_HIGH_COEFFICIENTS | CJK_HUNDRED_COEFFICIENTS
);
case LIST_STYLE_TYPE.SIMP_CHINESE_FORMAL:
Expand All @@ -578,21 +601,21 @@ const createCounterText = (value: number, type: ListStyleType): string => {
'零壹贰叁肆伍陆柒捌玖',
CHINESE_FORMAL_MULTIPLIERS,
'负',
'、',
cjkSuffix,
CJK_ZEROS |
CJK_TEN_COEFFICIENTS |
CJK_TEN_HIGH_COEFFICIENTS |
CJK_HUNDRED_COEFFICIENTS
);
case LIST_STYLE_TYPE.JAPANESE_INFORMAL:
return createCJKCounter(value, '〇一二三四五六七八九', '十百千万', JAPANESE_NEGATIVE, '、', 0);
return createCJKCounter(value, '〇一二三四五六七八九', '十百千万', JAPANESE_NEGATIVE, cjkSuffix, 0);
case LIST_STYLE_TYPE.JAPANESE_FORMAL:
return createCJKCounter(
value,
'零壱弐参四伍六七八九',
'拾百千万',
JAPANESE_NEGATIVE,
'、',
cjkSuffix,
CJK_ZEROS | CJK_TEN_COEFFICIENTS | CJK_TEN_HIGH_COEFFICIENTS
);
case LIST_STYLE_TYPE.KOREAN_HANGUL_FORMAL:
Expand All @@ -601,30 +624,44 @@ const createCounterText = (value: number, type: ListStyleType): string => {
'영일이삼사오육칠팔구',
'십백천만',
KOREAN_NEGATIVE,
', ',
koreanSuffix,
CJK_ZEROS | CJK_TEN_COEFFICIENTS | CJK_TEN_HIGH_COEFFICIENTS
);
case LIST_STYLE_TYPE.KOREAN_HANJA_INFORMAL:
return createCJKCounter(value, '零一二三四五六七八九', '十百千萬', KOREAN_NEGATIVE, ', ', 0);
return createCJKCounter(value, '零一二三四五六七八九', '十百千萬', KOREAN_NEGATIVE, koreanSuffix, 0);
case LIST_STYLE_TYPE.KOREAN_HANJA_FORMAL:
return createCJKCounter(
value,
'零壹貳參四五六七八九',
'拾百千',
KOREAN_NEGATIVE,
', ',
koreanSuffix,
CJK_ZEROS | CJK_TEN_COEFFICIENTS | CJK_TEN_HIGH_COEFFICIENTS
);
case LIST_STYLE_TYPE.DEVANAGARI:
return createCounterStyleFromRange(value, 0x966, 0x96f, true);
return createCounterStyleFromRange(value, 0x966, 0x96f, true, defaultSuffix);
case LIST_STYLE_TYPE.GEORGIAN:
return createAdditiveCounter(value, 1, 19999, GEORGIAN, LIST_STYLE_TYPE.DECIMAL);
return createAdditiveCounter(
value,
1,
19999,
GEORGIAN,
LIST_STYLE_TYPE.DECIMAL,
defaultSuffix
);
case LIST_STYLE_TYPE.GUJARATI:
return createCounterStyleFromRange(value, 0xae6, 0xaef, true);
return createCounterStyleFromRange(value, 0xae6, 0xaef, true, defaultSuffix);
case LIST_STYLE_TYPE.GURMUKHI:
return createCounterStyleFromRange(value, 0xa66, 0xa6f, true);
return createCounterStyleFromRange(value, 0xa66, 0xa6f, true, defaultSuffix);
case LIST_STYLE_TYPE.HEBREW:
return createAdditiveCounter(value, 1, 10999, HEBREW, LIST_STYLE_TYPE.DECIMAL);
return createAdditiveCounter(
value,
1,
10999,
HEBREW,
LIST_STYLE_TYPE.DECIMAL,
defaultSuffix
);
case LIST_STYLE_TYPE.HIRAGANA:
return createCounterStyleFromSymbols(
value,
Expand All @@ -636,39 +673,39 @@ const createCounterText = (value: number, type: ListStyleType): string => {
'いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせす'
);
case LIST_STYLE_TYPE.KANNADA:
return createCounterStyleFromRange(value, 0xce6, 0xcef, true);
return createCounterStyleFromRange(value, 0xce6, 0xcef, true, defaultSuffix);
case LIST_STYLE_TYPE.KATAKANA:
return createCounterStyleFromSymbols(
value,
'アイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨラリルレロワヰヱヲン',
'、'
cjkSuffix
);
case LIST_STYLE_TYPE.KATAKANA_IROHA:
return createCounterStyleFromSymbols(
value,
'イロハニホヘトチリヌルヲワカヨタレソツネナラムウヰノオクヤマケフコエテアサキユメミシヱヒモセス',
'、'
cjkSuffix
);
case LIST_STYLE_TYPE.LAO:
return createCounterStyleFromRange(value, 0xed0, 0xed9, true);
return createCounterStyleFromRange(value, 0xed0, 0xed9, true, defaultSuffix);
case LIST_STYLE_TYPE.MONGOLIAN:
return createCounterStyleFromRange(value, 0x1810, 0x1819, true);
return createCounterStyleFromRange(value, 0x1810, 0x1819, true, defaultSuffix);
case LIST_STYLE_TYPE.MYANMAR:
return createCounterStyleFromRange(value, 0x1040, 0x1049, true);
return createCounterStyleFromRange(value, 0x1040, 0x1049, true, defaultSuffix);
case LIST_STYLE_TYPE.ORIYA:
return createCounterStyleFromRange(value, 0xb66, 0xb6f, true);
return createCounterStyleFromRange(value, 0xb66, 0xb6f, true, defaultSuffix);
case LIST_STYLE_TYPE.PERSIAN:
return createCounterStyleFromRange(value, 0x6f0, 0x6f9, true);
return createCounterStyleFromRange(value, 0x6f0, 0x6f9, true, defaultSuffix);
case LIST_STYLE_TYPE.TAMIL:
return createCounterStyleFromRange(value, 0xbe6, 0xbef, true);
return createCounterStyleFromRange(value, 0xbe6, 0xbef, true, defaultSuffix);
case LIST_STYLE_TYPE.TELUGU:
return createCounterStyleFromRange(value, 0xc66, 0xc6f, true);
return createCounterStyleFromRange(value, 0xc66, 0xc6f, true, defaultSuffix);
case LIST_STYLE_TYPE.THAI:
return createCounterStyleFromRange(value, 0xe50, 0xe59, true);
return createCounterStyleFromRange(value, 0xe50, 0xe59, true, defaultSuffix);
case LIST_STYLE_TYPE.TIBETAN:
return createCounterStyleFromRange(value, 0xf20, 0xf29, true);
return createCounterStyleFromRange(value, 0xf20, 0xf29, true, defaultSuffix);
case LIST_STYLE_TYPE.DECIMAL:
default:
return createCounterStyleFromRange(value, 48, 57, true);
return createCounterStyleFromRange(value, 48, 57, true, defaultSuffix);
}
};
8 changes: 6 additions & 2 deletions src/PseudoNodeContent.js
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
/* @flow */
'use strict';

import ListStyleTypeFormatter from 'liststyletype-formatter';
import {createCounterText} from './ListItem';
import {parseListStyleType} from './parsing/listStyle';

export const PSEUDO_CONTENT_ITEM_TYPE = {
TEXT: 0,
Expand Down Expand Up @@ -84,6 +85,9 @@ export const resolvePseudoContent = (
}

const tokens = parseContent(style.content);
console.log(style.content);
console.log(tokens);

const len = tokens.length;
const contentItems: Array<PseudoContentItem> = [];
let s = '';
Expand Down Expand Up @@ -332,7 +336,7 @@ const formatCounterValue = (counter, glue: ?string, format: ?string): string =>
if (i > 0) {
result += glue || '';
}
result += ListStyleTypeFormatter.format(counter[i], format || 'decimal', false);
result += createCounterText(counter[i], parseListStyleType(format || 'decimal'), false);
}

return result;
Expand Down
2 changes: 1 addition & 1 deletion src/parsing/listStyle.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -75,7 +75,7 @@ export const LIST_STYLE_TYPE = {
export type ListStylePosition = $Values<typeof LIST_STYLE_POSITION>;
export type ListStyleType = $Values<typeof LIST_STYLE_TYPE>;

const parseListStyleType = (type: string): ListStyleType => {
export const parseListStyleType = (type: string): ListStyleType => {
switch (type) {
case 'disc':
return LIST_STYLE_TYPE.DISC;
Expand Down

0 comments on commit 9046e0d

Please sign in to comment.