apuc/custom_block
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first

Browse Source
This commit is contained in:
Kavalar 2024-10-09 00:18:18 +03:00
commit f78373ebee
5 changed files with 547 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored Normal file
View File

@ -0,0 +1 @@
.idea

89
example.html Normal file
View File

@ -0,0 +1,89 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
crossorigin="anonymous"></script>
<script src="src/custom_block.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<h1>hello</h1>
<h2>world</h2>
</div>
<div class="row">
<div class="svg_block">
<div class="title_block">
Заголовок блока
</div>
<div class="up_text_block">
Как я уже сказал, взаимодействие игрока происходит через устройства ввода и пользовательский интерфейс,
который представляет из себя обычные React компоненты.
</div>
<div class="down_text_block">
Съешь еще этих мягких французских булок, да выпей чаю. Съешь еще этих мягких французских булок, да выпей
чаю. Съешь еще этих мягких французских булок, да выпей чаю. Съешь еще этих мягких французских булок, да
выпей чаю. Съешь еще этих мягких французских булок, да выпей чаю. Съешь еще этих мягких французских
булок, да выпей чаю. Съешь еще этих мягких французских булок, да выпей чаю. Съешь еще этих мягких французских булок, да выпей
чаю. Съешь еще этих мягких французских булок, да выпей чаю. Съешь еще этих мягких французских булок, да
выпей чаю. Съешь еще этих мягких французских булок, да выпей чаю. Съешь еще этих мягких французских
булок, да выпей чаю.
</div>
</div>
</div>
<div class="row">
<div class="col-6">
<div class="svg_block_2">
<div class="title_block">
Заголовок блока
</div>
<div class="up_text_block">
Как я уже сказал, взаимодействие игрока происходит через устройства
</div>
<div class="down_text_block">
Съешь еще этих мягких французских булок, да выпей чаю. Съешь еще этих мягких французских булок, да
выпей чаю.
</div>
</div>
</div>
<div class="col-6">
<div class="svg_block_2">
<div class="title_block">
Заголовок блока
</div>
<div class="up_text_block">
Как я уже сказал, взаимодействие игрока происходит через устройства
</div>
<div class="down_text_block">
Съешь еще этих мягких французских булок, да выпей чаю. Съешь еще этих мягких французских булок, да
выпей чаю.
</div>
</div>
</div>
</div>
</div>
<script>
window.addEventListener("load", function () {
cb(".svg_block", {});
cb(".svg_block_2", {
'left_up_rect_w': 130,
'left_up_rect_h': 30,
'right_down_rect_w': 50,
'right_down_rect_h': 50,
'border_radius': 15,
'title_font_size': 20,
});
});
</script>
</body>
</html>

128
index.html Normal file
View File

