No puede seleccionar más de 25 temas Los temas deben comenzar con una letra o número, pueden incluir guiones ('-') y pueden tener hasta 35 caracteres de largo.

Carousel.php 5.8KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181
  1. <?php
  2. /**
  3. * @link http://www.yiiframework.com/
  4. * @copyright Copyright (c) 2008 Yii Software LLC
  5. * @license http://www.yiiframework.com/license/
  6. */
  7. namespace yii\bootstrap;
  8. use yii\base\InvalidConfigException;
  9. use yii\helpers\ArrayHelper;
  10. /**
  11. * Carousel renders a carousel bootstrap javascript component.
  12. *
  13. * For example:
  14. *
  15. * ```php
  16. * echo Carousel::widget([
  17. * 'items' => [
  18. * // the item contains only the image
  19. * '<img src="http://twitter.github.io/bootstrap/assets/img/bootstrap-mdo-sfmoma-01.jpg"/>',
  20. * // equivalent to the above
  21. * ['content' => '<img src="http://twitter.github.io/bootstrap/assets/img/bootstrap-mdo-sfmoma-02.jpg"/>'],
  22. * // the item contains both the image and the caption
  23. * [
  24. * 'content' => '<img src="http://twitter.github.io/bootstrap/assets/img/bootstrap-mdo-sfmoma-03.jpg"/>',
  25. * 'caption' => '<h4>This is title</h4><p>This is the caption text</p>',
  26. * 'options' => [...],
  27. * ],
  28. * ]
  29. * ]);
  30. * ```
  31. *
  32. * @see http://getbootstrap.com/javascript/#carousel
  33. * @author Antonio Ramirez <amigo.cobos@gmail.com>
  34. * @since 2.0
  35. */
  36. class Carousel extends Widget
  37. {
  38. /**
  39. * @var array|boolean the labels for the previous and the next control buttons.
  40. * If false, it means the previous and the next control buttons should not be displayed.
  41. */
  42. public $controls = ['&lsaquo;', '&rsaquo;'];
  43. /**
  44. * @var boolean
  45. * If false carousel indicators (<ol> tag with anchors to items) should not be displayed.
  46. */
  47. public $showIndicators = true;
  48. /**
  49. * @var array list of slides in the carousel. Each array element represents a single
  50. * slide with the following structure:
  51. *
  52. * ```php
  53. * [
  54. * // required, slide content (HTML), such as an image tag
  55. * 'content' => '<img src="http://twitter.github.io/bootstrap/assets/img/bootstrap-mdo-sfmoma-01.jpg"/>',
  56. * // optional, the caption (HTML) of the slide
  57. * 'caption' => '<h4>This is title</h4><p>This is the caption text</p>',
  58. * // optional the HTML attributes of the slide container
  59. * 'options' => [],
  60. * ]
  61. * ```
  62. */
  63. public $items = [];
  64. /**
  65. * Initializes the widget.
  66. */
  67. public function init()
  68. {
  69. parent::init();
  70. Html::addCssClass($this->options, ['widget' => 'carousel']);
  71. }
  72. /**
  73. * Renders the widget.
  74. */
  75. public function run()
  76. {
  77. $this->registerPlugin('carousel');
  78. return implode("\n", [
  79. Html::beginTag('div', $this->options),
  80. $this->renderIndicators(),
  81. $this->renderItems(),
  82. $this->renderControls(),
  83. Html::endTag('div')
  84. ]) . "\n";
  85. }
  86. /**
  87. * Renders carousel indicators.
  88. * @return string the rendering result
  89. */
  90. public function renderIndicators()
  91. {
  92. if ($this->showIndicators === false) {
  93. return '';
  94. }
  95. $indicators = [];
  96. for ($i = 0, $count = count($this->items); $i < $count; $i++) {
  97. $options = ['data-target' => '#' . $this->options['id'], 'data-slide-to' => $i];
  98. if ($i === 0) {
  99. Html::addCssClass($options, 'active');
  100. }
  101. $indicators[] = Html::tag('li', '', $options);
  102. }
  103. return Html::tag('ol', implode("\n", $indicators), ['class' => 'carousel-indicators']);
  104. }
  105. /**
  106. * Renders carousel items as specified on [[items]].
  107. * @return string the rendering result
  108. */
  109. public function renderItems()
  110. {
  111. $items = [];
  112. for ($i = 0, $count = count($this->items); $i < $count; $i++) {
  113. $items[] = $this->renderItem($this->items[$i], $i);
  114. }
  115. return Html::tag('div', implode("\n", $items), ['class' => 'carousel-inner']);
  116. }
  117. /**
  118. * Renders a single carousel item
  119. * @param string|array $item a single item from [[items]]
  120. * @param integer $index the item index as the first item should be set to `active`
  121. * @return string the rendering result
  122. * @throws InvalidConfigException if the item is invalid
  123. */
  124. public function renderItem($item, $index)
  125. {
  126. if (is_string($item)) {
  127. $content = $item;
  128. $caption = null;
  129. $options = [];
  130. } elseif (isset($item['content'])) {
  131. $content = $item['content'];
  132. $caption = ArrayHelper::getValue($item, 'caption');
  133. if ($caption !== null) {
  134. $caption = Html::tag('div', $caption, ['class' => 'carousel-caption']);
  135. }
  136. $options = ArrayHelper::getValue($item, 'options', []);
  137. } else {
  138. throw new InvalidConfigException('The "content" option is required.');
  139. }
  140. Html::addCssClass($options, ['widget' => 'item']);
  141. if ($index === 0) {
  142. Html::addCssClass($options, 'active');
  143. }
  144. return Html::tag('div', $content . "\n" . $caption, $options);
  145. }
  146. /**
  147. * Renders previous and next control buttons.
  148. * @throws InvalidConfigException if [[controls]] is invalid.
  149. */
  150. public function renderControls()
  151. {
  152. if (isset($this->controls[0], $this->controls[1])) {
  153. return Html::a($this->controls[0], '#' . $this->options['id'], [
  154. 'class' => 'left carousel-control',
  155. 'data-slide' => 'prev',
  156. ]) . "\n"
  157. . Html::a($this->controls[1], '#' . $this->options['id'], [
  158. 'class' => 'right carousel-control',
  159. 'data-slide' => 'next',
  160. ]);
  161. } elseif ($this->controls === false) {
  162. return '';
  163. } else {
  164. throw new InvalidConfigException('The "controls" property must be either false or an array of two elements.');
  165. }
  166. }
  167. }