Docs: Get the ETemplate2 webComponent widets working on doc site

Sort of.  This breaks shoelace images due to them not being imported / copied, and not using the CDN
This commit is contained in:
nathan 2023-10-27 11:50:51 -06:00
parent 6e0301d249
commit d15c63198c
6 changed files with 41 additions and 22 deletions

View File

@ -1706,7 +1706,7 @@ function transformAttributes(widget, mgr : et2_arrayMgr, attributes)
*/
export function cssImage(image_name : string, app_name? : string)
{
let url = egw?.image(image_name, app_name);
let url = egw?.image && egw?.image(image_name, app_name);
if(url)
{
return css`url(${unsafeCSS(url)})`;

View File

@ -15,7 +15,7 @@ import {egw} from "../../jsapi/egw_global";
registerIconLibrary('default', {
resolver: name =>
{
return typeof egw !== "undefined" ? `${egw.webserverUrl}/node_modules/@shoelace-style/shoelace/dist/assets/icons/${name}.svg` : ''
return typeof egw !== "undefined" ? `${egw.webserverUrl || ""}/node_modules/@shoelace-style/shoelace/dist/assets/icons/${name}.svg` : ''
},
});
@ -24,12 +24,15 @@ registerIconLibrary('default', {
* @example <sl-icon library="egw" name="infolog/navbar"/>
* @example <sl-icon library="egw" name="5_day_view"/>
*/
registerIconLibrary('egw', {
resolver: name =>
{
return typeof egw !== "undefined" ? (egw.image(name) || '') : ''
},
});
if(typeof egw !== "undefined" && typeof egw.image == "function")
{
registerIconLibrary('egw', {
resolver: name =>
{
return (egw.image(name) || '');
},
});
}
/**
* Customise shoelace styles to match our stuff
@ -39,10 +42,10 @@ export default [sl_css, css`
:root,
:host,
.sl-theme-light {
--sl-font-size-medium: ${typeof egw != "undefined" && egw.preference('textsize', 'common') != '12' ? parseInt(egw.preference('textsize', 'common')) : 12}px;
--sl-font-size-medium: ${typeof egw != "undefined" && egw.preference && egw.preference('textsize', 'common') != '12' ? parseInt(egw.preference('textsize', 'common')) : 12}px;
--sl-input-height-small: 24px;
--sl-input-height-medium: 32px;
--sl-button-font-size-medium: ${typeof egw != "undefined" && egw.preference('textsize', 'common') != '12' ? parseInt(egw.preference('textsize', 'common')) : 12}px;
--sl-button-font-size-medium: ${typeof egw != "undefined" && egw.preference && egw.preference('textsize', 'common') != '12' ? parseInt(egw.preference('textsize', 'common')) : 12}px;
--sl-input-help-text-font-size-medium: var(--sl-font-size-medium);
--sl-spacing-small: 0.1rem;
--sl-spacing-medium: 0.5rem;

View File

@ -7,5 +7,6 @@
* @subpackage ajax
* @author Ralf Becker <rb@egroupware.org>
*/
import "../../../vendor/bower-asset/jquery/dist/jquery.min.js";
jQuery.noConflict();

View File

@ -35,10 +35,11 @@
{# Shoelace #}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@{{ meta.shoelaceVersion }}/cdn/themes/light.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@{{ meta.shoelaceVersion }}/cdn/themes/dark.css" />
<script type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@{{ meta.shoelaceVersion }}/cdn/shoelace-autoloader.js"></script>
{# EGroupware #}
<!--<script src="{{ assetUrl('scripts/etemplate/etemplate2.js') }}" type="module"></script>-->
<script src="{{ assetUrl('scripts/sub/dir/etemplate/etemplate2.js') }}" type="module" id="egw_script_id"></script>
{# Set the initial theme and menu states here to prevent flashing #}
<script>

View File

@ -57,10 +57,24 @@ module.exports = function (eleventyConfig)
//
// Copy EGw stuff in
//
// General assets
eleventyConfig.addPassthroughCopy({"../../api/templates/default/images/logo.svg": "assets/images/logo.svg"});
eleventyConfig.addPassthroughCopy({"../../pixelegg/css/monochrome.css": "assets/styles/monochrome.css"});
//eleventyConfig.addPassthroughCopy({"../../api/js": "assets/scripts/chunks"});
eleventyConfig.addPassthroughCopy({"../../api/js/etemplate/etemplate2.js": "assets/scripts/etemplate/etemplate2.js"});
// vendor requirements
eleventyConfig.addPassthroughCopy({
"../../vendor/bower-asset/jquery/dist/jquery.min.js": "assets/scripts/vendor/bower-asset/jquery/dist/jquery.min.js",
"../../vendor/bower-asset/cropper/dist/cropper.min.js": "assets/scripts/vendor/bower-asset/cropper/dist/cropper.min.js",
"../../vendor/bower-asset/diff2html/dist/diff2html.min.js": "assets/scripts/vendor/bower-asset/diff2html/dist/diff2html.min.js",
"../../vendor/tinymce/tinymce/tinymce.min.js": "assets/scripts/vendor/tinymce/tinymce/tinymce.min.js",
})
// Etemplate2
eleventyConfig.addPassthroughCopy({"../../chunks": "assets/scripts/chunks"});
eleventyConfig.addPassthroughCopy({"../../api/js/etemplate/etemplate2.js": "assets/scripts/sub/dir/etemplate/etemplate2.js"});
//eleventyConfig.addPassthroughCopy({"../../vendor/**/*min.js": "assets/scripts/vendor/"});
//eleventyConfig.addPassthroughCopy("../dist/etemplate2.js", "assets/scripts/etemplate2.js");
// Shoelace is done via CDN in default.njk

View File

@ -94,7 +94,7 @@ async function buildTheDocs(watch = false)
//
async function buildTheSource()
{
const alwaysExternal = ['@lit'];
const alwaysExternal = [/*'@lit',*/ 'jquery'];
const cdnConfig = {
format: 'esm',
@ -104,21 +104,21 @@ async function buildTheSource()
// NOTE: Entry points must be mapped in package.json > exports, otherwise users won't be able to import them!
//
// The whole shebang
'./src/shoelace.ts',
'./api/js/etemplate/etemplate2.ts',
// The auto-loader
'./src/shoelace-autoloader.ts',
//'./src/shoelace-autoloader.ts',
// Components
...(await globby('./src/components/**/!(*.(style|test)).ts')),
//...(await globby('./src/components/**/!(*.(style|test)).ts')),
// Translations
...(await globby('./src/translations/**/*.ts')),
//...(await globby('./src/translations/**/*.ts')),
// Public utilities
...(await globby('./src/utilities/**/!(*.(style|test)).ts')),
//...(await globby('./src/utilities/**/!(*.(style|test)).ts')),
// Theme stylesheets
...(await globby('./src/themes/**/!(*.test).ts')),
//...(await globby('./src/themes/**/!(*.test).ts')),
// React wrappers
...(await globby('./src/react/**/*.ts'))
//...(await globby('./src/react/**/*.ts'))
],
outdir: cdndir,
outdir: sitedir + '/assets/scripts',
chunkNames: 'chunks/[name].[hash]',
define: {
// Floating UI requires this to be set