Created
August 20, 2019 20:56
-
-
Save kevinschaul/2b0e5c80c92493842a12b2551ea5245f to your computer and use it in GitHub Desktop.
ai2html: Demonstrating the max_width + center_html_output issue
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
<!-- Generated by ai2html v0.92.0 - 2019-08-20 16:50 --> | |
<!-- ai file: ai2html-center-max-width-test.ai --> | |
<style type='text/css' media='screen,print'> | |
#g-ai2html-center-max-width-test-box { | |
max-width:600px; | |
} | |
#g-ai2html-center-max-width-test-box, | |
#g-ai2html-center-max-width-test-box .g-artboard { | |
margin:0 auto; | |
} | |
#g-ai2html-center-max-width-test-box p { | |
margin:0; | |
} | |
.g-aiAbs { | |
position:absolute; | |
} | |
.g-aiImg { | |
position:absolute; | |
top:0; | |
display:block; | |
width:100% !important; | |
} | |
.g-aiSymbol { | |
position: absolute; | |
box-sizing: border-box; | |
} | |
.g-aiPointText p { white-space: nowrap; } | |
#g-ai2html-center-max-width-test-Artboard_1 { | |
position:relative; | |
overflow:hidden; | |
} | |
#g-ai2html-center-max-width-test-Artboard_1 p { | |
font-family:georgia,'times new roman',times,serif; | |
font-size:30px; | |
line-height:36px; | |
filter:alpha(opacity=100); | |
-ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100); | |
opacity:1; | |
letter-spacing:0em; | |
text-align:left; | |
color:rgb(0,0,0); | |
text-transform:none; | |
padding-bottom:0; | |
padding-top:0; | |
mix-blend-mode:normal; | |
font-style:normal; | |
height:auto; | |
position:static; | |
} | |
#g-ai2html-center-max-width-test-Artboard_1 .g-pstyle0 { | |
text-align:center; | |
} | |
#g-ai2html-center-max-width-test-Artboard_1_copy { | |
position:relative; | |
overflow:hidden; | |
} | |
#g-ai2html-center-max-width-test-Artboard_1_copy p { | |
font-family:georgia,'times new roman',times,serif; | |
font-size:30px; | |
line-height:36px; | |
filter:alpha(opacity=100); | |
-ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100); | |
opacity:1; | |
letter-spacing:0em; | |
text-align:left; | |
color:rgb(0,0,0); | |
text-transform:none; | |
padding-bottom:0; | |
padding-top:0; | |
mix-blend-mode:normal; | |
font-style:normal; | |
height:auto; | |
position:static; | |
} | |
#g-ai2html-center-max-width-test-Artboard_1_copy .g-pstyle0 { | |
text-align:center; | |
} | |
</style> | |
<div id="g-ai2html-center-max-width-test-box" class="ai2html"> | |
<!-- Artboard: Artboard_1 --> | |
<div id="g-ai2html-center-max-width-test-Artboard_1" class="g-artboard" style="" data-aspect-ratio="2.12" data-min-width="600"> | |
<div style="width:600px; height:282.999999999999px;"></div> | |
<img id="g-ai2html-center-max-width-test-Artboard_1-img" class="g-aiImg" alt="" src="ai2html-center-max-width-test-Artboard_1.png"/> | |
<div id="g-ai0-1" class="g-Layer_1 g-aiAbs" style="top:13.0742%;left:49.9894%;margin-left:-44.6667%;width:89.3333%;"> | |
<p class="g-pstyle0">ai2html center and max-width test</p> | |
</div> | |
</div> | |
<!-- Artboard: Artboard_1_copy --> | |
<div id="g-ai2html-center-max-width-test-Artboard_1_copy" class="g-artboard" style="max-width: 300px;max-height: 283px" data-aspect-ratio="1.06" data-min-width="0" data-max-width="599"> | |
<div style="padding: 0 0 94.3333% 0;"></div> | |
<img id="g-ai2html-center-max-width-test-Artboard_1_copy-img" class="g-aiImg" alt="" src="ai2html-center-max-width-test-Artboard_1_copy.png"/> | |
<div id="g-ai1-1" class="g-Layer_1 g-aiAbs" style="top:13.0742%;left:50%;margin-left:-43%;width:86%;"> | |
<p class="g-pstyle0">ai2html center and max-width test</p> | |
</div> | |
</div> | |
</div> | |
<script type="text/javascript"> | |
(function (containerId, opts) { | |
if (!("querySelector" in document)) return; | |
var container = document.getElementById(containerId); | |
var nameSpace = opts.namespace || ''; | |
var onResize = throttle(update, 200); | |
var waiting = !!window.IntersectionObserver; | |
var observer; | |
update(); | |
document.addEventListener("DOMContentLoaded", update); | |
window.addEventListener("resize", onResize); | |
// NYT Scoop-specific code | |
if (opts.setup) { | |
opts.setup(container).on('cleanup', cleanup); | |
} | |
function cleanup() { | |
document.removeEventListener("DOMContentLoaded", update); | |
window.removeEventListener("resize", onResize); | |
if (observer) observer.disconnect(); | |
} | |
function update() { | |
var artboards = selectChildren("." + nameSpace + "artboard[data-min-width]", container), | |
width = Math.round(container.getBoundingClientRect().width); | |
// Set artboard visibility based on container width | |
artboards.forEach(function(el) { | |
var minwidth = el.getAttribute("data-min-width"), | |
maxwidth = el.getAttribute("data-max-width"); | |
if (+minwidth <= width && (+maxwidth >= width || maxwidth === null)) { | |
if (!waiting) { | |
selectChildren("." + nameSpace + "aiImg", el).forEach(updateImgSrc); | |
} | |
el.style.display = "block"; | |
} else { | |
el.style.display = "none"; | |
} | |
}); | |
// Initialize lazy loading on first call | |
if (waiting && !observer) { | |
if (elementInView(container)) { | |
waiting = false; | |
update(); | |
} else { | |
observer = new IntersectionObserver(onIntersectionChange, {}); | |
observer.observe(container); | |
} | |
} | |
} | |
function elementInView(el) { | |
var bounds = el.getBoundingClientRect(); | |
return bounds.top < window.innerHeight && bounds.bottom > 0; | |
} | |
// Replace blank placeholder image with actual image | |
function updateImgSrc(img) { | |
var src = img.getAttribute("data-src"); | |
if (src && img.getAttribute("src") != src) { | |
img.setAttribute("src", src); | |
} | |
} | |
function onIntersectionChange(entries) { | |
if (entries.length && entries[0].isIntersecting) { | |
waiting = false; | |
observer.disconnect(); | |
observer = null; | |
update(); | |
} | |
} | |
function selectChildren(selector, parent) { | |
return parent ? Array.prototype.slice.call(parent.querySelectorAll(selector)) : []; | |
} | |
// based on underscore.js | |
function throttle(func, wait) { | |
var timeout = null, previous = 0; | |
function run() { | |
previous = Date.now(); | |
timeout = null; | |
func(); | |
} | |
return function() { | |
var remaining = wait - (Date.now() - previous); | |
if (remaining <= 0 || remaining > wait) { | |
clearTimeout(timeout); | |
run(); | |
} else if (!timeout) { | |
timeout = setTimeout(run, remaining); | |
} | |
}; | |
} | |
})("g-ai2html-center-max-width-test-box", {namespace: "g-", setup: window.setupInteractive || window.getComponent}); | |
</script> | |
<!-- End ai2html - 2019-08-20 16:50 --> |
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
<!-- Generated by ai2html v0.92.0 - 2019-08-20 16:50 --> | |
<!-- ai file: ai2html-center-max-width-test.ai --> | |
<style type='text/css' media='screen,print'> | |
#g-ai2html-center-max-width-test-box { | |
max-width:600px; | |
} | |
#g-ai2html-center-max-width-test-box .g-artboard { | |
margin:0 auto; | |
} | |
#g-ai2html-center-max-width-test-box p { | |
margin:0; | |
} | |
.g-aiAbs { | |
position:absolute; | |
} | |
.g-aiImg { | |
position:absolute; | |
top:0; | |
display:block; | |
width:100% !important; | |
} | |
.g-aiSymbol { | |
position: absolute; | |
box-sizing: border-box; | |
} | |
.g-aiPointText p { white-space: nowrap; } | |
#g-ai2html-center-max-width-test-Artboard_1 { | |
position:relative; | |
overflow:hidden; | |
} | |
#g-ai2html-center-max-width-test-Artboard_1 p { | |
font-family:georgia,'times new roman',times,serif; | |
font-size:30px; | |
line-height:36px; | |
filter:alpha(opacity=100); | |
-ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100); | |
opacity:1; | |
letter-spacing:0em; | |
text-align:left; | |
color:rgb(0,0,0); | |
text-transform:none; | |
padding-bottom:0; | |
padding-top:0; | |
mix-blend-mode:normal; | |
font-style:normal; | |
height:auto; | |
position:static; | |
} | |
#g-ai2html-center-max-width-test-Artboard_1 .g-pstyle0 { | |
text-align:center; | |
} | |
#g-ai2html-center-max-width-test-Artboard_1_copy { | |
position:relative; | |
overflow:hidden; | |
} | |
#g-ai2html-center-max-width-test-Artboard_1_copy p { | |
font-family:georgia,'times new roman',times,serif; | |
font-size:30px; | |
line-height:36px; | |
filter:alpha(opacity=100); | |
-ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100); | |
opacity:1; | |
letter-spacing:0em; | |
text-align:left; | |
color:rgb(0,0,0); | |
text-transform:none; | |
padding-bottom:0; | |
padding-top:0; | |
mix-blend-mode:normal; | |
font-style:normal; | |
height:auto; | |
position:static; | |
} | |
#g-ai2html-center-max-width-test-Artboard_1_copy .g-pstyle0 { | |
text-align:center; | |
} | |
</style> | |
<div id="g-ai2html-center-max-width-test-box" class="ai2html"> | |
<!-- Artboard: Artboard_1 --> | |
<div id="g-ai2html-center-max-width-test-Artboard_1" class="g-artboard" style="" data-aspect-ratio="2.12" data-min-width="600"> | |
<div style="width:600px; height:282.999999999999px;"></div> | |
<img id="g-ai2html-center-max-width-test-Artboard_1-img" class="g-aiImg" alt="" src="ai2html-center-max-width-test-Artboard_1.png"/> | |
<div id="g-ai0-1" class="g-Layer_1 g-aiAbs" style="top:13.0742%;left:49.9894%;margin-left:-44.6667%;width:89.3333%;"> | |
<p class="g-pstyle0">ai2html center and max-width test</p> | |
</div> | |
</div> | |
<!-- Artboard: Artboard_1_copy --> | |
<div id="g-ai2html-center-max-width-test-Artboard_1_copy" class="g-artboard" style="max-width: 300px;max-height: 283px" data-aspect-ratio="1.06" data-min-width="0" data-max-width="599"> | |
<div style="padding: 0 0 94.3333% 0;"></div> | |
<img id="g-ai2html-center-max-width-test-Artboard_1_copy-img" class="g-aiImg" alt="" src="ai2html-center-max-width-test-Artboard_1_copy.png"/> | |
<div id="g-ai1-1" class="g-Layer_1 g-aiAbs" style="top:13.0742%;left:50%;margin-left:-43%;width:86%;"> | |
<p class="g-pstyle0">ai2html center and max-width test</p> | |
</div> | |
</div> | |
</div> | |
<script type="text/javascript"> | |
(function (containerId, opts) { | |
if (!("querySelector" in document)) return; | |
var container = document.getElementById(containerId); | |
var nameSpace = opts.namespace || ''; | |
var onResize = throttle(update, 200); | |
var waiting = !!window.IntersectionObserver; | |
var observer; | |
update(); | |
document.addEventListener("DOMContentLoaded", update); | |
window.addEventListener("resize", onResize); | |
// NYT Scoop-specific code | |
if (opts.setup) { | |
opts.setup(container).on('cleanup', cleanup); | |
} | |
function cleanup() { | |
document.removeEventListener("DOMContentLoaded", update); | |
window.removeEventListener("resize", onResize); | |
if (observer) observer.disconnect(); | |
} | |
function update() { | |
var artboards = selectChildren("." + nameSpace + "artboard[data-min-width]", container), | |
width = Math.round(container.getBoundingClientRect().width); | |
// Set artboard visibility based on container width | |
artboards.forEach(function(el) { | |
var minwidth = el.getAttribute("data-min-width"), | |
maxwidth = el.getAttribute("data-max-width"); | |
if (+minwidth <= width && (+maxwidth >= width || maxwidth === null)) { | |
if (!waiting) { | |
selectChildren("." + nameSpace + "aiImg", el).forEach(updateImgSrc); | |
} | |
el.style.display = "block"; | |
} else { | |
el.style.display = "none"; | |
} | |
}); | |
// Initialize lazy loading on first call | |
if (waiting && !observer) { | |
if (elementInView(container)) { | |
waiting = false; | |
update(); | |
} else { | |
observer = new IntersectionObserver(onIntersectionChange, {}); | |
observer.observe(container); | |
} | |
} | |
} | |
function elementInView(el) { | |
var bounds = el.getBoundingClientRect(); | |
return bounds.top < window.innerHeight && bounds.bottom > 0; | |
} | |
// Replace blank placeholder image with actual image | |
function updateImgSrc(img) { | |
var src = img.getAttribute("data-src"); | |
if (src && img.getAttribute("src") != src) { | |
img.setAttribute("src", src); | |
} | |
} | |
function onIntersectionChange(entries) { | |
if (entries.length && entries[0].isIntersecting) { | |
waiting = false; | |
observer.disconnect(); | |
observer = null; | |
update(); | |
} | |
} | |
function selectChildren(selector, parent) { | |
return parent ? Array.prototype.slice.call(parent.querySelectorAll(selector)) : []; | |
} | |
// based on underscore.js | |
function throttle(func, wait) { | |
var timeout = null, previous = 0; | |
function run() { | |
previous = Date.now(); | |
timeout = null; | |
func(); | |
} | |
return function() { | |
var remaining = wait - (Date.now() - previous); | |
if (remaining <= 0 || remaining > wait) { | |
clearTimeout(timeout); | |
run(); | |
} else if (!timeout) { | |
timeout = setTimeout(run, remaining); | |
} | |
}; | |
} | |
})("g-ai2html-center-max-width-test-box", {namespace: "g-", setup: window.setupInteractive || window.getComponent}); | |
</script> | |
<!-- End ai2html - 2019-08-20 16:50 --> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment