mirrors/wallabag
1
0
Fork 0
mirror of https://github.com/wallabag/wallabag.git synced 2024-11-25 18:41:05 +00:00
Code Issues Projects Releases Wiki Activity

Assets work

Browse source 
* ES6 all the things !

* ESLint checks everything

* CSS fixes (use stylelint)

* Fix #2231
This commit is contained in:
Thomas Citharel 2016-09-28 10:30:18 +02:00
parent 55345331c4
commit c146f6940a
No known key found for this signature in database
GPG key ID: 5780691F5FE48FB5
23 changed files with 445 additions and 417 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
.eslintrc.json
View file

@ -1,4 +1,4 @@
{ {
"extends": "airbnb", "extends": "airbnb",
"installedESLint": true, "parser": "babel-eslint"
} }

4
.gitignore vendored
View file

@ -49,3 +49,7 @@ app/Resources/static/lib/*
/bin /bin
!/src/Wallabag/CoreBundle/Resources/public !/src/Wallabag/CoreBundle/Resources/public
/src/Wallabag/CoreBundle/Resources/public/* /src/Wallabag/CoreBundle/Resources/public/*
# PHPStorm
.idea/

3
.stylelintrc Normal file
View file

@ -0,0 +1,3 @@
{
"extends": "stylelint-config-standard"
}

46
Gruntfile.js
View file

@ -41,27 +41,6 @@ module.exports = function (grunt) {
options: { options: {
separator: ';', 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: { cssMaterial: {
src: [ src: [
'node_modules/materialize-css/bin/materialize.css', 'node_modules/materialize-css/bin/materialize.css',
@ -77,8 +56,27 @@ module.exports = function (grunt) {
}, },
}, },
browserify: { browserify: {
'<%= buildDir %>/material.browser.js': ['<%= buildDir %>/material.js'], dist: {
'<%= buildDir %>/baggy.browser.js': ['<%= buildDir %>/baggy.js'], 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: { uglify: {
material: { material: {
@ -199,7 +197,7 @@ module.exports = function (grunt) {
grunt.registerTask( grunt.registerTask(
'js', 'js',
'Build and install js files', 'Build and install js files',
['clean:js', 'copy:pickerjs', 'concat:jsMaterial', 'concat:jsBaggy', 'browserify', 'uglify'] ['clean:js', 'copy:pickerjs', 'browserify', 'uglify']
); );
grunt.registerTask( grunt.registerTask(

6
app/Resources/static/themes/_global/js/bookmarklet.js
View file

@ -1,2 +1,6 @@
top["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>" top['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);};</script></body></html>';

25
app/Resources/static/themes/_global/js/restoreScroll.js
View file

@ -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;
}

50
app/Resources/static/themes/_global/js/tools.js Normal file
View file

@ -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 };

13
app/Resources/static/themes/baggy/css/main.css
View file

@ -481,9 +481,6 @@ footer a {
text-transform: none; text-transform: none;
margin-bottom: 0; margin-bottom: 0;
line-height: 1.2; line-height: 1.2;
text-align: justify;
-moz-text-align-last: center;
text-align-last: center;
} }
.entry h2::after { .entry h2::after {
@ -1071,7 +1068,7 @@ pre code {
font-family: "Courier New", Courier, monospace; font-family: "Courier New", Courier, monospace;
} }
#filter-form { #filters {
position: fixed; position: fixed;
width: 20%; width: 20%;
height: 100%; height: 100%;
@ -1086,7 +1083,7 @@ pre code {
min-width: 300px; min-width: 300px;
} }
#filter-form form .filter-group { #filters form .filter-group {
margin: 5px; margin: 5px;
} }
@ -1125,9 +1122,11 @@ pre code {
.entry { .entry {
width: 49%; width: 49%;
} }
.entry:nth-child(3n+1) { .entry:nth-child(3n+1) {
margin-left: 1.5%; margin-left: 1.5%;
} }
.entry:nth-child(2n+1) { .entry:nth-child(2n+1) {
margin-left: 0; margin-left: 0;
} }
@ -1137,6 +1136,7 @@ pre code {
#article { #article {
width: 80%; width: 80%;
} }
.topPosF { .topPosF {
right: 2.5em; right: 2.5em;
} }
@ -1147,6 +1147,7 @@ pre code {
width: 100%; width: 100%;
margin-left: 0; margin-left: 0;
} }
#display-mode { #display-mode {
display: none; display: none;
} }
@ -1197,7 +1198,6 @@ pre code {
height: auto; height: auto;
top: 0.5em; top: 0.5em;
width: 75px; width: 75px;
height: 75px;
margin-left: -37.5px; margin-left: -37.5px;
} }
@ -1214,6 +1214,7 @@ pre code {
background-color: #999; background-color: #999;
font-size: 1.2em; font-size: 1.2em;
} }
.desktopHide:hover, .desktopHide:hover,
.desktopHide:focus { .desktopHide:focus {
background-color: #fff; background-color: #fff;

4
app/Resources/static/themes/baggy/css/ratatouille.css
View file

@ -63,7 +63,9 @@ pre {
max-width: 61.25em; /* 980px */ max-width: 61.25em; /* 980px */
} }
table, img, figure { table,
img,
figure {
max-width: 100%; max-width: 100%;
height: auto; height: auto;
} }

