diff options
Diffstat (limited to 'app/Resources/static/themes/baggy/js')
-rwxr-xr-x | app/Resources/static/themes/baggy/js/autoCompleteTags.js | 8 | ||||
-rwxr-xr-x | app/Resources/static/themes/baggy/js/init.js | 314 | ||||
-rw-r--r-- | app/Resources/static/themes/baggy/js/uiTools.js | 35 |
3 files changed, 357 insertions, 0 deletions
diff --git a/app/Resources/static/themes/baggy/js/autoCompleteTags.js b/app/Resources/static/themes/baggy/js/autoCompleteTags.js new file mode 100755 index 00000000..f287ebfa --- /dev/null +++ b/app/Resources/static/themes/baggy/js/autoCompleteTags.js | |||
@@ -0,0 +1,8 @@ | |||
1 | function split(val) { | ||
2 | return val.split(/,\s*/); | ||
3 | } | ||
4 | function extractLast(term) { | ||
5 | return split(term).pop(); | ||
6 | } | ||
7 | |||
8 | export { split, extractLast }; | ||
diff --git a/app/Resources/static/themes/baggy/js/init.js b/app/Resources/static/themes/baggy/js/init.js new file mode 100755 index 00000000..dc11043a --- /dev/null +++ b/app/Resources/static/themes/baggy/js/init.js | |||
@@ -0,0 +1,314 @@ | |||
1 | import { savePercent, retrievePercent } from '../../_global/js/tools'; | ||
2 | import { toggleSaveLinkForm } from './uiTools'; | ||
3 | |||
4 | const $ = global.jquery = require('jquery'); | ||
5 | require('jquery.cookie'); | ||
6 | require('jquery-ui-browserify'); | ||
7 | const annotator = require('annotator'); | ||
8 | |||
9 | |||
10 | $.fn.ready(() => { | ||
11 | const $listmode = $('#listmode'); | ||
12 | const $listentries = $('#list-entries'); | ||
13 | |||
14 | /* ========================================================================== | ||
15 | Menu | ||
16 | ========================================================================== */ | ||
17 | |||
18 | $('#menu').click(() => { | ||
19 | $('#links').toggleClass('menu--open'); | ||
20 | const content = $('#content'); | ||
21 | if (content.hasClass('opacity03')) { | ||
22 | content.removeClass('opacity03'); | ||
23 | } | ||
24 | }); | ||
25 | |||
26 | /* ========================================================================== | ||
27 | List mode or Table Mode | ||
28 | ========================================================================== */ | ||
29 | |||
30 | $listmode.click(() => { | ||
31 | if ($.cookie('listmode') === 1) { | ||
32 | // Cookie | ||
33 | $.removeCookie('listmode'); | ||
34 | |||
35 | $listentries.removeClass('listmode'); | ||
36 | $listmode.removeClass('tablemode'); | ||
37 | $listmode.addClass('listmode'); | ||
38 | } else { | ||
39 | // Cookie | ||
40 | $.cookie('listmode', 1, { expires: 365 }); | ||
41 | |||
42 | $listentries.addClass('listmode'); | ||
43 | $listmode.removeClass('listmode'); | ||
44 | $listmode.addClass('tablemode'); | ||
45 | } | ||
46 | }); | ||
47 | |||
48 | /* ========================================================================== | ||
49 | Cookie listmode | ||
50 | ========================================================================== */ | ||
51 | |||
52 | if ($.cookie('listmode') === 1) { | ||
53 | $listentries.addClass('listmode'); | ||
54 | $listmode.removeClass('listmode'); | ||
55 | $listmode.addClass('tablemode'); | ||
56 | } | ||
57 | |||
58 | /* ========================================================================== | ||
59 | Add tag panel | ||
60 | ========================================================================== */ | ||
61 | |||
62 | |||
63 | $('#nav-btn-add-tag').on('click', () => { | ||
64 | $('.nav-panel-add-tag').toggle(100); | ||
65 | $('.nav-panel-menu').addClass('hidden'); | ||
66 | $('#tag_label').focus(); | ||
67 | return false; | ||
68 | }); | ||
69 | |||
70 | /** | ||
71 | * Filters & Export | ||
72 | */ | ||
73 | // no display if filters not available | ||
74 | if ($('div').is('#filters')) { | ||
75 | $('#button_filters').show(); | ||
76 | $('#clear_form_filters').on('click', () => { | ||
77 | $('#filters input').val(''); | ||
78 | $('#filters :checked').removeAttr('checked'); | ||
79 | return false; | ||
80 | }); | ||
81 | } | ||
82 | |||
83 | /* ========================================================================== | ||
84 | Annotations & Remember position | ||
85 | ========================================================================== */ | ||
86 | |||
87 | if ($('article').length) { | ||
88 | const app = new annotator.App(); | ||
89 | |||
90 | app.include(annotator.ui.main, { | ||
91 | element: document.querySelector('article'), | ||
92 | }); | ||
93 | |||
94 | const x = JSON.parse($('#annotationroutes').html()); | ||
95 | app.include(annotator.storage.http, x); | ||
96 | |||
97 | app.start().then(() => { | ||
98 | app.annotations.load({ entry: x.entryId }); | ||
99 | }); | ||
100 | |||
101 | $(window).scroll(() => { | ||
102 | const scrollTop = $(window).scrollTop(); | ||
103 | const docHeight = $(document).height(); | ||
104 | const scrollPercent = (scrollTop) / (docHeight); | ||
105 | const scrollPercentRounded = Math.round(scrollPercent * 100) / 100; | ||
106 | savePercent(x.entryId, scrollPercentRounded); | ||
107 | }); | ||
108 | |||
109 | retrievePercent(x.entryId); | ||
110 | |||
111 | $(window).resize(() => { | ||
112 | retrievePercent(x.entryId); | ||
113 | }); | ||
114 | } | ||
115 | |||
116 | /** | ||
117 | * Close window after adding entry if popup | ||
118 | */ | ||
119 | const currentUrl = window.location.href; | ||
120 | if (currentUrl.match('&closewin=true')) { | ||
121 | window.close(); | ||
122 | } | ||
123 | |||
124 | /** | ||
125 | * Tags autocomplete | ||
126 | */ | ||
127 | /** | ||
128 | * Not working on v2 | ||
129 | * | ||
130 | |||
131 | $('#value').bind('keydown', (event) => { | ||
132 | if (event.keyCode === $.ui.keyCode.TAB && $(this).data('ui-autocomplete').menu.active) { | ||
133 | event.preventDefault(); | ||
134 | } | ||
135 | }).autocomplete({ | ||
136 | source: function source(request, response) { | ||
137 | $.getJSON('./?view=tags', { | ||
138 | term: extractLast(request.term), | ||
139 | //id: $(':hidden#entry_id').val() | ||
140 | }, response); | ||
141 | }, | ||
142 | search: function search() { | ||
143 | // custom minLength | ||
144 | const term = extractLast(this.value); | ||
145 | return term.length >= 1; | ||
146 | }, | ||
147 | focus: function focus() { | ||
148 | // prevent value inserted on focus | ||
149 | return false; | ||
150 | }, | ||
151 | select: function select(event, ui) { | ||
152 | const terms = split(this.value); | ||
153 | // remove the current input | ||
154 | terms.pop(); | ||
155 | // add the selected item | ||
156 | terms.push(ui.item.value); | ||
157 | // add placeholder to get the comma-and-space at the end | ||
158 | terms.push(''); | ||
159 | this.value = terms.join(', '); | ||
160 | return false; | ||
161 | }, | ||
162 | }); | ||
163 | */ | ||
164 | |||
165 | //--------------------------------------------------------------------------- | ||
166 | // Close the message box when the user clicks the close icon | ||
167 | //--------------------------------------------------------------------------- | ||
168 | $('a.closeMessage').on('click', () => { | ||
169 | $(this).parents('div.messages').slideUp(300, () => { $(this).remove(); }); | ||
170 | return false; | ||
171 | }); | ||
172 | |||
173 | $('#search-form').hide(); | ||
174 | $('#bagit-form').hide(); | ||
175 | $('#filters').hide(); | ||
176 | $('#download-form').hide(); | ||
177 | |||
178 | //--------------------------------------------------------------------------- | ||
179 | // Toggle the 'Search' popup in the sidebar | ||
180 | //--------------------------------------------------------------------------- | ||
181 | function toggleSearch() { | ||
182 | $('#search-form').toggle(); | ||
183 | $('#search').toggleClass('current'); | ||
184 | $('#search').toggleClass('active-current'); | ||
185 | $('#search-arrow').toggleClass('arrow-down'); | ||
186 | if ($('#search').hasClass('current')) { | ||
187 | $('#content').addClass('opacity03'); | ||
188 | } else { | ||
189 | $('#content').removeClass('opacity03'); | ||
190 | } | ||
191 | } | ||
192 | |||
193 | //--------------------------------------------------------------------------- | ||
194 | // Toggle the 'Filter' popup on entries list | ||
195 | //--------------------------------------------------------------------------- | ||
196 | function toggleFilter() { | ||
197 | $('#filters').toggle(); | ||
198 | } | ||
199 | |||
200 | //--------------------------------------------------------------------------- | ||
201 | // Toggle the 'Download' popup on entries list | ||
202 | //--------------------------------------------------------------------------- | ||
203 | function toggleDownload() { | ||
204 | $('#download-form').toggle(); | ||
205 | } | ||
206 | |||
207 | //--------------------------------------------------------------------------- | ||
208 | // Toggle the 'Save a Link' popup in the sidebar | ||
209 | //--------------------------------------------------------------------------- | ||
210 | function toggleBagit() { | ||
211 | $('#bagit-form').toggle(); | ||
212 | $('#bagit').toggleClass('current'); | ||
213 | $('#bagit').toggleClass('active-current'); | ||
214 | $('#bagit-arrow').toggleClass('arrow-down'); | ||
215 | if ($('#bagit').hasClass('current')) { | ||
216 | $('#content').addClass('opacity03'); | ||
217 | } else { | ||
218 | $('#content').removeClass('opacity03'); | ||
219 | } | ||
220 | } | ||
221 | |||
222 | //--------------------------------------------------------------------------- | ||
223 | // Close all #links popups in the sidebar | ||
224 | //--------------------------------------------------------------------------- | ||
225 | function closePopups() { | ||
226 | $('#links .messages').hide(); | ||
227 | $('#links > li > a').removeClass('active-current'); | ||
228 | $('#links > li > a').removeClass('current'); | ||
229 | $('[id$=-arrow]').removeClass('arrow-down'); | ||
230 | $('#content').removeClass('opacity03'); | ||
231 | } | ||
232 | |||
233 | $('#search').click(() => { | ||
234 | closePopups(); | ||
235 | toggleSearch(); | ||
236 | $('#searchfield').focus(); | ||
237 | }); | ||
238 | |||
239 | $('.filter-btn').click(() => { | ||
240 | closePopups(); | ||
241 | toggleFilter(); | ||
242 | }); | ||
243 | |||
244 | $('.download-btn').click(() => { | ||
245 | closePopups(); | ||
246 | toggleDownload(); | ||
247 | }); | ||
248 | |||
249 | $('#bagit').click(() => { | ||
250 | closePopups(); | ||
251 | toggleBagit(); | ||
252 | $('#plainurl').focus(); | ||
253 | }); | ||
254 | |||
255 | $('#search-form-close').click(() => { | ||
256 | toggleSearch(); | ||
257 | }); | ||
258 | |||
259 | $('#filter-form-close').click(() => { | ||
260 | toggleFilter(); | ||
261 | }); | ||
262 | |||
263 | $('#download-form-close').click(() => { | ||
264 | toggleDownload(); | ||
265 | }); | ||
266 | |||
267 | $('#bagit-form-close').click(() => { | ||
268 | toggleBagit(); | ||
269 | }); | ||
270 | |||
271 | const $bagitFormForm = $('#bagit-form-form'); | ||
272 | |||
273 | /* ========================================================================== | ||
274 | bag it link and close button | ||
275 | ========================================================================== */ | ||
276 | |||
277 | // send 'bag it link' form request via ajax | ||
278 | $bagitFormForm.submit((event) => { | ||
279 | $('body').css('cursor', 'wait'); | ||
280 | $('#add-link-result').empty(); | ||
281 | |||
282 | $.ajax({ | ||
283 | type: $bagitFormForm.attr('method'), | ||
284 | url: $bagitFormForm.attr('action'), | ||
285 | data: $bagitFormForm.serialize(), | ||
286 | success: function success() { | ||
287 | $('#add-link-result').html('Done!'); | ||
288 | $('#plainurl').val(''); | ||
289 | $('#plainurl').blur(''); | ||
290 | $('body').css('cursor', 'auto'); | ||
291 | }, | ||
292 | error: function error() { | ||
293 | $('#add-link-result').html('Failed!'); | ||
294 | $('body').css('cursor', 'auto'); | ||
295 | }, | ||
296 | }); | ||
297 | |||
298 | event.preventDefault(); | ||
299 | }); | ||
300 | |||
301 | /* ========================================================================== | ||
302 | Process all links inside an article | ||
303 | ========================================================================== */ | ||
304 | |||
305 | $('article a[href^="http"]').after( | ||
306 | () => `<a href="${$(this).attr('href')}" class="add-to-wallabag-link-after" ` + | ||
307 | 'alt="add to wallabag" title="add to wallabag"></a>' | ||
308 | ); | ||
309 | |||
310 | $('.add-to-wallabag-link-after').click((event) => { | ||
311 | toggleSaveLinkForm($(this).attr('href'), event); | ||
312 | event.preventDefault(); | ||
313 | }); | ||
314 | }); | ||
diff --git a/app/Resources/static/themes/baggy/js/uiTools.js b/app/Resources/static/themes/baggy/js/uiTools.js new file mode 100644 index 00000000..900b2707 --- /dev/null +++ b/app/Resources/static/themes/baggy/js/uiTools.js | |||
@@ -0,0 +1,35 @@ | |||
1 | const $ = require('jquery'); | ||
2 | |||
3 | function toggleSaveLinkForm(url, event) { | ||
4 | $('#add-link-result').empty(); | ||
5 | |||
6 | const $bagit = $('#bagit'); | ||
7 | const $bagitForm = $('#bagit-form'); | ||
8 | |||
9 | $bagit.toggleClass('active-current'); | ||
10 | |||
11 | // only if bag-it link is not presented on page | ||
12 | if ($bagit.length === 0) { | ||
13 | if (event !== 'undefined' && event) { | ||
14 | $bagitForm.css({ position: 'absolute', top: event.pageY, left: event.pageX - 200 }); | ||
15 | } else { | ||
16 | $bagitForm.css({ position: 'relative', top: 'auto', left: 'auto' }); | ||
17 | } | ||
18 | } | ||
19 | |||
20 | const searchForm = $('#search-form'); | ||
21 | const plainUrl = $('#plainurl'); | ||
22 | if (searchForm.length !== 0) { | ||
23 | $('#search').removeClass('current'); | ||
24 | $('#search-arrow').removeClass('arrow-down'); | ||
25 | searchForm.hide(); | ||
26 | } | ||
27 | $bagitForm.toggle(); | ||
28 | $('#content').toggleClass('opacity03'); | ||
29 | if (url !== 'undefined' && url) { | ||
30 | plainUrl.val(url); | ||
31 | } | ||
32 | plainUrl.focus(); | ||
33 | } | ||
34 | |||
35 | export { toggleSaveLinkForm }; | ||