Настройка глосования в 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")},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>
Вот и все!