@ -0,0 +1,128 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
crossorigin="anonymous"></script>
<script src="src/custom_block.js"></script>
<script src="src/ui.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<h1>hello</h1>
<h2>world</h2>
<div class="svg_block">
<div class="title_block">
Заголовок блока
</div>
<div class="up_text_block">
Как я уже сказал, взаимодействие игрока происходит через устройства ввода и пользовательский интерфейс, который представляет из себя обычные React компоненты.
</div>
<div class="down_text_block">
Съешь еще этих мягких французских булок, да выпей чаю. Съешь еще этих мягких французских булок, да выпей чаю. Съешь еще этих мягких французских булок, да выпей чаю. Съешь еще этих мягких французских булок, да выпей чаю. Съешь еще этих мягких французских булок, да выпей чаю. Съешь еще этих мягких французских булок, да выпей чаю.
</div>
</div>
<!-- <svg id="svg_block" height="400" width="900" xmlns="http://www.w3.org/2000/svg">-->
<!-- <path id="main" d="M 10 120 l 0 100 q 0 20 20 20 l 700 0 q 20 0 20 -20 l 0 -80 q 0 -20 20 -20 l 80 0 q 20 0 20 -20 l 0 -50 q 0 -20 -20 -20 l -500 0 q -20 0 -20 20 l 0 30 q 0 20 -20 20 l -280 0 q -20 0 -20 20" stroke="MistyRose" stroke-width="3" fill="MintCream"/>-->
<!-- <text x="330" y="40" >-->
<!-- <tspan x="340" dy="1em" fill="red">-->
<!-- Съешь еще этих мягких французских булок, да выпей чаю.-->
<!-- </tspan>-->
<!-- <tspan x="340" dy="1em" fill="blue">-->
<!-- Съешь еще этих мягких французских булок, да выпей чаю.-->
<!-- </tspan>-->
<!-- <tspan x="340" dy="1em" fill="green">-->
<!-- Съешь еще этих мягких французских булок, да выпей чаю.-->
<!-- </tspan>-->
<!-- </text>-->
<!-- </svg>-->
</div>
<div class="row">
<div class="col-3">
<label for="title_text" class="form-label">Заголовок</label>
<div class="input-group mb-3">
<input id="title_text" name="title_text" type="text" class="form-control svg_info"
placeholder="Заголовок" value="Заголовок блока">
</div>
<label for="up_text" class="form-label">Верхний текст</label>
<div class="input-group mb-3">
<textarea id="up_text" name="up_text" class="form-control svg_info"></textarea>
</div>
<label for="down_text" class="form-label">Нижний текст</label>
<div class="input-group mb-3">
<textarea id="down_text" name="down_text" class="form-control svg_info"></textarea>
</div>
</div>
<div class="col-3">
<div class="mb-3">
<label for="title_font_size" class="form-label">Размер текста заголовка</label>
<input type="range" name="title_font_size" class="form-range range_to_info svg_info" min="10" max="50"
step="1" id="title_font_size">
</div>
<div class="mb-3">
<label for="block_font_size" class="form-label">Размер текста блоке</label>
<input type="range" name="block_font_size" class="form-range range_to_info svg_info" min="10" max="30"
step="1" id="block_font_size">
</div>
<div class="mb-3">
<label for="border_radius" class="form-label">Border radius</label>
<input type="range" class="form-range range_to_info svg_info" min="1" max="30" step="1"
id="border_radius">
</div>
</div>
<div class="col-3">
<label for="border_color" class="form-label">Border color</label>
<div class="input-group mb-3">
<input type="color" name="border_color" class="form-control svg_info" value="#FFE4E1" id="border_color">
</div>
<label for="background_color" class="form-label">Background color</label>
<div class="input-group mb-3">
<input type="color" name="background_color" class="form-control svg_info" value="#F5FFFA"
id="background_color">
</div>
<label for="left_up_rect_w" class="form-label">Ширина пространства с лева вверху</label>
<div class="input-group mb-3">
<input id="left_up_rect_w" name="left_up_rect_w" type="number" class="form-control svg_info">
</div>
<label for="left_up_rect_h" class="form-label">Высота пространства с лева вверху</label>
<div class="input-group mb-3">
<input id="left_up_rect_h" name="left_up_rect_h" type="number" class="form-control svg_info">
</div>
</div>
<div class="col-3">
<label for="right_down_rect_w" class="form-label">Ширина пространства с права внизу</label>
<div class="input-group mb-3">
<input id="right_down_rect_w" name="right_down_rect_w" type="number" class="form-control svg_info">
</div>
<label for="right_down_rect_h" class="form-label">Высота пространства с права внизу</label>
<div class="input-group mb-3">
<input id="right_down_rect_h" name="right_down_rect_h" type="number" class="form-control svg_info">
</div>
<div>
<input id="gen" type="button" class="btn btn-primary" value="Создать">
</div>
</div>
</div>
</div>
<script>
window.addEventListener("load", function () {
cb(".svg_block", {});
let btn_gen = document.getElementById("gen");
btn_gen.addEventListener("click", function () {
let inputs = document.querySelectorAll(".svg_info");
let data = {};
inputs.forEach((item) => {
data[item.id] = item.value
});
cb(".svg_block", data);
});
});
</script>
</body>
</html>

295
src/custom_block.js Normal file
View File

