BookStack Code Mirror - bookstack/blob - resources/assets/js/index.js

   1 import "babel-polyfill"
   2 import "./dom-polyfills"
   3
   4 import jQuery from "jquery"
   5 window.jQuery = window.$ = jQuery;
   6
   7 import Translations from "./translations"
   8 import vues from "./vues/vues"
   9 import components from "./components"
  10
  11 import Vue from "vue"
  12 import axios from "axios"
  13
  14 // Url retrieval function
  15 window.baseUrl = function(path) {
  16     let basePath = document.querySelector('meta[name="base-url"]').getAttribute('content');
  17     if (basePath[basePath.length-1] === '/') basePath = basePath.slice(0, basePath.length-1);
  18     if (path[0] === '/') path = path.slice(1);
  19     return basePath + '/' + path;
  20 };
  21
  22 // Global Event System
  23 class EventManager {
  24     constructor() {
  25         this.listeners = {};
  26         this.stack = [];
  27     }
  28
  29     emit(eventName, eventData) {
  30         this.stack.push({name: eventName, data: eventData});
  31         if (typeof this.listeners[eventName] === 'undefined') return this;
  32         let eventsToStart = this.listeners[eventName];
  33         for (let i = 0; i < eventsToStart.length; i++) {
  34             let event = eventsToStart[i];
  35             event(eventData);
  36         }
  37         return this;
  38     }
  39
  40     listen(eventName, callback) {
  41         if (typeof this.listeners[eventName] === 'undefined') this.listeners[eventName] = [];
  42         this.listeners[eventName].push(callback);
  43         return this;
  44     }
  45 }
  46
  47 window.$events = new EventManager();
  48
  49 let axiosInstance = axios.create({
  50     headers: {
  51         'X-CSRF-TOKEN': document.querySelector('meta[name=token]').getAttribute('content'),
  52         'baseURL': window.baseUrl('')
  53     }
  54 });
  55 axiosInstance.interceptors.request.use(resp => {
  56     return resp;
  57 }, err => {
  58     if (typeof err.response === "undefined" || typeof err.response.data === "undefined") return Promise.reject(err);
  59     if (typeof err.response.data.error !== "undefined") window.$events.emit('error', err.response.data.error);
  60     if (typeof err.response.data.message !== "undefined") window.$events.emit('error', err.response.data.message);
  61 });
  62 window.$http = axiosInstance;
  63
  64 Vue.prototype.$http = axiosInstance;
  65 Vue.prototype.$events = window.$events;
  66
  67 // Translation setup
  68 // Creates a global function with name 'trans' to be used in the same way as Laravel's translation system
  69 let translator = new Translations(window.translations);
  70 window.trans = translator.get.bind(translator);
  71 window.trans_choice = translator.getPlural.bind(translator);
  72
  73
  74 //Global jQuery Config & Extensions
  75
  76 /**
  77  * Scroll the view to a specific element.
  78  * @param {HTMLElement} element
  79  */
  80 window.scrollToElement = function(element) {
  81     if (!element) return;
  82     let offset = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
  83     let top = element.getBoundingClientRect().top + offset;
  84     $('html, body').animate({
  85         scrollTop: top - 60 // Adjust to change final scroll position top margin
  86     }, 300);
  87 };
  88
  89 /**
  90  * Scroll and highlight an element.
  91  * @param {HTMLElement} element
  92  */
  93 window.scrollAndHighlight = function(element) {
  94     if (!element) return;
  95     window.scrollToElement(element);
  96     let color = document.getElementById('custom-styles').getAttribute('data-color-light');
  97     let initColor = window.getComputedStyle(element).getPropertyValue('background-color');
  98     element.style.backgroundColor = color;
  99     setTimeout(() => {
 100         element.classList.add('selectFade');
 101         element.style.backgroundColor = initColor;
 102     }, 10);
 103     setTimeout(() => {
 104         element.classList.remove('selectFade');
 105         element.style.backgroundColor = '';
 106     }, 3000);
 107 };
 108
 109 // Smooth scrolling
 110 jQuery.fn.smoothScrollTo = function () {
 111     if (this.length === 0) return;
 112     window.scrollToElement(this[0]);
 113     return this;
 114 };
 115
 116 // Making contains text expression not worry about casing
 117 jQuery.expr[":"].contains = $.expr.createPseudo(function (arg) {
 118     return function (elem) {
 119         return $(elem).text().toUpperCase().indexOf(arg.toUpperCase()) >= 0;
 120     };
 121 });
 122
 123 // Detect IE for css
 124 if(navigator.userAgent.indexOf('MSIE')!==-1
 125     || navigator.appVersion.indexOf('Trident/') > 0
 126     || navigator.userAgent.indexOf('Safari') !== -1){
 127     document.body.classList.add('flexbox-support');
 128 }
 129
 130 // Load vues and components
 131 vues();
 132 components();