mirror of https://github.com/sveltejs/svelte
Rich Harris
8 years ago
committed by
GitHub
commit
e77988b195
@ -0,0 +1,7 @@
|
|||||||
|
import Node from './shared/Node';
|
||||||
|
|
||||||
|
export default class Action extends Node {
|
||||||
|
name: string;
|
||||||
|
value: Node[]
|
||||||
|
expression: Node
|
||||||
|
}
|
||||||
@ -0,0 +1,16 @@
|
|||||||
|
import checkForDupes from '../utils/checkForDupes';
|
||||||
|
import checkForComputedKeys from '../utils/checkForComputedKeys';
|
||||||
|
import { Validator } from '../../';
|
||||||
|
import { Node } from '../../../interfaces';
|
||||||
|
|
||||||
|
export default function actions(validator: Validator, prop: Node) {
|
||||||
|
if (prop.value.type !== 'ObjectExpression') {
|
||||||
|
validator.error(
|
||||||
|
`The 'actions' property must be an object literal`,
|
||||||
|
prop
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
checkForDupes(validator, prop.value.properties);
|
||||||
|
checkForComputedKeys(validator, prop.value.properties);
|
||||||
|
}
|
||||||
@ -0,0 +1,246 @@
|
|||||||
|
function noop() {}
|
||||||
|
|
||||||
|
function assign(target) {
|
||||||
|
var k,
|
||||||
|
source,
|
||||||
|
i = 1,
|
||||||
|
len = arguments.length;
|
||||||
|
for (; i < len; i++) {
|
||||||
|
source = arguments[i];
|
||||||
|
for (k in source) target[k] = source[k];
|
||||||
|
}
|
||||||
|
|
||||||
|
return target;
|
||||||
|
}
|
||||||
|
|
||||||
|
function insertNode(node, target, anchor) {
|
||||||
|
target.insertBefore(node, anchor);
|
||||||
|
}
|
||||||
|
|
||||||
|
function detachNode(node) {
|
||||||
|
node.parentNode.removeChild(node);
|
||||||
|
}
|
||||||
|
|
||||||
|
function createElement(name) {
|
||||||
|
return document.createElement(name);
|
||||||
|
}
|
||||||
|
|
||||||
|
function blankObject() {
|
||||||
|
return Object.create(null);
|
||||||
|
}
|
||||||
|
|
||||||
|
function destroy(detach) {
|
||||||
|
this.destroy = noop;
|
||||||
|
this.fire('destroy');
|
||||||
|
this.set = this.get = noop;
|
||||||
|
|
||||||
|
if (detach !== false) this._fragment.u();
|
||||||
|
this._fragment.d();
|
||||||
|
this._fragment = this._state = null;
|
||||||
|
}
|
||||||
|
|
||||||
|
function _differs(a, b) {
|
||||||
|
return a != a ? b == b : a !== b || ((a && typeof a === 'object') || typeof a === 'function');
|
||||||
|
}
|
||||||
|
|
||||||
|
function dispatchObservers(component, group, changed, newState, oldState) {
|
||||||
|
for (var key in group) {
|
||||||
|
if (!changed[key]) continue;
|
||||||
|
|
||||||
|
var newValue = newState[key];
|
||||||
|
var oldValue = oldState[key];
|
||||||
|
|
||||||
|
var callbacks = group[key];
|
||||||
|
if (!callbacks) continue;
|
||||||
|
|
||||||
|
for (var i = 0; i < callbacks.length; i += 1) {
|
||||||
|
var callback = callbacks[i];
|
||||||
|
if (callback.__calling) continue;
|
||||||
|
|
||||||
|
callback.__calling = true;
|
||||||
|
callback.call(component, newValue, oldValue);
|
||||||
|
callback.__calling = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function fire(eventName, data) {
|
||||||
|
var handlers =
|
||||||
|
eventName in this._handlers && this._handlers[eventName].slice();
|
||||||
|
if (!handlers) return;
|
||||||
|
|
||||||
|
for (var i = 0; i < handlers.length; i += 1) {
|
||||||
|
handlers[i].call(this, data);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function get(key) {
|
||||||
|
return key ? this._state[key] : this._state;
|
||||||
|
}
|
||||||
|
|
||||||
|
function init(component, options) {
|
||||||
|
component._observers = { pre: blankObject(), post: blankObject() };
|
||||||
|
component._handlers = blankObject();
|
||||||
|
component._bind = options._bind;
|
||||||
|
|
||||||
|
component.options = options;
|
||||||
|
component.root = options.root || component;
|
||||||
|
component.store = component.root.store || options.store;
|
||||||
|
}
|
||||||
|
|
||||||
|
function observe(key, callback, options) {
|
||||||
|
var group = options && options.defer
|
||||||
|
? this._observers.post
|
||||||
|
: this._observers.pre;
|
||||||
|
|
||||||
|
(group[key] || (group[key] = [])).push(callback);
|
||||||
|
|
||||||
|
if (!options || options.init !== false) {
|
||||||
|
callback.__calling = true;
|
||||||
|
callback.call(this, this._state[key]);
|
||||||
|
callback.__calling = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
cancel: function() {
|
||||||
|
var index = group[key].indexOf(callback);
|
||||||
|
if (~index) group[key].splice(index, 1);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
function on(eventName, handler) {
|
||||||
|
if (eventName === 'teardown') return this.on('destroy', handler);
|
||||||
|
|
||||||
|
var handlers = this._handlers[eventName] || (this._handlers[eventName] = []);
|
||||||
|
handlers.push(handler);
|
||||||
|
|
||||||
|
return {
|
||||||
|
cancel: function() {
|
||||||
|
var index = handlers.indexOf(handler);
|
||||||
|
if (~index) handlers.splice(index, 1);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
function set(newState) {
|
||||||
|
this._set(assign({}, newState));
|
||||||
|
if (this.root._lock) return;
|
||||||
|
this.root._lock = true;
|
||||||
|
callAll(this.root._beforecreate);
|
||||||
|
callAll(this.root._oncreate);
|
||||||
|
callAll(this.root._aftercreate);
|
||||||
|
this.root._lock = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
function _set(newState) {
|
||||||
|
var oldState = this._state,
|
||||||
|
changed = {},
|
||||||
|
dirty = false;
|
||||||
|
|
||||||
|
for (var key in newState) {
|
||||||
|
if (this._differs(newState[key], oldState[key])) changed[key] = dirty = true;
|
||||||
|
}
|
||||||
|
if (!dirty) return;
|
||||||
|
|
||||||
|
this._state = assign({}, oldState, newState);
|
||||||
|
this._recompute(changed, this._state);
|
||||||
|
if (this._bind) this._bind(changed, this._state);
|
||||||
|
|
||||||
|
if (this._fragment) {
|
||||||
|
dispatchObservers(this, this._observers.pre, changed, this._state, oldState);
|
||||||
|
this._fragment.p(changed, this._state);
|
||||||
|
dispatchObservers(this, this._observers.post, changed, this._state, oldState);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function callAll(fns) {
|
||||||
|
while (fns && fns.length) fns.shift()();
|
||||||
|
}
|
||||||
|
|
||||||
|
function _mount(target, anchor) {
|
||||||
|
this._fragment[this._fragment.i ? 'i' : 'm'](target, anchor || null);
|
||||||
|
}
|
||||||
|
|
||||||
|
function _unmount() {
|
||||||
|
if (this._fragment) this._fragment.u();
|
||||||
|
}
|
||||||
|
|
||||||
|
var proto = {
|
||||||
|
destroy: destroy,
|
||||||
|
get: get,
|
||||||
|
fire: fire,
|
||||||
|
observe: observe,
|
||||||
|
on: on,
|
||||||
|
set: set,
|
||||||
|
teardown: destroy,
|
||||||
|
_recompute: noop,
|
||||||
|
_set: _set,
|
||||||
|
_mount: _mount,
|
||||||
|
_unmount: _unmount,
|
||||||
|
_differs: _differs
|
||||||
|
};
|
||||||
|
|
||||||
|
/* generated by Svelte vX.Y.Z */
|
||||||
|
|
||||||
|
function link(node) {
|
||||||
|
|
||||||
|
function onClick(event) {
|
||||||
|
event.preventDefault();
|
||||||
|
history.pushState(null, null, event.target.href);
|
||||||
|
}
|
||||||
|
|
||||||
|
node.addEventListener('click', onClick);
|
||||||
|
|
||||||
|
return {
|
||||||
|
destroy() {
|
||||||
|
node.removeEventListener('click', onClick);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
function create_main_fragment(component, state) {
|
||||||
|
var a, link_action;
|
||||||
|
|
||||||
|
return {
|
||||||
|
c: function create() {
|
||||||
|
a = createElement("a");
|
||||||
|
a.textContent = "Test";
|
||||||
|
this.h();
|
||||||
|
},
|
||||||
|
|
||||||
|
h: function hydrate() {
|
||||||
|
a.href = "#";
|
||||||
|
link_action = link(a) || {};
|
||||||
|
},
|
||||||
|
|
||||||
|
m: function mount(target, anchor) {
|
||||||
|
insertNode(a, target, anchor);
|
||||||
|
},
|
||||||
|
|
||||||
|
p: noop,
|
||||||
|
|
||||||
|
u: function unmount() {
|
||||||
|
detachNode(a);
|
||||||
|
},
|
||||||
|
|
||||||
|
d: function destroy$$1() {
|
||||||
|
if (typeof link_action.destroy === 'function') link_action.destroy();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
function SvelteComponent(options) {
|
||||||
|
init(this, options);
|
||||||
|
this._state = assign({}, options.data);
|
||||||
|
|
||||||
|
this._fragment = create_main_fragment(this, this._state);
|
||||||
|
|
||||||
|
if (options.target) {
|
||||||
|
this._fragment.c();
|
||||||
|
this._mount(options.target, options.anchor);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
assign(SvelteComponent.prototype, proto);
|
||||||
|
|
||||||
|
export default SvelteComponent;
|
||||||
@ -0,0 +1,64 @@
|
|||||||
|
/* generated by Svelte vX.Y.Z */
|
||||||
|
import { assign, createElement, detachNode, init, insertNode, noop, proto } from "svelte/shared.js";
|
||||||
|
|
||||||
|
function link(node) {
|
||||||
|
|
||||||
|
function onClick(event) {
|
||||||
|
event.preventDefault();
|
||||||
|
history.pushState(null, null, event.target.href);
|
||||||
|
}
|
||||||
|
|
||||||
|
node.addEventListener('click', onClick);
|
||||||
|
|
||||||
|
return {
|
||||||
|
destroy() {
|
||||||
|
node.removeEventListener('click', onClick);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
function create_main_fragment(component, state) {
|
||||||
|
var a, link_action;
|
||||||
|
|
||||||
|
return {
|
||||||
|
c: function create() {
|
||||||
|
a = createElement("a");
|
||||||
|
a.textContent = "Test";
|
||||||
|
this.h();
|
||||||
|
},
|
||||||
|
|
||||||
|
h: function hydrate() {
|
||||||
|
a.href = "#";
|
||||||
|
link_action = link(a) || {};
|
||||||
|
},
|
||||||
|
|
||||||
|
m: function mount(target, anchor) {
|
||||||
|
insertNode(a, target, anchor);
|
||||||
|
},
|
||||||
|
|
||||||
|
p: noop,
|
||||||
|
|
||||||
|
u: function unmount() {
|
||||||
|
detachNode(a);
|
||||||
|
},
|
||||||
|
|
||||||
|
d: function destroy() {
|
||||||
|
if (typeof link_action.destroy === 'function') link_action.destroy();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
function SvelteComponent(options) {
|
||||||
|
init(this, options);
|
||||||
|
this._state = assign({}, options.data);
|
||||||
|
|
||||||
|
this._fragment = create_main_fragment(this, this._state);
|
||||||
|
|
||||||
|
if (options.target) {
|
||||||
|
this._fragment.c();
|
||||||
|
this._mount(options.target, options.anchor);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
assign(SvelteComponent.prototype, proto);
|
||||||
|
export default SvelteComponent;
|
||||||
@ -0,0 +1,23 @@
|
|||||||
|
<a href="#" use:link>Test</a>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
actions: {
|
||||||
|
link(node) {
|
||||||
|
|
||||||
|
function onClick(event) {
|
||||||
|
event.preventDefault();
|
||||||
|
history.pushState(null, null, event.target.href);
|
||||||
|
}
|
||||||
|
|
||||||
|
node.addEventListener('click', onClick);
|
||||||
|
|
||||||
|
return {
|
||||||
|
destroy() {
|
||||||
|
node.removeEventListener('click', onClick);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
@ -0,0 +1 @@
|
|||||||
|
<input use:tooltip="t('tooltip msg')">
|
||||||
@ -0,0 +1,47 @@
|
|||||||
|
{
|
||||||
|
"hash": 1937205193,
|
||||||
|
"html": {
|
||||||
|
"start": 0,
|
||||||
|
"end": 38,
|
||||||
|
"type": "Fragment",
|
||||||
|
"children": [
|
||||||
|
{
|
||||||
|
"start": 0,
|
||||||
|
"end": 38,
|
||||||
|
"type": "Element",
|
||||||
|
"name": "input",
|
||||||
|
"attributes": [
|
||||||
|
{
|
||||||
|
"start": 7,
|
||||||
|
"end": 37,
|
||||||
|
"type": "Action",
|
||||||
|
"name": "tooltip",
|
||||||
|
"expression": {
|
||||||
|
"type": "CallExpression",
|
||||||
|
"start": 20,
|
||||||
|
"end": 36,
|
||||||
|
"callee": {
|
||||||
|
"type": "Identifier",
|
||||||
|
"start": 20,
|
||||||
|
"end": 21,
|
||||||
|
"name": "t"
|
||||||
|
},
|
||||||
|
"arguments": [
|
||||||
|
{
|
||||||
|
"type": "Literal",
|
||||||
|
"start": 22,
|
||||||
|
"end": 35,
|
||||||
|
"value": "tooltip msg",
|
||||||
|
"raw": "'tooltip msg'"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"children": []
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"css": null,
|
||||||
|
"js": null
|
||||||
|
}
|
||||||
@ -0,0 +1 @@
|
|||||||
|
<input use:tooltip="message">
|
||||||
@ -0,0 +1,33 @@
|
|||||||
|
{
|
||||||
|
"hash": 1937205193,
|
||||||
|
"html": {
|
||||||
|
"start": 0,
|
||||||
|
"end": 29,
|
||||||
|
"type": "Fragment",
|
||||||
|
"children": [
|
||||||
|
{
|
||||||
|
"start": 0,
|
||||||
|
"end": 29,
|
||||||
|
"type": "Element",
|
||||||
|
"name": "input",
|
||||||
|
"attributes": [
|
||||||
|
{
|
||||||
|
"start": 7,
|
||||||
|
"end": 28,
|
||||||
|
"type": "Action",
|
||||||
|
"name": "tooltip",
|
||||||
|
"expression": {
|
||||||
|
"type": "Identifier",
|
||||||
|
"start": 20,
|
||||||
|
"end": 27,
|
||||||
|
"name": "message"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"children": []
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"css": null,
|
||||||
|
"js": null
|
||||||
|
}
|
||||||
@ -0,0 +1 @@
|
|||||||
|
<input use:tooltip="'tooltip msg'">
|
||||||
@ -0,0 +1,34 @@
|
|||||||
|
{
|
||||||
|
"hash": 1937205193,
|
||||||
|
"html": {
|
||||||
|
"start": 0,
|
||||||
|
"end": 35,
|
||||||
|
"type": "Fragment",
|
||||||
|
"children": [
|
||||||
|
{
|
||||||
|
"start": 0,
|
||||||
|
"end": 35,
|
||||||
|
"type": "Element",
|
||||||
|
"name": "input",
|
||||||
|
"attributes": [
|
||||||
|
{
|
||||||
|
"start": 7,
|
||||||
|
"end": 34,
|
||||||
|
"type": "Action",
|
||||||
|
"name": "tooltip",
|
||||||
|
"expression": {
|
||||||
|
"type": "Literal",
|
||||||
|
"start": 20,
|
||||||
|
"end": 33,
|
||||||
|
"value": "tooltip msg",
|
||||||
|
"raw": "'tooltip msg'"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"children": []
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"css": null,
|
||||||
|
"js": null
|
||||||
|
}
|
||||||
@ -0,0 +1 @@
|
|||||||
|
<input use:autofocus>
|
||||||
@ -0,0 +1,28 @@
|
|||||||
|
{
|
||||||
|
"hash": 1937205193,
|
||||||
|
"html": {
|
||||||
|
"start": 0,
|
||||||
|
"end": 21,
|
||||||
|
"type": "Fragment",
|
||||||
|
"children": [
|
||||||
|
{
|
||||||
|
"start": 0,
|
||||||
|
"end": 21,
|
||||||
|
"type": "Element",
|
||||||
|
"name": "input",
|
||||||
|
"attributes": [
|
||||||
|
{
|
||||||
|
"start": 7,
|
||||||
|
"end": 20,
|
||||||
|
"type": "Action",
|
||||||
|
"name": "autofocus",
|
||||||
|
"expression": null
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"children": []
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"css": null,
|
||||||
|
"js": null
|
||||||
|
}
|
||||||
@ -0,0 +1,22 @@
|
|||||||
|
export default {
|
||||||
|
html: `
|
||||||
|
<button>action</button>
|
||||||
|
`,
|
||||||
|
|
||||||
|
test ( assert, component, target, window ) {
|
||||||
|
const button = target.querySelector( 'button' );
|
||||||
|
const eventEnter = new window.MouseEvent( 'mouseenter' );
|
||||||
|
const eventLeave = new window.MouseEvent( 'mouseleave' );
|
||||||
|
|
||||||
|
button.dispatchEvent( eventEnter );
|
||||||
|
assert.htmlEqual( target.innerHTML, `
|
||||||
|
<button>action</button>
|
||||||
|
<div class="tooltip">Perform an Action</div>
|
||||||
|
` );
|
||||||
|
|
||||||
|
button.dispatchEvent( eventLeave );
|
||||||
|
assert.htmlEqual( target.innerHTML, `
|
||||||
|
<button>action</button>
|
||||||
|
` );
|
||||||
|
}
|
||||||
|
};
|
||||||
@ -0,0 +1,46 @@
|
|||||||
|
<button use:tooltip="t(actionTransKey)">action</button>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
const translations = {
|
||||||
|
perform_action: 'Perform an Action'
|
||||||
|
};
|
||||||
|
|
||||||
|
function t(key) {
|
||||||
|
return translations[key] || `{{${key}}}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return { t, actionTransKey: 'perform_action' };
|
||||||
|
},
|
||||||
|
|
||||||
|
actions: {
|
||||||
|
tooltip(node, text) {
|
||||||
|
let tooltip = null;
|
||||||
|
|
||||||
|
function onMouseEnter() {
|
||||||
|
tooltip = document.createElement('div');
|
||||||
|
tooltip.classList.add('tooltip');
|
||||||
|
tooltip.textContent = text;
|
||||||
|
node.parentNode.appendChild(tooltip);
|
||||||
|
}
|
||||||
|
|
||||||
|
function onMouseLeave() {
|
||||||
|
if (!tooltip) return;
|
||||||
|
tooltip.remove();
|
||||||
|
tooltip = null;
|
||||||
|
}
|
||||||
|
|
||||||
|
node.addEventListener('mouseenter', onMouseEnter);
|
||||||
|
node.addEventListener('mouseleave', onMouseLeave);
|
||||||
|
|
||||||
|
return {
|
||||||
|
destroy() {
|
||||||
|
node.removeEventListener('mouseenter', onMouseEnter);
|
||||||
|
node.removeEventListener('mouseleave', onMouseLeave);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
@ -0,0 +1,29 @@
|
|||||||
|
export default {
|
||||||
|
html: `
|
||||||
|
<button>action</button>
|
||||||
|
`,
|
||||||
|
|
||||||
|
test ( assert, component, target, window ) {
|
||||||
|
const button = target.querySelector( 'button' );
|
||||||
|
const eventEnter = new window.MouseEvent( 'mouseenter' );
|
||||||
|
const eventLeave = new window.MouseEvent( 'mouseleave' );
|
||||||
|
const ctrlPress = new window.KeyboardEvent( 'keydown', { ctrlKey: true } );
|
||||||
|
|
||||||
|
button.dispatchEvent( eventEnter );
|
||||||
|
assert.htmlEqual( target.innerHTML, `
|
||||||
|
<button>action</button>
|
||||||
|
<div class="tooltip">Perform an Action</div>
|
||||||
|
` );
|
||||||
|
|
||||||
|
window.dispatchEvent( ctrlPress );
|
||||||
|
assert.htmlEqual( target.innerHTML, `
|
||||||
|
<button>action</button>
|
||||||
|
<div class="tooltip">Perform an augmented Action</div>
|
||||||
|
` );
|
||||||
|
|
||||||
|
button.dispatchEvent( eventLeave );
|
||||||
|
assert.htmlEqual( target.innerHTML, `
|
||||||
|
<button>action</button>
|
||||||
|
` );
|
||||||
|
}
|
||||||
|
};
|
||||||
@ -0,0 +1,52 @@
|
|||||||
|
<button use:tooltip="tooltip">action</button>
|
||||||
|
<:Window on:keydown="checkForCtrl(event)" on:keyup="checkForCtrl(event)"/>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return { tooltip: 'Perform an Action' };
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
checkForCtrl(event) {
|
||||||
|
if (event.ctrlKey) {
|
||||||
|
this.set({ tooltip: 'Perform an augmented Action' });
|
||||||
|
} else {
|
||||||
|
this.set({ tooltip: 'Perform an Action' });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
actions: {
|
||||||
|
tooltip(node, text) {
|
||||||
|
let tooltip = null;
|
||||||
|
|
||||||
|
function onMouseEnter() {
|
||||||
|
tooltip = document.createElement('div');
|
||||||
|
tooltip.classList.add('tooltip');
|
||||||
|
tooltip.textContent = text;
|
||||||
|
node.parentNode.appendChild(tooltip);
|
||||||
|
}
|
||||||
|
|
||||||
|
function onMouseLeave() {
|
||||||
|
if (!tooltip) return;
|
||||||
|
tooltip.remove();
|
||||||
|
tooltip = null;
|
||||||
|
}
|
||||||
|
|
||||||
|
node.addEventListener('mouseenter', onMouseEnter);
|
||||||
|
node.addEventListener('mouseleave', onMouseLeave);
|
||||||
|
|
||||||
|
return {
|
||||||
|
update(text) {
|
||||||
|
if (tooltip) tooltip.textContent = text;
|
||||||
|
},
|
||||||
|
destroy() {
|
||||||
|
node.removeEventListener('mouseenter', onMouseEnter);
|
||||||
|
node.removeEventListener('mouseleave', onMouseLeave);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
@ -0,0 +1,22 @@
|
|||||||
|
export default {
|
||||||
|
html: `
|
||||||
|
<button>action</button>
|
||||||
|
`,
|
||||||
|
|
||||||
|
test ( assert, component, target, window ) {
|
||||||
|
const button = target.querySelector( 'button' );
|
||||||
|
const eventEnter = new window.MouseEvent( 'mouseenter' );
|
||||||
|
const eventLeave = new window.MouseEvent( 'mouseleave' );
|
||||||
|
|
||||||
|
button.dispatchEvent( eventEnter );
|
||||||
|
assert.htmlEqual( target.innerHTML, `
|
||||||
|
<button>action</button>
|
||||||
|
<div class="tooltip">Perform an Action</div>
|
||||||
|
` );
|
||||||
|
|
||||||
|
button.dispatchEvent( eventLeave );
|
||||||
|
assert.htmlEqual( target.innerHTML, `
|
||||||
|
<button>action</button>
|
||||||
|
` );
|
||||||
|
}
|
||||||
|
};
|
||||||
@ -0,0 +1,34 @@
|
|||||||
|
<button use:tooltip="'Perform an Action'">action</button>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
actions: {
|
||||||
|
tooltip(node, text) {
|
||||||
|
let tooltip = null;
|
||||||
|
|
||||||
|
function onMouseEnter() {
|
||||||
|
tooltip = document.createElement('div');
|
||||||
|
tooltip.classList.add('tooltip');
|
||||||
|
tooltip.textContent = text;
|
||||||
|
node.parentNode.appendChild(tooltip);
|
||||||
|
}
|
||||||
|
|
||||||
|
function onMouseLeave() {
|
||||||
|
if (!tooltip) return;
|
||||||
|
tooltip.remove();
|
||||||
|
tooltip = null;
|
||||||
|
}
|
||||||
|
|
||||||
|
node.addEventListener('mouseenter', onMouseEnter);
|
||||||
|
node.addEventListener('mouseleave', onMouseLeave);
|
||||||
|
|
||||||
|
return {
|
||||||
|
destroy() {
|
||||||
|
node.removeEventListener('mouseenter', onMouseEnter);
|
||||||
|
node.removeEventListener('mouseleave', onMouseLeave);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
@ -0,0 +1,46 @@
|
|||||||
|
<button use:tooltip="t(actionTransKey)">action</button>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
const translations = {
|
||||||
|
perform_action: 'Perform an Action'
|
||||||
|
};
|
||||||
|
|
||||||
|
function t(key) {
|
||||||
|
return translations[key] || `{{${key}}}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return { t, actionTransKey: 'perform_action' };
|
||||||
|
},
|
||||||
|
|
||||||
|
actions: {
|
||||||
|
tooltip(node, text) {
|
||||||
|
let tooltip = null;
|
||||||
|
|
||||||
|
function onMouseEnter() {
|
||||||
|
tooltip = document.createElement('div');
|
||||||
|
tooltip.classList.add('tooltip');
|
||||||
|
tooltip.textContent = text;
|
||||||
|
node.parentNode.appendChild(tooltip);
|
||||||
|
}
|
||||||
|
|
||||||
|
function onMouseLeave() {
|
||||||
|
if (!tooltip) return;
|
||||||
|
tooltip.remove();
|
||||||
|
tooltip = null;
|
||||||
|
}
|
||||||
|
|
||||||
|
node.addEventListener('mouseenter', onMouseEnter);
|
||||||
|
node.addEventListener('mouseleave', onMouseLeave);
|
||||||
|
|
||||||
|
return {
|
||||||
|
destroy() {
|
||||||
|
node.removeEventListener('mouseenter', onMouseEnter);
|
||||||
|
node.removeEventListener('mouseleave', onMouseLeave);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
@ -0,0 +1,12 @@
|
|||||||
|
[{
|
||||||
|
"message": "Missing action 'whatever'",
|
||||||
|
"pos": 5,
|
||||||
|
"loc": {
|
||||||
|
"line": 1,
|
||||||
|
"column": 5
|
||||||
|
},
|
||||||
|
"end": {
|
||||||
|
"line": 1,
|
||||||
|
"column": 17
|
||||||
|
}
|
||||||
|
}]
|
||||||
@ -0,0 +1 @@
|
|||||||
|
<div use:whatever></div>
|
||||||
@ -0,0 +1,12 @@
|
|||||||
|
[{
|
||||||
|
"message": "Actions can only be applied to DOM elements, not components",
|
||||||
|
"pos": 8,
|
||||||
|
"loc": {
|
||||||
|
"line": 1,
|
||||||
|
"column": 8
|
||||||
|
},
|
||||||
|
"end": {
|
||||||
|
"line": 1,
|
||||||
|
"column": 15
|
||||||
|
}
|
||||||
|
}]
|
||||||
@ -0,0 +1,15 @@
|
|||||||
|
<Widget use:foo/>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import Widget from './Widget.html';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
Widget
|
||||||
|
},
|
||||||
|
|
||||||
|
actions: {
|
||||||
|
foo() {}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
Loading…
Reference in new issue