diff --git a/assets/notifications.js b/assets/notifications.js index 8b08c67..18bf4ec 100644 --- a/assets/notifications.js +++ b/assets/notifications.js @@ -175,6 +175,7 @@ var Notifications = (function(options) { markAllSeenSelector: null, deleteAllSelector: null, listSelector: null, + tag: '
', listItemTemplate: '
' + '
' + @@ -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) {