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
development
Thomas Bouffard 2022-07-16 07:15:04 +02:00 committed by GitHub
parent 893ad44ff2
commit 311514dca3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 65 additions and 189 deletions

View File

@ -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
* <script type="text/javascript">
* let mxResourceExtension = '.txt';
* </script>
* <script type="text/javascript" src="/path/to/core/directory/js/Client.js"></script>
* ```
*/
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 <Editor>. Default is true. NOTE: This is a global variable,
* not a variable of Client. If this is false, you can use <Client.loadResources>
* with its callback to load the default bundles asynchronously.
*
* ```javascript
* <script type="text/javascript">
* let mxLoadResources = false;
* </script>
* <script type="text/javascript" src="/path/to/core/directory/js/Client.js"></script>
* ```
*/
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
* <script type="text/javascript">
* let mxForceIncludes = false;
* </script>
* <script type="text/javascript" src="/path/to/core/directory/js/Client.js"></script>
* ```
*/
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
* <script type="text/javascript">
* let mxLoadStylesheets = false;
* </script>
* <script type="text/javascript" src="/path/to/core/directory/js/Client.js"></script>
* ```
*/
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
* <script type="text/javascript">
* mxBasePath = '/path/to/core/directory';
* </script>
* <script type="text/javascript" src="/path/to/core/directory/js/Client.js"></script>
* ```
*
* 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
* <Client.basePath> + '/images'. Set mxImageBasePath prior to loading the
* Client library as follows to override this setting:
*
* ```javascript
* <script type="text/javascript">
* mxImageBasePath = '/path/to/image/directory';
* </script>
* <script type="text/javascript" src="/path/to/core/directory/js/Client.js"></script>
* ```
* 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
* <script type="text/javascript">
* mxLanguage = 'en';
* </script>
* <script type="text/javascript" src="js/Client.js"></script>
* ```
*
* 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.
* <Editor.askZoomResource>, <Editor.lastSavedResource>,
* <Editor.currentFileResource>, <Editor.propertiesResource>,
* <Editor.tasksResource>, <Editor.helpResource>, <Editor.outlineResource>,
* {@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
* <script type="text/javascript">
* mxDefaultLanguage = 'de';
* </script>
* <script type="text/javascript" src="js/Client.js"></script>
* ```
* 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
* <script type="text/javascript">
* mxLanguages = ['de', 'it', 'fr'];
* </script>
* <script type="text/javascript" src="js/Client.js"></script>
* ```
* {@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;

View File

@ -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(<string>tmp.getAttribute('basename'));
} else if (tmp.nodeName === 'stylesheet') {
Client.link('stylesheet', <string>tmp.getAttribute('name'));
addLinkToHead('stylesheet', <string>tmp.getAttribute('name'));
}
tmp = <Element>tmp.nextSibling;

View File

@ -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 + <extension> or null if
* <loadSpecialBundle> is false or lan equals <Client.defaultLanguage>.
* implementation returns `basename + '_' + lan + <extension>` or `null` if
* {@link Translations.loadSpecialBundle} is `false` or `lan` equals {@link Client.defaultLanguage}.
*
* If {@link Resources#languages} is not null and <Client.language> contains
* a dash, then this method checks if <isLanguageSupported> 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;
};

View File

@ -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);
};

View File

@ -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('<style type="text/css">');