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