Commit c5b310ca authored by yPhil's avatar yPhil

SYS: CSS loading sequence

parent 26e69f71
......@@ -25,6 +25,7 @@ build/Release
# Dependency directories
node_modules
bower_components
jspm_packages
# Optional npm cache directory
......@@ -32,3 +33,6 @@ jspm_packages
# Optional REPL history
.node_repl_history
# Misc
tmp
......@@ -47,6 +47,20 @@ input {
padding: .4em;
}
.notifyjs-bootstrap-base {
background-color: var(--bg-color-sec) !important;
border-color: var(--bg-color-ter) !important;
text-shadow: none !important;
}
.notifyjs-bootstrap-base.notifyjs-bootstrap-success {
color: var(--ui-color-success) !important;
}
.notifyjs-bootstrap-base.notifyjs-bootstrap-error {
color: var(--ui-color-danger) !important;
}
input#feedGuess {
margin-right: .4em;
}
......@@ -76,6 +90,10 @@ li.mobTab:first-child {
box-shadow: none !important;
}
#tabs {
transition: all 2s ease;
}
#tabUl,
#tabs {
background: none;
......@@ -172,29 +190,6 @@ fieldset {
left: 0px;
}
#mobNotify {
bottom: 1em;
position: absolute !important;
width: 255px;
display: none;
}
#mobNotify > p {
margin:0;
}
#mobNotify > p > strong {
text-transform: uppercase;
}
#mobNotify > p > strong.error {
color: red !important;
}
#mobNotify > p > strong.success {
color: green !important;
}
#menu,
.ui-dialog,
.ui-dialog .ui-dialog-buttonpane,
......@@ -203,8 +198,7 @@ fieldset {
/* color: var(--ui-color-pri) !important; */
}
button#profile,
button#donate {
button {
text-align: left
}
......@@ -287,7 +281,6 @@ fieldset {
display:flex;
justify-content: space-between;
flex-wrap: wrap;
margin-bottom: .4em;
}
.ui-widget .ui-widget {
......@@ -310,6 +303,10 @@ fieldset {
background-color: var(--ui-color-pri);
}
.ui-button.ui-state-active:hover {
border: 1px solid var(--ui-color-ter) !important;
}
.ui-state-success {
background-color: var(--ui-color-success) !important;
}
......@@ -322,10 +319,6 @@ fieldset {
box-shadow: 0 0 3px 1px var(--ui-color-pri);
}
button#help {
margin-bottom: .4em;
}
.flexBox > label {
flex: 1;
}
......@@ -347,11 +340,13 @@ button#help {
flex: 1;
}
span.ui-spinner,
.ui-button {
margin-right: .4em;
margin-bottom: 0;
margin-bottom: .4em;
}
span.ui-spinner,
.last {
margin-right: 0;
......@@ -687,12 +682,9 @@ button > i {
}
.feedControl:hover {
color: var(--color-ter) !important;
}
.feedControl:hover,
.media:hover {
color: var(--color-ter) !important;
color: var(--ui-color-success) !important;
}
.mobHeader .ui-button {
......@@ -817,11 +809,12 @@ li.feedItem:hover {
}
.c100 {
background-color: var(--ui-bg-color-pri);
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
background-color: var(--bg-color-ter);
}
.c100 .bar, .c100 .fill {
border-color: var(--ui-color-sec);
border-color: var(--ui-color-ter);
}
.c100:hover > span {
......@@ -833,5 +826,5 @@ li.feedItem:hover {
}
.c100:after {
background-color: var(--ui-bg-color-pri);
background-color: var(--bg-color-ter);
}
......@@ -558,13 +558,13 @@ MOB.dialog = {
});
},
renameGroup:function($tab) {
editGroup:function($tab) {
$('#mobDialogs').load('/static/templates/dialogs.html #renameGroupDialog', function() {
var $dialog = $('#renameGroupDialog');
$('#mobDialogs').load('/static/templates/dialogs.html #editGroupDialog', function() {
var $dialog = $('#editGroupDialog');
$dialog.dialog({
title: MOB.tr('Edit Group'),
title: MOB.tr('Group'),
autoOpen: false,
closeOnEscape: true,
resizable: false,
......@@ -610,6 +610,10 @@ MOB.dialog = {
var $tab = $('a#' + $(this).data('tabId')).parent('li');
$tabName.click(function() {
$(this).select();
});
$tabLeft.click(function() {
MOB.utilities.moveEltLeft($tab);
});
......@@ -620,7 +624,7 @@ MOB.dialog = {
$tabNameLegend.text(MOB.tr('Group name'));
$tabName.val($(this).data('tabName')).select();
$tabName.val($(this).data('tabName'));
$(this).on('submit', function () {
$('#' + $(this).data('tabId')).text($dialog.find('#tabName').val());
......
......@@ -44,28 +44,23 @@ MOB.feed = {
$feedToggle.click(function() {
$(this).toggleClass("down");
$(this).parent().parent().parent().children('div.feedBody').slideToggle(200);
// return false;
});
$feedSelect.click(function() {
$(this).parent().parent().parent().parent().toggleClass('selected ui-state-hover');
$(this).toggleClass('icon-ok').toggleClass('icon-check-empty-1');
// return false;
});
$feedDelete.click(function() {
MOB.dialog.killFeed($(this));
// return false;
});
$feedPrefs.click(function() {
MOB.dialog.feedPrefs($(this));
// return false;
});
$feedReload.click(function() {
MOB.feed.populate($(this), progress);
// return false;
});
var $feedBody = $('<div>')
......@@ -74,11 +69,15 @@ MOB.feed = {
var $feedBodyUl = $('<ul>')
.attr('class', 'feedBody');
var $feed = $('<li id="feed-' + feedIndex + '" class="feed ui-widget" data-url="' + url + '" data-type="' + type + '" data-limit="' + limit + '"></li>');
var $feed = $('<li>')
.attr('id', 'feed-' + feedIndex)
.attr('class', 'feed no-fouc ui-widget')
.data('url', url)
.data('type', type)
.data('limit', limit);
var $header = $('<div class="mobHeader ui-widget-header">');
var $toggleDiv = $('<div class="feedToggle">');
var $controlsToggleDiv = $('<div class="controlsToggle">');
var $myControlsToggleDiv = $('<div class="myControlsToggleDiv">');
var $feedHandle = $('<div>')
......@@ -151,10 +150,6 @@ MOB.feed = {
$titleDiv.appendTo($header);
$controlsToggle.appendTo($myControlsToggleDiv);
// $myControlsToggleDiv.appendTo($header);
// $controlsToggleDiv.appendTo($feedControls);
$selectDiv.appendTo($feedControls);
$deleteDiv.appendTo($feedControls);
$prefsDiv.appendTo($feedControls);
......@@ -169,7 +164,6 @@ MOB.feed = {
if (clickNew) {
$feed.prependTo($tab);
// $feedPrefs.click()
MOB.dialog.feedPrefs($feedPrefs, true);
} else {
$feed.appendTo($tab);
......@@ -179,29 +173,20 @@ MOB.feed = {
},
populate:function($button, progress) {
var $dataStore = $button.parent().parent();
var $refreshButton = $dataStore.find('i.mobFeedRefresh');
var $header = $dataStore.parent();
var $panel = $dataStore.parent().parent().parent();
// var $feed = $('#' + id);
// var $feed = $('#' + $dataStore.data('id'));
var $feed = $dataStore.parent().parent();
var $feedTitle = $feed.children().children('.feedTitle');
var $feedBody = $feed.children().children('ul.feedBody');
var feedUrl = $dataStore.data('url');
var feedType = $dataStore.data('type');
var feedLimit = $dataStore.data('limit');
var $feedIcon = $feed.find('.feedToggle > i');
var $dataStore = $button.parent().parent(),
$refreshButton = $dataStore.find('i.mobFeedRefresh'),
$header = $dataStore.parent(),
$panel = $dataStore.parent().parent().parent(),
$feed = $dataStore.parent().parent(),
$feedTitle = $feed.children().children('.feedTitle'),
$feedBody = $feed.children().children('ul.feedBody'),
feedUrl = $dataStore.data('url'),
feedType = $dataStore.data('type'),
feedLimit = $dataStore.data('limit'),
$feedIcon = $feed.find('.feedToggle > i');
if (!MOB.utilities.isUrl(feedUrl)) {
// MOB.utilities.feedError($feed, 'dOh!');
console.info('bad URL: (%s)', feedUrl);
$header.addClass('ui-state-error');
......@@ -216,20 +201,16 @@ MOB.feed = {
return;
}
var l = MOB.utilities.getLocation(feedUrl);
var feedHost = l.protocol + '//' + l.hostname;
// const myurl = new URL(feedUrl);
const subdomain = l.hostname.substr(0, l.hostname.indexOf('.'));
if (subdomain === 'rss' || subdomain === 'feeds') {
feedHost = l.protocol + '//' + l.hostname.replace(subdomain + '.', '')
}
// console.log('HOST: (%s)', feedHost);
$refreshButton.addClass('spin');
$feed.children('.mobHeader').removeClass('ui-state-error');
......@@ -395,14 +376,14 @@ MOB.feed = {
$feedItem.addClass('mobFeedEven');
}
if (typeof mediaUrl !== 'undefined' && mediaUrl[0] == "/") {
if (mediaUrl && mediaUrl !== 'null' && typeof mediaUrl !== 'undefined' && mediaUrl[0] == "/") {
mediaUrl = feedHost + mediaUrl;
}
var $mediaLink;
var $itemMedia;
if (mediaUrl !== 'null' && typeof mediaUrl !== 'undefined') {
if (mediaUrl && mediaUrl !== 'null' && typeof mediaUrl !== 'undefined') {
$mediaLink = $('<a>')
.attr('href', mediaUrl);
......
......@@ -58,10 +58,11 @@ MOB.i18n.translations = {
"<fem>Canceled" : { fr: "Annulée", ja: "取り消し" },
"<plural>Closed" : { fr: "Clôturés", ja: "終了" },
"Support" : { fr: "Assistance", ja: "サポート" },
"Contact the WAPLANNER support" : { fr: "Contactez l'assistance WAPLANNER", ja: "WAPLANNERサポートへの連絡" },
"Message" : { fr: "Message", ja: "メッセージ" },
// Petrolette
"Group" : { fr: "Groupe", ja: "グループ", es: "Grupo" },
"Find the website\'s source" : { fr: "Trouver la source du site web" , ja: "ウェブサイトのRSSフィードを見つける", es: "Encuentra la fuente RSS del sitio web" },
"Move this source to another group" : { fr: "Déplacer cette source dans un autre groupe" , ja: "このソースを別のグループに移動する", es: "Mueva esta fuente a otro grupo" },
"What type of source? All text, all image, or mixed" : { fr: "Quel type de source? Tout le texte, toute l'image, ou les deux", ja: "どんな種類の飼料ですか? すべてのテキスト、すべてのイメージ、または混合。", es: "¿Qué tipo de source? Todo el texto, toda la imagen o mixto" },
......@@ -151,7 +152,7 @@ MOB.i18n.translations = {
"When you click an image, you can view it in a gallery, and start a slideshow." : { fr: "Un clic sur une image l'affiche dans une galerie." , ja: "イメージをクリックすると、ギャラリーでそのイメージを表示し、スライドショーを開始できます", es: "Cuando hace clic en una imagen, puede verla en una galería." },
"Help Petrolette according to your spiritual mood of the day." : { fr: "Aider (en vrai) Petrolette." , ja: "あなたの精神的な日の気分に応じてPetroletteを助けてください", es: "Ayuda a Petrolette de acuerdo con tu estado de ánimo espiritual del día." },
"This file is bad" : { fr: "Ce fichier est chelou" , ja: "このファイルは悪いです", es: "Este archivo es malo" },
"Loading of %1 OK" : { fr: "Lecture de %1 OK" , ja: "%1をロードしました。OK", es: "Cargado %1 bien" },
"Loading of [%1] OK" : { fr: "Lecture de [%1] OK" , ja: "[%1]をロードしました。OK", es: "Cargado [%1] bien" },
"Forgot what you are? Reset Petrolette groups & sources" : { fr: "Oublié ce que vous êtes? Re-initialiser Petrolette" , ja: "あなたは何かを忘れましたか? リセットPetrolette", es: "Olvidó lo que eres? Restablecer Petrolette" },
"You can't create more than %1 resources of each type." : { fr: "Vous ne pouvez pas créer plus de %1 ressources de chaque type.", ja: "各種%以上の財源を作ることはできません。" },
......
......@@ -9,7 +9,7 @@ $('<div id="menu">').appendTo($('body')).load('/static/templates/menu.html', fun
$langMenu = $('select#language'),
$help = $('button#help').button(),
$donate = $('button#donate').button(),
$profile = $('button#profile').button(),
$addSource = $('button#addSource').button(),
$slider = $('div#gallerySpeedSlider'),
$spinner = $('#gallerySpeedSpinner');
......@@ -23,7 +23,6 @@ $('<div id="menu">').appendTo($('body')).load('/static/templates/menu.html', fun
var selectedLang = $(this).val();
console.log('Lang: %s', selectedLang);
MOB.language = selectedLang;
MOB.prefs.writeConfig('lang', selectedLang);
MOB.utilities.translate();
......@@ -35,15 +34,13 @@ $('<div id="menu">').appendTo($('body')).load('/static/templates/menu.html', fun
$(this).children('i').toggleClass('close');
});
$profile.click(function (event) {
$addSource.click(function (event) {
event.preventDefault();
console.log('Click!');
$handle.click();
MOB.dialog.newContent();
// MOB.dialog.question(0);
});
$help.click(function (event) {
......@@ -64,7 +61,7 @@ $('<div id="menu">').appendTo($('body')).load('/static/templates/menu.html', fun
});
$saveButton.click(function () {
MOB.prefs.exportConfig(MOB.tab.list(), 'petrolette.json');
MOB.prefs.exportConfig(MOB.tab.list(), 'petrolette.conf');
return false;
});
......@@ -106,7 +103,6 @@ $('<div id="menu">').appendTo($('body')).load('/static/templates/menu.html', fun
MOB.prefs.writeConfig('tabDropActivate', $(this).prop('checked'));
});
$spinner.spinner({
min: 0.5,
max: 10000,
......@@ -157,9 +153,8 @@ $('<div id="menu">').appendTo($('body')).load('/static/templates/menu.html', fun
// File reader
$fileImportInput.change(function(evt){
var files = evt.target.files;
var f = files[0];
var reader = new FileReader();
var f = evt.target.files[0],
reader = new FileReader();
reader.onload = (function() {
return function(e) {
......@@ -176,7 +171,7 @@ $('<div id="menu">').appendTo($('body')).load('/static/templates/menu.html', fun
var y = e.target.result;
function IsJsonString(str) {
function isJsonString(str) {
try {
JSON.parse(str);
} catch (e) {
......@@ -187,7 +182,7 @@ $('<div id="menu">').appendTo($('body')).load('/static/templates/menu.html', fun
var p = false;
if (IsJsonString(y)) {
if (isJsonString(y)) {
p = JSON.parse(y);
} else {
$.notify(MOB.tr('This file is bad'), 'error');
......@@ -196,7 +191,7 @@ $('<div id="menu">').appendTo($('body')).load('/static/templates/menu.html', fun
// console.log('p Is array: %s', isOk(p));
if (p && isOk(p) === true){
$.notify(MOB.tr('Loaded petrolette.json OK'), 'success');
$.notify(MOB.tr('Loading of [%s] OK', f.name), 'success');
MOB.tab.populate(p, true);
} else {
$.notify(MOB.tr('This file is bad'), 'error');
......
......@@ -232,6 +232,10 @@ MOB.utilities = {
this.radialLoaderLabel.text(Math.ceil(100 * this.step / this.steps) + '%');
if ((100 * this.step / this.steps) >= 10 && (100 * this.step / this.steps) < 11) {
console.log('TEN!');
}
// this.progressElt.animate({
// width: Math.ceil(100 * this.step / this.steps) + '%'
// });
......@@ -254,27 +258,6 @@ MOB.utilities = {
return progress;
},
notify : function(type, message) {
var $p = $('#menu').find('#mobNotify > p').empty();
var $type = $('<strong>')
.addClass(type)
.addClass('translate')
.text(MOB.tr(type));
$p.append($type, ' ', message)
.parent().fadeIn('fast')
.fadeIn( 1000, function() {
$p.animate({
opacity: 0.1
}, 6500, function() {
$p.slideUp(500, function() {
$p.animate({opacity: 1}, 1);
$p.parent().fadeOut('slow');
});
});
});
},
milliToSecs : function(s) {
var ms = s % 1000;
s = (s - ms) / 1000;
......
......@@ -44,7 +44,7 @@
</p>
</div>
<div id="renameGroupDialog">
<div id="editGroupDialog">
<form>
<fieldset class="prefsForm ui-widget ui-widget-content ui-corner-all">
<legend id="tabNameLegend"
......@@ -70,7 +70,8 @@
<button type="button"
id="left"
class="ui-button grow">
class="ui-button grow"
autofocus>
<i class="icon-left-open"></i>
<span data-content="Left"
class="translate">
......
......@@ -162,19 +162,19 @@
</legend>
<div class="flexBox">
<button id="help"
data-title="Help"
title="Help"
<button id="addSource"
data-title="Add source"
title="Add source"
class="unique translate">
<i class="icon-motorcycle"></i>
<span class="translate"
data-content="Petrolette?">Petrolette?</span>
data-content="Add source">Add source</span>
</button>
<button id="profile"
class="grow icon-police translate"
data-content="Profile"
data-title="Forgot what you are? Reset Petrolette groups & sources">
<button id="help"
class="grow icon-motorcycle translate"
data-content="Help"
data-title="Help">
Profil
</button>
......@@ -188,8 +188,4 @@
</fieldset>
<fieldset id="mobNotify" class="ui-widget ui-widget-content ui-corner-all">
<legend class="ui-corner-top">Notifications</legend>
<p></p>
</fieldset>
</form>
......@@ -24,11 +24,13 @@
<link rel="stylesheet" href="/static/css/fontello.css" media="none" onload="this.media='all';">
<link rel="stylesheet" id="mobStyle" href="/static/css/themes/day.css">
<link rel="stylesheet" href="/static/css/circle.css">
<link rel="stylesheet" href="/static/css/mob-ui.css" media="none" onload="this.media='all';">
<link rel="stylesheet" href="/static/css/petrolette.css" media="none" onload="this.media='all';">
<!-- <link rel="stylesheet" media="screen" href="https://fontlibrary.org/face/grobe-deutschmeister" type="text/css"/> -->
......@@ -48,7 +50,14 @@
<script src="/static/lib/js/prefs.js"></script>
<script src="/static/lib/js/i18n.js"></script>
<script>
<style type="text/css">
#menu, #tabs {
display:none;
}
</style>
<script type="text/javascript">
document.fonts.ready.then((fontFaceSet) => {
console.log(fontFaceSet.name, 'FontFace loaded.');
......@@ -61,128 +70,145 @@
MOB.language = MOB.prefs.readConfig('lang');
$(document).ready(function() {
</script>
$( document ).keydown(function( event ) {
if ( event.keyCode === $.ui.keyCode.ESCAPE ) {
$( ".tabSort" ).sortable( "cancel" );
}
});
</head>
$("#mobStyle").attr({href : '/static/css/themes/' + MOB.prefs.readConfig('theme') + '.css'});
<body>
var $tabs = $('#tabs').tabs({
heightStyle: 'content',
activate: function(event, ui) {
<div id="tabs" style="display:none;">
<ul id="tabUl"></ul>
</div>
var $activeTab = $tabs.find('.ui-tabs-active');
<div id="mobDialogs"></div>
$(document).prop('title', $activeTab.text() + ' | Petrolette');
<div id="loadRadial" class="c100 small p0 hidden" style="display:none;">
<span>0%</span>
<div class="slice">
<div class="bar"></div>
<div class="fill"></div>
</div>
</div>
$('.tabCloser').hide();
<div id="nothingButton" class="deadCenter hidden" style="display:none;">
<button>
Whoops, no content! <br/>
Click here to add some.
</button>
</div>
$activeTab.find('.tabCloser').show();
}
</body>
});
<script src="/static/lib/js/tab.js"></script>
<script src="/static/lib/js/feed.js"></script>
<script src="/static/lib/js/dialog.js"></script>
<script src="/static/lib/js/utilities.js"></script>
<script src="/static/lib/js/menu.js"></script>
<script>
$(document).ready(function() {
$.notify.defaults({
// whether to hide the notification on click
clickToHide: true,
// whether to auto-hide the notification
autoHide: true,
// if autoHide, hide after milliseconds
autoHideDelay: 3000,
// default style
style: 'bootstrap',
// show the arrow pointing at the element
arrowShow: true,
// arrow size in pixels
arrowSize: 5,
// show animation
showAnimation: 'slideDown',
// show animation duration
showDuration: 400,
// hide animation
hideAnimation: 'slideUp',
// hide animation duration
hideDuration: 200,
// padding between element and notification
gap: 2
})
$( document ).keydown(function( event ) {
if ( event.keyCode === $.ui.keyCode.ESCAPE ) {
$( ".tabSort" ).sortable( "cancel" );
}
});
$tabs.find('.ui-tabs-nav').sortable({
axis: 'x',
items: '> li:not(#newTabButton)',
stop: function() {
$tabs.tabs('refresh');
MOB.tab.saveTabs();
}
});
$("#mobStyle").attr({href : '/static/css/themes/' + MOB.prefs.readConfig('theme') + '.css'});
$tabs.on('mouseup', '.ui-tabs-active a', function(e){
e.preventDefault();
if (e.which === 1) {
MOB.dialog.renameGroup($(this))
}
});
var $tabs = $('#tabs').tabs({
heightStyle: 'content',
activate: function(event, ui) {
$tabs.on("click", "i.tabCloser", function() {
MOB.dialog.killTab($(this));
});
var $activeTab = $tabs.find('.ui-tabs-active');
$('#nothingButton button').click(function() {
MOB.dialog.newContent();
});
$(document).prop('title', $activeTab.text() + ' | Petrolette');
// INIT
$('.tabCloser').hide();
if (MOB.utilities.isMobile()) {
console.log()
$tabs.find('.prefs').css('display', 'initial');
$activeTab.find('.tabCloser').show();
}
console.log('TABS: (%s)', $.parseJSON(MOB.prefs.readConfig('tabs')).length)
});
MOB.tab.makeNewTabButton($tabs);
$tabs.find('.ui-tabs-nav').sortable({
axis: 'x',
items: '> li:not(#newTabButton)',
stop: function() {
$tabs.tabs('refresh');
MOB.tab.saveTabs();
}
});
if ($.parseJSON(MOB.prefs.readConfig('tabs')).length > 0) {
MOB.tab.populate(JSON.parse(MOB.prefs.readConfig('tabs')));
} else {
console.error('Zero tabs!');
$('#nothingButton').fadeIn('slow');
$tabs.on('mouseup', '.ui-tabs-active a', function(e){
e.preventDefault();
if (e.which === 1) {
MOB.dialog.editGroup($(this))
}
// $tabs.find('div.feedControls').slideUp();
});
$tabs.on("click", "i.tabCloser", function() {
MOB.dialog.killTab($(this));
});