* Safari/iOS: support Safari/iOS 12.x via transpiling of JavaScript

This commit is contained in:
ralf 2023-03-21 20:01:49 +01:00
commit db66cb9af6
24 changed files with 3213 additions and 437 deletions

View File

@ -12,12 +12,12 @@
import {css, html} from "@lion/core";
import 'lit-flatpickr';
import {dateStyles} from "./DateStyles";
import {Instance} from 'flatpickr/dist/types/instance';
import "flatpickr/dist/plugins/scrollPlugin.js";
import "shortcut-buttons-flatpickr/dist/shortcut-buttons-flatpickr";
import type {Instance} from 'flatpickr/dist/types/instance';
import {default as scrollPlugin} from "flatpickr/dist/plugins/scrollPlugin.js";
import {default as ShortcutButtonsPlugin} from "shortcut-buttons-flatpickr/dist/shortcut-buttons-flatpickr";
import flatpickr from "flatpickr";
import {egw} from "../../jsapi/egw_global";
import {HTMLElementWithValue} from "@lion/form-core/types/FormControlMixinTypes";
import type {HTMLElementWithValue} from "@lion/form-core/types/FormControlMixinTypes";
import {Et2Textbox} from "../Et2Textbox/Et2Textbox";
import {Et2ButtonIcon} from "../Et2Button/Et2ButtonIcon";
import {FormControlMixin} from "@lion/form-core";
@ -687,6 +687,11 @@ export class Et2Date extends Et2InputWidget(FormControlMixin(LitFlatpickr))
return formatDate;
}
set format(_format)
{
// ignored, trying to fix TypeError opening a new contact
}
/**
* Inline calendars need a slot
*

View File

@ -4,7 +4,7 @@ import {classMap, css, html, ifDefined, LitElement, TemplateResult} from "@lion/
import shoelace from "../Styles/shoelace";
import {dateStyles} from "./DateStyles";
import flatpickr from "flatpickr";
import "flatpickr/dist/plugins/rangePlugin";
import {default as rangePlugin} from "flatpickr/dist/plugins/rangePlugin";
import {Et2Date, formatDate, parseDate} from "./Et2Date";
import {egw} from "../../jsapi/egw_global";
@ -71,7 +71,6 @@ export class Et2DateRange extends Et2InputWidget(FormControlMixin(LitElement))
...(<Et2Date>this.fromElement).getOptions(),
...{
plugins: [
// @ts-ignore ts can't find rangePlugin in IDE
rangePlugin({
input: this.toElement
})

View File

@ -11,7 +11,8 @@
import {css} from "@lion/core";
import {Et2Date} from "./Et2Date";
import {Instance} from "flatpickr/dist/types/instance";
import type {Instance} from "flatpickr/dist/types/instance";
import {default as ShortcutButtonsPlugin} from "shortcut-buttons-flatpickr/dist/shortcut-buttons-flatpickr";
export class Et2DateTime extends Et2Date
@ -115,7 +116,6 @@ export class Et2DateTime extends Et2Date
*/
protected _buttonPlugin()
{
// @ts-ignore TypeScript can't find ShortcutButtonsPlugin, but rollup does
return ShortcutButtonsPlugin({
button: [
{label: this.egw().lang("ok")},
@ -144,4 +144,4 @@ export class Et2DateTime extends Et2Date
}
// @ts-ignore TypeScript is not recognizing that Et2DateTime is a LitElement
customElements.define("et2-date-time", Et2DateTime);
customElements.define("et2-date-time", Et2DateTime);

View File

@ -222,7 +222,7 @@ const Et2InputWidgetMixin = <T extends Constructor<LitElement>>(superclass : T)
if(changedProperties.has('required'))
{
// Remove all existing Required validators (avoids duplicates)
this.validators = (this.validators || []).filter((validator) => validator instanceof Required)
this.validators = (this.validators || []).filter((validator) => !(validator instanceof Required))
if(this.required)
{
this.validators.push(new Required());

View File

@ -20,7 +20,7 @@ import {Et2LinkEntry} from "./Et2LinkEntry";
import {egw} from "../../jsapi/egw_global";
import {et2_vfsSelect} from "../et2_widget_vfs";
import {LinkInfo} from "./Et2Link";
import {ValidationType} from "@lion/form-core/types/validate/ValidateMixinTypes";
import type {ValidationType} from "@lion/form-core/types/validate/ValidateMixinTypes";
import {ManualMessage} from "../Validators/ManualMessage";
import {Et2Tabs} from "../Layout/Et2Tabs/Et2Tabs";

View File

@ -9,7 +9,7 @@
import {css, html, PropertyValues, TemplateResult} from "@lion/core";
import {Et2StaticSelectMixin, StaticOptions} from "./StaticOptions";
import {Et2StaticSelectMixin, StaticOptions as so} from "./StaticOptions";
import {Et2widgetWithSelectMixin} from "./Et2WidgetWithSelectMixin";
import {SelectOption} from "./FindSelectOptions";
import {SlMenuItem, SlSelect} from "@shoelace-style/shoelace";
@ -725,12 +725,6 @@ if(typeof customElements.get("lion-validation-feedback") === "undefined")
{
customElements.define("lion-validation-feedback", LionValidationFeedback);
}
/**
* Use a single StaticOptions, since it should have no state
* @type {StaticOptions}
*/
const so = new StaticOptions();
export class Et2SelectApp extends Et2StaticSelectMixin(Et2Select)
{

View File

@ -10,7 +10,7 @@
import {css, PropertyValues} from "@lion/core";
import {Et2Select} from "./Et2Select";
import {Et2StaticSelectMixin, StaticOptions} from "./StaticOptions";
import {Et2StaticSelectMixin, StaticOptions as so} from "./StaticOptions";
import {cleanSelectOptions} from "./FindSelectOptions";
/**
@ -172,10 +172,4 @@ export class Et2SelectCategory extends Et2StaticSelectMixin(Et2Select)
}
}
/**
* Use a single StaticOptions, since it should have no state
* @type {StaticOptions}
*/
const so = new StaticOptions();
customElements.define("et2-select-cat", Et2SelectCategory);

View File

@ -9,7 +9,7 @@
import {Et2Select} from "./Et2Select";
import {Et2StaticSelectMixin, StaticOptions} from "./StaticOptions";
import {Et2StaticSelectMixin, StaticOptions as so} from "./StaticOptions";
import {egw} from "../../jsapi/egw_global";
import {SelectOption} from "./FindSelectOptions";
@ -56,10 +56,4 @@ export class Et2SelectCountry extends Et2StaticSelectMixin(Et2Select)
}
}
/**
* Use a single StaticOptions, since it should have no state
* @type {StaticOptions}
*/
const so = new StaticOptions();
customElements.define("et2-select-country", Et2SelectCountry);

View File

@ -11,12 +11,10 @@
import {css, html, LitElement, repeat, TemplateResult} from "@lion/core";
import {et2_IDetachedDOM} from "../et2_core_interfaces";
import {Et2Widget} from "../Et2Widget/Et2Widget";
import {StaticOptions} from "./StaticOptions";
import {StaticOptions as so} from "./StaticOptions";
import {find_select_options, SelectOption} from "./FindSelectOptions";
import {SelectAccountMixin} from "./SelectAccountMixin";
const so = new StaticOptions();
/**
* This is a stripped-down read-only widget used in nextmatch
* (and other read-only usages)

View File

@ -103,7 +103,7 @@ export const Et2StaticSelectMixin = <T extends Constructor<Et2WidgetWithSelect>>
* @param {boolean} return_promise true: always return a promise
* @returns {Object[]|Promise<Object[]>} Array of options, or empty and they'll get filled in later, or Promise
*/
export class StaticOptions
export const StaticOptions = new class StaticOptionsType
{
cached_server_side(widget : Et2SelectWidgets, type : string, options_string, return_promise? : boolean) : SelectOption[]|Promise<SelectOption[]>
{

View File

@ -76,7 +76,7 @@ export class Et2Textbox extends Et2InputWidget(SlInput)
if(changedProperties.has('validator'))
{
// Remove all existing Pattern validators (avoids duplicates)
this.validators = (this.validators || []).filter((validator) => validator instanceof Regex)
this.validators = (this.validators || []).filter((validator) => !(validator instanceof Regex))
this.validators.push(new Regex(this.validator));
}
}

View File

@ -4382,4 +4382,4 @@ export class et2_nextmatch_sortheader extends et2_nextmatch_header implements et
}
et2_register_widget(et2_nextmatch_sortheader, ['nextmatch-sortheader']);
et2_register_widget(et2_nextmatch_sortheader, ['nextmatch-sortheader']);

View File

@ -87,8 +87,8 @@ export class et2_nextmatch_controller extends et2_dataview_controller implements
super(_parentController, _grid);
this.setDataProvider(this);
this.setRowCallback(this._rowCallback);
this.setLinkCallback(this._linkCallback);
this.setRowCallback(this._nmRowCallback);
this.setLinkCallback(this._nmLinkCallback);
this.setContext(this);
// Copy the egw reference
@ -560,7 +560,7 @@ export class et2_nextmatch_controller extends et2_dataview_controller implements
* this special case used to store the rowWidget reference, so that it can
* be properly freed.
*/
_rowCallback( _data, _tr, _idx, _entry)
_nmRowCallback(_data, _tr, _idx, _entry)
{
// Let the row provider fill in the data row -- store the returned
// rowWidget inside the _entry
@ -585,7 +585,7 @@ export class et2_nextmatch_controller extends et2_dataview_controller implements
*
* @return Array List of action names that valid for the row
*/
_linkCallback( _data, _idx, _uid)
_nmLinkCallback( _data, _idx, _uid)
{
if(_uid.trim() != "")
{

View File

@ -13,7 +13,7 @@
et2_core_inputWidget;
api.Resumable.resumable;
*/
import "../Resumable/resumable.js";
import {Resumable} from "../Resumable/resumable.js";
import {et2_inputWidget} from "./et2_core_inputWidget";
import {et2_register_widget, WidgetConfig} from "./et2_core_widget";
import {ClassWithAttributes} from "./et2_core_inheritance";

View File

@ -24,7 +24,7 @@ import './fw_browser.js';
import './fw_ui.js';
import './fw_classes.js';
import '../jsapi/egw_inheritance.js';
import "sortablejs/Sortable.min.js";
import Sortable from "sortablejs/modular/sortable.complete.esm";
/**
*
* @param {DOMWindow} window
@ -479,7 +479,8 @@ import "sortablejs/Sortable.min.js";
if (!$menu.is(":visible"))
{
$body.on('click', function(e){
if (e.target.id != 'topmenu_info_user_avatar' && jQuery(e.target).parents('#topmenu_info_user_avatar').length < 1)
if (e.target.id != 'topmenu_info_user_avatar' && jQuery(e.target).parents('#topmenu_info_user_avatar').length < 1
&& e.target.nodeName && e.target.nodeName != 'ET2-SELECT')
{
jQuery(this).off(e);
$menu.toggle();

View File

@ -1238,7 +1238,7 @@ declare interface IegwWndLocal extends IegwGlobal
* @param _isHtml true: add a html (no automatic quoting!), false (default): add as text
* @param _options tooltip options
*/
tooltipBind(_elem : HTMLElement, _str : string, _isHtml? : boolean, _options);
tooltipBind(_elem : HTMLElement, _str : string, _isHtml? : boolean, _options? : any);
/**
* Unbinds the tooltip from the given DOM-Node.
*
@ -1362,6 +1362,8 @@ declare function egwIsMobile() : string|null;
declare var mailvelope : any;
declare var framework : any;
declare function egw_refresh(_msg : string, app : string, id? : string|number, _type?, targetapp?, replace?, _with?, msgtype?);
declare function egw_open();

View File

@ -1,5 +1,6 @@
//export var app = window.app;
export var egw = window.egw;
export var framework = window.framework;
export var app = window.app;
export var egw_getFramework = window.egw_getFramework;
export var jQuery = window.jQuery;

View File

@ -207,7 +207,7 @@ class Widget
{
$type = $this->type;
}
$legacy_options = $legacy_options[$type];
$legacy_options = $legacy_options[$type] ?? null;
}
// read and set all attributes
@ -222,14 +222,14 @@ class Widget
$cloned = true; // only clone it once, otherwise we loose attributes!
}
// $reader->value is an object and therefore assigned by reference
// this is important to not loose content when validating dynamic generated tabs as in settings!
// this is important to not lose content when validating dynamic generated tabs as in settings!
$template->attrs[$reader->name] = $value = $reader->value;
// expand attributes values, otherwise eg. validation can not use attrs referencing to content
if (!empty($value) && ($value[0] === '@' || strpos($value, '$cont') !== false))
{
$value = self::expand_name($value, null, null, null, null,
isset(self::$cont) ? self::$cont : self::$request->content);
self::$cont ?? self::$request->content);
}
// split legacy options

View File

@ -0,0 +1,4 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg version="1.1" width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
<path d="M6 0C2.71 0 0 2.71 0 6v20c0 3.29 2.71 6 6 6h20c3.29 0 6-2.71 6-6V6c0-3.29-2.71-6-6-6zm1 3h18a4 4 0 0 1 4 4v18a4 4 0 0 1-4 4H7a4 4 0 0 1-4-4V7a4 4 0 0 1 4-4zm9 2c-3.777 0-7 3.691-7 7h5c0-1.692 1.444-2 2-2 .562 0 2 .237 2 2 0 2.63-3.474 3-5 3v5h5v-2c2.373-.91 5-1.92 5-6 0-3.976-2.894-7-7-7zm-.5 16.5a3 3 0 0 0-3 3 3 3 0 0 0 3 3 3 3 0 0 0 3-3 3 3 0 0 0-3-3z" fill="#62686a"/>
</svg>

After

Width:  |  Height:  |  Size: 528 B

View File

@ -27,7 +27,7 @@ import {et2_container} from "../../api/js/etemplate/et2_core_baseWidget";
import {Et2Dialog} from "../../api/js/etemplate/Et2Dialog/Et2Dialog";
import {formatDate, formatTime} from "../../api/js/etemplate/Et2Date/Et2Date";
import {ColorTranslator} from "colortranslator";
import {StaticOptions} from "../../api/js/etemplate/Et2Select/StaticOptions";
import {StaticOptions as so} from "../../api/js/etemplate/Et2Select/StaticOptions";
import {Et2Select} from "../../api/js/etemplate/Et2Select/Et2Select";
import {SelectOption} from "../../api/js/etemplate/Et2Select/FindSelectOptions";
import {CalendarApp} from "./app";
@ -298,7 +298,6 @@ export class et2_calendar_event extends et2_valueWidget implements et2_IDetached
this._need_actions_linked = !this.options.readonly;
// Make sure category stuff is there by faking a call to cache
let so = new StaticOptions();
so.cached_server_side(<Et2Select><unknown>{
nodeName: "ET2-SELECT-CAT_RO",
egw: () => this.egw()
@ -525,7 +524,6 @@ export class et2_calendar_event extends et2_valueWidget implements et2_IDetached
let cat_label : (string | string[]) = '';
if(this.options.value.category)
{
let so = new StaticOptions();
let options = <SelectOption[]>so.cached_server_side(<Et2Select><unknown>{
nodeName: "ET2-SELECT-CAT_RO",
egw: () => this.egw()

View File

@ -249,4 +249,4 @@ class home_favorite_portlet extends home_portlet
);
return $properties;
}
}
}

3518
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -12,6 +12,7 @@
},
"devDependencies": {
"@babel/core": "^7.14.6",
"@babel/preset-env": "^7.20.2",
"@babel/preset-typescript": "^7.14.5",
"@interactjs/interactjs": "^1.10.11",
"@open-wc/testing": "^3.0.3",
@ -27,7 +28,7 @@
"grunt": "^1.5.3",
"grunt-contrib-cssmin": "^2.2.1",
"rimraf": "^3.0.2",
"rollup": "^2.52.2",
"rollup": "^2.79.1",
"rollup-plugin-terser": "^7.0.2",
"sinon": "^11.1.2",
"terser": "^4.8.1",
@ -62,9 +63,11 @@
"@lion/listbox": "^0.12.0",
"@lion/select": "^0.15.0",
"@lion/textarea": "^0.14.0",
"@rollup/plugin-commonjs": "^24.0.1",
"@shoelace-style/shoelace": "2.0.0-beta.81",
"blueimp-gallery": "^3.4.0",
"colortranslator": "^1.9.2",
"core-js": "^3.29.1",
"lit-flatpickr": "^0.3.0",
"shortcut-buttons-flatpickr": "^0.4.0",
"sortablejs": "^1.14.0"
@ -72,4 +75,4 @@
"engines": {
"node": ">=14.0.0"
}
}
}

View File

@ -15,12 +15,13 @@ import { readFileSync, readdirSync, statSync, unlinkSync } from "fs";
//import rimraf from 'rimraf';
import { minify } from 'terser';
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
// Best practice: use this
//rimraf.sync('./dist/');
//rimraf.sync('./chunks/');
// remove only chunks older then 2 days, to allow UI to still load them and not require a reload / F5
// remove only chunks older than 2 days, to allow UI to still load them and not require a reload / F5
const rm_older = Date.now() - 48*3600000;
readdirSync('./chunks').forEach(name => {
const stat = statSync('./chunks/'+name);
@ -55,6 +56,11 @@ const config = {
// app.ts/js are added automatic by addAppsConfig() below
},
external: function(id,parentId,isResolved) {
// core-js used require and needs to be run through RollupJS and NOT treated as external
if (id.includes("/node_modules/core-js/"))
{
return false;
}
if(!isResolved)
{
return;
@ -113,6 +119,8 @@ const config = {
resolve({
browser: true
}),
// core-js uses require, which needs to be transformed to es-modules
commonjs(),
{
transform (code, id) {
if (id.endsWith('.ts'))
@ -127,7 +135,22 @@ const config = {
// plugins: stage3Syntax,
errorRecovery: true
},
presets: ['@babel/preset-typescript']
presets: [
['@babel/preset-typescript', {
//onlyRemoveTypeImports: true // seems not necessary and generates a lot of warnings about not exported symbols
}],
['@babel/preset-env', {
corejs: {
version: "3"
},
useBuiltIns: "usage",
modules: false,
targets : {
esmodules: true,
safari: "14"
}
}],
]
}, function (err, result) {
if (err)
return reject(err);
@ -193,4 +216,4 @@ export default function addAppsConfig()
}
}
return conf;
}
}