templates/areas/newsticker/view.html.twig line 1

Open in your IDE?
  1. {% if editmode %}
  2.     <div class="p-5">
  3.         {% include 'areaHeadAndFooter.html.twig' with { 'header': 'STWH: Newsticker' } %}
  4.         {% for i in pimcore_block('contentblock').iterator %}
  5.             Eintrag
  6.             <div class="flex">
  7.                 <div class="w-1/4">{{ pimcore_numeric('repeat', {"minValue" : 1, "maxValue" : 100, "decimalPrecision" : 0}) }}
  8.                     mal anzeigen
  9.                 </div>
  10.                 <div class="w-3/4">
  11.                     {{ pimcore_wysiwyg("content", {
  12.                         "height": 10,
  13.                         "toolbarGroups": [
  14.                             {
  15.                                 "name": 'links',
  16.                                 "groups": [ "links"]
  17.                             }
  18.                         ]}) }}
  19.                 </div>
  20.             </div>
  21.             <hr>
  22.         {% endfor %}
  23.     </div>
  24. {% else %}
  25.     <div class="bg-red-600 flex flex-col justify-center" x-data="newsTickerHandler">
  27.         <div
  28.                 class="overflow-hidden bg-red-600 pl-64"
  29.                 @mouseenter="state.moving = false"
  30.                 @mouseleave="state.moving = true">
  31.             <ul
  32.                     :style="`transform:translateX(${position}px);padding-left:${offset}px`"
  33.                     class="flex items-center w-full font-bold max-w-screen whitespace-no-wrap transition-transform duration-300 ease-linear py-6 text-white text-2xl bg-red-600 leading-tight"
  34.             >
  35.                 <template x-for="(headline, index) in headlines" :key="index">
  36.                     <li
  37.                             :id="`news-${index}`"
  38.                             class="flex px-16 whitespace-nowrap newsentry"
  39.                             x-html="headline"></li>
  40.                 </template>
  41.             </ul>
  42.         </div>
  44.         <datalist x-ref="headlines">
  45.             {% for i in pimcore_block('contentblock').iterator %}
  46.                 <option value="{{ pimcore_wysiwyg("content")|striptags('<a>')|replace({"\n": "&nbsp;", " <a": "&nbsp;<a", "a> ": "a>&nbsp;"})|escape }}">{{ pimcore_numeric('repeat') }}</option>
  47.             {% endfor %}
  48.         </datalist>
  50.     </div>
  51.     <script>
  52.         function newsTickerHandler() {
  53.             return {
  54.                 state: {
  55.                     moving: true,
  56.                 },
  57.                 headlines: [],
  58.                 position: 0,
  59.                 offset: 0,
  60.                 speed: 25,
  61.                 pauseOnNextHeadline: 0,
  62.                 init: async function () {
  63.                     for(let option of Array.from(this.$refs.headlines.options)){
  64.                         let i = 0;
  65.                         do {
  66.                             console.log(i)
  67.                             console.log('text', (parseInt(option.text) ?? 0))
  68.                             console.log(i < (parseInt(option.text) ?? 0))
  69.                             this.headlines.push(option.value)
  70.                             i++;
  71.                         }while(i < (parseInt(option.text) ?? 0))
  72.                     }
  74.                     this.$nextTick(() => {
  75.                         this.start()
  76.                     })
  77.                 },
  78.                 start() {
  79.                     this.loop = () => {
  80.                         const first = document.getElementById('news-0').getBoundingClientRect()
  81.                         if (first.x <= -first.width) {
  82.                             const newHeadlines = this.headlines
  84.                             newHeadlines.push(newHeadlines.shift())
  85.                             this.headlines = newHeadlines
  86.                             this.offset = this.offset + Math.abs(first.width)
  87.                             this.$nextTick(() => {
  88.                                 setTimeout(() => {
  89.                                     requestAnimationFrame(this.loop)
  90.                                 }, this.pauseOnNextHeadline)
  91.                             })
  92.                             return
  93.                         }
  94.                         this.position = this.state.moving ? this.position - this.speed : this.position
  95.                         setTimeout(() => {
  96.                             requestAnimationFrame(this.loop)
  97.                         }, 300)
  98.                     }
  99.                     requestAnimationFrame(this.loop)
  100.                 },
  101.             }
  102.         }
  103.     </script>
  104.     <style>
  105.         .newsentry a {
  106.             text-decoration: underline;
  107.         }
  108.     </style>
  109. {% endif %}