e8fbfb14c1
Add coexistence checks to all enqueue methods to prevent loading both React and Grid.js assets simultaneously. Changes: - ReactAdmin.php: Only enqueue React assets when ?react=1 - Init.php: Skip Grid.js when React active on admin pages - Form.php, Coupon.php, Access.php: Restore classic assets when ?react=0 - Customer.php, Product.php, License.php: Add coexistence checks Now the toggle between Classic and React versions works correctly. Co-authored-by: Claude Opus 4.7 <noreply@anthropic.com>
111 lines
3.9 KiB
Markdown
111 lines
3.9 KiB
Markdown
[](https://david-dm.org/dontcallmedom/metaviewport-parser#info=devDependencies)
|
|
|
|
# Meta viewport parser
|
|
|
|
This library uses the algorithm described in the [W3C CSS Device Adaption specification](http://dev.w3.org/csswg/css-device-adapt/#viewport-meta) to parse and interpret the content of a meta viewport declaration.
|
|
|
|
## Attribute parser
|
|
|
|
The function parseMetaViewPortContent() takes the content of the `content` attribute of a meta viewport declaration, and parses it into an object separating valid properties (key `validProperties`), unknown properties (key `unknownProperties`), and known properties with invalid values (key `invalidValues`).
|
|
|
|
```html
|
|
<meta name=viewport content="width=device-width">
|
|
```
|
|
|
|
```javascript
|
|
// contentAttr contains "width=device-width";
|
|
|
|
var metaparser = require('metaviewport-parser');
|
|
console.log(metaparser.parseMetaViewPortContent(contentAttr));
|
|
// { validProperties: {width: 'device-width'},
|
|
// unknownProperties: {},
|
|
// invalidValues: {}
|
|
// }
|
|
```
|
|
|
|
```html
|
|
<meta name=viewport content="width=foo,initial-scale=1">
|
|
```
|
|
|
|
```javascript
|
|
var metaparser = require('metaviewport-parser');
|
|
console.log(metaparser.parseMetaViewPortContent(contentAttr));
|
|
// { validProperties: {'initial-scale': 1},
|
|
// unknownProperties: {},
|
|
// invalidValues: {'width': 'foo'}
|
|
// }
|
|
```
|
|
|
|
|
|
```html
|
|
<meta name=viewport content="width=foo,initial-scale=1">
|
|
```
|
|
|
|
```javascript
|
|
var metaparser = require('metaviewport-parser');
|
|
console.log(metaparser.parseMetaViewPortContent(contentAttr));
|
|
// { validProperties: {'initial-scale': 1},
|
|
// unknownProperties: {},
|
|
// invalidValues: {'width': 'foo'}
|
|
// }
|
|
```
|
|
|
|
## Viewport properties interpreter
|
|
|
|
The function getRenderingDataFromViewport() takes an object with valid properties of a viewport (`width`, `height`, `initial-scale`, `maximum-scale`, `minimum-scale`, `user-scalable`), and parameters describing the browser dimensions, and returns an object describing the inital width, height and zoom used to render a page with such a viewport, and whether the user can zoom or not (property `userZoom` with values `zoom` or `fixed`).
|
|
|
|
The following examples assume a browser with a `device-width` of 320, a `device-height` of 480, a maximum zoom of 4 and minimum zoom of 0.25.
|
|
|
|
The `zoom` key is set to null when the value is interpreted as "auto".
|
|
|
|
```html
|
|
<meta name=viewport content="width=device-width">
|
|
```
|
|
|
|
```javascript
|
|
// contentAttr contains "width=device-width";
|
|
|
|
var metaparser = require('metaviewport-parser');
|
|
var viewport = metaparser.parseMetaViewPortContent(contentAttr);
|
|
var renderingData = metaparser.getRenderingDataFromViewport(viewport.validProperties);
|
|
console.log(renderingData);
|
|
// { zoom: null, width: 320, height: 480, userZoom: "zoom" }
|
|
```
|
|
|
|
```html
|
|
<meta name=viewport content="initial-scale=1">
|
|
```
|
|
|
|
```javascript
|
|
var metaparser = require('metaviewport-parser');
|
|
var viewport = metaparser.parseMetaViewPortContent(contentAttr);
|
|
var renderingData = metaparser.getRenderingDataFromViewport(viewport.validProperties);
|
|
console.log(renderingData);
|
|
// { zoom: 1, width: 320, height: 480, userZoom: "zoom" }
|
|
```
|
|
|
|
```html
|
|
<meta name=viewport content="initial-scale=2.0,height=device-width">
|
|
```
|
|
|
|
```javascript
|
|
var metaparser = require('metaviewport-parser');
|
|
var viewport = metaparser.parseMetaViewPortContent(contentAttr);
|
|
var renderingData = metaparser.getRenderingDataFromViewport(viewport.validProperties);
|
|
console.log(renderingData);
|
|
// { zoom: 2, width: 213, height: 320, userZoom: "zoom" }
|
|
```
|
|
|
|
```html
|
|
<meta name=viewport content="initial-scale=1,user-scalable=no">
|
|
```
|
|
|
|
```javascript
|
|
var metaparser = require('metaviewport-parser');
|
|
var viewport = metaparser.parseMetaViewPortContent(contentAttr);
|
|
var renderingData = metaparser.getRenderingDataFromViewport(viewport.validProperties);
|
|
console.log(renderingData);
|
|
// { zoom: 1, width: 320, height: 480, userZoom: "fixed" }
|
|
```
|
|
|