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 138 139 140 141 142 143 | 94x 94x 94x 94x 188x 2x 2x 2x 2x 2x 94x 188x 2x 2x 2x 2x 2x 94x 4x 4x 4x 4x | /**
* @module Actions
*
* @categoryDescription Showing/hiding elements
* {@link Display} and {@link Undisplay} displays or "undisplays" (display:
* none) the given element.
*
* {@link Actions.Show | Show} and {@link Actions.Hide | Hide} show or hide the
* given element with a smooth fading transition.
*/
import * as MC from "@lisn/globals/minification-constants";
import {
displayElement,
displayElementNow,
undisplayElement,
undisplayElementNow,
toggleDisplayElement,
} from "@lisn/utils/css-alter";
import { Action, registerAction } from "@lisn/actions/action";
/**
* Displays or "undisplays" (display: none) the given element.
*
* **IMPORTANT:** When constructed, it adds `display: none` to the element as a
* form of initialization.
*
* -------
*
* To use with auto-widgets (HTML API) as part of a trigger specification:
* - Action name: "display".
* - Arguments: none
* - Options: none
*
* @example
* ```html
* <button id="btn">Display/undisplay</button>
* <div data-lisn-on-click="@display +target=#btn"></div>
* ```
*
* @category Showing/hiding elements
*/
export class Display implements Action {
/**
* It reverts the element to its original `display` property.
*/
readonly do: () => Promise<void>;
/**
* Sets `display: none` on the element.
*/
readonly undo: () => Promise<void>;
/**
* Displays the element if it's "undisplayed", otherwise "undisplays" it.
*/
readonly toggle: () => Promise<void>;
static register() {
registerAction("display", (element) => new Display(element));
}
constructor(element: Element) {
undisplayElementNow(element); // initial state
const { _display, _undisplay, _toggle } = getMethods(element);
this.do = _display;
this.undo = _undisplay;
this[MC.S_TOGGLE] = _toggle;
}
}
/**
* "Undisplays" (display: none) or displays the given element.
*
* **IMPORTANT:** When constructed, it removes the `lisn-undisplay` class if
* present on the element as a form of initialization.
*
* -------
*
* To use with auto-widgets (HTML API) as part of a trigger specification:
* - Action name: "undisplay".
* - Arguments: none
* - Options: none
*
* @example
* ```html
* <button id="btn">Display/undisplay</button>
* <div data-lisn-on-click="@undisplay +target=#btn"></div>
* ```
*
* @category Showing/hiding elements
*/
export class Undisplay implements Action {
/**
* Sets `display: none` on the element.
*/
readonly do: () => Promise<void>;
/**
* It reverts the element to its original `display` property.
*/
readonly undo: () => Promise<void>;
/**
* Displays the element if it's "undisplayed", otherwise "undisplays" it.
*/
readonly toggle: () => Promise<void>;
static register() {
registerAction("undisplay", (element) => new Undisplay(element));
}
constructor(element: Element) {
displayElementNow(element); // initial state
const { _display, _undisplay, _toggle } = getMethods(element);
this.do = _undisplay;
this.undo = _display;
this[MC.S_TOGGLE] = _toggle;
}
}
// --------------------
const getMethods = (element: Element) => {
return {
_display: async () => {
await displayElement(element); // ignore return val
},
_undisplay: async () => {
await undisplayElement(element); // ignore return val
},
_toggle: async () => {
await toggleDisplayElement(element); // ignore return val
},
};
};
|