From 07e0c4feb015d35cc10b951c1b876bd19521f8a5 Mon Sep 17 00:00:00 2001 From: Rittmeyer Balz Date: Fri, 2 Jun 2017 17:38:21 +0200 Subject: [PATCH 01/11] add setting property "characterstyles_to_classnames" to use character style names applied in Illustrator as paragraph class names in the html output --- ai2html.js | 44 ++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 44 insertions(+) diff --git a/ai2html.js b/ai2html.js index c40f15e..7094278 100644 --- a/ai2html.js +++ b/ai2html.js @@ -1662,6 +1662,9 @@ if (doc.documentColorSpace!="DocumentColorSpace.RGB") { html[2] += pStyleCss; html[2] += '\t\t\t.g-aiPtransformed p { white-space: nowrap; }\r'; + if (docSettings.characterstyles_to_classnames == 'yes') { + html[2] = ""; + } // Output html for each text frame pBar.setTitle(docArtboardName + ': Writing HTML for text blocks...'); @@ -1864,6 +1867,47 @@ if (doc.documentColorSpace!="DocumentColorSpace.RGB") { var runningChars = 0; for (var k=0;k"; + if (isNaN(thisFrame.paragraphs[k].length)) { + html[6] += " "; + } else { + textToClean = thisFrame.paragraphs[k].contents; + textToClean = straightenCurlyQuotesInsideAngleBrackets(textToClean); + cleanedText = cleanText(textToClean); + html[6] += cleanedText; + }; + html[6] += "

\r"; + runningChars += (thisFrame.paragraphs[k].characters.length)+1; + continue; + } + } else { + html[6] += "\t\t\t\t

 

\r"; + runningChars += 1; + }; + } + if (runningChars Date: Tue, 6 Jun 2017 15:35:07 +0200 Subject: [PATCH 02/11] only add div classes if characterstyles_to_classnames is disabled --- ai2html.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/ai2html.js b/ai2html.js index 7094278..0d8acb3 100644 --- a/ai2html.js +++ b/ai2html.js @@ -1761,8 +1761,10 @@ if (doc.documentColorSpace!="DocumentColorSpace.RGB") { thisFrameId = makeKeyword(thisFrame.name); }; html[6] += "\t\t\t
 

'; + } + html = '

'; + for (var j=0; j' + cleanText(range.text) + ''; + } + html += '

