GitHub/Anki
1
0
Fork 0
mirror of https://github.com/ankitects/anki.git synced 2025-09-24 16:56:36 -04:00
Code Issues Projects Releases Packages 1 Wiki Activity Actions

Fix automatic positioning of ButtonDropdown after changing float property

Browse source
This commit is contained in:
Henrik Giesel 2021-08-06 03:53:44 +02:00 committed by Damien Elmes
parent 3579b6a3b6
commit cc2641095f
4 changed files with 79 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
ts/components/WithDropdown.svelte
View file

@ -8,27 +8,51 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
import { setContext, onDestroy } from "svelte";
import { dropdownKey } from "./context-keys";
export let autoOpen = false;
export let autoClose: boolean | "inside" | "outside" = true;
export let placement = "bottom-start";
setContext(dropdownKey, {
dropdown: true,
"data-bs-toggle": "dropdown",
});
let dropdown: Dropdown;
let dropdownObject: Dropdown;
const noop = () => {};
function createDropdown(toggle: HTMLElement): Dropdown {
/* avoid focusing element toggle on menu activation */
toggle.focus = noop;
dropdown = new Dropdown(toggle, {} as any);
dropdown = new Dropdown(toggle, {
autoClose,
popperConfig: (defaultConfig: Record<string, any>) => ({
...defaultConfig,
placement,
}),
} as any);
return dropdown;
if (autoOpen) {
dropdown.show();
}
dropdownObject = {
show: dropdown.show.bind(dropdown),
toggle: dropdown.toggle.bind(dropdown),
hide: dropdown.hide.bind(dropdown),
update: dropdown.update.bind(dropdown),
dispose: dropdown.dispose.bind(dropdown),
};
return dropdownObject;
}
onDestroy(() => dropdown?.dispose());
</script>
<div class="dropdown">
<slot {createDropdown} dropdownObject={dropdown} />
<slot {createDropdown} {dropdownObject} />
</div>
<style lang="scss">

4
ts/editor/HandleControl.svelte
View file

@ -31,6 +31,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
class:active
class="nw"
on:mousedown|preventDefault
on:click
on:pointerdown={onPointerdown(true, true)}
on:pointerup
on:pointermove
@ -40,6 +41,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
class:active
class="ne"
on:mousedown|preventDefault
on:click
on:pointerdown={onPointerdown(true, false)}
on:pointerup
on:pointermove
@ -49,6 +51,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
class:active
class="sw"
on:mousedown|preventDefault
on:click
on:pointerdown={onPointerdown(false, true)}
on:pointerup
on:pointermove
@ -58,6 +61,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
class:active
class="se"
on:mousedown|preventDefault
on:click
on:pointerdown={onPointerdown(false, false)}
on:pointerup
on:pointermove

32
ts/editor/ImageHandle.svelte
View file

@ -133,24 +133,31 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
}
activeImage!.width = width;
await updateSizesWithDimensions();
}
onDestroy(() => resizeObserver.disconnect());
</script>
{#if sheet}
<WithDropdown
placement="bottom"
autoOpen={true}
autoClose={false}
let:createDropdown
let:dropdownObject
>
<WithImageConstrained
{sheet}
{container}
{activeImage}
on:update={updateSizesWithDimensions}
on:update={() => {
updateSizesWithDimensions();
dropdownObject.update();
}}
let:toggleActualSize
let:active
>
{#if activeImage}
<WithDropdown let:createDropdown>
<HandleSelection
bind:updateSelection
{container}
@ -158,8 +165,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
on:mount={(event) => createDropdown(event.detail.selection)}
>
<HandleBackground
on:click={(event) => event.stopPropagation()}
on:dblclick={toggleActualSize}
on:mount={(event) => createDropdown(event.detail.background)}
/>
<HandleLabel {isRtl} on:mount={updateDimensions}>
@ -175,19 +182,28 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
activeSize={7}
offsetX={5}
offsetY={5}
on:click={(event) => event.stopPropagation()}
on:pointerclick={(event) => {
if (active) {
setPointerCapture(event);
}
}}
on:pointerup={startObserving}
on:pointermove={resize}
on:pointermove={(event) => {
resize(event);
updateSizesWithDimensions();
dropdownObject.update();
}}
/>
</HandleSelection>
<ButtonDropdown>
<div on:click={updateSizesWithDimensions}>
<Item>
<ImageHandleFloat image={activeImage} {isRtl} />
<ImageHandleFloat
image={activeImage}
{isRtl}
on:update={dropdownObject.update}
/>
</Item>
<Item>
<ImageHandleSizeSelect
@ -198,7 +214,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
</Item>
</div>
</ButtonDropdown>
</WithDropdown>
{/if}
</WithImageConstrained>
</WithDropdown>
{/if}

20
ts/editor/ImageHandleFloat.svelte
View file

@ -9,6 +9,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
import ButtonGroupItem from "components/ButtonGroupItem.svelte";
import IconButton from "components/IconButton.svelte";
import { createEventDispatcher } from "svelte";
import { floatNoneIcon, floatLeftIcon, floatRightIcon } from "./icons";
export let image: HTMLImageElement;
@ -27,6 +28,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
$: inlineStart = isRtl ? rightValues : leftValues;
$: inlineEnd = isRtl ? leftValues : rightValues;
const dispatch = createEventDispatcher();
</script>
<ButtonGroup size={1.6} wrap={false} reverse={isRtl}>
@ -35,7 +38,10 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
tooltip={tr.editingFloatNone()}
active={image.style.float === "" || image.style.float === "none"}
flipX={isRtl}
on:click={() => (image.style.float = "")}>{@html floatNoneIcon}</IconButton
on:click={() => {
image.style.float = "";
setTimeout(() => dispatch("update"));
}}>{@html floatNoneIcon}</IconButton
>
</ButtonGroupItem>
@ -44,8 +50,10 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
tooltip={inlineStart.label}
active={image.style.float === inlineStart.position}
flipX={isRtl}
on:click={() => (image.style.float = inlineStart.position)}
>{@html floatLeftIcon}</IconButton
on:click={() => {
image.style.float = inlineStart.position;
setTimeout(() => dispatch("update"));
}}>{@html floatLeftIcon}</IconButton
>
</ButtonGroupItem>
@ -54,8 +62,10 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
tooltip={inlineEnd.label}
active={image.style.float === inlineEnd.position}
flipX={isRtl}
on:click={() => (image.style.float = inlineEnd.position)}
>{@html floatRightIcon}</IconButton
on:click={() => {
image.style.float = inlineEnd.position;
setTimeout(() => dispatch("update"));
}}>{@html floatRightIcon}</IconButton
>
</ButtonGroupItem>
</ButtonGroup>