Move update icon and update icon blinking to css
Use CSS3 Animation for the "loading icon" blinking and move the definition of the loading icon to CSS as well. CSS3 Animations are supported by IE10, Firefox and using the -webkit prefix by Chrome and Safari. I've dropped the usage of element.classList in favour of supporting refreshing/ article downloading in IE9 (again). The classList stuff isn't necessarily needed, as the elements in question only get one or no class assigned. I've dropped no longer supported css options like: the appearance option isn't supported by any browser, the -webkit-appearance doesn't change anything visible. -webkit-font-smoothing support was dropped in chrome 22 and font-smoothing isn't specified anywhere.
This commit is contained in:
Mathias Kresin
parent
c9a3b5117a
commit
a4d8abb631
|
|
@ -22,8 +22,6 @@ body {
|
|||
max-width: 780px;
|
||||
color: #333;
|
||||
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
font-smoothing: antialiased;
|
||||
text-rendering: optimizeLegibility;
|
||||
}
|
||||
|
||||
|
|
@ -173,8 +171,6 @@ input[type="text"] {
|
|||
font-size: 99%;
|
||||
margin-bottom: 10px;
|
||||
margin-top: 5px;
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
}
|
||||
|
||||
input[type="email"]:focus,
|
||||
|
|
@ -281,8 +277,6 @@ textarea.form-error {
|
|||
|
||||
/* buttons */
|
||||
.btn {
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
display: inline-block;
|
||||
color: #333;
|
||||
border: 1px solid #ccc;
|
||||
|
|
@ -301,7 +295,7 @@ a.btn {
|
|||
}
|
||||
|
||||
.btn-red {
|
||||
border-color: #b0281a;;
|
||||
border-color: #b0281a;
|
||||
background: #d14836;
|
||||
color: #fff;
|
||||
}
|
||||
|
|
@ -352,6 +346,31 @@ span#nav-counter:not(:empty):after, span#page-counter:not(:empty):after, span[id
|
|||
content: ")";
|
||||
}
|
||||
|
||||
@keyframes blinker {
|
||||
0% { opacity: 1.0; }
|
||||
50% { opacity: 0.0; }
|
||||
100% { opacity: 1.0; }
|
||||
}
|
||||
|
||||
/* Chrome, Safari, Opera */
|
||||
@-webkit-keyframes blinker {
|
||||
0% { opacity: 1.0; }
|
||||
50% { opacity: 0.0; }
|
||||
100% { opacity: 1.0; }
|
||||
}
|
||||
|
||||
.loading-icon:before {
|
||||
content: "☀";
|
||||
animation-name: blinker;
|
||||
-webkit-animation-name: blinker; /* Chrome, Safari, Opera */
|
||||
animation-duration: 500ms;
|
||||
-webkit-animation-duration: 500ms; /* Chrome, Safari, Opera */
|
||||
animation-timing-function: ease-in-out;
|
||||
-webkit-animation-timing-function: ease-in-out; /* Chrome, Safari, Opera */
|
||||
animation-iteration-count: infinite;
|
||||
-webkit-animation-iteration-count: infinite; /* Chrome, Safari, Opera */
|
||||
}
|
||||
|
||||
/* header */
|
||||
header {
|
||||
margin-bottom: 50px;
|
||||
|
|
@ -629,13 +648,7 @@ ul.item-infos {
|
|||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
span.downloading img {
|
||||
display: inline;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.downloading {
|
||||
#download-item {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
|
|
@ -690,16 +703,6 @@ iframe {
|
|||
color: #333;
|
||||
}
|
||||
|
||||
.loading-icon {
|
||||
color: #000;
|
||||
opacity: 1;
|
||||
transition: opacity 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
.loading-icon-blink {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
#login {
|
||||
width: 350px;
|
||||
margin: 0 auto;
|
||||
|
|
|
|||
|
|
@ -1,20 +1,19 @@
|
|||
var Miniflux={};Miniflux.App=function(){return{BlinkIcon:function(){var e=document.querySelectorAll(".loading-icon");[].forEach.call(e,function(d){d.classList.toggle("loading-icon-blink")})},Run:function(){Miniflux.Event.ListenKeyboardEvents();Miniflux.Event.ListenMouseEvents()}}}();
|
||||
Miniflux.Feed=function(){function e(c){if(c=document.getElementById("loading-feed-"+c))c.appendChild(document.createTextNode("\u2600")),c.classList.add("loading-icon-blink");f||(f=setInterval(Miniflux.App.BlinkIcon,500))}function d(){for(var c=document.getElementsByTagName("a"),h=0,g=c.length;h<g;h++){var a=c[h].getAttribute("data-feed-id");a&&b.push(parseInt(a))}}var b=[],a=[],f;return{Update:function(c,b){e(c);var a=new XMLHttpRequest;a.onload=function(){var a=document.getElementById("loading-feed-"+
|
||||
c);a&&(a.innerHTML="");if(a=document.getElementById("last-checked-feed-"+c))a.innerHTML=a.getAttribute("data-after-update");try{var d=JSON.parse(this.responseText);if(d.result){var g=d.items_count,e=document.getElementById("items-count-"+c);e&&(e.innerHTML=g.items_unread+"/"+g.items_total)}b&&b(d)}catch(f){}};a.open("POST","?action=refresh-feed&feed_id="+c,!0);a.send()},UpdateAll:function(){d();var c=setInterval(function(){for(;0<b.length&&5>a.length;){var h=b.shift();a.push(h);Miniflux.Feed.Update(h,
|
||||
function(h){h=a.indexOf(h.feed_id);0<=h&&a.splice(h,1);0==b.length&&0==a.length&&(clearInterval(c),clearInterval(f),window.location.href="?action=unread")})}},100)}}}();
|
||||
Miniflux.Item=function(){function e(c){return item_id=c.getAttribute("data-item-id")}function d(c){if(c&&c.hasAttribute("data-reverse-label")){var b=c.innerHTML;c.innerHTML=c.getAttribute("data-reverse-label");c.setAttribute("data-reverse-label",b)}}function b(c){"mouse"!==Miniflux.Event.lastEventType&&Miniflux.Nav.SelectNextItem();c.parentNode.removeChild(c);var b=document.getElementById("page-counter");if(b){c=c.getAttribute("data-item-page");var a=parseInt(b.textContent,10)-1,d=document.getElementsByTagName("article");
|
||||
if(0===a||0===d.length)window.location=location.href;b.textContent=a;switch(c){case "unread":document.title="Miniflux ("+a+")";document.getElementById("nav-counter").textContent=a;break;case "feed-items":document.title="("+a+") "+b.parentNode.firstChild.nodeValue;break;default:document.title=b.parentNode.firstChild.nodeValue+" ("+a+")"}}}function a(c){var a=e(c),g=new XMLHttpRequest;g.onload=function(){if(Miniflux.Nav.IsListing())if(c.getAttribute("data-hide"))b(c);else{c.setAttribute("data-item-status",
|
||||
"read");var a=c.querySelector("a.mark");d(a);(a=c.querySelector("a.mark"))&&a.setAttribute("data-action","mark-unread")}};g.open("POST","?action=mark-item-read&id="+a,!0);g.send()}function f(c){var a=e(c),g=new XMLHttpRequest;g.onload=function(){if(Miniflux.Nav.IsListing())if(c.getAttribute("data-hide"))b(c);else{c.setAttribute("data-item-status","unread");var a=c.querySelector("a.mark");d(a);(a=c.querySelector("a.mark"))&&a.setAttribute("data-action","mark-read")}};g.open("POST","?action=mark-item-unread&id="+
|
||||
a,!0);g.send()}return{MarkAsRead:a,MarkAsUnread:f,MarkAsRemoved:function(c){var a=e(c),d=new XMLHttpRequest;d.onload=function(){Miniflux.Nav.IsListing()&&b(c)};d.open("POST","?action=mark-item-removed&id="+a,!0);d.send()},SwitchBookmark:function(c){var a=e(c),g="1"===c.getAttribute("data-item-bookmark")?"0":"1",k=new XMLHttpRequest;k.onload=function(){if(Miniflux.Nav.IsListing()&&"bookmarks"===c.getAttribute("data-item-page"))b(c);else if(c.setAttribute("data-item-bookmark",g),Miniflux.Nav.IsListing()){var a=
|
||||
c.querySelector("a.bookmark");d(a)}else if((a=c.querySelector("a.bookmark-icon"))&&a.hasAttribute("data-reverse-title")){var h=a.getAttribute("title");a.setAttribute("title",a.getAttribute("data-reverse-title"));a.setAttribute("data-reverse-title",h)}};k.open("POST","?action=bookmark&id="+a+"&value="+g,!0);k.send()},SwitchStatus:function(c){var b=c.getAttribute("data-item-status");"read"===b?f(c):"unread"===b&&a(c)},Show:function(a){(a=a.querySelector("a.show"))&&a.click()},OpenOriginal:function(b){var d=
|
||||
b.querySelector("a.original");d&&("unread"===b.getAttribute("data-item-status")&&a(b),d.removeAttribute("data-action"),d.click())},DownloadContent:function(a){var b=document.getElementById("download-item");if(b){a=e(a);var d=b.getAttribute("data-before-message"),k=document.createElement("span");k.appendChild(document.createTextNode("\u2600"));k.className="loading-icon";b.innerHTML="";b.className="downloading";b.appendChild(k);b.appendChild(document.createTextNode(" "+d));var f=setInterval(Miniflux.App.BlinkIcon,
|
||||
250),l=new XMLHttpRequest;l.onload=function(){var a=JSON.parse(l.responseText);clearInterval(f);if(a.result){var c=document.getElementById("item-content");c&&(c.innerHTML=a.content);b&&(a=b.getAttribute("data-after-message"),b.innerHTML="",b.appendChild(document.createTextNode(" "+a)))}else b&&(a=b.getAttribute("data-failure-message"),b.innerHTML="",b.appendChild(document.createTextNode(" "+a)))};l.open("POST","?action=download-item&id="+a,!0);l.send()}},MarkListingAsRead:function(a){for(var b=document.getElementsByTagName("article"),
|
||||
d=[],f=0,m=b.length;f<m;f++)d.push(e(b[f]));b=new XMLHttpRequest;b.onload=function(){window.location.href=a};b.open("POST","?action=mark-items-as-read",!0);b.send(JSON.stringify(d))},ToggleRTLMode:function(){for(var a=["#current-item h1","#item-content","#current-item h2","#current-item .preview"],b=0;b<a.length;b++){var d=document.querySelector(a[b]);d&&(d.dir=""==d.dir?"rtl":"")}}}}();
|
||||
Miniflux.Event=function(){var e=[];return{lastEventType:"",ListenMouseEvents:function(){document.onclick=function(d){var b=d.target.getAttribute("data-action");if(b){Miniflux.Event.lastEventType="mouse";var a;a:{for(element=d.target;element&&element.parentNode;)if(element=element.parentNode,element.tagName&&"article"===element.tagName.toLowerCase()){a=element;break a}a=null}switch(b){case "refresh-all":d.preventDefault();Miniflux.Feed.UpdateAll();break;case "refresh-feed":d.preventDefault();Miniflux.Feed.Update(d.target.getAttribute("data-feed-id"));
|
||||
break;case "mark-read":d.preventDefault();Miniflux.Item.MarkAsRead(a);break;case "mark-unread":d.preventDefault();Miniflux.Item.MarkAsUnread(a);break;case "mark-removed":d.preventDefault();Miniflux.Item.MarkAsRemoved(a);break;case "bookmark":d.preventDefault();Miniflux.Item.SwitchBookmark(a);break;case "download-item":d.preventDefault();Miniflux.Item.DownloadContent(a);break;case "original-link":d.preventDefault();Miniflux.Item.OpenOriginal(a);break;case "mark-all-read":d.preventDefault();Miniflux.Item.MarkListingAsRead("?action=unread");
|
||||
break;case "mark-feed-read":d.preventDefault(),Miniflux.Item.MarkListingAsRead("?action=feed-items&feed_id="+d.target.getAttribute("data-feed-id"))}}}},ListenKeyboardEvents:function(){document.onkeypress=function(d){if(63==d.keyCode||!(d.ctrlKey||d.shiftKey||d.altKey||d.metaKey)){var b=d.target||d.srcElement;if("INPUT"!=b.tagName&&"TEXTAREA"!=b.tagName)if(Miniflux.Event.lastEventType="keyboard",e.push(d.keyCode||d.which),103===e[0])switch(e[1]){case void 0:break;case 117:window.location.href="?action=unread";
|
||||
e=[];break;case 98:window.location.href="?action=bookmarks";e=[];break;case 104:window.location.href="?action=history";e=[];break;case 115:window.location.href="?action=feeds";e=[];break;case 112:window.location.href="?action=config";e=[];break;default:e=[]}else switch(e=[],b=document.getElementById("current-item"),d.keyCode||d.which){case 100:Miniflux.Item.DownloadContent(b);break;case 112:case 107:Miniflux.Nav.SelectPreviousItem();break;case 110:case 106:Miniflux.Nav.SelectNextItem();break;case 118:Miniflux.Item.OpenOriginal(b);
|
||||
break;case 111:Miniflux.Item.Show(b);break;case 109:Miniflux.Item.SwitchStatus(b);break;case 102:Miniflux.Item.SwitchBookmark(b);break;case 104:Miniflux.Nav.OpenPreviousPage();break;case 108:Miniflux.Nav.OpenNextPage();break;case 114:Miniflux.Feed.UpdateAll();break;case 63:Miniflux.Nav.ShowHelp();break;case 122:Miniflux.Item.ToggleRTLMode()}}}}}}();
|
||||
Miniflux.Nav=function(){function e(b){var a=pageYOffset+document.documentElement.clientHeight;(0>a-(b.offsetTop+b.offsetHeight)||a-b.offsetTop>document.documentElement.clientHeight)&&window.scrollTo(0,b.offsetTop-10)}function d(){return document.getElementById("listing")?!0:!1}return{OpenNextPage:function(){var b=document.getElementById("next-page");b&&b.click()},OpenPreviousPage:function(){var b=document.getElementById("previous-page");b&&b.click()},SelectNextItem:function(){var b=document.getElementById("next-item");
|
||||
if(b)b.click();else if(d())if(b=document.getElementsByTagName("article"),document.getElementById("current-item"))for(var a=0,f=b.length;a<f;a++){if("current-item"===b[a].id){a+1<f&&(b[a].id="item-"+b[a].getAttribute("data-item-id"),b[a+1].id="current-item",e(b[a+1]));break}}else b[0].id="current-item",e(b[0])},SelectPreviousItem:function(){var b=document.getElementById("previous-item");if(b)b.click();else if(d())if(b=document.getElementsByTagName("article"),document.getElementById("current-item"))for(var a=
|
||||
b.length-1;0<=a;a--){if("current-item"===b[a].id){0<=a-1&&(b[a].id="item-"+b[a].getAttribute("data-item-id"),b[a-1].id="current-item",e(b[a-1]));break}}else b[b.length-1].id="current-item",e(b[b.length-1])},ShowHelp:function(){open("?action=show-help","Help","width=320,height=450,location=no,scrollbars=no,status=no,toolbar=no")},IsListing:d}}();Miniflux.App.Run();
|
||||
var Miniflux={};Miniflux.App=function(){return{Run:function(){Miniflux.Event.ListenKeyboardEvents();Miniflux.Event.ListenMouseEvents()}}}();
|
||||
Miniflux.Feed=function(){var e=[],d=[];return{Update:function(a,d){var e=document.getElementById("items-count-"+a);if(e){e.parentNode.className="loading-icon";var c=new XMLHttpRequest;c.onload=function(){e.parentNode.className="";var c=JSON.parse(this.responseText);if(c.result){var f=c.items_count,g=document.getElementById("items-count-"+a);g&&(g.innerHTML=f.items_unread+"/"+f.items_total)}d&&d(c)};c.open("POST","?action=refresh-feed&feed_id="+a,!0);c.send()}},UpdateAll:function(){for(var a=document.getElementsByTagName("a"),
|
||||
b=0,h=a.length;b<h;b++){var c=a[b].getAttribute("data-feed-id");c&&e.push(parseInt(c))}var k=setInterval(function(){for(;0<e.length&&5>d.length;){var c=e.shift();d.push(c);Miniflux.Feed.Update(c,function(c){c=d.indexOf(c.feed_id);0<=c&&d.splice(c,1);0===e.length&&0===d.length&&(clearInterval(k),window.location.href="?action=unread")})}},100)}}}();
|
||||
Miniflux.Item=function(){function e(c){return item_id=c.getAttribute("data-item-id")}function d(c){if(c&&c.hasAttribute("data-reverse-label")){var a=c.innerHTML;c.innerHTML=c.getAttribute("data-reverse-label");c.setAttribute("data-reverse-label",a)}}function a(c){"mouse"!==Miniflux.Event.lastEventType&&Miniflux.Nav.SelectNextItem();c.parentNode.removeChild(c);var a=document.getElementById("page-counter");if(a){c=c.getAttribute("data-item-page");var d=parseInt(a.textContent,10)-1,b=document.getElementsByTagName("article");
|
||||
if(0===d||0===b.length)window.location=location.href;a.textContent=d;switch(c){case "unread":document.title="Miniflux ("+d+")";document.getElementById("nav-counter").textContent=d;break;case "feed-items":document.title="("+d+") "+a.parentNode.firstChild.nodeValue;break;default:document.title=a.parentNode.firstChild.nodeValue+" ("+d+")"}}}function b(c){var b=e(c),f=new XMLHttpRequest;f.onload=function(){if(Miniflux.Nav.IsListing())if(c.getAttribute("data-hide"))a(c);else{c.setAttribute("data-item-status",
|
||||
"read");var b=c.querySelector("a.mark");d(b);(b=c.querySelector("a.mark"))&&b.setAttribute("data-action","mark-unread")}};f.open("POST","?action=mark-item-read&id="+b,!0);f.send()}function h(c){var b=e(c),f=new XMLHttpRequest;f.onload=function(){if(Miniflux.Nav.IsListing())if(c.getAttribute("data-hide"))a(c);else{c.setAttribute("data-item-status","unread");var b=c.querySelector("a.mark");d(b);(b=c.querySelector("a.mark"))&&b.setAttribute("data-action","mark-read")}};f.open("POST","?action=mark-item-unread&id="+
|
||||
b,!0);f.send()}return{MarkAsRead:b,MarkAsUnread:h,MarkAsRemoved:function(c){var b=e(c),d=new XMLHttpRequest;d.onload=function(){Miniflux.Nav.IsListing()&&a(c)};d.open("POST","?action=mark-item-removed&id="+b,!0);d.send()},SwitchBookmark:function(c){var b=e(c),f="1"===c.getAttribute("data-item-bookmark")?"0":"1",g=new XMLHttpRequest;g.onload=function(){if(Miniflux.Nav.IsListing()&&"bookmarks"===c.getAttribute("data-item-page"))a(c);else if(c.setAttribute("data-item-bookmark",f),Miniflux.Nav.IsListing()){var b=
|
||||
c.querySelector("a.bookmark");d(b)}else if((b=c.querySelector("a.bookmark-icon"))&&b.hasAttribute("data-reverse-title")){var e=b.getAttribute("title");b.setAttribute("title",b.getAttribute("data-reverse-title"));b.setAttribute("data-reverse-title",e)}};g.open("POST","?action=bookmark&id="+b+"&value="+f,!0);g.send()},SwitchStatus:function(c){var a=c.getAttribute("data-item-status");"read"===a?h(c):"unread"===a&&b(c)},Show:function(c){(c=c.querySelector("a.show"))&&c.click()},OpenOriginal:function(c){var a=
|
||||
c.querySelector("a.original");a&&("unread"===c.getAttribute("data-item-status")&&b(c),a.removeAttribute("data-action"),a.click())},DownloadContent:function(c){var a=document.getElementById("download-item");if(a){a.innerHTML=" "+a.getAttribute("data-before-message");a.className="loading-icon";var b=new XMLHttpRequest;b.onload=function(){var c=JSON.parse(b.responseText);a.className="";if(c.result){var d=document.getElementById("item-content");d&&(d.innerHTML=c.content);a.innerHTML=a.getAttribute("data-after-message")}else a.innerHTML=
|
||||
a.getAttribute("data-failure-message")};c=e(c);b.open("POST","?action=download-item&id="+c,!0);b.send()}},MarkListingAsRead:function(a){for(var b=document.getElementsByTagName("article"),d=[],g=0,h=b.length;g<h;g++)d.push(e(b[g]));b=new XMLHttpRequest;b.onload=function(){window.location.href=a};b.open("POST","?action=mark-items-as-read",!0);b.send(JSON.stringify(d))},ToggleRTLMode:function(){for(var a=["#current-item h1","#item-content","#current-item h2","#current-item .preview"],b=0;b<a.length;b++){var d=
|
||||
document.querySelector(a[b]);d&&(d.dir=""==d.dir?"rtl":"")}}}}();
|
||||
Miniflux.Event=function(){var e=[];return{lastEventType:"",ListenMouseEvents:function(){document.onclick=function(d){var a=d.target.getAttribute("data-action");if(a){Miniflux.Event.lastEventType="mouse";var b;a:{for(element=d.target;element&&element.parentNode;)if(element=element.parentNode,element.tagName&&"article"===element.tagName.toLowerCase()){b=element;break a}b=null}switch(a){case "refresh-all":d.preventDefault();Miniflux.Feed.UpdateAll();break;case "refresh-feed":d.preventDefault();Miniflux.Feed.Update(d.target.getAttribute("data-feed-id"));
|
||||
break;case "mark-read":d.preventDefault();Miniflux.Item.MarkAsRead(b);break;case "mark-unread":d.preventDefault();Miniflux.Item.MarkAsUnread(b);break;case "mark-removed":d.preventDefault();Miniflux.Item.MarkAsRemoved(b);break;case "bookmark":d.preventDefault();Miniflux.Item.SwitchBookmark(b);break;case "download-item":d.preventDefault();Miniflux.Item.DownloadContent(b);break;case "original-link":d.preventDefault();Miniflux.Item.OpenOriginal(b);break;case "mark-all-read":d.preventDefault();Miniflux.Item.MarkListingAsRead("?action=unread");
|
||||
break;case "mark-feed-read":d.preventDefault(),Miniflux.Item.MarkListingAsRead("?action=feed-items&feed_id="+d.target.getAttribute("data-feed-id"))}}}},ListenKeyboardEvents:function(){document.onkeypress=function(d){if(63==d.keyCode||!(d.ctrlKey||d.shiftKey||d.altKey||d.metaKey)){var a=d.target||d.srcElement;if("INPUT"!=a.tagName&&"TEXTAREA"!=a.tagName)if(Miniflux.Event.lastEventType="keyboard",e.push(d.keyCode||d.which),103===e[0])switch(e[1]){case void 0:break;case 117:window.location.href="?action=unread";
|
||||
e=[];break;case 98:window.location.href="?action=bookmarks";e=[];break;case 104:window.location.href="?action=history";e=[];break;case 115:window.location.href="?action=feeds";e=[];break;case 112:window.location.href="?action=config";e=[];break;default:e=[]}else switch(e=[],a=document.getElementById("current-item"),d.keyCode||d.which){case 100:Miniflux.Item.DownloadContent(a);break;case 112:case 107:Miniflux.Nav.SelectPreviousItem();break;case 110:case 106:Miniflux.Nav.SelectNextItem();break;case 118:Miniflux.Item.OpenOriginal(a);
|
||||
break;case 111:Miniflux.Item.Show(a);break;case 109:Miniflux.Item.SwitchStatus(a);break;case 102:Miniflux.Item.SwitchBookmark(a);break;case 104:Miniflux.Nav.OpenPreviousPage();break;case 108:Miniflux.Nav.OpenNextPage();break;case 114:Miniflux.Feed.UpdateAll();break;case 63:Miniflux.Nav.ShowHelp();break;case 122:Miniflux.Item.ToggleRTLMode()}}}}}}();
|
||||
Miniflux.Nav=function(){function e(a){var b=pageYOffset+document.documentElement.clientHeight;(0>b-(a.offsetTop+a.offsetHeight)||b-a.offsetTop>document.documentElement.clientHeight)&&window.scrollTo(0,a.offsetTop-10)}function d(){return document.getElementById("listing")?!0:!1}return{OpenNextPage:function(){var a=document.getElementById("next-page");a&&a.click()},OpenPreviousPage:function(){var a=document.getElementById("previous-page");a&&a.click()},SelectNextItem:function(){var a=document.getElementById("next-item");
|
||||
if(a)a.click();else if(d())if(a=document.getElementsByTagName("article"),document.getElementById("current-item"))for(var b=0,h=a.length;b<h;b++){if("current-item"===a[b].id){b+1<h&&(a[b].id="item-"+a[b].getAttribute("data-item-id"),a[b+1].id="current-item",e(a[b+1]));break}}else a[0].id="current-item",e(a[0])},SelectPreviousItem:function(){var a=document.getElementById("previous-item");if(a)a.click();else if(d())if(a=document.getElementsByTagName("article"),document.getElementById("current-item"))for(var b=
|
||||
a.length-1;0<=b;b--){if("current-item"===a[b].id){0<=b-1&&(a[b].id="item-"+a[b].getAttribute("data-item-id"),a[b-1].id="current-item",e(a[b-1]));break}}else a[a.length-1].id="current-item",e(a[a.length-1])},ShowHelp:function(){open("?action=show-help","Help","width=320,height=450,location=no,scrollbars=no,status=no,toolbar=no")},IsListing:d}}();Miniflux.App.Run();
|
||||
|
|
|
|||
|
|
@ -3,14 +3,6 @@ var Miniflux = {};
|
|||
Miniflux.App = (function() {
|
||||
|
||||
return {
|
||||
// Blink the refresh icon to avoid to load an image and just for fun
|
||||
BlinkIcon: function() {
|
||||
var icons = document.querySelectorAll(".loading-icon");
|
||||
|
||||
[].forEach.call(icons, function(icon) {
|
||||
icon.classList.toggle("loading-icon-blink");
|
||||
});
|
||||
},
|
||||
Run: function() {
|
||||
Miniflux.Event.ListenKeyboardEvents();
|
||||
Miniflux.Event.ListenMouseEvents();
|
||||
|
|
|
|||
|
|
@ -9,45 +9,6 @@ Miniflux.Feed = (function() {
|
|||
// Number of concurrent requests when updating all feeds
|
||||
var queue_length = 5;
|
||||
|
||||
// Interval reference for the loading icon
|
||||
var icon_interval;
|
||||
|
||||
// Show the refresh icon when updating a feed
|
||||
function showRefreshIcon(feed_id)
|
||||
{
|
||||
var container = document.getElementById("loading-feed-" + feed_id);
|
||||
|
||||
if (container) {
|
||||
container.appendChild(document.createTextNode("☀"));
|
||||
container.classList.add("loading-icon-blink");
|
||||
}
|
||||
|
||||
if (! icon_interval) {
|
||||
icon_interval = setInterval(Miniflux.App.BlinkIcon, 500);
|
||||
}
|
||||
}
|
||||
|
||||
// Hide the refresh icon after update
|
||||
function hideRefreshIcon(feed_id)
|
||||
{
|
||||
var container = document.getElementById("loading-feed-" + feed_id);
|
||||
if (container) container.innerHTML = "";
|
||||
|
||||
var container = document.getElementById("last-checked-feed-" + feed_id);
|
||||
if (container) container.innerHTML = container.getAttribute("data-after-update");
|
||||
}
|
||||
|
||||
// Get all subscriptions from the feeds page
|
||||
function loadFeeds()
|
||||
{
|
||||
var links = document.getElementsByTagName("a");
|
||||
|
||||
for (var i = 0, ilen = links.length; i < ilen; i++) {
|
||||
var feed_id = links[i].getAttribute('data-feed-id');
|
||||
if (feed_id) feeds.push(parseInt(feed_id));
|
||||
}
|
||||
}
|
||||
|
||||
// Update the items unread/total count for the feed
|
||||
function updateItemsCounter(feed_id, counts)
|
||||
{
|
||||
|
|
@ -57,52 +18,48 @@ Miniflux.Feed = (function() {
|
|||
|
||||
return {
|
||||
Update: function(feed_id, callback) {
|
||||
var container = document.getElementById("items-count-" + feed_id);
|
||||
if (! container) return;
|
||||
|
||||
showRefreshIcon(feed_id);
|
||||
|
||||
//add data-feed-id to article element and couse the first h2
|
||||
container.parentNode.className = "loading-icon";
|
||||
|
||||
var request = new XMLHttpRequest();
|
||||
|
||||
request.onload = function() {
|
||||
container.parentNode.className = "";
|
||||
|
||||
hideRefreshIcon(feed_id);
|
||||
|
||||
try {
|
||||
|
||||
var response = JSON.parse(this.responseText);
|
||||
|
||||
if (response.result) updateItemsCounter(feed_id, response.items_count);
|
||||
if (callback) callback(response);
|
||||
}
|
||||
catch (e) {}
|
||||
var response = JSON.parse(this.responseText);
|
||||
if (response.result) updateItemsCounter(feed_id, response.items_count);
|
||||
|
||||
if (callback) callback(response);
|
||||
};
|
||||
|
||||
request.open("POST", "?action=refresh-feed&feed_id=" + feed_id, true);
|
||||
request.send();
|
||||
},
|
||||
UpdateAll: function() {
|
||||
var links = document.getElementsByTagName("a");
|
||||
|
||||
loadFeeds();
|
||||
for (var i = 0, ilen = links.length; i < ilen; i++) {
|
||||
var feed_id = links[i].getAttribute('data-feed-id');
|
||||
if (feed_id) feeds.push(parseInt(feed_id));
|
||||
}
|
||||
|
||||
var interval = setInterval(function() {
|
||||
|
||||
while (feeds.length > 0 && queue.length < queue_length) {
|
||||
|
||||
var feed_id = feeds.shift();
|
||||
queue.push(feed_id);
|
||||
|
||||
Miniflux.Feed.Update(feed_id, function(response) {
|
||||
|
||||
var index = queue.indexOf(response.feed_id);
|
||||
if (index >= 0) queue.splice(index, 1);
|
||||
|
||||
if (feeds.length == 0 && queue.length == 0) {
|
||||
if (feeds.length === 0 && queue.length === 0) {
|
||||
clearInterval(interval);
|
||||
clearInterval(icon_interval);
|
||||
window.location.href = "?action=unread";
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
}, 100);
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -188,48 +188,27 @@ Miniflux.Item = (function() {
|
|||
var container = document.getElementById("download-item");
|
||||
if (! container) return;
|
||||
|
||||
var item_id = getItemID(item);
|
||||
var message = container.getAttribute("data-before-message");
|
||||
|
||||
var span = document.createElement("span");
|
||||
span.appendChild(document.createTextNode("☀"));
|
||||
span.className = "loading-icon";
|
||||
|
||||
container.innerHTML = "";
|
||||
container.className = "downloading";
|
||||
container.appendChild(span);
|
||||
container.appendChild(document.createTextNode(" " + message));
|
||||
|
||||
var icon_interval = setInterval(Miniflux.App.BlinkIcon, 250);
|
||||
|
||||
container.innerHTML = " " + container.getAttribute("data-before-message");
|
||||
container.className = "loading-icon";
|
||||
|
||||
var request = new XMLHttpRequest();
|
||||
|
||||
request.onload = function() {
|
||||
|
||||
var response = JSON.parse(request.responseText);
|
||||
clearInterval(icon_interval);
|
||||
|
||||
container.className = "";
|
||||
|
||||
if (response.result) {
|
||||
|
||||
var content = document.getElementById("item-content");
|
||||
if (content) content.innerHTML = response.content;
|
||||
|
||||
if (container) {
|
||||
var message = container.getAttribute("data-after-message");
|
||||
container.innerHTML = "";
|
||||
container.appendChild(document.createTextNode(" " + message));
|
||||
}
|
||||
|
||||
container.innerHTML = container.getAttribute("data-after-message");
|
||||
}
|
||||
else {
|
||||
|
||||
if (container) {
|
||||
var message = container.getAttribute("data-failure-message");
|
||||
container.innerHTML = "";
|
||||
container.appendChild(document.createTextNode(" " + message));
|
||||
}
|
||||
container.innerHTML = container.getAttribute("data-failure-message");
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
var item_id = getItemID(item);
|
||||
request.open("POST", "?action=download-item&id=" + item_id, true);
|
||||
request.send();
|
||||
},
|
||||
|
|
|
|||
|
|
@ -21,11 +21,9 @@
|
|||
<section class="items">
|
||||
<?php foreach ($feeds as $feed): ?>
|
||||
<article>
|
||||
<h2 class="<?= (! $feed['enabled']) ? 'feed-disabled' : '' ?>">
|
||||
<h2 <?= (! $feed['enabled']) ? 'class="feed-disabled"' : '' ?>>
|
||||
<?php if (! $feed['enabled']): ?>
|
||||
<span title="<?= t('Subscription disabled') ?>">✖</a>
|
||||
<?php else: ?>
|
||||
<span id="loading-feed-<?= $feed['id'] ?>" class="loading-icon"></span>
|
||||
<?php endif ?>
|
||||
|
||||
<?= Helper\favicon($favicons, $feed['id']) ?>
|
||||
|
|
|
|||
|
|
@ -377,7 +377,7 @@ cite {
|
|||
font-style: normal;
|
||||
}
|
||||
.text-muted,
|
||||
.downloading,
|
||||
#download-item,
|
||||
.feed-last-checked {
|
||||
color: #999999;
|
||||
}
|
||||
|
|
@ -5089,6 +5089,21 @@ span[id^="items-count-"]:before {
|
|||
span[id^="items-count-"]:after {
|
||||
content: ")";
|
||||
}
|
||||
.loading-icon:before {
|
||||
content: "☀";
|
||||
animation-name: blinker;
|
||||
-webkit-animation-name: blinker;
|
||||
/* Chrome, Safari, Opera */
|
||||
animation-duration: 500ms;
|
||||
-webkit-animation-duration: 500ms;
|
||||
/* Chrome, Safari, Opera */
|
||||
animation-timing-function: ease-in-out;
|
||||
-webkit-animation-timing-function: ease-in-out;
|
||||
/* Chrome, Safari, Opera */
|
||||
animation-iteration-count: infinite;
|
||||
-webkit-animation-iteration-count: infinite;
|
||||
/* Chrome, Safari, Opera */
|
||||
}
|
||||
.logo {
|
||||
min-width: 100px;
|
||||
min-height: 45px;
|
||||
|
|
|
|||
|
|
@ -67,6 +67,19 @@ span {
|
|||
}
|
||||
}
|
||||
|
||||
// Loading
|
||||
.loading-icon:before {
|
||||
content: "@{icon-loading}";
|
||||
animation-name: blinker;
|
||||
-webkit-animation-name: blinker; /* Chrome, Safari, Opera */
|
||||
animation-duration: 500ms;
|
||||
-webkit-animation-duration: 500ms; /* Chrome, Safari, Opera */
|
||||
animation-timing-function: ease-in-out;
|
||||
-webkit-animation-timing-function: ease-in-out; /* Chrome, Safari, Opera */
|
||||
animation-iteration-count: infinite;
|
||||
-webkit-animation-iteration-count: infinite; /* Chrome, Safari, Opera */
|
||||
}
|
||||
|
||||
// Logo
|
||||
.logo {
|
||||
min-width: 100px;
|
||||
|
|
@ -264,7 +277,7 @@ article ul.item-menu {
|
|||
}
|
||||
}
|
||||
|
||||
.downloading {
|
||||
#download-item {
|
||||
&:extend(.text-muted all);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -65,6 +65,7 @@
|
|||
@icon-read: "✔";
|
||||
@icon-bookmarked: "★";
|
||||
@icon-not-bookmarked: "☆";
|
||||
@icon-loading: "☀";
|
||||
|
||||
// Components
|
||||
// -------------------------
|
||||
|
|
|
|||
|
|
@ -377,7 +377,7 @@ cite {
|
|||
font-style: normal;
|
||||
}
|
||||
.text-muted,
|
||||
.downloading,
|
||||
#download-item,
|
||||
.feed-last-checked {
|
||||
color: #888888;
|
||||
}
|
||||
|
|
@ -5089,6 +5089,21 @@ span[id^="items-count-"]:before {
|
|||
span[id^="items-count-"]:after {
|
||||
content: ")";
|
||||
}
|
||||
.loading-icon:before {
|
||||
content: "☀";
|
||||
animation-name: blinker;
|
||||
-webkit-animation-name: blinker;
|
||||
/* Chrome, Safari, Opera */
|
||||
animation-duration: 500ms;
|
||||
-webkit-animation-duration: 500ms;
|
||||
/* Chrome, Safari, Opera */
|
||||
animation-timing-function: ease-in-out;
|
||||
-webkit-animation-timing-function: ease-in-out;
|
||||
/* Chrome, Safari, Opera */
|
||||
animation-iteration-count: infinite;
|
||||
-webkit-animation-iteration-count: infinite;
|
||||
/* Chrome, Safari, Opera */
|
||||
}
|
||||
.logo {
|
||||
min-width: 100px;
|
||||
min-height: 45px;
|
||||
|
|
|
|||
|
|
@ -67,6 +67,19 @@ span {
|
|||
}
|
||||
}
|
||||
|
||||
// Loading
|
||||
.loading-icon:before {
|
||||
content: "@{icon-loading}";
|
||||
animation-name: blinker;
|
||||
-webkit-animation-name: blinker; /* Chrome, Safari, Opera */
|
||||
animation-duration: 500ms;
|
||||
-webkit-animation-duration: 500ms; /* Chrome, Safari, Opera */
|
||||
animation-timing-function: ease-in-out;
|
||||
-webkit-animation-timing-function: ease-in-out; /* Chrome, Safari, Opera */
|
||||
animation-iteration-count: infinite;
|
||||
-webkit-animation-iteration-count: infinite; /* Chrome, Safari, Opera */
|
||||
}
|
||||
|
||||
// Logo
|
||||
.logo {
|
||||
min-width: 100px;
|
||||
|
|
@ -264,7 +277,7 @@ article ul.item-menu {
|
|||
}
|
||||
}
|
||||
|
||||
.downloading {
|
||||
#download-item {
|
||||
&:extend(.text-muted all);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -65,6 +65,7 @@
|
|||
@icon-read: "✔";
|
||||
@icon-bookmarked: "★";
|
||||
@icon-not-bookmarked: "☆";
|
||||
@icon-loading: "☀";
|
||||
|
||||
// Components
|
||||
// -------------------------
|
||||
|
|
|
|||
|
|
@ -65,6 +65,21 @@ article, aside, details, figcaption, figure, footer, header, hgroup, main, menu,
|
|||
header nav li > a:before, .page-header ul li a, .items .item-menu li a:before {
|
||||
font-family: "FontAwesome"; }
|
||||
|
||||
.loading-icon:before {
|
||||
content: "☀";
|
||||
animation-name: blinker;
|
||||
-webkit-animation-name: blinker;
|
||||
/* Chrome, Safari, Opera */
|
||||
animation-duration: 500ms;
|
||||
-webkit-animation-duration: 500ms;
|
||||
/* Chrome, Safari, Opera */
|
||||
animation-timing-function: ease-in-out;
|
||||
-webkit-animation-timing-function: ease-in-out;
|
||||
/* Chrome, Safari, Opera */
|
||||
animation-iteration-count: infinite;
|
||||
-webkit-animation-iteration-count: infinite;
|
||||
/* Chrome, Safari, Opera */ }
|
||||
|
||||
form {
|
||||
background-color: #fFFFFF;
|
||||
padding: 10px; }
|
||||
|
|
|
|||
|
|
@ -37,4 +37,5 @@ $icon-bracket-open: "(";
|
|||
$icon-bracket-close: ")";
|
||||
$icon-read: "✔";
|
||||
$icon-bookmarked: "★";
|
||||
$icon-not-bookmarked: "☆";
|
||||
$icon-not-bookmarked: "☆";
|
||||
$icon-loading: "☀";
|
||||
|
|
@ -8,3 +8,16 @@
|
|||
%awesome {
|
||||
font-family: "FontAwesome";
|
||||
}
|
||||
|
||||
// Loading
|
||||
.loading-icon:before {
|
||||
content: $icon-loading;
|
||||
animation-name: blinker;
|
||||
-webkit-animation-name: blinker; /* Chrome, Safari, Opera */
|
||||
animation-duration: 500ms;
|
||||
-webkit-animation-duration: 500ms; /* Chrome, Safari, Opera */
|
||||
animation-timing-function: ease-in-out;
|
||||
-webkit-animation-timing-function: ease-in-out; /* Chrome, Safari, Opera */
|
||||
animation-iteration-count: infinite;
|
||||
-webkit-animation-iteration-count: infinite; /* Chrome, Safari, Opera */
|
||||
}
|
||||
|
|
@ -149,6 +149,6 @@ textarea:focus {
|
|||
color: #fff;
|
||||
}
|
||||
|
||||
.loading-icon {
|
||||
.loading-icon:before {
|
||||
color: #fff;
|
||||
}
|
||||
|
|
@ -178,6 +178,6 @@ textarea:focus {
|
|||
color: #fff;
|
||||
}
|
||||
|
||||
.loading-icon {
|
||||
.loading-icon:before {
|
||||
color: #fff;
|
||||
}
|
||||
Loading…
Reference in New Issue