patternfly-sass 3.17.0 → 3.20.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (114) hide show
  1. checksums.yaml +4 -4
  2. data/assets/fonts/patternfly/OpenSans-Bold-webfont.eot +0 -0
  3. data/assets/fonts/patternfly/OpenSans-Bold-webfont.svg +19025 -1827
  4. data/assets/fonts/patternfly/OpenSans-Bold-webfont.ttf +0 -0
  5. data/assets/fonts/patternfly/OpenSans-Bold-webfont.woff +0 -0
  6. data/assets/fonts/patternfly/OpenSans-Bold-webfont.woff2 +0 -0
  7. data/assets/fonts/patternfly/OpenSans-BoldItalic-webfont.eot +0 -0
  8. data/assets/fonts/patternfly/OpenSans-BoldItalic-webfont.svg +19033 -1827
  9. data/assets/fonts/patternfly/OpenSans-BoldItalic-webfont.ttf +0 -0
  10. data/assets/fonts/patternfly/OpenSans-BoldItalic-webfont.woff +0 -0
  11. data/assets/fonts/patternfly/OpenSans-BoldItalic-webfont.woff2 +0 -0
  12. data/assets/fonts/patternfly/OpenSans-ExtraBold-webfont.eot +0 -0
  13. data/assets/fonts/patternfly/OpenSans-ExtraBold-webfont.svg +19027 -1827
  14. data/assets/fonts/patternfly/OpenSans-ExtraBold-webfont.ttf +0 -0
  15. data/assets/fonts/patternfly/OpenSans-ExtraBold-webfont.woff +0 -0
  16. data/assets/fonts/patternfly/OpenSans-ExtraBold-webfont.woff2 +0 -0
  17. data/assets/fonts/patternfly/OpenSans-ExtraBoldItalic-webfont.eot +0 -0
  18. data/assets/fonts/patternfly/OpenSans-ExtraBoldItalic-webfont.svg +19033 -1827
  19. data/assets/fonts/patternfly/OpenSans-ExtraBoldItalic-webfont.ttf +0 -0
  20. data/assets/fonts/patternfly/OpenSans-ExtraBoldItalic-webfont.woff +0 -0
  21. data/assets/fonts/patternfly/OpenSans-ExtraBoldItalic-webfont.woff2 +0 -0
  22. data/assets/fonts/patternfly/OpenSans-Italic-webfont.eot +0 -0
  23. data/assets/fonts/patternfly/OpenSans-Italic-webfont.svg +19040 -1827
  24. data/assets/fonts/patternfly/OpenSans-Italic-webfont.ttf +0 -0
  25. data/assets/fonts/patternfly/OpenSans-Italic-webfont.woff +0 -0
  26. data/assets/fonts/patternfly/OpenSans-Italic-webfont.woff2 +0 -0
  27. data/assets/fonts/patternfly/OpenSans-Light-webfont.eot +0 -0
  28. data/assets/fonts/patternfly/OpenSans-Light-webfont.svg +19023 -1828
  29. data/assets/fonts/patternfly/OpenSans-Light-webfont.ttf +0 -0
  30. data/assets/fonts/patternfly/OpenSans-Light-webfont.woff +0 -0
  31. data/assets/fonts/patternfly/OpenSans-Light-webfont.woff2 +0 -0
  32. data/assets/fonts/patternfly/OpenSans-LightItalic-webfont.eot +0 -0
  33. data/assets/fonts/patternfly/OpenSans-LightItalic-webfont.svg +19036 -1832
  34. data/assets/fonts/patternfly/OpenSans-LightItalic-webfont.ttf +0 -0
  35. data/assets/fonts/patternfly/OpenSans-LightItalic-webfont.woff +0 -0
  36. data/assets/fonts/patternfly/OpenSans-LightItalic-webfont.woff2 +0 -0
  37. data/assets/fonts/patternfly/OpenSans-Regular-webfont.eot +0 -0
  38. data/assets/fonts/patternfly/OpenSans-Regular-webfont.svg +19027 -1828
  39. data/assets/fonts/patternfly/OpenSans-Regular-webfont.ttf +0 -0
  40. data/assets/fonts/patternfly/OpenSans-Regular-webfont.woff +0 -0
  41. data/assets/fonts/patternfly/OpenSans-Regular-webfont.woff2 +0 -0
  42. data/assets/fonts/patternfly/OpenSans-Semibold-webfont.eot +0 -0
  43. data/assets/fonts/patternfly/OpenSans-Semibold-webfont.svg +19027 -1827
  44. data/assets/fonts/patternfly/OpenSans-Semibold-webfont.ttf +0 -0
  45. data/assets/fonts/patternfly/OpenSans-Semibold-webfont.woff +0 -0
  46. data/assets/fonts/patternfly/OpenSans-Semibold-webfont.woff2 +0 -0
  47. data/assets/fonts/patternfly/OpenSans-SemiboldItalic-webfont.eot +0 -0
  48. data/assets/fonts/patternfly/OpenSans-SemiboldItalic-webfont.svg +19040 -1827
  49. data/assets/fonts/patternfly/OpenSans-SemiboldItalic-webfont.ttf +0 -0
  50. data/assets/fonts/patternfly/OpenSans-SemiboldItalic-webfont.woff +0 -0
  51. data/assets/fonts/patternfly/OpenSans-SemiboldItalic-webfont.woff2 +0 -0
  52. data/assets/fonts/patternfly/PatternFlyIcons-webfont.eot +0 -0
  53. data/assets/fonts/patternfly/PatternFlyIcons-webfont.svg +2 -0
  54. data/assets/fonts/patternfly/PatternFlyIcons-webfont.ttf +0 -0
  55. data/assets/fonts/patternfly/PatternFlyIcons-webfont.woff +0 -0
  56. data/assets/javascripts/patternfly-functions.js +118 -105
  57. data/assets/javascripts/patternfly-functions.min.js +1 -1
  58. data/assets/javascripts/patternfly-settings.js +24 -1
  59. data/assets/javascripts/patternfly-settings.min.js +1 -1
  60. data/assets/javascripts/patternfly.dataTables.pfEmpty.js +11 -2
  61. data/assets/javascripts/patternfly.dataTables.pfEmpty.min.js +1 -1
  62. data/assets/javascripts/patternfly.dataTables.pfFilter.js +13 -5
  63. data/assets/javascripts/patternfly.dataTables.pfFilter.min.js +1 -1
  64. data/assets/javascripts/patternfly.dataTables.pfPagination.js +401 -0
  65. data/assets/javascripts/patternfly.dataTables.pfPagination.min.js +1 -0
  66. data/assets/javascripts/patternfly.dataTables.pfSelect.js +2 -2
  67. data/assets/javascripts/patternfly.dataTables.pfSelect.min.js +1 -1
  68. data/assets/javascripts/patternfly.js +142 -106
  69. data/assets/javascripts/patternfly.min.js +2 -2
  70. data/assets/stylesheets/_patternfly.scss +1 -0
  71. data/assets/stylesheets/patternfly/_close.scss +2 -0
  72. data/assets/stylesheets/patternfly/_fonts.scss +95 -25
  73. data/assets/stylesheets/patternfly/_icons.scss +6 -0
  74. data/assets/stylesheets/patternfly/_list-view-dnd.scss +53 -0
  75. data/assets/stylesheets/patternfly/_list-view.scss +1 -0
  76. data/assets/stylesheets/patternfly/_pagination.scss +50 -0
  77. data/assets/stylesheets/patternfly/_variables.scss +2 -0
  78. data/assets/stylesheets/patternfly/lib/bootstrap-switch.scss +2 -5
  79. data/bower.json +1 -1
  80. data/lib/patternfly-sass/version.rb +2 -2
  81. data/package.json +1 -1
  82. data/spec/html/bar-charts.html +109 -0
  83. data/spec/html/basic.html +267 -0
  84. data/spec/html/bootstrap-treeview-2.html +3 -0
  85. data/spec/html/card-view-multi-select.html +20 -1
  86. data/spec/html/card-view-single-select.html +3 -0
  87. data/spec/html/cards.html +3 -0
  88. data/spec/html/dashboard.html +3 -0
  89. data/spec/html/dist/css/patternfly-additions.css +46 -0
  90. data/spec/html/dist/css/patternfly-additions.css.map +1 -1
  91. data/spec/html/dist/css/patternfly-additions.min.css +1 -1
  92. data/spec/html/dist/css/patternfly-additions.min.css.map +1 -1
  93. data/spec/html/dist/css/patternfly.css +124 -5
  94. data/spec/html/dist/css/patternfly.css.map +1 -1
  95. data/spec/html/dist/css/patternfly.min.css +3 -3
  96. data/spec/html/dist/css/patternfly.min.css.map +1 -1
  97. data/spec/html/form.html +3 -0
  98. data/spec/html/icons.html +10 -0
  99. data/spec/html/index.html +9 -0
  100. data/spec/html/list-view-compound-expansion.html +3 -0
  101. data/spec/html/list-view-rows.html +1 -1
  102. data/spec/html/list-view-simple-expansion.html +3 -0
  103. data/spec/html/list-view.html +19 -0
  104. data/spec/html/pagination-card-view.html +560 -0
  105. data/spec/html/pagination-list-view.html +1204 -0
  106. data/spec/html/pagination-table-view.html +800 -0
  107. data/spec/html/pagination.html +37 -0
  108. data/spec/html/tab.html +267 -0
  109. data/spec/html/table-view-navbar.html +268 -0
  110. data/spec/html/table-view.html +265 -0
  111. data/spec/html/toolbar.html +3 -0
  112. data/spec/html/typography-2.html +3 -0
  113. data/spec/html/typography.html +17 -0
  114. metadata +21 -2
data/spec/html/pagination-table-view.html ADDED
@@ -0,0 +1,800 @@
1
+ <!DOCTYPE html>
2
+ <!--[if IE 9]><html lang="en-us" class="ie9"><![endif]-->
3
+ <!--[if gt IE 9]><!-->
4
+ <html lang="en-us">
5
+ <!--<![endif]-->
6
+ <head>
7
+ <title>Pagination - Table View - PatternFly</title>
8
+ <meta charset="UTF-8">
9
+ <meta http-equiv="X-UA-Compatible" content="IE=Edge">
10
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
11
+ <link rel="shortcut icon" href="../../dist/img/favicon.ico">
12
+ <!-- iPad retina icon -->
13
+ <link rel="apple-touch-icon-precomposed" sizes="152x152" href="../../dist/img/apple-touch-icon-precomposed-152.png">
14
+ <!-- iPad retina icon (iOS < 7) -->
15
+ <link rel="apple-touch-icon-precomposed" sizes="144x144" href="../../dist/img/apple-touch-icon-precomposed-144.png">
16
+ <!-- iPad non-retina icon -->
17
+ <link rel="apple-touch-icon-precomposed" sizes="76x76" href="../../dist/img/apple-touch-icon-precomposed-76.png">
18
+ <!-- iPad non-retina icon (iOS < 7) -->
19
+ <link rel="apple-touch-icon-precomposed" sizes="72x72" href="../../dist/img/apple-touch-icon-precomposed-72.png">
20
+ <!-- iPhone 6 Plus icon -->
21
+ <link rel="apple-touch-icon-precomposed" sizes="120x120" href="../../dist/img/apple-touch-icon-precomposed-180.png">
22
+ <!-- iPhone retina icon (iOS < 7) -->
23
+ <link rel="apple-touch-icon-precomposed" sizes="114x114" href="../../dist/img/apple-touch-icon-precomposed-114.png">
24
+ <!-- iPhone non-retina icon (iOS < 7) -->
25
+ <link rel="apple-touch-icon-precomposed" sizes="57x57" href="../../dist/img/apple-touch-icon-precomposed-57.png">
26
+ <link rel="stylesheet" href="../../dist/css/patternfly.min.css" >
27
+ <link rel="stylesheet" href="../../dist/css/patternfly-additions.min.css" >
28
+ <link href="tests.css" rel="stylesheet" media="screen, print">
29
+ <script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
30
+ <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
31
+ <script src="//cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
32
+ <script src="//cdn.datatables.net/select/1.2.0/js/dataTables.select.min.js"></script>
33
+ <script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/js/bootstrap-select.min.js"></script>
34
+ <script src="../../dist/js/patternfly.dataTables.pfEmpty.js"></script>
35
+ <script src="../../dist/js/patternfly.dataTables.pfFilter.js"></script>
36
+ <script src="../../dist/js/patternfly.dataTables.pfPagination.js"></script>
37
+ <script src="../../dist/js/patternfly.dataTables.pfResize.js"></script>
38
+ <script src="../../dist/js/patternfly.dataTables.pfSelect.js"></script>
39
+ <script src="../../dist/js/patternfly.min.js"></script>
40
+ </head>
41
+
42
+ <body>
43
+ <!-- Navbar -->
44
+ <nav class="navbar navbar-default navbar-pf" role="navigation">
45
+ <div class="navbar-header">
46
+ <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse-1">
47
+ <span class="sr-only">Toggle navigation</span>
48
+ <span class="icon-bar"></span>
49
+ <span class="icon-bar"></span>
50
+ <span class="icon-bar"></span>
51
+ </button>
52
+ <a class="navbar-brand" href="/">
53
+ <img src="../../dist/img/brand.svg" alt="PatternFly Enterprise Application" />
54
+ </a>
55
+ </div>
56
+ <div class="collapse navbar-collapse navbar-collapse-1">
57
+ <ul class="nav navbar-nav navbar-utility">
58
+ <li>
59
+ <a href="#">Status</a>
60
+ </li>
61
+ <li class="dropdown">
62
+ <a href="#" class="dropdown-toggle" data-toggle="dropdown">
63
+ <span class="pficon pficon-user"></span>
64
+ Brian Johnson <b class="caret"></b>
65
+ </a>
66
+ <ul class="dropdown-menu">
67
+ <li>
68
+ <a href="#">Link</a>
69
+ </li>
70
+ <li>
71
+ <a href="#">Another link</a>
72
+ </li>
73
+ <li>
74
+ <a href="#">Something else here</a>
75
+ </li>
76
+ <li class="divider"></li>
77
+ <li class="dropdown-submenu">
78
+ <a tabindex="-1" href="#">More options</a>
79
+ <ul class="dropdown-menu">
80
+ <li>
81
+ <a href="#">Link</a>
82
+ </li>
83
+ <li>
84
+ <a href="#">Another link</a>
85
+ </li>
86
+ <li>
87
+ <a href="#">Something else here</a>
88
+ </li>
89
+ <li class="divider"></li>
90
+ <li class="dropdown-header">Nav header</li>
91
+ <li>
92
+ <a href="#">Separated link</a>
93
+ </li>
94
+ <li class="divider"></li>
95
+ <li>
96
+ <a href="#">One more separated link</a>
97
+ </li>
98
+ </ul>
99
+ </li>
100
+ <li class="divider"></li>
101
+ <li>
102
+ <a href="#">One more separated link</a>
103
+ </li>
104
+ </ul>
105
+ </li>
106
+ </ul>
107
+ <ul class="nav navbar-nav navbar-primary">
108
+ <li>
109
+ <a href="basic.html">Basic</a>
110
+ </li>
111
+ <li>
112
+ <a href="bootstrap-treeview-2.html">Tree View</a>
113
+ </li>
114
+ <li>
115
+ <a href="dashboard.html">Dashboard</a>
116
+ </li>
117
+ <li>
118
+ <a href="form.html">Form</a>
119
+ </li>
120
+ <li>
121
+ <a href="tab.html">Tab</a>
122
+ </li>
123
+ <li>
124
+ <a href="typography-2.html">Typography</a>
125
+ </li>
126
+ <li>
127
+ <a href="card-view-multi-select.html">Card View - Multi Select</a>
128
+ </li>
129
+ <li>
130
+ <a href="card-view-single-select.html">Card View - Single Select</a>
131
+ </li>
132
+ <li>
133
+ <a href="cards.html">Cards</a>
134
+ </li>
135
+ <li>
136
+ <a href="pagination-card-view.html">Pagination - Card View</a>
137
+ </li>
138
+ </ul>
139
+ </div>
140
+ </nav>
141
+
142
+ <!-- Toolbar -->
143
+ <div class="container-fluid">
144
+ <div class="row toolbar-pf table-view-pf-toolbar-external" id="toolbar1">
145
+ <div class="col-sm-12">
146
+ <form class="toolbar-pf-actions">
147
+ <div class="form-group toolbar-pf-filter">
148
+ <label class="sr-only" for="filter">Rendering Engine</label>
149
+ <div class="input-group">
150
+ <div class="input-group-btn">
151
+ <button type="button" class="btn btn-default dropdown-toggle" id="filter" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Rendering Engine <span class="caret"></span></button>
152
+ <ul class="dropdown-menu">
153
+ <li><a href="#" id="filter1">Rendering Engine</a></li>
154
+ <li><a href="#" id="filter2">Browser</a></li>
155
+ <li><a href="#" id="filter3">Platform(s)</a></li>
156
+ <li><a href="#" id="filter4">Engine Version</a></li>
157
+ <li><a href="#" id="filter5">CSS Grade</a></li>
158
+ </ul>
159
+ </div>
160
+ <input type="text" class="form-control" placeholder="Filter By Rendering Engine..." autocomplete="off">
161
+ </div>
162
+ </div>
163
+ <div class="form-group">
164
+ <div class="dropdown btn-group">
165
+ <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Rendering Engine <span class="caret"></span></button>
166
+ <ul class="dropdown-menu">
167
+ <li><a href="#">Rendering Engine</a></li>
168
+ <li><a href="#">Browser</a></li>
169
+ <li><a href="#">Platform(s)</a></li>
170
+ <li><a href="#">Engine Version</a></li>
171
+ <li><a href="#">CSS Grade</a></li>
172
+ </ul>
173
+ </div>
174
+ <button class="btn btn-link" type="button">
175
+ <span class="fa fa-sort-alpha-asc"></span>
176
+ </button>
177
+ </div>
178
+ <div class="form-group">
179
+ <button class="btn btn-default" type="button" id="deleteRows1">Delete Rows</button>
180
+ <button class="btn btn-default" type="button" id="restoreRows1" disabled>Restore Rows</button>
181
+ <div class="dropdown btn-group dropdown-kebab-pf">
182
+ <button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebab" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
183
+ <span class="fa fa-ellipsis-v"></span>
184
+ </button>
185
+ <ul class="dropdown-menu " aria-labelledby="dropdownKebab">
186
+ <li><a href="#">Action</a></li>
187
+ <li><a href="#">Another action</a></li>
188
+ <li><a href="#">Something else here</a></li>
189
+ <li role="separator" class="divider"></li>
190
+ <li><a href="#">Separated link</a></li>
191
+ </ul>
192
+ </div>
193
+
194
+ </div>
195
+ <div class="toolbar-pf-action-right">
196
+ <div class="form-group toolbar-pf-find">
197
+ <button class="btn btn-link btn-find" type="button">
198
+ <span class="fa fa-search"></span>
199
+ </button>
200
+ <div class="find-pf-dropdown-container">
201
+ <input type="text" class="form-control" id="find" placeholder="Find By Keyword...">
202
+ <div class="find-pf-buttons">
203
+ <span class="find-pf-nums">1 of 3</span>
204
+ <button class="btn btn-link" type="button">
205
+ <span class="fa fa-angle-up"></span>
206
+ </button>
207
+ <button class="btn btn-link" type="button">
208
+ <span class="fa fa-angle-down"></span>
209
+ </button>
210
+ <button class="btn btn-link btn-find-close" type="button">
211
+ <span class="pficon pficon-close"></span>
212
+ </button>
213
+ </div>
214
+ </div>
215
+ </div>
216
+ <div class="form-group toolbar-pf-view-selector">
217
+ <button class="btn btn-link active"><i class="fa fa-th"></i></button>
218
+ <button class="btn btn-link"><i class="fa fa-th-large"></i></button>
219
+ <button class="btn btn-link"><i class="fa fa-th-list"></i></button>
220
+ </div>
221
+ </div>
222
+ </form>
223
+ <div class="row toolbar-pf-results">
224
+ <div class="col-sm-9">
225
+ <div class="hidden">
226
+ <h5>0 Results</h5>
227
+ <p>Active filters:</p>
228
+ <ul class="list-inline"></ul>
229
+ <p><a href="#">Clear All Filters</a></p>
230
+ </div>
231
+ </div>
232
+ <div class="col-sm-3 table-view-pf-select-results">
233
+ <strong>0</strong> of <strong>0</strong> selected
234
+ </div>
235
+ </div>
236
+ </div>
237
+ </div>
238
+ </div>
239
+
240
+ <div class="col-sm-12">
241
+ <!-- Table HTML -->
242
+ <table class="table table-striped table-bordered table-hover" id="table1">
243
+ <thead>
244
+ <tr>
245
+ <th><label class="sr-only" for="selectAll">Select all rows</label><input type="checkbox" id="selectAll" name="selectAll"></th>
246
+ <th>Rendering Engine</th>
247
+ <th>Browser</th>
248
+ <th>Platform(s)</th>
249
+ <th>Engine Version</th>
250
+ <th>CSS Grade</th>
251
+ <th colspan="2">Actions</th>
252
+ </tr>
253
+ </thead>
254
+ </table>
255
+
256
+ <form class="content-view-pf-pagination table-view-pf-pagination clearfix" id="pagination1">
257
+ <div class="form-group">
258
+ <select class="selectpicker pagination-pf-pagesize">
259
+ <option value="6">6</option>
260
+ <option value="10" >10</option>
261
+ <option value="15" selected="selected">15</option>
262
+ <option value="25">25</option>
263
+ <option value="50">50</option>
264
+ </select>
265
+ <span>per page</span>
266
+ </div>
267
+ <div class="form-group">
268
+ <span><span class="pagination-pf-items-current">1-15</span> of <span class="pagination-pf-items-total">75</span></span>
269
+ <ul class="pagination pagination-pf-back">
270
+ <li class="disabled"><a href="#" title="First Page"><span class="i fa fa-angle-double-left"></span></a></li>
271
+ <li class="disabled"><a href="#" title="Previous Page"><span class="i fa fa-angle-left"></span></a></li>
272
+ </ul>
273
+ <label for="pagination1-page" class="sr-only">Current Page</label>
274
+ <input class="pagination-pf-page" type="text" value="1" id="pagination1-page"/>
275
+ <span>of <span class="pagination-pf-pages">5</span></span>
276
+ <ul class="pagination pagination-pf-forward">
277
+ <li><a href="#" title="Next Page"><span class="i fa fa-angle-right"></span></a></li>
278
+ <li><a href="#" title="Last Page"><span class="i fa fa-angle-double-right"></span></a></li>
279
+ </ul>
280
+ </div>
281
+ </form>
282
+
283
+ <!-- Blank Slate HTML -->
284
+ <div class="blank-slate-pf table-view-pf-empty hidden" id="emptyState1">
285
+ <div class="blank-slate-pf-icon">
286
+ <span class="pficon pficon pficon-add-circle-o"></span>
287
+ </div>
288
+ <h1>
289
+ Empty State Title
290
+ </h1>
291
+ <p>
292
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
293
+ </p>
294
+ <p>
295
+ Learn more about this <a href="#">on the documentation</a>.
296
+ </p>
297
+ <div class="blank-slate-pf-main-action">
298
+ <button class="btn btn-primary btn-lg"> Main Action </button>
299
+ </div>
300
+ <div class="blank-slate-pf-secondary-action">
301
+ <button class="btn btn-default"> Secondary Action </button> <button class="btn btn-default"> Secondary Action </button> <button class="btn btn-default"> Secondary Action </button>
302
+ </div>
303
+ </div>
304
+
305
+ </div>
306
+ <script>
307
+ $(document).ready(function() {
308
+
309
+ // JSON data for Table View
310
+ var dataSet = [{
311
+ engine: "Trident",
312
+ browser: "Internet Explorer 4.0",
313
+ platforms: "Win 95+",
314
+ version: "4",
315
+ grade: "X"
316
+ },{
317
+ engine: "Trident",
318
+ browser: "Internet Explorer 5.0",
319
+ platforms: "Win 95+",
320
+ version: "5",
321
+ grade: "C"
322
+ }, {
323
+ engine: "Trident",
324
+ browser: "Internet Explorer 5.5",
325
+ platforms: "Win 95+",
326
+ version: "5.5",
327
+ grade: "A"
328
+ }, {
329
+ engine: "Trident",
330
+ browser: "Internet Explorer 6",
331
+ platforms: "Win 98+",
332
+ version: "6",
333
+ grade: "A"
334
+ }, {
335
+ engine: "Trident",
336
+ browser: "Internet Explorer 7",
337
+ platforms: "Win XP SP2+",
338
+ version: "7",
339
+ grade: "A"
340
+ }, {
341
+ engine: "Trident",
342
+ browser: "AOL browser (AOL desktop)",
343
+ platforms: "Win XP",
344
+ version: "6",
345
+ grade: "A"
346
+ }, {
347
+ engine: "Gecko",
348
+ browser: "Firefox 1.0",
349
+ platforms: "Win 98+ / OSX.2+",
350
+ version: "1.7",
351
+ grade: "A"
352
+ }, {
353
+ engine: "Gecko",
354
+ browser: "Firefox 1.5",
355
+ platforms: "Win 98+ / OSX.2+",
356
+ version: "1.8",
357
+ grade: "A"
358
+ }, {
359
+ engine: "Gecko",
360
+ browser: "Firefox 2.0",
361
+ platforms: "Win 98+ / OSX.2+",
362
+ version: "1.8",
363
+ grade: "A"
364
+ }, {
365
+ engine: "Gecko",
366
+ browser: "Firefox 3.0",
367
+ platforms: "Win 2k+ / OSX.3+",
368
+ version: "1.9",
369
+ grade: "A"
370
+ }, {
371
+ engine: "Gecko",
372
+ browser: "Camino 1.0",
373
+ platforms: "OSX.2+",
374
+ version: "1.8",
375
+ grade: "A"
376
+ }, {
377
+ engine: "Gecko",
378
+ browser: "Camino 1.5",
379
+ platforms: "OSX.3+",
380
+ version: "1.8",
381
+ grade: "A"
382
+ }, {
383
+ engine: "Gecko",
384
+ browser: "Netscape 7.2",
385
+ platforms: "Win 95+ / Mac OS 8.6-9.2",
386
+ version: "1.7",
387
+ grade: "A"
388
+ }, {
389
+ engine: "Gecko",
390
+ browser: "Netscape Browser 8",
391
+ platforms: "Win 98SE+",
392
+ version: "1.7",
393
+ grade: "A"
394
+ }, {
395
+ engine: "Gecko",
396
+ browser: "Netscape Navigator 9",
397
+ platforms: "Win 98+ / OSX.2+",
398
+ version: "1.8",
399
+ grade: "A"
400
+ }, {
401
+ engine: "Gecko",
402
+ browser: "Mozilla 1.0",
403
+ platforms: "Win 95+ / OSX.1+",
404
+ version: "1",
405
+ grade: "A"
406
+ }, {
407
+ engine: "Gecko",
408
+ browser: "Mozilla 1.1",
409
+ platforms: "Win 95+ / OSX.1+",
410
+ version: "1.1",
411
+ grade: "A"
412
+ }, {
413
+ engine: "Gecko",
414
+ browser: "Mozilla 1.2",
415
+ platforms: "Win 95+ / OSX.1+",
416
+ version: "1.2",
417
+ grade: "A"
418
+ }, {
419
+ engine: "Gecko",
420
+ browser: "Mozilla 1.3",
421
+ platforms: "Win 95+ / OSX.1+",
422
+ version: "1.3",
423
+ grade: "A"
424
+ }, {
425
+ engine: "Gecko",
426
+ browser: "Mozilla 1.4",
427
+ platforms: "Win 95+ / OSX.1+",
428
+ version: "1.4",
429
+ grade: "A"
430
+ }, {
431
+ engine: "Gecko",
432
+ browser: "Mozilla 1.5",
433
+ platforms: "Win 95+ / OSX.1+",
434
+ version: "1.5",
435
+ grade: "A"
436
+ }, {
437
+ engine: "Gecko",
438
+ browser: "Mozilla 1.6",
439
+ platforms: "Win 95+ / OSX.1+",
440
+ version: "1.6",
441
+ grade: "A"
442
+ }, {
443
+ engine: "Gecko",
444
+ browser: "Mozilla 1.7",
445
+ platforms: "Win 98+ / OSX.1+",
446
+ version: "1.7",
447
+ grade: "A"
448
+ }, {
449
+ engine: "Gecko",
450
+ browser: "Mozilla 1.8",
451
+ platforms: "Win 98+ / OSX.1+",
452
+ version: "1.8",
453
+ grade: "A"
454
+ }, {
455
+ engine: "Gecko",
456
+ browser: "Seamonkey 1.1",
457
+ platforms: "Win 98+ / OSX.2+",
458
+ version: "1.8",
459
+ grade: "A"
460
+ }, {
461
+ engine: "Gecko",
462
+ browser: "Epiphany 2.20",
463
+ platforms: "Gnome",
464
+ version: "1.8",
465
+ grade: "A"
466
+ }, {
467
+ engine: "Webkit",
468
+ browser: "Safari 1.2",
469
+ platforms: "OSX.3",
470
+ version: "125.5",
471
+ grade: "A"
472
+ }, {
473
+ engine: "Webkit",
474
+ browser: "Safari 1.3",
475
+ platforms: "OSX.3",
476
+ version: "312.8",
477
+ grade: "A"
478
+ }, {
479
+ engine: "Webkit",
480
+ browser: "Safari 2.0",
481
+ platforms: "OSX.4+",
482
+ version: "419.3",
483
+ grade: "A"
484
+ }, {
485
+ engine: "Webkit",
486
+ browser: "Safari 3.0",
487
+ platforms: "OSX.4+",
488
+ version: "522.1",
489
+ grade: "A"
490
+ }, {
491
+ engine: "Webkit",
492
+ browser: "OmniWeb 5.5",
493
+ platforms: "OSX.4+",
494
+ version: "420",
495
+ grade: "A"
496
+ }, {
497
+ engine: "Webkit",
498
+ browser: "iPod Touch / iPhone",
499
+ platforms: "iPod",
500
+ version: "420.1",
501
+ grade: "A"
502
+ }, {
503
+ engine: "Webkit",
504
+ browser: "S60",
505
+ platforms: "S60",
506
+ version: "413",
507
+ grade: "A"
508
+ }, {
509
+ engine: "Presto",
510
+ browser: "Opera 7.0",
511
+ platforms: "Win 95+ / OSX.1+",
512
+ version: "-",
513
+ grade: "A"
514
+ }, {
515
+ engine: "Presto",
516
+ browser: "Opera 7.5",
517
+ platforms: "Win 95+ / OSX.2+",
518
+ version: "-",
519
+ grade: "A"
520
+ }, {
521
+ engine: "Presto",
522
+ browser: "Opera 8.0",
523
+ platforms: "Win 95+ / OSX.2+",
524
+ version: "-",
525
+ grade: "A"
526
+ }, {
527
+ engine: "Presto",
528
+ browser: "Opera 8.5",
529
+ platforms: "Win 95+ / OSX.2+",
530
+ version: "-",
531
+ grade: "A"
532
+ }, {
533
+ engine: "Presto",
534
+ browser: "Opera 9.0",
535
+ platforms: "Win 95+ / OSX.3+",
536
+ version: "-",
537
+ grade: "A"
538
+ }, {
539
+ engine: "Presto",
540
+ browser: "Opera 9.2",
541
+ platforms: "Win 88+ / OSX.3+",
542
+ version: "-",
543
+ grade: "A"
544
+ }, {
545
+ engine: "Presto",
546
+ browser: "Opera 9.5",
547
+ platforms: "Win 88+ / OSX.3+",
548
+ version: "-",
549
+ grade: "A"
550
+ }, {
551
+ engine: "Presto",
552
+ browser: "Opera for Wii",
553
+ platforms: "Wii",
554
+ version: "-",
555
+ grade: "A"
556
+ }, {
557
+ engine: "Presto",
558
+ browser: "Nokia N800",
559
+ platforms: "N800",
560
+ version: "-",
561
+ grade: "A"
562
+ }, {
563
+ engine: "Presto",
564
+ browser: "Nintendo DS browser",
565
+ platforms: "Nintendo DS",
566
+ version: "8.5",
567
+ grade: "C/A<sup>1</sup>"
568
+ }, {
569
+ engine: "KHTML",
570
+ browser: "Konqureror 3.1",
571
+ platforms: "KDE 3.1",
572
+ version: "3.1",
573
+ grade: "C"
574
+ }, {
575
+ engine: "KHTML",
576
+ browser: "Konqureror 3.3",
577
+ platforms: "KDE 3.3",
578
+ version: "3.3",
579
+ grade: "A"
580
+ }, {
581
+ engine: "KHTML",
582
+ browser: "Konqureror 3.5",
583
+ platforms: "KDE 3.5",
584
+ version: "3.5",
585
+ grade: "A"
586
+ }, {
587
+ engine: "Tasman",
588
+ browser: "Internet Explorer 4.5",
589
+ platforms: "Mac OS 8-9",
590
+ version: "-",
591
+ grade: "X"
592
+ }, {
593
+ engine: "Tasman",
594
+ browser: "Internet Explorer 5.1",
595
+ platforms: "Mac OS 7.6-9",
596
+ version: "1",
597
+ grade: "C"
598
+ }, {
599
+ engine: "Tasman",
600
+ browser: "Internet Explorer 5.2",
601
+ platforms: "Mac OS 8-X",
602
+ version: "1",
603
+ grade: "C"
604
+ }, {
605
+ engine: "Misc",
606
+ browser: "NetFront 3.1",
607
+ platforms: "Embedded devices",
608
+ version: "-",
609
+ grade: "C"
610
+ }, {
611
+ engine: "Misc",
612
+ browser: "NetFront 3.4",
613
+ platforms: "Embedded devices",
614
+ version: "-",
615
+ grade: "A"
616
+ }, {
617
+ engine: "Misc",
618
+ browser: "Dillo 0.8",
619
+ platforms: "Embedded devices",
620
+ version: "-",
621
+ grade: "X"
622
+ }, {
623
+ engine: "Misc",
624
+ browser: "Links",
625
+ platforms: "Text only",
626
+ version: "-",
627
+ grade: "X"
628
+ }, {
629
+ engine: "Misc",
630
+ browser: "Lynx",
631
+ platforms: "Text only",
632
+ version: "-",
633
+ grade: "X"
634
+ }, {
635
+ engine: "Misc",
636
+ browser: "IE Mobile",
637
+ platforms: "Windows Mobile 6",
638
+ version: "-",
639
+ grade: "C"
640
+ }, {
641
+ engine: "Misc",
642
+ browser: "PSP browser",
643
+ platforms: "PSP",
644
+ version: "-",
645
+ grade: "C"
646
+ }, {
647
+ engine: "Other browsers",
648
+ browser: "All others",
649
+ platforms: "-",
650
+ version: "-",
651
+ grade: "U"
652
+ }];
653
+
654
+ // DataTable Config
655
+ $("#table1").DataTable({
656
+ columns: [
657
+ { data: null,
658
+ className: "table-view-pf-select",
659
+ render: function (data, type, full, meta) {
660
+ // Select row checkbox renderer
661
+ var id = "select" + meta.row;
662
+ return '<label class="sr-only" for="' + id + '">Select row ' + meta.row +
663
+ '</label><input type="checkbox" id="' + id + '" name="' + id + '">';
664
+ },
665
+ sortable: false
666
+ },
667
+ { data: "engine" },
668
+ { data: "browser" },
669
+ { data: "platforms" },
670
+ { data: "version" },
671
+ { data: "grade"},
672
+ { data: null,
673
+ className: "table-view-pf-actions",
674
+ render: function (data, type, full, meta) {
675
+ // Inline action button renderer
676
+ return '<div class="table-view-pf-btn"><button class="btn btn-default" type="button">Actions</button></div>';
677
+ }
678
+ }, {
679
+ data: null,
680
+ className: "table-view-pf-actions",
681
+ render: function (data, type, full, meta) {
682
+ // Inline action kebab renderer
683
+ return '<div class="dropdown dropdown-kebab-pf">' +
684
+ '<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">' +
685
+ '<span class="fa fa-ellipsis-v"></span></button>' +
686
+ '<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight">' +
687
+ '<li><a href="#">Action</a></li>' +
688
+ '<li><a href="#">Another action</a></li>' +
689
+ '<li><a href="#">Something else here</a></li>' +
690
+ '<li role="separator" class="divider"></li>' +
691
+ '<li><a href="#">Separated link</a></li></ul></div>';
692
+ }
693
+ }
694
+ ],
695
+ data: dataSet,
696
+ dom: "t",
697
+ language: {
698
+ zeroRecords: "No records found"
699
+ },
700
+ order: [[ 1, 'asc' ]],
701
+ pfConfig: {
702
+ emptyStateSelector: "#emptyState1",
703
+ filterCaseInsensitive: true,
704
+ filterCols: [
705
+ null,
706
+ {
707
+ default: true,
708
+ optionSelector: "#filter1",
709
+ placeholder: "Filter By Rendering Engine..."
710
+ }, {
711
+ optionSelector: "#filter2",
712
+ placeholder: "Filter By Browser..."
713
+ }, {
714
+ optionSelector: "#filter3",
715
+ placeholder: "Filter By Platform(s)..."
716
+ }, {
717
+ optionSelector: "#filter4",
718
+ placeholder: "Filter By Engine Version..."
719
+ }, {
720
+ optionSelector: "#filter5",
721
+ placeholder: "Filter By CSS Grade..."
722
+ }
723
+ ],
724
+ paginationSelector: "#pagination1",
725
+ toolbarSelector: "#toolbar1",
726
+ selectAllSelector: 'th:first-child input[type="checkbox"]'
727
+ },
728
+ select: {
729
+ selector: 'td:first-child input[type="checkbox"]',
730
+ style: 'multi'
731
+ },
732
+ });
733
+
734
+ /**
735
+ * Utility to show empty Table View
736
+ *
737
+ * @param {object} config - Config properties associated with a Table View
738
+ * @param {object} config.data - Data set for DataTable
739
+ * @param {string} config.deleteRowsSelector - Selector for delete rows control
740
+ * @param {string} config.restoreRowsSelector - Selector for restore rows control
741
+ * @param {string} config.tableSelector - Selector for the HTML table
742
+ */
743
+ var emptyTableViewUtil = function (config) {
744
+ var self = this;
745
+
746
+ this.dt = $(config.tableSelector).DataTable(); // DataTable
747
+ this.deleteRows = $(config.deleteRowsSelector); // Delete rows control
748
+ this.restoreRows = $(config.restoreRowsSelector); // Restore rows control
749
+
750
+ // Handle click on delete rows control
751
+ this.deleteRows.on('click', function() {
752
+ self.dt.clear().draw();
753
+ $(self.restoreRows).prop("disabled", false);
754
+ });
755
+
756
+ // Handle click on restore rows control
757
+ this.restoreRows.on('click', function() {
758
+ self.dt.rows.add(config.data).draw();
759
+ $(this).prop("disabled", true);
760
+ });
761
+
762
+ // Initialize restore rows
763
+ if (this.dt.data().length === 0) {
764
+ $(this.restoreRows).prop("disabled", false);
765
+ }
766
+ };
767
+
768
+ // Initialize empty Table View util
769
+ new emptyTableViewUtil({
770
+ data: dataSet,
771
+ deleteRowsSelector: "#deleteRows1",
772
+ restoreRowsSelector: "#restoreRows1",
773
+ tableSelector: "#table1"
774
+ });
775
+
776
+ /**
777
+ * Utility to find items in Table View
778
+ */
779
+ var findTableViewUtil = function (config) {
780
+ // Upon clicking the find button, show the find dropdown content
781
+ $(".btn-find").click(function () {
782
+ $(this).parent().find(".find-pf-dropdown-container").toggle();
783
+ });
784
+
785
+ // Upon clicking the find close button, hide the find dropdown content
786
+ $(".btn-find-close").click(function () {
787
+ $(".find-pf-dropdown-container").hide();
788
+ });
789
+ };
790
+
791
+ // Initialize find util
792
+ new findTableViewUtil();
793
+
794
+ });
795
+ </script>
796
+
797
+
798
+
799
+ </body>
800
+ </html>