mirror of
https://github.com/BookStackApp/BookStack.git
synced 2024-11-22 15:26:43 +08:00
Removed jQuery and replaced axios with fetch
This commit is contained in:
Dan Brown
parent
b532ed0f86
commit
53ba5b7e33
42
package-lock.json
generated
42
package-lock.json
generated
|
|
@ -441,22 +441,6 @@
|
|||
"integrity": "sha512-ReZxvNHIOv88FlT7rxcXIIC0fPt4KZqZbOlivyWtXLt8ESx84zd3kMC6iK5jVeS2qt+g7ftS7ye4fi06X5rtRQ==",
|
||||
"dev": true
|
||||
},
|
||||
"axios": {
|
||||
"version": "0.19.0",
|
||||
"resolved": "https://registry.npmjs.org/axios/-/axios-0.19.0.tgz",
|
||||
"integrity": "sha512-1uvKqKQta3KBxIz14F2v06AEHZ/dIoeKfbTRkK1E5oqjDnuEerLmYTgJB5AiQZHJcljpg1TuRzdjDR06qNk0DQ==",
|
||||
"requires": {
|
||||
"follow-redirects": "1.5.10",
|
||||
"is-buffer": "^2.0.2"
|
||||
},
|
||||
"dependencies": {
|
||||
"is-buffer": {
|
||||
"version": "2.0.3",
|
||||
"resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-2.0.3.tgz",
|
||||
"integrity": "sha512-U15Q7MXTuZlrbymiz95PJpZxu8IlipAp4dtS3wOdgPXx3mqBnslrWU14kxfHB+Py/+2PVKSr37dMAgM2A4uArw=="
|
||||
}
|
||||
}
|
||||
},
|
||||
"balanced-match": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz",
|
||||
|
|
@ -1855,24 +1839,6 @@
|
|||
}
|
||||
}
|
||||
},
|
||||
"follow-redirects": {
|
||||
"version": "1.5.10",
|
||||
"resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.5.10.tgz",
|
||||
"integrity": "sha512-0V5l4Cizzvqt5D44aTXbFZz+FtyXV1vrDN6qrelxtfYQKW0KO0W2T/hkE8xvGa/540LkZlkaUjO4ailYTFtHVQ==",
|
||||
"requires": {
|
||||
"debug": "=3.1.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"debug": {
|
||||
"version": "3.1.0",
|
||||
"resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz",
|
||||
"integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==",
|
||||
"requires": {
|
||||
"ms": "2.0.0"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"for-in": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/for-in/-/for-in-1.0.2.tgz",
|
||||
|
|
@ -2570,11 +2536,6 @@
|
|||
"integrity": "sha1-R+Y/evVa+m+S4VAOaQ64uFKcCZo=",
|
||||
"dev": true
|
||||
},
|
||||
"jquery": {
|
||||
"version": "3.4.1",
|
||||
"resolved": "https://registry.npmjs.org/jquery/-/jquery-3.4.1.tgz",
|
||||
"integrity": "sha512-36+AdBzCL+y6qjw5Tx7HgzeGCzC81MDDgaUP8ld2zhx58HdqXGoBd+tHdrBMiyjGQs0Hxs/MLZTu/eHNJJuWPw=="
|
||||
},
|
||||
"js-base64": {
|
||||
"version": "2.5.1",
|
||||
"resolved": "https://registry.npmjs.org/js-base64/-/js-base64-2.5.1.tgz",
|
||||
|
|
@ -3082,7 +3043,8 @@
|
|||
"ms": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
|
||||
"integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
|
||||
"integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=",
|
||||
"dev": true
|
||||
},
|
||||
"nan": {
|
||||
"version": "2.14.0",
|
||||
|
|
|
|||
|
|
@ -21,11 +21,9 @@
|
|||
"webpack-cli": "^3.3.2"
|
||||
},
|
||||
"dependencies": {
|
||||
"axios": "^0.19.0",
|
||||
"clipboard": "^2.0.4",
|
||||
"codemirror": "^5.47.0",
|
||||
"dropzone": "^5.5.1",
|
||||
"jquery": "^3.4.1",
|
||||
"markdown-it": "^8.4.2",
|
||||
"markdown-it-task-lists": "^2.1.1",
|
||||
"sortablejs": "^1.9.0",
|
||||
|
|
|
|||
|
|
@ -137,11 +137,9 @@ The great people that have worked to build and improve BookStack can [be seen he
|
|||
These are the great open-source projects used to help build BookStack:
|
||||
|
||||
* [Laravel](http://laravel.com/)
|
||||
* [jQuery](https://jquery.com/)
|
||||
* [TinyMCE](https://www.tinymce.com/)
|
||||
* [CodeMirror](https://codemirror.net)
|
||||
* [Vue.js](http://vuejs.org/)
|
||||
* [Axios](https://github.com/mzabriskie/axios)
|
||||
* [Sortable](https://github.com/SortableJS/Sortable) & [Vue.Draggable](https://github.com/SortableJS/Vue.Draggable)
|
||||
* [Google Material Icons](https://material.io/icons/)
|
||||
* [Dropzone.js](http://www.dropzonejs.com/)
|
||||
|
|
|
|||
|
|
@ -60,7 +60,7 @@ class BreadcrumbListing {
|
|||
'entity_type': this.entityType,
|
||||
};
|
||||
|
||||
window.$http.get('/search/entity/siblings', {params}).then(resp => {
|
||||
window.$http.get('/search/entity/siblings', params).then(resp => {
|
||||
this.entityListElem.innerHTML = resp.data;
|
||||
}).catch(err => {
|
||||
console.error(err);
|
||||
|
|
|
|||
|
|
@ -1,4 +1,6 @@
|
|||
import MarkdownIt from "markdown-it";
|
||||
import {scrollAndHighlightElement} from "../services/util";
|
||||
|
||||
const md = new MarkdownIt({ html: false });
|
||||
|
||||
class PageComments {
|
||||
|
|
@ -25,8 +27,8 @@ class PageComments {
|
|||
handleAction(event) {
|
||||
let actionElem = event.target.closest('[action]');
|
||||
if (event.target.matches('a[href^="#"]')) {
|
||||
let id = event.target.href.split('#')[1];
|
||||
window.scrollAndHighlight(document.querySelector('#' + id));
|
||||
const id = event.target.href.split('#')[1];
|
||||
scrollAndHighlightElement(document.querySelector('#' + id));
|
||||
}
|
||||
if (actionElem === null) return;
|
||||
event.preventDefault();
|
||||
|
|
@ -132,7 +134,7 @@ class PageComments {
|
|||
this.formContainer.parentNode.style.display = 'block';
|
||||
this.elem.querySelector('[comment-add-button-container]').style.display = 'none';
|
||||
this.formInput.focus();
|
||||
window.scrollToElement(this.formInput);
|
||||
this.formInput.scrollIntoView({behavior: "smooth"});
|
||||
}
|
||||
|
||||
hideForm() {
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
import Clipboard from "clipboard/dist/clipboard.min";
|
||||
import Code from "../services/code";
|
||||
import * as DOM from "../services/dom";
|
||||
import {scrollAndHighlightElement} from "../services/util";
|
||||
|
||||
class PageDisplay {
|
||||
|
||||
|
|
@ -20,10 +21,12 @@ class PageDisplay {
|
|||
|
||||
// Sidebar page nav click event
|
||||
const sidebarPageNav = document.querySelector('.sidebar-page-nav');
|
||||
DOM.onChildEvent(sidebarPageNav, 'a', 'click', (event, child) => {
|
||||
window.components['tri-layout'][0].showContent();
|
||||
this.goToText(child.getAttribute('href').substr(1));
|
||||
});
|
||||
if (sidebarPageNav) {
|
||||
DOM.onChildEvent(sidebarPageNav, 'a', 'click', (event, child) => {
|
||||
window.components['tri-layout'][0].showContent();
|
||||
this.goToText(child.getAttribute('href').substr(1));
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
goToText(text) {
|
||||
|
|
@ -35,11 +38,11 @@ class PageDisplay {
|
|||
});
|
||||
|
||||
if (idElem !== null) {
|
||||
window.scrollAndHighlight(idElem);
|
||||
scrollAndHighlightElement(idElem);
|
||||
} else {
|
||||
const textElem = DOM.findText('.page-content > div > *', text);
|
||||
if (textElem) {
|
||||
window.scrollAndHighlight(textElem);
|
||||
scrollAndHighlightElement(textElem);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,3 @@
|
|||
// Global Polyfills
|
||||
import "./services/dom-polyfills"
|
||||
|
||||
// Url retrieval function
|
||||
window.baseUrl = function(path) {
|
||||
let basePath = document.querySelector('meta[name="base-url"]').getAttribute('content');
|
||||
|
|
@ -11,27 +8,24 @@ window.baseUrl = function(path) {
|
|||
|
||||
// Set events and http services on window
|
||||
import Events from "./services/events"
|
||||
import Http from "./services/http"
|
||||
let httpInstance = Http();
|
||||
import httpInstance from "./services/http"
|
||||
const eventManager = new Events();
|
||||
window.$http = httpInstance;
|
||||
window.$events = new Events();
|
||||
window.$events = eventManager;
|
||||
|
||||
// Translation setup
|
||||
// Creates a global function with name 'trans' to be used in the same way as Laravel's translation system
|
||||
import Translations from "./services/translations"
|
||||
let translator = new Translations(window.translations);
|
||||
const translator = new Translations(window.translations);
|
||||
window.trans = translator.get.bind(translator);
|
||||
window.trans_choice = translator.getPlural.bind(translator);
|
||||
|
||||
// Load in global UI helpers and libraries including jQuery
|
||||
import "./services/global-ui"
|
||||
|
||||
// Set services on Vue
|
||||
// Make services available to Vue instances
|
||||
import Vue from "vue"
|
||||
Vue.prototype.$http = httpInstance;
|
||||
Vue.prototype.$events = window.$events;
|
||||
Vue.prototype.$events = eventManager;
|
||||
|
||||
// Load vues and components
|
||||
// Load Vues and components
|
||||
import vues from "./vues/vues"
|
||||
import components from "./components"
|
||||
vues();
|
||||
|
|
|
|||
|
|
@ -1,22 +0,0 @@
|
|||
/**
|
||||
* Polyfills for DOM API's
|
||||
*/
|
||||
|
||||
// https://developer.mozilla.org/en-US/docs/Web/API/Element/matches
|
||||
if (!Element.prototype.matches) {
|
||||
Element.prototype.matches = Element.prototype.msMatchesSelector || Element.prototype.webkitMatchesSelector;
|
||||
}
|
||||
|
||||
// https://developer.mozilla.org/en-US/docs/Web/API/Element/closest#Browser_compatibility
|
||||
if (!Element.prototype.closest) {
|
||||
Element.prototype.closest = function (s) {
|
||||
var el = this;
|
||||
var ancestor = this;
|
||||
if (!document.documentElement.contains(el)) return null;
|
||||
do {
|
||||
if (ancestor.matches(s)) return ancestor;
|
||||
ancestor = ancestor.parentElement;
|
||||
} while (ancestor !== null);
|
||||
return null;
|
||||
};
|
||||
}
|
||||
|
|
@ -1,58 +0,0 @@
|
|||
// Global jQuery Config & Extensions
|
||||
|
||||
import jQuery from "jquery"
|
||||
window.jQuery = window.$ = jQuery;
|
||||
|
||||
/**
|
||||
* Scroll the view to a specific element.
|
||||
* @param {HTMLElement} element
|
||||
*/
|
||||
window.scrollToElement = function(element) {
|
||||
if (!element) return;
|
||||
let offset = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
|
||||
let top = element.getBoundingClientRect().top + offset;
|
||||
$('html, body').animate({
|
||||
scrollTop: top - 60 // Adjust to change final scroll position top margin
|
||||
}, 300);
|
||||
};
|
||||
|
||||
/**
|
||||
* Scroll and highlight an element.
|
||||
* @param {HTMLElement} element
|
||||
*/
|
||||
window.scrollAndHighlight = function(element) {
|
||||
if (!element) return;
|
||||
window.scrollToElement(element);
|
||||
let color = document.getElementById('custom-styles').getAttribute('data-color-light');
|
||||
let initColor = window.getComputedStyle(element).getPropertyValue('background-color');
|
||||
element.style.backgroundColor = color;
|
||||
setTimeout(() => {
|
||||
element.classList.add('selectFade');
|
||||
element.style.backgroundColor = initColor;
|
||||
}, 10);
|
||||
setTimeout(() => {
|
||||
element.classList.remove('selectFade');
|
||||
element.style.backgroundColor = '';
|
||||
}, 3000);
|
||||
};
|
||||
|
||||
// Smooth scrolling
|
||||
jQuery.fn.smoothScrollTo = function () {
|
||||
if (this.length === 0) return;
|
||||
window.scrollToElement(this[0]);
|
||||
return this;
|
||||
};
|
||||
|
||||
// Making contains text expression not worry about casing
|
||||
jQuery.expr[":"].contains = $.expr.createPseudo(function (arg) {
|
||||
return function (elem) {
|
||||
return $(elem).text().toUpperCase().indexOf(arg.toUpperCase()) >= 0;
|
||||
};
|
||||
});
|
||||
|
||||
// Detect IE for css
|
||||
if(navigator.userAgent.indexOf('MSIE')!==-1
|
||||
|| navigator.appVersion.indexOf('Trident/') > 0
|
||||
|| navigator.userAgent.indexOf('Safari') !== -1){
|
||||
document.body.classList.add('flexbox-support');
|
||||
}
|
||||
|
|
@ -1,21 +1,146 @@
|
|||
import axios from "axios"
|
||||
|
||||
function instance() {
|
||||
let axiosInstance = axios.create({
|
||||
headers: {
|
||||
'X-CSRF-TOKEN': document.querySelector('meta[name=token]').getAttribute('content'),
|
||||
'baseURL': window.baseUrl('')
|
||||
}
|
||||
/**
|
||||
* Perform a HTTP GET request.
|
||||
* Can easily pass query parameters as the second parameter.
|
||||
* @param {String} url
|
||||
* @param {Object} params
|
||||
* @returns {Promise<{headers: Headers, original: Response, data: (Object|String), redirected: boolean, statusText: string, url: string, status: number}>}
|
||||
*/
|
||||
async function get(url, params = {}) {
|
||||
return request(url, {
|
||||
method: 'GET',
|
||||
params,
|
||||
});
|
||||
axiosInstance.interceptors.request.use(resp => {
|
||||
return resp;
|
||||
}, err => {
|
||||
if (typeof err.response === "undefined" || typeof err.response.data === "undefined") return Promise.reject(err);
|
||||
if (typeof err.response.data.error !== "undefined") window.$events.emit('error', err.response.data.error);
|
||||
if (typeof err.response.data.message !== "undefined") window.$events.emit('error', err.response.data.message);
|
||||
});
|
||||
return axiosInstance;
|
||||
}
|
||||
|
||||
/**
|
||||
* Perform a HTTP POST request.
|
||||
* @param {String} url
|
||||
* @param {Object} data
|
||||
* @returns {Promise<{headers: Headers, original: Response, data: (Object|String), redirected: boolean, statusText: string, url: string, status: number}>}
|
||||
*/
|
||||
async function post(url, data = null) {
|
||||
return dataRequest('POST', url, data);
|
||||
}
|
||||
|
||||
export default instance;
|
||||
/**
|
||||
* Perform a HTTP PUT request.
|
||||
* @param {String} url
|
||||
* @param {Object} data
|
||||
* @returns {Promise<{headers: Headers, original: Response, data: (Object|String), redirected: boolean, statusText: string, url: string, status: number}>}
|
||||
*/
|
||||
async function put(url, data = null) {
|
||||
return dataRequest('PUT', url, data);
|
||||
}
|
||||
|
||||
/**
|
||||
* Perform a HTTP PATCH request.
|
||||
* @param {String} url
|
||||
* @param {Object} data
|
||||
* @returns {Promise<{headers: Headers, original: Response, data: (Object|String), redirected: boolean, statusText: string, url: string, status: number}>}
|
||||
*/
|
||||
async function patch(url, data = null) {
|
||||
return dataRequest('PATCH', url, data);
|
||||
}
|
||||
|
||||
/**
|
||||
* Perform a HTTP DELETE request.
|
||||
* @param {String} url
|
||||
* @param {Object} data
|
||||
* @returns {Promise<{headers: Headers, original: Response, data: (Object|String), redirected: boolean, statusText: string, url: string, status: number}>}
|
||||
*/
|
||||
async function performDelete(url, data = null) {
|
||||
return dataRequest('DELETE', url, data);
|
||||
}
|
||||
|
||||
/**
|
||||
* Perform a HTTP request to the back-end that includes data in the body.
|
||||
* Parses the body to JSON if an object, setting the correct headers.
|
||||
* @param {String} method
|
||||
* @param {String} url
|
||||
* @param {Object} data
|
||||
* @returns {Promise<{headers: Headers, original: Response, data: (Object|String), redirected: boolean, statusText: string, url: string, status: number}>}
|
||||
*/
|
||||
async function dataRequest(method, url, data = null) {
|
||||
const options = {
|
||||
method: method,
|
||||
body: data,
|
||||
};
|
||||
|
||||
if (typeof data === 'object') {
|
||||
options.headers = {'Content-Type': 'application/json'};
|
||||
options.body = JSON.stringify(data);
|
||||
}
|
||||
|
||||
return request(url, options)
|
||||
}
|
||||
|
||||
/**
|
||||
* Create a new HTTP request, setting the required CSRF information
|
||||
* to communicate with the back-end. Parses & formats the response.
|
||||
* @param {String} url
|
||||
* @param {Object} options
|
||||
* @returns {Promise<{headers: Headers, original: Response, data: (Object|String), redirected: boolean, statusText: string, url: string, status: number}>}
|
||||
*/
|
||||
async function request(url, options = {}) {
|
||||
if (!url.startsWith('http')) {
|
||||
url = window.baseUrl(url);
|
||||
}
|
||||
|
||||
if (options.params) {
|
||||
const urlObj = new URL(url);
|
||||
for (let paramName of Object.keys(options.params)) {
|
||||
const value = options.params[paramName];
|
||||
if (typeof value !== 'undefined' && value !== null) {
|
||||
urlObj.searchParams.set(paramName, value);
|
||||
}
|
||||
}
|
||||
url = urlObj.toString();
|
||||
}
|
||||
|
||||
const csrfToken = document.querySelector('meta[name=token]').getAttribute('content');
|
||||
options = Object.assign({}, options, {
|
||||
'credentials': 'same-origin',
|
||||
});
|
||||
options.headers = Object.assign({}, options.headers || {}, {
|
||||
'baseURL': window.baseUrl(''),
|
||||
'X-CSRF-TOKEN': csrfToken,
|
||||
});
|
||||
|
||||
const response = await fetch(url, options);
|
||||
const content = await getResponseContent(response);
|
||||
return {
|
||||
data: content,
|
||||
headers: response.headers,
|
||||
redirected: response.redirected,
|
||||
status: response.status,
|
||||
statusText: response.statusText,
|
||||
url: response.url,
|
||||
original: response,
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the content from a fetch response.
|
||||
* Checks the content-type header to determine the format.
|
||||
* @param response
|
||||
* @returns {Promise<Object|String>}
|
||||
*/
|
||||
async function getResponseContent(response) {
|
||||
const responseContentType = response.headers.get('Content-Type');
|
||||
const subType = responseContentType.split('/').pop();
|
||||
|
||||
if (subType === 'javascript' || subType === 'json') {
|
||||
return await response.json();
|
||||
}
|
||||
|
||||
return await response.text();
|
||||
}
|
||||
|
||||
export default {
|
||||
get: get,
|
||||
post: post,
|
||||
put: put,
|
||||
patch: patch,
|
||||
delete: performDelete,
|
||||
};
|
||||
|
|
@ -24,4 +24,25 @@ export function debounce(func, wait, immediate) {
|
|||
timeout = setTimeout(later, wait);
|
||||
if (callNow) func.apply(context, args);
|
||||
};
|
||||
};
|
||||
};
|
||||
|
||||
/**
|
||||
* Scroll and highlight an element.
|
||||
* @param {HTMLElement} element
|
||||
*/
|
||||
export function scrollAndHighlightElement(element) {
|
||||
if (!element) return;
|
||||
element.scrollIntoView({behavior: 'smooth'});
|
||||
|
||||
const color = document.getElementById('custom-styles').getAttribute('data-color-light');
|
||||
const initColor = window.getComputedStyle(element).getPropertyValue('background-color');
|
||||
element.style.backgroundColor = color;
|
||||
setTimeout(() => {
|
||||
element.classList.add('selectFade');
|
||||
element.style.backgroundColor = initColor;
|
||||
}, 10);
|
||||
setTimeout(() => {
|
||||
element.classList.remove('selectFade');
|
||||
element.style.backgroundColor = '';
|
||||
}, 3000);
|
||||
}
|
||||
|
|
@ -113,11 +113,13 @@ const methods = {
|
|||
*/
|
||||
getSuggestions(input, params) {
|
||||
params.search = input;
|
||||
let cacheKey = `${this.url}:${JSON.stringify(params)}`;
|
||||
const cacheKey = `${this.url}:${JSON.stringify(params)}`;
|
||||
|
||||
if (typeof ajaxCache[cacheKey] !== "undefined") return Promise.resolve(ajaxCache[cacheKey]);
|
||||
if (typeof ajaxCache[cacheKey] !== "undefined") {
|
||||
return Promise.resolve(ajaxCache[cacheKey]);
|
||||
}
|
||||
|
||||
return this.$http.get(this.url, {params}).then(resp => {
|
||||
return this.$http.get(this.url, params).then(resp => {
|
||||
ajaxCache[cacheKey] = resp.data;
|
||||
return resp.data;
|
||||
});
|
||||
|
|
|
|||
|
|
@ -57,14 +57,14 @@ const methods = {
|
|||
},
|
||||
|
||||
async fetchData() {
|
||||
let query = {
|
||||
const params = {
|
||||
page,
|
||||
search: this.searching ? this.searchTerm : null,
|
||||
uploaded_to: this.uploadedTo || null,
|
||||
filter_type: this.filter,
|
||||
};
|
||||
|
||||
const {data} = await this.$http.get(baseUrl, {params: query});
|
||||
const {data} = await this.$http.get(baseUrl, params);
|
||||
this.images = this.images.concat(data.images);
|
||||
this.hasMore = data.has_more;
|
||||
page++;
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user