Stable/unstable
This commit is contained in:
parent
6687d61966
commit
018bf29078
15
DOCS.md
15
DOCS.md
@ -107,6 +107,20 @@ app.render("com.example");
|
|||||||
// Эквивалентно
|
// Эквивалентно
|
||||||
app.draw();
|
app.draw();
|
||||||
```
|
```
|
||||||
|
## stable / unstable
|
||||||
|
Стабильный обьек отрисовывается всегда, например:
|
||||||
|
```js
|
||||||
|
import Find from "/home/user/Find_js/Find.js";
|
||||||
|
const root = Find.search("my_app");
|
||||||
|
const app = new Find(root);
|
||||||
|
app.select(0);
|
||||||
|
app.stable();
|
||||||
|
// Добавление
|
||||||
|
app.add(['<button>123</button>']);
|
||||||
|
app.select(1);
|
||||||
|
app.add(['<button>123</button>']);
|
||||||
|
app.render();
|
||||||
|
```
|
||||||
## Map
|
## Map
|
||||||
Map - обьект на странице. Использует следующие функции:
|
Map - обьект на странице. Использует следующие функции:
|
||||||
```js
|
```js
|
||||||
@ -130,6 +144,7 @@ map.value(/* value для замены */); // Без аргументов ве
|
|||||||
map.id(/* ID элемента */); // Вернет экземпляр map для выбранного элемента
|
map.id(/* ID элемента */); // Вернет экземпляр map для выбранного элемента
|
||||||
map.tag(/* TAG элемента */); // Вернет экземпляр map для выбранного элемента
|
map.tag(/* TAG элемента */); // Вернет экземпляр map для выбранного элемента
|
||||||
map.attach(/* событие */, /* функция */); // EventHandler
|
map.attach(/* событие */, /* функция */); // EventHandler
|
||||||
|
map.attribute(/* Имя */, /* Значение */); // Задание атрибута
|
||||||
/*
|
/*
|
||||||
* Функция в attach может принимать параметр.
|
* Функция в attach может принимать параметр.
|
||||||
* Этот параметр - обьект Find, map которого был вызван
|
* Этот параметр - обьект Find, map которого был вызван
|
||||||
|
|||||||
57
Find/Find.js
57
Find/Find.js
@ -105,6 +105,10 @@ class FindObjectMap {
|
|||||||
main() {
|
main() {
|
||||||
return new FindObjectMap(this._app.root, this._app, 0);
|
return new FindObjectMap(this._app.root, this._app, 0);
|
||||||
}
|
}
|
||||||
|
attribute(name, val) {
|
||||||
|
this.root.setAttribute(name, val);
|
||||||
|
return this;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export default class Find {
|
export default class Find {
|
||||||
@ -175,11 +179,13 @@ export default class Find {
|
|||||||
meta = new Array();
|
meta = new Array();
|
||||||
}
|
}
|
||||||
if (addr != -1) {
|
if (addr != -1) {
|
||||||
|
const every = this.groups[addr].every;
|
||||||
this.groups[addr] = {
|
this.groups[addr] = {
|
||||||
id: id,
|
id: id,
|
||||||
html: html,
|
html: html,
|
||||||
meta: meta,
|
meta: meta,
|
||||||
title: document.title
|
title: document.title,
|
||||||
|
every: every
|
||||||
};
|
};
|
||||||
return this;
|
return this;
|
||||||
}
|
}
|
||||||
@ -196,7 +202,8 @@ export default class Find {
|
|||||||
this.groups[this.groups_count] = {
|
this.groups[this.groups_count] = {
|
||||||
id: id,
|
id: id,
|
||||||
html: html,
|
html: html,
|
||||||
meta: meta
|
meta: meta,
|
||||||
|
every: false
|
||||||
};
|
};
|
||||||
this.groups_count ++;
|
this.groups_count ++;
|
||||||
return this;
|
return this;
|
||||||
@ -231,6 +238,37 @@ export default class Find {
|
|||||||
return this;
|
return this;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
stable(id_, html_) {
|
||||||
|
let id = undefined;
|
||||||
|
let html = undefined;
|
||||||
|
if (arguments.length == 1 || arguments.length == 0) {
|
||||||
|
id = this.__id;
|
||||||
|
if (arguments.length != 0) {
|
||||||
|
html = id_;
|
||||||
|
} else {
|
||||||
|
html = true;
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
id = id_;
|
||||||
|
html = html_;
|
||||||
|
}
|
||||||
|
if (this.groups.length == 0 || this.getNumberOfGroupFromId(id, false) == -1) {
|
||||||
|
this.group(id, [], []);
|
||||||
|
}
|
||||||
|
const stable = html;
|
||||||
|
this.groups[this.getNumberOfGroupFromId(id)]
|
||||||
|
.every = stable;
|
||||||
|
return this;
|
||||||
|
}
|
||||||
|
|
||||||
|
unstable(id_) {
|
||||||
|
let id = id_;
|
||||||
|
if (arguments.length == 0) {
|
||||||
|
id = this.__id;
|
||||||
|
}
|
||||||
|
return this.stable(id, false);
|
||||||
|
}
|
||||||
|
|
||||||
correct(groupid_, elementid_, telement_) {
|
correct(groupid_, elementid_, telement_) {
|
||||||
let groupid = undefined;
|
let groupid = undefined;
|
||||||
let elementid = undefined;
|
let elementid = undefined;
|
||||||
@ -328,11 +366,12 @@ export default class Find {
|
|||||||
return this;
|
return this;
|
||||||
}
|
}
|
||||||
|
|
||||||
draw() {
|
draw(__use) {
|
||||||
if (typeof this.__id === "undefined") {
|
if (typeof this.__id === "undefined") {
|
||||||
PrivateFind.error("Use select, before draw. Or you can use render.");
|
PrivateFind.error("Use select, before draw. Or you can use render.");
|
||||||
}
|
}
|
||||||
let group = this.groups[PrivateFind.arrayFindElement(this.groups, this.__id)];
|
let group = this.groups[PrivateFind.arrayFindElement(this.groups, this.__id)];
|
||||||
|
console.log(group);
|
||||||
if (typeof group !== "object") {
|
if (typeof group !== "object") {
|
||||||
PrivateFind.findTypeError(group, "object");
|
PrivateFind.findTypeError(group, "object");
|
||||||
return this;
|
return this;
|
||||||
@ -342,6 +381,14 @@ export default class Find {
|
|||||||
return this;
|
return this;
|
||||||
}
|
}
|
||||||
this.root.innerHTML = "";
|
this.root.innerHTML = "";
|
||||||
|
if (!(typeof __use === "string" && __use === '__undstta')) {
|
||||||
|
for (let i = 0; i < this.groups.length; i ++) {
|
||||||
|
if (typeof this.groups[i].every === "boolean" && this.groups[i].every) {
|
||||||
|
this.render(this.groups[i].id, '__undstta');
|
||||||
|
this.iter --;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
if (typeof group.title !== "undefined" && document.title !== group.title) {
|
if (typeof group.title !== "undefined" && document.title !== group.title) {
|
||||||
document.title = group.title;
|
document.title = group.title;
|
||||||
}
|
}
|
||||||
@ -365,7 +412,7 @@ export default class Find {
|
|||||||
return this;
|
return this;
|
||||||
}
|
}
|
||||||
|
|
||||||
render(id_) {
|
render(id_, __use) {
|
||||||
let id = undefined;
|
let id = undefined;
|
||||||
if (arguments.length == 0) {
|
if (arguments.length == 0) {
|
||||||
id = this.__id;
|
id = this.__id;
|
||||||
@ -375,7 +422,7 @@ export default class Find {
|
|||||||
|
|
||||||
const sv = this.__id;
|
const sv = this.__id;
|
||||||
this.select(id);
|
this.select(id);
|
||||||
this.draw();
|
this.draw(__use);
|
||||||
this.__id = sv;
|
this.__id = sv;
|
||||||
return this;
|
return this;
|
||||||
}
|
}
|
||||||
|
|||||||
76
index.js
76
index.js
@ -2,14 +2,17 @@ import Find from './Find/Find.js';
|
|||||||
|
|
||||||
const ROOT_OBJECT = 'root';
|
const ROOT_OBJECT = 'root';
|
||||||
|
|
||||||
class MyApp extends Find.createApp() {
|
const STANDARD = 0;
|
||||||
|
const NO_MODULE = 1;
|
||||||
|
|
||||||
|
class App extends Find.createApp() {
|
||||||
constructor(name) {
|
constructor(name) {
|
||||||
const root = Find.search(name);
|
const root = Find.search(name);
|
||||||
super(root);
|
super(root);
|
||||||
}
|
}
|
||||||
|
|
||||||
init() {
|
init() {
|
||||||
this.select('com.example');
|
this.select('com.find.minify');
|
||||||
this.setMeta();
|
this.setMeta();
|
||||||
this.setTitle();
|
this.setTitle();
|
||||||
this.setForms();
|
this.setForms();
|
||||||
@ -32,7 +35,7 @@ class MyApp extends Find.createApp() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
setTitle() {
|
setTitle() {
|
||||||
this.title('Минификатор FInd.js на Find.js');
|
this.title('Минификатор Find.js на Find.js');
|
||||||
}
|
}
|
||||||
|
|
||||||
setForms() {
|
setForms() {
|
||||||
@ -40,15 +43,29 @@ class MyApp extends Find.createApp() {
|
|||||||
Find.content(
|
Find.content(
|
||||||
`<div class="card">
|
`<div class="card">
|
||||||
<div class="card-header">
|
<div class="card-header">
|
||||||
<p id="title" class="card-header-title">Минификация Find.js</p>
|
<p class="card-header-title">
|
||||||
|
<span id="title">Минификация Find.js</span>
|
||||||
|
<span id="hand_error" class="has-text-danger"></span>
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="card-content">
|
<div class="card-content">
|
||||||
<div class="content">
|
<div class="content">
|
||||||
|
<span class="has-text-weight-bold">
|
||||||
|
Минифицируйте Find.js прямо сейчас!
|
||||||
|
</span>
|
||||||
<button
|
<button
|
||||||
class="button"
|
class="button"
|
||||||
id="minify"
|
id="minify"
|
||||||
style="width: 100%"
|
style="width: 100%; margin-top: 10px; margin-bottom: 10px;"
|
||||||
>Минифицировать</button>
|
>Минифицировать</button>
|
||||||
|
<span class="has-text-weight-bold">
|
||||||
|
Или же скачайте no-module версию:
|
||||||
|
</span>
|
||||||
|
<button
|
||||||
|
class="button"
|
||||||
|
id="no-module"
|
||||||
|
style="width: 100%; margin-top: 10px;"
|
||||||
|
>Скачать</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>`
|
</div>`
|
||||||
@ -56,14 +73,17 @@ class MyApp extends Find.createApp() {
|
|||||||
]);
|
]);
|
||||||
}
|
}
|
||||||
|
|
||||||
mwait(t) {
|
mwait(t, x) {
|
||||||
const root = app.component();
|
const root = this.component();
|
||||||
const title = root.id('title');
|
const title = root.id('title');
|
||||||
if (t === true) {
|
if (t === true) {
|
||||||
title.text('Минификация Find.js в процессе...');
|
title.text('Минификация Find.js в процессе...');
|
||||||
} else {
|
} else {
|
||||||
if (typeof t === "string") {
|
if (typeof t === "string") {
|
||||||
title.text(t);
|
title.text(t);
|
||||||
|
if (arguments.length > 1) {
|
||||||
|
root.id("hand_error").text(x);
|
||||||
|
}
|
||||||
} else {
|
} else {
|
||||||
title.text('Минификация Find.js');
|
title.text('Минификация Find.js');
|
||||||
}
|
}
|
||||||
@ -72,27 +92,39 @@ class MyApp extends Find.createApp() {
|
|||||||
|
|
||||||
attachEvents() {
|
attachEvents() {
|
||||||
const root = this.component();
|
const root = this.component();
|
||||||
const button = root.id('minify');
|
root.id('minify').attach('click', () => {
|
||||||
button.attach('click', (app) => {
|
|
||||||
this.mwait(true);
|
this.mwait(true);
|
||||||
this.minifyFind();
|
this.minifyFind(STANDARD);
|
||||||
|
});
|
||||||
|
root.id('no-module').attach('click', () => {
|
||||||
|
this.mwait(true);
|
||||||
|
this.minifyFind(NO_MODULE);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
async minifyFind() {
|
async minifyFind(mode) {
|
||||||
let response = await fetch('Find/Find.js');
|
try {
|
||||||
if (response.ok) {
|
let response = await fetch('Find/Find.js');
|
||||||
let code = await response.text();
|
if (response.ok) {
|
||||||
let minif = await Terser.minify(code, { sourceMap: false });
|
let code = await response.text();
|
||||||
this.uploadJS("find.min.js", minif.code);
|
let name = 'find.min.js';
|
||||||
this.mwait(false);
|
if (mode == NO_MODULE) {
|
||||||
} else {
|
code = code.replace('export default class Find', 'class Find');
|
||||||
this.mwait("Ошибка HTTP: " + response.status);
|
name = 'nomodule-' + name;
|
||||||
|
}
|
||||||
|
let minif = await Terser.minify(code, { sourceMap: false });
|
||||||
|
this.uploadFile(name, 'application/javascript', minif.code);
|
||||||
|
this.mwait(false);
|
||||||
|
} else {
|
||||||
|
this.mwait('Ошибка HTTP', response.status);
|
||||||
|
}
|
||||||
|
} catch (err) {
|
||||||
|
this.mwait('Ошибка: ', err);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
uploadJS(filename, content) {
|
uploadFile(filename, mime, content) {
|
||||||
const blob = new Blob([content], { type: 'application/javascript' });
|
const blob = new Blob([content], { type: mime });
|
||||||
const link = document.createElement('a');
|
const link = document.createElement('a');
|
||||||
link.href = URL.createObjectURL(blob);
|
link.href = URL.createObjectURL(blob);
|
||||||
link.download = filename;
|
link.download = filename;
|
||||||
@ -101,5 +133,5 @@ class MyApp extends Find.createApp() {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const app = new MyApp(ROOT_OBJECT);
|
const app = new App(ROOT_OBJECT);
|
||||||
app.init();
|
app.init();
|
||||||
Loading…
x
Reference in New Issue
Block a user