Просмотр исходного кода

chore(DX): camelCase to snake_case & separate functions.

(cherry picked from commit 57aad87166)
version-14
Maharshi Patel 2 лет назад
committed by Mergify
Родитель
Сommit
1ab1ac2a98
2 измененных файлов: 70 добавлений и 73 удалений
  1. +70
    -67
      frappe/public/js/frappe/form/grid_row.js
  2. +0
    -6
      frappe/public/scss/common/grid.scss

+ 70
- 67
frappe/public/js/frappe/form/grid_row.js Просмотреть файл

@@ -836,17 +836,59 @@ export default class GridRow {
add_class += ["Check"].indexOf(df.fieldtype) !== -1 ? " text-center" : ""; add_class += ["Check"].indexOf(df.fieldtype) !== -1 ? " text-center" : "";


let grid; let grid;
let gridContainer;
let grid_container;


let initalPositionX = 0;
let startX = 0;
let startY = 0;
let inital_position_x = 0;
let start_x = 0;
let start_y = 0;


let inputInFocus = false;
let input_in_focus = false;


let vertical = false; let vertical = false;
let horizontal = false; let horizontal = false;


// prevent random layout shifts caused by widgets and on click position elements inside view (UX).
function on_input_focus(el) {
input_in_focus = true;

let container_width = grid_container.getBoundingClientRect().width;
let container_left = grid_container.getBoundingClientRect().left;
let grid_left = parseFloat(grid.style.left);
let element_left = el.offset().left;
let fieldtype = el.data("fieldtype");

let offset_right = container_width - (element_left + el.width());
let offset_left = 0;
let element_screen_x = element_left - container_left;
let element_position_x = container_width - (element_left - container_left);

if (["Date", "Time", "Datetime"].includes(fieldtype)) {
offset_left = element_position_x - 220;
}
if (["Link", "Dynamic Link"].includes(fieldtype)) {
offset_left = element_position_x - 250;
}
if (element_screen_x < 0) {
grid.style.left = `${grid_left - element_screen_x}px`;
} else if (offset_left < 0) {
grid.style.left = `${grid_left + offset_left}px`;
} else if (offset_right < 0) {
grid.style.left = `${grid_left + offset_right}px`;
}
}

// Delay date_picker widget to prevent temparary layout shift (UX).
function handle_date_picker() {
let date_time_picker = document.querySelectorAll(".datepicker.active")[0];

date_time_picker.classList.remove("active");
date_time_picker.style.width = "220px";

setTimeout(() => {
date_time_picker.classList.add("active");
}, 600);
}

var $col = $( var $col = $(
'<div class="col grid-static-col col-xs-' + colsize + " " + add_class + '"></div>' '<div class="col grid-static-col col-xs-' + colsize + " " + add_class + '"></div>'
) )
@@ -856,46 +898,46 @@ export default class GridRow {
.appendTo(this.row) .appendTo(this.row)
// initialize grid for horizontal scroll on mobile devices. // initialize grid for horizontal scroll on mobile devices.
.on("touchstart", function (event) { .on("touchstart", function (event) {
gridContainer = $(event.currentTarget).closest(".form-grid-container")[0];
grid_container = $(event.currentTarget).closest(".form-grid-container")[0];
grid = $(event.currentTarget).closest(".form-grid")[0]; grid = $(event.currentTarget).closest(".form-grid")[0];


grid.style.position != "relative" && $(grid).css("position", "relative"); grid.style.position != "relative" && $(grid).css("position", "relative");
!grid.style.left && $(grid).css("left", 0); !grid.style.left && $(grid).css("left", 0);


startX = event.touches[0].clientX;
startY = event.touches[0].clientY;
start_x = event.touches[0].clientX;
start_y = event.touches[0].clientY;


initalPositionX = -parseFloat(grid.style.left || 0) + startX;
inital_position_x = -parseFloat(grid.style.left || 0) + start_x;
}) })
// calculate X and Y movement based on touch events. // calculate X and Y movement based on touch events.
.on("touchmove", function (event) { .on("touchmove", function (event) {
if (inputInFocus) return;
if (input_in_focus) return;


let movedX;
let movedY;
let moved_x;
let moved_y;


if (!horizontal && !vertical) { if (!horizontal && !vertical) {
movedX = Math.abs(startX - event.touches[0].clientX);
movedY = Math.abs(startY - event.touches[0].clientY);
moved_x = Math.abs(start_x - event.touches[0].clientX);
moved_y = Math.abs(start_y - event.touches[0].clientY);
} }


if (!vertical && movedX > 16) {
if (!vertical && moved_x > 16) {
horizontal = true; horizontal = true;
} else if (!horizontal && movedY > 16) {
} else if (!horizontal && moved_y > 16) {
vertical = true; vertical = true;
} }
if (horizontal) { if (horizontal) {
event.preventDefault(); event.preventDefault();


let gridStart = initalPositionX - event.touches[0].clientX;
let gridEnd = grid.clientWidth - gridContainer.clientWidth;
let grid_start = inital_position_x - event.touches[0].clientX;
let grid_end = grid.clientWidth - grid_container.clientWidth;


if (gridStart < 0) {
gridStart = 0;
} else if (gridStart > gridEnd) {
gridStart = gridEnd;
if (grid_start < 0) {
grid_start = 0;
} else if (grid_start > grid_end) {
grid_start = grid_end;
} }
grid.style.left = `-${gridStart}px`;
grid.style.left = `-${grid_start}px`;
} }
}) })
.on("touchend", function () { .on("touchend", function () {
@@ -907,54 +949,15 @@ export default class GridRow {
var out = me.toggle_editable_row(); var out = me.toggle_editable_row();
} }
var col = this; var col = this;
let firstInputField = $(col).find('input[type="Text"]:first');
// prevent random layout shifts caused by widgets and on click position elements inside view (UX).
function onInputFocus(el) {
inputInFocus = true;

let containerWidth = gridContainer.getBoundingClientRect().width;
let containerLeft = gridContainer.getBoundingClientRect().left;
let gridLeft = parseFloat(grid.style.left);
let elementLeft = el.offset().left;
let fieldType = el.data("fieldtype");

let offsetRight = containerWidth - (elementLeft + el.width());
let offsetLeft = 0;
let elementScreenX = elementLeft - containerLeft;
let elementPositionX = containerWidth - (elementLeft - containerLeft);

if (["Date", "Time", "Datetime"].includes(fieldType)) {
offsetLeft = elementPositionX - 220;
}
if (["Link", "Dynamic Link"].includes(fieldType)) {
offsetLeft = elementPositionX - 250;
}
if (elementScreenX < 0) {
grid.style.left = `${gridLeft - elementScreenX}px`;
} else if (offsetLeft < 0) {
grid.style.left = `${gridLeft + offsetLeft}px`;
} else if (offsetRight < 0) {
grid.style.left = `${gridLeft + offsetRight}px`;
}
}

firstInputField.length && onInputFocus(firstInputField);
let first_input_field = $(col).find('input[type="Text"]:first');


firstInputField.focus();
firstInputField.one("blur", () => (inputInFocus = false));
first_input_field.length && on_input_focus(first_input_field);


// Delay datePicker widget to prevent temparary layout shift (UX).
if (firstInputField.data("fieldtype") == "Date") {
let dateTimePicker = document.querySelectorAll(".datepicker.active")[0];
first_input_field.trigger("focus");
first_input_field.one("blur", () => (input_in_focus = false));


dateTimePicker.classList.remove("active");
first_input_field.data("fieldtype") == "Date" && handle_date_picker();


dateTimePicker.style.width = "220px";

setTimeout(() => {
dateTimePicker.classList.add("active");
}, 600);
}
return out; return out;
}); });




+ 0
- 6
frappe/public/scss/common/grid.scss Просмотреть файл

@@ -508,12 +508,6 @@
position: unset!important; position: unset!important;
} }
} }

.form-column.col-sm-6 .form-grid {
.row-index {
display: block;
}
}
} }


@media (max-width: map-get($grid-breakpoints, "sm")) { @media (max-width: map-get($grid-breakpoints, "sm")) {


Загрузка…
Отмена
Сохранить