<?xml version="1.0" encoding="utf-8"?>
<configuration version="1" date="2018-03-28 16:24:52" synergyVersion="3.15">
    <objects version="1" date="2018-03-28 16:24:52" synergyVersion="3.15">
        <customComponent code="progressUltimate"
            name="progressUltimate by [0x00034]" use_in_forms="true">
            <javascript>/*
    Example code:
        model.setValue({
            bar:54,                                             // Значение прогресс-бара
            bar1:54,                                            // Значение 1-ого прогресс-бара
            bar2:46,                                            // Значение 2-ого прогресс-бара
            expired:'bar1',                                     // Просроченный прогресс-бар
            doubleBar:false,                                    // Отключить двойной прогресс-бар
            config:{                                            // Конфигурация прогресс-бара
                bar:'#b3e062',                                  // Цвет прогресс-бара
                bar1:'#b3e062',                                 // Цвет 1-ого прогресс-бара
                bar2:'#ffe465',                                 // Цвет 2-ого прогресс-бара
                expired:'#e66868',                              // Цвет просроченного прогресс-бара
                background:'#ebebeb',                           // Фон самого прогресс-бара
                fontColor:'#fff',                               // Цвет текста
                fontSize:'12px',                                // Размер текста
                fontFamily:'Verdana',                           // Шрифт текста
                fontShadow:'1px 1px 2px black, 0 0 1em black',  // Тень текста
                template:'Завершено: {$1}%'                     // HTML - изменения текста. {$1} - Прогресс-бар первый, {$2} - Прогресс-бар второй
            }
        });
    
    Code by yandexphp
 */
