@humandialog/forms.svelte 0.4.12 → 0.4.14

package/utils.js

@@ -1,7 +1,230 @@
-import { getContext } from "svelte";
+import { getContext, tick } from "svelte";
+import {get} from 'svelte/store'
+import { context_items_store, context_toolbar_operations } from "./stores";
 
 export let icons = {symbols :null}
 
+export const SCREEN_SIZES = {
+    sm: 640, //px	@media (min-width: 640px) { ... }
+    md: 768, //px	@media (min-width: 768px) { ... }
+    lg: 1024, //px	@media (min-width: 1024px) { ... }
+    xl: 1280, //px	@media (min-width: 1280px) { ... }
+}
+
+export function is_device_smaller_than(br)
+{
+    return window.innerWidth < SCREEN_SIZES[br]
+}
+
+export function select_item(itm)
+{
+    let data_context = get(context_items_store);
+    data_context['sel'] = itm;
+    data_context.focused = 'sel';
+    context_items_store.set( {...data_context} )
+}
+
+export function activate_item(context_level, itm, operations=null)
+{
+    let data_context = get(context_items_store);
+    data_context['sel'] = itm; //null;
+    data_context[context_level] = itm;
+    data_context.focused = context_level;
+    context_items_store.set( {...data_context} )
+
+    if(operations && Array.isArray(operations))
+        context_toolbar_operations.set( [...operations] )
+}
+
+export function clear_active_item(context_level)
+{
+    let data_context = get(context_items_store);
+    data_context[context_level] = null;
+    data_context.focused = context_level;
+    context_items_store.set( {...data_context} )
+
+    context_toolbar_operations.set( [] )
+}
+
+export function is_selected(itm)
+{
+    let data_context = get(context_items_store);
+    if(!!data_context && !!data_context['sel'] && data_context['sel'] == itm)
+        return true;
+    else
+        return false;
+}
+
+
+export function is_active(context_level, itm)
+{
+    let data_context = get(context_items_store);
+    if(data_context != undefined && data_context[context_level] != undefined && data_context[context_level] == itm)
+        return true;
+    else
+        return false;
+}
+
+
+export function editable(node, action)
+{
+    const org_text = node.textContent;
+    const blur_listener = async (e) =>
+    {
+        await finish_editing(true);
+    }
+
+    const key_listener = async (e) =>
+    {
+        switch(e.key)
+        {
+        case 'Esc':
+        case 'Escape':
+            await finish_editing(true);
+            e.stopPropagation();
+            e.preventDefault();
+            break;
+
+        case 'Enter':
+            await finish_editing(false);
+            e.stopPropagation();
+            e.preventDefault();
+            break;
+        }
+    }
+
+    const finish_editing = async (cancel) =>
+    {
+        node.removeEventListener("blur", blur_listener);
+        node.removeEventListener("keydown", key_listener);
+        node.contentEditable = "false"
+
+        let sel = window.getSelection();
+        sel.removeAllRanges();
+
+        if(cancel)
+        {
+            node.innerHTML = org_text;
+        }
+        else if(action)
+        {
+            await action(node.textContent)
+        }
+
+        node.dispatchEvent(new Event("finish"))
+        node.removeEventListener("finish", (e) => {});
+    }
+
+    const edit_listener = async (e) =>
+    {
+        //console.log('Edit event fired:', itm, "node", node)
+        node.contentEditable = "true"
+        node.addEventListener("blur", blur_listener);
+        node.addEventListener("keydown", key_listener);
+        
+        node.focus();
+        
+        await tick();
+        let range = document.createRange();
+        range.selectNodeContents(node);
+        let sel = window.getSelection();
+        sel.removeAllRanges();
+        sel.addRange(range);
+        
+    }
+
+    node.addEventListener("edit", edit_listener);
+    node.classList.add("editable")
+    node.classList.add("focus:outline-none")
+    return {
+        destroy() {
+            node.removeEventListener("edit", edit_listener)
+            node.classList.remove("editable")
+            node.contentEditable = "false"
+        }};
+}
+
+export function start_editing(element, finish_callback)
+{
+    let editable_node = null;
+    
+    if(element.classList.contains("editable"))
+        editable_node = element;
+    else
+    {
+        let editables = element.getElementsByClassName("editable");
+        if(editables && editables.length > 0)
+            editable_node = editables[0];
+    }
+
+    if(editable_node)
+    {
+        if(editable_node.contentEditable == "true")
+            return;
+
+        if(finish_callback)
+        {
+            editable_node.addEventListener("finish", (e) => {finish_callback()})
+        }
+
+        const edit_event = new Event("edit")
+        editable_node.dispatchEvent(edit_event)
+    }
+}
+
+export function selectable(node, itm)
+{
+    const select_listener = (e) =>
+    {
+        select_item(itm);
+    }
+
+    node.setAttribute("selectable", "true")
+    node.addEventListener("select", select_listener);
+
+    return {
+    destroy() {
+        node.removeEventListener("select", select_listener)
+        try{
+            node.removeAttribute("selectable")
+        }
+        catch(err)
+        {
+            console.error(err, node);
+        }
+    }};
+}
+
+export function handle_select(e)
+{
+    let node = e.target;
+    if(!node)
+    {
+        select_item(null);
+        return;
+    }
+
+    let selection_node = null;
+    
+    while(!!node)
+    {
+        if(node.hasAttribute("selectable"))
+        {
+            selection_node = node;
+            break;
+        }
+
+        node = node.parentElement;
+    }
+
+    if(selection_node)
+        selection_node.dispatchEvent(new Event("select"))
+    else
+        select_item(null);
+}
+
+
+
 export function parse_width_directive(c)
 {   
     let cs = '';

package/vertical.toolbar.svelte

@@ -76,9 +76,15 @@
 
     function show_options(e)
     {
-        let rect = e.target.getBoundingClientRect();
-        let x = rect.right;
-        let y = rect.top;
+
+        let owner = e.target;
+        while(owner && owner.tagName != 'BUTTON')
+            owner = owner.parentElement
+
+        if(!owner)
+            return;
+
+        let rect = owner.getBoundingClientRect();
         let options = [];
 
         if(show_sign_in_out_icons)
@@ -142,7 +148,8 @@
                     });
         }
         
-        show_menu(x, y, options);    
+        let pt = new DOMPoint(rect.right, rect.top)
+        show_menu(pt, options);    
     }
     
 </script>