Commit b9a303d4 authored by yPhil's avatar yPhil

Sys: Flat JS

parent fca669fa
......@@ -2112,12 +2112,6 @@
}
}
},
"parallelshell": {
"version": "3.0.2",
"resolved": "https://registry.npmjs.org/parallelshell/-/parallelshell-3.0.2.tgz",
"integrity": "sha512-aW73W8tmYiFZtQi41pweV3WWT6o/EvSxAVQHbumOhN53H47OuWQwrRc11xQ2i44GFvR5AjtzhD92r8Kv9X+7Iw==",
"dev": true
},
"parse-glob": {
"version": "3.0.4",
"resolved": "https://registry.npmjs.org/parse-glob/-/parse-glob-3.0.4.tgz",
......
......@@ -14,8 +14,8 @@
"scripts": {
"start": "pm2 start -f bin/www --log-date-format='YYYY-MM-DD HH:mm Z' --name PTL",
"stop": "pm2 stop PTL",
"build:pre": "uglifyjs public/js/PTL.main.js public/js/PTL.prefs.js public/js/PTL.i18n.js -m -o dist/js/PTL.pre.js",
"build:post": "uglifyjs public/js/PTL.utilities.js public/js/PTL.tab.js public/js/PTL.feed.js public/js/PTL.dialog.js public/js/PTL.sync.js public/js/PTL.menu.js -m -o dist/js/PTL.post.js",
"build:pre": "uglifyjs public/js/PTL.main.js public/js/PTL.prefs.js public/js/PTL.i18n.js -m -o dist/js/PTL.pre.min.js",
"build:post": "uglifyjs public/js/PTL.utilities.js public/js/PTL.tab.js public/js/PTL.feed.js public/js/PTL.dialog.js public/js/PTL.sync.js public/js/PTL.menu.js -m -o dist/js/PTL.post.min.js",
"build:js": "mkdir -p dist/js && npm run build:pre && npm run build:post",
"watch:js": "onchange 'public/js/*.js' -- npm run build:js",
"postinstall": "npm run build:js && bower install"
......
......@@ -76,7 +76,15 @@
src: url('/static/font/BebasNeue.otf') format("opentype");
}
body {
color: var(--color-pri);
background-color: var(--bg-color-ter);
font-family: Arial,Helvetica,sans-serif;
margin:0;
}
#noScript {
padding: 1em 0;
margin: 25% auto;
background: var(--ui-color-qua);
}
......@@ -103,17 +111,6 @@
font-family: fontello;
}
body {
background-color: var(--bg-color-ter);
font-family: Arial,Helvetica,sans-serif;
margin:0;
}
html,
body {
color: var(--color-pri);
}
h1,
h2,
h3,
......@@ -131,7 +128,7 @@ p,
.ui-dialog,
div.dialog {
line-height: 1.5em;
color: var(--color-pri);
color: var(--ui-color-pri);
}
ul {
......@@ -140,6 +137,21 @@ ul {
padding:0;
}
#noScript ul {
list-style-type: disc;
/* padding: .2em; */
}
#noScript h1 {
font-style: italic;
color: var(--ui-color-danger);
}
#noScript ul > li {
margin: .3em 0;
/* padding: .2em; */
}
a:link {
color: var(--color-pri);
text-decoration: none;
......@@ -336,7 +348,7 @@ div#sideMenu {
padding: 45px 0 0 0;
position: fixed;
top: 0;
transition: all 150ms ease-out;
transition: all .2s ease-out;
width: 275px;
z-index:11;
}
......@@ -684,42 +696,6 @@ div.testFlex {
margin-bottom:0;
}
/* Wait screen */
#waitScreen{
background-color: #7C818C;
}
#waitScreen > .wspinner {
width: 200px;
height: 200px;
margin: 30% auto;
background-color: #7395AE;
border-radius: 100%;
-webkit-animation: sk-scaleout 1.0s infinite ease-in-out;
animation: sk-scaleout 1.0s infinite ease-in-out;
}
@-webkit-keyframes sk-scaleout {
0% { -webkit-transform: scale(0) }
100% {
-webkit-transform: scale(1.0);
opacity: 0;
}
}
@keyframes sk-scaleout {
0% {
-webkit-transform: scale(0);
transform: scale(0);
} 100% {
-webkit-transform: scale(1.0);
transform: scale(1.0);
opacity: 0;
}
}
#tabs {
white-space: nowrap;
overflow: hidden;
......@@ -794,33 +770,24 @@ li.mobTab,
ul.tabSort {
column-gap: .4em;
columns: var(--columns);
padding: 0 .2em .2em;
transition: all .5s ease-in-out;
padding: .4em .2em;
}
/* Feed */
li.feed {
font-family: -apple-system, BlinkMacSystemFont,
"Segoe UI", "Roboto", "Oxygen",
"Ubuntu", "Cantarell", "Fira Sans",
"Droid Sans", "Helvetica Neue", sans-serif;
/* font-size: 1.6rem; */
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
font-weight: 600 !important;
vertical-align:top;
margin: .4em 0 0 0;
display: inline-block;
margin: 0 0 .4em 0;
page-break-after: always;
page-break-before: always;
page-break-inside: avoid;
break-inside: avoid;
transition: all .2s linear;
}
.selected,
li.feed {
width: 100%;
min-height:20px !important;
width: 100%;
}
.feedBody {
......@@ -832,26 +799,23 @@ li.feed {
}
.truncate {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.mobHeader {
/* min-height:20px; */
height: var(--var-header-height);
max-height: var(--var-header-height);
display: flex;
flex-direction:row;
/* align-content: stretch; */
height: var(--var-header-height);
max-height: var(--var-header-height);
padding:0;
}
.flexGrow {
flex-grow: 0 !important;
flex-shrink: 0 !important;
flex-basis: var(--var-controls-flex-basis) !important;
flex-basis: var(--var-controls-flex-basis);
flex-grow: 0;
flex-shrink: 0;
}
.open {
......@@ -859,8 +823,8 @@ li.feed {
}
.tabSort .ui-sortable-placeholder {
visibility: visible !important;
border: 3px dashed var(--ui-color-sec) !important;
visibility: visible;
outline: 3px dashed var(--ui-color-sec) !important;
}
.mobHeader > .feedTitle {
......@@ -868,11 +832,11 @@ li.feed {
flex-basis: auto;
flex-grow: 4;
flex-shrink: 1;
font-family: BebasNeueRegular, Helvetica, Arial, sans-serif !important;
margin-left: var(--title-margin-left);
font-family: BebasNeueRegular, Helvetica, Arial, sans-serif;
font-size: var(--var-controls-font-size);
font-style: italic;
font-weight: normal;
margin-left: var(--title-margin-left);
}
.mobHeader > .feedHandle {
......@@ -921,6 +885,11 @@ li.feed {
margin: 0 0 0 2px;
}
.feed * {
transition: all .1s linear;
}
.mobHeader > .feedToggle {
margin: 2px;
flex-basis: auto;
......@@ -988,13 +957,13 @@ li.feedItem {
word-wrap: break-word;
}
div.itemDiv img {
max-width:30%;
li.feedItem > div.itemDiv > a > img {
float:left;
margin: 0 .2rem .2rem 0; /* Some gutter */
margin: 0 .2rem .2rem 0;
max-width:30%;
}
div.itemDiv img.full {
li.feedItem > div.itemDiv > a > img.full {
min-width:100%;
}
......@@ -1015,17 +984,26 @@ li.feedItem:nth-child(even) {
table tr:hover,
li.feedItem:hover {
color: var(--bg-color-sec) !important;
background-color: var(--bg-color-pri) !important;
color: var(--bg-color-sec) !important;
}
li.feed div.feedBody {
border-right: 1px solid var(--bg-color-qua);
border-bottom: 1px solid var(--bg-color-qua);
border-left: 1px solid var(--bg-color-qua);
}
li.feed:hover div.feedBody {
border-color: var(--bg-color-qui);
}
li.feedItem img:hover {
li.feedItem > div.itemDiv > a > img:hover {
outline: 1px solid var(--ui-color-sec);
}
li.feed {
padding: 0;
transition: all .1s ease;
}
.mobHeader > .feedHandle:hover {
......@@ -1107,7 +1085,7 @@ div.introjs-helperLayer {
display:none;
position: fixed;
top: 0;
left: 275px;
left: 0;
width: 100%;
height: 100%;
z-index: 10;
......@@ -1261,6 +1239,20 @@ div#logoTitle > .logoTitle > a:hover {
}
/* Javascript */
#js {
background-color: var(--ui-color-qua);
}
#js h1 {
padding-top: 2em;
}
#js h1,
#js p {
margin-left: 40px;
}
table {
border-collapse: collapse;
width: 90vw;
......@@ -1279,16 +1271,3 @@ table th {
background-color: #4CAF50;
color: white;
}
#js {
background: var(--ui-color-qua);
}
#js h1 {
padding-top: 2em;
}
#js h1,
#js p {
margin-left: 40px;
}
......@@ -3,12 +3,12 @@
--bg-color-sec: #eeeeee;
--bg-color-ter: #7C818C;
--bg-color-qua: #e3eff3;
--bg-color-qui: #94c2d1;
--color-pri: #3C4440;
--color-sec: #dddddd;
--color-tri: #FFDC00;
--color-ter: #FFDC00;
--color-qua: #7395AE;
--color-qui: #B0C4DE; /* visited links */
--color-qui: #788780; /* visited links */
--color-danger: #660000;
--color-link: #3C4440;
--color-link-visited: #B0C4DE;
}
......@@ -3,7 +3,7 @@
--bg-color-sec: #4B5162;
--bg-color-ter: #7C818C;
--bg-color-qua: #404552;
--bg-color-qui: #404552;
--bg-color-qui: #5a6172;
--color-pri: #ffffff;
--color-sec: #dddddd;
--color-ter: #fdfae9;
......
......@@ -38,7 +38,7 @@ PTL.feed = {
$feedIcon.click(function() {
$(this).toggleClass('down');
$(this).parent().parent().parent().children('div.feedBody').slideToggle(200);
$(this).parent().parent().parent().children('div.feedBody').slideToggle('slow');
});
$feedSelect.click(function() {
......
......@@ -49,8 +49,13 @@ PTL.i18n.translations = {
"Slideshow speed" : { fr: "Vitesse du diaporama" , ja: "スライドショーのスピード", es: "Velocidad de la presentación" },
"Slide transition" : { fr: "Transition image" , ja: "画像の遷移", es: "Transición de imagen" },
"Help" : { fr: "Aide" , ja: "助けて", es: "Ayuda" },
"WtF" : { fr: "Heu" , ja: "一体", es: "Eh" },
"Pétrolette (really) needs your help" : { fr: "Pétrolette a (vraiment) besoin de votre aide" , ja: "Pétrolette(本当に)あなたの助けが必要です", es: "Pétrolette (realmente) necesita tu ayuda" },
"WtF?" : { fr: "Heu?" , ja: "ハァッ?", es: "Eh?" },
"JS Licences" : { fr: "Licences JS" , ja: "JSライセンス", es: "Licencias JS" },
"JavaScript licencing information" : { fr: "Informations de licence JavaScript" , ja: "JavaScriptのライセンス情報", es: "Información de licencia de JavaScript" },
"Send your love to Pétrolette" : { fr: "Aider Pétrolette" , ja: "Pétroletteにあなたの愛を送る", es: "Envíale tu amor a Pétrolette" },
"English" : { fr: "English" , ja: "English", es: "English" },
"Français" : { fr: "Français" , ja: "Français", es: "Français" },
......
This diff is collapsed.
PTL.prefs = (function() {
var emptyTabList = [
{"name":"Group 1",
{"name":"News",
"feeds": [
{"url":"http://www.androidpolice.com/feed","type":"mixed","limit": 8},
{"url":"http://rss.nytimes.com/services/xml/rss/nyt/World.xml","type":"mixed","limit": 8},
{"url":"http://feeds.nature.com/nature/rss/current","type":"text","limit": 16},
{"url":"http://feeds.feedburner.com/hackaday/LgoM/","type":"mixed","limit": 16},
{"url":"http://createdigitalmusic.com/feed/","type":"mixed","limit": 16},
{"url":"https://www.nasa.gov/rss/dyn/lg_image_of_the_day.rss","type":"photo","limit": 4}
]
}
];
var newsTabList = [
{"name":"World",
"feeds": [
{"url":"http://feeds.bbci.co.uk/news/world/rss.xml","type":"mixed","limit":8},
{"url":"http://www.nytimes.com/services/xml/rss/nyt/World.xml","type":"mixed","limit": 4},
{"url":"http://feeds.reuters.com/Reuters/worldNews","type":"text","limit": 16},
{"url":"http://feeds.reuters.com/reuters/USVideoWorldNews","type":"photo","limit": 16},
{"url":"http://www.economist.com/sections/international/rss.xml","type":"text","limit": 8},
{"url":"https://www.reddit.com/.rss","type":"text","limit": 8}
]
},
{"name":"Europe",
"feeds": [
{"url":"http://www.economist.com/sections/europe/rss.xml", "type":"text", "limit": 12},
{"url":"https://feeds.feedburner.com/TechCrunch/","type":"mixed","limit": 8},
{"url":"http://xkcd.com/rss.xml","type":"photo","limit": 4},
{"url":"https://www.reddit.com/.rss","type":"text","limit": 8}
]
}
];
var miscTabList = [
{"name":"Tech",
"feeds": [
{"url":"https://feeds.feedburner.com/TechCrunch/","type":"mixed","limit": 8},
{"url":"http://feeds.reuters.com/reuters/technologyNews", "type":"text", "limit": 16},
{"url":"https://www.sciencedaily.com/rss/matter_energy/engineering.xml", "type":"mixed", "limit": 12},
{"url":"https://www.theengineer.co.uk/feed", "type":"mixed", "limit": 14},
{"url":"http://feed.cnet.com/feed/topics/tech-industry", "type":"mixed", "limit": 14},
{"url":"https://spectrum.ieee.org/rss/videos", "type":"mixed", "limit": 16}
]
},
{"name":"Computing",
{"name":"Comics",
"feeds": [
{"url":"http://feeds.reuters.com/reuters/technologyNews", "type":"text", "limit": 16},
{"url":"https://spectrum.ieee.org/rss/computing/fulltext", "type":"mixed", "limit": 12},
{"url":"https://www.technologyreview.com/c/computing/rss/", "type":"photo", "limit": 4},
{"url":"http://www.economist.com/blogs/gametheory/index.xml","type":"mixed","limit": 8},
{"url":"http://rss.slashdot.org/Slashdot/slashdot", "type":"mixed", "limit": 4},
{"url":"http://rss.slashdot.org/Slashdot/slashdot", "type":"mixed", "limit": 4},
{"url":"http://rss.slashdot.org/Slashdot/slashdot", "type":"mixed", "limit": 4},
{"url":"http://www.economist.com/topics/computer-technology/index.xml", "type":"text", "limit": 16}
{"url":"http://comicfeeds.chrisbenard.net/view/dilbert/default","type":"photo","limit": 8},
{"url":"http://xkcd.com/rss.xml","type":"photo","limit": 8},
{"url":"http://superphazed.tumblr.com/rss","type":"photo","limit": 8},
{"url":"http://phdcomics.com/gradfeed.php","type":"photo","limit": 4}
]
},
{"name":"Science",
{"name":"Movies",
"feeds": [
{"url":"http://feeds.bbci.co.uk/news/science_and_environment/rss.xml", "type":"mixed", "limit": 6},
{"url":"https://feeds.feedburner.com/TechCrunch/","type":"mixed","limit": 8},
{"url":"https://spectrum.ieee.org/rss/biomedical/fulltext","type":"mixed","limit": 4},
{"url":"https://www.technologyreview.com/topnews.rss","type":"mixed","limit": 4},
{"url":"https://www.technologyreview.com/c/biomedicine/rss/","type":"mixed","limit": 4},
{"url":"https://www.technologyreview.com/c/energy/rss/","type":"mixed","limit": 4},
{"url":"https://spectrum.ieee.org/rss/blog/energywise/fulltext","type":"mixed","limit": 4},
{"url":"https://spectrum.ieee.org/rss/blog/automaton/fulltext","type":"mixed","limit": 4},
{"url":"https://www.reddit.com/.rss","type":"text","limit": 8}
{"url":"https://thepiratebay.org/rss/top100/201","type":"text","limit": 18},
{"url":"http://www.newyorker.com/feed/culture/richard-brody","type":"mixed","limit": 8},
{"url":"http://www.metacritic.com/rss/features","type":"mixed","limit": 4}
]
},
{"name":"Comics",
{"name":"Group 3",
"feeds": [
{"url":"http://xkcd.com/rss.xml","type":"photo","limit": 8},
{"url":"http://thisisindexed.com/feed","type":"photo","limit": 8},
{"url":"http://what-if.xkcd.com/feed.atom","type":"photo","limit": 8},
{"url":"http://phdcomics.com/gradfeed.php","type":"photo","limit": 8},
{"url":"http://comicfeeds.chrisbenard.net/view/pennyarcade/default","type":"photo","limit": 8},
{"url":"http://comicfeeds.chrisbenard.net/view/dilbert/default","type":"photo","limit": 8}
{"url":"http://www.economist.com/sections/europe/rss.xml","type":"photo","limit": 8},
{"url":"https://feeds.feedburner.com/TechCrunch/","type":"photo","limit": 8},
{"url":"http://feeds.bbci.co.uk/news/technology/rss.xml?edition=uk","type":"mixed","limit": 8},
{"url":"https://hackernoon.com/feed","type":"mixed","limit": 8},
{"url":"https://www.reddit.com/.rss","type":"photo","limit": 4}
]
}
];
var defaults = {
'gallerySlideTransition': 'fade',
'gallerySlideshowSpeed': 3000,
'tabDropActivate': true,
'theme': 'day',
'theme': 'night',
'columns': 3,
'lang': 'en',
'explicitLang': false,
'tabs': JSON.stringify(emptyTabList)
};
var collections = {
'news': JSON.stringify(newsTabList),
'misc': JSON.stringify(miscTabList)
};
return {
collection:function(key) {
return collections[key];
},
isValidSourcesFile:function(sources) {
var isValid = false;
if (Object.prototype.toString.call(sources) === '[object Array]') {
isValid = sources.some(obj => Array.isArray(obj.feeds) && obj.feeds.some(feed => Object.prototype.hasOwnProperty.call(feed, 'url')));
} else {
isValid = false;
}
return isValid;
},
readConfig:function(key) {
if(typeof localStorage.getItem(key) === 'undefined' || !localStorage.getItem(key)) {
......@@ -130,16 +60,14 @@ PTL.prefs = (function() {
writeConfig:function(key, val) {
$('div#logoTitle i').addClass('writing');
localStorage.setItem(key, val);
setTimeout(function () {
$('div#logoTitle i').delay('slow').removeClass('writing');
}, 300);
},
exportConfig:function(data, fileName) {
var a = document.createElement("a");
document.body.appendChild(a);
a.style = "display: none";
......@@ -150,6 +78,7 @@ PTL.prefs = (function() {
a.download = fileName;
a.click();
window.URL.revokeObjectURL(url);
}
};
}());
......@@ -60,7 +60,7 @@ PTL.sync = (function() {
remoteStorage.petrolette.read()
.then((data) => {
if (PTL.prefs.isValidSourcesFile(JSON.parse(data))) {
if (PTL.utilities.isValidSourcesFile(JSON.parse(data))) {
console.info('Pétrolette | ' + PTL.tr('Remote file validation OK'));
......@@ -70,7 +70,7 @@ PTL.sync = (function() {
console.warn('Pétrolette | ' + PTL.tr('Remote file validation NOT OK (error [%1]) now reading from browser cache', data));
if (PTL.prefs.isValidSourcesFile(JSON.parse(PTL.prefs.readConfig('tabs')))) {
if (PTL.utilities.isValidSourcesFile(JSON.parse(PTL.prefs.readConfig('tabs')))) {
console.log('plop');
PTL.tab.populate(JSON.parse(PTL.prefs.readConfig('tabs')));
} else {
......@@ -82,7 +82,7 @@ PTL.sync = (function() {
})
.catch((err) => {
if (PTL.prefs.isValidSourcesFile(JSON.parse(PTL.prefs.readConfig('tabs')))) {
if (PTL.utilities.isValidSourcesFile(JSON.parse(PTL.prefs.readConfig('tabs')))) {
PTL.tab.populate(JSON.parse(PTL.prefs.readConfig('tabs')));
} else {
localStorage.setItem("tabs", "");
......
PTL.utilities = {
isValidSourcesFile:function(sources) {
var isValid = false;
if (Object.prototype.toString.call(sources) === '[object Array]') {
isValid = sources.some(obj => Array.isArray(obj.feeds) && obj.feeds.some(feed => Object.prototype.hasOwnProperty.call(feed, 'url')));
} else {
isValid = false;
}
return isValid;
},
isImage:function(string) {
// return string.split('.').pop() === 'jpg';
......
......@@ -194,33 +194,39 @@
<div class="flexBox">
<button id="sourceCode"
class="unique icon-petrolette translate"
data-title="Source code"
data-content="Source code"
title="Source code">
<a href="https://framagit.org/yphil/petrolette"
class="ui-button ui-widget ui-corner-all unique icon-petrolette translate"
data-title="Source code"
data-content="Source code"
title="Source code">
Source code
</button>
</a>
<button id="help"
class="grow translate helpButton"
data-title="What exactly is Pétrolette?"
title="What exactly is Pétrolette?"
data-content="WtF">
WtF
data-content="WtF?">
WtF?
</button>
<button id="donate"
class="grow translate last"
data-title="Pétrolette (really) needs your help"
title="Pétrolette (really) needs your help"
data-content="Donate">
<a href="https://liberapay.com/yPhil/donate"
class="ui-button ui-widget ui-corner-all translate last"
data-title="Send your love to Pétrolette"
title="Send your love to Pétrolette"
data-content="Donate">
Donate
</button>
</a>
<a href="/about/javascript"
class="ui-button ui-widget ui-corner-all unique translate"
data-title="JavaScript licencing information"
title="JavaScript licencing information"
data-content="JS Licences">
JS Licences
</a>
</div>
</fieldset>
<a href="/about/javascript" data-jslicense="1">JavaScript license information</a>
</form>
......@@ -41,7 +41,7 @@
<script src="/bower/remotestorage/release/remotestorage.js"></script>
<script src="/bower/rs-widget/build/widget.js"></script>
<script src="/dist/js/PTL.pre.js"></script>
<script src="/dist/js/PTL.pre.min.js"></script>
<script>
......@@ -68,8 +68,15 @@
<noscript>
<div id="noScript">
<h1>Uh-oh</h1>
<p>Pétrolette cannot work without javascript.</p>
<p>Use the force, read <a href="https://framagit.org/yphil/petrolette">the source</a>.</p>
<h3>Pétrolette cannot work without javascript.</h3>
<ul>
<li>
<a href="/about/javascript" data-jslicense="1">JavaScript license information</a>
</li>
<li>
Use the force, read <a href="https://framagit.org/yphil/petrolette">the source</a>.
</li>
</ul>
</div>
</noscript>
......@@ -86,7 +93,7 @@
</span>
</footer>
<script src="/dist/js/PTL.post.js"></script>
<script src="/dist/js/PTL.post.min.js"></script>
<script>
......
......@@ -26,8 +26,6 @@
<link rel="stylesheet" href="/static/css/themes/base/jquery-ui.min.css">
<link id="mobStyle" rel="stylesheet" href="/static/css/themes/night.css">
<link rel="stylesheet" href="/static/css/fontello.css">
<link rel="stylesheet" href="/bower/fancybox/dist/jquery.fancybox.min.css" />
<link rel="stylesheet" href="/bower/intro.js/minified/introjs.min.css" />
<link rel="stylesheet" href="/static/css/petrolette.css">
......@@ -37,10 +35,12 @@
<div id="logoTitle">
<div class="logoTitle">
<a href="http://takeoff.petrolette.space">Pétrolette</a>
<a href="/">Pétrolette</a>
</div>
<div class="logoType">
<i class="icon-petrolette"></i>
<a href="/">
<i class="icon-petrolette"></i>
</a>
</div>
<span id="betaBadge">beta</span>
</div>
......@@ -63,7 +63,7 @@
<tr>
<td><a href="/bower/jquery-ui/jquery-ui.min.js">jquery-ui.min.js</a></td>