frayerjj-frontend 0.1.34 → 0.1.36

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "frayerjj-frontend",
-  "version": "0.1.34",
+  "version": "0.1.36",
   "description": "My base frontend for various projects",
   "main": "src/index.js",
   "type": "module",
@@ -13,7 +13,7 @@
   },
   "author": "Joshua Frayer",
   "license": "MIT",
-  "devDependencies": {
+  "dependencies": {
     "@ckeditor/ckeditor5-build-classic": "^44.1.0",
     "@popperjs/core": "^2.11.8",
     "bootstrap": "^5.3.3"

package/src/init.js

@@ -1,10 +1,79 @@
+import * as bootstrap from 'bootstrap';
+import { createPopper } from '@popperjs/core';
 import { message } from './message';
 import { modal } from './modal';
 import { validate } from './validate';
 import { loading } from './loading';
+import { ClassicEditor } from '@ckeditor/ckeditor5-build-classic';
 
 export const init = () => {
 
+    window.bootstrap = bootstrap;
+    window.createPopper = createPopper;
+    window.ClassicEditor = ClassicEditor;
+    window.message = message;
+    window.modal = modal;
+    window.ajax = ajax;
+    window.session = session;
+    window.validate = validate;
+
+    class CkeUploadAdapter {
+        constructor(loader, uri, token) {
+            this.loader = loader;
+            this.uri = uri;
+            this.token = token;
+            message.verbose('CKEditor Upload Adapter Initialized');
+        }
+        upload() {
+            return this.loader.file
+                .then(file => new Promise((resolve, reject) => {
+                    this._initRequest();
+                    this._initListeners(resolve, reject, file);
+                    this._sendRequest(file);
+                }));
+        }
+        abort() {
+            if (this.xhr) this.xhr.abort();
+        }
+        _initRequest() {
+            const xhr = this.xhr = new XMLHttpRequest();
+            xhr.open('POST', this.uri, true);
+            xhr.setRequestHeader('X-CSRFToken', this.token);
+            xhr.responseType = 'json';
+        }
+        _initListeners(resolve, reject, file) {
+            const xhr = this.xhr;
+            const loader = this.loader;
+            const genericErrorText = `Couldn't upload file: ${ file.name }.`;
+            xhr.addEventListener( 'error', () => reject(genericErrorText) );
+            xhr.addEventListener( 'abort', () => reject() );
+            xhr.addEventListener( 'load', () => {
+                const response = xhr.response;
+                if (!response || response.error) return reject(response && response.error ? response.error.message : genericErrorText);
+                resolve({ default: response.url });
+            });
+            if (xhr.upload) {
+                xhr.upload.addEventListener('progress', evt => {
+                    if (evt.lengthComputable) {
+                        loader.uploadTotal = evt.total;
+                        loader.uploaded = evt.loaded;
+                    }
+                });
+            }
+        }
+        _sendRequest(file) {
+            const data = new FormData();
+            data.append('file', file);
+            this.xhr.send(data);
+        }
+    };
+
+    CkeUploadAdapterPlugin = function(editor) {
+        editor.plugins.get('FileRepository').createUploadAdapter = (loader) => {
+            return new CkeUploadAdapter(loader, editor.config._config.extraParams.uri, editor.config._config.extraParams.token);
+        };
+    };
+
     loading.init();
     
     window.addEventListener('load', () => {
@@ -78,6 +147,34 @@ export const init = () => {
                 toTop.style.visibility = "hidden";
             }
         });
+
+        
+        window.editors = [];
+        document.querySelectorAll('.wysiwyg').forEach(el => {
+            ClassicEditor.create(el, {
+                licenseKey: 'GPL',
+                htmlSupport: {
+                    allow: [
+                        {
+                            name: /.*/,
+                            attributes: true,
+                            classes: true,
+                            styles: true
+                        }
+                    ]
+                },
+                extraParams: {
+                    uri: document.querySelector('meta[name="asset-upload"]').getAttribute('content'), 
+                    token: document.querySelector('meta[name="csrf-token"]').getAttribute('content')
+                },
+                extraPlugins: [ CkeUploadAdapterPlugin ]
+            }).then(editor => {
+                window.editors[el.id] = editor;
+            }).catch( error => {
+                console.error( 'There was a problem initializing the editor.', error );
+            });
+        });
+
     });
 
 }