'; + return html; +} + function generateTextFrameHtml(paragraphs, baseStyle, pStyles, cStyles) { var html = ""; for (var i=0; i' + - generateTextFrameHtml(obj.paragraphs, baseStyle, pgStyles, charStyles) + '\r\t\t
\r'; - }); + var idPrefix = nameSpace + "ai" + getArtboardId(ab) + "-"; + var baseStyle = deriveCssStyles(frameData); + if (docSettings.characterstyles_to_classnames == 'yes') { + divs = map(frameData, function (obj, i) { + var frame = textFrames[i]; + var divId = frame.name ? makeKeyword(frame.name) : idPrefix + (i + 1); + var positionCss = getTextFrameCss(frame, abBox, obj.paragraphs); + return '\t\t
' + + generateTextFrameHtmlWithCharacterStyleClasses(obj.paragraphs, baseStyle) + '\r\t\t
\r'; + }); + } else { + var pgStyles = []; + var charStyles = []; + divs = map(frameData, function(obj, i) { + var frame = textFrames[i]; + var divId = frame.name ? makeKeyword(frame.name) : idPrefix + (i + 1); + var positionCss = getTextFrameCss(frame, abBox, obj.paragraphs); + return '\t\t
' + + generateTextFrameHtml(obj.paragraphs, baseStyle, pgStyles, charStyles) + '\r\t\t
\r'; + }); + + var allStyles = pgStyles.concat(charStyles); + cssBlocks = map(allStyles, function(obj) { + return '.' + obj.classname + ' {' + formatCss(obj.style, '\t\t') + '\t}\r'; + }); + if (divs.length > 0) { + cssBlocks.unshift('p {' + formatCss(baseStyle, '\t\t') + '\t}\r'); + } - var allStyles = pgStyles.concat(charStyles); - var cssBlocks = map(allStyles, function(obj) { - return '.' + obj.classname + ' {' + formatCss(obj.style, '\t\t') + '\t}\r'; - }); - if (divs.length > 0) { - cssBlocks.unshift('p {' + formatCss(baseStyle, '\t\t') + '\t}\r'); } + return { styles: cssBlocks, html: divs.join('') @@ -2127,6 +2178,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); @@ -2417,7 +2474,11 @@ function getTextFrameCss(thisFrame, abBox, pgData) { // TODO: consider only using pct width with wider text boxes that contain paragraphs of text styles += "width:" + formatCssPct(htmlW, abBox.width); } - return 'class="' + classes + '" style="' + styles + '"'; + if (docSettings.characterstyles_to_classnames == 'yes') { + return 'style="position:absolute;' + styles + '"'; + } else { + return 'class="' + classes + '" style="' + styles + '"'; + } } @@ -2738,6 +2799,9 @@ function generateArtboardDiv(ab, breakpoints, settings) { classnames += " " + findShowClassesForArtboard(ab, breakpoints); } html += '\t
Date: Wed, 16 Aug 2017 11:30:38 +0200 Subject: [PATCH 05/11] remove unnecessary conditional blocks --- ai2html.js | 14 +------------- 1 file changed, 1 insertion(+), 13 deletions(-) diff --git a/ai2html.js b/ai2html.js index 2e36900..2995bb4 100644 --- a/ai2html.js +++ b/ai2html.js @@ -2474,11 +2474,7 @@ function getTextFrameCss(thisFrame, abBox, pgData) { // TODO: consider only using pct width with wider text boxes that contain paragraphs of text styles += "width:" + formatCssPct(htmlW, abBox.width); } - if (docSettings.characterstyles_to_classnames == 'yes') { - return 'style="position:absolute;' + styles + '"'; - } else { - return 'class="' + classes + '" style="' + styles + '"'; - } + return 'class="' + classes + '" style="' + styles + '"'; } @@ -2799,9 +2795,6 @@ function generateArtboardDiv(ab, breakpoints, settings) { classnames += " " + findShowClassesForArtboard(ab, breakpoints); } html += '\t
Date: Wed, 16 Aug 2017 11:35:22 +0200 Subject: [PATCH 06/11] reset white spaces --- ai2html.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ai2html.js b/ai2html.js index 2995bb4..8d5357f 100644 --- a/ai2html.js +++ b/ai2html.js @@ -2840,10 +2840,10 @@ function generateArtboardCss(ab, textClasses, settings) { // Get CSS styles that are common to all generated content function generatePageCss(containerId, settings) { - var css = ""; var t2 = '\t'; var t3 = '\t\t'; + if (!!settings.max_width) { css += t2 + "#" + containerId + " {\r"; css += t3 + "max-width:" + settings.max_width + "px;\r"; From c2ef87e4148a6f841c40fb850b81bd382c68fe93 Mon Sep 17 00:00:00 2001 From: Rittmeyer Balz Date: Wed, 16 Aug 2017 11:55:33 +0200 Subject: [PATCH 07/11] reduce code by removing getCharStyleClassNames() --- ai2html.js | 28 ++++++++++------------------ 1 file changed, 10 insertions(+), 18 deletions(-) diff --git a/ai2html.js b/ai2html.js index 8d5357f..32b0d6f 100644 --- a/ai2html.js +++ b/ai2html.js @@ -1777,22 +1777,18 @@ 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; } -// Parse an AI CharacterAttributes object -function getCharStyleClassNames(c) { - var charStyleName = c.characterStyles[0].name; - return { - classNames: charStyleName != '[Normal Character Style]' ? charStyleName : '', - size: Math.round(c.size) - } -} - // p: an AI paragraph (appears to be a TextRange object with mixed-in ParagraphAttributes) // opacity: Computed opacity (0-100) of TextFrame containing this pg function getParagraphStyle(p) { @@ -1838,13 +1834,9 @@ function getParagraphRanges(p) { var segments = []; var currRange; var prev, curr, c; - for (var i=0, n=p.characters.length; i Date: Wed, 16 Aug 2017 12:20:35 +0200 Subject: [PATCH 08/11] reduce code by removing two functions --- ai2html.js | 118 +++++++++++++++++++++-------------------------------- 1 file changed, 46 insertions(+), 72 deletions(-) diff --git a/ai2html.js b/ai2html.js index 32b0d6f..fc7df82 100644 --- a/ai2html.js +++ b/ai2html.js @@ -1901,109 +1901,83 @@ 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 '

 

'; } - 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 = '

'; - } else { - html = '

'; - } - for (var j=0; j'; + if (docSettings.characterstyles_to_classnames == 'yes') { + html = '

'; + for (var j = 0; j < pData.ranges.length; j++) { + range = pData.ranges[j]; + html += '' + cleanText(range.text) + ''; } - 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 += ''; + classname = getTextStyleClass(diff, pStyles, 'pstyle'); + html = '

'; + } else { + html = '

'; + } + for (var j=0; j'; + } + html += cleanText(range.text); + if (diff) { + html += ''; + } } } html += '

'; return html; } -function generateParagraphHtmlWithCharacterStyleClasses(pData) { - var html, diff, classname, range, text; - if (pData.text.length === 0) { - return '

 

'; - } - html = '

'; - for (var j=0; j' + cleanText(range.text) + ''; - } - html += '

