' +
@@ -204,14 +205,17 @@ var Notifications = (function(options) {
* @returns {jQuery|HTMLElement|*}
*/
this.renderRow = function (object) {
- var keywords = ['id', 'title', 'description', 'url', 'type'];
- var ret, html = self.opts.listItemTemplate;
-
- html = '
' +
- html +
- '
';
+ var keywords = ['title', 'description', 'url'];
+ var ret, html;
+
+ html = $(self.opts.tag, {
+ class: "notification notification-" + object.type + " "+(object.seen ? 'notification-seen' : 'notification-unseen'),
+ "data-route": object.url,
+ "data-id": object.id,
+ html: self.opts.listItemTemplate
+ })[0].outerHTML;
+
+
for (var i = 0; i < keywords.length; i++) {
html = html.replace(new RegExp('{' + keywords[i] + '}', 'g'), object[keywords[i]]);
@@ -227,8 +231,10 @@ var Notifications = (function(options) {
// Update all counters
for (var i = 0; i < self.opts.counters.length; i++) {
- if ($(self.opts.counters[i]).text() != parseInt($(self.opts.counters[i]).html())-1) {
- $(self.opts.counters[i]).text(parseInt($(self.opts.counters[i]).html())-1);
+ var currentCounter = $(self.opts.counters[i]),
+ targetCount = parseInt(currentCounter.html()) - 1;
+ if (currentCounter.text() != targetCount) {
+ currentCounter.text(targetCount || "");
}
}
@@ -348,8 +354,9 @@ var Notifications = (function(options) {
// Update all counters
for (var i = 0; i < self.opts.counters.length; i++) {
- if ($(self.opts.counters[i]).text() != data.length) {
- $(self.opts.counters[i]).text(data.length);
+ var counter=$(self.opts.counters[i]);
+ if (counter.text() != data.length) {
+ counter.text(data.length || "");
}
}
diff --git a/docs/Usage.md b/docs/Usage.md
index 958e230..dfce66a 100644
--- a/docs/Usage.md
+++ b/docs/Usage.md
@@ -85,6 +85,7 @@ NotificationsWidget::widget([
| listSelector | A jQuery selector for your UI element that will holds the notification list | null |
| listItemTemplate | An optional template for the list item. | built-in |
| listItemBeforeRender | An optional callback to tweak the list item layout before rendering | empty cb |
+| tag | The name of the tag used for each notification | 'div' |
Supported libraries
diff --git a/widgets/NotificationsWidget.php b/widgets/NotificationsWidget.php
index 86bd560..dd13e67 100644
--- a/widgets/NotificationsWidget.php
+++ b/widgets/NotificationsWidget.php
@@ -132,6 +132,11 @@ class NotificationsWidget extends Widget
*/
public $listSelector = null;
+ /**
+ * @var string The wrapper tag for each item
+ */
+ public $tag = "div";
+
/**
* @var string The list item HTML template
*/
@@ -205,6 +210,7 @@ public function registerAssets()
'pollSeen' => !!$this->pollSeen,
'pollInterval' => Html::encode($this->pollInterval),
'counters' => $this->counters,
+ 'tag' => Html::beginTag($this->tag)
];
if ($this->theme) {