started implementation of multiple file uploads and sorting
Ro
2 years ago
parent
8f9021bb7d
commit
3c52bca8ba
@ -1,70 +1,70 @@
|
|||||||
{
|
{
|
||||||
"parserOptions": {
|
"parserOptions": {
|
||||||
"ecmaVersion": 7,
|
"ecmaVersion": 7,
|
||||||
"sourceType": "module",
|
"sourceType": "module",
|
||||||
"ecmaFeatures": {}
|
"ecmaFeatures": {}
|
||||||
},
|
},
|
||||||
"rules": {
|
"rules": {
|
||||||
"constructor-super": 2,
|
"constructor-super": 2,
|
||||||
"for-direction": 2,
|
"for-direction": 2,
|
||||||
"getter-return": 2,
|
"getter-return": 2,
|
||||||
"no-case-declarations": 2,
|
"no-case-declarations": 2,
|
||||||
"no-class-assign": 2,
|
"no-class-assign": 2,
|
||||||
"no-compare-neg-zero": 2,
|
"no-compare-neg-zero": 2,
|
||||||
"no-cond-assign": 2,
|
"no-cond-assign": 2,
|
||||||
"no-console": 1,
|
"no-console": 1,
|
||||||
"no-const-assign": 2,
|
"no-const-assign": 2,
|
||||||
"no-constant-condition": 2,
|
"no-constant-condition": 2,
|
||||||
"no-control-regex": 1,
|
"no-control-regex": 1,
|
||||||
"no-debugger": 2,
|
"no-debugger": 2,
|
||||||
"no-delete-var": 2,
|
"no-delete-var": 2,
|
||||||
"no-dupe-args": 2,
|
"no-dupe-args": 2,
|
||||||
"no-dupe-class-members": 2,
|
"no-dupe-class-members": 2,
|
||||||
"no-dupe-keys": 2,
|
"no-dupe-keys": 2,
|
||||||
"no-duplicate-case": 2,
|
"no-duplicate-case": 2,
|
||||||
"no-empty": 2,
|
"no-empty": 2,
|
||||||
"no-empty-character-class": 2,
|
"no-empty-character-class": 2,
|
||||||
"no-empty-pattern": 2,
|
"no-empty-pattern": 2,
|
||||||
"no-ex-assign": 2,
|
"no-ex-assign": 2,
|
||||||
"no-extra-boolean-cast": 2,
|
"no-extra-boolean-cast": 2,
|
||||||
"no-extra-semi": 2,
|
"no-extra-semi": 2,
|
||||||
"no-fallthrough": 2,
|
"no-fallthrough": 2,
|
||||||
"no-func-assign": 2,
|
"no-func-assign": 2,
|
||||||
"no-global-assign": 2,
|
"no-global-assign": 2,
|
||||||
"no-inner-declarations": 2,
|
"no-inner-declarations": 2,
|
||||||
"no-invalid-regexp": 2,
|
"no-invalid-regexp": 2,
|
||||||
"no-irregular-whitespace": 2,
|
"no-irregular-whitespace": 2,
|
||||||
"no-mixed-spaces-and-tabs": 2,
|
"no-mixed-spaces-and-tabs": 2,
|
||||||
"no-new-symbol": 2,
|
"no-new-symbol": 2,
|
||||||
"no-obj-calls": 2,
|
"no-obj-calls": 2,
|
||||||
"no-octal": 2,
|
"no-octal": 2,
|
||||||
"no-redeclare": 2,
|
"no-redeclare": 2,
|
||||||
"no-regex-spaces": 2,
|
"no-regex-spaces": 2,
|
||||||
"no-self-assign": 2,
|
"no-self-assign": 2,
|
||||||
"no-sparse-arrays": 2,
|
"no-sparse-arrays": 2,
|
||||||
"no-this-before-super": 2,
|
"no-this-before-super": 2,
|
||||||
"no-undef": 2,
|
"no-undef": 2,
|
||||||
"no-unexpected-multiline": 2,
|
"no-unexpected-multiline": 2,
|
||||||
"no-unreachable": 2,
|
"no-unreachable": 2,
|
||||||
"no-unsafe-finally": 2,
|
"no-unsafe-finally": 2,
|
||||||
"no-unsafe-negation": 2,
|
"no-unsafe-negation": 2,
|
||||||
"no-unused-labels": 2,
|
"no-unused-labels": 2,
|
||||||
"no-unused-vars": 2,
|
"no-unused-vars": 1,
|
||||||
"no-useless-escape": 1,
|
"no-useless-escape": 1,
|
||||||
"require-yield": 2,
|
"require-yield": 2,
|
||||||
"use-isnan": 2,
|
"use-isnan": 2,
|
||||||
"valid-typeof": 2,
|
"valid-typeof": 2,
|
||||||
"no-duplicate-imports": 2
|
"no-duplicate-imports": 2
|
||||||
},
|
},
|
||||||
"env": {
|
"env": {
|
||||||
"node": true,
|
"node": true,
|
||||||
"browser": true,
|
"browser": true,
|
||||||
"es6": true
|
"es6": true
|
||||||
},
|
},
|
||||||
"globals": {
|
"globals": {
|
||||||
"_": false,
|
"_": false,
|
||||||
"hljs": false,
|
"hljs": false,
|
||||||
"Sortable": false,
|
"Sortable": false,
|
||||||
"Prism": false
|
"Prism": false
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -0,0 +1,7 @@
|
|||||||
|
.babelrc
|
||||||
|
README.md
|
||||||
|
*.twig
|
||||||
|
*.sass
|
||||||
|
*.json
|
||||||
|
*.php
|
||||||
|
*.md
|
||||||
@ -0,0 +1,17 @@
|
|||||||
|
{
|
||||||
|
"arrowParens": "avoid",
|
||||||
|
"bracketSpacing": true,
|
||||||
|
"htmlWhitespaceSensitivity": "css",
|
||||||
|
"insertPragma": false,
|
||||||
|
"bracketSameLine": false,
|
||||||
|
"jsxSingleQuote": true,
|
||||||
|
"parser": "babel",
|
||||||
|
"proseWrap": "preserve",
|
||||||
|
"requirePragma": false,
|
||||||
|
"semi": true,
|
||||||
|
"singleQuote": true,
|
||||||
|
"trailingComma": "none",
|
||||||
|
"useTabs": true,
|
||||||
|
"tabWidth": 4,
|
||||||
|
"printWidth": 90
|
||||||
|
}
|
||||||
File diff suppressed because one or more lines are too long
@ -1,213 +1,217 @@
|
|||||||
import FipamoAdminAPI from "../libraries/FipamoAdminAPI";
|
import FipamoAdminAPI from '../libraries/FipamoAdminAPI';
|
||||||
import Maintenance from "./controllers/MaintenanceManager";
|
import Maintenance from './controllers/MaintenanceManager';
|
||||||
import DataUitls from "./utils/DataUtils";
|
import DataUitls from './utils/DataUtils';
|
||||||
import * as DataEvent from "./events/DataEvent";
|
import * as DataEvent from './events/DataEvent';
|
||||||
import DashManager from "./controllers/DashManager";
|
import DashManager from './controllers/DashManager';
|
||||||
import Notfications from "./ui/Notifications";
|
import Notfications from './ui/Notifications';
|
||||||
const data = new DataUitls();
|
const data = new DataUitls();
|
||||||
const notify = new Notfications();
|
const notify = new Notfications();
|
||||||
|
|
||||||
export default class Base {
|
export default class Base {
|
||||||
//--------------------------
|
//--------------------------
|
||||||
// constructor
|
// constructor
|
||||||
//--------------------------
|
//--------------------------
|
||||||
constructor() {
|
constructor() {
|
||||||
this.processing = false;
|
this.processing = false;
|
||||||
this.start();
|
this.start();
|
||||||
}
|
}
|
||||||
|
|
||||||
//--------------------------
|
//--------------------------
|
||||||
// methods
|
// methods
|
||||||
//--------------------------
|
//--------------------------
|
||||||
start() {
|
start() {
|
||||||
if (
|
if (
|
||||||
document.getElementById("dash-form") ||
|
document.getElementById('dash-form') ||
|
||||||
document.getElementById("dash-init")
|
document.getElementById('dash-init')
|
||||||
) {
|
) {
|
||||||
var options = document.getElementsByClassName("init-option");
|
var options = document.getElementsByClassName('init-option');
|
||||||
for (let index = 0; index < options.length; index++) {
|
for (let index = 0; index < options.length; index++) {
|
||||||
options[index].addEventListener("click", (e) => this.handleOptions(e));
|
options[index].addEventListener('click', e =>
|
||||||
}
|
this.handleOptions(e)
|
||||||
if (document.getElementById("dash-form")) {
|
);
|
||||||
document
|
}
|
||||||
.getElementById("login-btn")
|
if (document.getElementById('dash-form')) {
|
||||||
.addEventListener("click", (e) => this.handleLogin(e));
|
document
|
||||||
} else {
|
.getElementById('login-btn')
|
||||||
document
|
.addEventListener('click', e => this.handleLogin(e));
|
||||||
.getElementById("init-blog")
|
} else {
|
||||||
.addEventListener("click", (e) => this.handleSetup(e));
|
document
|
||||||
document
|
.getElementById('init-blog')
|
||||||
.getElementById("blog-restore")
|
.addEventListener('click', e => this.handleSetup(e));
|
||||||
.addEventListener("click", (e) => this.handleRestore(e));
|
document
|
||||||
}
|
.getElementById('blog-restore')
|
||||||
} else if (document.getElementById("dash-reset")) {
|
.addEventListener('click', e => this.handleRestore(e));
|
||||||
document
|
}
|
||||||
.getElementById("get-secret-btn")
|
} else if (document.getElementById('dash-reset')) {
|
||||||
.addEventListener("click", (e) => this.handleReset(e));
|
document
|
||||||
|
.getElementById('get-secret-btn')
|
||||||
|
.addEventListener('click', e => this.handleReset(e));
|
||||||
|
|
||||||
document
|
document
|
||||||
.getElementById("reset-btn")
|
.getElementById('reset-btn')
|
||||||
.addEventListener("click", (e) => this.handleReset(e));
|
.addEventListener('click', e => this.handleReset(e));
|
||||||
} else {
|
} else {
|
||||||
new DashManager();
|
new DashManager();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
//--------------------------
|
//--------------------------
|
||||||
// event handlers
|
// event handlers
|
||||||
//--------------------------
|
//--------------------------
|
||||||
handleLogin(e) {
|
handleLogin(e) {
|
||||||
if (this.processing) return;
|
if (this.processing) return;
|
||||||
let self = this;
|
let self = this;
|
||||||
e.stopPropagation();
|
e.stopPropagation();
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
let authForm = data.formDataToJSON(document.getElementById("login"));
|
let authForm = data.formDataToJSON(document.getElementById('login'));
|
||||||
notify.alert("Looking, hold up", null);
|
notify.alert('Looking, hold up', null);
|
||||||
let api = new FipamoAdminAPI();
|
let api = new FipamoAdminAPI();
|
||||||
this.processing = true;
|
this.processing = true;
|
||||||
api
|
api.login(authForm)
|
||||||
.login(authForm)
|
.then(response => {
|
||||||
.then((response) => {
|
self.processing = false;
|
||||||
self.processing = false;
|
if (response.type === DataEvent.REQUEST_LAME) {
|
||||||
if (response.type === DataEvent.REQUEST_LAME) {
|
notify.alert(response.message, false);
|
||||||
notify.alert(response.message, false);
|
} else {
|
||||||
} else {
|
notify.alert(response.message, true);
|
||||||
notify.alert(response.message, true);
|
e.target.innerHTML = response.message;
|
||||||
e.target.innerHTML = response.message;
|
setTimeout(() => {
|
||||||
setTimeout(() => {
|
window.location = '/dashboard';
|
||||||
window.location = "/dashboard";
|
}, 500);
|
||||||
}, 500);
|
}
|
||||||
}
|
})
|
||||||
})
|
.catch(err => {
|
||||||
.catch((err) => {
|
self.processing = false;
|
||||||
self.processing = false;
|
notify.alert(err, false);
|
||||||
notify.alert(err, false);
|
});
|
||||||
});
|
}
|
||||||
}
|
|
||||||
|
|
||||||
handleSetup(e) {
|
handleSetup(e) {
|
||||||
if (this.processing) return;
|
if (this.processing) return;
|
||||||
let self = this;
|
let self = this;
|
||||||
e.stopPropagation();
|
e.stopPropagation();
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
let setUpForm = data.formDataToJSON(document.getElementById("init-form"));
|
let setUpForm = data.formDataToJSON(
|
||||||
let mm = new Maintenance();
|
document.getElementById('init-form')
|
||||||
this.processing = true;
|
);
|
||||||
mm.create(setUpForm)
|
let mm = new Maintenance();
|
||||||
.then((response) => {
|
this.processing = true;
|
||||||
if (response.type === DataEvent.API_INIT_LAME) {
|
mm.create(setUpForm)
|
||||||
self.processing = false;
|
.then(response => {
|
||||||
notify.alert(response.message, false);
|
if (response.type === DataEvent.API_INIT_LAME) {
|
||||||
} else {
|
self.processing = false;
|
||||||
self.processing = false;
|
notify.alert(response.message, false);
|
||||||
notify.alert(response.message, true);
|
} else {
|
||||||
setTimeout(() => {
|
self.processing = false;
|
||||||
window.location = "/dashboard";
|
notify.alert(response.message, true);
|
||||||
}, 700);
|
setTimeout(() => {
|
||||||
}
|
window.location = '/dashboard';
|
||||||
})
|
}, 700);
|
||||||
.catch((err) => {
|
}
|
||||||
self.processing = false;
|
})
|
||||||
notify.alert(err, false);
|
.catch(err => {
|
||||||
});
|
self.processing = false;
|
||||||
}
|
notify.alert(err, false);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
handleRestore(e) {
|
handleRestore(e) {
|
||||||
if (this.processing) return;
|
if (this.processing) return;
|
||||||
let self = this;
|
let self = this;
|
||||||
e.stopPropagation();
|
e.stopPropagation();
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
let mm = new Maintenance();
|
let mm = new Maintenance();
|
||||||
var form = document.getElementById("init-restore");
|
var form = document.getElementById('init-restore');
|
||||||
this.processing = true;
|
this.processing = true;
|
||||||
mm.restore(form)
|
mm.restore(form)
|
||||||
.then((response) => {
|
.then(response => {
|
||||||
if (response.type === DataEvent.REQUEST_LAME) {
|
if (response.type === DataEvent.REQUEST_LAME) {
|
||||||
self.processing = false;
|
self.processing = false;
|
||||||
notify.alert(response.message, false);
|
notify.alert(response.message, false);
|
||||||
} else {
|
} else {
|
||||||
self.processing = false;
|
self.processing = false;
|
||||||
notify.alert(response.message, true);
|
notify.alert(response.message, true);
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
window.location = "/dashboard";
|
window.location = '/dashboard';
|
||||||
}, 1500);
|
}, 1500);
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
.catch((err) => {
|
.catch(err => {
|
||||||
self.processing = false;
|
self.processing = false;
|
||||||
notify.alert(err, false);
|
notify.alert(err, false);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
handleReset(e) {
|
handleReset(e) {
|
||||||
e.stopPropagation();
|
e.stopPropagation();
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
let self = this;
|
let self = this;
|
||||||
let mm = new Maintenance();
|
let mm = new Maintenance();
|
||||||
if (e.target.id == "get-secret-btn") {
|
if (e.target.id == 'get-secret-btn') {
|
||||||
let data = {
|
let data = {
|
||||||
email: document.getElementById("email").value,
|
email: document.getElementById('email').value,
|
||||||
task: "retrieveSecret"
|
task: 'retrieveSecret'
|
||||||
};
|
};
|
||||||
this.processing = true;
|
this.processing = true;
|
||||||
mm.secret(data)
|
mm.secret(data)
|
||||||
.then((response) => {
|
.then(response => {
|
||||||
self.processing = false;
|
self.processing = false;
|
||||||
if (response.secret) {
|
if (response.secret) {
|
||||||
document.getElementById("secret").value = response.secret;
|
document.getElementById('secret').value =
|
||||||
notify.alert(response.message, true);
|
response.secret;
|
||||||
} else {
|
notify.alert(response.message, true);
|
||||||
if (response.type == "mailSent") {
|
} else {
|
||||||
notify.alert(response.message, true);
|
if (response.type == 'mailSent') {
|
||||||
} else {
|
notify.alert(response.message, true);
|
||||||
notify.alert(response.message, false);
|
} else {
|
||||||
}
|
notify.alert(response.message, false);
|
||||||
}
|
}
|
||||||
})
|
}
|
||||||
.catch((err) => {
|
})
|
||||||
self.processing = false;
|
.catch(err => {
|
||||||
notify.alert(err, false);
|
self.processing = false;
|
||||||
});
|
notify.alert(err, false);
|
||||||
} else {
|
});
|
||||||
let data = {
|
} else {
|
||||||
newPass: document.getElementById("new_password").value,
|
let data = {
|
||||||
newPassConfirm: document.getElementById("new_password2").value,
|
newPass: document.getElementById('new_password').value,
|
||||||
secret: document.getElementById("secret").value
|
newPassConfirm: document.getElementById('new_password2').value,
|
||||||
};
|
secret: document.getElementById('secret').value
|
||||||
mm.newPass(data)
|
};
|
||||||
.then((response) => {
|
mm.newPass(data)
|
||||||
self.processing = false;
|
.then(response => {
|
||||||
if (response.type == "passNotCreated") {
|
self.processing = false;
|
||||||
notify.alert(response.message, false);
|
if (response.type == 'passNotCreated') {
|
||||||
} else {
|
notify.alert(response.message, false);
|
||||||
notify.alert(response.message, true);
|
} else {
|
||||||
setTimeout(() => {
|
notify.alert(response.message, true);
|
||||||
window.location = "/dashboard";
|
setTimeout(() => {
|
||||||
}, 1000);
|
window.location = '/dashboard';
|
||||||
}
|
}, 1000);
|
||||||
})
|
}
|
||||||
.catch((err) => {
|
})
|
||||||
self.processing = false;
|
.catch(err => {
|
||||||
notify.alert(err, false);
|
self.processing = false;
|
||||||
});
|
notify.alert(err, false);
|
||||||
}
|
});
|
||||||
}
|
}
|
||||||
handleOptions(e) {
|
}
|
||||||
e.stopPropagation();
|
handleOptions(e) {
|
||||||
e.preventDefault();
|
e.stopPropagation();
|
||||||
let init = document.getElementById("dash-init");
|
e.preventDefault();
|
||||||
let restore = document.getElementById("dash-restore");
|
let init = document.getElementById('dash-init');
|
||||||
if (e.target.id === "init-switch-restore") {
|
let restore = document.getElementById('dash-restore');
|
||||||
init.style.display = "none";
|
if (e.target.id === 'init-switch-restore') {
|
||||||
init.style.visibility = "hidden";
|
init.style.display = 'none';
|
||||||
|
init.style.visibility = 'hidden';
|
||||||
|
|
||||||
restore.style.display = "flex";
|
restore.style.display = 'flex';
|
||||||
restore.style.visibility = "visible";
|
restore.style.visibility = 'visible';
|
||||||
} else {
|
} else {
|
||||||
init.style.display = "flex";
|
init.style.display = 'flex';
|
||||||
init.style.visibility = "visible";
|
init.style.visibility = 'visible';
|
||||||
|
|
||||||
restore.style.display = "none";
|
restore.style.display = 'none';
|
||||||
restore.style.visibility = "hidden";
|
restore.style.visibility = 'hidden';
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,41 +1,41 @@
|
|||||||
import PostIndex from "./PostIndex";
|
import PostIndex from './PostIndex';
|
||||||
import SettingsIndex from "./SettingsIndex";
|
import SettingsIndex from './SettingsIndex';
|
||||||
import NaviIndex from "./NavIndex";
|
import NaviIndex from './NavIndex';
|
||||||
|
|
||||||
export default class DashManager {
|
export default class DashManager {
|
||||||
//--------------------------
|
//--------------------------
|
||||||
// constructor
|
// constructor
|
||||||
//--------------------------
|
//--------------------------
|
||||||
constructor() {
|
constructor() {
|
||||||
this.currentDisplay = "";
|
this.currentDisplay = '';
|
||||||
this.urlPieces = document.URL.split("/");
|
this.urlPieces = document.URL.split('/');
|
||||||
this.chooseDisplay(this.urlPieces[4], this.urlPieces[5]);
|
this.chooseDisplay(this.urlPieces[4], this.urlPieces[5]);
|
||||||
}
|
}
|
||||||
//--------------------------
|
//--------------------------
|
||||||
// methods
|
// methods
|
||||||
//--------------------------
|
//--------------------------
|
||||||
start() {}
|
start() {}
|
||||||
|
|
||||||
chooseDisplay(section, page) {
|
chooseDisplay(section, page) {
|
||||||
this.currentDisplay = "";
|
this.currentDisplay = '';
|
||||||
switch (section) {
|
switch (section) {
|
||||||
case "page":
|
case 'page':
|
||||||
this.currentDisplay = new PostIndex(page);
|
this.currentDisplay = new PostIndex(page);
|
||||||
break;
|
break;
|
||||||
case "settings":
|
case 'settings':
|
||||||
this.currentDisplay = new SettingsIndex();
|
this.currentDisplay = new SettingsIndex();
|
||||||
break;
|
break;
|
||||||
case "navigation":
|
case 'navigation':
|
||||||
this.currentDisplay = new NaviIndex();
|
this.currentDisplay = new NaviIndex();
|
||||||
break;
|
break;
|
||||||
|
|
||||||
default:
|
default:
|
||||||
//just chill
|
//just chill
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
this.start();
|
this.start();
|
||||||
}
|
}
|
||||||
//--------------------------
|
//--------------------------
|
||||||
// event handlers
|
// event handlers
|
||||||
//--------------------------
|
//--------------------------
|
||||||
}
|
}
|
||||||
|
|||||||
@ -0,0 +1,146 @@
|
|||||||
|
import Sortable from 'sortablejs';
|
||||||
|
import DataUtils from '../utils/DataUtils';
|
||||||
|
|
||||||
|
export default class FileManager {
|
||||||
|
//--------------------------
|
||||||
|
// constructor
|
||||||
|
//--------------------------
|
||||||
|
constructor(upload, input, imageList, fileList) {
|
||||||
|
this.upload = upload;
|
||||||
|
this.input = input;
|
||||||
|
this.imageList = imageList;
|
||||||
|
this.fileList = fileList;
|
||||||
|
this.accetableFiles = ['image/jpeg', 'image/gif', 'image/png', 'image/svg'];
|
||||||
|
this.files = [];
|
||||||
|
this.sortedFiles = [];
|
||||||
|
this.storage = [];
|
||||||
|
this.start();
|
||||||
|
}
|
||||||
|
//--------------------------
|
||||||
|
// methods
|
||||||
|
//--------------------------
|
||||||
|
start() {
|
||||||
|
this.upload.addEventListener('dragover', e => this.handleFileActions(e), false);
|
||||||
|
this.upload.addEventListener('drop', e => this.handleFileActions(e), false);
|
||||||
|
this.input.addEventListener('change', e => this.handleFileActions(e), false);
|
||||||
|
|
||||||
|
Sortable.create(this.imageList, {
|
||||||
|
onUpdate: e => {
|
||||||
|
let currentFiles = []; //store current list
|
||||||
|
let items = e.target.children;
|
||||||
|
for (let index = 0; index < items.length; index++) {
|
||||||
|
var item = items[index];
|
||||||
|
currentFiles.push({
|
||||||
|
id: item.getAttribute('id'),
|
||||||
|
earl: item.style.backgroundImage.slice(4, -1).replace(/"/g, '')
|
||||||
|
});
|
||||||
|
}
|
||||||
|
this.reindexFiles(currentFiles, 0);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
getFiles() {
|
||||||
|
return this.files;
|
||||||
|
}
|
||||||
|
|
||||||
|
reindexFiles(sortOrder, step) {
|
||||||
|
let count = sortOrder.length;
|
||||||
|
if (step == 0) this.files = [];
|
||||||
|
var utils = new DataUtils();
|
||||||
|
var path = sortOrder[step].earl.split('/');
|
||||||
|
utils.imgLoad(sortOrder[step].earl).then(blob => {
|
||||||
|
var fresh = new File([blob], path[6], { type: blob.type });
|
||||||
|
this.files.push(fresh);
|
||||||
|
if (this.files.length <= count - 1) {
|
||||||
|
this.reindexFiles(sortOrder, ++step);
|
||||||
|
} else {
|
||||||
|
//console.log('FILES', this.files);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
sortFiles(files) {
|
||||||
|
var self = this;
|
||||||
|
this.files = []; //clear files array
|
||||||
|
this.imageList.innerHTML = '';
|
||||||
|
for (var i = 0, file; (file = files[i]); i++) {
|
||||||
|
var reader = new FileReader();
|
||||||
|
// Closure to capture the file information
|
||||||
|
|
||||||
|
reader.onload = (theFile => {
|
||||||
|
return function (f) {
|
||||||
|
// sort files
|
||||||
|
switch (theFile.type) {
|
||||||
|
case 'image/jpg':
|
||||||
|
case 'image/jpeg':
|
||||||
|
case 'image/gif':
|
||||||
|
case 'image/svg':
|
||||||
|
case 'image/png':
|
||||||
|
//create element and add to list
|
||||||
|
var image = document.createElement('img');
|
||||||
|
image.src = f.target.result;
|
||||||
|
image.title = escape(theFile.name);
|
||||||
|
var span = document.createElement('div');
|
||||||
|
span.style.background =
|
||||||
|
'url(' +
|
||||||
|
f.target.result +
|
||||||
|
') no-repeat center center / cover';
|
||||||
|
span.className = 'img-item';
|
||||||
|
image.setAttribute('id', i);
|
||||||
|
self.storage.push([
|
||||||
|
{
|
||||||
|
id: 'page_image' + i,
|
||||||
|
data: f.target.result,
|
||||||
|
type: theFile.type,
|
||||||
|
name: escape(theFile.name)
|
||||||
|
}
|
||||||
|
]);
|
||||||
|
self.imageList.appendChild(span);
|
||||||
|
//add to files list
|
||||||
|
self.files.push(theFile);
|
||||||
|
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
})(file);
|
||||||
|
// Read in the image file as a data URL.
|
||||||
|
reader.readAsDataURL(file);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
//--------------------------
|
||||||
|
// event handlers
|
||||||
|
//--------------------------
|
||||||
|
handleFileActions(e) {
|
||||||
|
e.stopPropagation();
|
||||||
|
e.preventDefault();
|
||||||
|
let self = this;
|
||||||
|
let rawList = [];
|
||||||
|
let sortedList = [];
|
||||||
|
let notOnTheList = [];
|
||||||
|
|
||||||
|
switch (e.type) {
|
||||||
|
case 'dragover':
|
||||||
|
e.dataTransfer.dropEffect = 'copy'; // Explicitly show this is a copy.
|
||||||
|
break;
|
||||||
|
case 'change':
|
||||||
|
case 'drop':
|
||||||
|
e.type == 'drop'
|
||||||
|
? (rawList = e.dataTransfer.files)
|
||||||
|
: (rawList = e.target.files);
|
||||||
|
//this.sortFiles(freshList);
|
||||||
|
for (var i = 0, f; (f = rawList[i]); i++) {
|
||||||
|
// check witch files are cool to upload
|
||||||
|
if (this.accetableFiles.includes(f.type)) {
|
||||||
|
sortedList.push(f);
|
||||||
|
} else {
|
||||||
|
notOnTheList.push(f);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
//send for sorting
|
||||||
|
self.sortFiles(sortedList);
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue