title
This commit is contained in:
parent
a81addc100
commit
f6b89012e5
4
DOCS.md
4
DOCS.md
@ -91,6 +91,8 @@ app.add(['<button>123</button>']);
|
|||||||
app.correct(0, '<input placeholder="123"></input>')
|
app.correct(0, '<input placeholder="123"></input>')
|
||||||
// Удаление
|
// Удаление
|
||||||
app.delete(0);
|
app.delete(0);
|
||||||
|
// Заголовок
|
||||||
|
app.title("Мой заголовок");
|
||||||
```
|
```
|
||||||
## Рендер
|
## Рендер
|
||||||
Для рендера группы используется функция render. Для отрисовки текущей группы - draw:
|
Для рендера группы используется функция render. Для отрисовки текущей группы - draw:
|
||||||
@ -118,6 +120,8 @@ app.draw();
|
|||||||
const map = app.map();
|
const map = app.map();
|
||||||
map.root // Доступ к элементу DOM
|
map.root // Доступ к элементу DOM
|
||||||
map.app(); // Исходный элемент Find
|
map.app(); // Исходный элемент Find
|
||||||
|
map.merge(); // Объединить HTML в элемент
|
||||||
|
map.main(); // Загрузить главный элемент
|
||||||
map.select(/* CSS-селектор */); // Вернет экземпляр map для выбранного элемента
|
map.select(/* CSS-селектор */); // Вернет экземпляр map для выбранного элемента
|
||||||
map.read(); // Прочитать HTML
|
map.read(); // Прочитать HTML
|
||||||
map.text(/* Текст для textContent */); // Без аргументов вернет текст элемента
|
map.text(/* Текст для textContent */); // Без аргументов вернет текст элемента
|
||||||
|
|||||||
105
Find/Find.js
105
Find/Find.js
@ -21,24 +21,23 @@
|
|||||||
*
|
*
|
||||||
*/
|
*/
|
||||||
|
|
||||||
const ERROR_CODE = "Find framework error:";
|
|
||||||
|
|
||||||
class FindObjectMap {
|
class FindObjectMap {
|
||||||
constructor(_root, app) {
|
constructor(_root, app, num) {
|
||||||
this.root = _root;
|
this.root = _root;
|
||||||
if (typeof this.root !== "object") {
|
if (typeof this.root !== "object") {
|
||||||
PrivateFind.error("Unknown root!");
|
PrivateFind.error("Неизвестный root!");
|
||||||
}
|
}
|
||||||
this._app = app;
|
this._app = app;
|
||||||
|
this._num = num;
|
||||||
return this;
|
return this;
|
||||||
}
|
}
|
||||||
select(q) {
|
select(q) {
|
||||||
const o = this.root.querySelector(q);
|
const o = this.root.querySelector(q);
|
||||||
if (typeof o === "undefined") {
|
if (typeof o === "undefined") {
|
||||||
PrivateFind.error("No objects of selector");
|
PrivateFind.error("Нет обьектов для селектора!");
|
||||||
return undefined;
|
return undefined;
|
||||||
}
|
}
|
||||||
return new FindObjectMap(o, this._app);
|
return new FindObjectMap(o, this._app, this._num + 1);
|
||||||
}
|
}
|
||||||
read() {
|
read() {
|
||||||
return this.root.innerHTML;
|
return this.root.innerHTML;
|
||||||
@ -70,7 +69,7 @@ class FindObjectMap {
|
|||||||
PrivateFind.error("No objects of selector");
|
PrivateFind.error("No objects of selector");
|
||||||
return undefined;
|
return undefined;
|
||||||
}
|
}
|
||||||
return new FindObjectMap(o, this._app);
|
return new FindObjectMap(o, this._app, this._num + 1);
|
||||||
}
|
}
|
||||||
tag(q) {
|
tag(q) {
|
||||||
const o = this.root.getElementsByTagName(q);
|
const o = this.root.getElementsByTagName(q);
|
||||||
@ -78,7 +77,7 @@ class FindObjectMap {
|
|||||||
PrivateFind.error("No objects of selector");
|
PrivateFind.error("No objects of selector");
|
||||||
return undefined;
|
return undefined;
|
||||||
}
|
}
|
||||||
return new FindObjectMap(o, this._app);
|
return new FindObjectMap(o, this._app, this._num + 1);
|
||||||
}
|
}
|
||||||
attach(event, func) {
|
attach(event, func) {
|
||||||
this.root.addEventListener(event, () => {
|
this.root.addEventListener(event, () => {
|
||||||
@ -86,9 +85,30 @@ class FindObjectMap {
|
|||||||
});
|
});
|
||||||
return this;
|
return this;
|
||||||
}
|
}
|
||||||
|
merge() {
|
||||||
|
if (this._num != 0) {
|
||||||
|
PrivateFind.error(
|
||||||
|
"Вы можете создавать " +
|
||||||
|
"merge-обьект только из корневого map(), " +
|
||||||
|
"но уровень вложенности данного map() равен " +
|
||||||
|
String(this._num) + "!"
|
||||||
|
);
|
||||||
|
return this;
|
||||||
|
}
|
||||||
|
const addr = this._app.getNumberOfGroupFromId(this._app.__id);
|
||||||
|
this._app.groups[addr].html = new Array(this.read());
|
||||||
|
return this;
|
||||||
|
}
|
||||||
app() {
|
app() {
|
||||||
return this._app;
|
return this._app;
|
||||||
}
|
}
|
||||||
|
main() {
|
||||||
|
return new FindObjectMap(this._app.root, this._app, 0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const tags = {
|
||||||
|
"mobile" : `<meta name="viewport" content="width=device-width, initial-scale=1"></meta>`
|
||||||
}
|
}
|
||||||
|
|
||||||
export default class {
|
export default class {
|
||||||
@ -97,12 +117,17 @@ export default class {
|
|||||||
|
|
||||||
constructor(root) {
|
constructor(root) {
|
||||||
this.root = root;
|
this.root = root;
|
||||||
|
this.iter = 0;
|
||||||
this.groups = new Array();
|
this.groups = new Array();
|
||||||
this.groups_count = 0;
|
this.groups_count = 0;
|
||||||
this._map = new FindObjectMap(this.root, this);
|
this._map = new FindObjectMap(this.root, this, 0);
|
||||||
return this;
|
return this;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
static tags(name) {
|
||||||
|
return tags[name];
|
||||||
|
}
|
||||||
|
|
||||||
static attach(x, f) {
|
static attach(x, f) {
|
||||||
return `${x}="${f.replace("\"", """)}"`;
|
return `${x}="${f.replace("\"", """)}"`;
|
||||||
}
|
}
|
||||||
@ -131,18 +156,26 @@ export default class {
|
|||||||
id = id_;
|
id = id_;
|
||||||
html = html_;
|
html = html_;
|
||||||
}
|
}
|
||||||
|
let l = false;
|
||||||
if (typeof meta_ === "undefined") {
|
if (typeof meta_ !== "undefined") {
|
||||||
meta_ = new Array();
|
l = true;
|
||||||
}
|
}
|
||||||
|
|
||||||
const addr = this.getNumberOfGroupFromId(id, false);
|
const addr = this.getNumberOfGroupFromId(id, false);
|
||||||
|
let meta = undefined;
|
||||||
|
if (addr == -1) {
|
||||||
|
meta = meta_;
|
||||||
|
} else {
|
||||||
|
meta = l ? meta_ : this.groups[addr].meta;
|
||||||
|
}
|
||||||
|
if (typeof meta !== "object") {
|
||||||
|
meta = new Array();
|
||||||
|
}
|
||||||
if (addr != -1) {
|
if (addr != -1) {
|
||||||
let s = this.groups[addr].meta;
|
|
||||||
this.groups[addr] = {
|
this.groups[addr] = {
|
||||||
id: id,
|
id: id,
|
||||||
html: html,
|
html: html,
|
||||||
meta: s
|
meta: meta,
|
||||||
|
title: document.title
|
||||||
};
|
};
|
||||||
return this;
|
return this;
|
||||||
}
|
}
|
||||||
@ -159,7 +192,7 @@ export default class {
|
|||||||
this.groups[this.groups_count] = {
|
this.groups[this.groups_count] = {
|
||||||
id: id,
|
id: id,
|
||||||
html: html,
|
html: html,
|
||||||
meta: meta_
|
meta: meta
|
||||||
};
|
};
|
||||||
this.groups_count ++;
|
this.groups_count ++;
|
||||||
return this;
|
return this;
|
||||||
@ -224,7 +257,7 @@ export default class {
|
|||||||
html = html_;
|
html = html_;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (this.groups.length == 0) {
|
if (this.groups.length == 0 || this.getNumberOfGroupFromId(id, false) == -1) {
|
||||||
this.group(id, html);
|
this.group(id, html);
|
||||||
return this;
|
return this;
|
||||||
}
|
}
|
||||||
@ -238,6 +271,25 @@ export default class {
|
|||||||
return this;
|
return this;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
title(id_, html_) {
|
||||||
|
let id = undefined;
|
||||||
|
let html = undefined;
|
||||||
|
if (arguments.length == 1) {
|
||||||
|
id = this.__id;
|
||||||
|
html = id_;
|
||||||
|
} else {
|
||||||
|
id = id_;
|
||||||
|
html = html_;
|
||||||
|
}
|
||||||
|
if (this.groups.length === 0 || this.getNumberOfGroupFromId(id, false) === -1) {
|
||||||
|
this.group(id, []);
|
||||||
|
}
|
||||||
|
const title = html;
|
||||||
|
const addr = this.getNumberOfGroupFromId(id);
|
||||||
|
this.groups[addr].title = String(title);
|
||||||
|
return this;
|
||||||
|
}
|
||||||
|
|
||||||
meta(id_, html_) {
|
meta(id_, html_) {
|
||||||
let id = undefined;
|
let id = undefined;
|
||||||
let html = undefined;
|
let html = undefined;
|
||||||
@ -249,7 +301,7 @@ export default class {
|
|||||||
html = html_;
|
html = html_;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (this.groups.length == 0) {
|
if (this.groups.length == 0 || this.getNumberOfGroupFromId(id, false) == -1) {
|
||||||
this.group(id, [], html);
|
this.group(id, [], html);
|
||||||
return this;
|
return this;
|
||||||
}
|
}
|
||||||
@ -282,10 +334,13 @@ export default class {
|
|||||||
return this;
|
return this;
|
||||||
}
|
}
|
||||||
this.root.innerHTML = "";
|
this.root.innerHTML = "";
|
||||||
|
if (typeof group.title !== "undefined" && document.title !== group.title) {
|
||||||
|
document.title = group.title;
|
||||||
|
}
|
||||||
if (
|
if (
|
||||||
typeof group.meta === "object" &&
|
typeof group.meta === "object" &&
|
||||||
Array.isArray(group.meta) &&
|
Array.isArray(group.meta) &&
|
||||||
group.meta.length > 0
|
group.meta.length > 0 && this.iter === 0
|
||||||
) {
|
) {
|
||||||
for (let i = 0; i < group.meta.length; i ++) {
|
for (let i = 0; i < group.meta.length; i ++) {
|
||||||
if (typeof group.meta[i] === "string") {
|
if (typeof group.meta[i] === "string") {
|
||||||
@ -298,6 +353,7 @@ export default class {
|
|||||||
this.root.innerHTML += group.html[i];
|
this.root.innerHTML += group.html[i];
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
this.iter ++;
|
||||||
return this;
|
return this;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -338,6 +394,13 @@ export default class {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
class FindError extends Error {
|
||||||
|
constructor(message) {
|
||||||
|
super(message);
|
||||||
|
this.name = 'Find Framework Error';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
class PrivateFind {
|
class PrivateFind {
|
||||||
|
|
||||||
/* Private section */
|
/* Private section */
|
||||||
@ -352,11 +415,11 @@ class PrivateFind {
|
|||||||
}
|
}
|
||||||
|
|
||||||
static error(text) {
|
static error(text) {
|
||||||
console.error(ERROR_CODE, text);
|
throw new FindError(text);
|
||||||
}
|
}
|
||||||
|
|
||||||
static findTypeError(obj, tp) {
|
static findTypeError(obj, tp) {
|
||||||
console.error(ERROR_CODE, "You can't use <" + (typeof obj) + "> as <" + tp + ">!");
|
throw new TypeError(`Вы пытаетесь передать ${typeof obj}, в то время как ожидается ${tp}!`);
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|||||||
8
test.js
8
test.js
@ -1,5 +1,5 @@
|
|||||||
import Find from "./Find/Find.js";
|
import Find from "./Find/Find.js";
|
||||||
new Find(Find.search("test")).select("com.example").meta([
|
let app = new Find(Find.search("test")).select("com.example").title("Мой тест").meta([
|
||||||
Find.css("bulma.min.css"),
|
Find.css("bulma.min.css"),
|
||||||
'<meta name="viewport" content="width=device-width, initial-scale=1">'
|
'<meta name="viewport" content="width=device-width, initial-scale=1">'
|
||||||
]).meta([
|
]).meta([
|
||||||
@ -23,9 +23,11 @@ new Find(Find.search("test")).select("com.example").meta([
|
|||||||
})()]).draw().map().id("user").html(
|
})()]).draw().map().id("user").html(
|
||||||
`<button
|
`<button
|
||||||
class="button"
|
class="button"
|
||||||
|
id="reload"
|
||||||
style="margin-top: 10px;"
|
style="margin-top: 10px;"
|
||||||
>Перезагрузить</button>`).attach("click", () => {
|
>Перезагрузить</button>`).id("reload").attach("click", () => {
|
||||||
location.reload();
|
location.reload();
|
||||||
});
|
}).main().merge().app().title(2).draw();
|
||||||
|
/*.title(2).draw();*/
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user