@ -0,0 +1,295 @@
function parentWidth(elem) {
return elem.parentElement.clientWidth;
}
class Custom_block {
constructor(parent_element) {
this.element = parent_element;
}
params(params) {
this._params = params;
}
create() {
let svg = document.createElementNS('http://www.w3.org/2000/svg', "svg");
// Текси верхнего блока
let up_text_block = this.element.querySelector(".up_text_block");
let up_text_block_text = '';
if (up_text_block !== null){
up_text_block_text = up_text_block.innerHTML;
}
if (this._params.hasOwnProperty("up_text")){
up_text_block_text = this._params.up_text;
}
//
// Текст нижнего блока
let down_text_block = this.element.querySelector(".down_text_block");
let down_text_block_text = '';
if (down_text_block !== null){
down_text_block_text = down_text_block.innerHTML;
}
if (this._params.hasOwnProperty("down_text")){
down_text_block_text = this._params.down_text;
}
//
// Текст заголовка
let title_block = this.element.querySelector(".title_block");
let title_block_text = '';
if (title_block !== null){
title_block_text = title_block.innerHTML;
}
if (this._params.hasOwnProperty("title_text")){
title_block_text = this._params.title_text;
}
//
up_text_block = up_text_block_text.replace(/(\r\n|\n|\r)/gm, "").trim();
down_text_block = down_text_block_text.replace(/(\r\n|\n|\r)/gm, "").trim();
title_block = title_block_text.replace(/(\r\n|\n|\r)/gm, "").trim();
this.element.innerHTML = "";
this.element.appendChild(svg);
let parent_w = parentWidth(svg)
svg.setAttribute("width", parent_w)
let parent_h = 300;
let font_size = svg.style;
let margin_top = this._params.margin_top ?? 40;
let margin_left = this._params.margin_left ?? 20;
let padding_top = this._params.padding_top ?? 0;
let padding_bottom = this._params.padding_bottom ?? 20;
let br = this._params.border_radius ? Number(this._params.border_radius) : 20;
let right_down_rect_w = this._params.right_down_rect_w ? Number(this._params.right_down_rect_w) : 100;
let right_down_rect_h = this._params.right_down_rect_h ? Number(this._params.right_down_rect_h) : 100;
let left_up_rect_w = this._params.left_up_rect_w ? Number(this._params.left_up_rect_w) : 350;
let left_up_rect_h = this._params.left_up_rect_h ? Number(this._params.left_up_rect_h) : 50;
// базовые настройки
// Расчет верхней грани
let up_size = parent_w - (br * 4) - 40 - left_up_rect_w - margin_left;
//
// Расчет нижняя грань
let down_size = parent_w - (br * 4) - 40 - right_down_rect_w - margin_left;
//
let title_text = title_block ?? "Hello Name Hello Name";
let title_font_size = this._params.title_font_size ?? 28;
let up_text = up_text_block ?? "Съешь еще этих мягких французских булок, да выпей чаю. Съешь еще этих мягких французских булок, да выпей чаю. Съешь еще этих мягких французских булок, да выпей чаю. Съешь еще этих мягких французских булок, да выпей чаю. Съешь еще этих мягких французских булок, да выпей чаю. Съешь еще этих мягких французских булок, да выпей чаю."
let down_text = down_text_block ?? "Съешь еще этих мягких французских булок, да выпей чаю. Съешь еще этих мягких французских булок, да выпей чаю. Съешь еще этих мягких французских булок, да выпей чаю. Съешь еще этих мягких французских булок, да выпей чаю. Съешь еще этих мягких французских булок, да выпей чаю. Съешь еще этих мягких французских булок, да выпей чаю."
let default_font_size = this._params.block_font_size ?? 16;
// Верхний текст, расчет
let up_text_ln = up_text.length * default_font_size;
let count_symbols_at_row_up_text = (Math.round(up_size / default_font_size) * 2) - 5;
let rows_count_up_text = Math.round(up_text.length / count_symbols_at_row_up_text);
let rows_up_text = this.get_tspan_arr(up_text_block, count_symbols_at_row_up_text);
//
// Расчет нижний текст
let down_text_ln = down_text.length * default_font_size;
let count_symbols_at_row_down_text = (Math.round(down_size / default_font_size) * 2) - 5;
let rows_count_down_text = Math.round(down_text.length / count_symbols_at_row_down_text);
let rows_down_text = this.get_tspan_arr(down_text_block, count_symbols_at_row_down_text);
//
// Расчет заголовок текст
let title_text_ln = title_text.length * title_font_size;
let count_symbols_at_row_title_text = (Math.round(left_up_rect_w / title_font_size) * 2);
let rows_count_title_text = Math.round(title_text.length / count_symbols_at_row_title_text)
//
// Расчет правый блок
let right_size = rows_count_up_text * default_font_size;
//
// Расчет левой грани
let left_size = rows_count_down_text * default_font_size;
//
// Расчет блока для заголовка
let title_box = rows_count_title_text * title_font_size;
//
if (title_box > left_up_rect_h) {
left_up_rect_h = title_box;
}
// Расчет стартовые координаты
let start_point_y;
if (left_up_rect_h > right_size) {
start_point_y = left_up_rect_h + (br * 2) + margin_top;
right_size = left_up_rect_h;
} else {
start_point_y = right_size + (br * 2) + margin_top;
left_up_rect_h = right_size;
}
let start_point_x = margin_left;
//
//let start_point_y = left_up_rect_h > right_size ? left_up_rect_h : right_size + (br * 2) + margin_top;
// Расчет левой грани
if (right_down_rect_h > left_size) {
left_size = right_down_rect_h;
} else {
right_down_rect_h = left_size;
}
parent_h = left_size + right_size + (br * 4);
//
let right_min_size = parent_h - (br * 2) - right_down_rect_h;
let path_d = `m ${start_point_x} ${start_point_y} `;
let left_down = `l 0 ${left_size} q 0 ${br} ${br} ${br} `;
let down = `l ${down_size} 0 `;
let right_down_rect = `q ${br} 0 ${br} -${br} l 0 -${right_down_rect_h} q 0 -${br} ${br} -${br} l ${right_down_rect_w} 0 q ${br} 0 ${br} -${br} `;
let right_up = `l 0 -${right_size} q 0 -${br} -${br} -${br} `;
let up = `l -${up_size} 0 `;
let left_up_rect = `q -${br} 0 -${br} ${br} l 0 ${left_up_rect_h} q 0 ${br} -${br} ${br} l -${left_up_rect_w} 0 q -${br} 0 -${br} ${br}`;
let new_path = document.createElementNS('http://www.w3.org/2000/svg', "path");
new_path.setAttribute("id", "main");
new_path.setAttributeNS(null, "d", path_d + left_down + down + right_down_rect + right_up + up + left_up_rect);
new_path.setAttribute("stroke", this._params.border_color ?? "MistyRose");
new_path.setAttribute("stroke-width", 3);
new_path.setAttribute("fill", this._params.background_color ?? "MintCream");
let grid = document.createElementNS('http://www.w3.org/2000/svg', "path");
let grid_horizontal = "";
for (let i = 0; i < parent_h; i = i + 20) {
grid_horizontal = grid_horizontal + `M 0 ${i} L ${parent_w} ${i}`
}
grid.setAttribute("stroke", "grey");
grid.setAttribute("stroke-width", 1);
grid.setAttribute("opacity", 0.3);
grid.setAttribute("d", grid_horizontal);
svg.appendChild(new_path);
//svg.appendChild(grid);
let up_text_box = document.createElementNS('http://www.w3.org/2000/svg', "text");
up_text_box.setAttribute("y", margin_top + padding_top)
rows_up_text.forEach((item) => {
let up_text_span = document.createElementNS('http://www.w3.org/2000/svg', "tspan");
up_text_span.innerHTML = item;
let x = left_up_rect_w + (br * 3) + margin_left;
up_text_span.setAttribute("x", x)
up_text_span.setAttribute("dy", "1em")
up_text_span.setAttribute("font-size", default_font_size)
up_text_box.appendChild(up_text_span)
});
// for (let i = 0; i < rows_count_up_text; i++) {
// let up_text_span = document.createElementNS('http://www.w3.org/2000/svg', "tspan");
// up_text_span.innerHTML = up_text.substring(i * count_symbols_at_row_up_text, (i + 1) * count_symbols_at_row_up_text);
// let x = left_up_rect_w + (br * 3) + margin_left;
// up_text_span.setAttribute("x", x)
// up_text_span.setAttribute("dy", "1em")
// up_text_span.setAttribute("font-size", default_font_size)
// up_text_box.appendChild(up_text_span)
// }
let down_text_box = document.createElementNS('http://www.w3.org/2000/svg', "text");
down_text_box.setAttribute("y", start_point_y)
rows_down_text.forEach((item) => {
let down_text_span = document.createElementNS('http://www.w3.org/2000/svg', "tspan");
down_text_span.innerHTML = item;
let x = margin_left + br
down_text_span.setAttribute("x", x)
down_text_span.setAttribute("dy", "1em")
down_text_span.setAttribute("font-size", default_font_size)
down_text_box.appendChild(down_text_span)
});
// for (let i = 0; i < rows_count_down_text; i++) {
// let down_text_span = document.createElementNS('http://www.w3.org/2000/svg', "tspan");
// down_text_span.innerHTML = down_text.substring(i * count_symbols_at_row_down_text, (i + 1) * count_symbols_at_row_down_text);
// let x = margin_left + br
// down_text_span.setAttribute("x", x)
// down_text_span.setAttribute("dy", "1em")
// down_text_span.setAttribute("font-size", default_font_size)
// down_text_box.appendChild(down_text_span)
// }
let title_text_box = document.createElementNS('http://www.w3.org/2000/svg', "text");
title_text_box.setAttribute("y", margin_top);
console.log(rows_count_title_text)
for (let i = 0; i < rows_count_title_text; i++) {
let title_text_span = document.createElementNS('http://www.w3.org/2000/svg', "tspan");
title_text_span.innerHTML = title_text.substring(i * count_symbols_at_row_title_text, (i + 1) * count_symbols_at_row_title_text);
title_text_span.setAttribute("x", margin_left);
title_text_span.setAttribute("dy", "1em");
title_text_span.setAttribute("font-size", title_font_size);
title_text_box.appendChild(title_text_span);
}
console.log(down_size + right_down_rect_w + (br * 4) - right_down_rect_w - margin_left)
let right_down_rect_obj = document.createElementNS('http://www.w3.org/2000/svg', "rect");
right_down_rect_obj.setAttribute("x", start_point_x + down_size + (br * 3));
right_down_rect_obj.setAttribute("y", start_point_y + left_size - right_down_rect_h);
right_down_rect_obj.setAttribute("width", right_down_rect_w + br);
right_down_rect_obj.setAttribute("height", right_down_rect_h + br);
right_down_rect_obj.setAttribute("rx", br);
right_down_rect_obj.setAttribute("fill", "Yellow");
right_down_rect_obj.setAttribute("stroke", "MistyRose");
right_down_rect_obj.setAttribute("stroke-width", 3);
svg.setAttribute("height", start_point_y + left_size + br + padding_bottom);
svg.appendChild(up_text_box);
svg.appendChild(down_text_box);
svg.appendChild(title_text_box);
svg.appendChild(right_down_rect_obj);
}
get_tspan_arr(text, symbol_count_at_row) {
if (text === ""){
return [];
}
const wordsArray = [...text.match(/\S+/g)];
let rows = [];
let str = '';
let counter = 0;
wordsArray.forEach((item, i, arr) => {
if (counter === 0) {
str = `${item}`;
} else {
str = `${str} ${item}`;
}
let str_with_next_word = `${str} ${arr[i + 1]}`
counter = counter + item.length + 1;
if (str_with_next_word.length > symbol_count_at_row - 1 || i === arr.length - 1) {
rows.push(str);
str = '';
counter = 0;
}
});
return rows;
}
}
const cb = function (selector, params) {
let elements = document.querySelectorAll(selector);
elements.forEach((item) => {
let cb_obj = new Custom_block(item);
cb_obj.params(params);
cb_obj.create();
});
}

