Skip to content

Allow class name compilation on the basis of character styles (applied in Illustrator) #66

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 12 commits into
base: master
Choose a base branch
from
Open

Allow class name compilation on the basis of character styles (applied in Illustrator) #66

Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
07e0c4f
add setting property "characterstyles_to_classnames" to use character…
blzzz Jun 2, 2017
3e26fe8
only add div classes if characterstyles_to_classnames is disabled
blzzz Jun 6, 2017
8afb3d7
define `characterstyles_to_classnames` property in base settings
blzzz Jun 8, 2017
432bc8c
merge master branch to sync with upstream
blzzz Aug 15, 2017
3b9fe36
resolve conflicts
blzzz Aug 15, 2017
aa48cc4
remove unnecessary conditional blocks
blzzz Aug 16, 2017
f920e30
reset white spaces
blzzz Aug 16, 2017
c2ef87e
reduce code by removing getCharStyleClassNames()
blzzz Aug 16, 2017
7817afa
reduce code by removing two functions
blzzz Aug 16, 2017
91ee04a
reset whitespaces
blzzz Aug 16, 2017
5e7ad85
reset whitespace
blzzz Aug 16, 2017
e7018e0
reset whitespaces
blzzz Aug 16, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
68 changes: 45 additions & 23 deletions ai2html.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -104,7 +104,8 @@ var nytBaseSettings = {
scoop_asset_id: {defaultValue: "", includeInSettingsBlock: true, includeInConfigFile: true, useQuoteMarksInConfigFile: false, inputType: "text", possibleValues: "", notes: ""},
scoop_username: {defaultValue: "", includeInSettingsBlock: true, includeInConfigFile: true, useQuoteMarksInConfigFile: false, inputType: "text", possibleValues: "", notes: ""},
scoop_slug: {defaultValue: "", includeInSettingsBlock: true, includeInConfigFile: true, useQuoteMarksInConfigFile: false, inputType: "text", possibleValues: "", notes: ""},
scoop_external_edit_key: {defaultValue: "", includeInSettingsBlock: true, includeInConfigFile: true, useQuoteMarksInConfigFile: false, inputType: "text", possibleValues: "", notes: ""}
scoop_external_edit_key: {defaultValue: "", includeInSettingsBlock: true, includeInConfigFile: true, useQuoteMarksInConfigFile: false, inputType: "text", possibleValues: "", notes: ""},
characterstyles_to_classnames: { defaultValue: "no", includeInSettingsBlock: false, includeInConfigFile: false, useQuoteMarksInConfigFile: false, inputType: "yesNo", possibleValues: "", notes: "Set this to “yes” if you want character styles applied in Illustrator to become paragraph class names." }
};

var defaultBaseSettings = {
Expand Down Expand Up @@ -156,7 +157,8 @@ var defaultBaseSettings = {
scoop_asset_id: {defaultValue: "", includeInSettingsBlock: false, includeInConfigFile: false, useQuoteMarksInConfigFile: false, inputType: "text", possibleValues: "", notes: ""},
scoop_username: {defaultValue: "", includeInSettingsBlock: false, includeInConfigFile: false, useQuoteMarksInConfigFile: false, inputType: "text", possibleValues: "", notes: ""},
scoop_slug: {defaultValue: "", includeInSettingsBlock: false, includeInConfigFile: false, useQuoteMarksInConfigFile: false, inputType: "text", possibleValues: "", notes: ""},
scoop_external_edit_key: {defaultValue: "", includeInSettingsBlock: false, includeInConfigFile: false, useQuoteMarksInConfigFile: false, inputType: "text", possibleValues: "", notes: ""}
scoop_external_edit_key: {defaultValue: "", includeInSettingsBlock: false, includeInConfigFile: false, useQuoteMarksInConfigFile: false, inputType: "text", possibleValues: "", notes: ""},
characterstyles_to_classnames: { defaultValue: "no", includeInSettingsBlock: false, includeInConfigFile: false, useQuoteMarksInConfigFile: false, inputType: "yesNo", possibleValues: "", notes: "Set this to “yes” if you want character styles applied in Illustrator to become paragraph class names." }
};

// End of settings blocks copied from Google Spreadsheet.
Expand Down Expand Up @@ -1775,10 +1777,15 @@ function convertAiColor(color, opacity) {
function getCharStyle(c) {
var o = convertAiColor(c.fillColor);
var caps = String(c.capitalization);
o.aifont = c.textFont.name;
o.size = Math.round(c.size);
o.capitalization = caps == 'FontCapsOption.NORMALCAPS' ? '' : caps;
o.tracking = c.tracking
if (docSettings.characterstyles_to_classnames == 'yes') {
var firstCharStyleName = c.characterStyles.length > 0 ? c.characterStyles[0].name : '';
o.classNames = firstCharStyleName && firstCharStyleName != '[Normal Character Style]' ? firstCharStyleName : '';
} else {
o.aifont = c.textFont.name;
o.capitalization = caps == 'FontCapsOption.NORMALCAPS' ? '' : caps;
o.tracking = c.tracking
}
return o;
}

Expand Down Expand Up @@ -1894,31 +1901,40 @@ function cleanHtmlTags(str) {
}

function generateParagraphHtml(pData, baseStyle, pStyles, cStyles) {
var html, diff, classname, range, text;
var html, range;
if (pData.text.length === 0) { // empty pg
// TODO: Calculate the height of empty paragraphs and generate
// CSS to preserve this height (not supported by Illustrator API)
return '<p>&nbsp;</p>';
}
diff = objectSubtract(pData.cssStyle, baseStyle);
// Give the pg a class, if it has a different style than the base pg class
if (diff) {
classname = getTextStyleClass(diff, pStyles, 'pstyle');
html = '<p class="' + classname + '">';
} else {
html = '<p>';
}
for (var j=0; j<pData.ranges.length; j++) {
range = pData.ranges[j];
range.text = cleanHtmlTags(range.text);
diff = objectSubtract(range.cssStyle, pData.cssStyle);
if (diff) {
classname = getTextStyleClass(diff, cStyles, 'cstyle');
html += '<span class="' + classname + '">';
if (docSettings.characterstyles_to_classnames == 'yes') {
html = '<p style="text-align: ' + pData.cssStyle['text-align'] + '">';
for (var j = 0; j < pData.ranges.length; j++) {
range = pData.ranges[j];
html += '<span class="' + range.aiStyle.classNames + '">' + cleanText(range.text) + '</span>';
}
html += cleanText(range.text);
} else {
var diff, classname;
diff = objectSubtract(pData.cssStyle, baseStyle);
// Give the pg a class, if it has a different style than the base pg class
if (diff) {
html += '</span>';
classname = getTextStyleClass(diff, pStyles, 'pstyle');
html = '<p class="' + classname + '">';
} else {
html = '<p>';
}
for (var j=0; j<pData.ranges.length; j++) {
range = pData.ranges[j];
range.text = cleanHtmlTags(range.text);
diff = objectSubtract(range.cssStyle, pData.cssStyle);
if (diff) {
classname = getTextStyleClass(diff, cStyles, 'cstyle');
html += '<span class="' + classname + '">';
}
html += cleanText(range.text);
if (diff) {
html += '</span>';
}
}
}
html += '</p>';
Expand Down Expand Up @@ -2127,6 +2143,12 @@ function getBlendMode(obj) {
// convert an object containing parsed AI text styles to an object containing CSS style properties
function convertAiTextStyle(aiStyle) {
var cssStyle = {};
if (docSettings.characterstyles_to_classnames == 'yes') {
if (aiStyle.justification && (tmp = getJustificationCss(aiStyle.justification))) {
cssStyle["text-align"] = tmp;
}
return cssStyle;
}
var fontInfo, tmp;
if (aiStyle.aifont) {
fontInfo = findFontInfo(aiStyle.aifont);
Expand Down