msb-public
/
svelte
mirror of https://github.com/sveltejs/svelte
1
0
Code Issues Projects Releases Wiki Activity

Add stopImmediatePropagation modifier to event handlers.

Browse Source
pull/5086/head
Marcin Wicha 5 years ago
parent 1644f207b1
commit fedf02cb69
4 changed files with 157 additions and 74 deletions
Show Stats Download Patch File Download Diff File

1
src/compiler/compile/nodes/Element.ts
Unescape View File

@ -66,6 +66,7 @@ const invisible_elements = new Set(['meta', 'html', 'script', 'style']);
const valid_modifiers = new Set([ const valid_modifiers = new Set([
'preventDefault', 'preventDefault',
'stopPropagation', 'stopPropagation',
'stopImmediatePropagation'
'capture', 'capture',
'once', 'once',
'passive', 'passive',

43
src/compiler/compile/render_dom/wrappers/Element/EventHandler.ts
Unescape View File

@ -1,8 +1,8 @@
import EventHandler from '../../../nodes/EventHandler'; import EventHandler from "../../../nodes/EventHandler";
import Wrapper from '../shared/Wrapper'; import Wrapper from "../shared/Wrapper";
import Block from '../../Block'; import Block from "../../Block";
import { b, x, p } from 'code-red'; import { b, x, p } from "code-red";
import { Expression } from 'estree'; import { Expression } from "estree";
const TRUE = x`true`; const TRUE = x`true`;
const FALSE = x`false`; const FALSE = x`false`;
@ -27,7 +27,9 @@ export default class EventHandlerWrapper {
} }
get_snippet(block) { get_snippet(block) {
const snippet = this.node.expression ? this.node.expression.manipulate(block) : block.renderer.reference(this.node.handler_name); const snippet = this.node.expression
? this.node.expression.manipulate(block)
: block.renderer.reference(this.node.handler_name);
if (this.node.reassigned) { if (this.node.reassigned) {
block.maintain_context = true; block.maintain_context = true;
@ -39,24 +41,35 @@ export default class EventHandlerWrapper {
render(block: Block, target: string | Expression) { render(block: Block, target: string | Expression) {
let snippet = this.get_snippet(block); let snippet = this.get_snippet(block);
if (this.node.modifiers.has('preventDefault')) snippet = x`@prevent_default(${snippet})`; if (this.node.modifiers.has("preventDefault"))
if (this.node.modifiers.has('stopPropagation')) snippet = x`@stop_propagation(${snippet})`; snippet = x`@prevent_default(${snippet})`;
if (this.node.modifiers.has('self')) snippet = x`@self(${snippet})`; if (this.node.modifiers.has("stopPropagation"))
snippet = x`@stop_propagation(${snippet})`;
if (this.node.modifiers.has("stopImmediatePropagation"))
snippet = x`@stop_immediate_propagation(${snippet})`;
if (this.node.modifiers.has("self")) snippet = x`@self(${snippet})`;
const args = []; const args = [];
const opts = ['passive', 'once', 'capture'].filter(mod => this.node.modifiers.has(mod)); const opts = ["passive", "once", "capture"].filter((mod) =>
this.node.modifiers.has(mod)
);
if (opts.length) { if (opts.length) {
args.push((opts.length === 1 && opts[0] === 'capture') args.push(
? TRUE opts.length === 1 && opts[0] === "capture"
: x`{ ${opts.map(opt => p`${opt}: true`)} }`); ? TRUE
: x`{ ${opts.map((opt) => p`${opt}: true`)} }`
);
} else if (block.renderer.options.dev) { } else if (block.renderer.options.dev) {
args.push(FALSE); args.push(FALSE);
} }
if (block.renderer.options.dev) { if (block.renderer.options.dev) {
args.push(this.node.modifiers.has('preventDefault') ? TRUE : FALSE); args.push(this.node.modifiers.has("preventDefault") ? TRUE : FALSE);
args.push(this.node.modifiers.has('stopPropagation') ? TRUE : FALSE); args.push(this.node.modifiers.has("stopPropagation") ? TRUE : FALSE);
args.push(
this.node.modifiers.has("stopImmediatePropagation") ? TRUE : FALSE
);
} }
block.event_listeners.push( block.event_listeners.push(

72
src/runtime/internal/dev.ts
Unescape View File

@ -1,8 +1,10 @@
import { custom_event, append, insert, detach, listen, attr } from './dom'; import { custom_event, append, insert, detach, listen, attr } from "./dom";
import { SvelteComponent } from './Component'; import { SvelteComponent } from "./Component";
export function dispatch_dev<T=any>(type: string, detail?: T) { export function dispatch_dev<T = any>(type: string, detail?: T) {
document.dispatchEvent(custom_event(type, { version: '__VERSION__', ...detail })); document.dispatchEvent(
custom_event(type, { version: "__VERSION__", ...detail })
);
} }
export function append_dev(target: Node, node: Node) { export function append_dev(target: Node, node: Node) {
@ -38,16 +40,41 @@ export function detach_after_dev(before: Node) {
} }
} }
export function listen_dev(node: Node, event: string, handler: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions | EventListenerOptions, has_prevent_default?: boolean, has_stop_propagation?: boolean) { export function listen_dev(
const modifiers = options === true ? [ "capture" ] : options ? Array.from(Object.keys(options)) : []; node: Node,
if (has_prevent_default) modifiers.push('preventDefault'); event: string,
if (has_stop_propagation) modifiers.push('stopPropagation'); handler: EventListenerOrEventListenerObject,
options?: boolean | AddEventListenerOptions | EventListenerOptions,
dispatch_dev("SvelteDOMAddEventListener", { node, event, handler, modifiers }); has_prevent_default?: boolean,
has_stop_propagation?: boolean,
has_stop_immediate_propagation?: boolean
) {
const modifiers =
options === true
? ["capture"]
: options
? Array.from(Object.keys(options))
: [];
if (has_prevent_default) modifiers.push("preventDefault");
if (has_stop_propagation) modifiers.push("stopPropagation");
if (has_stop_immediate_propagation)
modifiers.push("stopImmediatePropagation");
dispatch_dev("SvelteDOMAddEventListener", {
node,
event,
handler,
modifiers,
});
const dispose = listen(node, event, handler, options); const dispose = listen(node, event, handler, options);
return () => { return () => {
dispatch_dev("SvelteDOMRemoveEventListener", { node, event, handler, modifiers }); dispatch_dev("SvelteDOMRemoveEventListener", {
node,
event,
handler,
modifiers,
});
dispose(); dispose();
}; };
} }
@ -55,7 +82,8 @@ export function listen_dev(node: Node, event: string, handler: EventListenerOrEv
export function attr_dev(node: Element, attribute: string, value?: string) { export function attr_dev(node: Element, attribute: string, value?: string) {
attr(node, attribute, value); attr(node, attribute, value);
if (value == null) dispatch_dev("SvelteDOMRemoveAttribute", { node, attribute }); if (value == null)
dispatch_dev("SvelteDOMRemoveAttribute", { node, attribute });
else dispatch_dev("SvelteDOMSetAttribute", { node, attribute, value }); else dispatch_dev("SvelteDOMSetAttribute", { node, attribute, value });
} }
@ -72,7 +100,7 @@ export function dataset_dev(node: HTMLElement, property: string, value?: any) {
} }
export function set_data_dev(text, data) { export function set_data_dev(text, data) {
data = '' + data; data = "" + data;
if (text.data === data) return; if (text.data === data) return;
dispatch_dev("SvelteDOMSetData", { node: text, data }); dispatch_dev("SvelteDOMSetData", { node: text, data });
@ -80,10 +108,13 @@ export function set_data_dev(text, data) {
} }
export function validate_each_argument(arg) { export function validate_each_argument(arg) {
if (typeof arg !== 'string' && !(arg && typeof arg === 'object' && 'length' in arg)) { if (
let msg = '{#each} only iterates over array-like objects.'; typeof arg !== "string" &&
if (typeof Symbol === 'function' && arg && Symbol.iterator in arg) { !(arg && typeof arg === "object" && "length" in arg)
msg += ' You can use a spread to convert this iterable into an array.'; ) {
let msg = "{#each} only iterates over array-like objects.";
if (typeof Symbol === "function" && arg && Symbol.iterator in arg) {
msg += " You can use a spread to convert this iterable into an array.";
} }
throw new Error(msg); throw new Error(msg);
} }
@ -100,7 +131,10 @@ export function validate_slots(name, slot, keys) {
type Props = Record<string, any>; type Props = Record<string, any>;
export interface SvelteComponentDev { export interface SvelteComponentDev {
$set(props?: Props): void; $set(props?: Props): void;
$on<T = any>(event: string, callback: (event: CustomEvent<T>) => void): () => void; $on<T = any>(
event: string,
callback: (event: CustomEvent<T>) => void
): () => void;
$destroy(): void; $destroy(): void;
[accessor: string]: any; [accessor: string]: any;
} }
@ -113,7 +147,7 @@ export class SvelteComponentDev extends SvelteComponent {
hydrate?: boolean; hydrate?: boolean;
intro?: boolean; intro?: boolean;
$$inline?: boolean; $$inline?: boolean;
}) { }) {
if (!options || (!options.target && !options.$$inline)) { if (!options || (!options.target && !options.$$inline)) {
throw new Error(`'target' is a required option`); throw new Error(`'target' is a required option`);
} }

115
src/runtime/internal/dom.ts
Unescape View File

@ -22,17 +22,23 @@ export function element<K extends keyof HTMLElementTagNameMap>(name: K) {
return document.createElement<K>(name); return document.createElement<K>(name);
} }
export function element_is<K extends keyof HTMLElementTagNameMap>(name: K, is: string) { export function element_is<K extends keyof HTMLElementTagNameMap>(
name: K,
is: string
) {
return document.createElement<K>(name, { is }); return document.createElement<K>(name, { is });
} }
export function object_without_properties<T, K extends keyof T>(obj: T, exclude: K[]) { export function object_without_properties<T, K extends keyof T>(
obj: T,
exclude: K[]
) {
const target = {} as Pick<T, Exclude<keyof T, K>>; const target = {} as Pick<T, Exclude<keyof T, K>>;
for (const k in obj) { for (const k in obj) {
if ( if (
has_prop(obj, k) has_prop(obj, k) &&
// @ts-ignore // @ts-ignore
&& exclude.indexOf(k) === -1 exclude.indexOf(k) === -1
) { ) {
// @ts-ignore // @ts-ignore
target[k] = obj[k]; target[k] = obj[k];
@ -41,8 +47,10 @@ export function object_without_properties<T, K extends keyof T>(obj: T, exclude:
return target; return target;
} }
export function svg_element<K extends keyof SVGElementTagNameMap>(name: K): SVGElement { export function svg_element<K extends keyof SVGElementTagNameMap>(
return document.createElementNS<K>('http://www.w3.org/2000/svg', name); name: K
): SVGElement {
return document.createElementNS<K>("http://www.w3.org/2000/svg", name);
} }
export function text(data: string) { export function text(data: string) {
@ -50,20 +58,25 @@ export function text(data: string) {
} }
export function space() { export function space() {
return text(' '); return text(" ");
} }
export function empty() { export function empty() {
return text(''); return text("");
} }
export function listen(node: EventTarget, event: string, handler: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions | EventListenerOptions) { export function listen(
node: EventTarget,
event: string,
handler: EventListenerOrEventListenerObject,
options?: boolean | AddEventListenerOptions | EventListenerOptions
) {
node.addEventListener(event, handler, options); node.addEventListener(event, handler, options);
return () => node.removeEventListener(event, handler, options); return () => node.removeEventListener(event, handler, options);
} }
export function prevent_default(fn) { export function prevent_default(fn) {
return function(event) { return function (event) {
event.preventDefault(); event.preventDefault();
// @ts-ignore // @ts-ignore
return fn.call(this, event); return fn.call(this, event);
@ -71,15 +84,23 @@ export function prevent_default(fn) {
} }
export function stop_propagation(fn) { export function stop_propagation(fn) {
return function(event) { return function (event) {
event.stopPropagation(); event.stopPropagation();
// @ts-ignore // @ts-ignore
return fn.call(this, event); return fn.call(this, event);
}; };
} }
export function stop_immediate_propagation(fn) {
return function (event) {
event.stopImmediatePropagation();
// @ts-ignore
return fn.call(this, event);
};
}
export function self(fn) { export function self(fn) {
return function(event) { return function (event) {
// @ts-ignore // @ts-ignore
if (event.target === this) fn.call(this, event); if (event.target === this) fn.call(this, event);
}; };
@ -87,18 +108,22 @@ export function self(fn) {
export function attr(node: Element, attribute: string, value?: string) { export function attr(node: Element, attribute: string, value?: string) {
if (value == null) node.removeAttribute(attribute); if (value == null) node.removeAttribute(attribute);
else if (node.getAttribute(attribute) !== value) node.setAttribute(attribute, value); else if (node.getAttribute(attribute) !== value)
node.setAttribute(attribute, value);
} }
export function set_attributes(node: Element & ElementCSSInlineStyle, attributes: { [x: string]: string }) { export function set_attributes(
node: Element & ElementCSSInlineStyle,
attributes: { [x: string]: string }
) {
// @ts-ignore // @ts-ignore
const descriptors = Object.getOwnPropertyDescriptors(node.__proto__); const descriptors = Object.getOwnPropertyDescriptors(node.__proto__);
for (const key in attributes) { for (const key in attributes) {
if (attributes[key] == null) { if (attributes[key] == null) {
node.removeAttribute(key); node.removeAttribute(key);
} else if (key === 'style') { } else if (key === "style") {
node.style.cssText = attributes[key]; node.style.cssText = attributes[key];
} else if (key === '__value') { } else if (key === "__value") {
(node as any).value = node[key] = attributes[key]; (node as any).value = node[key] = attributes[key];
} else if (descriptors[key] && descriptors[key].set) { } else if (descriptors[key] && descriptors[key].set) {
node[key] = attributes[key]; node[key] = attributes[key];
@ -108,7 +133,10 @@ export function set_attributes(node: Element & ElementCSSInlineStyle, attributes
} }
} }
export function set_svg_attributes(node: Element & ElementCSSInlineStyle, attributes: { [x: string]: string }) { export function set_svg_attributes(
node: Element & ElementCSSInlineStyle,
attributes: { [x: string]: string }
) {
for (const key in attributes) { for (const key in attributes) {
attr(node, key, attributes[key]); attr(node, key, attributes[key]);
} }
@ -123,7 +151,7 @@ export function set_custom_element_data(node, prop, value) {
} }
export function xlink_attr(node, attribute, value) { export function xlink_attr(node, attribute, value) {
node.setAttributeNS('http://www.w3.org/1999/xlink', attribute, value); node.setAttributeNS("http://www.w3.org/1999/xlink", attribute, value);
} }
export function get_binding_group_value(group, __value, checked) { export function get_binding_group_value(group, __value, checked) {
@ -138,7 +166,7 @@ export function get_binding_group_value(group, __value, checked) {
} }
export function to_number(value) { export function to_number(value) {
return value === '' ? undefined : +value; return value === "" ? undefined : +value;
} }
export function time_ranges_to_array(ranges) { export function time_ranges_to_array(ranges) {
@ -179,7 +207,7 @@ export function claim_text(nodes, data) {
for (let i = 0; i < nodes.length; i += 1) { for (let i = 0; i < nodes.length; i += 1) {
const node = nodes[i]; const node = nodes[i];
if (node.nodeType === 3) { if (node.nodeType === 3) {
node.data = '' + data; node.data = "" + data;
return nodes.splice(i, 1)[0]; return nodes.splice(i, 1)[0];
} }
} }
@ -188,16 +216,16 @@ export function claim_text(nodes, data) {
} }
export function claim_space(nodes) { export function claim_space(nodes) {
return claim_text(nodes, ' '); return claim_text(nodes, " ");
} }
export function set_data(text, data) { export function set_data(text, data) {
data = '' + data; data = "" + data;
if (text.data !== data) text.data = data; if (text.data !== data) text.data = data;
} }
export function set_input_value(input, value) { export function set_input_value(input, value) {
input.value = value == null ? '' : value; input.value = value == null ? "" : value;
} }
export function set_input_type(input, type) { export function set_input_type(input, type) {
@ -209,7 +237,7 @@ export function set_input_type(input, type) {
} }
export function set_style(node, key, value, important) { export function set_style(node, key, value, important) {
node.style.setProperty(key, value, important ? 'important' : ''); node.style.setProperty(key, value, important ? "important" : "");
} }
export function select_option(select, value) { export function select_option(select, value) {
@ -231,12 +259,15 @@ export function select_options(select, value) {
} }
export function select_value(select) { export function select_value(select) {
const selected_option = select.querySelector(':checked') || select.options[0]; const selected_option = select.querySelector(":checked") || select.options[0];
return selected_option && selected_option.__value; return selected_option && selected_option.__value;
} }
export function select_multiple_value(select) { export function select_multiple_value(select) {
return [].map.call(select.querySelectorAll(':checked'), option => option.__value); return [].map.call(
select.querySelectorAll(":checked"),
(option) => option.__value
);
} }
// unfortunately this can't be a constant as that wouldn't be tree-shakeable // unfortunately this can't be a constant as that wouldn't be tree-shakeable
@ -248,7 +279,7 @@ export function is_crossorigin() {
crossorigin = false; crossorigin = false;
try { try {
if (typeof window !== 'undefined' && window.parent) { if (typeof window !== "undefined" && window.parent) {
void window.parent.document; void window.parent.document;
} }
} catch (error) { } catch (error) {
@ -263,16 +294,17 @@ export function add_resize_listener(node: HTMLElement, fn: () => void) {
const computed_style = getComputedStyle(node); const computed_style = getComputedStyle(node);
const z_index = (parseInt(computed_style.zIndex) || 0) - 1; const z_index = (parseInt(computed_style.zIndex) || 0) - 1;
if (computed_style.position === 'static') { if (computed_style.position === "static") {
node.style.position = 'relative'; node.style.position = "relative";
} }
const iframe = element('iframe'); const iframe = element("iframe");
iframe.setAttribute('style', iframe.setAttribute(
"style",
`display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; ` + `display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; ` +
`overflow: hidden; border: 0; opacity: 0; pointer-events: none; z-index: ${z_index};` `overflow: hidden; border: 0; opacity: 0; pointer-events: none; z-index: ${z_index};`
); );
iframe.setAttribute('aria-hidden', 'true'); iframe.setAttribute("aria-hidden", "true");
iframe.tabIndex = -1; iframe.tabIndex = -1;
const crossorigin = is_crossorigin(); const crossorigin = is_crossorigin();
@ -281,13 +313,13 @@ export function add_resize_listener(node: HTMLElement, fn: () => void) {
if (crossorigin) { if (crossorigin) {
iframe.src = `data:text/html,<script>onresize=function(){parent.postMessage(0,'*')}</script>`; iframe.src = `data:text/html,<script>onresize=function(){parent.postMessage(0,'*')}</script>`;
unsubscribe = listen(window, 'message', (event: MessageEvent) => { unsubscribe = listen(window, "message", (event: MessageEvent) => {
if (event.source === iframe.contentWindow) fn(); if (event.source === iframe.contentWindow) fn();
}); });
} else { } else {
iframe.src = 'about:blank'; iframe.src = "about:blank";
iframe.onload = () => { iframe.onload = () => {
unsubscribe = listen(iframe.contentWindow, 'resize', fn); unsubscribe = listen(iframe.contentWindow, "resize", fn);
}; };
} }
@ -305,16 +337,19 @@ export function add_resize_listener(node: HTMLElement, fn: () => void) {
} }
export function toggle_class(element, name, toggle) { export function toggle_class(element, name, toggle) {
element.classList[toggle ? 'add' : 'remove'](name); element.classList[toggle ? "add" : "remove"](name);
} }
export function custom_event<T=any>(type: string, detail?: T) { export function custom_event<T = any>(type: string, detail?: T) {
const e: CustomEvent<T> = document.createEvent('CustomEvent'); const e: CustomEvent<T> = document.createEvent("CustomEvent");
e.initCustomEvent(type, false, false, detail); e.initCustomEvent(type, false, false, detail);
return e; return e;
} }
export function query_selector_all(selector: string, parent: HTMLElement = document.body) { export function query_selector_all(
selector: string,
parent: HTMLElement = document.body
) {
return Array.from(parent.querySelectorAll(selector)); return Array.from(parent.querySelectorAll(selector));
} }

Write Preview
Loading…
Cancel
Save