diff --git a/.bowerrc b/.bowerrc deleted file mode 100644 index e01636872..000000000 --- a/.bowerrc +++ /dev/null @@ -1,4 +0,0 @@ -{ - "directory" : "app/Resources/static/lib", - "json" : "bower.json" -} diff --git a/.eslintrc.json b/.eslintrc.json index 976a9eb59..d6279c641 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -1,4 +1,4 @@ { "extends": "airbnb", - "installedESLint": true, + "parser": "babel-eslint" } diff --git a/.gitignore b/.gitignore index fb51034e2..3b2dc462f 100644 --- a/.gitignore +++ b/.gitignore @@ -48,4 +48,4 @@ composer.lock app/Resources/static/lib/* /bin !/src/Wallabag/CoreBundle/Resources/public -/src/Wallabag/CoreBundle/Resources/public/* +/src/Wallabag/CoreBundle/Resources/public/* \ No newline at end of file diff --git a/.stylelintrc b/.stylelintrc new file mode 100644 index 000000000..40db42c66 --- /dev/null +++ b/.stylelintrc @@ -0,0 +1,3 @@ +{ + "extends": "stylelint-config-standard" +} diff --git a/Gruntfile.js b/Gruntfile.js index 8dc5b83bd..86612dc4b 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -4,6 +4,7 @@ module.exports = function (grunt) { grunt.initConfig({ appDir: 'app/Resources/static', buildDir: 'web/bundles/wallabagcore', + modulesDir: 'node_modules', postcss: { material: { @@ -41,27 +42,6 @@ module.exports = function (grunt) { options: { separator: ';', }, - jsMaterial: { - src: [ - '<%= appDir %>/themes/material/js/init.js', - '<%= appDir %>/themes/_global/js/restoreScroll.js', - 'node_modules/jquery.tinydot/src/jquery.tinydot.js', - ], - dest: '<%= buildDir %>/material.js', - }, - jsBaggy: { - src: [ - '<%= appDir %>/themes/baggy/js/init.js', - '<%= appDir %>/themes/_global/js/restoreScroll.js', - '<%= appDir %>/themes/baggy/js/autoClose.js', - '<%= appDir %>/themes/baggy/js/autoCompleteTags.js', - '<%= appDir %>/themes/baggy/js/closeMessage.js', - '<%= appDir %>/themes/baggy/js/popupForm.js', - // Save link is no more used for now - // '<%= appDir %>/themes/baggy/js/saveLink.js', - ], - dest: '<%= buildDir %>/baggy.js', - }, cssMaterial: { src: [ 'node_modules/materialize-css/bin/materialize.css', @@ -77,8 +57,37 @@ module.exports = function (grunt) { }, }, browserify: { - '<%= buildDir %>/material.browser.js': ['<%= buildDir %>/material.js'], - '<%= buildDir %>/baggy.browser.js': ['<%= buildDir %>/baggy.js'], + dist: { + files: { + '<%= buildDir %>/material.browser.js': ['<%= appDir %>/themes/material/js/init.js'], + '<%= buildDir %>/baggy.browser.js': ['<%= appDir %>/themes/baggy/js/init.js'] + } + }, + options: { + sourceType: "module", + transform: [ + ["babelify", { + presets: ["es2015"] + }], ["browserify-shim", { + "jquery": { + "exports": "$" + }, + "materialize": "materialize", + "jquery-ui": { + "depends": "jquery", + "exports": null + } + }] + ], + browserifyOptions: { + browser: { + "jQuery": "./node_modules/jquery/dist/jquery.js", + "jquery.tinydot": "./node_modules/jquery.tinydot/src/jquery.tinydot.js", + "jquery.ui": "./node_modules/jquery-ui-browserify/dist/jquery-ui.js" + } + } + } + }, uglify: { material: { @@ -103,13 +112,13 @@ module.exports = function (grunt) { copy: { pickerjs: { expand: true, - cwd: 'node_modules/pickadate/lib', + cwd: '<%= modulesDir %>/pickadate/lib', src: 'picker.js', dest: '<%= buildDir %>', }, annotator: { expand: true, - cwd: 'node_modules/annotator/pkg', + cwd: '<%= modulesDir %>/annotator/pkg', src: 'annotator.min.js', dest: '<%= buildDir %>/themes/_global/js/', }, @@ -120,14 +129,21 @@ module.exports = function (grunt) { { expand: true, overwrite: true, - cwd: '<%= appDir %>/lib/icomoon-bower/', - src: 'fonts', - dest: '<%= buildDir %>/themes/baggy/', + cwd: '<%= modulesDir %>/icomoon-free-npm/Font', + src: 'IcoMoon-Free.ttf', + dest: '<%= buildDir %>/themes/baggy/fonts/', }, { expand: true, overwrite: true, - cwd: '<%= appDir %>/lib/bower-pt-sans/fonts', + cwd: '<%= modulesDir %>/ptsans-npm-webfont/fonts', + src: '*', + dest: '<%= buildDir %>/themes/baggy/fonts/', + }, + { + expand: true, + overwrite: true, + cwd: '<%= modulesDir %>/material-design-icons-iconfont/dist/fonts/', src: '*', dest: '<%= buildDir %>/themes/baggy/fonts/', }, @@ -138,28 +154,28 @@ module.exports = function (grunt) { { expand: true, overwrite: true, - cwd: '<%= appDir %>/lib/icomoon-bower/', - src: 'fonts', - dest: '<%= buildDir %>/themes/material/', + cwd: '<%= modulesDir %>/icomoon-free-npm/Font', + src: 'IcoMoon-Free.ttf', + dest: '<%= buildDir %>/themes/material/fonts', }, { expand: true, overwrite: true, - cwd: 'node_modules/materialize-css/', + cwd: '<%= modulesDir %>/materialize-css/', src: 'font', dest: '<%= buildDir %>/themes/material', }, { expand: true, overwrite: true, - cwd: '<%= appDir %>/lib/roboto-fontface/fonts/', + cwd: '<%= modulesDir %>/roboto-fontface/fonts/Roboto', src: '*', - dest: '<%= buildDir %>/themes/material/fonts/roboto/', + dest: '<%= buildDir %>/themes/material/fonts/', }, { expand: true, overwrite: true, - cwd: '<%= appDir %>/lib/material-design-icons-iconfont/dist/fonts/', + cwd: '<%= modulesDir %>/material-design-icons-iconfont/dist/fonts/', src: '*', dest: '<%= buildDir %>/themes/material/fonts/', }, @@ -199,7 +215,7 @@ module.exports = function (grunt) { grunt.registerTask( 'js', 'Build and install js files', - ['clean:js', 'copy:pickerjs', 'concat:jsMaterial', 'concat:jsBaggy', 'browserify', 'uglify'] + ['clean:js', 'copy:pickerjs', 'browserify', 'uglify'] ); grunt.registerTask( diff --git a/app/Resources/static/themes/_global/js/bookmarklet.js b/app/Resources/static/themes/_global/js/bookmarklet.js index 2afdfc3cb..5174ff472 100644 --- a/app/Resources/static/themes/_global/js/bookmarklet.js +++ b/app/Resources/static/themes/_global/js/bookmarklet.js @@ -1,2 +1,6 @@ -top["bookmarklet-url@wallabag.org"]=""+""+""+""+"bag it!"+''+""+""+"'; 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 9c4d7e20b..000000000 --- a/app/Resources/static/themes/_global/js/restoreScroll.js +++ /dev/null @@ -1,25 +0,0 @@ -function supportsLocalStorage() { - try { - return 'localStorage' in window && window.localStorage !== null; - } catch (e) { - return false; - } -} - -function savePercent(id, percent) { - if (!supportsLocalStorage()) { return false; } - localStorage['wallabag.article.' + id + '.percent'] = percent; - return true; -} - -function retrievePercent(id) { - if (!supportsLocalStorage()) { return false; } - - var bheight = $(document).height(); - var percent = localStorage['wallabag.article.' + id + '.percent']; - var scroll = bheight * percent; - - $('html,body').animate({ scrollTop: scroll }, 'fast'); - - return true; -} 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 000000000..ab30deb11 --- /dev/null +++ b/app/Resources/static/themes/_global/js/tools.js @@ -0,0 +1,50 @@ +const $ = require('jquery'); + +function supportsLocalStorage() { + try { + return 'localStorage' in window && window.localStorage !== null; + } catch (e) { + return false; + } +} + +function savePercent(id, percent) { + if (!supportsLocalStorage()) { return false; } + localStorage[`wallabag.article.${id}.percent`] = percent; + return true; +} + +function retrievePercent(id) { + if (!supportsLocalStorage()) { return false; } + + const bheight = $(document).height(); + const percent = localStorage[`wallabag.article.${id}.percent`]; + const scroll = bheight * percent; + + $('html,body').animate({ scrollTop: scroll }, 'fast'); + + return true; +} + +function initFilters() { + // no display if filters not available + if ($('div').is('#filters')) { + $('#button_filters').show(); + $('.button-collapse-right').sideNav({ edge: 'right' }); + $('#clear_form_filters').on('click', () => { + $('#filters input').val(''); + $('#filters :checked').removeAttr('checked'); + return false; + }); + } +} + +function initExport() { + // no display if export not available + if ($('div').is('#export')) { + $('#button_export').show(); + $('.button-collapse-right').sideNav({ edge: 'right' }); + } +} + +export { 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 cae7904a5..47edcb838 100755 --- a/app/Resources/static/themes/baggy/css/font.css +++ b/app/Resources/static/themes/baggy/css/font.css @@ -2,5 +2,5 @@ font-family: "PT Sans"; font-style: normal; font-weight: 700; - src: local("PT Sans Bold"), local("PTSans-Bold"), url("../fonts/pt_sans/regular/PTS55F.woff") format("woff"); + src: local("PT Sans Bold"), local("PTSans-Bold"), url("../fonts/ptsansbold.woff") format("woff"); } diff --git a/app/Resources/static/themes/baggy/css/main.css b/app/Resources/static/themes/baggy/css/main.css index 7ffaa12ce..eeedd2774 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 { text-transform: none; margin-bottom: 0; line-height: 1.2; - text-align: justify; - -moz-text-align-last: center; - text-align-last: center; } .entry h2::after { @@ -735,12 +732,7 @@ a.add-to-wallabag-link-after::after { @font-face { font-family: icomoon; - src: url("../fonts/icomoon.eot?-s0mcsx"); - src: - url("../fonts/icomoon.eot?#iefix-s0mcsx") format("embedded-opentype"), - url("../fonts/icomoon.woff?-s0mcsx") format("woff"), - url("../fonts/icomoon.ttf?-s0mcsx") format("truetype"), - url("../fonts/icomoon.svg?-s0mcsx#icomoon") format("svg"); + src: url("../fonts/IcoMoon-Free.ttf"); font-weight: normal; font-style: normal; } @@ -1071,7 +1063,7 @@ pre code { font-family: "Courier New", Courier, monospace; } -#filter-form { +#filters { position: fixed; width: 20%; height: 100%; @@ -1086,7 +1078,7 @@ pre code { min-width: 300px; } -#filter-form form .filter-group { +#filters form .filter-group { margin: 5px; } @@ -1125,9 +1117,11 @@ pre code { .entry { width: 49%; } + .entry:nth-child(3n+1) { margin-left: 1.5%; } + .entry:nth-child(2n+1) { margin-left: 0; } @@ -1137,6 +1131,7 @@ pre code { #article { width: 80%; } + .topPosF { right: 2.5em; } @@ -1147,6 +1142,7 @@ pre code { width: 100%; margin-left: 0; } + #display-mode { display: none; } @@ -1197,7 +1193,6 @@ pre code { height: auto; top: 0.5em; width: 75px; - height: 75px; margin-left: -37.5px; } @@ -1214,6 +1209,7 @@ pre code { background-color: #999; font-size: 1.2em; } + .desktopHide:hover, .desktopHide:focus { background-color: #fff; diff --git a/app/Resources/static/themes/baggy/css/ratatouille.css b/app/Resources/static/themes/baggy/css/ratatouille.css index b5aeb54e4..a6167f344 100644 --- a/app/Resources/static/themes/baggy/css/ratatouille.css +++ b/app/Resources/static/themes/baggy/css/ratatouille.css @@ -63,7 +63,9 @@ pre { max-width: 61.25em; /* 980px */ } -table, img, figure { +table, +img, +figure { max-width: 100%; height: auto; } 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 b0dafab21..000000000 --- a/app/Resources/static/themes/baggy/js/autoClose.js +++ /dev/null @@ -1,8 +0,0 @@ -var $ = global.jquery = require('jquery'); - -$(document).ready(function () { - var currentUrl = window.location.href; - if (currentUrl.match('&closewin=true')) { - window.close(); - } -}); diff --git a/app/Resources/static/themes/baggy/js/autoCompleteTags.js b/app/Resources/static/themes/baggy/js/autoCompleteTags.js index edd0a421e..f287ebfa9 100755 --- a/app/Resources/static/themes/baggy/js/autoCompleteTags.js +++ b/app/Resources/static/themes/baggy/js/autoCompleteTags.js @@ -1,46 +1,8 @@ -var $ = global.jquery = require('jquery'); +function split(val) { + return val.split(/,\s*/); +} +function extractLast(term) { + return split(term).pop(); +} -jQuery(function ($) { - function split(val) { - return val.split(/,\s*/); - } - function extractLast(term) { - return split(term).pop(); - } - - - $('#value').bind('keydown', function (event) { - if (event.keyCode === $.ui.keyCode.TAB && $(this).data('ui-autocomplete').menu.active) { - event.preventDefault(); - } - }).autocomplete({ - source: function (request, response) { - $.getJSON('./?view=tags', { - term: extractLast(request.term), - //id: $(':hidden#entry_id').val() - }, response); - }, - search: function () { - // custom minLength - var term = extractLast(this.value); - if (term.length < 1) { - return false; - } - }, - focus: function () { - // prevent value inserted on focus - return false; - }, - select: function (event, ui) { - var terms = split(this.value); - // remove the current input - terms.pop(); - // add the selected item - terms.push(ui.item.value); - // add placeholder to get the comma-and-space at the end - terms.push(''); - this.value = terms.join(', '); - return false; - }, - }); -}); +export { split, extractLast }; 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 ae4b17912..000000000 --- a/app/Resources/static/themes/baggy/js/closeMessage.js +++ /dev/null @@ -1,19 +0,0 @@ -var $ = global.jquery = require('jquery'); - -$(function () { - //--------------------------------------------------------------------------- - // Show the close icon when the user hover over a message - //--------------------------------------------------------------------------- - // $('.messages').on('mouseenter', function(){ - // $(this).find('a.closeMessage').stop(true, true).show(); - // }).on('mouseleave', function(){ - // $(this).find('a.closeMessage').stop(true, true).hide(); - // }); - //--------------------------------------------------------------------------- - // Close the message box when the user clicks the close icon - //--------------------------------------------------------------------------- - $('a.closeMessage').on('click', function () { - $(this).parents('div.messages').slideUp(300, function () { $(this).remove(); }); - return false; - }); -}); diff --git a/app/Resources/static/themes/baggy/js/init.js b/app/Resources/static/themes/baggy/js/init.js index d7d4b1661..8da9a859b 100755 --- a/app/Resources/static/themes/baggy/js/init.js +++ b/app/Resources/static/themes/baggy/js/init.js @@ -1,21 +1,25 @@ -var $ = global.jquery = require('jquery'); +const $ = global.jquery = require('jquery'); require('jquery.cookie'); -require('jquery-ui'); -var annotator = require('annotator'); +require('jquery-ui-browserify'); +const annotator = require('annotator'); +import { savePercent, retrievePercent } from '../../_global/js/tools.js'; +import { split, extractLast } from './autoCompleteTags.js'; +import { toggleSaveLinkForm } from './uiTools.js'; -$.fn.ready(function () { - var $listmode = $('#listmode'); - var $listentries = $('#list-entries'); +$.fn.ready(() => { + const $listmode = $('#listmode'); + const $listentries = $('#list-entries'); /* ========================================================================== Menu ========================================================================== */ - $('#menu').click(function () { + $('#menu').click(() => { $('#links').toggleClass('menu--open'); - if ($('#content').hasClass('opacity03')) { - $('#content').removeClass('opacity03'); + const content = $('#content'); + if (content.hasClass('opacity03')) { + content.removeClass('opacity03'); } }); @@ -23,8 +27,8 @@ $.fn.ready(function () { List mode or Table Mode ========================================================================== */ - $listmode.click(function () { - if (jquery.cookie('listmode') === 1) { + $listmode.click(() => { + if ($.cookie('listmode') === 1) { // Cookie $.removeCookie('listmode'); @@ -33,7 +37,7 @@ $.fn.ready(function () { $listmode.addClass('listmode'); } else { // Cookie - jquery.cookie('listmode', 1, { expires: 365 }); + $.cookie('listmode', 1, { expires: 365 }); $listentries.addClass('listmode'); $listmode.removeClass('listmode'); @@ -45,7 +49,7 @@ $.fn.ready(function () { Cookie listmode ========================================================================== */ - if (jquery.cookie('listmode') === 1) { + if ($.cookie('listmode') === 1) { $listentries.addClass('listmode'); $listmode.removeClass('listmode'); $listmode.addClass('tablemode'); @@ -56,43 +60,255 @@ $.fn.ready(function () { ========================================================================== */ - $('#nav-btn-add-tag').on('click', function () { + $('#nav-btn-add-tag').on('click', () => { $('.nav-panel-add-tag').toggle(100); $('.nav-panel-menu').addClass('hidden'); $('#tag_label').focus(); return false; }); + /** + * Filters & Export + */ + // no display if filters not available + if ($('div').is('#filters')) { + $('#button_filters').show(); + $('#clear_form_filters').on('click', () => { + $('#filters input').val(''); + $('#filters :checked').removeAttr('checked'); + return false; + }); + } + /* ========================================================================== Annotations & Remember position ========================================================================== */ - if ($('article').length) { - var app = new annotator.App(); + if ($('article').length) { + const app = new annotator.App(); - app.include(annotator.ui.main, { - element: document.querySelector('article'), - }); + app.include(annotator.ui.main, { + element: document.querySelector('article'), + }); - var x = JSON.parse($('#annotationroutes').html()); - app.include(annotator.storage.http, x); + const x = JSON.parse($('#annotationroutes').html()); + app.include(annotator.storage.http, x); - app.start().then(function () { - app.annotations.load({ entry: x.entryId }); - }); + app.start().then(() => { + app.annotations.load({ entry: x.entryId }); + }); - $(window).scroll(function (e) { - var scrollTop = $(window).scrollTop(); - var docHeight = $(document).height(); - var scrollPercent = (scrollTop) / (docHeight); - var scrollPercentRounded = Math.round(scrollPercent * 100) / 100; - savePercent(x.entryId, scrollPercentRounded); - }); + $(window).scroll(() => { + const scrollTop = $(window).scrollTop(); + const docHeight = $(document).height(); + const scrollPercent = (scrollTop) / (docHeight); + const scrollPercentRounded = Math.round(scrollPercent * 100) / 100; + savePercent(x.entryId, scrollPercentRounded); + }); + retrievePercent(x.entryId); + + $(window).resize(() => { retrievePercent(x.entryId); + }); + } - $(window).resize(function () { - retrievePercent(x.entryId); - }); + /** + * Close window after adding entry if popup + */ + const currentUrl = window.location.href; + if (currentUrl.match('&closewin=true')) { + window.close(); + } + + /** + * Tags autocomplete + */ + /** + * Not working on v2 + * + + $('#value').bind('keydown', (event) => { + if (event.keyCode === $.ui.keyCode.TAB && $(this).data('ui-autocomplete').menu.active) { + event.preventDefault(); } + }).autocomplete({ + source: function source(request, response) { + $.getJSON('./?view=tags', { + term: extractLast(request.term), + //id: $(':hidden#entry_id').val() + }, response); + }, + search: function search() { + // custom minLength + const term = extractLast(this.value); + return term.length >= 1; + }, + focus: function focus() { + // prevent value inserted on focus + return false; + }, + select: function select(event, ui) { + const terms = split(this.value); + // remove the current input + terms.pop(); + // add the selected item + terms.push(ui.item.value); + // add placeholder to get the comma-and-space at the end + terms.push(''); + this.value = terms.join(', '); + return false; + }, + }); + */ + + //--------------------------------------------------------------------------- + // Close the message box when the user clicks the close icon + //--------------------------------------------------------------------------- + $('a.closeMessage').on('click', () => { + $(this).parents('div.messages').slideUp(300, () => { $(this).remove(); }); + return false; + }); + + $('#search-form').hide(); + $('#bagit-form').hide(); + $('#filters').hide(); + $('#download-form').hide(); + + //--------------------------------------------------------------------------- + // Toggle the 'Search' popup in the sidebar + //--------------------------------------------------------------------------- + function toggleSearch() { + $('#search-form').toggle(); + $('#search').toggleClass('current'); + $('#search').toggleClass('active-current'); + $('#search-arrow').toggleClass('arrow-down'); + if ($('#search').hasClass('current')) { + $('#content').addClass('opacity03'); + } else { + $('#content').removeClass('opacity03'); + } + } + + //--------------------------------------------------------------------------- + // Toggle the 'Filter' popup on entries list + //--------------------------------------------------------------------------- + function toggleFilter() { + $('#filters').toggle(); + } + + //--------------------------------------------------------------------------- + // Toggle the 'Download' popup on entries list + //--------------------------------------------------------------------------- + function toggleDownload() { + $('#download-form').toggle(); + } + + //--------------------------------------------------------------------------- + // Toggle the 'Save a Link' popup in the sidebar + //--------------------------------------------------------------------------- + function toggleBagit() { + $('#bagit-form').toggle(); + $('#bagit').toggleClass('current'); + $('#bagit').toggleClass('active-current'); + $('#bagit-arrow').toggleClass('arrow-down'); + if ($('#bagit').hasClass('current')) { + $('#content').addClass('opacity03'); + } else { + $('#content').removeClass('opacity03'); + } + } + + //--------------------------------------------------------------------------- + // Close all #links popups in the sidebar + //--------------------------------------------------------------------------- + function closePopups() { + $('#links .messages').hide(); + $('#links > li > a').removeClass('active-current'); + $('#links > li > a').removeClass('current'); + $('[id$=-arrow]').removeClass('arrow-down'); + $('#content').removeClass('opacity03'); + } + + $('#search').click(() => { + closePopups(); + toggleSearch(); + $('#searchfield').focus(); + }); + + $('.filter-btn').click(() => { + closePopups(); + toggleFilter(); + }); + + $('.download-btn').click(() => { + closePopups(); + toggleDownload(); + }); + + $('#bagit').click(() => { + closePopups(); + toggleBagit(); + $('#plainurl').focus(); + }); + + $('#search-form-close').click(() => { + toggleSearch(); + }); + + $('#filter-form-close').click(() => { + toggleFilter(); + }); + + $('#download-form-close').click(() => { + toggleDownload(); + }); + + $('#bagit-form-close').click(() => { + toggleBagit(); + }); + + const $bagitFormForm = $('#bagit-form-form'); + + /* ========================================================================== + bag it link and close button + ========================================================================== */ + + // send 'bag it link' form request via ajax + $bagitFormForm.submit((event) => { + $('body').css('cursor', 'wait'); + $('#add-link-result').empty(); + + $.ajax({ + type: $bagitFormForm.attr('method'), + url: $bagitFormForm.attr('action'), + data: $bagitFormForm.serialize(), + success: function success() { + $('#add-link-result').html('Done!'); + $('#plainurl').val(''); + $('#plainurl').blur(''); + $('body').css('cursor', 'auto'); + }, + error: function error() { + $('#add-link-result').html('Failed!'); + $('body').css('cursor', 'auto'); + }, + }); + + event.preventDefault(); + }); + + /* ========================================================================== + Process all links inside an article + ========================================================================== */ + + $('article a[href^="http"]').after( + () => `' + ); + + $('.add-to-wallabag-link-after').click((event) => { + toggleSaveLinkForm($(this).attr('href'), event); + event.preventDefault(); + }); }); 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 95ba60ee5..000000000 --- a/app/Resources/static/themes/baggy/js/popupForm.js +++ /dev/null @@ -1,101 +0,0 @@ -var $ = global.jquery = require('jquery'); - -$(document).ready(function () { - $('#search-form').hide(); - $('#bagit-form').hide(); - $('#filter-form').hide(); - $('#download-form').hide(); - - //--------------------------------------------------------------------------- - // Toggle the 'Search' popup in the sidebar - //--------------------------------------------------------------------------- - function toggleSearch() { - $('#search-form').toggle(); - $('#search').toggleClass('current'); - $('#search').toggleClass('active-current'); - $('#search-arrow').toggleClass('arrow-down'); - if ($('#search').hasClass('current')) { - $('#content').addClass('opacity03'); - } else { - $('#content').removeClass('opacity03'); - } - } - - //--------------------------------------------------------------------------- - // Toggle the 'Filter' popup on entries list - //--------------------------------------------------------------------------- - function toggleFilter() { - $('#filter-form').toggle(); - } - - //--------------------------------------------------------------------------- - // Toggle the 'Download' popup on entries list - //--------------------------------------------------------------------------- - function toggleDownload() { - $('#download-form').toggle(); - } - - //--------------------------------------------------------------------------- - // Toggle the 'Save a Link' popup in the sidebar - //--------------------------------------------------------------------------- - function toggleBagit() { - $('#bagit-form').toggle(); - $('#bagit').toggleClass('current'); - $('#bagit').toggleClass('active-current'); - $('#bagit-arrow').toggleClass('arrow-down'); - if ($('#bagit').hasClass('current')) { - $('#content').addClass('opacity03'); - } else { - $('#content').removeClass('opacity03'); - } - } - - //--------------------------------------------------------------------------- - // Close all #links popups in the sidebar - //--------------------------------------------------------------------------- - function closePopups() { - $('#links .messages').hide(); - $('#links > li > a').removeClass('active-current'); - $('#links > li > a').removeClass('current'); - $('[id$=-arrow]').removeClass('arrow-down'); - $('#content').removeClass('opacity03'); - } - - $('#search').click(function () { - closePopups(); - toggleSearch(); - $('#searchfield').focus(); - }); - - $('.filter-btn').click(function () { - closePopups(); - toggleFilter(); - }); - - $('.download-btn').click(function () { - closePopups(); - toggleDownload(); - }); - - $('#bagit').click(function () { - closePopups(); - toggleBagit(); - $('#plainurl').focus(); - }); - - $('#search-form-close').click(function () { - toggleSearch(); - }); - - $('#filter-form-close').click(function () { - toggleFilter(); - }); - - $('#download-form-close').click(function () { - toggleDownload(); - }); - - $('#bagit-form-close').click(function () { - toggleBagit(); - }); -}); 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 5c7208862..000000000 --- a/app/Resources/static/themes/baggy/js/saveLink.js +++ /dev/null @@ -1,75 +0,0 @@ -var $ = global.jquery = require('jquery'); - -$.fn.ready(function () { - var $bagit = $('#bagit'); - var $bagitForm = $('#bagit-form'); - var $bagitFormForm = $('#bagit-form-form'); - - /* ========================================================================== - bag it link and close button - ========================================================================== */ - - function toggleSaveLinkForm(url, event) { - $('#add-link-result').empty(); - - $bagit.toggleClass('active-current'); - - // only if bag-it link is not presented on page - if ($bagit.length === 0) { - if (event !== 'undefined' && event) { - $bagitForm.css({ position: 'absolute', top: event.pageY, left: event.pageX - 200 }); - } else { - $bagitForm.css({ position: 'relative', top: 'auto', left: 'auto' }); - } - } - - if ($('#search-form').length !== 0) { - $('#search').removeClass('current'); - $('#search-arrow').removeClass('arrow-down'); - $('#search-form').hide(); - } - $bagitForm.toggle(); - $('#content').toggleClass('opacity03'); - if (url !== 'undefined' && url) { - $('#plainurl').val(url); - } - $('#plainurl').focus(); - } - - // send 'bag it link' form request via ajax - $bagitFormForm.submit(function (event) { - $('body').css('cursor', 'wait'); - $('#add-link-result').empty(); - - $.ajax({ - type: $bagitFormForm.attr('method'), - url: $bagitFormForm.attr('action'), - data: $bagitFormForm.serialize(), - success: function (data) { - $('#add-link-result').html('Done!'); - $('#plainurl').val(''); - $('#plainurl').blur(''); - $('body').css('cursor', 'auto'); - }, - error: function (data) { - $('#add-link-result').html('Failed!'); - $('body').css('cursor', 'auto'); - }, - }); - - event.preventDefault(); - }); - - /* ========================================================================== - Process all links inside an article - ========================================================================== */ - - $('article a[href^="http"]').after(function () { - return ' '; - }); - - $('.add-to-wallabag-link-after').click(function (event) { - toggleSaveLinkForm($(this).attr('href'), event); - event.preventDefault(); - }); -}); 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 000000000..900b27071 --- /dev/null +++ b/app/Resources/static/themes/baggy/js/uiTools.js @@ -0,0 +1,35 @@ +const $ = require('jquery'); + +function toggleSaveLinkForm(url, event) { + $('#add-link-result').empty(); + + const $bagit = $('#bagit'); + const $bagitForm = $('#bagit-form'); + + $bagit.toggleClass('active-current'); + + // only if bag-it link is not presented on page + if ($bagit.length === 0) { + if (event !== 'undefined' && event) { + $bagitForm.css({ position: 'absolute', top: event.pageY, left: event.pageX - 200 }); + } else { + $bagitForm.css({ position: 'relative', top: 'auto', left: 'auto' }); + } + } + + const searchForm = $('#search-form'); + const plainUrl = $('#plainurl'); + if (searchForm.length !== 0) { + $('#search').removeClass('current'); + $('#search-arrow').removeClass('arrow-down'); + searchForm.hide(); + } + $bagitForm.toggle(); + $('#content').toggleClass('opacity03'); + if (url !== 'undefined' && url) { + plainUrl.val(url); + } + plainUrl.focus(); +} + +export { toggleSaveLinkForm }; diff --git a/app/Resources/static/themes/material/css/main.css b/app/Resources/static/themes/material/css/main.css index 005cc3020..00d7a8699 100755 --- a/app/Resources/static/themes/material/css/main.css +++ b/app/Resources/static/themes/material/css/main.css @@ -19,12 +19,7 @@ @font-face { font-family: icomoon; - src: url("../fonts/icomoon.eot"); - src: - url("../fonts/icomoon.eot#iefix") format("embedded-opentype"), - url("../fonts/icomoon.ttf") format("truetype"), - url("../fonts/icomoon.woff") format("woff"), - url("../fonts/icomoon.svg#icomoon") format("svg"); + src: url("../fonts/IcoMoon-Free.ttf"); font-weight: normal; font-style: normal; } @@ -174,7 +169,7 @@ div.pagination ul .next.disabled { footer.page-footer { margin-top: 10px; - padding-top: 0px; + padding-top: 0; } footer .row { @@ -257,8 +252,9 @@ nav input { display: none; } -.input-field.nav-panel-add, .input-field.nav-panel-add form { - height: 100%; +.input-field.nav-panel-add, +.input-field.nav-panel-add form { + height: 100%; } /* ========================================================================== @@ -354,8 +350,9 @@ main ul.row { max-height: 64px; } -.card .card-content i.right, .card .card-reveal i.right { - margin-left: 0; +.card .card-content i.right, +.card .card-reveal i.right { + margin-left: 0; } .card .card-entry-labels { @@ -527,30 +524,38 @@ main ul.row { footer { padding-left: 0; } + nav, main, footer { padding-left: 0; } + .pagination { width: auto; } + .reader-mode { width: 240px !important; } + .reader-mode span { opacity: 1; } + .tabs { display: inline-block; height: auto; } + .tab { min-width: 100%; } + .indicator { display: none; } + .pagination li.prev, .pagination li.next { width: auto; @@ -568,38 +573,47 @@ main ul.row { width: 25%; margin-left: 0; } + .row .col.l2 { width: 33.33333%; margin-left: 0; } + .row .col.l3 { width: 41.66667%; margin-left: 0; } + .row .col.l4 { width: 50%; margin-left: 0; } + .row .col.l5 { width: 58.33333%; margin-left: 0; } + .row .col.l6 { width: 66.66667%; margin-left: 0; } + .row .col.l7 { width: 75%; margin-left: 0; } + .row .col.l8 { width: 83.33333%; margin-left: 0; } + .row .col.l9 { width: 91.66667%; margin-left: 0; } + .row .col.l10 { width: 100%; margin-left: 0; @@ -645,7 +659,7 @@ main ul.row { } .icon-link::before { - content: "\e9cb"; + content: "\e9cb"; } footer [class^="icon-"], @@ -676,5 +690,5 @@ div.settings div.file-field div { } .input-field label.active { - font-size: 1rem; + font-size: 1rem; } diff --git a/app/Resources/static/themes/material/css/print.css b/app/Resources/static/themes/material/css/print.css index 1eb96735a..98505aae0 100755 --- a/app/Resources/static/themes/material/css/print.css +++ b/app/Resources/static/themes/material/css/print.css @@ -28,10 +28,10 @@ .messages, .entry + .results, #slide-out, - .progress, .hide-on-large-only, + .progress, + .hide-on-large-only, #article > aside, - #article .mbm a - { + #article .mbm a { display: none !important; } diff --git a/app/Resources/static/themes/material/js/init.js b/app/Resources/static/themes/material/js/init.js index d6a87941e..18f7b40af 100755 --- a/app/Resources/static/themes/material/js/init.js +++ b/app/Resources/static/themes/material/js/init.js @@ -1,29 +1,10 @@ -var $ = require('jquery'); -require('materialize'); -var annotator = require('annotator'); +const $ = require('jquery'); +global.jQuery = $; +require('materialize'); // eslint-disable-line +const annotator = require('annotator'); +import { savePercent, retrievePercent, initFilters, initExport } from '../../_global/js/tools.js'; -function initFilters() { - // no display if filters not aviable - if ($('div').is('#filters')) { - $('#button_filters').show(); - $('.button-collapse-right').sideNav({ edge: 'right' }); - $('#clear_form_filters').on('click', function () { - $('#filters input').val(''); - $('#filters :checked').removeAttr('checked'); - return false; - }); - } -} - -function initExport() { - // no display if export not aviable - if ($('div').is('#export')) { - $('#button_export').show(); - $('.button-collapse-right').sideNav({ edge: 'right' }); - } -} - -$(document).ready(function () { +$(document).ready(() => { // sideNav $('.button-collapse').sideNav(); $('select').material_select(); @@ -40,13 +21,13 @@ $(document).ready(function () { initFilters(); initExport(); - $('#nav-btn-add-tag').on('click', function () { + $('#nav-btn-add-tag').on('click', () => { $('.nav-panel-add-tag').toggle(100); $('.nav-panel-menu').addClass('hidden'); $('#tag_label').focus(); return false; }); - $('#nav-btn-add').on('click', function () { + $('#nav-btn-add').on('click', () => { $('.nav-panel-buttom').hide(100); $('.nav-panel-add').show(100); $('.nav-panels .action').hide(100); @@ -55,7 +36,7 @@ $(document).ready(function () { $('#entry_url').focus(); return false; }); - $('#nav-btn-search').on('click', function () { + $('#nav-btn-search').on('click', () => { $('.nav-panel-buttom').hide(100); $('.nav-panel-search').show(100); $('.nav-panels .action').hide(100); @@ -64,7 +45,7 @@ $(document).ready(function () { $('#searchfield').focus(); return false; }); - $('.close').on('click', function () { + $('.close').on('click', () => { $('.nav-panel-add').hide(100); $('.nav-panel-search').hide(100); $('.nav-panel-buttom').show(100); @@ -73,12 +54,12 @@ $(document).ready(function () { $('.nav-panels').css('background', 'transparent'); return false; }); - $(window).scroll(function () { - var s = $(window).scrollTop(); - var d = $(document).height(); - var c = $(window).height(); - var scrollPercent = (s / (d - c)) * 100; - $('.progress .determinate').css('width', scrollPercent + '%'); + $(window).scroll(() => { + const s = $(window).scrollTop(); + const d = $(document).height(); + const c = $(window).height(); + const scrollPercent = (s / (d - c)) * 100; + $('.progress .determinate').css('width', `${scrollPercent}%`); }); /* ========================================================================== @@ -86,9 +67,8 @@ $(document).ready(function () { ========================================================================== */ if ($('article').length) { - var app = new annotator.App(); - var x = JSON.parse($('#annotationroutes').html()); - + const app = new annotator.App(); + const x = JSON.parse($('#annotationroutes').html()); app.include(annotator.ui.main, { element: document.querySelector('article'), @@ -96,21 +76,21 @@ $(document).ready(function () { app.include(annotator.storage.http, x); - app.start().then(function () { + app.start().then(() => { app.annotations.load({ entry: x.entryId }); }); - $(window).scroll(function (e) { - var scrollTop = $(window).scrollTop(); - var docHeight = $(document).height(); - var scrollPercent = (scrollTop) / (docHeight); - var scrollPercentRounded = Math.round(scrollPercent * 100) / 100; + $(window).scroll(() => { + const scrollTop = $(window).scrollTop(); + const docHeight = $(document).height(); + const scrollPercent = (scrollTop) / (docHeight); + const scrollPercentRounded = Math.round(scrollPercent * 100) / 100; savePercent(x.entryId, scrollPercentRounded); }); retrievePercent(x.entryId); - $(window).resize(function () { + $(window).resize(() => { retrievePercent(x.entryId); }); } diff --git a/bower.json b/bower.json deleted file mode 100644 index f2d2bd26e..000000000 --- a/bower.json +++ /dev/null @@ -1,39 +0,0 @@ -{ - "name": "wallabag", - "version": "2.0.0-beta.1", - "homepage": "https://github.com/wallabag/wallabag", - "authors": [ - { - "name": "Nicolas Lœuillet", - "email": "nicolas@loeuillet.org", - "homepage": "http://www.cdetc.fr", - "role": "Developer" - }, - { - "name": "Thomas Citharel", - "homepage": "http://tcit.fr", - "role": "Developer" - }, - { - "name": "Jérémy Benoist", - "homepage": "http://www.j0k3r.net", - "role": "Developer" - } - ], - "description": "wallabag is a self hostable application for saving web pages", - "license": "MIT", - "main": "bower.json", - "ignore": [ - "**/.*", - "node_modules", - "bower_components", - "test", - "tests" - ], - "dependencies": { - "icomoon-bower": "^0.1.0", - "bower-pt-sans": "pt-sans#*", - "roboto-fontface": "^0.4.5", - "material-design-icons-iconfont": "^2.0.4" - } -} diff --git a/install.sh b/install.sh index a486e8a5b..29b343b29 100755 --- a/install.sh +++ b/install.sh @@ -5,12 +5,9 @@ if [[ $ASSETS == 'build' ]]; then composer install --no-interaction --no-progress --prefer-dist -o chmod ugo+x vendor/mouf/nodejs-installer/bin/local/npm - echo "Downloading javascript librairies through npm..." + echo "Downloading librairies through npm..." vendor/mouf/nodejs-installer/bin/local/npm install - echo "Downloading fonts librairies through bower..." - node_modules/bower/bin/bower install - echo "Concat, minify and installing assets..." node_modules/grunt/bin/grunt else diff --git a/install_dev.sh b/install_dev.sh index 81f871daf..61a4f6fd4 100755 --- a/install_dev.sh +++ b/install_dev.sh @@ -3,12 +3,9 @@ echo "Installing PHP dependencies (including dev) through Composer..." composer install -echo "Downloading javascript librairies through npm..." +echo "Downloading librairies through npm..." npm install -echo "Downloading fonts librairies through bower..." -bower install - echo "Concat, minify and installing assets..." grunt diff --git a/package.json b/package.json index 39a10e9c9..21664f37e 100644 --- a/package.json +++ b/package.json @@ -10,7 +10,8 @@ "dependencies": { "annotator": "git://github.com/wallabag/annotator.git#0f076c7d371ed25eb0793346f46982d90f2c4c85", "autoprefixer": "^6.3.6", - "bower": "^1.7.7", + "babel-preset-es2015": "^6.14.0", + "babelify": "^7.3.0", "browserify": "^13.0.0", "browserify-shim": "^3.8.12", "cssnano": "^3.5.2", @@ -25,17 +26,21 @@ "grunt-contrib-uglify": "^1.0.0", "grunt-postcss": "^0.8.0", "hammerjs": "^2.0.6", - "jquery": "^2.2.1", - "jquery-ui": "^1.10.5", + "icomoon-free-npm": "0.0.0", + "jquery": "^2.2.4", + "jquery-ui-browserify": "^1.11.0-pre-seelio", "jquery.cookie": "^1.4.1", "jquery.tinydot": "^0.2.1", "load-grunt-tasks": "^3.4.1", + "material-design-icons-iconfont": "^3.0.0", "materialize-css": "0.97.5", "npm": "^3.8.3", "pickadate": "^3.5.6", "pixrem": "^3.0.0", "postcss-cssnext": "^2.5.1", "prismjs": "^1.4.1", + "ptsans-npm-webfont": "0.0.4", + "roboto-fontface": "^0.6.0", "through": "^2.3.8" }, "engines": { @@ -47,9 +52,14 @@ "materialize": "./node_modules/materialize-css/bin/materialize.js" }, "browserify-shim": { - "jquery": "$", - "jQuery": "jQuery", - "materialize": "materialize" + "jquery": { + "exports": "$" + }, + "materialize": "materialize", + "jquery-ui": { + "depends": "jquery", + "exports": null + } }, "browserify": { "transform": [ @@ -83,7 +93,10 @@ "url": "https://github.com/wallabag/wallabag/issues" }, "devDependencies": { - "eslint": "^2.11.1", - "eslint-config-airbnb": "^9.0.1" + "babel-eslint": "^6.1.2", + "eslint": "^2.13.1", + "eslint-config-airbnb": "^9.0.1", + "stylelint": "^7.3.1", + "stylelint-config-standard": "^13.0.2" } } diff --git a/src/Wallabag/CoreBundle/Resources/views/themes/baggy/Entry/entries.html.twig b/src/Wallabag/CoreBundle/Resources/views/themes/baggy/Entry/entries.html.twig index ffc5bec65..1c0430e8a 100644 --- a/src/Wallabag/CoreBundle/Resources/views/themes/baggy/Entry/entries.html.twig +++ b/src/Wallabag/CoreBundle/Resources/views/themes/baggy/Entry/entries.html.twig @@ -67,7 +67,7 @@ {% if form is not null %} - + {% endif %} {% endblock %} diff --git a/src/Wallabag/CoreBundle/Resources/views/themes/baggy/Entry/entry.html.twig b/src/Wallabag/CoreBundle/Resources/views/themes/baggy/Entry/entry.html.twig index bec4b70fb..be1e36476 100644 --- a/src/Wallabag/CoreBundle/Resources/views/themes/baggy/Entry/entry.html.twig +++ b/src/Wallabag/CoreBundle/Resources/views/themes/baggy/Entry/entry.html.twig @@ -82,22 +82,4 @@ "entryId": "{{ entry.id }}" } - - {% endblock %} diff --git a/src/Wallabag/CoreBundle/Resources/views/themes/material/Entry/entries.html.twig b/src/Wallabag/CoreBundle/Resources/views/themes/material/Entry/entries.html.twig index e889dea8c..01fde953e 100644 --- a/src/Wallabag/CoreBundle/Resources/views/themes/material/Entry/entries.html.twig +++ b/src/Wallabag/CoreBundle/Resources/views/themes/material/Entry/entries.html.twig @@ -66,7 +66,7 @@

{{ entry.content|striptags|slice(0, 300)|raw }}…

-