sitediff 0.0.1 → 1.0.0

Sign up to get free protection for your applications and to get access to all the features.
@@ -0,0 +1,16 @@
1
+ <html>
2
+ <head>
3
+ <title>Comparison for <%= path %></title>
4
+ <meta charset="utf-8" />
5
+ <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
6
+ <meta http-equiv="Pragma" content="no-cache" />
7
+ <meta http-equiv="Expires" content="0" />
8
+ <style>
9
+ <%= SiteDiff::Report.css %>
10
+ </style>
11
+ </head>
12
+ <body id="sidebyside">
13
+ <iframe src="<%= before %>"></iframe>
14
+ <iframe src="<%= after %>"></iframe>
15
+ </body>
16
+ </html>
@@ -1,42 +1,249 @@
1
- .sitediff {
2
- font-family: monospace;
3
- font-size: 1.2em;
1
+ * {
2
+ box-sizing: border-box;
3
+ outline: none;
4
4
  }
5
- .sitediff .legend {
6
- width: 95%;
7
- margin: 1em auto;
5
+
6
+ a {
7
+ color: #6E73B7;
8
+ text-decoration: none;
9
+ }
10
+
11
+ body {
12
+ font-family: sans-serif;
13
+ font-size: 16px;
14
+ padding: 3em 0;
15
+ }
16
+
17
+ .container {
18
+ overflow: hidden;
19
+ margin: 0 auto;
20
+ padding-left: 1em;
21
+ padding-right: 1em;
22
+ max-width: 1280px;
23
+ }
24
+
25
+ #footer {
26
+ font-size: 90%;
27
+ margin-top: 2em;
8
28
  text-align: center;
9
29
  }
10
- .sitediff .results thead {
11
- background: black;
12
- color: white;
30
+
31
+ .site-info {
32
+ display: flex;
33
+ flex-direction: row;
34
+ align-items: center;
35
+ justify-content: space-between;
36
+ }
37
+
38
+ .site-info .site {
39
+ background-color: #F9F9FB;
40
+ flex-basis: 49%;
41
+ flex-grow: 0;
42
+ flex-shrink: 0;
43
+ padding: 1em;
44
+ }
45
+
46
+ .site__tag {
47
+ margin-top: 0;
48
+ margin-bottom: .5em;
49
+ }
50
+
51
+ /* Statistical info */
52
+ .statistical-info {
53
+ display: flex;
54
+ align-items: center;
55
+ justify-content: space-between;
56
+ flex-direction: row;
57
+ margin-bottom: 1em;
58
+ }
59
+
60
+ .statistical-info > div {
61
+ flex-basis: 49%;
62
+ }
63
+
64
+ .statistical-info h3 {
65
+ display: inline-block;
66
+ margin-right: 1em;
13
67
  }
14
- .sitediff .results td {
68
+
69
+ .statistical-info .count {
70
+ background-color: #eeeeee;
71
+ border-radius: 50%;
72
+ display: inline-block;
73
+ font-weight: bold;
74
+ line-height: 2em;
75
+ padding: .1em .25em 0;
76
+ height: 2em;
77
+ width: 2em;
15
78
  text-align: center;
16
79
  }
17
- .sitediff .results td.path {
80
+
81
+ /* Buttons */
82
+ .button {
83
+ background-color: #EAECF3;
84
+ cursor: pointer;
85
+ display: inline-block;
86
+ font-size: .9em;
87
+ padding: .25em .5em .3em;
88
+ text-decoration: none;
89
+ }
90
+
91
+ /**
92
+ * Forms.
93
+ */
94
+ label[for] {
95
+ cursor: pointer;
96
+ }
97
+
98
+ /* Checkboxes */
99
+ .form-checkboxes .form-checkbox {
100
+ display: inline-block;
101
+ margin-right: .5em;
102
+ }
103
+
104
+ .form-checkbox input {
105
+ height: 1em;
106
+ width: 1em;
107
+ }
108
+
109
+ /* Search */
110
+ .form-search label {
111
+ display: none;
112
+ }
113
+
114
+ .form-search input {
115
+ font-size: .9em;
116
+ padding-left: .5em;
117
+ padding-right: .5em;
118
+ width: 200px;
119
+ }
120
+
121
+ /* SiteDiff Toolbar */
122
+ .sitediff-toolbar {
123
+ margin-top: 1em;
124
+ margin-bottom: 1em;
125
+ overflow: hidden;
126
+ padding-top: 5px;
127
+ padding-bottom: 5px;
128
+ }
129
+
130
+ .sitediff-toolbar .form-item {
131
+ display: inline-block;
132
+ margin-right: 1em;
133
+ }
134
+
135
+ .sitediff-toolbar .form-item:last-child {
136
+ margin-right: 0;
137
+ }
138
+
139
+ .sitediff-toolbar .toolbar__left {
140
+ float: left;
141
+ }
142
+
143
+ .sitediff-toolbar .toolbar__right {
144
+ float: right;
145
+ }
146
+
147
+ /* Table */
148
+ table {
149
+ width: 100%;
150
+ }
151
+
152
+ table thead {
153
+ background: #F9F9FB;
154
+ color: #999999;
155
+ }
156
+
157
+ td,
158
+ th {
18
159
  text-align: left;
19
- padding-left: 1em;
160
+ padding: .4em .5em;
20
161
  }
21
- .sitediff .results {
22
- padding: 1em;
23
- width: 95%;
24
- margin: 1em auto;
25
- font-size: 1em;
162
+
163
+ th {
164
+ border-bottom: 2px solid #EAECF3;
165
+ padding-top: .5em;
166
+ padding-bottom: .5em;
167
+ }
168
+
169
+ table tbody td {
170
+ border-bottom: 2px solid #F9F9FB;
171
+ }
172
+
173
+ table tbody tr:hover {
174
+ background-color: #F9F9FB;
175
+ }
176
+
177
+ table .path {
178
+ margin-right: 1em;
179
+ }
180
+
181
+ table td.description .buttons {
182
+ float: right;
183
+ }
184
+
185
+ table td.description a {
186
+ display: none;
187
+ margin-left: .4em;
188
+ }
189
+
190
+ table td.description:hover a {
191
+ display: inline-block;
192
+ }
193
+
194
+ table td.description .button-diff {
195
+ display: block;
196
+ }
197
+
198
+ table .icon-col {
199
+ width: 25px;
200
+ }
201
+
202
+ table .status-col {
203
+ width: 100px;
204
+ }
205
+
206
+ /* Icons */
207
+ .icon {
208
+ display: inline-block;
209
+ height: 1em;
210
+ width: 1em;
211
+ }
212
+
213
+ .icon-result-changed {
214
+ background-color: lightcoral;
215
+ border-radius: 50%;
216
+ }
217
+
218
+ .icon-result-unchanged {
219
+ background-color: lightgreen;
220
+ border-radius: 50%;
26
221
  }
27
- .sitediff tr.error > td.status,
28
- .sitediff tr.error > td.path {
29
- background-color: khaki;
222
+
223
+ .icon-result-error {
224
+ background: khaki;
225
+ border-radius: 50%;
30
226
  }
31
- .sitediff tr.failure > td.status,
32
- .sitediff tr.failure > td.path {
33
- background-color: salmon;
227
+
228
+ /* Side-by-side view */
229
+ #sidebyside {
230
+ margin: 0;
34
231
  }
35
- .sitediff .before-col,
36
- .sitediff .after-col,
37
- .sitediff .diff-stat-col {
38
- width: 10%;
232
+
233
+ #sidebyside iframe {
234
+ float: left;
235
+ height: 100%;
236
+ width: 50%;
237
+ border: 0;
39
238
  }
40
- .sitediff .path-col {
41
- width: 55%;
239
+
240
+ /* Page: Diff */
241
+ #diff-navigator {
242
+ background-color: #fefefe;
243
+ box-shadow: 0 0 .5em rgba(0, 0, 0, .25);
244
+ padding: .25em;
245
+ margin-top: 0;
246
+ position: fixed;
247
+ top: 0;
248
+ width: 100%;
42
249
  }
@@ -0,0 +1,176 @@
1
+ /**
2
+ * @file
3
+ * SiteDiff report behaviors.
4
+ */
5
+
6
+ /**
7
+ * SiteDiff namespace.
8
+ */
9
+ var SiteDiff = SiteDiff || {};
10
+
11
+ /**
12
+ * Scrolls the document to the said position.
13
+ *
14
+ * @param options
15
+ * Object specifying various options.
16
+ *
17
+ * x: X position.
18
+ * y: Y position.
19
+ * animate: Whether to animate.
20
+ * callback: A function to call after scrolling.
21
+ */
22
+ SiteDiff.scrollToPosition = function (options) {
23
+ // Compute vertical and horizontal adjustments, if any.
24
+ // Example: Fixed elements, etc.
25
+ var xFix = 0;
26
+ var yFix = 0 - 100;
27
+
28
+ // Determine final x and y offsets.
29
+ var x = parseInt(options.x) + xFix;
30
+ x = Math.max(x, 0);
31
+ var y = parseInt(options.y) + yFix;
32
+ y = Math.max(y, 0);
33
+
34
+ // Perform the scroll with or without animation.
35
+ window.scrollTo(x, y);
36
+
37
+ // Trigger a callback, if any.
38
+ if (options.callback) {
39
+ options.callback();
40
+ }
41
+ };
42
+
43
+ /**
44
+ * Scrolls to a DOM element on the page.
45
+ *
46
+ * @param el
47
+ * The DOM element.
48
+ *
49
+ * @param options
50
+ * Object specifying various options.
51
+ *
52
+ * "callback" to trigger after scrolling.
53
+ */
54
+ SiteDiff.scrollToElement = function (el, options) {
55
+ options = options || {};
56
+ var callback = options.callback || function () {};
57
+
58
+ // See if the element exists.
59
+ var $el = $(el).first();
60
+ if ($el.length == 1) {
61
+ // Inject callback to focus on the element we scroll to.
62
+ options.x = 0;
63
+ options.y = $el.offset().top;
64
+ options.callback = function () {
65
+ $el.focus();
66
+ callback.call(el);
67
+ };
68
+ SiteDiff.scrollToPosition(options);
69
+ }
70
+ };
71
+
72
+ /**
73
+ * Initialize behaviors.
74
+ */
75
+ SiteDiff.init = function () {
76
+ // On the overview page.
77
+ switch ($(document.body).data('page')) {
78
+ case 'overview':
79
+ SiteDiff.initFilterForm();
80
+ break;
81
+
82
+ case 'diff':
83
+ SiteDiff.jumpToFirstDiff();
84
+ // TODO: Create a prev-next mechanism.
85
+ break;
86
+ }
87
+ };
88
+
89
+ /**
90
+ * Initializes report filters.
91
+ */
92
+ SiteDiff.initFilterForm = function () {
93
+ SiteDiff.initStatusFilter();
94
+ SiteDiff.initSearchFilter();
95
+ };
96
+
97
+ /**
98
+ * Initializes the "status" filter.
99
+ */
100
+ SiteDiff.initStatusFilter = function () {
101
+ $('.form-item--status input')
102
+ .on('change', function () {
103
+ // Get a list of applied filters.
104
+ var appliedFilters = $('.form-item--status input:checked')
105
+ .map(function () {
106
+ return this.getAttribute('value');
107
+ // applied.push(this.getAttribute('value'));
108
+ // console.log(applied);
109
+ });
110
+ // Show only matching results, hide the rest.
111
+ $('#sitediff-report')
112
+ .find('.sitediff-result')
113
+ .each(function () {
114
+ var $row = $(this);
115
+ var status = $row.data('status');
116
+ if (
117
+ // Row matches applied filters.
118
+ $.inArray(status, appliedFilters) > -1 ||
119
+ // No filters are applied.
120
+ appliedFilters.length === 0
121
+ ) {
122
+ $row.removeAttr('hidden');
123
+ }
124
+ else {
125
+ $row.attr('hidden', 'hidden');
126
+ }
127
+ });
128
+ });
129
+ };
130
+
131
+ /**
132
+ * Initializes the "search" filter.
133
+ */
134
+ SiteDiff.initSearchFilter = function () {
135
+ $('#input-search')
136
+ .on('change keyup', function () {
137
+ var keyword = $(this).val().toLowerCase();
138
+
139
+ // Filter the records.
140
+ // TODO: Trigger one event per 250ms.
141
+ $('#sitediff-report')
142
+ .find('.sitediff-result')
143
+ .each(function () {
144
+ var $row = $(this);
145
+ var path = $row.find('.path').text();
146
+
147
+ // If keyword matches, keep the row visible.
148
+ if (path.toLowerCase().indexOf(keyword) > -1) {
149
+ $row.attr('hidden', null);
150
+ }
151
+ else {
152
+ $row.attr('hidden', 'hidden');
153
+ }
154
+ });
155
+ });
156
+ };
157
+
158
+ /**
159
+ * Jumps to the first diff on the page.
160
+ */
161
+ SiteDiff.jumpToFirstDiff = function () {
162
+ // Get the first diff hunk.
163
+ var $diff = $('#diff-container')
164
+ .find('.del, .ins')
165
+ .first();
166
+ if ($diff.length === 0) {
167
+ return;
168
+ }
169
+
170
+ // Scroll the window to it!
171
+ setTimeout(function () {
172
+ SiteDiff.scrollToElement($diff[0]);
173
+ }, 250);
174
+ };
175
+
176
+ $(document).ready(SiteDiff.init);