<!--
***********************************************************************************
* Widget ZP / Widgets fuer Zeta Producer
* <$= article.widgetName $>
* Mario Gross / widget-zp.de
***********************************************************************************
-->
<$=system.partial("article-begin.html")$>

<$
var openImgInLightbox = parseInt(article.value("openImgInLightbox", "1"));
var size = article.value("size", "24");
var firstWidth = parseInt(article.value("first-svg-br", "2"));
var firstSvgX = 12 - (firstWidth / 2); /* Der x Abstand des ersten svg (vom ul) */

/* Colors */
var mainColor = encodeURIComponent(article.value("mainColor", "#0371df"));
var iconColor = encodeURIComponent(article.value("iconColor", "transparent"));

/* SVGs */
var SVGS = {
    "disk":  "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' baseProfile='full' width='24' height='24' viewBox='0 0 24.00 24.00' enable-background='new 0 0 24.00 24.00' xml:space='preserve'%3E%3Cellipse fill='" + mainColor + "' cx='12' cy='12' rx='12' ry='12'/%3E%3Cellipse fill='" + iconColor + "' cx='12' cy='12' rx='5' ry='5'/%3E%3C/svg%3E%0A",
    "punkt": "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' baseProfile='full' width='24' height='24' transform='scale (0.6)' viewBox='0 0 24.00 24.00' enable-background='new 0 0 24.00 24.00' xml:space='preserve'%3E%3Cellipse fill='" + mainColor + "' cx='12' cy='12' rx='12' ry='12'/%3E%3Cellipse fill='" + mainColor + "' cx='12' cy='12' rx='5' ry='5'/%3E%3C/svg%3E%0A",
    "sanduhr": "data:image/svg+xml,%3Csvg clip-rule='evenodd' fill-rule='evenodd' height='24' image-rendering='optimizeQuality' shape-rendering='geometricPrecision' text-rendering='geometricPrecision' viewBox='0 0 173.397 173.397' width='24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='Layer_x0020_1'%3E%3Ccircle cx='86.699' cy='86.699' fill='" + mainColor + "' r='84.667'/%3E%3Cg id='_394703512' fill='" + iconColor + "'%3E%3Cpath id='_394703704' d='m120.686 41.0577h-6.0477v14.539c0 3.6617-.7062 7.1649-1.9878 10.379-18.9201 5.4588-36.6664 4.0103-53.2387-4.3453-.4275-1.9449-.6533-3.9639-.6533-6.0337v-14.539h-6.0477v14.539c0 9.3771 3.8227 17.9056 9.9815 24.0918 6.1635 6.1911 14.6616 10.034 24.006 10.034h.0002c9.3444 0 17.8425-3.8429 24.006-10.034 6.1587-6.1862 9.9815-14.7148 9.9815-24.0918zm-55.4866 32.4283-.0487-.0588c-.0602-.0732-.1199-.147-.1794-.2208l-.0614-.0767' fill-rule='nonzero'/%3E%3Cpath id='_394703560' d='m120.686 132.339v-14.539c0-9.377-3.8228-17.9056-9.9815-24.0918-6.1635-6.1911-14.6616-10.034-24.006-10.034h-.0002c-9.3444 0-17.8425 3.8429-24.006 10.034-6.1588 6.1862-9.9815 14.7147-9.9815 24.0918v14.539zm-61.9275-4.7198v-9.8192c0-7.7288 3.1442-14.7515 8.2097-19.8395 5.0606-5.0833 12.0446-8.2385 19.7301-8.2385h.0002c7.6855 0 14.6695 3.1552 19.7301 8.2385 5.0654 5.088 8.2097 12.1107 8.2097 19.8395v9.819c-10.18-9.8363-27.8915-11.8131-27.9398-20.9147 0-.0012 0-.0023 0-.0036-.0437 9.1048-17.7587 11.0808-27.94 20.9185z' fill-rule='nonzero'/%3E%3Crect id='_394703416' height='9.997' rx='4.999' width='81.833' x='45.782' y='32.27'/%3E%3Crect id='_394703680' height='9.997' rx='4.999' width='81.833' x='45.782' y='131.13'/%3E%3Cg fill-rule='nonzero'%3E%3Cpath id='_394703656' d='m88.2105 93.4194c0-.835-.677-1.5119-1.512-1.5119s-1.5119.6769-1.5119 1.5119v2.9487c0 .835.6769 1.5119 1.5119 1.5119s1.512-.6769 1.512-1.5119z'/%3E%3Cpath id='_394703344' d='m88.2105 100.657c0-.835-.677-1.5119-1.512-1.5119s-1.5119.6769-1.5119 1.5119v2.9487c0 .835.6769 1.512 1.5119 1.512s1.512-.677 1.512-1.512z'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E",
    "sonne": "data:image/svg+xml,%3Csvg enable-background='new 0 0 24 24' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='12' cy='12' fill='" + mainColor + "' r='12'/%3E%3Cpath d='m13.6 11.2h-.8v-.8c0-.5-.3-.8-.8-.8s-.8.3-.8.8v.8h-.8c-.5 0-.8.3-.8.8s.3.8.8.8h.8v.8c0 .5.3.8.8.8s.8-.3.8-.8v-.8h.8c.5 0 .8-.3.8-.8s-.4-.8-.8-.8zm6.2.2-1.9-1.8v-2.7c0-.5-.3-.8-.8-.8h-2.6l-1.8-1.8c-.3-.3-.8-.3-1.1 0l-2 1.8h-2.7c-.5 0-.8.3-.8.8v2.7l-1.8 1.8c-.3.3-.3.8 0 1.1l1.8 1.8v2.7c0 .5.3.8.8.8h2.7l1.8 1.9c.3.3.8.3 1.1 0l1.8-1.9h2.7c.5 0 .8-.3.8-.8v-2.6l1.9-1.8c.4-.4.4-.8.1-1.2zm-3.3 2.1c-.2.2-.2.3-.2.6v2.2h-2.2c-.2 0-.4.1-.6.2l-1.5 1.6-1.5-1.5c-.2-.2-.3-.2-.6-.2h-2.2v-2.2c0-.2-.1-.4-.2-.6l-1.6-1.6 1.5-1.5c.2-.2.2-.3.2-.6v-2.2h2.2c.2 0 .4-.1.6-.2l1.6-1.6 1.5 1.5c.2.2.3.2.6.2h2.2v2.2c0 .2.1.4.2.6l1.5 1.5z' fill='" + iconColor + "'/%3E%3C/svg%3E",
    "stern": "data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3E%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' baseProfile='full' width='24' height='24' viewBox='0 0 24.00 24.00' enable-background='new 0 0 24.00 24.00' xml:space='preserve'%3E%3Cellipse fill='" + mainColor + "' fill-opacity='1' stroke-width='0.2' stroke-linejoin='round' cx='12' cy='12' rx='12' ry='12'/%3E%3Cpath fill='" + iconColor + "' fill-opacity='1' stroke-width='0.2' stroke-linejoin='round' d='M 12,20L 13.8706,15.24L 18.9282,16L 15.7412,12L 18.9282,8L 13.8706,8.76L 12,4L 10.1294,8.76L 5.0718,8L 8.25877,12L 5.0718,16L 10.1294,15.24L 12,20 Z '/%3E%3C/svg%3E%0A"
};

