mirror of
https://github.com/wallabag/wallabag.git
synced 2024-11-22 09:01:01 +00:00
Assets work
* ES6 all the things ! * ESLint checks everything * CSS fixes (use stylelint) * Fix #2231
This commit is contained in:
Thomas Citharel
parent
55345331c4
commit
c146f6940a
23 changed files with 445 additions and 417 deletions
|
|
@ -1,4 +1,4 @@
|
|||
{
|
||||
"extends": "airbnb",
|
||||
"installedESLint": true,
|
||||
"parser": "babel-eslint"
|
||||
}
|
||||
|
|
|
|||
4
.gitignore
vendored
4
.gitignore
vendored
|
|
@ -49,3 +49,7 @@ app/Resources/static/lib/*
|
|||
/bin
|
||||
!/src/Wallabag/CoreBundle/Resources/public
|
||||
/src/Wallabag/CoreBundle/Resources/public/*
|
||||
|
||||
# PHPStorm
|
||||
.idea/
|
||||
|
||||
|
|
|
|||
3
.stylelintrc
Normal file
3
.stylelintrc
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
{
|
||||
"extends": "stylelint-config-standard"
|
||||
}
|
||||
46
Gruntfile.js
46
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(
|
||||
|
|
|
|||
|
|
@ -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>';
|
||||
|
|
|
|||
|
|
@ -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
50
app/Resources/static/themes/_global/js/tools.js
Normal 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 };
|
||||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -63,7 +63,9 @@ pre {
|
|||
max-width: 61.25em; /* 980px */
|
||||
}
|
||||
|
||||
table, img, figure {
|
||||
table,
|
||||
img,
|
||||
figure {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,8 +0,0 @@
|
|||
var $ = global.jquery = require('jquery');
|
||||
|
||||
$(document).ready(function () {
|
||||
var currentUrl = window.location.href;
|
||||
if (currentUrl.match('&closewin=true')) {
|
||||
window.close();
|
||||
}
|
||||
});
|
||||
|
|
@ -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 };
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
});
|
||||
});
|
||||
|
|
@ -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'),
|
||||
});
|
||||
|
||||
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
|
||||
*/
|
||||
$('#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();
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
});
|
||||
});
|
||||
|
|
@ -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
35
app/Resources/static/themes/baggy/js/uiTools.js
Normal 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 };
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
});
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -67,7 +67,7 @@
|
|||
|
||||
<!-- Filter -->
|
||||
{% if form is not null %}
|
||||
<aside id="filter-form" class="">
|
||||
<div id="filters" class="">
|
||||
<form method="get" action="{{ path('all') }}">
|
||||
<h2>{{ 'entry.filters.title'|trans }}</h2>
|
||||
<a href="javascript: void(null);" id="filter-form-close" class="close-button--popup close-button">×</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>
|
||||
</div>
|
||||
</form>
|
||||
</aside>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endblock %}
|
||||
|
|
|
|||
|
|
@ -82,22 +82,4 @@
|
|||
"entryId": "{{ entry.id }}"
|
||||
}
|
||||
</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 %}
|
||||
|
|
|
|||
|
|
@ -66,7 +66,7 @@
|
|||
|
||||
<p>{{ entry.content|striptags|slice(0, 300)|raw }}…</p>
|
||||
|
||||
<ul class="card-entry-tags">
|
||||
<ul class="card-entry-labels-hidden">
|
||||
{% for tag in entry.tags %}
|
||||
<li>{{ tag.label }}</li>
|
||||
{% endfor %}
|
||||
|
|
|
|||
Loading…
Reference in a new issue