mirror of
https://github.com/BookStackApp/BookStack.git
synced 2025-05-25 00:00:00 +08:00
Created solution for JS translations
Also tidied up existing components and JS
This commit is contained in:
Dan Brown
@ -17,6 +17,12 @@ window.baseUrl = function(path) {
|
||||
|
||||
let ngApp = angular.module('bookStack', ['ngResource', 'ngAnimate', 'ngSanitize', 'ui.sortable']);
|
||||
|
||||
// Translation setup
|
||||
// Creates a global function with name 'trans' to be used in the same way as Laravel's translation system
|
||||
import Translations from "./translations"
|
||||
let translator = new Translations(window.translations);
|
||||
window.trans = translator.get.bind(translator);
|
||||
|
||||
// Global Event System
|
||||
class EventManager {
|
||||
constructor() {
|
||||
@ -70,150 +76,83 @@ jQuery.expr[":"].contains = $.expr.createPseudo(function (arg) {
|
||||
});
|
||||
|
||||
// Global jQuery Elements
|
||||
$(function () {
|
||||
|
||||
let notifications = $('.notification');
|
||||
let successNotification = notifications.filter('.pos');
|
||||
let errorNotification = notifications.filter('.neg');
|
||||
let warningNotification = notifications.filter('.warning');
|
||||
// Notification Events
|
||||
window.Events.listen('success', function (text) {
|
||||
successNotification.hide();
|
||||
successNotification.find('span').text(text);
|
||||
setTimeout(() => {
|
||||
successNotification.show();
|
||||
}, 1);
|
||||
});
|
||||
window.Events.listen('warning', function (text) {
|
||||
warningNotification.find('span').text(text);
|
||||
warningNotification.show();
|
||||
});
|
||||
window.Events.listen('error', function (text) {
|
||||
errorNotification.find('span').text(text);
|
||||
errorNotification.show();
|
||||
});
|
||||
|
||||
// Notification hiding
|
||||
notifications.click(function () {
|
||||
$(this).fadeOut(100);
|
||||
});
|
||||
|
||||
// Chapter page list toggles
|
||||
$('.chapter-toggle').click(function (e) {
|
||||
e.preventDefault();
|
||||
$(this).toggleClass('open');
|
||||
$(this).closest('.chapter').find('.inset-list').slideToggle(180);
|
||||
});
|
||||
|
||||
// Back to top button
|
||||
$('#back-to-top').click(function() {
|
||||
$('#header').smoothScrollTo();
|
||||
});
|
||||
let scrollTopShowing = false;
|
||||
let scrollTop = document.getElementById('back-to-top');
|
||||
let scrollTopBreakpoint = 1200;
|
||||
window.addEventListener('scroll', function() {
|
||||
let scrollTopPos = document.documentElement.scrollTop || document.body.scrollTop || 0;
|
||||
if (!scrollTopShowing && scrollTopPos > scrollTopBreakpoint) {
|
||||
scrollTop.style.display = 'block';
|
||||
scrollTopShowing = true;
|
||||
setTimeout(() => {
|
||||
scrollTop.style.opacity = 0.4;
|
||||
}, 1);
|
||||
} else if (scrollTopShowing && scrollTopPos < scrollTopBreakpoint) {
|
||||
scrollTop.style.opacity = 0;
|
||||
scrollTopShowing = false;
|
||||
setTimeout(() => {
|
||||
scrollTop.style.display = 'none';
|
||||
}, 500);
|
||||
}
|
||||
});
|
||||
|
||||
// Common jQuery actions
|
||||
$('[data-action="expand-entity-list-details"]').click(function() {
|
||||
$('.entity-list.compact').find('p').not('.empty-text').slideToggle(240);
|
||||
});
|
||||
|
||||
// Popup close
|
||||
$('.popup-close').click(function() {
|
||||
$(this).closest('.overlay').fadeOut(240);
|
||||
});
|
||||
$('.overlay').click(function(event) {
|
||||
if (!$(event.target).hasClass('overlay')) return;
|
||||
$(this).fadeOut(240);
|
||||
});
|
||||
|
||||
// Prevent markdown display link click redirect
|
||||
$('.markdown-display').on('click', 'a', function(event) {
|
||||
event.preventDefault();
|
||||
window.open($(this).attr('href'));
|
||||
});
|
||||
|
||||
// Toggle Switches
|
||||
let $switches = $('[toggle-switch]');
|
||||
if ($switches.length > 0) {
|
||||
$switches.click(event => {
|
||||
let $switch = $(event.target);
|
||||
let input = $switch.find('input').first()[0];
|
||||
let checked = input.value !== 'true';
|
||||
input.value = checked ? 'true' : 'false';
|
||||
$switch.toggleClass('active', checked);
|
||||
});
|
||||
}
|
||||
|
||||
// Image pickers
|
||||
$('.image-picker').on('click', 'button', event => {
|
||||
let button = event.target;
|
||||
let picker = $(button).closest('.image-picker')[0];
|
||||
let action = button.getAttribute('data-action');
|
||||
let resize = picker.getAttribute('data-resize-height') && picker.getAttribute('data-resize-width');
|
||||
let usingIds = picker.getAttribute('data-current-id') !== '';
|
||||
let resizeCrop = picker.getAttribute('data-resize-crop') !== '';
|
||||
let imageElem = picker.querySelector('img');
|
||||
let input = picker.querySelector('input');
|
||||
|
||||
function setImage(image) {
|
||||
|
||||
if (image === 'none') {
|
||||
imageElem.src = picker.getAttribute('data-default-image');
|
||||
imageElem.classList.add('none');
|
||||
input.value = 'none';
|
||||
return;
|
||||
}
|
||||
|
||||
imageElem.src = image.url;
|
||||
input.value = usingIds ? image.id : image.url;
|
||||
imageElem.classList.remove('none');
|
||||
}
|
||||
|
||||
if (action === 'show-image-manager') {
|
||||
window.ImageManager.showExternal((image) => {
|
||||
if (!resize) {
|
||||
setImage(image);
|
||||
return;
|
||||
}
|
||||
let requestString = '/images/thumb/' + image.id + '/' + picker.getAttribute('data-resize-width') + '/' + picker.getAttribute('data-resize-height') + '/' + (resizeCrop ? 'true' : 'false');
|
||||
$.get(window.baseUrl(requestString), resp => {
|
||||
image.url = resp.url;
|
||||
setImage(image);
|
||||
});
|
||||
});
|
||||
} else if (action === 'reset-image') {
|
||||
setImage({id: 0, url: picker.getAttribute('data-default-image')});
|
||||
} else if (action === 'remove-image') {
|
||||
setImage('none');
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
// Detect IE for css
|
||||
if(navigator.userAgent.indexOf('MSIE')!==-1
|
||||
|| navigator.appVersion.indexOf('Trident/') > 0
|
||||
|| navigator.userAgent.indexOf('Safari') !== -1){
|
||||
$('body').addClass('flexbox-support');
|
||||
}
|
||||
|
||||
let notifications = $('.notification');
|
||||
let successNotification = notifications.filter('.pos');
|
||||
let errorNotification = notifications.filter('.neg');
|
||||
let warningNotification = notifications.filter('.warning');
|
||||
// Notification Events
|
||||
window.Events.listen('success', function (text) {
|
||||
successNotification.hide();
|
||||
successNotification.find('span').text(text);
|
||||
setTimeout(() => {
|
||||
successNotification.show();
|
||||
}, 1);
|
||||
});
|
||||
window.Events.listen('warning', function (text) {
|
||||
warningNotification.find('span').text(text);
|
||||
warningNotification.show();
|
||||
});
|
||||
window.Events.listen('error', function (text) {
|
||||
errorNotification.find('span').text(text);
|
||||
errorNotification.show();
|
||||
});
|
||||
|
||||
// Notification hiding
|
||||
notifications.click(function () {
|
||||
$(this).fadeOut(100);
|
||||
});
|
||||
|
||||
// Chapter page list toggles
|
||||
$('.chapter-toggle').click(function (e) {
|
||||
e.preventDefault();
|
||||
$(this).toggleClass('open');
|
||||
$(this).closest('.chapter').find('.inset-list').slideToggle(180);
|
||||
});
|
||||
|
||||
// Back to top button
|
||||
$('#back-to-top').click(function() {
|
||||
$('#header').smoothScrollTo();
|
||||
});
|
||||
let scrollTopShowing = false;
|
||||
let scrollTop = document.getElementById('back-to-top');
|
||||
let scrollTopBreakpoint = 1200;
|
||||
window.addEventListener('scroll', function() {
|
||||
let scrollTopPos = document.documentElement.scrollTop || document.body.scrollTop || 0;
|
||||
if (!scrollTopShowing && scrollTopPos > scrollTopBreakpoint) {
|
||||
scrollTop.style.display = 'block';
|
||||
scrollTopShowing = true;
|
||||
setTimeout(() => {
|
||||
scrollTop.style.opacity = 0.4;
|
||||
}, 1);
|
||||
} else if (scrollTopShowing && scrollTopPos < scrollTopBreakpoint) {
|
||||
scrollTop.style.opacity = 0;
|
||||
scrollTopShowing = false;
|
||||
setTimeout(() => {
|
||||
scrollTop.style.display = 'none';
|
||||
}, 500);
|
||||
}
|
||||
});
|
||||
|
||||
// Common jQuery actions
|
||||
$('[data-action="expand-entity-list-details"]').click(function() {
|
||||
$('.entity-list.compact').find('p').not('.empty-text').slideToggle(240);
|
||||
});
|
||||
|
||||
// Popup close
|
||||
$('.popup-close').click(function() {
|
||||
$(this).closest('.overlay').fadeOut(240);
|
||||
});
|
||||
$('.overlay').click(function(event) {
|
||||
if (!$(event.target).hasClass('overlay')) return;
|
||||
$(this).fadeOut(240);
|
||||
});
|
||||
|
||||
// Detect IE for css
|
||||
if(navigator.userAgent.indexOf('MSIE')!==-1
|
||||
|| navigator.appVersion.indexOf('Trident/') > 0
|
||||
|| navigator.userAgent.indexOf('Safari') !== -1){
|
||||
$('body').addClass('flexbox-support');
|
||||
}
|
||||
|
||||
// Page specific items
|
||||
import "./pages/page-show";
|
||||
|
||||
Reference in New Issue
Block a user