Commit 159e3a1f authored by yPhil's avatar yPhil

Sys: Menus in hard containers: PTL.sideMenu(action)

parent f5bae455
......@@ -15,7 +15,7 @@
"start": "pm2 start -f bin/www --watch --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.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: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 -m -o dist/js/PTL.post.min.js",
"build:js": "mkdir -p dist/js cache-favicons && 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"
......
......@@ -167,27 +167,17 @@ a:link {
text-decoration: none;
}
/* .ui-state-active, */
/* .ui-widget-content .ui-state-active, */
/* .ui-widget-header .ui-state-active, */
/* a.ui-button:active, */
/* .ui-button:active, */
/* .ui-button.ui-state-active:hover { */
/* border: var(--color-oct); */
/* background: var(--color-oct); */
/* color: var(--color-pri); */
/* } */
.ui-tab.ui-state-default {
background: var(--color-sep);
background: var(--color-qua);
border-right: 1px solid var(--color-sep) !important;
}
.ui-tab {
padding: 0 !important;
.ui-tab.ui-state-default a:visited {
color: var(--color-pri);
}
.ui-tab.ui-state-active {
background: var(--color-oct);
.ui-tab {
padding: 0 !important;
}
.ui-tab.ui-state-hover a,
......@@ -197,7 +187,11 @@ a:link {
}
.ui-tab.ui-state-hover {
background: var(--color-non);
background: var(--color-sep);
}
.ui-tab.ui-state-active {
background: var(--color-oct);
}
#tab-names,
......@@ -378,7 +372,7 @@ legend {
font-size: 9pt;
}
div#sideMenu {
nav#side-menu {
border: none !important;
height: 100%;
left: -291px;
......@@ -425,11 +419,11 @@ div#sideMenu {
text-shadow: #FC0 1px 0 10px;
}
div#sideMenu.expanded {
nav#side-menu.expanded {
left: 0px;
}
div#sideMenu,
nav#side-menu,
#topnav,
.ui-dialog,
.ui-dialog .ui-dialog-buttonpane {
......@@ -454,7 +448,7 @@ i.tabCloser {
top: 3px;
}
div#sideMenu {
nav#side-menu {
animation: fadeIn ease 6s;
}
......@@ -532,12 +526,12 @@ fieldset {
}
.ui-button-icon-only {
/* color: var(--ui-color-qua) !important; */
border: 1px solid var(--ui-color-sep);
border: none;
}
.ui-button-icon-only:hover {
background-color: var(--ui-color-sec);
.ui-button-icon-only:hover,
.ui-button-icon-only:focus {
color: var(--ui-color-pri);
border: 1px solid var(--ui-color-sec);
}
......@@ -668,7 +662,7 @@ label#killFeed:active {
flex: 1;
}
div#sideMenu .flexBox > * {
nav#side-menu .flexBox > * {
margin-bottom: .4em;
}
......@@ -956,26 +950,6 @@ li.feed {
color: var(--ui-color-rss);
}
/* #new-group a:link, */
/* #new-group a:visited, */
/* li.ui-tabs-tab a.ui-tabs-anchor:hover, */
/* li.ui-tabs-active a.ui-tabs-anchor:link { */
/* color: var(--color-sec) !important; */
/* } */
/* .ui-state-hover a, */
/* .ui-state-hover a:hover, */
/* .ui-state-hover a:link, */
/* .ui-state-hover a:visited, */
/* .ui-state-focus a, */
/* .ui-state-focus a:hover, */
/* .ui-state-focus a:link, */
/* .ui-state-focus a:visited, */
/* a.ui-button:hover, */
/* a.ui-button:focus { */
/* color: var(--color-sec); */
/* } */
li.source-item {
-moz-hyphens: auto;
-ms-hyphens: auto;
......
......@@ -38,10 +38,10 @@ PTL.dialog = {
});
$('.helpIntroUI').button().on('click', function() {
PTL.dialog.kill($dialog);
$('#tabs').tabs('option', 'active', 0);
$('#overlay').removeClass('visible');
$('#menu').removeClass('expanded');
PTL.dialog.kill($dialog);
$('#tabs').tabs('option', 'active', 0);
PTL.utilities.help('ui');
});
......
......@@ -5,16 +5,13 @@ var PTL = (function() {
return {
// language: Prefs.readConfig('lang'),
language: 'en',
start : function() {
$('nav#topMenu')
$('nav#top-menu')
.load('/static/templates/menu.html div#topnav', null);
$('aside div#sideMenu')
.load('/static/templates/menu.html form#sideMenu', function () {
console.log('menu : (%s)', $(this).attr('id'));
$('nav#side-menu')
.load('/static/templates/menu.html form#side-menu', function () {
var $menu = $(this),
$overlay = $('#overlay'),
......@@ -26,13 +23,14 @@ var PTL = (function() {
$slider = $('div#gallerySpeedSlider'),
$spinner = $('#gallerySpeedSpinner');
console.log('menu : (%s)', $menu.attr('class'));
$('button').button();
PTL.sync.attachWidget();
$('body').on('click','#menuButton', function() {
$overlay.toggleClass('visible');
$menu.toggleClass('expanded');
PTL.sideMenu('toggle');
});
$('body').on('click','#helpButton', function() {
......@@ -41,8 +39,7 @@ var PTL = (function() {
$('body').on('click','#newSourceButton', function() {
var $openGroupPanel = $($('.ui-tabs-active').find('a').attr('href')).find('.column').first();
$overlay.removeClass('visible');
$menu.removeClass('expanded');
PTL.sideMenu('close');
PTL.feed.make($openGroupPanel, 'New Feed', 'mixed', 8, true);
});
......@@ -52,8 +49,7 @@ var PTL = (function() {
});
$overlay.click(function() {
$(this).removeClass('visible');
$menu.removeClass('expanded');
PTL.sideMenu('close');
});
$(document).keydown(function(event) {
......@@ -240,7 +236,24 @@ var PTL = (function() {
});
},
tr : function( string ) {
sideMenu: function(action) {
var $overlay = $('#overlay'),
$sideMenu = $('nav#side-menu');
if (action == 'open') {
$overlay.addClass('visible');
$sideMenu.addClass('expanded');
} else if (action == 'close') {
$overlay.removeClass('visible');
$sideMenu.removeClass('expanded');
} else {
$overlay.toggleClass('visible');
$sideMenu.toggleClass('expanded');
}
},
tr: function( string ) {
var _trAux,
stringVarRegExp = /(%.)/,
matchData,
......
/*!
* @base: public/js/PTL.menu.js
*
* @Source: PTL.menu.js
*
* @licstart The following is the entire license notice for the
* JavaScript code in this page.
*
* Copyright (C) 2018 Philippe Y Coatmeur
*
* The JavaScript code in this page is free software: you can
* redistribute it and/or modify it under the terms of the GNU
* General Public License (GNU GPL) as published by the Free Software
* Foundation, either version 3 of the License, or (at your option)
* any later version. The code is distributed WITHOUT ANY WARRANTY;
* without even the implied warranty of MERCHANTABILITY or FITNESS
* FOR A PARTICULAR PURPOSE. See the GNU GPL for more details.
*
* As additional permission under GNU GPL version 3 section 7, you
* may distribute non-source (e.g., minimized or compacted) forms of
* that code without the copy of the GNU GPL normally required by
* section 4, provided you include this license notice and a URL
* through which recipients can access the Corresponding Source.
*
* @licend The above is the entire license notice
* for the JavaScript code in this page.
*
*/
PTL.menu = {
top:function() {
$('<div id="topMenu">').appendTo($('header')).load('/static/templates/menu.html nav#topnav', null);
},
side:function() {
$('<div id="sideMenu">').appendTo($('body')).load('/static/templates/menu.html form#sideMenu', function() {
var $menu = $('#sideMenu'),
$overlay = $('#overlay'),
$sourceCodeButton = $('button#sourceCode'),
$importButton = $("button#fileImport"),
$fileImportInput = $("input#fileImport"),
$saveButton = $('#saveTabs'),
$langMenu = $('select#language'),
$slider = $('div#gallerySpeedSlider'),
$spinner = $('#gallerySpeedSpinner');
$('button').button();
PTL.sync.attachWidget();
$('body').on('click','#menuButton', function() {
$overlay.toggleClass('visible');
$menu.toggleClass('expanded');
});
$('body').on('click','#helpButton', function() {
PTL.dialog.help();
});
$('body').on('click','#newSourceButton', function() {
var $openGroupPanel = $($('.ui-tabs-active').find('a').attr('href')).find('.column').first();
$overlay.removeClass('visible');
$menu.removeClass('expanded');
PTL.feed.make($openGroupPanel, 'New Feed', 'mixed', 8, true);
});
$sourceCodeButton.click(function(event) {
event.preventDefault();
window.open('https://framagit.org/yphil/petrolette');
});
$overlay.click(function() {
$(this).removeClass('visible');
$menu.removeClass('expanded');
});
$(document).keydown(function(event) {
if (event.keyCode === $.ui.keyCode.ESCAPE) {
$('.column' ).sortable('cancel');
}
});
var $widget = $('#remotestorage-widget');
var $readMore = $('<a>')
.attr('class', 'rs-help')
.attr('href', 'https:remotestorage.io/')
.text(PTL.tr('Read more.'));
$widget.find('.rs-short-desc').text(PTL.tr('Pétrolette allows you to sync data with a storage of your choice ; '))
.append($readMore);
var $fuckingButton = $widget.find('.rs-choose-rs');
$fuckingButton.css('border-color', '#f00');
$fuckingButton.click(function (event) {
event.preventDefault();
});
PTL.utilities.translate();
$langMenu.val(PTL.prefs.readConfig('lang')).prop('selected', true);
$langMenu.change(function() {
var selectedLang = $(this).val();
PTL.language = selectedLang;
PTL.prefs.writeConfig('lang', selectedLang);
PTL.utilities.translate();
});
$importButton.click(function () {
$("input#fileImport").click();
return false;
});
$saveButton.click(function () {
PTL.prefs.exportConfig(PTL.tab.list(), 'petrolette.conf');
return false;
});
$(".checkboxradio").checkboxradio({
icon: false
});
$(this).find('input#' + PTL.prefs.readConfig('theme')).prop("checked", true)
.checkboxradio('refresh');
$('.themeSwitcher').change(function() {
$("#theme").attr({href : '/static/css/themes/' + $(this).attr('value') + '.css'});
PTL.prefs.writeConfig('theme', $(this).attr('value'));
});
var gallerySlideshowSpeed = PTL.prefs.readConfig('gallerySlideshowSpeed');
var gallerySlideTransition = PTL.prefs.readConfig('gallerySlideTransition');
// $.fancybox.defaults.thumbs.autoStart = true;
$.fancybox.defaults.transitionEffect = gallerySlideTransition;
$.fancybox.defaults.slideShow.speed = gallerySlideshowSpeed;
$menu.find('select#gallerySlideTransition').change(function() {
$.fancybox.defaults.transitionEffect = $(this).val();
PTL.prefs.writeConfig('gallerySlideTransition', $(this).val());
});
$menu.find('select#gallerySlideTransition').val(gallerySlideTransition);
if (PTL.prefs.readConfig('tabDropActivate') === 'true')
$('input#tabDropActivate').prop('checked', true).checkboxradio('refresh');
else
$('input#tabDropActivate').prop('checked', false).checkboxradio('refresh');
$('input#tabDropActivate').change(function() {
PTL.prefs.writeConfig('tabDropActivate', $(this).prop('checked'));
});
$spinner.spinner({
min: 0.5,
max: 10000,
step: 0.5,
classes: {
"ui-spinner": "shrink ui-corner-all",
"ui-spinner-down": "ui-corner-br",
"ui-spinner-up": "ui-corner-tr"
}
});
$spinner.spinner('value', PTL.utilities.milliToSecs(gallerySlideshowSpeed));
$spinner.on( 'spinstop', function() {
$slider.slider( 'option', 'value', $(this).val() * 1000);
$('.ui-slider-handle').text(PTL.utilities.milliToSecs($(this).val() * 1000) + 's');
});
$slider.slider({
classes: {
"ui-slider": "grow ui-corner-all",
"ui-slider-handle": "ui-corner-all",
"ui-slider-range": "ui-corner-all ui-widget-header"
},
value: gallerySlideshowSpeed,
min: 500,
max: 10000,
step: 500,
create: function() {
$(this).find('.ui-slider-handle').text(PTL.utilities.milliToSecs(gallerySlideshowSpeed) + 's');
},
slide: function(event, ui) {
// $('#gallerySlideshowSpeedValue').text(ui.value + 'ms');
$spinner.val(PTL.utilities.milliToSecs(ui.value));
$(this).find('.ui-slider-handle').text(PTL.utilities.milliToSecs(ui.value) + 's');
},
change: function(event, ui) {
PTL.prefs.writeConfig('gallerySlideshowSpeed', ui.value);
$('#tabs').find("[data-fancybox]").fancybox({
slideShow: {
speed: ui.value
}
});
}
});
// File reader
$fileImportInput.change(function(evt){
var f = evt.target.files[0],
reader = new FileReader();
reader.onload = (function() {
return function(e) {
function isOk(o) {
var isValid = false;
if (Object.prototype.toString.call(o) === '[object Array]') {
isValid = o.some(obj => Array.isArray(obj.feeds) && obj.feeds.some(feed => Object.prototype.hasOwnProperty.call(feed, 'url')));
} else {
isValid = false;
}
return isValid;
}
var y = e.target.result;
function isJsonString(str) {
try {
JSON.parse(str);
} catch (e) {
return false;
}
return true;
}
var p = false;
if (isJsonString(y)) {
p = JSON.parse(y);
} else {
console.error('Pétrolette | ' + PTL.tr('This file is bad [%1]', f.name));
}
if (p && isOk(p) === true){
console.info('Pétrolette | ' + PTL.tr('Loading of [%1] OK', f.name));
PTL.tab.populate(p, true);
} else {
console.error('Pétrolette | ' + PTL.tr('This file is bad [%1]', f.name));
}
};
})(f);
reader.readAsText(f);
});
});
}
};
......@@ -257,7 +257,7 @@ PTL.utilities = {
progress.init = function( steps ) {
var $progressBar = $('div#progressBar');
var $progressBar = $('nav#side-menu').find('div#progressBar');
this.progressBar = $progressBar;
var $progressLabel = $( ".progress-label" );
......
......@@ -43,7 +43,7 @@
</div>
<form id="sideMenu">
<form id="side-menu" class="plip">
<fieldset class="menuForm ui-widget ui-widget-content ui-corner-all">
<legend id="languageLegend"
class="ui-corner-top translate"
......
......@@ -85,40 +85,35 @@
<i class="ui-icon"></i>
</div>
<nav id="topMenu"></nav>
<nav id="plopMenu"></nav>
<aside>
<div id="sideMenu"></div>
</aside>
<noscript>
<div id="no-script">
<h1>Uh-oh</h1>
<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>
<nav id="top-menu" class="plop"></nav>
<nav id="side-menu"></nav>
<main>
<div id="tabs">
<ul id="tab-names"></ul>
</div>
<noscript>
<div id="no-script">
<h1>Uh-oh</h1>
<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>
<div id="dialogs"></div>
</main>
<footer>
<span id="scroll-top">
<i class="icon-up"></i>
</span>
</footer>
</main>
<script src="/static/js/PTL.utilities.js"></script>
<script src="/static/js/PTL.tab.js"></script>
......
......@@ -117,12 +117,6 @@
<td><a href="/static/js/PTL.i18n.js">PTL.i18n.js</a></td>
</tr>
<tr>
<td><a href="/static/js/PTL.menu.js">PTL.menu.js</a></td>
<td><a href="http://www.gnu.org/licenses/gpl-3.0.html"> --- </a></td>
<td><a href="/static/js/PTL.menu.js">PTL.menu.js</a></td>
</tr>
<tr>
<td><a href="/static/js/PTL.utilities.js">PTL.utilities.js</a></td>
<td><a href="http://www.gnu.org/licenses/gpl-3.0.html"> --- </a></td>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment