Skip to content

Commit

Permalink
Version 6.9.0
Browse files Browse the repository at this point in the history
  • Loading branch information
@luigifab
luigifab committed Jul 7, 2022
1 parent e6d008f commit 0e361ce
Show file tree
Hide file tree
Showing 16 changed files with 190 additions and 121 deletions.
4 changes: 3 additions & 1 deletion README.md
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
Stop russian war. **🇺🇦 Free Ukraine!**

# apijs

JavaScript pop-ups and slideshow.
Expand All @@ -6,7 +8,7 @@ For more information, go to https://www.luigifab.fr/apijs (IPv6 is required, it'

This repository is a releases mirror. To install it, please read the documentation.

- Current version: 6.8.2 (01/01/2022)
- Current version: 6.9.0 (07/07/2022)
- Client compatibility: Firefox 36+, Chrome 32+, Opera 19+, Edge 16+, Safari 9+
- Translations: English (en), French (fr-FR/fr-CA), German (de), Italian (it), Portuguese (pt-PT/pt-BR), Spanish (es) / Chinese (zh), Czech (cs), Dutch (nl), Greek (el), Hungarian (hu), Japanese (ja), Polish (pl), Romanian (ro), Russian (ru), Slovak (sk), Turkish (tr), Ukrainian (uk)
- License: GNU GPL 2+
Expand Down
139 changes: 90 additions & 49 deletions src/javascripts/dialog.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
/**
* Created D/12/04/2009
* Updated M/28/09/2021
* Updated S/02/07/2022
*
* Copyright 2008-2022 | Fabrice Creuzot (luigifab) <code~luigifab~fr>
* https://www.luigifab.fr/apijs
Expand Down Expand Up @@ -30,14 +30,15 @@ apijs.core.dialog = function () {
this.ti = 'a,area,button,input,textarea,select,object,iframe';
this.ns = 'http://www.w3.org/2000/svg';

this.swipe = false;
this.media = null;
this.t0 = null; // fragment
this.t1 = null; // div id=apijsDialog
this.t2 = null; // div/form id=apijsBox
this.t3 = null; // input file
this.a = null;
this.b = null;
this.c = null;
this.d = null;


// GÉNÉRATION DES BOÎTES DE DIALOGUE (public return boolean)
Expand Down Expand Up @@ -94,7 +95,7 @@ apijs.core.dialog = function () {
return this.init('upload', icon)
.htmlParent(action, 'apijs.upload.actionConfirm();', 'apijs.upload.actionDrag(event);')
.htmlContent(title, text)
.htmlUpload(input, (typeof multiple == 'boolean') ? multiple : false)
.htmlUpload(input, (typeof multiple == 'boolean') ? multiple : false, 'apijs.upload.actionChoose(this);')
.htmlBtnConfirm('submit')
.show('button.browse');
}
Expand Down Expand Up @@ -304,30 +305,30 @@ apijs.core.dialog = function () {

this.onResizeBrowser = function () {

var add, body = document.querySelector('body');
var width = document.querySelector('body').clientWidth;

add = body.clientWidth <= (apijs.dialog.has('photo', 'video') ? 900 : 460);
apijs.dialog[add ? 'add' : 'remove']('mobile');

add = body.clientWidth <= 300;
apijs.dialog[add ? 'add' : 'remove']('tiny');
apijs.dialog[(width <= (apijs.dialog.has('photo', 'video') ? 900 : 460)) ? 'add' : 'remove']('mobile');
apijs.dialog[(width <= 300) ? 'add' : 'remove']('tiny');
};

this.onScrollBrowser = function (ev) {

var that = apijs.dialog, elem = ev.target, brk = false;

// dialogues du diaporama (suivant/précédent)
if (that.has('slideshow') && !that.has('playing') &&
!['OPTION', 'SELECT'].has(elem.nodeName) && ['DOMMouseScroll','mousewheel','panleft','panright'].has(ev.type)) {

// https://github.com/hammerjs/hammer.js
// https://github.com/john-doherty/swiped-events
if (
that.has('slideshow') && !that.has('playing') &&
!['OPTION', 'SELECT'].has(elem.nodeName) && ['DOMMouseScroll', 'mousewheel', 'swipeleft', 'swiperight', 'swipeup', 'swipedown', 'swiped-left', 'swiped-right', 'swiped-up', 'swiped-down'].has(ev.type)
) {
elem = new Date().getTime() / 1000;
if ((that.scroll < 1) || (elem > (1 + that.scroll))) {
if ((that.scroll < 1) || (elem > (that.scroll + 1))) {
that.scroll = elem;
// ev.detail > 0 si vers le bas avec Firefox
// ev.wheelDelta < 0 si vers le bas avec Chromium/Opera/Edge...
brk = (ev.detail > 0) || (ev.wheelDelta < 0); // true si vers le bas
apijs.slideshow[((ev.type === 'panleft') || brk) ? 'actionNext' : 'actionPrev']();
apijs.slideshow[(['swipeleft', 'swipeup', 'swiped-left', 'swiped-up'].has(ev.type) || brk) ? 'actionNext' : 'actionPrev']();
}
}
// autorise éventuellement le défilement
Expand All @@ -346,11 +347,11 @@ apijs.core.dialog = function () {
}

// elem = select | textarea | scrollable
if (elem.nodeName !== 'HTML') {
if ((elem.scrollHeight > elem.offsetHeight) && (elem.nodeName !== 'HTML')) {
// ev.detail > 0 si vers le bas avec Firefox
// ev.wheelDelta < 0 si vers le bas avec Chromium/Opera/Edge...
brk = (ev.detail > 0) || (ev.wheelDelta < 0); // true si vers le bas
if ((brk && (elem.scrollTop < (elem.scrollHeight - elem.offsetHeight))) || (!brk && (elem.scrollTop > 0)))
if ((brk && (elem.scrollTop < (elem.scrollHeight - elem.offsetHeight - 1))) || (!brk && (elem.scrollTop > 0)))
return;
}
}
Expand All @@ -372,8 +373,8 @@ apijs.core.dialog = function () {

// empèche le défilement (elem = iframe document)
if (
(brk && ((elem.defaultView.innerHeight + elem.defaultView.pageYOffset) >= (elem.body.offsetHeight - 1))) ||
(!brk && (elem.defaultView.pageYOffset <= 0))
(brk && ((elem.defaultView.innerHeight + elem.defaultView.scrollY) >= (elem.body.offsetHeight - 1))) ||
(!brk && (elem.defaultView.scrollY <= 0))
) {
ev.preventDefault();
ev.stopPropagation();
Expand All @@ -382,7 +383,7 @@ apijs.core.dialog = function () {

this.onKey = function (ev) {

var that = apijs.dialog, elem = that.media;
var that = apijs.dialog, elem = that.media, time;

// dialogues d'attente et de progresssion ou tout autre dialogue verrouillé
// ctrl + q | ctrl + w | ctrl + r | ctrl + f4 | ctrl + f5 // alt + f4 // échap | f5
Expand Down Expand Up @@ -434,37 +435,39 @@ apijs.core.dialog = function () {
if (that.has('video') && !that.has('videoiframe')) {

// espace | p
if ((ev.keyCode === 32) || (ev.keyCode === 80)) {
if ([32, 80].has(ev.keyCode)) {
ev.preventDefault();
if ([1,2].has(elem.networkState)) {
if ([1, 2].has(elem.networkState)) {
if (elem.ended || elem.paused)
elem.play();
else
elem.pause();
}
}
// haut | page haut
else if ((ev.keyCode === 38) || (ev.keyCode === 33)) {
else if ([38, 33].has(ev.keyCode)) {
ev.preventDefault();
if (([1,2].has(elem.networkState)) && (elem.duration !== Infinity) && !isNaN(elem.duration)) {
if (elem.currentTime < (elem.duration - 10))
elem.currentTime += 10;
time = (ev.keyCode === 38) ? 10 : 60;
if (([1, 2].has(elem.networkState)) && (elem.duration !== Infinity) && !isNaN(elem.duration)) {
if (elem.currentTime > time)
elem.currentTime -= time;
else
elem.currentTime = 0;
}
}
// bas | page bas
else if ((ev.keyCode === 40) || (ev.keyCode === 34)) {
else if ([40, 34].has(ev.keyCode)) {
ev.preventDefault();
if (([1,2].has(elem.networkState)) && (elem.duration !== Infinity) && !isNaN(elem.duration)) {
if (elem.currentTime > 10)
elem.currentTime -= 10;
else
elem.currentTime = 0;
if (([1, 2].has(elem.networkState)) && (elem.duration !== Infinity) && !isNaN(elem.duration)) {
time = (ev.keyCode === 40) ? 10 : 60;
if (elem.currentTime < (elem.duration - time))
elem.currentTime += time;
}
}
// +
else if (ev.keyCode === 107) {
ev.preventDefault();
if ([1,2].has(elem.networkState)) {
if ([1, 2].has(elem.networkState)) {
if (elem.muted)
elem.muted = false;
if (elem.volume < 0.8)
Expand All @@ -476,7 +479,7 @@ apijs.core.dialog = function () {
// -
else if (ev.keyCode === 109) {
ev.preventDefault();
if ([1,2].has(elem.networkState)) {
if ([1, 2].has(elem.networkState)) {
if (elem.muted)
elem.muted = false;
if (elem.volume > 0.21)
Expand All @@ -488,7 +491,7 @@ apijs.core.dialog = function () {
// m
else if (ev.keyCode === 77) {
ev.preventDefault();
if ([1,2].has(elem.networkState)) {
if ([1, 2].has(elem.networkState)) {
elem.muted = !elem.muted; // inverse
}
}
Expand Down Expand Up @@ -557,6 +560,17 @@ apijs.core.dialog = function () {
}
};

this.onSlideshowSwipe = function (ev) {

apijs.dialog.swipe = true;
self.setTimeout(function () { apijs.dialog.swipe = false; }, 150);

if (['swiperight', 'swipedown', 'swiped-right', 'swiped-down'].has(ev.type))
apijs.slideshow.actionPrev();
else // swipeleft swipeup swiped-left swiped-up
apijs.slideshow.actionNext();
};

this.actionConfirm = function () { // todo

// vérifie le dialogue d'options
Expand Down Expand Up @@ -676,6 +690,10 @@ apijs.core.dialog = function () {
else if (document.mozFullScreenEnabled)
document.addEventListener('mozfullscreenchange', this.onFullscreen);
}
// copier coller
else if (this.has('upload')) {
window.addEventListener('paste', apijs.upload.actionDrag);
}

// auto-focus
if (focus === true)
Expand All @@ -693,6 +711,11 @@ apijs.core.dialog = function () {
this.xhr.abort();
}

if (this.hammer) { // (depuis htmlBtnNavigation)
this.hammer.off('swiperight swipedown swipeleft swipeup', apijs.dialog.onSlideshowSwipe).destroy();
delete this.hammer;
}

// surveillance des touches et du navigateur (depuis initDialog)
document.removeEventListener('keydown', this.onKey);
self.removeEventListener('beforeunload', this.onCloseBrowser);
Expand Down Expand Up @@ -735,8 +758,12 @@ apijs.core.dialog = function () {
else if (document.mozFullScreenEnabled)
document.removeEventListener('mozfullscreenchange', this.onFullscreen);
}
// mémorise la hauteur du dialogue
else {
// copier coller
if (this.has('upload'))
window.removeEventListener('paste', apijs.upload.actionDrag);

// mémorise la hauteur du dialogue
this.height = parseFloat(self.getComputedStyle(this.t2).height);
}

Expand All @@ -750,7 +777,7 @@ apijs.core.dialog = function () {
this.t1.firstChild.remove();
}

// réinitialise toutes les variables (sauf ft/ti/ns)
// réinitialise toutes les variables (sauf ft/ti/ns et swipe)
this.klass = [];
if (isAll) {
this.height = 0;
Expand All @@ -763,10 +790,10 @@ apijs.core.dialog = function () {
this.t0 = null; // fragment
this.t1 = null; // div id=apijsDialog
this.t2 = null; // div/form id=apijsBox
this.t3 = null; // input file
this.a = null;
this.b = null;
this.c = null;
this.d = null;

return true;
};
Expand All @@ -785,12 +812,16 @@ apijs.core.dialog = function () {
this.t1.setAttribute('ondragleave', drag);
this.t1.setAttribute('ondragover', drag);
this.t1.setAttribute('ondrop', drag);
this.t1.setAttribute('onpaste', drag); // Firefox

this.a = document.createElement('p');
this.a.setAttribute('class', 'drag');
this.a.appendChild(apijs.i18n.translateNode(127));
this.t1.appendChild(this.a);
}
else {
this.t1.setAttribute('ondragstart', 'return false;');
}

if (typeof action == 'string') {
this.t2 = document.createElement('form');
Expand Down Expand Up @@ -918,6 +949,12 @@ apijs.core.dialog = function () {
this.a.appendChild(this.b);
this.t2.appendChild(this.a);

if (typeof Hammer == 'function') {
this.hammer = new Hammer(this.t2);
this.hammer.get('swipe').set({ direction: Hammer.DIRECTION_ALL });
this.hammer.on('swiperight swipedown swipeleft swipeup', apijs.dialog.onSlideshowSwipe);
}

return this;
};

Expand All @@ -926,7 +963,7 @@ apijs.core.dialog = function () {
if (close !== false) {

this.a = document.createElement('div');
this.a.setAttribute('class', 'close noplaying');
this.a.setAttribute('class', 'close nofullplaying');

this.b = document.createElement('button');
this.b.setAttribute('type', 'button');
Expand All @@ -945,19 +982,19 @@ apijs.core.dialog = function () {
return this;
};

this.htmlUpload = function (input, isMultiple) {
this.htmlUpload = function (input, isMultiple, change) {

this.a = document.createElement('div');
this.a.setAttribute('class', 'btns upload');

this.b = document.createElement('input');
this.b.setAttribute('type', 'file');
this.b.setAttribute('name', input);
this.b.setAttribute('id', 'apijsFile');
if (isMultiple) this.b.setAttribute('multiple', 'multiple');
this.b.setAttribute('onchange', 'apijs.upload.actionChoose(this);');
this.t3 = document.createElement('input');
this.t3.setAttribute('type', 'file');
this.t3.setAttribute('name', isMultiple ? input + '[]' : input);
this.t3.setAttribute('id', 'apijsFile');
if (isMultiple) this.t3.setAttribute('multiple', 'multiple');
this.t3.setAttribute('onchange', change);

this.a.appendChild(this.b);
this.a.appendChild(this.t3);

this.b = document.createElement('button');
this.b.setAttribute('type', 'button');
Expand Down Expand Up @@ -1061,7 +1098,7 @@ apijs.core.dialog = function () {
this.a.appendChild(this.b);

this.b = document.createElement('dd');
this.b.setAttribute('class', 'nomobile noplaying');
this.b.setAttribute('class', 'nofullplaying');

if ((name !== 'false') || (date !== 'false')) {

Expand Down Expand Up @@ -1125,10 +1162,14 @@ apijs.core.dialog = function () {

this.htmlHelp = function (isSlideshow, isVideo) {

// pas d'aide en mobile car pas de clavier
if (('ontouchstart' in window) && (navigator.userAgent.toLowerCase().indexOf('mobi') > 0))
return this;

var items, item, keys = [
isSlideshow ? ['start', 149, 141] : [], // début/fin
isSlideshow ? ['left', 'right', 142] : [],
isVideo ? ['bottom', 'topk', 144] : [],
isVideo ? ['topk', 'bottom', 144] : [],
isVideo ? ['minus', 'plus', 145] : [],
isVideo ? ['M', 146] : [],
isVideo ? ['P', 143] : [],
Expand All @@ -1137,7 +1178,7 @@ apijs.core.dialog = function () {
];

this.a = document.createElement('ul');
this.a.setAttribute('class', 'kbd nomobile nofullscreen');
this.a.setAttribute('class', 'kbd nofullscreen');

while (items = keys.shift()) {

Expand Down
4 changes: 2 additions & 2 deletions src/javascripts/main.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
/**
* Created J/03/12/2009
* Updated V/22/10/2021
* Updated M/15/02/2022
*
* Copyright 2008-2022 | Fabrice Creuzot (luigifab) <code~luigifab~fr>
* https://www.luigifab.fr/apijs
Expand Down Expand Up @@ -46,7 +46,7 @@ var apijs = new (function () {

"use strict";
this.core = {};
this.version = 682;
this.version = 690;

this.config = {
lang: 'auto',
Expand Down
Loading

0 comments on commit 0e361ce

Please sign in to comment.