'; - return html; -} - function generateTextFrameHtml(paragraphs, baseStyle, pStyles, cStyles) { var html = ""; - for (var i=0; i' + - generateTextFrameHtmlWithCharacterStyleClasses(obj.paragraphs, baseStyle) + '\r\t\t
\r'; - }); - } else { - var pgStyles = []; - var charStyles = []; - divs = map(frameData, function(obj, i) { - var frame = textFrames[i]; - var divId = frame.name ? makeKeyword(frame.name) : idPrefix + (i + 1); - var positionCss = getTextFrameCss(frame, abBox, obj.paragraphs); - return '\t\t
' + - generateTextFrameHtml(obj.paragraphs, baseStyle, pgStyles, charStyles) + '\r\t\t
\r'; - }); - - var allStyles = pgStyles.concat(charStyles); - cssBlocks = map(allStyles, function(obj) { - return '.' + obj.classname + ' {' + formatCss(obj.style, '\t\t') + '\t}\r'; - }); - if (divs.length > 0) { - cssBlocks.unshift('p {' + formatCss(baseStyle, '\t\t') + '\t}\r'); - } + var idPrefix = nameSpace + "ai" + getArtboardId(ab) + "-"; + var abBox = convertAiBounds(ab.artboardRect); + var divs = map(frameData, function (obj, i) { + var frame = textFrames[i]; + var divId = frame.name ? makeKeyword(frame.name) : idPrefix + (i + 1); + var positionCss = getTextFrameCss(frame, abBox, obj.paragraphs); + return '\t\t
' + + generateTextFrameHtml(obj.paragraphs, baseStyle, pgStyles, charStyles) + '\r\t\t
\r'; + }); + var allStyles = pgStyles.concat(charStyles); + var cssBlocks = map(allStyles, function (obj) { + return '.' + obj.classname + ' {' + formatCss(obj.style, '\t\t') + '\t}\r'; + }); + if (divs.length > 0) { + cssBlocks.unshift('p {' + formatCss(baseStyle, '\t\t') + '\t}\r'); } - return { styles: cssBlocks, html: divs.join('') From 91ee04a764b38d5c26955db960789be8d2e228ed Mon Sep 17 00:00:00 2001 From: Rittmeyer Balz Date: Wed, 16 Aug 2017 12:23:35 +0200 Subject: [PATCH 09/11] reset whitespaces --- ai2html.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ai2html.js b/ai2html.js index fc7df82..41b6f57 100644 --- a/ai2html.js +++ b/ai2html.js @@ -1834,7 +1834,7 @@ function getParagraphRanges(p) { var segments = []; var currRange; var prev, curr, c; - for (var i = 0, n = p.characters.length; i < n; i++) { + for (var i=0, n=p.characters.length; i Date: Wed, 16 Aug 2017 12:26:59 +0200 Subject: [PATCH 10/11] reset whitespace --- ai2html.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/ai2html.js b/ai2html.js index 41b6f57..5979bc9 100644 --- a/ai2html.js +++ b/ai2html.js @@ -1943,7 +1943,7 @@ function generateParagraphHtml(pData, baseStyle, pStyles, cStyles) { function generateTextFrameHtml(paragraphs, baseStyle, pStyles, cStyles) { var html = ""; - for (var i = 0; i < paragraphs.length; i++) { + for (var i=0; i' + - generateTextFrameHtml(obj.paragraphs, baseStyle, pgStyles, charStyles) + '\r\t\t
\r'; + generateTextFrameHtml(obj.paragraphs, baseStyle, pgStyles, charStyles) + '\r\t\t\r'; }); var allStyles = pgStyles.concat(charStyles); From e7018e0df4725ac34349830dba2a2858d7a589d8 Mon Sep 17 00:00:00 2001 From: Rittmeyer Balz Date: Wed, 16 Aug 2017 12:29:20 +0200 Subject: [PATCH 11/11] reset whitespaces --- ai2html.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/ai2html.js b/ai2html.js index 5979bc9..23f7e1b 100644 --- a/ai2html.js +++ b/ai2html.js @@ -1949,7 +1949,6 @@ function generateTextFrameHtml(paragraphs, baseStyle, pStyles, cStyles) { return html; } - // Convert a collection of TextFrames to HTML and CSS function convertTextFrames(textFrames, ab) { var frameData = map(textFrames, function(frame, i) { @@ -1971,7 +1970,7 @@ function convertTextFrames(textFrames, ab) { }); var allStyles = pgStyles.concat(charStyles); - var cssBlocks = map(allStyles, function (obj) { + var cssBlocks = map(allStyles, function(obj) { return '.' + obj.classname + ' {' + formatCss(obj.style, '\t\t') + '\t}\r'; }); if (divs.length > 0) {