From 311514dca38ee02613cfb3361acab2dd7acb1ca3 Mon Sep 17 00:00:00 2001 From: Thomas Bouffard <27200110+tbouffard@users.noreply.github.com> Date: Sat, 16 Jul 2022 07:15:04 +0200 Subject: [PATCH] refactor: clean the Client class (#94) Remove unused static properties - mxForceIncludes: it was used to force loading the JavaScript files in development mode in mxGraph. We are not managing development mode in that way anymore. - mxLoadResource: not used anymore - mxLoadStylesheets: not used anymore - mxResourceExtension: it was only used in Translations, so only keep the Translations settings Move and rename the link function. It is not a general function, so move it as `domUtils#addLinkToHead` Fix documentation of static properties --- packages/core/src/Client.ts | 187 ++----------------- packages/core/src/editor/Editor.ts | 4 +- packages/core/src/util/Translations.ts | 19 +- packages/core/src/util/domUtils.ts | 34 ++++ packages/core/src/view/other/PrintPreview.ts | 10 +- 5 files changed, 65 insertions(+), 189 deletions(-) diff --git a/packages/core/src/Client.ts b/packages/core/src/Client.ts index 48a59033f..193c195c6 100644 --- a/packages/core/src/Client.ts +++ b/packages/core/src/Client.ts @@ -10,95 +10,10 @@ class Client { static VERSION = '0.1.0'; /** - * Optional global config variable to specify the extension of resource files. - * Default is true. NOTE: This is a global variable, not a variable of Client. + * Base path for all URLs in the core without trailing slash. * - * ```javascript - * - * - * ``` - */ - static mxResourceExtension = '.txt'; - - static setResourceExtension = (value: string) => { - Client.mxResourceExtension = value; - - // Removes dependency with mxResources. - // Client.mxResourceExtension can be used instead. - // mxResources.extension = value; - }; - - /** - * Optional global config variable to toggle loading of the two resource files - * in {@link Graph} and . Default is true. NOTE: This is a global variable, - * not a variable of Client. If this is false, you can use - * with its callback to load the default bundles asynchronously. - * - * ```javascript - * - * - * ``` - */ - static mxLoadResources = true; - - static setLoadResources = (value: boolean) => { - Client.mxLoadResources = value; - }; - - /** - * Optional global config variable to force loading the JavaScript files in - * development mode. Default is undefined. NOTE: This is a global variable, - * not a variable of Client. - * - * ```javascript - * - * - * ``` - */ - static mxForceIncludes = false; - - static setForceIncludes = (value: boolean) => { - Client.mxForceIncludes = value; - }; - - /** - * Optional global config variable to toggle loading of the CSS files when - * the library is initialized. Default is true. NOTE: This is a global variable, - * not a variable of Client. - * - * ```javascript - * - * - * ``` - */ - static mxLoadStylesheets = true; - - static setLoadStylesheets = (value: boolean) => { - Client.mxLoadStylesheets = value; - }; - - /** - * Basepath for all URLs in the core without trailing slash. Default is '.'. - * Set mxBasePath prior to loading the Client library as follows to override - * this setting: - * - * ```javascript - * - * - * ``` - * - * When using a relative path, the path is relative to the URL of the page that - * contains the assignment. Trailing slashes are automatically removed. + * When using a relative path, the path is relative to the URL of the page that contains the assignment. Trailing slashes are automatically removed. + * @default '.' */ static basePath = '.'; @@ -115,19 +30,11 @@ class Client { }; /** - * Basepath for all images URLs in the core without trailing slash. Default is - * + '/images'. Set mxImageBasePath prior to loading the - * Client library as follows to override this setting: - * - * ```javascript - * - * - * ``` + * Base path for all images URLs in the core without trailing slash. * * When using a relative path, the path is relative to the URL of the page that * contains the assignment. Trailing slashes are automatically removed. + * @default '.' */ static imageBasePath = '.'; @@ -144,27 +51,17 @@ class Client { }; /** - * Defines the language of the client, eg. en for english, de for german etc. - * The special value 'none' will disable all built-in internationalization and + * Defines the language of the client, eg. `en` for english, `de` for german etc. + * The special value `none` will disable all built-in internationalization and * resource loading. See {@link Resources#getSpecialBundle} for handling identifiers * with and without a dash. * - * Set mxLanguage prior to loading the Client library as follows to override - * this setting: - * - * ```javascript - * - * - * ``` - * * If internationalization is disabled, then the following variables should be * overridden to reflect the current language of the system. These variables are * cleared when i18n is disabled. - * , , - * , , - * , , , + * {@link Editor.askZoomResource}, {@link Editor.lastSavedResource}, + * {@link Editor.currentFileResource}, {@link Editor.propertiesResource}, + * {@link Editor.tasksResource}, {@link Editor.helpResource}, {@link Editor.outlineResource}, * {@link ElbowEdgeHandler#doubleClickOrientationResource}, {@link Utils#errorResource}, * {@link Utils#closeResource}, {@link GraphSelectionModel#doneResource}, * {@link GraphSelectionModel#updatingSelectionResource}, {@link GraphView#doneResource}, @@ -185,17 +82,8 @@ class Client { /** * Defines the default language which is used in the common resource files. Any * resources for this language will only load the common resource file, but not - * the language-specific resource file. Default is 'en'. - * - * Set mxDefaultLanguage prior to loading the Client library as follows to override - * this setting: - * - * ```javascript - * - * - * ``` + * the language-specific resource file. + * @default 'en' */ static defaultLanguage = 'en'; @@ -210,17 +98,11 @@ class Client { /** * Defines the optional array of all supported language extensions. The default * language does not have to be part of this list. See - * {@link Resources#isLanguageSupported}. - * - * ```javascript - * - * - * ``` + * {@link Translations#isLanguageSupported}. * * This is used to avoid unnecessary requests to language files, ie. if a 404 * will be returned. + * @default null */ static languages: string[] | null = null; @@ -386,45 +268,6 @@ class Client { return Client.IS_SVG; }; - /** - * Adds a link node to the head of the document. Use this - * to add a stylesheet to the page as follows: - * - * ```javascript - * Client.link('stylesheet', filename); - * ``` - * - * where filename is the (relative) URL of the stylesheet. The charset - * is hardcoded to ISO-8859-1 and the type is text/css. - * - * @param rel String that represents the rel attribute of the link node. - * @param href String that represents the href attribute of the link node. - * @param doc Optional parent document of the link node. - * @param id unique id for the link element to check if it already exists - */ - static link = ( - rel: string, - href: string, - doc: Document | null=null, - id: string | null=null - ) => { - doc = doc || document; - - // Workaround for Operation Aborted in IE6 if base tag is used in head - const link = doc.createElement('link'); - - link.setAttribute('rel', rel); - link.setAttribute('href', href); - link.setAttribute('charset', 'UTF-8'); - link.setAttribute('type', 'text/css'); - - if (id) { - link.setAttribute('id', id); - } - - const head = doc.getElementsByTagName('head')[0]; - head.appendChild(link); - }; -}; +} export default Client; diff --git a/packages/core/src/editor/Editor.ts b/packages/core/src/editor/Editor.ts index a733429f2..e4708e335 100644 --- a/packages/core/src/editor/Editor.ts +++ b/packages/core/src/editor/Editor.ts @@ -30,7 +30,7 @@ import CellAttributeChange from '../view/undoable_changes/CellAttributeChange'; import PrintPreview from '../view/other/PrintPreview'; import mxClipboard from '../util/Clipboard'; import MaxLog from '../gui/MaxLog'; -import { isNode } from '../util/domUtils'; +import { addLinkToHead, isNode } from '../util/domUtils'; import { getViewXml, getXml } from '../util/xmlUtils'; import { load, post, submit } from '../util/MaxXmlRequest'; import PopupMenuHandler from '../view/handler/PopupMenuHandler'; @@ -2850,7 +2850,7 @@ export class EditorCodec extends ObjectCodec { } else if (tmp.nodeName === 'resource') { Translations.add(tmp.getAttribute('basename')); } else if (tmp.nodeName === 'stylesheet') { - Client.link('stylesheet', tmp.getAttribute('name')); + addLinkToHead('stylesheet', tmp.getAttribute('name')); } tmp = tmp.nextSibling; diff --git a/packages/core/src/util/Translations.ts b/packages/core/src/util/Translations.ts index fb266858b..b406be836 100644 --- a/packages/core/src/util/Translations.ts +++ b/packages/core/src/util/Translations.ts @@ -64,7 +64,8 @@ class Translations { static resources: { [key: string]: string } = {}; /** - * Specifies the extension used for language files. Default is {@link ResourceExtension}. + * Specifies the extension used for language files. + * @default '.txt' */ static extension = '.txt'; @@ -112,22 +113,22 @@ class Translations { Translations.loadDefaultBundle || !Translations.isLanguageSupported(lan) ) { - return basename + (Translations.extension ?? Client.mxResourceExtension); + return basename + Translations.extension; } return null; }; /** * Hook for subclassers to return the URL for the special bundle. This - * implementation returns basename + '_' + lan + or null if - * is false or lan equals . + * implementation returns `basename + '_' + lan + ` or `null` if + * {@link Translations.loadSpecialBundle} is `false` or `lan` equals {@link Client.defaultLanguage}. * - * If {@link Resources#languages} is not null and contains - * a dash, then this method checks if returns true + * If {@link Translations#languages} is not null and {@link Client.language} contains + * a dash, then this method checks if {@link Translations.isLanguageSupported} returns `true` * for the full language (including the dash). If that returns false the * first part of the language (up to the dash) will be tried as an extension. * - * If {@link Resources#language} is null then the first part of the language is + * If {@link Translations#language} is null then the first part of the language is * used to maintain backwards compatibility. * * @param basename The basename for which the file should be loaded. @@ -147,9 +148,7 @@ class Translations { Translations.isLanguageSupported(lan) && lan != Client.defaultLanguage ) { - return `${basename}_${lan}${ - Translations.extension ?? Client.mxResourceExtension - }`; + return `${basename}_${lan}${Translations.extension}`; } return null; }; diff --git a/packages/core/src/util/domUtils.ts b/packages/core/src/util/domUtils.ts index 66c5a92e2..a86ff3149 100644 --- a/packages/core/src/util/domUtils.ts +++ b/packages/core/src/util/domUtils.ts @@ -349,3 +349,37 @@ export const clearSelection = () => { imageNode.setAttribute('border', '0'); return imageNode; }; + +/** + * Adds a link node to the head of the document. + * + * The charset is hardcoded to `UTF-8` and the type is `text/css`. + * + * @param rel String that represents the rel attribute of the link node. + * @param href String that represents the href attribute of the link node. + * @param doc Optional parent document of the link node. + * @param id unique id for the link element to check if it already exists + */ +export const addLinkToHead = ( + rel: string, + href: string, + doc: Document | null=null, + id: string | null=null +) => { + doc = doc || document; + + // Workaround for Operation Aborted in IE6 if base tag is used in head + const link = doc.createElement('link'); + + link.setAttribute('rel', rel); + link.setAttribute('href', href); + link.setAttribute('charset', 'UTF-8'); + link.setAttribute('type', 'text/css'); + + if (id) { + link.setAttribute('id', id); + } + + const head = doc.getElementsByTagName('head')[0]; + head.appendChild(link); +}; diff --git a/packages/core/src/view/other/PrintPreview.ts b/packages/core/src/view/other/PrintPreview.ts index a3ffacbf0..d59c225f0 100644 --- a/packages/core/src/view/other/PrintPreview.ts +++ b/packages/core/src/view/other/PrintPreview.ts @@ -10,7 +10,7 @@ import InternalEvent from '../event/InternalEvent'; import Client from '../../Client'; import { intersects } from '../../util/mathUtils'; import { DIALECT } from '../../util/Constants'; -import { write } from '../../util/domUtils'; +import { addLinkToHead, write } from '../../util/domUtils'; import { Graph } from '../Graph'; import CellState from '../cell/CellState'; import CellArray from '../cell/CellArray'; @@ -344,9 +344,9 @@ class PrintPreview { * this is specified then no HEAD tag, CSS and BODY tag will be written. */ open( - css: string | null=null, - targetWindow: Window | null=null, - forcePageBreaks: boolean=false, + css: string | null=null, + targetWindow: Window | null=null, + forcePageBreaks: boolean=false, keepOpen: boolean=false ): Window | null { // Closing the window while the page is being rendered may cause an @@ -612,7 +612,7 @@ class PrintPreview { } // Adds all required stylesheets - Client.link('stylesheet', `${Client.basePath}/css/common.css`, doc); + addLinkToHead('stylesheet', `${Client.basePath}/css/common.css`, doc); // Removes horizontal rules and page selector from print output doc.writeln('