Use Bootstrap slider in announcements - refs #7539

main/inc/lib/system_announcements.lib.php

@@ -676,23 +676,36 @@ class SystemAnnouncementManager
         }
 
 		$sql .= " ORDER BY date_start DESC";
-		$announcements = Database::query($sql);
-		$html = '';
-		if (Database::num_rows($announcements) > 0) {
-			$html .=  Display::page_header(get_lang('SystemAnnouncements'));
-			$html .=  '<div id="container-slider" class="span6"><ul id="slider">';
-			while ($announcement = Database::fetch_object($announcements)) {
-                $content = $announcement->content;
-                $url = api_get_path(WEB_PATH).'news_list.php?id='.$announcement->id;
+		$result = Database::query($sql);
+        $announcements = [];
+
+		if (Database::num_rows($result) > 0) {
+			while ($announcement = Database::fetch_object($result)) {
+                $announcementData = [
+                    'id' => $announcement->id,
+                    'title' => $announcement->title,
+                    'content' => $announcement->content,
+                    'readMore' => null
+                ];
+
                 if (empty($id)) {
-                    if (api_strlen(strip_tags($content)) > $cut_size) {
-                        $content = cut($announcement->content, $cut_size).' '.Display::url(get_lang('More'), $url);
+                    if (api_strlen(strip_tags($announcement->content)) > $cut_size) {
+                        $announcementData['content'] = cut($announcement->content, $cut_size);
+                        $announcementData['readMore'] = true;
                     }
                 }
-                $html .=  '<li><h2>'.$announcement->title.'</h2>'.$content.'</li>';
+
+                $announcements[] = $announcementData;
 			}
-			$html .= '</ul></div>';
 		}
-		return $html;
+
+        if (count($announcements) === 0) {
+            return null;
+        }
+
+        $template = new Template(null, false, false);
+        $template->assign('announcements', $announcements);
+
+        return $template->fetch('default/announcement/slider.tpl');
 	}
 }

main/template/default/announcement/slider.tpl

@@ -0,0 +1,32 @@
+<h2 class="page-header">{{ "SystemAnnouncements" | get_lang }}</h2>
+
+<div id="announcements-slider" class="carousel slide" data-ride="carousel" style="height:300px;">
+    <ol class="carousel-indicators">
+        {% for announcement in announcements %}
+            <li data-target="#announcements-slider" data-slide-to="{{ loop.index0 }}" {% if loop.index0 == 0 %} class="active" {% endif %}></li>
+        {% endfor %}
+    </ol>
+
+    <div class="carousel-inner" role="listbox">
+        {% for announcement in announcements %}
+            <div class="item {% if loop.index0 == 0 %} active {% endif %}" style="height:300px;">
+                <h5>{{ announcement.title }}</h5>
+                {{ announcement.content }}
+                {% if announcement.readMore %}
+                    <a href="{{ _p.web }}news_list.php?id={{ announcement.id }}">{{ "More" | get_lang }}</a>
+                {% endif %}
+                <div class="carousel-caption">
+                </div>
+            </div>
+        {% endfor %}
+    </div>
+
+    <a class="left carousel-control" href="#announcements-slider" role="button" data-slide="prev">
+        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
+        <span class="sr-only">{{ "Previous" | get_lang }}</span>
+    </a>
+    <a class="right carousel-control" href="#announcements-slider" role="button" data-slide="next">
+        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
+        <span class="sr-only">{{ "Next" | get_lang }}</span>
+    </a>
+</div>