34
src/ui.js Normal file
View File

@ -0,0 +1,34 @@
window.addEventListener("load", function () {
let ranges_list = document.querySelectorAll(".range_to_info");
ranges_list.forEach((item) => {
addRangeInfoDiv(item)
item.addEventListener("change", getRangeValue)
});
});
function getRangeValue(){
let value = this.value;
let id = this.id;
let span = document.getElementById(`value_range_span_${id}`);
span.innerHTML = value;
}
function addRangeInfoDiv(range_obj){
let id = range_obj.id;
let div = document.createElement("div");
div.style.display = "flex";
let span_value = document.createElement("span");
let span_min = document.createElement("span");
let span_max = document.createElement("span");
span_value.setAttribute("id", `value_range_span_${id}`);
span_min.setAttribute("id", `min_range_span_${id}`);
span_max.setAttribute("id", `max_range_span_${id}`);
span_value.innerHTML = range_obj.value;
span_value.setAttribute("style", "flex: 1; text-align: right; white-space: nowrap;")
span_min.innerHTML = `min: ${range_obj.getAttribute("min")}&nbsp; `;
span_max.innerHTML = `max: ${range_obj.getAttribute("max")}&nbsp; `;
div.appendChild(span_min);
div.appendChild(span_max);
div.appendChild(span_value);
range_obj.parentNode.appendChild(div);
}