vendor/bait/poll-bundle/Resources/views/Poll/poll_results.html.twig line 1

Open in your IDE?
  1. {% include 'BaitPollBundle:Poll:poll.html.twig' %}
  2. {% if poll.displayType == 'onclick' and answerSaved is not defined %}
  3. <section style="display:none" class="poll-showhide" data-pollid="{{poll.id}}">
  4. {% endif %}
  5. {% if ongoingResultAnswers is defined %}
  6.     {% for question in poll.questions %}
  7.         {% if ongoingResultQuestions[question.id] is defined %}
  8.             <canvas id="{{ question.id }}" style="margin-top: 30px"></canvas>
  9.             <component is="script">
  10.                 var ctx = document.getElementById('{{ question.id }}').getContext('2d');
  11.                 var bodyStyle = getComputedStyle(document.body);
  12.                 var topBarStyle = getComputedStyle(document.querySelector('#top-bar'));
  13.                 var fontFamily = bodyStyle.getPropertyValue('font-family');
  14.                 var fontSize = bodyStyle.getPropertyValue('font-size');
  15.                 var color = bodyStyle.getPropertyValue('color');
  16.                 var webColor = window.location.href.includes('funradio') ? 'rgb(229, 0, 105)' : 'rgb(124, 194, 66)'; // background color for Funradio or Birdie
  17.                 var backgroundColor = topBarStyle.getPropertyValue('background-color') === 'rgba(0, 0, 0, 0)' ? webColor : topBarStyle.getPropertyValue('background-color');
  18.                 var labels = '{% for answer in question.answers %}{{answer.answer}};{% endfor %}'.slice(0, -1);
  19.                 var data = '{% for answer in question.answers %}{{ ongoingResultAnswers[answer.id]|default(0) }};{% endfor %}'.slice(0, -1);
  21.                 {# per-site colors #}
  22.                 var defaultColors = [
  23.                     backgroundColor,
  24.                     backgroundColor.replace(")", ", 0.8)"),
  25.                     backgroundColor.replace(")", ", 0.6)"),
  26.                     backgroundColor.replace(")", ", 0.4)"),
  27.                     backgroundColor.replace(")", ", 0.2)")
  28.                 ];
  30.                 {# init with DB values #}
  31.                 var chartColors = [
  32.                     {%- for answer in question.answers -%}
  33.                         {%- if answer.answerColor is not empty -%}
  34.                             '{{ answer.answerColor }}'
  35.                         {%- else -%}
  36.                             null
  37.                         {%- endif -%}
  38.                         {%- if not loop.last -%},{%- endif -%}
  39.                     {%- endfor -%}
  40.                 ];
  42.                 {# merge custom colors with per-site fallbacks #}
  43.                 for (let i = 0; i < chartColors.length; i++) {
  44.                     chartColors[i] = (chartColors[i] !== null) ? chartColors[i] : defaultColors.shift();
  45.                 }
  47.                 Chart.defaults.global.defaultFontFamily = fontFamily;
  48.                 Chart.defaults.global.defaultFontSize = Number(fontSize.slice(0, 2));
  49.                 Chart.defaults.global.defaultFontColor = color;
  51.                 var chart = new Chart(ctx, {
  52.                     type: 'pie',
  53.                     data: {
  54.                         labels: labels.split(';'),
  55.                         datasets: [{
  56.                             label: '{{ question.title }}',
  57.                             backgroundColor: chartColors,
  58.                             data: data.split(';')
  59.                         }]
  60.                     },
  61.                     options: {
  62.                         title: {
  63.                             display: true,
  64.                             text: '{{question.title}}'.replace(/&quot;/g, '"')
  65.                         },
  66.                         tooltips: {
  67.                             callbacks: {
  68.                                 label: function(tooltipItem, data) {
  69.                                     var totalAnswers = {{ongoingResultQuestions[question.id]}};
  70.                                     var itemValue = Number(data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index]);
  71.                                     var percentValue = (Math.round((itemValue/totalAnswers*100)*10)/10).toFixed(1) + '%';
  72.                                     var label = data.labels[tooltipItem.index] + ': ' + percentValue;
  74.                                     return label;
  75.                                 }
  76.                             }
  77.                     }
  78.                     }
  79.                 });
  80.             </component>
  81.         {% endif %}
  82.     {% endfor %}
  83. {% endif %}
  84. {% if poll.displayType == 'onclick' and answerSaved is not defined %}
  85. </section>
  86. {% endif %}
  87. {% if poll.multiEntry and poll.multiEntryInterval == 'without_limit' %}
  88.     <component is="script">
  89.         function onloadCallbackId{{poll.id}}() {
  90.             grecaptcha.render("recaptcha-{{poll.id}}", {
  91.                 'sitekey': "{{recaptchaSiteKey}}",
  92.                 'callback': function() { recaptchaSuccessId{{poll.id}}({{poll.id}}) },
  93.                 'expired-callback': function() { recaptchaExpiresId{{poll.id}}({{poll.id}}) }
  94.             });
  95.         }
  96.         function recaptchaSuccessId{{poll.id}}(id) {
  97.             document.getElementById(id).removeAttribute('disabled');
  98.         }
  99.         function recaptchaExpiresId{{poll.id}}(id) {
  100.             document.getElementById(id).setAttribute('disabled', true);
  101.         }
  102.     </component>
  103.     <component is="script" src="https://www.google.com/recaptcha/api.js?onload=onloadCallbackId{{poll.id}}&render=explicit&hl=sk" async defer></component>
  104. {% endif %}