From c146f6940a176142084b4fc3c610d13aca60d90e Mon Sep 17 00:00:00 2001 From: Thomas Citharel Date: Wed, 28 Sep 2016 10:30:18 +0200 Subject: [PATCH] Assets work * ES6 all the things ! * ESLint checks everything * CSS fixes (use stylelint) * Fix #2231 --- .eslintrc.json | 2 +- .gitignore | 4 + .stylelintrc | 3 + Gruntfile.js | 46 ++- .../static/themes/_global/js/bookmarklet.js | 6 +- .../static/themes/_global/js/restoreScroll.js | 25 -- .../static/themes/_global/js/tools.js | 50 ++++ .../static/themes/baggy/css/main.css | 13 +- .../static/themes/baggy/css/ratatouille.css | 4 +- .../static/themes/baggy/js/autoClose.js | 8 - .../themes/baggy/js/autoCompleteTags.js | 52 +--- .../static/themes/baggy/js/closeMessage.js | 19 -- app/Resources/static/themes/baggy/js/init.js | 277 +++++++++++++++--- .../static/themes/baggy/js/popupForm.js | 101 ------- .../static/themes/baggy/js/saveLink.js | 75 ----- .../static/themes/baggy/js/uiTools.js | 35 +++ .../static/themes/material/css/main.css | 33 ++- .../static/themes/material/css/print.css | 6 +- .../static/themes/material/js/init.js | 70 ++--- package.json | 9 +- .../themes/baggy/Entry/entries.html.twig | 4 +- .../views/themes/baggy/Entry/entry.html.twig | 18 -- .../themes/material/Entry/entries.html.twig | 2 +- 23 files changed, 445 insertions(+), 417 deletions(-) create mode 100644 .stylelintrc delete mode 100644 app/Resources/static/themes/_global/js/restoreScroll.js create mode 100644 app/Resources/static/themes/_global/js/tools.js delete mode 100644 app/Resources/static/themes/baggy/js/autoClose.js delete mode 100644 app/Resources/static/themes/baggy/js/closeMessage.js delete mode 100644 app/Resources/static/themes/baggy/js/popupForm.js delete mode 100755 app/Resources/static/themes/baggy/js/saveLink.js create mode 100644 app/Resources/static/themes/baggy/js/uiTools.js diff --git a/.eslintrc.json b/.eslintrc.json index 976a9eb5..d6279c64 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 fb51034e..9e793a54 100644 --- a/.gitignore +++ b/.gitignore @@ -49,3 +49,7 @@ app/Resources/static/lib/* /bin !/src/Wallabag/CoreBundle/Resources/public /src/Wallabag/CoreBundle/Resources/public/* + +# PHPStorm +.idea/ + diff --git a/.stylelintrc b/.stylelintrc new file mode 100644 index 00000000..40db42c6 --- /dev/null +++ b/.stylelintrc @@ -0,0 +1,3 @@ +{ + "extends": "stylelint-config-standard" +} diff --git a/Gruntfile.js b/Gruntfile.js index 8dc5b83b..92774081 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -41,27 +41,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 +56,27 @@ 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" + ], + browserifyOptions: { + browser: { + "jQuery": "./node_modules/jquery/dist/jquery.js", + "jquery.tinydot": "./nodes_modules/jquery.tinydot/src/jquery.tinydot.js" + } + } + } + }, uglify: { material: { @@ -199,7 +197,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 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 @@ -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 9c4d7e20..00000000 --- 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 00000000..ab30deb1 --- /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/main.css b/app/Resources/static/themes/baggy/css/main.css index 7ffaa12c..58f0eb82 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 { @@ -1071,7 +1068,7 @@ pre code { font-family: "Courier New", Courier, monospace; } -#filter-form { +#filters { position: fixed; width: 20%; height: 100%; @@ -1086,7 +1083,7 @@ pre code { min-width: 300px; } -#filter-form form .filter-group { +#filters form .filter-group { margin: 5px; } @@ -1125,9 +1122,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 +1136,7 @@ pre code { #article { width: 80%; } + .topPosF { right: 2.5em; } @@ -1147,6 +1147,7 @@ pre code { width: 100%; margin-left: 0; } + #display-mode { display: none; } @@ -1197,7 +1198,6 @@ pre code { height: auto; top: 0.5em; width: 75px; - height: 75px; margin-left: -37.5px; } @@ -1214,6 +1214,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 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 { 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 b0dafab2..00000000 --- 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 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 @@ -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 ae4b1791..00000000 --- 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 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 @@ -var $ = global.jquery = require('jquery'); +const $ = global.jquery = require('jquery'); require('jquery.cookie'); require('jquery-ui'); -var annotator = require('annotator'); +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,250 @@ $.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'), - }); + const x = JSON.parse($('#annotationroutes').html()); + app.include(annotator.storage.http, x); - var x = JSON.parse($('#annotationroutes').html()); - app.include(annotator.storage.http, x); + app.start().then(() => { + app.annotations.load({ entry: x.entryId }); + }); - app.start().then(function () { - app.annotations.load({ entry: x.entryId }); - }); + $(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); + }); - $(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); - }); + retrievePercent(x.entryId); + $(window).resize(() => { retrievePercent(x.entryId); + }); + } + + /** + * Close window after adding entry if popup + */ + const currentUrl = window.location.href; + if (currentUrl.match('&closewin=true')) { + window.close(); + } + + /** + * Tags autocomplete + */ + $('#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(); - $(window).resize(function () { - retrievePercent(x.entryId); - }); + //--------------------------------------------------------------------------- + // 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 95ba60ee..00000000 --- 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 5c720886..00000000 --- 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 00000000..900b2707 --- /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 65b708c7..1d14448f 100755 --- a/app/Resources/static/themes/material/css/main.css +++ b/app/Resources/static/themes/material/css/main.css @@ -174,7 +174,7 @@ div.pagination ul .next.disabled { footer.page-footer { margin-top: 10px; - padding-top: 0px; + padding-top: 0; } footer .row { @@ -257,8 +257,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%; } /* ========================================================================== @@ -355,8 +356,9 @@ main ul.row { display: block; } -.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 { @@ -528,30 +530,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; @@ -569,38 +579,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; @@ -646,7 +665,7 @@ main ul.row { } .icon-link::before { - content: "\e9cb"; + content: "\e9cb"; } footer [class^="icon-"], @@ -677,5 +696,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 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 @@ .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 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 @@ -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/package.json b/package.json index 39a10e9c..78970f8f 100644 --- a/package.json +++ b/package.json @@ -10,6 +10,8 @@ "dependencies": { "annotator": "git://github.com/wallabag/annotator.git#0f076c7d371ed25eb0793346f46982d90f2c4c85", "autoprefixer": "^6.3.6", + "babel-preset-es2015": "^6.14.0", + "babelify": "^7.3.0", "bower": "^1.7.7", "browserify": "^13.0.0", "browserify-shim": "^3.8.12", @@ -83,7 +85,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 1554cce4..8d841b4c 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 bec4b70f..be1e3647 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 806a4eef..1c5057dd 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 }}…

-