Skip to content

synergy-components
synergy-components
Commit 34c962ff authored by Sergey Antonovich's avatar Sergey Antonovich 🇯🇵
Browse files
Options

progress-bar-ultimate.conf

parent 8fe53125
Show whitespace changes
Inline Side-by-side
Showing with 181 additions and 0 deletions
form-cmp/progress-bar-ultimate.conf.xml 0 → 100644
View file @ 34c962ff
<?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>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment