@internetarchive/modal-manager 0.2.8 → 0.2.9-alpha.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.editorconfig +29 -29
- package/.eslintrc.js +14 -14
- package/.github/workflows/ci.yml +26 -26
- package/LICENSE +661 -661
- package/README.md +139 -139
- package/custom-elements.json +170 -170
- package/demo/index.html +278 -278
- package/dist/index.d.ts +7 -7
- package/dist/index.js +5 -5
- package/dist/index.js.map +1 -1
- package/dist/src/modal-config.d.ts +92 -92
- package/dist/src/modal-config.js +22 -22
- package/dist/src/modal-config.js.map +1 -1
- package/dist/src/modal-manager-host-bridge-interface.d.ts +12 -12
- package/dist/src/modal-manager-host-bridge-interface.js.map +1 -1
- package/dist/src/modal-manager-host-bridge.d.ts +34 -34
- package/dist/src/modal-manager-host-bridge.js +62 -62
- package/dist/src/modal-manager-host-bridge.js.map +1 -1
- package/dist/src/modal-manager-interface.d.ts +25 -25
- package/dist/src/modal-manager-interface.js.map +1 -1
- package/dist/src/modal-manager-mode.d.ts +10 -10
- package/dist/src/modal-manager-mode.js +11 -11
- package/dist/src/modal-manager-mode.js.map +1 -1
- package/dist/src/modal-manager.d.ts +108 -108
- package/dist/src/modal-manager.js +189 -189
- package/dist/src/modal-manager.js.map +1 -1
- package/dist/src/modal-template.d.ts +32 -32
- package/dist/src/modal-template.js +276 -276
- package/dist/src/modal-template.js.map +1 -1
- package/dist/test/modal-config.test.d.ts +1 -1
- package/dist/test/modal-config.test.js +61 -61
- package/dist/test/modal-config.test.js.map +1 -1
- package/dist/test/modal-manager.test.d.ts +1 -1
- package/dist/test/modal-manager.test.js +200 -200
- package/dist/test/modal-manager.test.js.map +1 -1
- package/dist/test/modal-template.test.d.ts +1 -1
- package/dist/test/modal-template.test.js +95 -95
- package/dist/test/modal-template.test.js.map +1 -1
- package/docs/assets/css/main.css +2678 -2678
- package/docs/classes/_src_modal_config_.modalconfig.html +429 -429
- package/docs/classes/_src_modal_manager_.modalmanager.html +7702 -7702
- package/docs/classes/_src_modal_manager_host_bridge_.modalmanagerhostbridge.html +409 -409
- package/docs/classes/_src_modal_template_.modaltemplate.html +7096 -7096
- package/docs/enums/_src_modal_manager_mode_.modalmanagermode.html +196 -196
- package/docs/globals.html +150 -150
- package/docs/index.html +252 -252
- package/docs/interfaces/_src_modal_manager_host_bridge_interface_.modalmanagerhostbridgeinterface.html +210 -210
- package/docs/interfaces/_src_modal_manager_interface_.modalmanagerinterface.html +7095 -7095
- package/docs/modules/_index_.html +208 -208
- package/docs/modules/_src_modal_config_.html +146 -146
- package/docs/modules/_src_modal_manager_.html +146 -146
- package/docs/modules/_src_modal_manager_host_bridge_.html +146 -146
- package/docs/modules/_src_modal_manager_host_bridge_interface_.html +146 -146
- package/docs/modules/_src_modal_manager_interface_.html +146 -146
- package/docs/modules/_src_modal_manager_mode_.html +146 -146
- package/docs/modules/_src_modal_template_.html +146 -146
- package/docs/modules/_test_modal_config_test_.html +106 -106
- package/docs/modules/_test_modal_manager_test_.html +106 -106
- package/docs/modules/_test_modal_template_test_.html +106 -106
- package/index.ts +7 -7
- package/karma.conf.js +24 -24
- package/package.json +82 -82
- package/src/modal-config.ts +117 -117
- package/src/modal-manager-host-bridge-interface.ts +13 -13
- package/src/modal-manager-host-bridge.ts +82 -82
- package/src/modal-manager-interface.ts +28 -28
- package/src/modal-manager-mode.ts +10 -10
- package/src/modal-manager.ts +228 -228
- package/src/modal-template.ts +279 -279
- package/test/modal-config.test.ts +69 -69
- package/test/modal-manager.test.ts +245 -245
- package/test/modal-template.test.ts +111 -111
- package/tsconfig.json +20 -20
package/docs/index.html
CHANGED
|
@@ -1,253 +1,253 @@
|
|
|
1
|
-
<!doctype html>
|
|
2
|
-
<html class="default no-js">
|
|
3
|
-
<head>
|
|
4
|
-
<meta charset="utf-8">
|
|
5
|
-
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
6
|
-
<title>@internetarchive/modal-manager</title>
|
|
7
|
-
<meta name="description" content="Documentation for @internetarchive/modal-manager">
|
|
8
|
-
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
9
|
-
<link rel="stylesheet" href="assets/css/main.css">
|
|
10
|
-
</head>
|
|
11
|
-
<body>
|
|
12
|
-
<header>
|
|
13
|
-
<div class="tsd-page-toolbar">
|
|
14
|
-
<div class="container">
|
|
15
|
-
<div class="table-wrap">
|
|
16
|
-
<div class="table-cell" id="tsd-search" data-index="assets/js/search.json" data-base=".">
|
|
17
|
-
<div class="field">
|
|
18
|
-
<label for="tsd-search-field" class="tsd-widget search no-caption">Search</label>
|
|
19
|
-
<input id="tsd-search-field" type="text" />
|
|
20
|
-
</div>
|
|
21
|
-
<ul class="results">
|
|
22
|
-
<li class="state loading">Preparing search index...</li>
|
|
23
|
-
<li class="state failure">The search index is not available</li>
|
|
24
|
-
</ul>
|
|
25
|
-
<a href="index.html" class="title">@internetarchive/modal-manager</a>
|
|
26
|
-
</div>
|
|
27
|
-
<div class="table-cell" id="tsd-widgets">
|
|
28
|
-
<div id="tsd-filter">
|
|
29
|
-
<a href="#" class="tsd-widget options no-caption" data-toggle="options">Options</a>
|
|
30
|
-
<div class="tsd-filter-group">
|
|
31
|
-
<div class="tsd-select" id="tsd-filter-visibility">
|
|
32
|
-
<span class="tsd-select-label">All</span>
|
|
33
|
-
<ul class="tsd-select-list">
|
|
34
|
-
<li data-value="public">Public</li>
|
|
35
|
-
<li data-value="protected">Public/Protected</li>
|
|
36
|
-
<li data-value="private" class="selected">All</li>
|
|
37
|
-
</ul>
|
|
38
|
-
</div>
|
|
39
|
-
<input type="checkbox" id="tsd-filter-inherited" checked />
|
|
40
|
-
<label class="tsd-widget" for="tsd-filter-inherited">Inherited</label>
|
|
41
|
-
<input type="checkbox" id="tsd-filter-externals" checked />
|
|
42
|
-
<label class="tsd-widget" for="tsd-filter-externals">Externals</label>
|
|
43
|
-
<input type="checkbox" id="tsd-filter-only-exported" />
|
|
44
|
-
<label class="tsd-widget" for="tsd-filter-only-exported">Only exported</label>
|
|
45
|
-
</div>
|
|
46
|
-
</div>
|
|
47
|
-
<a href="#" class="tsd-widget menu no-caption" data-toggle="menu">Menu</a>
|
|
48
|
-
</div>
|
|
49
|
-
</div>
|
|
50
|
-
</div>
|
|
51
|
-
</div>
|
|
52
|
-
<div class="tsd-page-title">
|
|
53
|
-
<div class="container">
|
|
54
|
-
<ul class="tsd-breadcrumb">
|
|
55
|
-
<li>
|
|
56
|
-
<a href="globals.html">Globals</a>
|
|
57
|
-
</li>
|
|
58
|
-
</ul>
|
|
59
|
-
<h1>@internetarchive/modal-manager</h1>
|
|
60
|
-
</div>
|
|
61
|
-
</div>
|
|
62
|
-
</header>
|
|
63
|
-
<div class="container container-main">
|
|
64
|
-
<div class="row">
|
|
65
|
-
<div class="col-8 col-content">
|
|
66
|
-
<div class="tsd-panel tsd-typography">
|
|
67
|
-
<p><a href="https://travis-ci.com/internetarchive/iaux-modal-manager"><img src="https://travis-ci.com/internetarchive/iaux-modal-manager.svg?branch=master" alt="Build Status"></a> <a href="https://codecov.io/gh/internetarchive/iaux-modal-manager"><img src="https://codecov.io/gh/internetarchive/iaux-modal-manager/branch/master/graph/badge.svg" alt="codecov"></a></p>
|
|
68
|
-
<a href="#modal-manager-component" id="modal-manager-component" style="color: inherit; text-decoration: none;">
|
|
69
|
-
<h1>Modal Manager Component</h1>
|
|
70
|
-
</a>
|
|
71
|
-
<p>A modal manager built on LitElement with support for custom content and light DOM elements.</p>
|
|
72
|
-
<p><img src="./assets/modal-screenshot.jpg" alt="Modal Manager" title="Modal Manager Demo"></p>
|
|
73
|
-
<a href="#installation" id="installation" style="color: inherit; text-decoration: none;">
|
|
74
|
-
<h2>Installation</h2>
|
|
75
|
-
</a>
|
|
76
|
-
<pre><code class="language-bash">npm install --save @internetarchive/modal-manager</code></pre>
|
|
77
|
-
<a href="#usage" id="usage" style="color: inherit; text-decoration: none;">
|
|
78
|
-
<h2>Usage</h2>
|
|
79
|
-
</a>
|
|
80
|
-
<pre><code class="language-html"><span class="hljs-comment"><!-- index.html --></span>
|
|
81
|
-
<span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"module"</span>></span><span class="javascript">
|
|
82
|
-
<span class="hljs-keyword">import</span> <span class="hljs-string">'@internetarchive/modal-manager'</span>;
|
|
83
|
-
<span class="hljs-keyword">import</span> { ModalConfig } <span class="hljs-keyword">from</span> <span class="hljs-string">'@internetarchive/modal-manager'</span>;
|
|
84
|
-
</span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
|
|
85
|
-
|
|
86
|
-
<span class="hljs-tag"><<span class="hljs-name">style</span>></span><span class="css">
|
|
87
|
-
<span class="hljs-comment">/* add the following styles to ensure proper modal visibility */</span>
|
|
88
|
-
<span class="hljs-selector-tag">body</span><span class="hljs-selector-class">.modal-manager-open</span> {
|
|
89
|
-
<span class="hljs-attribute">overflow</span>: hidden;
|
|
90
|
-
}
|
|
91
|
-
|
|
92
|
-
<span class="hljs-selector-tag">modal-manager</span> {
|
|
93
|
-
<span class="hljs-attribute">display</span>: none;
|
|
94
|
-
}
|
|
95
|
-
|
|
96
|
-
<span class="hljs-selector-tag">modal-manager</span><span class="hljs-selector-attr">[mode=<span class="hljs-string">'open'</span>]</span> {
|
|
97
|
-
<span class="hljs-attribute">display</span>: block;
|
|
98
|
-
}
|
|
99
|
-
</span><span class="hljs-tag"></<span class="hljs-name">style</span>></span>
|
|
100
|
-
|
|
101
|
-
<span class="hljs-tag"><<span class="hljs-name">modal-manager</span>></span><span class="hljs-tag"></<span class="hljs-name">modal-manager</span>></span>
|
|
102
|
-
|
|
103
|
-
<span class="hljs-tag"><<span class="hljs-name">script</span>></span><span class="javascript">
|
|
104
|
-
<span class="hljs-comment">// show a simple modal</span>
|
|
105
|
-
<span class="hljs-keyword">const</span> manager = <span class="hljs-built_in">document</span>.querySelector(<span class="hljs-string">'modal-manager'</span>);
|
|
106
|
-
<span class="hljs-keyword">const</span> config = <span class="hljs-keyword">new</span> ModalConfig();
|
|
107
|
-
config.headline = <span class="hljs-string">'Hi, Everybody!'</span>;
|
|
108
|
-
config.message = <span class="hljs-string">'Hi, Doctor Nick!'</span>;
|
|
109
|
-
manager.showModal(config)
|
|
110
|
-
|
|
111
|
-
<span class="hljs-comment">// to hide the modal call `closeModal()`:</span>
|
|
112
|
-
manager.closeModal();
|
|
113
|
-
</span><span class="hljs-tag"></<span class="hljs-name">script</span>></span></code></pre>
|
|
114
|
-
<a href="#advanced-usage" id="advanced-usage" style="color: inherit; text-decoration: none;">
|
|
115
|
-
<h2>Advanced Usage</h2>
|
|
116
|
-
</a>
|
|
117
|
-
<a href="#markup-content" id="markup-content" style="color: inherit; text-decoration: none;">
|
|
118
|
-
<h3>Markup Content</h3>
|
|
119
|
-
</a>
|
|
120
|
-
<p>You can pass in custom HTML into the <code>ModalConfig</code>:</p>
|
|
121
|
-
<pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"module"</span>></span><span class="javascript">
|
|
122
|
-
<span class="hljs-keyword">import</span> { html } <span class="hljs-keyword">from</span> <span class="hljs-string">'lit-html'</span>;
|
|
123
|
-
</span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
|
|
124
|
-
|
|
125
|
-
<span class="hljs-tag"><<span class="hljs-name">modal-manager</span>></span><span class="hljs-tag"></<span class="hljs-name">modal-manager</span>></span>
|
|
126
|
-
|
|
127
|
-
<span class="hljs-tag"><<span class="hljs-name">script</span>></span><span class="javascript">
|
|
128
|
-
<span class="hljs-keyword">const</span> manager = <span class="hljs-built_in">document</span>.querySelector(<span class="hljs-string">'modal-manager'</span>);
|
|
129
|
-
<span class="hljs-keyword">const</span> config = <span class="hljs-keyword">new</span> ModalConfig();
|
|
130
|
-
config.title = <span class="hljs-string">'Internet Archive'</span>;
|
|
131
|
-
config.subtitle = <span class="hljs-string">''</span>;
|
|
132
|
-
config.headline = <span class="hljs-string">'Thanks for your Support!'</span>;
|
|
133
|
-
config.message = html`<span class="xml">
|
|
134
|
-
<span class="hljs-tag"><<span class="hljs-name">p</span>></span>Thanks for your donation!<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
|
|
135
|
-
<span class="hljs-tag"><<span class="hljs-name">p</span>></span>Please click <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">""</span>></span>here<span class="hljs-tag"></<span class="hljs-name">a</span>></span> to complete!<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
|
|
136
|
-
`</span>;
|
|
137
|
-
config.headerColor = <span class="hljs-string">'#36A483'</span>;
|
|
138
|
-
manager.showModal(config);
|
|
139
|
-
</span><span class="hljs-tag"></<span class="hljs-name">script</span>></span></code></pre>
|
|
140
|
-
<a href="#custom-content" id="custom-content" style="color: inherit; text-decoration: none;">
|
|
141
|
-
<h3>Custom Content</h3>
|
|
142
|
-
</a>
|
|
143
|
-
<p>Display completely custom content in the modal body, including light DOM content like a PayPal button.</p>
|
|
144
|
-
<pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">modal-manager</span>></span><span class="hljs-tag"></<span class="hljs-name">modal-manager</span>></span>
|
|
145
|
-
|
|
146
|
-
<span class="hljs-tag"><<span class="hljs-name">script</span>></span><span class="javascript">
|
|
147
|
-
<span class="hljs-keyword">const</span> manager = <span class="hljs-built_in">document</span>.querySelector(<span class="hljs-string">'modal-manager'</span>);
|
|
148
|
-
<span class="hljs-keyword">const</span> config = <span class="hljs-keyword">new</span> ModalConfig();
|
|
149
|
-
<span class="hljs-keyword">const</span> customContent = html`<span class="xml">
|
|
150
|
-
Can contain any markup, including web components. Event listeners also work. Try clicking on the picture.
|
|
151
|
-
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"text-align: center"</span>></span>
|
|
152
|
-
<span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"https://fillmurray.com"</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"display: block"</span>></span>Fill Murray<span class="hljs-tag"></<span class="hljs-name">a</span>></span>
|
|
153
|
-
<span class="hljs-tag"><<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"100x100.jpg"</span> @<span class="hljs-attr">click</span>=</span></span><span class="hljs-subst">${showBillAlert}</span><span class="xml"><span class="hljs-tag"> /></span>
|
|
154
|
-
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
|
155
|
-
`</span>;
|
|
156
|
-
|
|
157
|
-
modalManager.showModal(config, customContent);
|
|
158
|
-
</span><span class="hljs-tag"></<span class="hljs-name">script</span>></span></code></pre>
|
|
159
|
-
<a href="#config-options" id="config-options" style="color: inherit; text-decoration: none;">
|
|
160
|
-
<h3>Config Options</h3>
|
|
161
|
-
</a>
|
|
162
|
-
<p>All of the config options:</p>
|
|
163
|
-
<pre><code class="language-javascript"><span class="hljs-keyword">const</span> config = <span class="hljs-keyword">new</span> ModalConfig();
|
|
164
|
-
config.title = <span class="hljs-string">'Internet Archive'</span>;
|
|
165
|
-
config.subtitle = <span class="hljs-string">''</span>;
|
|
166
|
-
config.headline = <span class="hljs-string">'Thanks for your Support!'</span>;
|
|
167
|
-
config.message = <span class="hljs-string">'Thank you for supporting the Internet Archive!'</span>;
|
|
168
|
-
config.headerColor = <span class="hljs-string">'#36A483'</span>;
|
|
169
|
-
config.showProcessingIndicator = <span class="hljs-literal">false</span>;
|
|
170
|
-
config.processingImageMode = <span class="hljs-string">'processing'</span>; <span class="hljs-comment">// or `complete`</span></code></pre>
|
|
171
|
-
<a href="#development" id="development" style="color: inherit; text-decoration: none;">
|
|
172
|
-
<h1>Development</h1>
|
|
173
|
-
</a>
|
|
174
|
-
<a href="#prerequisite" id="prerequisite" style="color: inherit; text-decoration: none;">
|
|
175
|
-
<h2>Prerequisite</h2>
|
|
176
|
-
</a>
|
|
177
|
-
<pre><code class="language-bash">npm install</code></pre>
|
|
178
|
-
<a href="#start-development-server" id="start-development-server" style="color: inherit; text-decoration: none;">
|
|
179
|
-
<h2>Start Development Server</h2>
|
|
180
|
-
</a>
|
|
181
|
-
<pre><code class="language-bash">npm start</code></pre>
|
|
182
|
-
<a href="#testing" id="testing" style="color: inherit; text-decoration: none;">
|
|
183
|
-
<h2>Testing</h2>
|
|
184
|
-
</a>
|
|
185
|
-
<pre><code class="language-bash">npm <span class="hljs-built_in">test</span></code></pre>
|
|
186
|
-
<a href="#linting" id="linting" style="color: inherit; text-decoration: none;">
|
|
187
|
-
<h2>Linting</h2>
|
|
188
|
-
</a>
|
|
189
|
-
<pre><code class="language-bash">npm lint</code></pre>
|
|
190
|
-
</div>
|
|
191
|
-
</div>
|
|
192
|
-
<div class="col-4 col-menu menu-sticky-wrap menu-highlight">
|
|
193
|
-
<nav class="tsd-navigation primary">
|
|
194
|
-
<ul>
|
|
195
|
-
<li class="globals ">
|
|
196
|
-
<a href="globals.html"><em>Globals</em></a>
|
|
197
|
-
</li>
|
|
198
|
-
<li class=" tsd-kind-module">
|
|
199
|
-
<a href="modules/_index_.html">"index"</a>
|
|
200
|
-
</li>
|
|
201
|
-
<li class=" tsd-kind-module">
|
|
202
|
-
<a href="modules/_src_modal_config_.html">"src/modal-<wbr>config"</a>
|
|
203
|
-
</li>
|
|
204
|
-
<li class=" tsd-kind-module">
|
|
205
|
-
<a href="modules/_src_modal_manager_.html">"src/modal-<wbr>manager"</a>
|
|
206
|
-
</li>
|
|
207
|
-
<li class=" tsd-kind-module">
|
|
208
|
-
<a href="modules/_src_modal_manager_host_bridge_.html">"src/modal-<wbr>manager-<wbr>host-<wbr>bridge"</a>
|
|
209
|
-
</li>
|
|
210
|
-
<li class=" tsd-kind-module">
|
|
211
|
-
<a href="modules/_src_modal_manager_host_bridge_interface_.html">"src/modal-<wbr>manager-<wbr>host-<wbr>bridge-<wbr>interface"</a>
|
|
212
|
-
</li>
|
|
213
|
-
<li class=" tsd-kind-module">
|
|
214
|
-
<a href="modules/_src_modal_manager_interface_.html">"src/modal-<wbr>manager-<wbr>interface"</a>
|
|
215
|
-
</li>
|
|
216
|
-
<li class=" tsd-kind-module">
|
|
217
|
-
<a href="modules/_src_modal_manager_mode_.html">"src/modal-<wbr>manager-<wbr>mode"</a>
|
|
218
|
-
</li>
|
|
219
|
-
<li class=" tsd-kind-module">
|
|
220
|
-
<a href="modules/_src_modal_template_.html">"src/modal-<wbr>template"</a>
|
|
221
|
-
</li>
|
|
222
|
-
</ul>
|
|
223
|
-
</nav>
|
|
224
|
-
<nav class="tsd-navigation secondary menu-sticky">
|
|
225
|
-
<ul class="before-current">
|
|
226
|
-
</ul>
|
|
227
|
-
</nav>
|
|
228
|
-
</div>
|
|
229
|
-
</div>
|
|
230
|
-
</div>
|
|
231
|
-
<footer class="with-border-bottom">
|
|
232
|
-
<div class="container">
|
|
233
|
-
<h2>Legend</h2>
|
|
234
|
-
<div class="tsd-legend-group">
|
|
235
|
-
<ul class="tsd-legend">
|
|
236
|
-
<li class="tsd-kind-enum"><span class="tsd-kind-icon">Enumeration</span></li>
|
|
237
|
-
</ul>
|
|
238
|
-
<ul class="tsd-legend">
|
|
239
|
-
<li class="tsd-kind-interface"><span class="tsd-kind-icon">Interface</span></li>
|
|
240
|
-
</ul>
|
|
241
|
-
<ul class="tsd-legend">
|
|
242
|
-
<li class="tsd-kind-class"><span class="tsd-kind-icon">Class</span></li>
|
|
243
|
-
</ul>
|
|
244
|
-
</div>
|
|
245
|
-
</div>
|
|
246
|
-
</footer>
|
|
247
|
-
<div class="container tsd-generator">
|
|
248
|
-
<p>Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p>
|
|
249
|
-
</div>
|
|
250
|
-
<div class="overlay"></div>
|
|
251
|
-
<script src="assets/js/main.js"></script>
|
|
252
|
-
</body>
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<html class="default no-js">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="utf-8">
|
|
5
|
+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
6
|
+
<title>@internetarchive/modal-manager</title>
|
|
7
|
+
<meta name="description" content="Documentation for @internetarchive/modal-manager">
|
|
8
|
+
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
9
|
+
<link rel="stylesheet" href="assets/css/main.css">
|
|
10
|
+
</head>
|
|
11
|
+
<body>
|
|
12
|
+
<header>
|
|
13
|
+
<div class="tsd-page-toolbar">
|
|
14
|
+
<div class="container">
|
|
15
|
+
<div class="table-wrap">
|
|
16
|
+
<div class="table-cell" id="tsd-search" data-index="assets/js/search.json" data-base=".">
|
|
17
|
+
<div class="field">
|
|
18
|
+
<label for="tsd-search-field" class="tsd-widget search no-caption">Search</label>
|
|
19
|
+
<input id="tsd-search-field" type="text" />
|
|
20
|
+
</div>
|
|
21
|
+
<ul class="results">
|
|
22
|
+
<li class="state loading">Preparing search index...</li>
|
|
23
|
+
<li class="state failure">The search index is not available</li>
|
|
24
|
+
</ul>
|
|
25
|
+
<a href="index.html" class="title">@internetarchive/modal-manager</a>
|
|
26
|
+
</div>
|
|
27
|
+
<div class="table-cell" id="tsd-widgets">
|
|
28
|
+
<div id="tsd-filter">
|
|
29
|
+
<a href="#" class="tsd-widget options no-caption" data-toggle="options">Options</a>
|
|
30
|
+
<div class="tsd-filter-group">
|
|
31
|
+
<div class="tsd-select" id="tsd-filter-visibility">
|
|
32
|
+
<span class="tsd-select-label">All</span>
|
|
33
|
+
<ul class="tsd-select-list">
|
|
34
|
+
<li data-value="public">Public</li>
|
|
35
|
+
<li data-value="protected">Public/Protected</li>
|
|
36
|
+
<li data-value="private" class="selected">All</li>
|
|
37
|
+
</ul>
|
|
38
|
+
</div>
|
|
39
|
+
<input type="checkbox" id="tsd-filter-inherited" checked />
|
|
40
|
+
<label class="tsd-widget" for="tsd-filter-inherited">Inherited</label>
|
|
41
|
+
<input type="checkbox" id="tsd-filter-externals" checked />
|
|
42
|
+
<label class="tsd-widget" for="tsd-filter-externals">Externals</label>
|
|
43
|
+
<input type="checkbox" id="tsd-filter-only-exported" />
|
|
44
|
+
<label class="tsd-widget" for="tsd-filter-only-exported">Only exported</label>
|
|
45
|
+
</div>
|
|
46
|
+
</div>
|
|
47
|
+
<a href="#" class="tsd-widget menu no-caption" data-toggle="menu">Menu</a>
|
|
48
|
+
</div>
|
|
49
|
+
</div>
|
|
50
|
+
</div>
|
|
51
|
+
</div>
|
|
52
|
+
<div class="tsd-page-title">
|
|
53
|
+
<div class="container">
|
|
54
|
+
<ul class="tsd-breadcrumb">
|
|
55
|
+
<li>
|
|
56
|
+
<a href="globals.html">Globals</a>
|
|
57
|
+
</li>
|
|
58
|
+
</ul>
|
|
59
|
+
<h1>@internetarchive/modal-manager</h1>
|
|
60
|
+
</div>
|
|
61
|
+
</div>
|
|
62
|
+
</header>
|
|
63
|
+
<div class="container container-main">
|
|
64
|
+
<div class="row">
|
|
65
|
+
<div class="col-8 col-content">
|
|
66
|
+
<div class="tsd-panel tsd-typography">
|
|
67
|
+
<p><a href="https://travis-ci.com/internetarchive/iaux-modal-manager"><img src="https://travis-ci.com/internetarchive/iaux-modal-manager.svg?branch=master" alt="Build Status"></a> <a href="https://codecov.io/gh/internetarchive/iaux-modal-manager"><img src="https://codecov.io/gh/internetarchive/iaux-modal-manager/branch/master/graph/badge.svg" alt="codecov"></a></p>
|
|
68
|
+
<a href="#modal-manager-component" id="modal-manager-component" style="color: inherit; text-decoration: none;">
|
|
69
|
+
<h1>Modal Manager Component</h1>
|
|
70
|
+
</a>
|
|
71
|
+
<p>A modal manager built on LitElement with support for custom content and light DOM elements.</p>
|
|
72
|
+
<p><img src="./assets/modal-screenshot.jpg" alt="Modal Manager" title="Modal Manager Demo"></p>
|
|
73
|
+
<a href="#installation" id="installation" style="color: inherit; text-decoration: none;">
|
|
74
|
+
<h2>Installation</h2>
|
|
75
|
+
</a>
|
|
76
|
+
<pre><code class="language-bash">npm install --save @internetarchive/modal-manager</code></pre>
|
|
77
|
+
<a href="#usage" id="usage" style="color: inherit; text-decoration: none;">
|
|
78
|
+
<h2>Usage</h2>
|
|
79
|
+
</a>
|
|
80
|
+
<pre><code class="language-html"><span class="hljs-comment"><!-- index.html --></span>
|
|
81
|
+
<span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"module"</span>></span><span class="javascript">
|
|
82
|
+
<span class="hljs-keyword">import</span> <span class="hljs-string">'@internetarchive/modal-manager'</span>;
|
|
83
|
+
<span class="hljs-keyword">import</span> { ModalConfig } <span class="hljs-keyword">from</span> <span class="hljs-string">'@internetarchive/modal-manager'</span>;
|
|
84
|
+
</span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
|
|
85
|
+
|
|
86
|
+
<span class="hljs-tag"><<span class="hljs-name">style</span>></span><span class="css">
|
|
87
|
+
<span class="hljs-comment">/* add the following styles to ensure proper modal visibility */</span>
|
|
88
|
+
<span class="hljs-selector-tag">body</span><span class="hljs-selector-class">.modal-manager-open</span> {
|
|
89
|
+
<span class="hljs-attribute">overflow</span>: hidden;
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
<span class="hljs-selector-tag">modal-manager</span> {
|
|
93
|
+
<span class="hljs-attribute">display</span>: none;
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
<span class="hljs-selector-tag">modal-manager</span><span class="hljs-selector-attr">[mode=<span class="hljs-string">'open'</span>]</span> {
|
|
97
|
+
<span class="hljs-attribute">display</span>: block;
|
|
98
|
+
}
|
|
99
|
+
</span><span class="hljs-tag"></<span class="hljs-name">style</span>></span>
|
|
100
|
+
|
|
101
|
+
<span class="hljs-tag"><<span class="hljs-name">modal-manager</span>></span><span class="hljs-tag"></<span class="hljs-name">modal-manager</span>></span>
|
|
102
|
+
|
|
103
|
+
<span class="hljs-tag"><<span class="hljs-name">script</span>></span><span class="javascript">
|
|
104
|
+
<span class="hljs-comment">// show a simple modal</span>
|
|
105
|
+
<span class="hljs-keyword">const</span> manager = <span class="hljs-built_in">document</span>.querySelector(<span class="hljs-string">'modal-manager'</span>);
|
|
106
|
+
<span class="hljs-keyword">const</span> config = <span class="hljs-keyword">new</span> ModalConfig();
|
|
107
|
+
config.headline = <span class="hljs-string">'Hi, Everybody!'</span>;
|
|
108
|
+
config.message = <span class="hljs-string">'Hi, Doctor Nick!'</span>;
|
|
109
|
+
manager.showModal(config)
|
|
110
|
+
|
|
111
|
+
<span class="hljs-comment">// to hide the modal call `closeModal()`:</span>
|
|
112
|
+
manager.closeModal();
|
|
113
|
+
</span><span class="hljs-tag"></<span class="hljs-name">script</span>></span></code></pre>
|
|
114
|
+
<a href="#advanced-usage" id="advanced-usage" style="color: inherit; text-decoration: none;">
|
|
115
|
+
<h2>Advanced Usage</h2>
|
|
116
|
+
</a>
|
|
117
|
+
<a href="#markup-content" id="markup-content" style="color: inherit; text-decoration: none;">
|
|
118
|
+
<h3>Markup Content</h3>
|
|
119
|
+
</a>
|
|
120
|
+
<p>You can pass in custom HTML into the <code>ModalConfig</code>:</p>
|
|
121
|
+
<pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"module"</span>></span><span class="javascript">
|
|
122
|
+
<span class="hljs-keyword">import</span> { html } <span class="hljs-keyword">from</span> <span class="hljs-string">'lit-html'</span>;
|
|
123
|
+
</span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
|
|
124
|
+
|
|
125
|
+
<span class="hljs-tag"><<span class="hljs-name">modal-manager</span>></span><span class="hljs-tag"></<span class="hljs-name">modal-manager</span>></span>
|
|
126
|
+
|
|
127
|
+
<span class="hljs-tag"><<span class="hljs-name">script</span>></span><span class="javascript">
|
|
128
|
+
<span class="hljs-keyword">const</span> manager = <span class="hljs-built_in">document</span>.querySelector(<span class="hljs-string">'modal-manager'</span>);
|
|
129
|
+
<span class="hljs-keyword">const</span> config = <span class="hljs-keyword">new</span> ModalConfig();
|
|
130
|
+
config.title = <span class="hljs-string">'Internet Archive'</span>;
|
|
131
|
+
config.subtitle = <span class="hljs-string">''</span>;
|
|
132
|
+
config.headline = <span class="hljs-string">'Thanks for your Support!'</span>;
|
|
133
|
+
config.message = html`<span class="xml">
|
|
134
|
+
<span class="hljs-tag"><<span class="hljs-name">p</span>></span>Thanks for your donation!<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
|
|
135
|
+
<span class="hljs-tag"><<span class="hljs-name">p</span>></span>Please click <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">""</span>></span>here<span class="hljs-tag"></<span class="hljs-name">a</span>></span> to complete!<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
|
|
136
|
+
`</span>;
|
|
137
|
+
config.headerColor = <span class="hljs-string">'#36A483'</span>;
|
|
138
|
+
manager.showModal(config);
|
|
139
|
+
</span><span class="hljs-tag"></<span class="hljs-name">script</span>></span></code></pre>
|
|
140
|
+
<a href="#custom-content" id="custom-content" style="color: inherit; text-decoration: none;">
|
|
141
|
+
<h3>Custom Content</h3>
|
|
142
|
+
</a>
|
|
143
|
+
<p>Display completely custom content in the modal body, including light DOM content like a PayPal button.</p>
|
|
144
|
+
<pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">modal-manager</span>></span><span class="hljs-tag"></<span class="hljs-name">modal-manager</span>></span>
|
|
145
|
+
|
|
146
|
+
<span class="hljs-tag"><<span class="hljs-name">script</span>></span><span class="javascript">
|
|
147
|
+
<span class="hljs-keyword">const</span> manager = <span class="hljs-built_in">document</span>.querySelector(<span class="hljs-string">'modal-manager'</span>);
|
|
148
|
+
<span class="hljs-keyword">const</span> config = <span class="hljs-keyword">new</span> ModalConfig();
|
|
149
|
+
<span class="hljs-keyword">const</span> customContent = html`<span class="xml">
|
|
150
|
+
Can contain any markup, including web components. Event listeners also work. Try clicking on the picture.
|
|
151
|
+
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"text-align: center"</span>></span>
|
|
152
|
+
<span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"https://fillmurray.com"</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"display: block"</span>></span>Fill Murray<span class="hljs-tag"></<span class="hljs-name">a</span>></span>
|
|
153
|
+
<span class="hljs-tag"><<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"100x100.jpg"</span> @<span class="hljs-attr">click</span>=</span></span><span class="hljs-subst">${showBillAlert}</span><span class="xml"><span class="hljs-tag"> /></span>
|
|
154
|
+
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
|
155
|
+
`</span>;
|
|
156
|
+
|
|
157
|
+
modalManager.showModal(config, customContent);
|
|
158
|
+
</span><span class="hljs-tag"></<span class="hljs-name">script</span>></span></code></pre>
|
|
159
|
+
<a href="#config-options" id="config-options" style="color: inherit; text-decoration: none;">
|
|
160
|
+
<h3>Config Options</h3>
|
|
161
|
+
</a>
|
|
162
|
+
<p>All of the config options:</p>
|
|
163
|
+
<pre><code class="language-javascript"><span class="hljs-keyword">const</span> config = <span class="hljs-keyword">new</span> ModalConfig();
|
|
164
|
+
config.title = <span class="hljs-string">'Internet Archive'</span>;
|
|
165
|
+
config.subtitle = <span class="hljs-string">''</span>;
|
|
166
|
+
config.headline = <span class="hljs-string">'Thanks for your Support!'</span>;
|
|
167
|
+
config.message = <span class="hljs-string">'Thank you for supporting the Internet Archive!'</span>;
|
|
168
|
+
config.headerColor = <span class="hljs-string">'#36A483'</span>;
|
|
169
|
+
config.showProcessingIndicator = <span class="hljs-literal">false</span>;
|
|
170
|
+
config.processingImageMode = <span class="hljs-string">'processing'</span>; <span class="hljs-comment">// or `complete`</span></code></pre>
|
|
171
|
+
<a href="#development" id="development" style="color: inherit; text-decoration: none;">
|
|
172
|
+
<h1>Development</h1>
|
|
173
|
+
</a>
|
|
174
|
+
<a href="#prerequisite" id="prerequisite" style="color: inherit; text-decoration: none;">
|
|
175
|
+
<h2>Prerequisite</h2>
|
|
176
|
+
</a>
|
|
177
|
+
<pre><code class="language-bash">npm install</code></pre>
|
|
178
|
+
<a href="#start-development-server" id="start-development-server" style="color: inherit; text-decoration: none;">
|
|
179
|
+
<h2>Start Development Server</h2>
|
|
180
|
+
</a>
|
|
181
|
+
<pre><code class="language-bash">npm start</code></pre>
|
|
182
|
+
<a href="#testing" id="testing" style="color: inherit; text-decoration: none;">
|
|
183
|
+
<h2>Testing</h2>
|
|
184
|
+
</a>
|
|
185
|
+
<pre><code class="language-bash">npm <span class="hljs-built_in">test</span></code></pre>
|
|
186
|
+
<a href="#linting" id="linting" style="color: inherit; text-decoration: none;">
|
|
187
|
+
<h2>Linting</h2>
|
|
188
|
+
</a>
|
|
189
|
+
<pre><code class="language-bash">npm lint</code></pre>
|
|
190
|
+
</div>
|
|
191
|
+
</div>
|
|
192
|
+
<div class="col-4 col-menu menu-sticky-wrap menu-highlight">
|
|
193
|
+
<nav class="tsd-navigation primary">
|
|
194
|
+
<ul>
|
|
195
|
+
<li class="globals ">
|
|
196
|
+
<a href="globals.html"><em>Globals</em></a>
|
|
197
|
+
</li>
|
|
198
|
+
<li class=" tsd-kind-module">
|
|
199
|
+
<a href="modules/_index_.html">"index"</a>
|
|
200
|
+
</li>
|
|
201
|
+
<li class=" tsd-kind-module">
|
|
202
|
+
<a href="modules/_src_modal_config_.html">"src/modal-<wbr>config"</a>
|
|
203
|
+
</li>
|
|
204
|
+
<li class=" tsd-kind-module">
|
|
205
|
+
<a href="modules/_src_modal_manager_.html">"src/modal-<wbr>manager"</a>
|
|
206
|
+
</li>
|
|
207
|
+
<li class=" tsd-kind-module">
|
|
208
|
+
<a href="modules/_src_modal_manager_host_bridge_.html">"src/modal-<wbr>manager-<wbr>host-<wbr>bridge"</a>
|
|
209
|
+
</li>
|
|
210
|
+
<li class=" tsd-kind-module">
|
|
211
|
+
<a href="modules/_src_modal_manager_host_bridge_interface_.html">"src/modal-<wbr>manager-<wbr>host-<wbr>bridge-<wbr>interface"</a>
|
|
212
|
+
</li>
|
|
213
|
+
<li class=" tsd-kind-module">
|
|
214
|
+
<a href="modules/_src_modal_manager_interface_.html">"src/modal-<wbr>manager-<wbr>interface"</a>
|
|
215
|
+
</li>
|
|
216
|
+
<li class=" tsd-kind-module">
|
|
217
|
+
<a href="modules/_src_modal_manager_mode_.html">"src/modal-<wbr>manager-<wbr>mode"</a>
|
|
218
|
+
</li>
|
|
219
|
+
<li class=" tsd-kind-module">
|
|
220
|
+
<a href="modules/_src_modal_template_.html">"src/modal-<wbr>template"</a>
|
|
221
|
+
</li>
|
|
222
|
+
</ul>
|
|
223
|
+
</nav>
|
|
224
|
+
<nav class="tsd-navigation secondary menu-sticky">
|
|
225
|
+
<ul class="before-current">
|
|
226
|
+
</ul>
|
|
227
|
+
</nav>
|
|
228
|
+
</div>
|
|
229
|
+
</div>
|
|
230
|
+
</div>
|
|
231
|
+
<footer class="with-border-bottom">
|
|
232
|
+
<div class="container">
|
|
233
|
+
<h2>Legend</h2>
|
|
234
|
+
<div class="tsd-legend-group">
|
|
235
|
+
<ul class="tsd-legend">
|
|
236
|
+
<li class="tsd-kind-enum"><span class="tsd-kind-icon">Enumeration</span></li>
|
|
237
|
+
</ul>
|
|
238
|
+
<ul class="tsd-legend">
|
|
239
|
+
<li class="tsd-kind-interface"><span class="tsd-kind-icon">Interface</span></li>
|
|
240
|
+
</ul>
|
|
241
|
+
<ul class="tsd-legend">
|
|
242
|
+
<li class="tsd-kind-class"><span class="tsd-kind-icon">Class</span></li>
|
|
243
|
+
</ul>
|
|
244
|
+
</div>
|
|
245
|
+
</div>
|
|
246
|
+
</footer>
|
|
247
|
+
<div class="container tsd-generator">
|
|
248
|
+
<p>Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p>
|
|
249
|
+
</div>
|
|
250
|
+
<div class="overlay"></div>
|
|
251
|
+
<script src="assets/js/main.js"></script>
|
|
252
|
+
</body>
|
|
253
253
|
</html>
|