commit f78373ebee3117057c6010a9dcfbeb074b18df4d Author: Kavalar Date: Wed Oct 9 00:18:18 2024 +0300 first diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..723ef36 --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +.idea \ No newline at end of file diff --git a/example.html b/example.html new file mode 100644 index 0000000..e061a88 --- /dev/null +++ b/example.html @@ -0,0 +1,89 @@ + + + + + <!DOCTYPE html> + <html lang="en"> + <head> + <meta charset="UTF-8"> + <title>Title + + + + + +
+
+

hello

+

world

+ +
+
+
+
+ Заголовок блока +
+
+ Как я уже сказал, взаимодействие игрока происходит через устройства ввода и пользовательский интерфейс, + который представляет из себя обычные React компоненты. +
+
+ Съешь еще этих мягких французских булок, да выпей чаю. Съешь еще этих мягких французских булок, да выпей + чаю. Съешь еще этих мягких французских булок, да выпей чаю. Съешь еще этих мягких французских булок, да + выпей чаю. Съешь еще этих мягких французских булок, да выпей чаю. Съешь еще этих мягких французских + булок, да выпей чаю. Съешь еще этих мягких французских булок, да выпей чаю. Съешь еще этих мягких французских булок, да выпей + чаю. Съешь еще этих мягких французских булок, да выпей чаю. Съешь еще этих мягких французских булок, да + выпей чаю. Съешь еще этих мягких французских булок, да выпей чаю. Съешь еще этих мягких французских + булок, да выпей чаю. +
+
+
+
+
+
+
+ Заголовок блока +
+
+ Как я уже сказал, взаимодействие игрока происходит через устройства +
+
+ Съешь еще этих мягких французских булок, да выпей чаю. Съешь еще этих мягких французских булок, да + выпей чаю. +
+
+
+
+
+
+ Заголовок блока +
+
+ Как я уже сказал, взаимодействие игрока происходит через устройства +
+
+ Съешь еще этих мягких французских булок, да выпей чаю. Съешь еще этих мягких французских булок, да + выпей чаю. +
+
+
+
+
+ + + \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..10b7f62 --- /dev/null +++ b/index.html @@ -0,0 +1,128 @@ + + + + + Title + + + + + + +
+
+

hello

+

world

+
+
+ Заголовок блока +
+
+ Как я уже сказал, взаимодействие игрока происходит через устройства ввода и пользовательский интерфейс, который представляет из себя обычные React компоненты. +
+
+ Съешь еще этих мягких французских булок, да выпей чаю. Съешь еще этих мягких французских булок, да выпей чаю. Съешь еще этих мягких французских булок, да выпей чаю. Съешь еще этих мягких французских булок, да выпей чаю. Съешь еще этих мягких французских булок, да выпей чаю. Съешь еще этих мягких французских булок, да выпей чаю. +
+
+ + + + + + + + + + + + + + +
+
+
+ +
+ +
+ +
+ +
+ +
+ +
+
+
+
+ + +
+
+ + +
+
+ + +
+
+
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+
+
+ +
+ +
+ +
+ +
+
+ +
+
+ +
+
+ + + \ No newline at end of file diff --git a/src/custom_block.js b/src/custom_block.js new file mode 100644 index 0000000..35ed6e4 --- /dev/null +++ b/src/custom_block.js @@ -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(); + }); +} \ No newline at end of file diff --git a/src/ui.js b/src/ui.js new file mode 100644 index 0000000..4ee21e7 --- /dev/null +++ b/src/ui.js @@ -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")}  `; + span_max.innerHTML = `max: ${range_obj.getAttribute("max")}  `; + div.appendChild(span_min); + div.appendChild(span_max); + div.appendChild(span_value); + range_obj.parentNode.appendChild(div); +} \ No newline at end of file