als-layout 2.5.0 → 2.5.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +2 -2
- package/readme.md +8 -8
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "als-layout",
|
|
3
|
-
"version": "2.5.
|
|
3
|
+
"version": "2.5.2",
|
|
4
4
|
"description": "Html layout constructor",
|
|
5
5
|
"main": "index.js",
|
|
6
6
|
"directories": {
|
|
@@ -15,7 +15,7 @@
|
|
|
15
15
|
"license": "ISC",
|
|
16
16
|
"dependencies": {
|
|
17
17
|
"als-css-parser": "^0.5.0",
|
|
18
|
-
"als-document": "^1.4.
|
|
18
|
+
"als-document": "^1.4.0",
|
|
19
19
|
"als-simple-css": "^9.1.0"
|
|
20
20
|
}
|
|
21
21
|
}
|
package/readme.md
CHANGED
|
@@ -5,6 +5,9 @@
|
|
|
5
5
|
### What is it?
|
|
6
6
|
`als-layout` is a JavaScript library designed to simplify and enhance the process of constructing and managing web page layouts. It provides a comprehensive API for modifying HTML documents dynamically, allowing developers to add, update, and manipulate various elements such as meta tags, styles, scripts, and more.
|
|
7
7
|
|
|
8
|
+
### Why is it needed?
|
|
9
|
+
Managing HTML document structures and their contents can often become repetitive and error-prone when done manually. `als-modular` offers a structured and reusable approach, reducing development time and improving code maintainability.
|
|
10
|
+
|
|
8
11
|
### What can you do with it and where can it be used?
|
|
9
12
|
The `als-layout` library is versatile, suitable for:
|
|
10
13
|
- Building dynamic web pages that require frequent updates to their metadata, styles, or scripts.
|
|
@@ -22,11 +25,8 @@ npm i als-layout
|
|
|
22
25
|
```js
|
|
23
26
|
const Layout = require('als-layout')
|
|
24
27
|
```
|
|
25
|
-
|
|
28
|
+
|
|
26
29
|
## Change Log
|
|
27
|
-
* V2.4.0
|
|
28
|
-
* child components published issue fixed
|
|
29
|
-
* removed throwing error for recursive components
|
|
30
30
|
* V2.3.0
|
|
31
31
|
* Default, component will not be included in $App, if not [publish] attribute
|
|
32
32
|
* When cloning, components and other staff cloned too
|
|
@@ -49,7 +49,7 @@ const Layout = require('als-layout')
|
|
|
49
49
|
* onload() method
|
|
50
50
|
* bugs fixed
|
|
51
51
|
|
|
52
|
-
|
|
52
|
+
|
|
53
53
|
## Basic Usage
|
|
54
54
|
|
|
55
55
|
### Initialization
|
|
@@ -98,7 +98,7 @@ Example how it works:
|
|
|
98
98
|
```js
|
|
99
99
|
const layout = new Layout().charset().viewport().title('On load').onload()
|
|
100
100
|
layout.body.innerHTML = /*html*/`<div onload="this.innerHTML = 'new content'">original content</div>`
|
|
101
|
-
```
|
|
101
|
+
```
|
|
102
102
|
## Cloning Functionality
|
|
103
103
|
|
|
104
104
|
### What is Cloning and Why is it Necessary?
|
|
@@ -118,7 +118,7 @@ const newLayout = layout.clone;
|
|
|
118
118
|
|
|
119
119
|
Cloning is particularly useful in scenarios where templates or base layouts are used repeatedly with slight variations, providing a robust and scalable solution for web page generation.
|
|
120
120
|
|
|
121
|
-
|
|
121
|
+
|
|
122
122
|
## Advanced Usage
|
|
123
123
|
|
|
124
124
|
The `als-layout` library allows for sophisticated manipulation of web page layouts, providing robust tools for creating dynamic and complex web pages. Below is an advanced example demonstrating various capabilities of the library:
|
|
@@ -162,7 +162,7 @@ In this example:
|
|
|
162
162
|
|
|
163
163
|
This advanced example illustrates how `als-layout` can be used to handle complex scenarios and requirements in web development, enhancing the flexibility and power at your disposal.
|
|
164
164
|
|
|
165
|
-
|
|
165
|
+
|
|
166
166
|
## Rendering
|
|
167
167
|
|
|
168
168
|
Each instance of `Layout` comes equipped with a `render` method that compiles the HTML structure and embeds a JavaScript object to manage the page dynamically. This object, known as `window.$App`, allows for real-time interaction and updates within the page.
|