use crate::{
modal_dialog, request,
toast::{self, Level},
- utils::{by_id, selector, selector_all, selector_and_clone, SelectorExt},
+ utils::{by_id, selector, selector_and_clone, SelectorExt},
};
async fn reload_recipes_list(current_recipe_id: i64) {
fn create_group_element(group: &ron_api::Group) -> Element {
let group_id = group.id;
let group_element: Element = selector_and_clone("#hidden-templates .group");
- group_element
- .set_attribute("id", &format!("group-{}", group.id))
- .unwrap();
+ group_element.set_id(&format!("group-{}", group.id));
let groups_container: Element = by_id("groups-container");
groups_container.append_child(&group_element).unwrap();
let group_ids = by_id::<Element>("groups-container")
.selector_all::<Element>(".group")
.into_iter()
- .map(|e| e.get_attribute("id").unwrap()[6..].parse::<i64>().unwrap())
+ .map(|e| e.id()[6..].parse::<i64>().unwrap())
.collect();
let body = ron_api::SetGroupOrders { group_ids };
fn create_step_element(group_element: &Element, step: &ron_api::Step) -> Element {
let step_id = step.id;
let step_element: Element = selector_and_clone("#hidden-templates .step");
- step_element
- .set_attribute("id", &format!("step-{}", step.id))
- .unwrap();
+ step_element.set_id(&format!("step-{}", step.id));
group_element.append_child(&step_element).unwrap();
+ set_draggable(&step_element, "step", |element| {
+ let element = element.clone();
+ spawn_local(async move {
+ let step_ids = element
+ .parent_element()
+ .unwrap()
+ .selector_all::<Element>(".step")
+ .into_iter()
+ .map(|e| e.id()[5..].parse::<i64>().unwrap())
+ .collect();
+
+ let body = ron_api::SetStepOrders { step_ids };
+ let _ = request::put::<(), _>("recipe/set_steps_order", body).await;
+ });
+ });
+
// Step action.
let action: HtmlTextAreaElement = step_element.selector(".text-area-step-action");
action.set_value(&step.action);
fn create_ingredient_element(step_element: &Element, ingredient: &ron_api::Ingredient) -> Element {
let ingredient_id = ingredient.id;
let ingredient_element: Element = selector_and_clone("#hidden-templates .ingredient");
- ingredient_element
- .set_attribute("id", &format!("ingredient-{}", ingredient.id))
- .unwrap();
+ ingredient_element.set_id(&format!("ingredient-{}", ingredient.id));
step_element.append_child(&ingredient_element).unwrap();
// Ingredient name.
ingredient_element
}
+// "text/plain" is avoided to prevent dropping to a input text box.
+const DRAG_AND_DROP_MIME_TYPE: &str = "recipes/element-id";
+
+enum CursorPosition {
+ UpperPart,
+ LowerPart,
+}
+
+fn get_cursor_position(mouse_y: f64, element: &Element) -> CursorPosition {
+ let element_y = element.get_bounding_client_rect().y();
+ // Between 0 (top) and 1 (bottom).
+ let y_relative_pos = (mouse_y - element_y) / element.get_bounding_client_rect().height();
+ if y_relative_pos < 0.5 {
+ CursorPosition::UpperPart
+ } else {
+ CursorPosition::LowerPart
+ }
+}
+
+fn get_parent_with_id_starting_with(mut element: Element, prefix: &str) -> Element {
+ while !element.id().starts_with(prefix) {
+ element = element.parent_element().unwrap();
+ }
+ element
+}
+
/// Set an element as draggable and add an element before and after
/// cloned from "#hidden-templates .dropzone".
/// All elements set as draggable in a given container can be dragged
element.after_with_node_1(&dropzone).unwrap();
setup_dragzone_events(&dropzone, prefix, dropped.clone());
+ // DRAGOVER.
+ let prefix_copied = prefix.to_string();
+ EventListener::new_with_options(
+ element,
+ "dragover",
+ EventListenerOptions::enable_prevent_default(),
+ move |event| {
+ let event: &DragEvent = event.dyn_ref::<DragEvent>().unwrap();
+ let drag_data = event
+ .data_transfer()
+ .unwrap()
+ .get_data(DRAG_AND_DROP_MIME_TYPE)
+ .unwrap();
+
+ if drag_data.starts_with(&prefix_copied) {
+ let element: Element = by_id(&drag_data);
+ let element_target = event
+ .current_target()
+ .unwrap()
+ .dyn_into::<Element>()
+ .unwrap();
+
+ if element.parent_element() != element_target.parent_element() {
+ return;
+ }
+
+ event.prevent_default();
+
+ let cursor_position = get_cursor_position(event.client_y() as f64, &element_target);
+
+ element_target
+ .previous_element_sibling()
+ .unwrap()
+ .set_class_name(match cursor_position {
+ CursorPosition::UpperPart => "dropzone hover",
+ CursorPosition::LowerPart => "dropzone active",
+ });
+
+ element_target
+ .next_element_sibling()
+ .unwrap()
+ .set_class_name(match cursor_position {
+ CursorPosition::UpperPart => "dropzone active",
+ CursorPosition::LowerPart => "dropzone hover",
+ });
+ }
+ },
+ )
+ .forget();
+
+ // DRAGLEAVE.
+ let prefix_copied = prefix.to_string();
+ EventListener::new(element, "dragleave", move |event| {
+ let event: &DragEvent = event.dyn_ref::<DragEvent>().unwrap();
+ let drag_data = event
+ .data_transfer()
+ .unwrap()
+ .get_data(DRAG_AND_DROP_MIME_TYPE)
+ .unwrap();
+
+ if drag_data.starts_with(&prefix_copied) {
+ let element: Element = by_id(&drag_data);
+ let element_target = event
+ .current_target()
+ .unwrap()
+ .dyn_into::<Element>()
+ .unwrap();
+
+ if element.parent_element() != element_target.parent_element() {
+ return;
+ }
+
+ element_target
+ .previous_element_sibling()
+ .unwrap()
+ .set_class_name("dropzone active");
+
+ element_target
+ .next_element_sibling()
+ .unwrap()
+ .set_class_name("dropzone active");
+ }
+ })
+ .forget();
+
+ // DROP.
+ let prefix_copied = prefix.to_string();
+ EventListener::new(element, "drop", move |event| {
+ let event: &DragEvent = event.dyn_ref::<DragEvent>().unwrap();
+ let drag_data = event
+ .data_transfer()
+ .unwrap()
+ .get_data(DRAG_AND_DROP_MIME_TYPE)
+ .unwrap();
+
+ if drag_data.starts_with(&prefix_copied) {
+ let target: Element = event.current_target().unwrap().dyn_into().unwrap();
+ let element: Element = by_id(&drag_data);
+ let dropzone: Element = element.next_element_sibling().unwrap();
+
+ if element.parent_element() != target.parent_element() {
+ return;
+ }
+
+ match get_cursor_position(event.client_y() as f64, &element) {
+ CursorPosition::UpperPart => {
+ target
+ .previous_element_sibling()
+ .unwrap()
+ .after_with_node_1(&element)
+ .unwrap();
+ element.after_with_node_1(&dropzone).unwrap();
+ }
+ CursorPosition::LowerPart => {
+ target
+ .next_element_sibling()
+ .unwrap()
+ .after_with_node_1(&element)
+ .unwrap();
+ element.after_with_node_1(&dropzone).unwrap();
+ }
+ }
+
+ dropped(&element);
+ }
+ })
+ .forget();
+
+ // MOUSEDOWN.
let drag_handle: Element = element.selector(".drag-handle");
EventListener::new(&drag_handle, "mousedown", |event| {
event
- .target()
+ .current_target()
.unwrap()
.dyn_into::<Element>()
.unwrap()
})
.forget();
+ // MOUSEUP.
EventListener::new(&drag_handle, "mouseup", |event| {
event
- .target()
+ .current_target()
.unwrap()
.dyn_into::<Element>()
.unwrap()
})
.forget();
+ // DRAGSTART.
let prefix_copied = prefix.to_string();
EventListener::new(element, "dragstart", move |event| {
let event: &DragEvent = event.dyn_ref::<DragEvent>().unwrap();
- let target_element: Element = event.target().unwrap().dyn_into().unwrap();
+ let target_element: Element = event.current_target().unwrap().dyn_into().unwrap();
+
+ if target_element.id().starts_with(&prefix_copied) {
+ event.stop_propagation();
- if target_element
- .get_attribute("id")
- .unwrap()
- .starts_with(&prefix_copied)
- {
// Highlight where the group can be droppped.
- // TODO: only select direct children.
for dp in target_element
.parent_element()
.unwrap()
.selector_all::<HtmlDivElement>(".dropzone")
{
- dp.set_class_name("dropzone active");
+ if dp.parent_element() == target_element.parent_element() {
+ dp.set_class_name("dropzone active");
+ }
}
event
.data_transfer()
.unwrap()
- .set_data("text/plain", &target_element.get_attribute("id").unwrap())
+ .set_data(DRAG_AND_DROP_MIME_TYPE, &target_element.id())
.unwrap();
event.data_transfer().unwrap().set_effect_allowed("move");
}
})
.forget();
+ // DRAGEND.
let prefix_copied = prefix.to_string();
EventListener::new(element, "dragend", move |event| {
- // let event: &DragEvent = event.dyn_ref::<DragEvent>().unwrap();
- event
- .target()
- .unwrap()
- .dyn_into::<Element>()
- .unwrap()
- .set_attribute("draggable", "false")
- .unwrap();
-
- let target_element: Element = event.target().unwrap().dyn_into().unwrap();
- if target_element
- .get_attribute("id")
- .unwrap()
- .starts_with(&prefix_copied)
- {
+ let target_element: Element = event.current_target().unwrap().dyn_into().unwrap();
+ target_element.set_attribute("draggable", "false").unwrap();
+ if target_element.id().starts_with(&prefix_copied) {
for dp in target_element
.parent_element()
.unwrap()
}
})
.forget();
-}
-fn setup_dragzone_events<T>(dropzone: &Element, prefix: &str, dropped: rc::Rc<T>)
-where
- T: Fn(&Element) + 'static,
-{
- let prefix_copied = prefix.to_string();
- EventListener::new_with_options(
- dropzone,
- "dragover",
- EventListenerOptions::enable_prevent_default(),
- move |event| {
+ fn setup_dragzone_events<T>(dropzone: &Element, prefix: &str, dropped: rc::Rc<T>)
+ where
+ T: Fn(&Element) + 'static,
+ {
+ // DRAGOVER (dropzone).
+ let prefix_copied = prefix.to_string();
+ EventListener::new_with_options(
+ dropzone,
+ "dragover",
+ EventListenerOptions::enable_prevent_default(),
+ move |event| {
+ let event: &DragEvent = event.dyn_ref::<DragEvent>().unwrap();
+ let drag_data = event
+ .data_transfer()
+ .unwrap()
+ .get_data(DRAG_AND_DROP_MIME_TYPE)
+ .unwrap();
+
+ if drag_data.starts_with(&prefix_copied) {
+ let element: Element = by_id(&drag_data);
+ let element_target = event
+ .current_target()
+ .unwrap()
+ .dyn_into::<Element>()
+ .unwrap();
+
+ if element.parent_element() != element_target.parent_element() {
+ return;
+ }
+
+ event.prevent_default();
+
+ event
+ .current_target()
+ .unwrap()
+ .dyn_into::<Element>()
+ .unwrap()
+ .set_class_name("dropzone hover");
+ }
+ },
+ )
+ .forget();
+
+ // DRAGLEAVE (dropzone).
+ let prefix_copied = prefix.to_string();
+ EventListener::new(dropzone, "dragleave", move |event| {
let event: &DragEvent = event.dyn_ref::<DragEvent>().unwrap();
let drag_data = event
.data_transfer()
.unwrap()
- .get_data("text/plain")
+ .get_data(DRAG_AND_DROP_MIME_TYPE)
.unwrap();
if drag_data.starts_with(&prefix_copied) {
- event.prevent_default();
- // event.data_transfer().unwrap().set_effect_allowed("move");
- // log!("drag over");
+ let element: Element = by_id(&drag_data);
+ let element_target = event
+ .current_target()
+ .unwrap()
+ .dyn_into::<Element>()
+ .unwrap();
+
+ if element.parent_element() != element_target.parent_element() {
+ return;
+ }
+
event
- .target()
+ .current_target()
.unwrap()
.dyn_into::<Element>()
.unwrap()
- .set_class_name("dropzone hover");
+ .set_class_name("dropzone active");
}
- },
- )
- .forget();
-
- let prefix_copied = prefix.to_string();
- EventListener::new(dropzone, "dragleave", move |event| {
- let event: &DragEvent = event.dyn_ref::<DragEvent>().unwrap();
- let drag_data = event
- .data_transfer()
- .unwrap()
- .get_data("text/plain")
- .unwrap();
+ })
+ .forget();
- if drag_data.starts_with(&prefix_copied) {
- // log!("drag leave");
- event
- .target()
- .unwrap()
- .dyn_into::<Element>()
+ // DROP (dropzone).
+ let prefix_copied = prefix.to_string();
+ EventListener::new(dropzone, "drop", move |event| {
+ let event: &DragEvent = event.dyn_ref::<DragEvent>().unwrap();
+ let drag_data = event
+ .data_transfer()
.unwrap()
- .set_class_name("dropzone active");
- }
- })
- .forget();
+ .get_data(DRAG_AND_DROP_MIME_TYPE)
+ .unwrap();
- let prefix_copied = prefix.to_string();
- EventListener::new(dropzone, "drop", move |event| {
- let event: &DragEvent = event.dyn_ref::<DragEvent>().unwrap();
- let drag_data = event
- .data_transfer()
- .unwrap()
- .get_data("text/plain")
- .unwrap();
+ if drag_data.starts_with(&prefix_copied) {
+ let target: Element = event.current_target().unwrap().dyn_into().unwrap();
+ let element: Element = by_id(&drag_data);
+ let dropzone: Element = element.next_element_sibling().unwrap();
- if drag_data.starts_with(&prefix_copied) {
- let id: i64 = drag_data[prefix_copied.len() + 1..].parse().unwrap();
- let target: Element = event.target().unwrap().dyn_into().unwrap();
- let element: Element = by_id(&format!("{}-{}", &prefix_copied, id));
- let group_dropzone: Element = element.next_element_sibling().unwrap(); // = by_id(&format!("dropzone-group-{}", id));
- target.after_with_node_1(&element).unwrap();
- element.after_with_node_1(&group_dropzone).unwrap();
+ if element.parent_element() != target.parent_element() {
+ return;
+ }
- dropped(&element);
- }
- })
- .forget();
+ target.after_with_node_1(&element).unwrap();
+ element.after_with_node_1(&dropzone).unwrap();
+
+ dropped(&element);
+ }
+ })
+ .forget();
+ }
}
projects / recipes.git / commitdiff