var barDiv = $(view.container).find("[innerId='progressBar']");
var text = $(view.container).find("[innerId='progressInfo']");
var colorConfig = {bar:'#b3e062',bar1:'#b3e062',bar2:'#ffe465',expired:'#e66868',fontColor:'#000'};
model.getAsfData = function (blockNumber) {
    if(model.getValue()){
        var valueObject = JSON.stringify(model.getValue());
        return AS.FORMS.ASFDataUtils.getBaseAsfData(model.asfProperty, blockNumber, valueObject, valueObject);
    }else{
        return AS.FORMS.ASFDataUtils.getBaseAsfData(model.asfProperty, blockNumber);
    }
};
model.setAsfData = function(asfData){
    if(!asfData || !asfData.value) return;
    model.setValue(JSON.parse(asfData.value));
};
view.updateValueFromModel = function(){
    var val = model.getValue();
    if(!val) return;
    if(val.hasOwnProperty('doubleBar') &amp;&amp; !val.doubleBar){
        var bar = $('&lt;div style="width: 0%;" innerId="progress"&gt;&lt;/div&gt;');
        barDiv.prepend(bar);
        bar = $(view.container).find("[innerId='progress']");
        var pos = Number.isInteger(parseInt(val.bar)) ? val.bar : 0;
        var colorProgress = colorConfig.bar;
        if(val.hasOwnProperty('expired') &amp;&amp; val.expired == 'bar') colorProgress = colorConfig.expired;
        if(val.hasOwnProperty('config') &amp;&amp; val.config.hasOwnProperty('bar')){
            if(val.hasOwnProperty('expired') &amp;&amp; val.config.hasOwnProperty('expired') &amp;&amp; val.expired == 'bar'){
                colorProgress = val.config.expired;
            }else{
                colorProgress = val.config.bar;
            }
        }
        $(bar).css({
            'width': pos + '%',
            'height': '100%',
            'background': colorProgress
        });
        var fontColor = colorConfig.fontColor;
        if(val.hasOwnProperty('config') &amp;&amp; val.config.hasOwnProperty('fontColor')) fontColor = val.config.fontColor;
        $(text).css('color',fontColor);
        if(val.hasOwnProperty('config') &amp;&amp; val.config.hasOwnProperty('template')){
            var htm = val.config.template.replace('{$1}',pos);
            $(text).html(htm);
        }else{
            $(text).html(pos + '%');
        }
    }else{
        var bar1 = $('&lt;div class="progressPosition" style="width: 0%;" innerId="progress1"&gt;&lt;/div&gt;');
        var bar2 = $('&lt;div class="progressPosition" style="width: 0%;" innerId="progress2"&gt;&lt;/div&gt;');
        barDiv.prepend(bar1).prepend(bar2);
        bar1 = $(view.container).find("[innerId='progress1']");
        bar2 = $(view.container).find("[innerId='progress2']");
        var pos1 = Number.isInteger(parseInt(val.bar1)) ? val.bar1 : 0;
        var pos2 = Number.isInteger(parseInt(val.bar2)) ? val.bar2 : 0;
        var colorBar1 = colorConfig.bar1;
        if(val.hasOwnProperty('config') &amp;&amp; val.config.hasOwnProperty('bar1')) if(val.hasOwnProperty('expired') &amp;&amp; val.expired != 'bar1' || !val.hasOwnProperty('expired')) colorBar1 = val.config.bar1;
        var colorBar2 = colorConfig.bar2;
        if(val.hasOwnProperty('config') &amp;&amp; val.config.hasOwnProperty('bar2')) if(val.hasOwnProperty('expired') &amp;&amp; val.expired != 'bar2' || !val.hasOwnProperty('expired')) colorBar2 = val.config.bar2;
        if(val.hasOwnProperty('expired')){
            switch(val.expired){
                case 'bar1': colorBar1 = (val.hasOwnProperty('config') &amp;&amp; val.config.hasOwnProperty('expired') ? val.config.expired : colorConfig.expired); $(bar1).addClass('expired'); break;
                case 'bar2': colorBar2 = (val.hasOwnProperty('config') &amp;&amp; val.config.hasOwnProperty('expired') ? val.config.expired : colorConfig.expired); $(bar2).addClass('expired'); break;
            }
        }else{
            if($(bar1).has('.expired')) $(bar1).removeClass('expired').removeAttr('style');
            if($(bar2).has('.expired')) $(bar2).removeClass('expired').removeAttr('style');
        }
        $(bar1).css({
            'width': pos1 + '%',
            'background':colorBar1
        });
        $(bar2).css({
            'width':pos2 + '%',
            'background':colorBar2
        });
        var fontColor = colorConfig.fontColor;
        if(val.hasOwnProperty('config') &amp;&amp; val.config.hasOwnProperty('fontColor')) fontColor = val.config.fontColor;
        $(text).css('color',fontColor);
        if(val.hasOwnProperty('config') &amp;&amp; val.config.hasOwnProperty('template')){
            var htm = val.config.template.replace('{$1}',pos1).replace('{$2}',pos2);
            $(text).html(htm);
        }else{
            $(text).html(pos1 + '% / ' + pos2 + '%');
        }
    }
    if(val.hasOwnProperty('config') &amp;&amp; val.config.hasOwnProperty('fontShadow')) $(text).css('text-shadow',val.config.fontShadow);
    if(val.hasOwnProperty('config') &amp;&amp; val.config.hasOwnProperty('fontSize')) $(text).css('font-size',val.config.fontSize);
    if(val.hasOwnProperty('config') &amp;&amp; val.config.hasOwnProperty('fontFamily')) $(text).css('font-family',val.config.fontFamily);
    if(val.hasOwnProperty('config') &amp;&amp; val.config.hasOwnProperty('background')) $(barDiv).css('background-color',val.config.background);
};
view.updateValueFromModel();
            </javascript>
            <html>&lt;style&gt;
    .progress-bar{
        position: relative;
        min-width: calc(100%);
        height: 20px;
        font-family: DroidSans;
        font-size: 14px;
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        background-color: #ebebeb;
        overflow: hidden;
        border: 1px solid #afafaf;
        border-radius: 3px;
        }
    .progress-bar.progressVisible .progressPosition:first-child {
        visibility: visible;
        }
    .progress-bar .progressPosition:first-child {
        background-color: #ffe465;
        bottom: 0;
        height: 50%;
        visibility: hidden;
        }
    .progressPosition {
        position: absolute;
        left: 0;
        }
    .progress-bar.progressVisible .progressPosition+.progressPosition {
        height: 50%;
        }
    .progress-bar .progressPosition+.progressPosition {
        background-color: #b3e062;
        top: 0;
        height: 100%;
        }
    .progressPosition {
        position: absolute;
        left: 0;
        }
    .progress-bar span {
        position: absolute;
        display: inline-block;
        text-align: center;
        left: 0;
        top: 0;
        width: 100%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        }
    #expired{
        background-color: #e66868;
        }
&lt;/style&gt;
&lt;div class="progress-bar progressVisible" innerId='progressBar'&gt;&lt;span innerId="progressInfo"&gt;&lt;/span&gt;&lt;/div&gt;
        </html>
        </customComponent>
    </objects>
    <dependencies/>
</configuration>
