aboutsummaryrefslogtreecommitdiffhomepage
path: root/app/Resources/static/themes
diff options
context:
space:
mode:
authorNicolas LÅ“uillet <nicolas@loeuillet.org>2016-10-03 09:09:45 +0200
committerGitHub <noreply@github.com>2016-10-03 09:09:45 +0200
commitab809de18415a9ce3bbc95d3a0a1af6c50a41c4f (patch)
treebee406df7af4b6e024764e153d8844dfe69aeda1 /app/Resources/static/themes
parentdfbbf0e18ad585e318c2609e46963e4b9fd198ef (diff)
parent49f25d6ee820619a15851b12a33667d707e4edf7 (diff)
downloadwallabag-ab809de18415a9ce3bbc95d3a0a1af6c50a41c4f.tar.gz
wallabag-ab809de18415a9ce3bbc95d3a0a1af6c50a41c4f.tar.zst
wallabag-ab809de18415a9ce3bbc95d3a0a1af6c50a41c4f.zip
Merge pull request #2314 from wallabag/assets
Assets work
Diffstat (limited to 'app/Resources/static/themes')
-rw-r--r--app/Resources/static/themes/_global/js/bookmarklet.js6
-rw-r--r--app/Resources/static/themes/_global/js/restoreScroll.js25
-rw-r--r--app/Resources/static/themes/_global/js/tools.js50
-rwxr-xr-xapp/Resources/static/themes/baggy/css/font.css2
-rwxr-xr-xapp/Resources/static/themes/baggy/css/main.css20
-rw-r--r--app/Resources/static/themes/baggy/css/ratatouille.css4
-rw-r--r--app/Resources/static/themes/baggy/js/autoClose.js8
-rwxr-xr-xapp/Resources/static/themes/baggy/js/autoCompleteTags.js52
-rw-r--r--app/Resources/static/themes/baggy/js/closeMessage.js19
-rwxr-xr-xapp/Resources/static/themes/baggy/js/init.js284
-rw-r--r--app/Resources/static/themes/baggy/js/popupForm.js101
-rwxr-xr-xapp/Resources/static/themes/baggy/js/saveLink.js75
-rw-r--r--app/Resources/static/themes/baggy/js/uiTools.js35
-rwxr-xr-xapp/Resources/static/themes/material/css/main.css40
-rwxr-xr-xapp/Resources/static/themes/material/css/print.css6
-rwxr-xr-xapp/Resources/static/themes/material/js/init.js70
16 files changed, 414 insertions, 383 deletions
diff --git a/app/Resources/static/themes/_global/js/bookmarklet.js b/app/Resources/static/themes/_global/js/bookmarklet.js
index 2afdfc3c..5174ff47 100644
--- a/app/Resources/static/themes/_global/js/bookmarklet.js
+++ b/app/Resources/static/themes/_global/js/bookmarklet.js
@@ -1,2 +1,6 @@
1 1
2top["bookmarklet-url@wallabag.org"]=""+"<!DOCTYPE html>"+"<html>"+"<head>"+"<title>bag it!</title>"+'<link rel="icon" href="tpl/img/favicon.ico" />'+"</head>"+"<body>"+"<script>"+"window.onload=function(){"+"window.setTimeout(function(){"+"history.back();"+"},250);"+"};"+"</scr"+"ipt>"+"</body>"+"</html>" 2top['bookmarklet-url@wallabag.org'] =
3 '<!DOCTYPE html><html><head><title>bag it!</title>' +
4 '<link rel="icon" href="tpl/img/favicon.ico" />' +
5 '</head><body><script>window.onload=function(){window.setTimeout' +
6 '(function(){history.back();},250);};</script></body></html>';
diff --git a/app/Resources/static/themes/_global/js/restoreScroll.js b/app/Resources/static/themes/_global/js/restoreScroll.js
deleted file mode 100644
index 9c4d7e20..00000000
--- a/app/Resources/static/themes/_global/js/restoreScroll.js
+++ /dev/null
@@ -1,25 +0,0 @@
1function supportsLocalStorage() {
2 try {
3 return 'localStorage' in window && window.localStorage !== null;
4 } catch (e) {
5 return false;
6 }
7}
8
9function savePercent(id, percent) {
10 if (!supportsLocalStorage()) { return false; }
11 localStorage['wallabag.article.' + id + '.percent'] = percent;
12 return true;
13}
14
15function retrievePercent(id) {
16 if (!supportsLocalStorage()) { return false; }
17
18 var bheight = $(document).height();
19 var percent = localStorage['wallabag.article.' + id + '.percent'];
20 var scroll = bheight * percent;
21
22 $('html,body').animate({ scrollTop: scroll }, 'fast');
23
24 return true;
25}
diff --git a/app/Resources/static/themes/_global/js/tools.js b/app/Resources/static/themes/_global/js/tools.js
new file mode 100644
index 00000000..ab30deb1
--- /dev/null
+++ b/app/Resources/static/themes/_global/js/tools.js
@@ -0,0 +1,50 @@
1const $ = require('jquery');
2
3function supportsLocalStorage() {
4 try {
5 return 'localStorage' in window && window.localStorage !== null;
6 } catch (e) {
7 return false;
8 }
9}
10
11function savePercent(id, percent) {
12 if (!supportsLocalStorage()) { return false; }
13 localStorage[`wallabag.article.${id}.percent`] = percent;
14 return true;
15}
16
17function retrievePercent(id) {
18 if (!supportsLocalStorage()) { return false; }
19
20 const bheight = $(document).height();
21 const percent = localStorage[`wallabag.article.${id}.percent`];
22 const scroll = bheight * percent;
23
24 $('html,body').animate({ scrollTop: scroll }, 'fast');
25
26 return true;
27}
28
29function initFilters() {
30 // no display if filters not available
31 if ($('div').is('#filters')) {
32 $('#button_filters').show();
33 $('.button-collapse-right').sideNav({ edge: 'right' });
34 $('#clear_form_filters').on('click', () => {
35 $('#filters input').val('');
36 $('#filters :checked').removeAttr('checked');
37 return false;
38 });
39 }
40}
41
42function initExport() {
43 // no display if export not available
44 if ($('div').is('#export')) {
45 $('#button_export').show();
46 $('.button-collapse-right').sideNav({ edge: 'right' });
47 }
48}
49
50export { savePercent, retrievePercent, initFilters, initExport };
diff --git a/app/Resources/static/themes/baggy/css/font.css b/app/Resources/static/themes/baggy/css/font.css
index cae7904a..47edcb83 100755
--- a/app/Resources/static/themes/baggy/css/font.css
+++ b/app/Resources/static/themes/baggy/css/font.css
@@ -2,5 +2,5 @@
2 font-family: "PT Sans"; 2 font-family: "PT Sans";
3 font-style: normal; 3 font-style: normal;
4 font-weight: 700; 4 font-weight: 700;
5 src: local("PT Sans Bold"), local("PTSans-Bold"), url("../fonts/pt_sans/regular/PTS55F.woff") format("woff"); 5 src: local("PT Sans Bold"), local("PTSans-Bold"), url("../fonts/ptsansbold.woff") format("woff");
6} 6}
diff --git a/app/Resources/static/themes/baggy/css/main.css b/app/Resources/static/themes/baggy/css/main.css
index 7ffaa12c..eeedd277 100755
--- a/app/Resources/static/themes/baggy/css/main.css
+++ b/app/Resources/static/themes/baggy/css/main.css
@@ -481,9 +481,6 @@ footer a {
481 text-transform: none; 481 text-transform: none;
482 margin-bottom: 0; 482 margin-bottom: 0;
483 line-height: 1.2; 483 line-height: 1.2;
484 text-align: justify;
485 -moz-text-align-last: center;
486 text-align-last: center;
487} 484}
488 485
489.entry h2::after { 486.entry h2::after {
@@ -735,12 +732,7 @@ a.add-to-wallabag-link-after::after {
735 732
736@font-face { 733@font-face {
737 font-family: icomoon; 734 font-family: icomoon;
738 src: url("../fonts/icomoon.eot?-s0mcsx"); 735 src: url("../fonts/IcoMoon-Free.ttf");
739 src:
740 url("../fonts/icomoon.eot?#iefix-s0mcsx") format("embedded-opentype"),
741 url("../fonts/icomoon.woff?-s0mcsx") format("woff"),
742 url("../fonts/icomoon.ttf?-s0mcsx") format("truetype"),
743 url("../fonts/icomoon.svg?-s0mcsx#icomoon") format("svg");
744 font-weight: normal; 736 font-weight: normal;
745 font-style: normal; 737 font-style: normal;
746} 738}
@@ -1071,7 +1063,7 @@ pre code {
1071 font-family: "Courier New", Courier, monospace; 1063 font-family: "Courier New", Courier, monospace;
1072} 1064}
1073 1065
1074#filter-form { 1066#filters {
1075 position: fixed; 1067 position: fixed;
1076 width: 20%; 1068 width: 20%;
1077 height: 100%; 1069 height: 100%;
@@ -1086,7 +1078,7 @@ pre code {
1086 min-width: 300px; 1078 min-width: 300px;
1087} 1079}
1088 1080
1089#filter-form form .filter-group { 1081#filters form .filter-group {
1090 margin: 5px; 1082 margin: 5px;
1091} 1083}
1092 1084
@@ -1125,9 +1117,11 @@ pre code {
1125 .entry { 1117 .entry {
1126 width: 49%; 1118 width: 49%;
1127 } 1119 }
1120
1128 .entry:nth-child(3n+1) { 1121 .entry:nth-child(3n+1) {
1129 margin-left: 1.5%; 1122 margin-left: 1.5%;
1130 } 1123 }
1124
1131 .entry:nth-child(2n+1) { 1125 .entry:nth-child(2n+1) {
1132 margin-left: 0; 1126 margin-left: 0;
1133 } 1127 }
@@ -1137,6 +1131,7 @@ pre code {
1137 #article { 1131 #article {
1138 width: 80%; 1132 width: 80%;
1139 } 1133 }
1134
1140 .topPosF { 1135 .topPosF {
1141 right: 2.5em; 1136 right: 2.5em;
1142 } 1137 }
@@ -1147,6 +1142,7 @@ pre code {
1147 width: 100%; 1142 width: 100%;
1148 margin-left: 0; 1143 margin-left: 0;
1149 } 1144 }
1145
1150 #display-mode { 1146 #display-mode {
1151 display: none; 1147 display: none;
1152 } 1148 }
@@ -1197,7 +1193,6 @@ pre code {
1197 height: auto; 1193 height: auto;
1198 top: 0.5em; 1194 top: 0.5em;
1199 width: 75px; 1195 width: 75px;
1200 height: 75px;
1201 margin-left: -37.5px; 1196 margin-left: -37.5px;
1202 } 1197 }
1203 1198
@@ -1214,6 +1209,7 @@ pre code {
1214 background-color: #999; 1209 background-color: #999;
1215 font-size: 1.2em; 1210 font-size: 1.2em;
1216 } 1211 }
1212
1217 .desktopHide:hover, 1213 .desktopHide:hover,
1218 .desktopHide:focus { 1214 .desktopHide:focus {
1219 background-color: #fff; 1215 background-color: #fff;
diff --git a/app/Resources/static/themes/baggy/css/ratatouille.css b/app/Resources/static/themes/baggy/css/ratatouille.css
index b5aeb54e..a6167f34 100644
--- a/app/Resources/static/themes/baggy/css/ratatouille.css
+++ b/app/Resources/static/themes/baggy/css/ratatouille.css
@@ -63,7 +63,9 @@ pre {
63 max-width: 61.25em; /* 980px */ 63 max-width: 61.25em; /* 980px */
64} 64}
65 65
66table, img, figure { 66table,
67img,
68figure {
67 max-width: 100%; 69 max-width: 100%;
68 height: auto; 70 height: auto;
69} 71}
diff --git a/app/Resources/static/themes/baggy/js/autoClose.js b/app/Resources/static/themes/baggy/js/autoClose.js
deleted file mode 100644
index b0dafab2..00000000
--- a/app/Resources/static/themes/baggy/js/autoClose.js
+++ /dev/null
@@ -1,8 +0,0 @@
1var $ = global.jquery = require('jquery');
2
3$(document).ready(function () {
4 var currentUrl = window.location.href;
5 if (currentUrl.match('&closewin=true')) {
6 window.close();
7 }
8});
diff --git a/app/Resources/static/themes/baggy/js/autoCompleteTags.js b/app/Resources/static/themes/baggy/js/autoCompleteTags.js
index edd0a421..f287ebfa 100755
--- a/app/Resources/static/themes/baggy/js/autoCompleteTags.js
+++ b/app/Resources/static/themes/baggy/js/autoCompleteTags.js
@@ -1,46 +1,8 @@
1var $ = global.jquery = require('jquery'); 1function split(val) {
2 return val.split(/,\s*/);
3}
4function extractLast(term) {
5 return split(term).pop();
6}
2 7
3jQuery(function ($) { 8export { split, extractLast };
4 function split(val) {
5 return val.split(/,\s*/);
6 }
7 function extractLast(term) {
8 return split(term).pop();
9 }
10
11
12 $('#value').bind('keydown', function (event) {
13 if (event.keyCode === $.ui.keyCode.TAB && $(this).data('ui-autocomplete').menu.active) {
14 event.preventDefault();
15 }
16 }).autocomplete({
17 source: function (request, response) {
18 $.getJSON('./?view=tags', {
19 term: extractLast(request.term),
20 //id: $(':hidden#entry_id').val()
21 }, response);
22 },
23 search: function () {
24 // custom minLength
25 var term = extractLast(this.value);
26 if (term.length < 1) {
27 return false;
28 }
29 },
30 focus: function () {
31 // prevent value inserted on focus
32 return false;
33 },
34 select: function (event, ui) {
35 var terms = split(this.value);
36 // remove the current input
37 terms.pop();
38 // add the selected item
39 terms.push(ui.item.value);
40 // add placeholder to get the comma-and-space at the end
41 terms.push('');
42 this.value = terms.join(', ');
43 return false;
44 },
45 });
46});
diff --git a/app/Resources/static/themes/baggy/js/closeMessage.js b/app/Resources/static/themes/baggy/js/closeMessage.js
deleted file mode 100644
index ae4b1791..00000000
--- a/app/Resources/static/themes/baggy/js/closeMessage.js
+++ /dev/null
@@ -1,19 +0,0 @@
1var $ = global.jquery = require('jquery');
2
3$(function () {
4 //---------------------------------------------------------------------------
5 // Show the close icon when the user hover over a message
6 //---------------------------------------------------------------------------
7 // $('.messages').on('mouseenter', function(){
8 // $(this).find('a.closeMessage').stop(true, true).show();
9 // }).on('mouseleave', function(){
10 // $(this).find('a.closeMessage').stop(true, true).hide();
11 // });
12 //---------------------------------------------------------------------------
13 // Close the message box when the user clicks the close icon
14 //---------------------------------------------------------------------------
15 $('a.closeMessage').on('click', function () {
16 $(this).parents('div.messages').slideUp(300, function () { $(this).remove(); });
17 return false;
18 });
19});
diff --git a/app/Resources/static/themes/baggy/js/init.js b/app/Resources/static/themes/baggy/js/init.js
index d7d4b166..8da9a859 100755
--- a/app/Resources/static/themes/baggy/js/init.js
+++ b/app/Resources/static/themes/baggy/js/init.js
@@ -1,21 +1,25 @@
1var $ = global.jquery = require('jquery'); 1const $ = global.jquery = require('jquery');
2require('jquery.cookie'); 2require('jquery.cookie');
3require('jquery-ui'); 3require('jquery-ui-browserify');
4var annotator = require('annotator'); 4const annotator = require('annotator');
5import { savePercent, retrievePercent } from '../../_global/js/tools.js';
6import { split, extractLast } from './autoCompleteTags.js';
7import { 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,255 @@ $.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 /**
128 * Not working on v2
129 *
93 130
94 $(window).resize(function () { 131 $('#value').bind('keydown', (event) => {
95 retrievePercent(x.entryId); 132 if (event.keyCode === $.ui.keyCode.TAB && $(this).data('ui-autocomplete').menu.active) {
96 }); 133 event.preventDefault();
97 } 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 });
98}); 314});
diff --git a/app/Resources/static/themes/baggy/js/popupForm.js b/app/Resources/static/themes/baggy/js/popupForm.js
deleted file mode 100644
index 95ba60ee..00000000
--- a/app/Resources/static/themes/baggy/js/popupForm.js
+++ /dev/null
@@ -1,101 +0,0 @@
1var $ = global.jquery = require('jquery');
2
3$(document).ready(function () {
4 $('#search-form').hide();
5 $('#bagit-form').hide();
6 $('#filter-form').hide();
7 $('#download-form').hide();
8
9 //---------------------------------------------------------------------------
10 // Toggle the 'Search' popup in the sidebar
11 //---------------------------------------------------------------------------
12 function toggleSearch() {
13 $('#search-form').toggle();
14 $('#search').toggleClass('current');
15 $('#search').toggleClass('active-current');
16 $('#search-arrow').toggleClass('arrow-down');
17 if ($('#search').hasClass('current')) {
18 $('#content').addClass('opacity03');
19 } else {
20 $('#content').removeClass('opacity03');
21 }
22 }
23
24 //---------------------------------------------------------------------------
25 // Toggle the 'Filter' popup on entries list
26 //---------------------------------------------------------------------------
27 function toggleFilter() {
28 $('#filter-form').toggle();
29 }
30
31 //---------------------------------------------------------------------------
32 // Toggle the 'Download' popup on entries list
33 //---------------------------------------------------------------------------
34 function toggleDownload() {
35 $('#download-form').toggle();
36 }
37
38 //---------------------------------------------------------------------------
39 // Toggle the 'Save a Link' popup in the sidebar
40 //---------------------------------------------------------------------------
41 function toggleBagit() {
42 $('#bagit-form').toggle();
43 $('#bagit').toggleClass('current');
44 $('#bagit').toggleClass('active-current');
45 $('#bagit-arrow').toggleClass('arrow-down');
46 if ($('#bagit').hasClass('current')) {
47 $('#content').addClass('opacity03');
48 } else {
49 $('#content').removeClass('opacity03');
50 }
51 }
52
53 //---------------------------------------------------------------------------
54 // Close all #links popups in the sidebar
55 //---------------------------------------------------------------------------
56 function closePopups() {
57 $('#links .messages').hide();
58 $('#links > li > a').removeClass('active-current');
59 $('#links > li > a').removeClass('current');
60 $('[id$=-arrow]').removeClass('arrow-down');
61 $('#content').removeClass('opacity03');
62 }
63
64 $('#search').click(function () {
65 closePopups();
66 toggleSearch();
67 $('#searchfield').focus();
68 });
69
70 $('.filter-btn').click(function () {
71 closePopups();
72 toggleFilter();
73 });
74
75 $('.download-btn').click(function () {
76 closePopups();
77 toggleDownload();
78 });
79
80 $('#bagit').click(function () {
81 closePopups();
82 toggleBagit();
83 $('#plainurl').focus();
84 });
85
86 $('#search-form-close').click(function () {
87 toggleSearch();
88 });
89
90 $('#filter-form-close').click(function () {
91 toggleFilter();
92 });
93
94 $('#download-form-close').click(function () {
95 toggleDownload();
96 });
97
98 $('#bagit-form-close').click(function () {
99 toggleBagit();
100 });
101});
diff --git a/app/Resources/static/themes/baggy/js/saveLink.js b/app/Resources/static/themes/baggy/js/saveLink.js
deleted file mode 100755
index 5c720886..00000000
--- a/app/Resources/static/themes/baggy/js/saveLink.js
+++ /dev/null
@@ -1,75 +0,0 @@
1var $ = global.jquery = require('jquery');
2
3$.fn.ready(function () {
4 var $bagit = $('#bagit');
5 var $bagitForm = $('#bagit-form');
6 var $bagitFormForm = $('#bagit-form-form');
7
8 /* ==========================================================================
9 bag it link and close button
10 ========================================================================== */
11
12 function toggleSaveLinkForm(url, event) {
13 $('#add-link-result').empty();
14
15 $bagit.toggleClass('active-current');
16
17 // only if bag-it link is not presented on page
18 if ($bagit.length === 0) {
19 if (event !== 'undefined' && event) {
20 $bagitForm.css({ position: 'absolute', top: event.pageY, left: event.pageX - 200 });
21 } else {
22 $bagitForm.css({ position: 'relative', top: 'auto', left: 'auto' });
23 }
24 }
25
26 if ($('#search-form').length !== 0) {
27 $('#search').removeClass('current');
28 $('#search-arrow').removeClass('arrow-down');
29 $('#search-form').hide();
30 }
31 $bagitForm.toggle();
32 $('#content').toggleClass('opacity03');
33 if (url !== 'undefined' && url) {
34 $('#plainurl').val(url);
35 }
36 $('#plainurl').focus();
37 }
38
39 // send 'bag it link' form request via ajax
40 $bagitFormForm.submit(function (event) {
41 $('body').css('cursor', 'wait');
42 $('#add-link-result').empty();
43
44 $.ajax({
45 type: $bagitFormForm.attr('method'),
46 url: $bagitFormForm.attr('action'),
47 data: $bagitFormForm.serialize(),
48 success: function (data) {
49 $('#add-link-result').html('Done!');
50 $('#plainurl').val('');
51 $('#plainurl').blur('');
52 $('body').css('cursor', 'auto');
53 },
54 error: function (data) {
55 $('#add-link-result').html('Failed!');
56 $('body').css('cursor', 'auto');
57 },
58 });
59
60 event.preventDefault();
61 });
62
63 /* ==========================================================================
64 Process all links inside an article
65 ========================================================================== */
66
67 $('article a[href^="http"]').after(function () {
68 return ' <a href="' + $(this).attr('href') + '" class="add-to-wallabag-link-after" alt="add to wallabag" title="add to wallabag"></a> ';
69 });
70
71 $('.add-to-wallabag-link-after').click(function (event) {
72 toggleSaveLinkForm($(this).attr('href'), event);
73 event.preventDefault();
74 });
75});
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 @@
1const $ = require('jquery');
2
3function 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
35export { toggleSaveLinkForm };
diff --git a/app/Resources/static/themes/material/css/main.css b/app/Resources/static/themes/material/css/main.css
index 005cc302..00d7a869 100755
--- a/app/Resources/static/themes/material/css/main.css
+++ b/app/Resources/static/themes/material/css/main.css
@@ -19,12 +19,7 @@
19 19
20@font-face { 20@font-face {
21 font-family: icomoon; 21 font-family: icomoon;
22 src: url("../fonts/icomoon.eot"); 22 src: url("../fonts/IcoMoon-Free.ttf");
23 src:
24 url("../fonts/icomoon.eot#iefix") format("embedded-opentype"),
25 url("../fonts/icomoon.ttf") format("truetype"),
26 url("../fonts/icomoon.woff") format("woff"),
27 url("../fonts/icomoon.svg#icomoon") format("svg");
28 font-weight: normal; 23 font-weight: normal;
29 font-style: normal; 24 font-style: normal;
30} 25}
@@ -174,7 +169,7 @@ div.pagination ul .next.disabled {
174 169
175footer.page-footer { 170footer.page-footer {
176 margin-top: 10px; 171 margin-top: 10px;
177 padding-top: 0px; 172 padding-top: 0;
178} 173}
179 174
180footer .row { 175footer .row {
@@ -257,8 +252,9 @@ nav input {
257 display: none; 252 display: none;
258} 253}
259 254
260.input-field.nav-panel-add, .input-field.nav-panel-add form { 255.input-field.nav-panel-add,
261 height: 100%; 256.input-field.nav-panel-add form {
257 height: 100%;
262} 258}
263 259
264/* ========================================================================== 260/* ==========================================================================
@@ -354,8 +350,9 @@ main ul.row {
354 max-height: 64px; 350 max-height: 64px;
355} 351}
356 352
357.card .card-content i.right, .card .card-reveal i.right { 353.card .card-content i.right,
358 margin-left: 0; 354.card .card-reveal i.right {
355 margin-left: 0;
359} 356}
360 357
361.card .card-entry-labels { 358.card .card-entry-labels {
@@ -527,30 +524,38 @@ main ul.row {
527 footer { 524 footer {
528 padding-left: 0; 525 padding-left: 0;
529 } 526 }
527
530 nav, 528 nav,
531 main, 529 main,
532 footer { 530 footer {
533 padding-left: 0; 531 padding-left: 0;
534 } 532 }
533
535 .pagination { 534 .pagination {
536 width: auto; 535 width: auto;
537 } 536 }
537
538 .reader-mode { 538 .reader-mode {
539 width: 240px !important; 539 width: 240px !important;
540 } 540 }
541
541 .reader-mode span { 542 .reader-mode span {
542 opacity: 1; 543 opacity: 1;
543 } 544 }
545
544 .tabs { 546 .tabs {
545 display: inline-block; 547 display: inline-block;
546 height: auto; 548 height: auto;
547 } 549 }
550
548 .tab { 551 .tab {
549 min-width: 100%; 552 min-width: 100%;
550 } 553 }
554
551 .indicator { 555 .indicator {
552 display: none; 556 display: none;
553 } 557 }
558
554 .pagination li.prev, 559 .pagination li.prev,
555 .pagination li.next { 560 .pagination li.next {
556 width: auto; 561 width: auto;
@@ -568,38 +573,47 @@ main ul.row {
568 width: 25%; 573 width: 25%;
569 margin-left: 0; 574 margin-left: 0;
570 } 575 }
576
571 .row .col.l2 { 577 .row .col.l2 {
572 width: 33.33333%; 578 width: 33.33333%;
573 margin-left: 0; 579 margin-left: 0;
574 } 580 }
581
575 .row .col.l3 { 582 .row .col.l3 {
576 width: 41.66667%; 583 width: 41.66667%;
577 margin-left: 0; 584 margin-left: 0;
578 } 585 }
586
579 .row .col.l4 { 587 .row .col.l4 {
580 width: 50%; 588 width: 50%;
581 margin-left: 0; 589 margin-left: 0;
582 } 590 }
591
583 .row .col.l5 { 592 .row .col.l5 {
584 width: 58.33333%; 593 width: 58.33333%;
585 margin-left: 0; 594 margin-left: 0;
586 } 595 }
596
587 .row .col.l6 { 597 .row .col.l6 {
588 width: 66.66667%; 598 width: 66.66667%;
589 margin-left: 0; 599 margin-left: 0;
590 } 600 }
601
591 .row .col.l7 { 602 .row .col.l7 {
592 width: 75%; 603 width: 75%;
593 margin-left: 0; 604 margin-left: 0;
594 } 605 }
606
595 .row .col.l8 { 607 .row .col.l8 {
596 width: 83.33333%; 608 width: 83.33333%;
597 margin-left: 0; 609 margin-left: 0;
598 } 610 }
611
599 .row .col.l9 { 612 .row .col.l9 {
600 width: 91.66667%; 613 width: 91.66667%;
601 margin-left: 0; 614 margin-left: 0;
602 } 615 }
616
603 .row .col.l10 { 617 .row .col.l10 {
604 width: 100%; 618 width: 100%;
605 margin-left: 0; 619 margin-left: 0;
@@ -645,7 +659,7 @@ main ul.row {
645} 659}
646 660
647.icon-link::before { 661.icon-link::before {
648 content: "\e9cb"; 662 content: "\e9cb";
649} 663}
650 664
651footer [class^="icon-"], 665footer [class^="icon-"],
@@ -676,5 +690,5 @@ div.settings div.file-field div {
676} 690}
677 691
678.input-field label.active { 692.input-field label.active {
679 font-size: 1rem; 693 font-size: 1rem;
680} 694}
diff --git a/app/Resources/static/themes/material/css/print.css b/app/Resources/static/themes/material/css/print.css
index 1eb96735..98505aae 100755
--- a/app/Resources/static/themes/material/css/print.css
+++ b/app/Resources/static/themes/material/css/print.css
@@ -28,10 +28,10 @@
28 .messages, 28 .messages,
29 .entry + .results, 29 .entry + .results,
30 #slide-out, 30 #slide-out,
31 .progress, .hide-on-large-only, 31 .progress,
32 .hide-on-large-only,
32 #article > aside, 33 #article > aside,
33 #article .mbm a 34 #article .mbm a {
34 {
35 display: none !important; 35 display: none !important;
36 } 36 }
37 37
diff --git a/app/Resources/static/themes/material/js/init.js b/app/Resources/static/themes/material/js/init.js
index d6a87941..18f7b40a 100755
--- a/app/Resources/static/themes/material/js/init.js
+++ b/app/Resources/static/themes/material/js/init.js
@@ -1,29 +1,10 @@
1var $ = require('jquery'); 1const $ = require('jquery');
2require('materialize'); 2global.jQuery = $;
3var annotator = require('annotator'); 3require('materialize'); // eslint-disable-line
4const annotator = require('annotator');
5import { savePercent, retrievePercent, initFilters, initExport } from '../../_global/js/tools.js';
4 6
5function initFilters() { 7$(document).ready(() => {
6 // no display if filters not aviable
7 if ($('div').is('#filters')) {
8 $('#button_filters').show();
9 $('.button-collapse-right').sideNav({ edge: 'right' });
10 $('#clear_form_filters').on('click', function () {
11 $('#filters input').val('');
12 $('#filters :checked').removeAttr('checked');
13 return false;
14 });
15 }
16}
17
18function initExport() {
19 // no display if export not aviable
20 if ($('div').is('#export')) {
21 $('#button_export').show();
22 $('.button-collapse-right').sideNav({ edge: 'right' });
23 }
24}
25
26$(document).ready(function () {
27 // sideNav 8 // sideNav
28 $('.button-collapse').sideNav(); 9 $('.button-collapse').sideNav();
29 $('select').material_select(); 10 $('select').material_select();
@@ -40,13 +21,13 @@ $(document).ready(function () {
40 initFilters(); 21 initFilters();
41 initExport(); 22 initExport();
42 23
43 $('#nav-btn-add-tag').on('click', function () { 24 $('#nav-btn-add-tag').on('click', () => {
44 $('.nav-panel-add-tag').toggle(100); 25 $('.nav-panel-add-tag').toggle(100);
45 $('.nav-panel-menu').addClass('hidden'); 26 $('.nav-panel-menu').addClass('hidden');
46 $('#tag_label').focus(); 27 $('#tag_label').focus();
47 return false; 28 return false;
48 }); 29 });
49 $('#nav-btn-add').on('click', function () { 30 $('#nav-btn-add').on('click', () => {
50 $('.nav-panel-buttom').hide(100); 31 $('.nav-panel-buttom').hide(100);
51 $('.nav-panel-add').show(100); 32 $('.nav-panel-add').show(100);
52 $('.nav-panels .action').hide(100); 33 $('.nav-panels .action').hide(100);
@@ -55,7 +36,7 @@ $(document).ready(function () {
55 $('#entry_url').focus(); 36 $('#entry_url').focus();
56 return false; 37 return false;
57 }); 38 });
58 $('#nav-btn-search').on('click', function () { 39 $('#nav-btn-search').on('click', () => {
59 $('.nav-panel-buttom').hide(100); 40 $('.nav-panel-buttom').hide(100);
60 $('.nav-panel-search').show(100); 41 $('.nav-panel-search').show(100);
61 $('.nav-panels .action').hide(100); 42 $('.nav-panels .action').hide(100);
@@ -64,7 +45,7 @@ $(document).ready(function () {
64 $('#searchfield').focus(); 45 $('#searchfield').focus();
65 return false; 46 return false;
66 }); 47 });
67 $('.close').on('click', function () { 48 $('.close').on('click', () => {
68 $('.nav-panel-add').hide(100); 49 $('.nav-panel-add').hide(100);
69 $('.nav-panel-search').hide(100); 50 $('.nav-panel-search').hide(100);
70 $('.nav-panel-buttom').show(100); 51 $('.nav-panel-buttom').show(100);
@@ -73,12 +54,12 @@ $(document).ready(function () {
73 $('.nav-panels').css('background', 'transparent'); 54 $('.nav-panels').css('background', 'transparent');
74 return false; 55 return false;
75 }); 56 });
76 $(window).scroll(function () { 57 $(window).scroll(() => {
77 var s = $(window).scrollTop(); 58 const s = $(window).scrollTop();
78 var d = $(document).height(); 59 const d = $(document).height();
79 var c = $(window).height(); 60 const c = $(window).height();
80 var scrollPercent = (s / (d - c)) * 100; 61 const scrollPercent = (s / (d - c)) * 100;
81 $('.progress .determinate').css('width', scrollPercent + '%'); 62 $('.progress .determinate').css('width', `${scrollPercent}%`);
82 }); 63 });
83 64
84/* ========================================================================== 65/* ==========================================================================
@@ -86,9 +67,8 @@ $(document).ready(function () {
86 ========================================================================== */ 67 ========================================================================== */
87 68
88 if ($('article').length) { 69 if ($('article').length) {
89 var app = new annotator.App(); 70 const app = new annotator.App();
90 var x = JSON.parse($('#annotationroutes').html()); 71 const x = JSON.parse($('#annotationroutes').html());
91
92 72
93 app.include(annotator.ui.main, { 73 app.include(annotator.ui.main, {
94 element: document.querySelector('article'), 74 element: document.querySelector('article'),
@@ -96,21 +76,21 @@ $(document).ready(function () {
96 76
97 app.include(annotator.storage.http, x); 77 app.include(annotator.storage.http, x);
98 78
99 app.start().then(function () { 79 app.start().then(() => {
100 app.annotations.load({ entry: x.entryId }); 80 app.annotations.load({ entry: x.entryId });
101 }); 81 });
102 82
103 $(window).scroll(function (e) { 83 $(window).scroll(() => {
104 var scrollTop = $(window).scrollTop(); 84 const scrollTop = $(window).scrollTop();
105 var docHeight = $(document).height(); 85 const docHeight = $(document).height();
106 var scrollPercent = (scrollTop) / (docHeight); 86 const scrollPercent = (scrollTop) / (docHeight);
107 var scrollPercentRounded = Math.round(scrollPercent * 100) / 100; 87 const scrollPercentRounded = Math.round(scrollPercent * 100) / 100;
108 savePercent(x.entryId, scrollPercentRounded); 88 savePercent(x.entryId, scrollPercentRounded);
109 }); 89 });
110 90
111 retrievePercent(x.entryId); 91 retrievePercent(x.entryId);
112 92
113 $(window).resize(function () { 93 $(window).resize(() => {
114 retrievePercent(x.entryId); 94 retrievePercent(x.entryId);
115 }); 95 });
116 } 96 }