From 6b82425490044158ac75f888f2e6a54ebaf3f0d7 Mon Sep 17 00:00:00 2001 From: "E.Alamo" Date: Thu, 12 Oct 2017 17:55:43 +0200 Subject: [PATCH 1/8] Added tag property --- widgets/NotificationsWidget.php | 6 ++++++ 1 file changed, 6 insertions(+) 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) { From 4246b9785ccb32a23e4fd20c8b74baaf70db7ea2 Mon Sep 17 00:00:00 2001 From: "E.Alamo" Date: Thu, 12 Oct 2017 17:57:04 +0200 Subject: [PATCH 2/8] Added tag property --- assets/notifications.js | 18 ++++++++++++------ 1 file changed, 12 insertions(+), 6 deletions(-) diff --git a/assets/notifications.js b/assets/notifications.js index 8b08c67..ffd8127 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: '
' + '
' + @@ -205,13 +206,18 @@ var Notifications = (function(options) { */ this.renderRow = function (object) { var keywords = ['id', 'title', 'description', 'url', 'type']; - var ret, html = self.opts.listItemTemplate; + var ret, html; - html = '
' + - html + - '
'; + html = $(self.opts.tag, { + class: "notification notification-" + object['type'] + " "+(object.seen ? 'notification-seen' : 'notification-unseen'), + data: { + route: object['url'], + 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]]); From edce7a40259b2505d69f645a9b400cc0c01bbd2c Mon Sep 17 00:00:00 2001 From: "E.Alamo" Date: Thu, 12 Oct 2017 18:02:45 +0200 Subject: [PATCH 3/8] Added tag parameter --- docs/Usage.md | 1 + 1 file changed, 1 insertion(+) 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 From 4e4ad2ae3cf61b3f944919af1378b8f550f35551 Mon Sep 17 00:00:00 2001 From: "E.Alamo" Date: Thu, 12 Oct 2017 18:12:21 +0200 Subject: [PATCH 4/8] Changed the way data is added to tag The wrong use of data as selector requires data attributes to be set in a manual way, instead using data parameter. --- assets/notifications.js | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/assets/notifications.js b/assets/notifications.js index ffd8127..dcaafde 100644 --- a/assets/notifications.js +++ b/assets/notifications.js @@ -210,10 +210,8 @@ var Notifications = (function(options) { html = $(self.opts.tag, { class: "notification notification-" + object['type'] + " "+(object.seen ? 'notification-seen' : 'notification-unseen'), - data: { - route: object['url'], - id: object['id'] - }, + "data-route":object['url'], + "data-id":object['id'], html: self.opts.listItemTemplate })[0].outerHTML; From 6e5f863ae9bfd83ec4d26711cfa441dd3e9dac2e Mon Sep 17 00:00:00 2001 From: "E.Alamo" Date: Thu, 12 Oct 2017 18:15:34 +0200 Subject: [PATCH 5/8] Update notifications.js --- assets/notifications.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/assets/notifications.js b/assets/notifications.js index dcaafde..024fd18 100644 --- a/assets/notifications.js +++ b/assets/notifications.js @@ -205,7 +205,7 @@ var Notifications = (function(options) { * @returns {jQuery|HTMLElement|*} */ this.renderRow = function (object) { - var keywords = ['id', 'title', 'description', 'url', 'type']; + var keywords = ['title', 'description', 'url']; var ret, html; html = $(self.opts.tag, { From 36d5aa70d7afd6200f8ab367270784145372d335 Mon Sep 17 00:00:00 2001 From: "E.Alamo" Date: Thu, 12 Oct 2017 18:30:04 +0200 Subject: [PATCH 6/8] Handle notifications counter value MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The correct use for the counter when there aren´t notifications is not display 0, is display empty value. Then you can automatically hide a badge using css rule `:empty`. Also you can set the number zero using `:empty:before { content: "0" }` --- assets/notifications.js | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/assets/notifications.js b/assets/notifications.js index 024fd18..35f8060 100644 --- a/assets/notifications.js +++ b/assets/notifications.js @@ -231,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 || ""); } } @@ -352,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 || ""); } } From e34a864900067fc81d244e47201e5b8b5ff5901a Mon Sep 17 00:00:00 2001 From: "E.Alamo" Date: Fri, 13 Oct 2017 20:02:09 +0200 Subject: [PATCH 7/8] Update notifications.js --- assets/notifications.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/assets/notifications.js b/assets/notifications.js index 35f8060..ef8bf3f 100644 --- a/assets/notifications.js +++ b/assets/notifications.js @@ -209,9 +209,9 @@ var Notifications = (function(options) { 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'], + 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; From 0a17b3b59f6d6ea458a05a099dfb3d63beff2839 Mon Sep 17 00:00:00 2001 From: "E.Alamo" Date: Mon, 16 Oct 2017 14:28:10 +0200 Subject: [PATCH 8/8] Single quotes instead doube quotes --- assets/notifications.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/assets/notifications.js b/assets/notifications.js index ef8bf3f..18bf4ec 100644 --- a/assets/notifications.js +++ b/assets/notifications.js @@ -175,7 +175,7 @@ var Notifications = (function(options) { markAllSeenSelector: null, deleteAllSelector: null, listSelector: null, - tag: "
", + tag: '
', listItemTemplate: '
' + '
' +