Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 | 94x 94x 94x 94x 188x 2x 2x 2x 2x 2x 2x 94x 188x 2x 2x 2x 2x 2x 2x 94x 4x 4x 4x 4x | /**
* @module Actions
*/
import * as MC from "@lisn/globals/minification-constants";
import {
showElement,
hideElement,
toggleShowElement,
disableInitialTransition,
} from "@lisn/utils/css-alter";
import { Action, registerAction } from "@lisn/actions/action";
/**
* Shows or hides the given element with a smooth fading transition.
*
* **IMPORTANT:** When constructed, it will hide the element as a form of
* initialization.
*
* -------
*
* To use with auto-widgets (HTML API) as part of a trigger specification:
* - Action name: "show".
* - Arguments: none
* - Options: none
*
* @example
* ```html
* <button id="btn">Show/hide</button>
* <div data-lisn-on-click="@show +target=#btn"></div>
* ```
*
* @category Showing/hiding elements
*/
export class Show implements Action {
/**
* Shows the element with a smooth fade in transition.
*/
readonly do: () => Promise<void>;
/**
* Hides the element with a smooth fade out transition.
*/
readonly undo: () => Promise<void>;
/**
* Shows the element if it is hidden, hides it otherwise.
*/
readonly toggle: () => Promise<void>;
static register() {
registerAction("show", (element) => new Show(element));
}
constructor(element: Element) {
disableInitialTransition(element);
hideElement(element); // initial state
const { _show, _hide, _toggle } = getMethods(element);
this.do = _show;
this.undo = _hide;
this[MC.S_TOGGLE] = _toggle;
}
}
/**
* Hides or shows the given element with a smooth fading transition.
*
* **IMPORTANT:** When constructed, it will remove any `lisn-hide` class from
* the element as a form of initialization.
*
* -------
*
* To use with auto-widgets (HTML API) as part of a trigger specification:
* - Action name: "hide".
* - Arguments: none
* - Options: none
*
* @example
* ```html
* <button id="btn">Show/hide</button>
* <div data-lisn-on-click="@hide +target=#btn"></div>
* ```
*
* @category Showing/hiding elements
*/
export class Hide implements Action {
/**
* Hides the element with a smooth fade out transition.
*/
readonly do: () => Promise<void>;
/**
* Shows the element with a smooth fade in transition.
*/
readonly undo: () => Promise<void>;
/**
* Shows the element if it is hidden, hides it otherwise.
*/
readonly toggle: () => Promise<void>;
static register() {
registerAction("hide", (element) => new Hide(element));
}
constructor(element: Element) {
disableInitialTransition(element);
showElement(element); // initial state
const { _show, _hide, _toggle } = getMethods(element);
this.do = _hide;
this.undo = _show;
this[MC.S_TOGGLE] = _toggle;
}
}
// --------------------
const getMethods = (element: Element) => {
return {
_show: async () => {
await showElement(element); // ignore return val
},
_hide: async () => {
await hideElement(element); // ignore return val
},
_toggle: async () => {
await toggleShowElement(element); // ignore return val
},
};
};
|