Настройка глосования в MODX Revolution с помощью Pools

Установим дополнение Polls через репозиторий дополнений. Кроме этого скопируем с Гитхаба сниппет PollsPrevious. Лучше было бы конечно же устанавливать сразу же с ним целый пакет. Документация по данному компоненту немного устарела и компонент сам по себе не совершенен, но годится для создания простенького голосования на сайте МОДХ.

Сделаем вызов на нашей странице для голосования:

Код
[[!PollsLatest]] <h1>Результаты всех опросов</h1> [[!PollsPrevious]]

PollsLatest выводит последнее (одно) голосование, если вы не проголосовали, и результаты голосования, если вы уже проголосовали. PollsPrevious выводит результаты предыдущих голосований (включая текущее). Данных вызовов для некоторых случаев может быть достаточно, но давайте попытаемся сделать наше голосование чуть красивее. Для этого давайте используем Прогрессбары из блога Криса Койера Как видите для задания прогрессбаров нам нужно использовать этот кусок кода, аналогичный код можно использовать в bootstrap шаблоне:

Зададим его в параметрах для PollsPrevious как шаблонирующий чанк pollsPreviousResult.tpl

Код
[[!PollsLatest]] <h1>Результаты всех опросов</h1> [[!PollsPrevious? &tplAnswer=`pollsPreviousResult.tpl`]]

чанк pollsPreviousResult.tpl вывода отдельного результата голосования будет таким:

Код
<strong>[[+answer]]</strong> [[%polls.votes? &num=`[[+votes]], [[+percent]]%`]] <div class="meter blue nostripes"> <span style="width: [[+percent]]%"></span> </div>

как видите плейсхолдер percent выдаёт значения в процентах, нам нужно лишь его подставить в наш хтмл-код. Также вставьте этот скрипт в то место на сайте, где у вас находятся все javasctipt`ы:

Код
$(".meter > span").each(function(){ $(this).data("origWidth", $(this).width()).width(0).animate({ width: $(this).data("origWidth")&#125,1200);});

Также предварительно нужно подключить библиотеку jQuery:

Код
<script type="text/javascript" src="Путь к библиотеке jQuery"></script>

Вы можете использовать css стили, которые задал Крис Койер в своём блоге без изменений. Я сделал некоторые изменения (уменьшил высоту блоков и изменил некоторые другие значения цвета и радиусов), поэтому мои стили будут такими:

Код
/* для голосования */ .meter { height: 10px; /* Can be anything */ position: relative; background: #555; -moz-border-radius: 25px; -webkit-border-radius: 25px; border-radius: 35px; padding: 5px; -webkit-box-shadow: inset 0 -1px 1px rgba(255,255,255,0.3); -moz-box-shadow : inset 0 -1px 1px rgba(255,255,255,0.3); box-shadow : inset 0 -1px 1px rgba(255,255,255,0.3); } .meter > span { display: block; height: 100%; -webkit-border-top-right-radius: 4px; -webkit-border-bottom-right-radius: 4px; -moz-border-radius-topright: 4px; -moz-border-radius-bottomright: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; -webkit-border-top-left-radius: 10px; -webkit-border-bottom-left-radius: 10px; -moz-border-radius-topleft: 10px; -moz-border-radius-bottomleft: 10px; border-top-left-radius: 10px; border-bottom-left-radius: 10px; background-color: rgb(43,194,83); background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(43,194,83)), color-stop(1, rgb(84,240,84)) ); background-image: -moz-linear-gradient( center bottom, rgb(43,194,83) 37%, rgb(84,240,84) 69% ); -webkit-box-shadow: inset 0 2px 9px rgba(255,255,255,0.3), inset 0 -2px 6px rgba(0,0,0,0.4); -moz-box-shadow: inset 0 2px 9px rgba(255,255,255,0.3), inset 0 -2px 6px rgba(0,0,0,0.4); box-shadow: inset 0 2px 9px rgba(255,255,255,0.3), inset 0 -2px 6px rgba(0,0,0,0.4); position: relative; overflow: hidden; } .meter > span:after, .animate > span > span { content: ""; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background-image: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.25, rgba(255, 255, 255, .2)), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .2)), color-stop(.75, rgba(255, 255, 255, .2)), color-stop(.75, transparent), to(transparent) ); background-image: -moz-linear-gradient( -45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent ); z-index: 1; -webkit-background-size: 50px 50px; -moz-background-size: 50px 50px; -webkit-animation: move 2s linear infinite; -webkit-border-top-right-radius: 8px; -webkit-border-bottom-right-radius: 8px; -moz-border-radius-topright: 8px; -moz-border-radius-bottomright: 8px; border-top-right-radius: 8px; border-bottom-right-radius: 8px; -webkit-border-top-left-radius: 20px; -webkit-border-bottom-left-radius: 20px; -moz-border-radius-topleft: 20px; -moz-border-radius-bottomleft: 20px; border-top-left-radius: 20px; border-bottom-left-radius: 20px; overflow: hidden; } .animate > span:after { display: none; } @-webkit-keyframes move { 0% { background-position: 0 0; } 100% { background-position: 50px 50px; } } .orange > span { background-color: #f1a165; background-image: -moz-linear-gradient(top, #f1a165, #f36d0a); background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #f1a165),color-stop(1, #f36d0a)); background-image: -webkit-linear-gradient(#f1a165, #f36d0a); } .red > span { background-color: #f0a3a3; background-image: -moz-linear-gradient(top, #f0a3a3, #f42323); background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #f0a3a3),color-stop(1, #f42323)); background-image: -webkit-linear-gradient(#f0a3a3, #f42323); } .nostripes > span > span, .nostripes > span:after { -webkit-animation: none; background-image: none; } .blue > span { background-color: #3399ff; background-image: -moz-linear-gradient(top, #3399ff, #0066cc); background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #3399ff),color-stop(1, #0066cc)); background-image: -webkit-linear-gradient(#3399ff, #0066cc); } .nostripes > span > span, .nostripes > span:after { -webkit-animation: none; background-image: none; } 

Чанк pollsPreviousResult.tpl в моём случае будет таким:

Код
<strong>[[+answer]]</strong> [[%polls.votes? &num=`[[+votes]], [[+percent]]%`]] <div class="meter blue nostripes"> <span style="width: [[+percent]]%"></span> </div>

Вот и все!

2194