var FIRST = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' baseProfile='full' width='24' height='1' xml:space='preserve'%3E%3Crect x='" + firstSvgX + "' y='0' fill='" + mainColor + "' width='" + firstWidth + "' height='1'/%3E%3C/svg%3E";

var selectedSvg = SVGS[article.value("svg-layout")];
if (isNull(selectedSvg) || selectedSvg == "") {
    selectedSvg = SVGS["disk"];
}

/* CSS for selected icon */
var headstyle = "#wzp_timeline" + article.id + ".wzp-timeline li{";
    headstyle += "--bg: url(\"" + selectedSvg + "\")";
headstyle += "}";
system.addHtmlHeadElement("<st" + "yle>\n" + headstyle + "\n</st" + "yle>");firstSvgX
$>

<ul class="wzp-timeline wzp-timeline-animate wzp-timeline_<$= article.value("typ-sp") $>" id="wzp_timeline<$= article.id $>" style="background-image:url(&quot;<$= FIRST $>&quot;); padding-left:0; --wzp-timeline-size: <$= size $>px">
<$
for (var i = 1; i <= article.value("header-count"); i++){
    var TEXT = article.value("text-" + i);
    if (isNull(TEXT)){
        continue;
    }
    
    var POSITION = article.value("pos-" + i, "");
    var BG = "./assets/wzp-timeline-svg/" + article.value("svg-layout") + "-" + article.value("svg-col") +".svg";
    var img =  project.getImage(article.value("bg-" + i));
    var cssClass = "";
    var attributes = "";
    
    if (!isNull(img)) {
        img.ensureContentCopy(article, parseInt(size) * 2);
        BG = img.contentCopyPath;
        
        attributes += "style=\"--bg: url('../" + BG + "')\"";
    
        if (openImgInLightbox) {
            var alt = system.htmlEncode(system.removeHtmlTags(img.altText));
            cssClass += "wzp-timeline--hasImg";
            if (!isNull(alt) && alt != "") {
                attributes += "data-alt=\"" + alt + "\"";
            }
            attributes += "data-src=\"" + img.workingCopyPath + "\"";
        }
    }
$>
    <li class="<$= cssClass $>" <$= attributes $>>
        <div class="wzp-timeline_<$= POSITION $>"><$= TEXT $></div>
    </li>
<$ } $>
</ul>

<$=system.partial("article-end.html")$>