| line |
stmt |
bran |
cond |
sub |
pod |
time |
code |
|
1
|
|
|
|
|
|
|
package Mojolicious::Plugin::Moai; |
|
2
|
|
|
|
|
|
|
our $VERSION = '0.002'; |
|
3
|
|
|
|
|
|
|
# ABSTRACT: Mojolicious UI components using modern UI libraries |
|
4
|
|
|
|
|
|
|
|
|
5
|
|
|
|
|
|
|
#pod =head1 SYNOPSIS |
|
6
|
|
|
|
|
|
|
#pod |
|
7
|
|
|
|
|
|
|
#pod use Mojolicious::Lite; |
|
8
|
|
|
|
|
|
|
#pod plugin Moai => 'Bootstrap4'; |
|
9
|
|
|
|
|
|
|
#pod app->start; |
|
10
|
|
|
|
|
|
|
#pod __DATA__ |
|
11
|
|
|
|
|
|
|
#pod @@ list.html.ep |
|
12
|
|
|
|
|
|
|
#pod %= include 'moai/lib' |
|
13
|
|
|
|
|
|
|
#pod %= include 'moai/table', items => \@items, columns => [qw( id name )] |
|
14
|
|
|
|
|
|
|
#pod %= include 'moai/pager', current_page => 1, total_pages => 5 |
|
15
|
|
|
|
|
|
|
#pod |
|
16
|
|
|
|
|
|
|
#pod =head1 DESCRIPTION |
|
17
|
|
|
|
|
|
|
#pod |
|
18
|
|
|
|
|
|
|
#pod This plugin provides some common UI components using a couple different |
|
19
|
|
|
|
|
|
|
#pod popular UI libraries. |
|
20
|
|
|
|
|
|
|
#pod |
|
21
|
|
|
|
|
|
|
#pod These components are designed to integrate seamlessly with L, |
|
22
|
|
|
|
|
|
|
#pod L, and L. |
|
23
|
|
|
|
|
|
|
#pod |
|
24
|
|
|
|
|
|
|
#pod =head1 SUPPORTED LIBRARIES |
|
25
|
|
|
|
|
|
|
#pod |
|
26
|
|
|
|
|
|
|
#pod These libraries are not included and the desired version should be added |
|
27
|
|
|
|
|
|
|
#pod to your layout templates. To add your library using a CDN, see |
|
28
|
|
|
|
|
|
|
#pod L, below. |
|
29
|
|
|
|
|
|
|
#pod |
|
30
|
|
|
|
|
|
|
#pod =head2 Bootstrap4 |
|
31
|
|
|
|
|
|
|
#pod |
|
32
|
|
|
|
|
|
|
#pod L |
|
33
|
|
|
|
|
|
|
#pod |
|
34
|
|
|
|
|
|
|
#pod =head1 WIDGETS |
|
35
|
|
|
|
|
|
|
#pod |
|
36
|
|
|
|
|
|
|
#pod Widgets are snippets that you can include in your templates using the |
|
37
|
|
|
|
|
|
|
#pod L. |
|
38
|
|
|
|
|
|
|
#pod |
|
39
|
|
|
|
|
|
|
#pod =head2 moai/pager |
|
40
|
|
|
|
|
|
|
#pod |
|
41
|
|
|
|
|
|
|
#pod <%= include 'moai/pager', |
|
42
|
|
|
|
|
|
|
#pod current_page => param( 'page' ), |
|
43
|
|
|
|
|
|
|
#pod total_pages => $total_pages, |
|
44
|
|
|
|
|
|
|
#pod %> |
|
45
|
|
|
|
|
|
|
#pod |
|
46
|
|
|
|
|
|
|
#pod A pagination control. Will display previous and next buttons along with |
|
47
|
|
|
|
|
|
|
#pod individual page buttons. |
|
48
|
|
|
|
|
|
|
#pod |
|
49
|
|
|
|
|
|
|
#pod Also comes in a C variant in C that has just |
|
50
|
|
|
|
|
|
|
#pod previous/next buttons. |
|
51
|
|
|
|
|
|
|
#pod |
|
52
|
|
|
|
|
|
|
#pod =head3 Stash |
|
53
|
|
|
|
|
|
|
#pod |
|
54
|
|
|
|
|
|
|
#pod =over |
|
55
|
|
|
|
|
|
|
#pod |
|
56
|
|
|
|
|
|
|
#pod =item current_page |
|
57
|
|
|
|
|
|
|
#pod |
|
58
|
|
|
|
|
|
|
#pod The current page number. Defaults to the value of the C parameter. |
|
59
|
|
|
|
|
|
|
#pod |
|
60
|
|
|
|
|
|
|
#pod =item total_pages |
|
61
|
|
|
|
|
|
|
#pod |
|
62
|
|
|
|
|
|
|
#pod The total number of pages. Required. |
|
63
|
|
|
|
|
|
|
#pod |
|
64
|
|
|
|
|
|
|
#pod =item page_param |
|
65
|
|
|
|
|
|
|
#pod |
|
66
|
|
|
|
|
|
|
#pod The name of the parameter to use for the current page. Defaults to C. |
|
67
|
|
|
|
|
|
|
#pod |
|
68
|
|
|
|
|
|
|
#pod =back |
|
69
|
|
|
|
|
|
|
#pod |
|
70
|
|
|
|
|
|
|
#pod =head2 moai/table |
|
71
|
|
|
|
|
|
|
#pod |
|
72
|
|
|
|
|
|
|
#pod <%= include 'moai/table', |
|
73
|
|
|
|
|
|
|
#pod items => [ |
|
74
|
|
|
|
|
|
|
#pod { id => 1, name => 'Doug' }, |
|
75
|
|
|
|
|
|
|
#pod ], |
|
76
|
|
|
|
|
|
|
#pod columns => [ |
|
77
|
|
|
|
|
|
|
#pod { key => 'id', title => 'ID' }, |
|
78
|
|
|
|
|
|
|
#pod { key => 'name', title => 'Name' }, |
|
79
|
|
|
|
|
|
|
#pod ], |
|
80
|
|
|
|
|
|
|
#pod %> |
|
81
|
|
|
|
|
|
|
#pod |
|
82
|
|
|
|
|
|
|
#pod A table of items. |
|
83
|
|
|
|
|
|
|
#pod |
|
84
|
|
|
|
|
|
|
#pod =head3 Stash |
|
85
|
|
|
|
|
|
|
#pod |
|
86
|
|
|
|
|
|
|
#pod =over |
|
87
|
|
|
|
|
|
|
#pod |
|
88
|
|
|
|
|
|
|
#pod =item items |
|
89
|
|
|
|
|
|
|
#pod |
|
90
|
|
|
|
|
|
|
#pod The items to display in the table. An arrayref of hashrefs. |
|
91
|
|
|
|
|
|
|
#pod |
|
92
|
|
|
|
|
|
|
#pod =item columns |
|
93
|
|
|
|
|
|
|
#pod |
|
94
|
|
|
|
|
|
|
#pod The columns to display, in order. An arrayref of hashrefs with the following |
|
95
|
|
|
|
|
|
|
#pod keys: |
|
96
|
|
|
|
|
|
|
#pod |
|
97
|
|
|
|
|
|
|
#pod =over |
|
98
|
|
|
|
|
|
|
#pod |
|
99
|
|
|
|
|
|
|
#pod =item key |
|
100
|
|
|
|
|
|
|
#pod |
|
101
|
|
|
|
|
|
|
#pod The hash key in the item to use. |
|
102
|
|
|
|
|
|
|
#pod |
|
103
|
|
|
|
|
|
|
#pod =item title |
|
104
|
|
|
|
|
|
|
#pod |
|
105
|
|
|
|
|
|
|
#pod The text to display in the column heading |
|
106
|
|
|
|
|
|
|
#pod |
|
107
|
|
|
|
|
|
|
#pod =back |
|
108
|
|
|
|
|
|
|
#pod |
|
109
|
|
|
|
|
|
|
#pod =back |
|
110
|
|
|
|
|
|
|
#pod |
|
111
|
|
|
|
|
|
|
#pod =head2 moai/lib |
|
112
|
|
|
|
|
|
|
#pod |
|
113
|
|
|
|
|
|
|
#pod %= include 'moai/lib', version => '4.1.0'; |
|
114
|
|
|
|
|
|
|
#pod |
|
115
|
|
|
|
|
|
|
#pod Add the required stylesheet and JavaScript links for the current library |
|
116
|
|
|
|
|
|
|
#pod using a CDN. The stylesheets and JavaScript can be added separately |
|
117
|
|
|
|
|
|
|
#pod using C and C respectively. |
|
118
|
|
|
|
|
|
|
#pod |
|
119
|
|
|
|
|
|
|
#pod =head3 Stash |
|
120
|
|
|
|
|
|
|
#pod |
|
121
|
|
|
|
|
|
|
#pod =over |
|
122
|
|
|
|
|
|
|
#pod |
|
123
|
|
|
|
|
|
|
#pod =item version |
|
124
|
|
|
|
|
|
|
#pod |
|
125
|
|
|
|
|
|
|
#pod The specific version of the library to use. Required. |
|
126
|
|
|
|
|
|
|
#pod |
|
127
|
|
|
|
|
|
|
#pod =back |
|
128
|
|
|
|
|
|
|
#pod |
|
129
|
|
|
|
|
|
|
#pod =head1 TODO |
|
130
|
|
|
|
|
|
|
#pod |
|
131
|
|
|
|
|
|
|
#pod =over |
|
132
|
|
|
|
|
|
|
#pod |
|
133
|
|
|
|
|
|
|
#pod =item Security |
|
134
|
|
|
|
|
|
|
#pod |
|
135
|
|
|
|
|
|
|
#pod The CDN links should have full security hashes. |
|
136
|
|
|
|
|
|
|
#pod |
|
137
|
|
|
|
|
|
|
#pod =item Accessibility Testing |
|
138
|
|
|
|
|
|
|
#pod |
|
139
|
|
|
|
|
|
|
#pod Accessibility testing should be automated and applied to all supported |
|
140
|
|
|
|
|
|
|
#pod libraries. |
|
141
|
|
|
|
|
|
|
#pod |
|
142
|
|
|
|
|
|
|
#pod =item Internationalization |
|
143
|
|
|
|
|
|
|
#pod |
|
144
|
|
|
|
|
|
|
#pod This library should use Mojolicious's C feature to provide |
|
145
|
|
|
|
|
|
|
#pod translations for every widget in every library. |
|
146
|
|
|
|
|
|
|
#pod |
|
147
|
|
|
|
|
|
|
#pod =item Add more widgets |
|
148
|
|
|
|
|
|
|
#pod |
|
149
|
|
|
|
|
|
|
#pod There should be widgets for... |
|
150
|
|
|
|
|
|
|
#pod |
|
151
|
|
|
|
|
|
|
#pod =over |
|
152
|
|
|
|
|
|
|
#pod |
|
153
|
|
|
|
|
|
|
#pod =item * menus (vertical lists, horizontal navbars, dropdown buttons) |
|
154
|
|
|
|
|
|
|
#pod |
|
155
|
|
|
|
|
|
|
#pod =item * switched panels (tabs, accordion, slider) |
|
156
|
|
|
|
|
|
|
#pod |
|
157
|
|
|
|
|
|
|
#pod =item * alerts (error, warning, info) |
|
158
|
|
|
|
|
|
|
#pod |
|
159
|
|
|
|
|
|
|
#pod =item * menus (dropdown button, menu bar) |
|
160
|
|
|
|
|
|
|
#pod |
|
161
|
|
|
|
|
|
|
#pod =item * popups (modal dialogs, tooltips, notifications) |
|
162
|
|
|
|
|
|
|
#pod |
|
163
|
|
|
|
|
|
|
#pod =item * grid (maybe...) |
|
164
|
|
|
|
|
|
|
#pod |
|
165
|
|
|
|
|
|
|
#pod =back |
|
166
|
|
|
|
|
|
|
#pod |
|
167
|
|
|
|
|
|
|
#pod =item Add more libraries |
|
168
|
|
|
|
|
|
|
#pod |
|
169
|
|
|
|
|
|
|
#pod There should be support for... |
|
170
|
|
|
|
|
|
|
#pod |
|
171
|
|
|
|
|
|
|
#pod =over |
|
172
|
|
|
|
|
|
|
#pod |
|
173
|
|
|
|
|
|
|
#pod =item * Bootstrap 3 |
|
174
|
|
|
|
|
|
|
#pod |
|
175
|
|
|
|
|
|
|
#pod =item * Bulma |
|
176
|
|
|
|
|
|
|
#pod |
|
177
|
|
|
|
|
|
|
#pod =item * Material |
|
178
|
|
|
|
|
|
|
#pod |
|
179
|
|
|
|
|
|
|
#pod =back |
|
180
|
|
|
|
|
|
|
#pod |
|
181
|
|
|
|
|
|
|
#pod Moai should support the same features for each library, allowing easy |
|
182
|
|
|
|
|
|
|
#pod switching between them. |
|
183
|
|
|
|
|
|
|
#pod |
|
184
|
|
|
|
|
|
|
#pod =item Add progressive enhancement |
|
185
|
|
|
|
|
|
|
#pod |
|
186
|
|
|
|
|
|
|
#pod Some examples of progressive enhancement: |
|
187
|
|
|
|
|
|
|
#pod |
|
188
|
|
|
|
|
|
|
#pod =over |
|
189
|
|
|
|
|
|
|
#pod |
|
190
|
|
|
|
|
|
|
#pod =item * The table widget could have sortable columns |
|
191
|
|
|
|
|
|
|
#pod |
|
192
|
|
|
|
|
|
|
#pod =item * The table widget could use AJAX to to filter and paginate |
|
193
|
|
|
|
|
|
|
#pod |
|
194
|
|
|
|
|
|
|
#pod =item * The pager widget could use AJAX to update a linked element |
|
195
|
|
|
|
|
|
|
#pod |
|
196
|
|
|
|
|
|
|
#pod =item * The switched panel widgets could load their content lazily |
|
197
|
|
|
|
|
|
|
#pod |
|
198
|
|
|
|
|
|
|
#pod =back |
|
199
|
|
|
|
|
|
|
#pod |
|
200
|
|
|
|
|
|
|
#pod =item Themes |
|
201
|
|
|
|
|
|
|
#pod |
|
202
|
|
|
|
|
|
|
#pod Built-in selection of CDN-based themes for each library |
|
203
|
|
|
|
|
|
|
#pod |
|
204
|
|
|
|
|
|
|
#pod =item Layouts |
|
205
|
|
|
|
|
|
|
#pod |
|
206
|
|
|
|
|
|
|
#pod A customizable layout with good defaults. |
|
207
|
|
|
|
|
|
|
#pod |
|
208
|
|
|
|
|
|
|
#pod =back |
|
209
|
|
|
|
|
|
|
#pod |
|
210
|
|
|
|
|
|
|
#pod =head1 SEE ALSO |
|
211
|
|
|
|
|
|
|
#pod |
|
212
|
|
|
|
|
|
|
#pod L |
|
213
|
|
|
|
|
|
|
#pod |
|
214
|
|
|
|
|
|
|
#pod =cut |
|
215
|
|
|
|
|
|
|
|
|
216
|
3
|
|
|
3
|
|
71412
|
use Mojo::Base 'Mojolicious::Plugin'; |
|
|
3
|
|
|
|
|
10
|
|
|
|
3
|
|
|
|
|
19
|
|
|
217
|
3
|
|
|
3
|
|
461
|
use Mojo::File qw( path ); |
|
|
3
|
|
|
|
|
8
|
|
|
|
3
|
|
|
|
|
534
|
|
|
218
|
|
|
|
|
|
|
|
|
219
|
|
|
|
|
|
|
sub register { |
|
220
|
3
|
|
|
3
|
1
|
118
|
my ( $self, $app, $conf ) = @_; |
|
221
|
3
|
|
|
|
|
7
|
my $library = $conf->[0]; |
|
222
|
3
|
|
50
|
|
|
21
|
$conf = $conf->[1] || {}; |
|
223
|
3
|
|
|
|
|
16
|
my $libdir = path( __FILE__ )->sibling( 'Moai' )->child( 'resources', lc $library ); |
|
224
|
3
|
|
|
|
|
455
|
push @{$app->renderer->paths}, $libdir->child( 'templates' ); |
|
|
3
|
|
|
|
|
12
|
|
|
225
|
3
|
|
|
|
|
85
|
return; |
|
226
|
|
|
|
|
|
|
} |
|
227
|
|
|
|
|
|
|
|
|
228
|
|
|
|
|
|
|
1; |
|
229
|
|
|
|
|
|
|
|
|
230
|
|
|
|
|
|
|
__END__ |