8
app/Resources/static/themes/baggy/js/autoClose.js
View file

@ -1,8 +0,0 @@
var $ = global.jquery = require('jquery');
$(document).ready(function () {
var currentUrl = window.location.href;
if (currentUrl.match('&closewin=true')) {
window.close();
}
});

52
app/Resources/static/themes/baggy/js/autoCompleteTags.js
View file

@ -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 ($) { export { split, extractLast };
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;
},
});
});

19
app/Resources/static/themes/baggy/js/closeMessage.js
View file

@ -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;
});
});

277
app/Resources/static/themes/baggy/js/init.js
View file

@ -1,21 +1,25 @@
var $ = global.jquery = require('jquery'); const $ = global.jquery = require('jquery');
require('jquery.cookie'); require('jquery.cookie');
require('jquery-ui'); 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 () { $.fn.ready(() => {
var $listmode = $('#listmode'); const $listmode = $('#listmode');
var $listentries = $('#list-entries'); const $listentries = $('#list-entries');
/* ========================================================================== /* ==========================================================================
Menu Menu
========================================================================== */ ========================================================================== */
$('#menu').click(function () { $('#menu').click(() => {
$('#links').toggleClass('menu--open'); $('#links').toggleClass('menu--open');
if ($('#content').hasClass('opacity03')) { const content = $('#content');
$('#content').removeClass('opacity03'); if (content.hasClass('opacity03')) {
content.removeClass('opacity03');
} }
}); });
@ -23,8 +27,8 @@ $.fn.ready(function () {
List mode or Table Mode List mode or Table Mode
========================================================================== */ ========================================================================== */
$listmode.click(function () { $listmode.click(() => {
if (jquery.cookie('listmode') === 1) { if ($.cookie('listmode') === 1) {
// Cookie // Cookie
$.removeCookie('listmode'); $.removeCookie('listmode');
@ -33,7 +37,7 @@ $.fn.ready(function () {
$listmode.addClass('listmode'); $listmode.addClass('listmode');
} else { } else {
// Cookie // Cookie
jquery.cookie('listmode', 1, { expires: 365 }); $.cookie('listmode', 1, { expires: 365 });
$listentries.addClass('listmode'); $listentries.addClass('listmode');
$listmode.removeClass('listmode'); $listmode.removeClass('listmode');
@ -45,7 +49,7 @@ $.fn.ready(function () {
Cookie listmode Cookie listmode
========================================================================== */ ========================================================================== */
if (jquery.cookie('listmode') === 1) { if ($.cookie('listmode') === 1) {
$listentries.addClass('listmode'); $listentries.addClass('listmode');
$listmode.removeClass('listmode'); $listmode.removeClass('listmode');
$listmode.addClass('tablemode'); $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-add-tag').toggle(100);
$('.nav-panel-menu').addClass('hidden'); $('.nav-panel-menu').addClass('hidden');
$('#tag_label').focus(); $('#tag_label').focus();
return false; 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 Annotations & Remember position
========================================================================== */ ========================================================================== */
if ($('article').length) { if ($('article').length) {
var app = new annotator.App(); const app = new annotator.App();
app.include(annotator.ui.main, { app.include(annotator.ui.main, {
element: document.querySelector('article'), element: document.querySelector('article'),
}); });
var x = JSON.parse($('#annotationroutes').html()); const x = JSON.parse($('#annotationroutes').html());
app.include(annotator.storage.http, x); app.include(annotator.storage.http, x);
app.start().then(function () { app.start().then(() => {
app.annotations.load({ entry: x.entryId }); app.annotations.load({ entry: x.entryId });
}); });
$(window).scroll(function (e) { $(window).scroll(() => {
var scrollTop = $(window).scrollTop(); const scrollTop = $(window).scrollTop();
var docHeight = $(document).height(); const docHeight = $(document).height();
var scrollPercent = (scrollTop) / (docHeight); const scrollPercent = (scrollTop) / (docHeight);
var scrollPercentRounded = Math.round(scrollPercent * 100) / 100; const scrollPercentRounded = Math.round(scrollPercent * 100) / 100;
savePercent(x.entryId, scrollPercentRounded); savePercent(x.entryId, scrollPercentRounded);
}); });
retrievePercent(x.entryId);
$(window).resize(() => {
retrievePercent(x.entryId); 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
*/
$('#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(
() => `<a href="${$(this).attr('href')}" class="add-to-wallabag-link-after" ` +
'alt="add to wallabag" title="add to wallabag"></a>'
);
$('.add-to-wallabag-link-after').click((event) => {
toggleSaveLinkForm($(this).attr('href'), event);
event.preventDefault();
});
}); });

101
app/Resources/static/themes/baggy/js/popupForm.js
View file

@ -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();
});
});

75
app/Resources/static/themes/baggy/js/saveLink.js
View file

@ -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 ' <a href="' + $(this).attr('href') + '" class="add-to-wallabag-link-after" alt="add to wallabag" title="add to wallabag"></a> ';
});
$('.add-to-wallabag-link-after').click(function (event) {
toggleSaveLinkForm($(this).attr('href'), event);
event.preventDefault();
});
});

35
app/Resources/static/themes/baggy/js/uiTools.js Normal file
View file

@ -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 };

33
app/Resources/static/themes/material/css/main.css
View file

@ -174,7 +174,7 @@ div.pagination ul .next.disabled {
footer.page-footer { footer.page-footer {
margin-top: 10px; margin-top: 10px;
padding-top: 0px; padding-top: 0;
} }
footer .row { footer .row {
@ -257,8 +257,9 @@ nav input {
display: none; display: none;
} }
.input-field.nav-panel-add, .input-field.nav-panel-add form { .input-field.nav-panel-add,
height: 100%; .input-field.nav-panel-add form {
height: 100%;
} }
/* ========================================================================== /* ==========================================================================
@ -355,8 +356,9 @@ main ul.row {
display: block; display: block;
} }
.card .card-content i.right, .card .card-reveal i.right { .card .card-content i.right,
margin-left: 0; .card .card-reveal i.right {
margin-left: 0;
} }
.card .card-entry-labels { .card .card-entry-labels {
@ -528,30 +530,38 @@ main ul.row {
footer { footer {
padding-left: 0; padding-left: 0;
} }
nav, nav,
main, main,
footer { footer {
padding-left: 0; padding-left: 0;
} }
.pagination { .pagination {
width: auto; width: auto;
} }
.reader-mode { .reader-mode {
width: 240px !important; width: 240px !important;
} }
.reader-mode span { .reader-mode span {
opacity: 1; opacity: 1;
} }
.tabs { .tabs {
display: inline-block; display: inline-block;
height: auto; height: auto;
} }
.tab { .tab {
min-width: 100%; min-width: 100%;
} }
.indicator { .indicator {
display: none; display: none;
} }
.pagination li.prev, .pagination li.prev,
.pagination li.next { .pagination li.next {
width: auto; width: auto;
@ -569,38 +579,47 @@ main ul.row {
width: 25%; width: 25%;
margin-left: 0; margin-left: 0;
} }
.row .col.l2 { .row .col.l2 {
width: 33.33333%; width: 33.33333%;
margin-left: 0; margin-left: 0;
} }
.row .col.l3 { .row .col.l3 {
width: 41.66667%; width: 41.66667%;
margin-left: 0; margin-left: 0;
} }
.row .col.l4 { .row .col.l4 {
width: 50%; width: 50%;
margin-left: 0; margin-left: 0;
} }
.row .col.l5 { .row .col.l5 {
width: 58.33333%; width: 58.33333%;
margin-left: 0; margin-left: 0;
} }
.row .col.l6 { .row .col.l6 {
width: 66.66667%; width: 66.66667%;
margin-left: 0; margin-left: 0;
} }
.row .col.l7 { .row .col.l7 {
width: 75%; width: 75%;
margin-left: 0; margin-left: 0;
} }
.row .col.l8 { .row .col.l8 {
width: 83.33333%; width: 83.33333%;
margin-left: 0; margin-left: 0;
} }
.row .col.l9 { .row .col.l9 {
width: 91.66667%; width: 91.66667%;
margin-left: 0; margin-left: 0;
} }
.row .col.l10 { .row .col.l10 {
width: 100%; width: 100%;
margin-left: 0; margin-left: 0;
@ -646,7 +665,7 @@ main ul.row {
} }
.icon-link::before { .icon-link::before {
content: "\e9cb"; content: "\e9cb";
} }
footer [class^="icon-"], footer [class^="icon-"],
@ -677,5 +696,5 @@ div.settings div.file-field div {
} }
.input-field label.active { .input-field label.active {
font-size: 1rem; font-size: 1rem;
} }

6
app/Resources/static/themes/material/css/print.css
View file

@ -28,10 +28,10 @@
.messages, .messages,
.entry + .results, .entry + .results,
#slide-out, #slide-out,
.progress, .hide-on-large-only, .progress,
.hide-on-large-only,
#article > aside, #article > aside,
#article .mbm a #article .mbm a {
{
display: none !important; display: none !important;
} }

70
app/Resources/static/themes/material/js/init.js
View file

@ -1,29 +1,10 @@
var $ = require('jquery'); const $ = require('jquery');
require('materialize'); global.jQuery = $;
var annotator = require('annotator'); require('materialize'); // eslint-disable-line
const annotator = require('annotator');
import { savePercent, retrievePercent, initFilters, initExport } from '../../_global/js/tools.js';
function initFilters() { $(document).ready(() => {
// 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 () {
// sideNav // sideNav
$('.button-collapse').sideNav(); $('.button-collapse').sideNav();
$('select').material_select(); $('select').material_select();
@ -40,13 +21,13 @@ $(document).ready(function () {
initFilters(); initFilters();
initExport(); initExport();
$('#nav-btn-add-tag').on('click', function () { $('#nav-btn-add-tag').on('click', () => {
$('.nav-panel-add-tag').toggle(100); $('.nav-panel-add-tag').toggle(100);
$('.nav-panel-menu').addClass('hidden'); $('.nav-panel-menu').addClass('hidden');
$('#tag_label').focus(); $('#tag_label').focus();
return false; return false;
}); });
$('#nav-btn-add').on('click', function () { $('#nav-btn-add').on('click', () => {
$('.nav-panel-buttom').hide(100); $('.nav-panel-buttom').hide(100);
$('.nav-panel-add').show(100); $('.nav-panel-add').show(100);
$('.nav-panels .action').hide(100); $('.nav-panels .action').hide(100);
@ -55,7 +36,7 @@ $(document).ready(function () {
$('#entry_url').focus(); $('#entry_url').focus();
return false; return false;
}); });
$('#nav-btn-search').on('click', function () { $('#nav-btn-search').on('click', () => {
$('.nav-panel-buttom').hide(100); $('.nav-panel-buttom').hide(100);
$('.nav-panel-search').show(100); $('.nav-panel-search').show(100);
$('.nav-panels .action').hide(100); $('.nav-panels .action').hide(100);
@ -64,7 +45,7 @@ $(document).ready(function () {
$('#searchfield').focus(); $('#searchfield').focus();
return false; return false;
}); });
$('.close').on('click', function () { $('.close').on('click', () => {
$('.nav-panel-add').hide(100); $('.nav-panel-add').hide(100);
$('.nav-panel-search').hide(100); $('.nav-panel-search').hide(100);
$('.nav-panel-buttom').show(100); $('.nav-panel-buttom').show(100);
@ -73,12 +54,12 @@ $(document).ready(function () {
$('.nav-panels').css('background', 'transparent'); $('.nav-panels').css('background', 'transparent');
return false; return false;
}); });
$(window).scroll(function () { $(window).scroll(() => {
var s = $(window).scrollTop(); const s = $(window).scrollTop();
var d = $(document).height(); const d = $(document).height();
var c = $(window).height(); const c = $(window).height();
var scrollPercent = (s / (d - c)) * 100; const scrollPercent = (s / (d - c)) * 100;
$('.progress .determinate').css('width', scrollPercent + '%'); $('.progress .determinate').css('width', `${scrollPercent}%`);
}); });
/* ========================================================================== /* ==========================================================================
@ -86,9 +67,8 @@ $(document).ready(function () {
========================================================================== */ ========================================================================== */
if ($('article').length) { if ($('article').length) {
var app = new annotator.App(); const app = new annotator.App();
var x = JSON.parse($('#annotationroutes').html()); const x = JSON.parse($('#annotationroutes').html());
app.include(annotator.ui.main, { app.include(annotator.ui.main, {
element: document.querySelector('article'), element: document.querySelector('article'),
@ -96,21 +76,21 @@ $(document).ready(function () {
app.include(annotator.storage.http, x); app.include(annotator.storage.http, x);
app.start().then(function () { app.start().then(() => {
app.annotations.load({ entry: x.entryId }); app.annotations.load({ entry: x.entryId });
}); });
$(window).scroll(function (e) { $(window).scroll(() => {
var scrollTop = $(window).scrollTop(); const scrollTop = $(window).scrollTop();
var docHeight = $(document).height(); const docHeight = $(document).height();
var scrollPercent = (scrollTop) / (docHeight); const scrollPercent = (scrollTop) / (docHeight);
var scrollPercentRounded = Math.round(scrollPercent * 100) / 100; const scrollPercentRounded = Math.round(scrollPercent * 100) / 100;
savePercent(x.entryId, scrollPercentRounded); savePercent(x.entryId, scrollPercentRounded);
}); });
retrievePercent(x.entryId); retrievePercent(x.entryId);
$(window).resize(function () { $(window).resize(() => {
retrievePercent(x.entryId); retrievePercent(x.entryId);
}); });
} }

9
package.json
View file

@ -10,6 +10,8 @@
"dependencies": { "dependencies": {
"annotator": "git://github.com/wallabag/annotator.git#0f076c7d371ed25eb0793346f46982d90f2c4c85", "annotator": "git://github.com/wallabag/annotator.git#0f076c7d371ed25eb0793346f46982d90f2c4c85",
"autoprefixer": "^6.3.6", "autoprefixer": "^6.3.6",
"babel-preset-es2015": "^6.14.0",
"babelify": "^7.3.0",
"bower": "^1.7.7", "bower": "^1.7.7",
"browserify": "^13.0.0", "browserify": "^13.0.0",
"browserify-shim": "^3.8.12", "browserify-shim": "^3.8.12",
@ -83,7 +85,10 @@
"url": "https://github.com/wallabag/wallabag/issues" "url": "https://github.com/wallabag/wallabag/issues"
}, },
"devDependencies": { "devDependencies": {
"eslint": "^2.11.1", "babel-eslint": "^6.1.2",
"eslint-config-airbnb": "^9.0.1" "eslint": "^2.13.1",
"eslint-config-airbnb": "^9.0.1",
"stylelint": "^7.3.1",
"stylelint-config-standard": "^13.0.2"
} }
} }

4
src/Wallabag/CoreBundle/Resources/views/themes/baggy/Entry/entries.html.twig
View file

@ -67,7 +67,7 @@
<!-- Filter --> <!-- Filter -->
{% if form is not null %} {% if form is not null %}
<aside id="filter-form" class=""> <div id="filters" class="">
<form method="get" action="{{ path('all') }}"> <form method="get" action="{{ path('all') }}">
<h2>{{ 'entry.filters.title'|trans }}</h2> <h2>{{ 'entry.filters.title'|trans }}</h2>
<a href="javascript: void(null);" id="filter-form-close" class="close-button--popup close-button">&times;</a> <a href="javascript: void(null);" id="filter-form-close" class="close-button--popup close-button">&times;</a>
@ -147,6 +147,6 @@
<button class="btn waves-effect waves-light" type="submit" id="submit-filter" value="filter">{{ 'entry.filters.action.filter'|trans }}</button> <button class="btn waves-effect waves-light" type="submit" id="submit-filter" value="filter">{{ 'entry.filters.action.filter'|trans }}</button>
</div> </div>
</form> </form>
</aside> </div>
{% endif %} {% endif %}
{% endblock %} {% endblock %}

18
src/Wallabag/CoreBundle/Resources/views/themes/baggy/Entry/entry.html.twig
View file

@ -82,22 +82,4 @@
"entryId": "{{ entry.id }}" "entryId": "{{ entry.id }}"
} }
</script> </script>
<script src="{{ asset('bundles/wallabagcore/themes/_global/js/restoreScroll.js')}}"></script>
<script type="text/javascript">
$(document).ready(function() {
$(window).scroll(function(e){
var scrollTop = $(window).scrollTop();
var docHeight = $(document).height();
var scrollPercent = (scrollTop) / (docHeight);
var scrollPercentRounded = Math.round(scrollPercent*100)/100;
savePercent({{ entry.id }}, scrollPercentRounded);
});
retrievePercent({{ entry.id }});
$(window).resize(function(){
retrievePercent({{ entry.id }});
});
});
</script>
{% endblock %} {% endblock %}

2
src/Wallabag/CoreBundle/Resources/views/themes/material/Entry/entries.html.twig
View file

@ -66,7 +66,7 @@
<p>{{ entry.content|striptags|slice(0, 300)|raw }}&hellip;</p> <p>{{ entry.content|striptags|slice(0, 300)|raw }}&hellip;</p>
<ul class="card-entry-tags"> <ul class="card-entry-labels-hidden">
{% for tag in entry.tags %} {% for tag in entry.tags %}
<li>{{ tag.label }}</li> <li>{{ tag.label }}</li>
{% endfor %} {% endfor %}