# 2.1.1

- Bugfix : - hardcode add some unlogical when open FreshRSS instance ('/p/i') with new url system, we don't need to add this - use local img instead hotlink FreshRSS Logo - all imported link (from rss stream) are now target \_blank - Code : - use querySelector insteal getElement... - use $ for document.querySelector and $$ for document.querySelectorAll - Improvements : - The Addon can unload EventListener when shutdown/desactivate - parser and sanitizer work well, but should use innerHTML twice, really don't have choice. - Now with innerHTML, I don't have any bug with pictures or link who don't appear. - replace some text in panel to icon. - Add .jpmignore (don't package useless assets)
Purexo · Jan 5, 2016 · 455c4a5 · 455c4a5
1 parent e0516c7
commit 455c4a5
Show file tree

Hide file tree

Showing 14 changed files with 159 additions and 44 deletions.
diff --git a/.jpmignore b/.jpmignore
@@ -0,0 +1,9 @@
+/data/img/button/*.svg
+.git
+*.bat
+*.sh
+*.md
+*.xpi
+.jpmignore
+.gitignore
+LICENSE
diff --git a/build.bat b/build.bat
@@ -0,0 +1,6 @@
+cd /d %~dp0
+
+:boucle
+    call jpm xpi
+    pause > nul && pause > nul
+goto :boucle
diff --git a/changelog.md b/changelog.md
@@ -1,4 +1,19 @@
-#2.1.0
+# 2.1.1
+- Bugfix :
+    - hardcode add some unlogical when open FreshRSS instance ('/p/i') with new url system, we don't need to add this
+    - use local img instead hotlink FreshRSS Logo
+    - all imported link (from rss stream) are now target \_blank
+- Code :
+    - use querySelector insteal getElement...
+    - use $ for document.querySelector and $$ for document.querySelectorAll
+- Improvements :
+    - The Addon can unload EventListener when shutdown/desactivate
+    - parser and sanitizer work well, but should use innerHTML twice, really don't have choice.
+        - Now with innerHTML, I don't have any bug with pictures or link who don't appear.
+    - replace some text in panel to icon.
+    - Add .jpmignore (don't package useless assets)
+
+# 2.1.0
 - Bugfix :
     - Link in panel are now all target \_blank
 - Compatibilities

diff --git a/checklist.md b/checklist.md
@@ -3,7 +3,6 @@
 
 - Faire en sorte de ne pas ouvrir un nouvel onglet si l'onglet de l'instance est déjà présent.
 - Possibilité de choisir un thème pour le panel ? (choix du CSS)
-- https://github.com/purexo/FreshRSS-Notify/issues/1
 
 # V3
 - passer au système plus universel de chrome
diff --git a/data/css/main.css b/data/css/main.css
@@ -133,6 +133,9 @@ a:visited, a:hover {
 .item-rss > p {
     margin-top: 1em;
 }
+#items-rss > .item-rss > .header > img.state {
+    cursor: pointer;
+}
 footer {
     white-space: pre-line;
     background-color: #212121;

diff --git a/data/fonts/icons/MaterialIcons-Regular.woff2 b/data/fonts/icons/MaterialIcons-Regular.woff2
diff --git a/data/fonts/icons/material-icons.css b/data/fonts/icons/material-icons.css
@@ -0,0 +1,22 @@
+@font-face {
+  font-family: 'Material Icons';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Material Icons'), local('MaterialIcons-Regular'), url(MaterialIcons-Regular.woff2) format('woff2');
+}
+
+.material-icons {
+  font-family: 'Material Icons';
+  font-weight: normal;
+  font-style: normal;
+  font-size: 24px;
+  line-height: 1;
+  letter-spacing: normal;
+  text-transform: none;
+  display: inline-block;
+  white-space: nowrap;
+  word-wrap: normal;
+  direction: ltr;
+  -moz-font-feature-settings: 'liga';
+  -moz-osx-font-smoothing: grayscale;
+}
diff --git a/data/img/panel/freshrss_logo.png b/data/img/panel/freshrss_logo.png
diff --git a/data/js/main.js b/data/js/main.js
@@ -5,17 +5,28 @@
 */
 function removeAllChildren(node){
     while (node.hasChildNodes()) {
-     node.removeChild(node.lastChild);
+        node.removeChild(node.lastChild);
     }
 }
 
+/**
+* @author Purexo <contact@purexo.eu>
+* A selector System like jquery with native javascript
+* @param query : <string> It's the query string, same as CSS
+* usage :
+*   let nodes = $$('.test') return all elements who have class test atributes
+*   let node  = $('#test') return first element who have id test atributes
+*/
+let $ = (query) => { return document.querySelector(query);};
+let $$ = (query) => { return document.querySelectorAll(query);};
+
 /**
 * Définition des boutons
 */
-let btnRefresh = document.getElementById('btn-refresh');
-let btnUnreads = document.getElementById('btn-unreads');
+let btnRefresh = $('#btn-refresh');
+let btnUnreads = $('#btn-unreads');
 
-let mainLink = document.getElementById('mainLink');
+let mainLink = $('#mainLink');
 self.port.on('mainlink', (link) => {
     mainLink.href = link;
     mainLink.target = "_blank";
@@ -37,64 +48,99 @@ let evtUnreads = function evtUnreads () {
 
 // Actualise le bouton pour savoir combien il y a de flux non lus
 self.port.on('refresh-nbunread', (nbunread) => {
+    /*
     removeAllChildren(btnUnreads);
+    let nodeIconUnread = document.createElement(i);
+    nodeIconUnread.className = 'material-icons';
+    let nodeIconUnreadText = document.createTextNode('markunread');
+    nodeIconUnread.appendChild(nodeIconUnreadText);
+    btnUnreads.appendChild(nodeIconUnread);
+
     let nodeNbUnread = document.createTextNode(nbunread);
     btnUnreads.appendChild(nodeNbUnread);
+    /**/
+    btnUnreads.innerHTML = `<i class="material-icons">markunread</i> ${parseInt(nbunread, 10)}`;
+    // sorry, innerHTML work as expected...
 })
 // met à jours les cards : affiche les 5 derniers flux (en priorisant les non lus)
 self.port.on('refresh-additem', (data) => {
     // data.id data.link data.title data.content data.isRead
-    let itemrss = document.getElementsByClassName('item-rss')[data.id];
-    let header = itemrss.getElementsByClassName('header')[0];
+    let itemrss = $$('.item-rss')[data.id];
+    let header = itemrss.querySelector('.header');
 
     // title of article
-    let titleNode = header.getElementsByTagName('span')[0]
+    let titleNode = header.querySelector('span');
     let newTitleNode = document.createTextNode(data.title);
     titleNode.removeChild(titleNode.childNodes[0]);
     titleNode.appendChild(newTitleNode);
 
     // link of article
-    let linkNode = header.getElementsByTagName('a')[0];
+    let linkNode = header.querySelector('a');
     linkNode.setAttribute('href', data.link);
     linkNode.setAttribute('alt', data.originTitle);
     linkNode.setAttribute('target', "_blank");
 
     // state of article
-    let imgTitleNode = header.getElementsByTagName('img')[0];
+    let imgTitleNode = header.querySelector('img');
     imgTitleNode.setAttribute('src', data.isRead ? '../img/panel/read.svg' : '../img/panel/unread.svg');
     imgTitleNode.setAttribute('itemid', data.itemid);
     imgTitleNode.setAttribute('isRead', data.isRead);
     imgTitleNode.itemid = data.itemid;
     imgTitleNode.isRead = data.isRead;
 
     // content of article
-    let contentNode = itemrss.getElementsByTagName('p')[0];
+    let contentNode = itemrss.querySelector('p');
     removeAllChildren(contentNode);
 
     let newContentNode = new DOMParser().parseFromString(data.content, 'text/html');
+    contentNode.innerHTML = newContentNode.body.innerHTML; // don't have choice, other methods don't work properly
+    /*
     for (element of newContentNode.body.childNodes) {
         contentNode.appendChild(element);
     }
+    */
+    for (let item of contentNode.querySelectorAll('a')) {
+        item.target = '_blank';
+    }
 })
 
-let markNode = [];
 /**
 * === Gestion des Listener ===
 */
 btnRefresh.addEventListener('click', evtRefresh, false);
 btnUnreads.addEventListener('click', evtUnreads, false);
 
-let imgs = document.getElementsByClassName('state');
+let markNodeList = [];
+let imgs = $$('#items-rss > .item-rss > .header > img.state');
 let length = imgs.length;
 for (let i = 0; i < length; i++) {
     let img = imgs[i];
-    markNode[i] = img;
-    img.addEventListener('click', () => {
+    markNodeList[i] = img;
+    let func = () => {
         self.port.emit('mark-swap', ({itemid: img.itemid, isRead: img.isRead, index: i}))
-    }, false);
+    }
+    img.func = func;
+    img.addEventListener('click', func, false);
 }
 self.port.on('mark-swap', (index) => {
-    let img = document.getElementsByClassName('state')[index]
+    let img = $$('#items-rss > .item-rss > .header > img.state')[index];
     img.setAttribute('src', img.isRead ? '../img/panel/unread.svg' : '../img/panel/read.svg');
     img.isRead = !img.isRead;
 });
+
+function removeImgEventListener() {
+    let length = markNodeList.length;
+    for (let i = 0; i < length; i++) {
+        let img = markNodeList[i];
+        img.removeEventListener('click', img.func, false);
+        delete img.func;
+    }
+}
+function removeAllEventListener() {
+    removeImgEventListener();
+    btnRefresh.removeEventListener('click', evtRefresh, false);
+    btnUnreads.removeEventListener('click', evtUnreads, false);
+}
+self.port.on('remove-all-evt-listener', () => {
+    removeAllEventListener();
+});
diff --git a/data/tpl/main.html b/data/tpl/main.html
@@ -3,48 +3,53 @@
 	<head>
 		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
         <link rel="stylesheet" href="../css/main.css">
+        <link rel="stylesheet" href="../fonts/icons/material-icons.css">
 	</head>
 	<body>
 
 		<header>
-			<a href="#LiensVersInstanceRSS" id="mainLink" target="_blank"><img src="http://freshrss.org/images/freshrss_logo.png" alt="Go to FreshRSS" height="20em"/></a>
+			<a href="#LiensVersInstanceRSS" id="mainLink" target="_blank"><img src="../img/panel/freshrss_logo.png" alt="Go to FreshRSS" height="20em"/></a>
 			<div id="vide"></div>
-			<button type="button" name="refresh" id="btn-refresh" data-l10n-id="html_btn_refresh">Refresh</button>
-			<button type="button" name="unreads" id="btn-unreads" data-l10n-id="html_btn_unreads">Unreads</button>
+			<button type="button" name="refresh" id="btn-refresh" title="refresh">
+                <i class="material-icons">refresh</i>
+            </button>
+			<button type="button" name="unreads" id="btn-unreads" title="unreads">
+                <i class="material-icons">markunread</i>
+            </button>
 		</header>
 
 		<section id="items-rss">
 			<div class="item-rss">
                 <div class="header">
-                    <img src="../img/panel/unread.svg" id="state-0" class="state"/>
+                    <img src="../img/panel/unread.svg" class="state"/>
                     <a href="#lien-rss" target="_blank"><span>Item RSS 1</span></a>
                 </div>
 				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
 			</div>
 			<div class="item-rss">
                 <div class="header">
-                    <img src="../img/panel/unread.svg" id="state-1" class="state"/>
+                    <img src="../img/panel/unread.svg" class="state"/>
                     <a href="#lien-rss" target="_blank"><span>Item RSS 1</span></a>
                 </div>
 				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
 			</div>
 			<div class="item-rss">
                 <div class="header">
-                    <img src="../img/panel/unread.svg" id="state-2" class="state"/>
+                    <img src="../img/panel/unread.svg" class="state"/>
                     <a href="#lien-rss" target="_blank"><span>Item RSS 1</span></a>
                 </div>
 				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
 			</div>
 			<div class="item-rss">
                 <div class="header">
-                    <img src="../img/panel/unread.svg" id="state-3" class="state"/>
+                    <img src="../img/panel/unread.svg" class="state"/>
                     <a href="#lien-rss" target="_blank"><span>Item RSS 1</span></a>
                 </div>
 				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
 			</div>
 			<div class="item-rss">
                 <div class="header">
-                    <img src="../img/panel/unread.svg" id="state-4" class="state"/>
+                    <img src="../img/panel/unread.svg" class="state"/>
                     <a href="#lien-rss" target="_blank"><span>Item RSS 1</span></a>
                 </div>
 				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
@@ -53,6 +58,7 @@
 
 		<footer><span data-l10n-id="html_footer_licence">FreshRSS Notify is under</span> <a href="http://www.gnu.org/licenses/gpl.html" target="_blank">GPL v3</a>
 			<span data-l10n-id="html_footer_by">By</span> <a href="https://github.com/purexo" target="_blank">Purexo</a>
+            <span data-l10n-id="html_footer_credit_google_before">Open-Source icons from</span> <a href="https://design.google.com/icons/">Google</a> <span data-l10n-id="html_footer_credit_google_after">for Material Design</span>
 		</footer>
 	</body>
 </html>
diff --git a/index.js b/index.js
@@ -98,7 +98,9 @@ function getFlux() {
                     let length = items.length;
                     for (let i = 0; i < length; i++) {
                         let item = items[i];
+                        // let html = parser.sanitize(item.summary.content, parser.SanitizerAllowComments);
                         let html = parser.sanitize(item.summary.content, parser.SanitizerAllowComments);
+                        // let html = parser.convertToPlainText(item.summary.content, parser.SanitizerAllowComments, 0);
                         let rss = {
                             'id' : i + startindex,
                             'link' : item.alternate[0].href,
@@ -129,7 +131,8 @@ function getFlux() {
                 let nbunread = json.max;
 
                 // lance un event pour la page client
-                panel.port.emit('refresh-nbunread', _('unread x', nbunread));
+                // panel.port.emit('refresh-nbunread', _('unread x', nbunread));
+                panel.port.emit('refresh-nbunread', nbunread);
 
                 let nbfetchunread = nbunread > 5 ? 5 : nbunread;
                 // fetch unreads
@@ -146,7 +149,7 @@ function getFlux() {
                         title: _('You have x unreads articles', nbunread),
                         iconURL: self.data.url('img/button/icon.png'),
                         onClick: (data) => {
-                            tabs.open(preferences.url + "p/i");
+                            tabs.open(preferences.url);
                         }
                     });
                 } else {
@@ -183,7 +186,8 @@ panel.port.on('mark-swap', (data) => {
             onComplete: (rep) => {
                 panel.port.emit('mark-swap', index);
                 button.badge += isRead ? 1 : -1;
-                panel.port.emit('refresh-nbunread', _('unread x', button.badge));
+                // panel.port.emit('refresh-nbunread', _('unread x', button.badge));
+                panel.port.emit('refresh-nbunread', button.badge);
             }
         }).post();
     }
@@ -243,4 +247,5 @@ exports.main = (reason, callback) => {
 }
 exports.onUnload = (reason) => {
     clearTimeout(idTimeOut);
+    panel.port.emit('remove-all-evt-listener')
 }
diff --git a/locale/en.properties b/locale/en.properties
@@ -1,10 +1,12 @@
 # Local HTML
-html_btn_refresh= Refresh
-html_btn_unreads[other]= Unreads : %d
-html_btn_unreads[one]= Unread : %d
-html_btn_unreads= Unreads
+# html_btn_refresh= Refresh
+#html_btn_unreads[other]= Unreads : %d
+#html_btn_unreads[one]= Unread : %d
+#html_btn_unreads= Unreads
 html_footer_licence= FreshRSS Notify is under
 html_footer_by= By
+html_footer_credit_google_before= Open-Source icons from
+html_footer_credit_google_after= for Material Design
 
 # Local preferences
 url_title= URL :
@@ -29,8 +31,8 @@ Request Fail, Impossible to fetch unreads count= Request Fail, Impossible to fet
 You have x unreads articles[other]= You have %d unreads articles
 You have x unreads articles[one]= You have %d unread article
 You have x unreads articles= You have x unreads articles
-unread x[other]= Unreads : %d
-unread x[one]= Unread : %d
-unread x= Unreads : %d
+# unread x[other]= Unreads : %d
+# unread x[one]= Unread : %d
+# unread x= Unreads : %d
 Can't get Token= Can't get Token
 check your ids= check your ids
diff --git a/locale/fr.properties b/locale/fr.properties
@@ -1,10 +1,12 @@
 # Local HTML
-html_btn_refresh= Rafraichir
-html_btn_unreads[other]= Non lus : %d
-html_btn_unreads[one]= Non lu : %d
-html_btn_unreads= Non lu
+# html_btn_refresh= Rafraichir
+# html_btn_unreads[other]= Non lus : %d
+# html_btn_unreads[one]= Non lu : %d
+# html_btn_unreads= Non lu
 html_footer_licence= FreshRSS Notify est sous
 html_footer_by= Par
+html_footer_credit_google_before= Icones Open-Source de
+html_footer_credit_google_after= pour le Material Design
 
 # Local preferences
 url_title= URL :
@@ -29,8 +31,8 @@ Request Fail, Impossible to fetch unreads count= Requête échoué, impossible d
 You have x unreads articles[other]= Vous avez %d articles non lus
 You have x unreads articles[one]= Vous avez %d article non lu
 You have x unreads articles= Vous avez x articles non lus
-unread x[other]= Non lus : %d
-unread x[one]= Non lu : %d
-unread x= Non Lus : %d
+# unread x[other]= Non lus : %d
+# unread x[one]= Non lu : %d
+# unread x= Non Lus : %d
 Can't get Token= Impossible d'obtenir un token
 check your ids= Vérifiez vos identifians