xarvh/fipamo
1
0
Fork 0
forked from projects/fipamo
Code Pull requests Activity

started implementation of multiple file uploads and sorting

Browse source
This commit is contained in:
Ro 2022-02-12 18:35:09 +00:00
parent 8f9021bb7d
commit 3c52bca8ba
21 changed files with 9549 additions and 818 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
.eslintrc
View file

@ -49,7 +49,7 @@
"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,

7
.prettierignore Normal file
View file

@ -0,0 +1,7 @@
.babelrc
README.md
*.twig
*.sass
*.json
*.php
*.md

17
.prettierrc Normal file
View file

@ -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
}

11
brain/controller/DashControl.inc.php
View file

@ -108,12 +108,23 @@ class DashControl
} else { } else {
$views = (new Themes())->getCustomViews(); $views = (new Themes())->getCustomViews();
} }
$imageList = explode(",", $page["feature"]);
$images = [];
foreach ($imageList as $item) {
$image = trim($item);
if ($item != null || $item != "") {
array_push($images, $item);
}
}
$pageOptions = [ $pageOptions = [
"title" => "Fipamo | Edit Page", "title" => "Fipamo | Edit Page",
"page" => $page, "page" => $page,
"mode" => $mode, "mode" => $mode,
"token" => Session::get("form_token"), "token" => Session::get("form_token"),
"status" => Session::active(), "status" => Session::active(),
"images" => $images,
"views" => $views, "views" => $views,
]; ];
break; break;

36
brain/data/Book.inc.php
View file

@ -40,7 +40,8 @@ class Book
} }
$page = find($content, ["uuid" => $body["uuid"]]); $page = find($content, ["uuid" => $body["uuid"]]);
$image = $request->getUploadedFiles(); $files = $request->getUploadedFiles();
$member = Session::get("member"); $member = Session::get("member");
if ($task != "create") { if ($task != "create") {
@ -52,13 +53,29 @@ class Book
$path = date("Y") . "/" . date("m"); $path = date("Y") . "/" . date("m");
} }
if (isset($image["feature_image"])) { if (isset($files)) {
//var_dump($files);
if ($task != "create") { if ($task != "create") {
$feature = $imageList = "";
"/assets/images/blog/" . $imagesPath = "/assets/images/blog/" . $path . "/";
$path . foreach ($files["page_files"] as $file) {
"/" . $type = $file->getClientMediaType();
$image["feature_image"]->getClientFileName(); switch ($type) {
case "image/jpeg":
case "image/png":
case "image/gif":
case "image/svg":
$imageList =
$imageList . $imagesPath . $file->getClientFileName() . ", ";
FileUploader::uploadFile(
"../public/assets/images/blog/" . $path . "/",
$file
);
break;
}
}
$feature = $imageList;
} else { } else {
$feature = $feature =
"/assets/images/blog/" . "/assets/images/blog/" .
@ -66,11 +83,6 @@ class Book
"/" . "/" .
$image["feature_image"]->getClientFileName(); $image["feature_image"]->getClientFileName();
} }
FileUploader::uploadFile(
"../public/assets/images/blog/" . $path . "/",
$image["feature_image"]
);
} else { } else {
if (isset($body["feature_image"])) { if (isset($body["feature_image"])) {
$url = explode("/", $body["feature_image"]); $url = explode("/", $body["feature_image"]);

12
brain/data/Contents.inc.php
View file

@ -85,7 +85,7 @@ class Contents
"extensions" => ["basic", "relative-a", "relative-image", "iframe"], "extensions" => ["basic", "relative-a", "relative-image", "iframe"],
"tags" => [ "tags" => [
"div" => [ "div" => [
"allowed_attributes" => ["class", "title"], "allowed_attributes" => ["class", "title", "id", "style"],
], ],
"img" => [ "img" => [
"allowed_attributes" => ["src", "alt", "title", "class"], "allowed_attributes" => ["src", "alt", "title", "class"],
@ -100,6 +100,15 @@ class Contents
$scrubbed = $sanitizer->sanitize($result->getContent()); $scrubbed = $sanitizer->sanitize($result->getContent());
$imageList = explode(",", $meta["feature"]);
$images = [];
foreach ($imageList as $item) {
$image = trim($item);
if ($item != null || $item != "") {
array_push($images, $item);
}
}
//sort attributes into page object //sort attributes into page object
$page = [ $page = [
"id" => $meta["id"], "id" => $meta["id"],
@ -124,6 +133,7 @@ class Contents
"filePath" => $file, "filePath" => $file,
"content" => $parsed->getContent(), "content" => $parsed->getContent(),
"html" => $scrubbed, "html" => $scrubbed,
"media" => $images,
]; ];
//checks for duplicates //checks for duplicates
$uuid = $meta["uuid"]; $uuid = $meta["uuid"];

2
brain/data/Render.inc.php
View file

@ -12,6 +12,7 @@ class Render
public function __construct() public function __construct()
{ {
$config = new Settings(); $config = new Settings();
//TODO: Add theme folder to loader
$this->loader = new \Twig\Loader\FilesystemLoader("../content/themes"); $this->loader = new \Twig\Loader\FilesystemLoader("../content/themes");
$this->twig = new \Twig\Environment($this->loader, []); $this->twig = new \Twig\Environment($this->loader, []);
$settings = $config->getSettings(); $settings = $config->getSettings();
@ -51,6 +52,7 @@ class Render
} }
//copy current theme assets to public //copy current theme assets to public
//TODO: change to just grab directory contents for scripts and css
if (is_file("../public/assets/css/base.css")) { if (is_file("../public/assets/css/base.css")) {
unlink("../public/assets/css/base.css"); unlink("../public/assets/css/base.css");
} }

2
brain/views/dash/forms/login.twig
View file

@ -1,7 +1,7 @@
<div id="dash-login"> <div id="dash-login">
<div id="dash-form" class="dash-form"> <div id="dash-form" class="dash-form">
<img id="the-logo" src="/assets/images/global/fipamo-logo.svg"/> <img id="the-logo" src="/assets/images/global/fipamo-logo.svg"/>
<form id="login" class='login' name="login" action="/dashboard/login" method="POST"> <form id="login" class='login' name="login" method="post">
<input type="text" name="handle" class="form-control" placeholder="Handle" required "> <input type="text" name="handle" class="form-control" placeholder="Handle" required ">
<input type="password" name="password" class="form-control" placeholder="Password" required"> <input type="password" name="password" class="form-control" placeholder="Password" required">
<button id="login-btn" class='login-btn' type='submit'> <button id="login-btn" class='login-btn' type='submit'>

31
brain/views/dash/page-edit.twig
View file

@ -14,6 +14,7 @@
{% set content = page['content'] %} {% set content = page['content'] %}
{% set date = page['created'] %} {% set date = page['created'] %}
{% set updated = page['updated'] %} {% set updated = page['updated'] %}
{% set media = page['media'] %}
{% else %} {% else %}
{% set id = '' %} {% set id = '' %}
{% set uuid = '' %} {% set uuid = '' %}
@ -25,6 +26,7 @@
{% set content = '' %} {% set content = '' %}
{% set date = '' %} {% set date = '' %}
{% set updated = '' %} {% set updated = '' %}
{% set media = '' %}
{% endif %} {% endif %}
{% block title %} {% block title %}
@ -32,7 +34,7 @@
{% endblock %} {% endblock %}
{% block stylesheets %} {% block stylesheets %}
<link rel="stylesheet" type="text/css" href="/assets/css/dash.css?=qwert"> <link rel="stylesheet" type="text/css" href="/assets/css/dash.css?=weret">
{% endblock %} {% endblock %}
{% block mainContent %} {% block mainContent %}
@ -44,15 +46,26 @@
DRAG AND DROP IMAGE OR <label for="featured-image-upload">CLICK TO CHOSE</label> DRAG AND DROP IMAGE OR <label for="featured-image-upload">CLICK TO CHOSE</label>
</div> </div>
{% else %} {% else %}
<div id="featured-new-image-btn"> <div id="page-file-manager">
<button id="new-feature-upload"> <div id="page-file-wrapper">
<svg id="new-feature-upload" viewbox="0 0 20 20" class="icons"><use xlink:href="/assets/images/global/sprite.svg#entypo-image-inverted"/></svg> <div id="page-file-drop">
</button> <label for="page-files-upload">DRAG AND DROP FILES OR CLICK TO SELECT</label>
</div> </div>
<div id="featured-image-drop"> IMAGES AND VIDEO
<img id="featured-image" src="{{ feature }}"/> <div id="page-images-list">
{% if media|length > 1 %}
{% for image in media %}
<div id="{{loop.index0}}" class="img-item" style="background: url({{ image }}) no-repeat center center / cover"></div>
{% endfor %}
{% else %}
<div id="0" class="img-item" style="background: url({{ media[0] }}) no-repeat center center / cover">
{% endif %}
</div>
<div id="page-files-list"></div>
</div> </div>
</div>
{% endif %} {% endif %}
</div> </div>
@ -95,7 +108,7 @@
<span id="post-date" type="text"> <span id="post-date" type="text">
{{ updated }} {{ updated }}
</span> </span>
<input id="featured-image-upload" type="file" name="featured-image-upload"/> <input id="page-files-upload" type="file" name="page-files-upload" multiple/>
<input id="post-image-upload" type="file" name="post-image-upload"/> <input id="post-image-upload" type="file" name="post-image-upload"/>
<input id="form_token" name="token" type="hidden" value="{{ token }}"> <input id="form_token" name="token" type="hidden" value="{{ token }}">
</div> </div>
@ -119,5 +132,5 @@
{% endblock %} {% endblock %}
{% block javascripts %} {% block javascripts %}
<script src="/assets/scripts/Start.js" type="text/javascript"></script> <script src="/assets/scripts/Start.js?=dfgbg" type="text/javascript"></script>
{% endblock %} {% endblock %}

2
brain/views/dash/partials/index.twig
View file

@ -25,7 +25,7 @@
<br/> <br/>
{% if data["entryCount"] != 0 %} {% if data["entryCount"] != 0 %}
{% for page in data['pages'] %} {% for page in data['pages'] %}
<a href="/dashboard/page/edit/{{ page.uuid }}" id="{{ page.uuid }}" class="post-link" style="background: url({{ page.feature }}) no-repeat center center / cover"> <a href="/dashboard/page/edit/{{ page.uuid }}" id="{{ page.uuid }}" class="post-link" style="background: url({{ page.media[0] }}) no-repeat center center / cover">
<label> <label>
{{ page.title }} {{ page.title }}
</label> </label>

21
package-lock.json generated
View file

@ -27,7 +27,8 @@
"babel-cli": "^6.26.0", "babel-cli": "^6.26.0",
"eslint": "^8.5.0", "eslint": "^8.5.0",
"eslint-plugin-babel": "^5.3.1", "eslint-plugin-babel": "^5.3.1",
"parcel": "^2.0.1" "parcel": "^2.0.1",
"prettier": "^2.5.1"
} }
}, },
"node_modules/@babel/code-frame": { "node_modules/@babel/code-frame": {
@ -11558,6 +11559,18 @@
"node": ">=0.10.0" "node": ">=0.10.0"
} }
}, },
"node_modules/prettier": {
"version": "2.5.1",
"resolved": "https://registry.npmjs.org/prettier/-/prettier-2.5.1.tgz",
"integrity": "sha512-vBZcPRUR5MZJwoyi3ZoyQlc1rXeEck8KgeC9AwwOn+exuxLxq5toTRDTSaVrXHxelDMHy9zlicw8u66yxoSUFg==",
"dev": true,
"bin": {
"prettier": "bin-prettier.js"
},
"engines": {
"node": ">=10.13.0"
}
},
"node_modules/prismjs": { "node_modules/prismjs": {
"version": "1.25.0", "version": "1.25.0",
"resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.25.0.tgz", "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.25.0.tgz",
@ -23110,6 +23123,12 @@
"dev": true, "dev": true,
"optional": true "optional": true
}, },
"prettier": {
"version": "2.5.1",
"resolved": "https://registry.npmjs.org/prettier/-/prettier-2.5.1.tgz",
"integrity": "sha512-vBZcPRUR5MZJwoyi3ZoyQlc1rXeEck8KgeC9AwwOn+exuxLxq5toTRDTSaVrXHxelDMHy9zlicw8u66yxoSUFg==",
"dev": true
},
"prismjs": { "prismjs": {
"version": "1.25.0", "version": "1.25.0",
"resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.25.0.tgz", "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.25.0.tgz",

3
package.json
View file

@ -12,7 +12,8 @@
"babel-cli": "^6.26.0", "babel-cli": "^6.26.0",
"eslint": "^8.5.0", "eslint": "^8.5.0",
"eslint-plugin-babel": "^5.3.1", "eslint-plugin-babel": "^5.3.1",
"parcel": "^2.0.1" "parcel": "^2.0.1",
"prettier": "^2.5.1"
}, },
"dependencies": { "dependencies": {
"@babel/core": "^7.16.5", "@babel/core": "^7.16.5",

42
public/assets/css/dash.css
View file

@ -3164,31 +3164,59 @@ select {
#post-edit-index #post-edit-index-wrapper #post-header #post-header-wrapper #post-meta #post-options button[data-active=true] svg { #post-edit-index #post-edit-index-wrapper #post-header #post-header-wrapper #post-meta #post-options button[data-active=true] svg {
fill: #1D3040; fill: #1D3040;
} }
#post-edit-index #post-edit-index-wrapper #post-header #post-header-wrapper #post-meta #featured-image-upload, #post-edit-index #post-edit-index-wrapper #post-header #post-header-wrapper #post-meta #post-image-upload { #post-edit-index #post-edit-index-wrapper #post-header #post-header-wrapper #post-meta #page-files-upload, #post-edit-index #post-edit-index-wrapper #post-header #post-header-wrapper #post-meta #post-image-upload {
display: none; display: none;
} }
#post-edit-index #post-edit-index-wrapper #post-feature { #post-edit-index #post-edit-index-wrapper #post-feature {
width: 100%; width: 100%;
} }
#post-edit-index #post-edit-index-wrapper #post-feature #featured-image-drop { #post-edit-index #post-edit-index-wrapper #post-feature #page-file-manager {
background: #f5ab35;
width: 100%;
min-height: 300px;
}
#post-edit-index #post-edit-index-wrapper #post-feature #page-file-manager #page-file-wrapper {
width: 100%;
max-width: 900px;
padding: 10px;
margin: 0 auto;
font-weight: bold;
font-color: #1D3040;
font-size: 1em;
}
#post-edit-index #post-edit-index-wrapper #post-feature #page-file-manager #page-file-wrapper #page-file-drop {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
width: 100%; width: 100%;
min-height: 200px; min-height: 100px;
background: black; background: #EFEBE3;
color: #1D3040; color: #1D3040;
vertical-align: middle; vertical-align: middle;
font-family: "Lucida Console", Monaco, monospace; border-radius: 5px;
margin: 0 0 10px 0;
} }
#post-edit-index #post-edit-index-wrapper #post-feature #featured-image-drop label { #post-edit-index #post-edit-index-wrapper #post-feature #page-file-manager #page-file-wrapper #page-file-drop label {
cursor: pointer; cursor: pointer;
font-weight: 600px;
text-transform: capitalize;
} }
#post-edit-index #post-edit-index-wrapper #post-feature #featured-image-drop img { #post-edit-index #post-edit-index-wrapper #post-feature #page-file-manager #page-file-wrapper #page-file-drop img {
width: 100%; width: 100%;
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
#post-edit-index #post-edit-index-wrapper #post-feature #page-file-manager #page-file-wrapper #page-images-list {
padding: 10px 0 0 0;
}
#post-edit-index #post-edit-index-wrapper #post-feature #page-file-manager #page-file-wrapper #page-images-list .img-item {
height: 150px;
width: 23.8%;
border-radius: 3px;
margin: 0 10px 10px 0;
display: inline-block;
cursor: pointer;
}
#post-edit-index #post-edit-index-wrapper #post-feature #featured-new-image-btn { #post-edit-index #post-edit-index-wrapper #post-feature #featured-new-image-btn {
position: absolute; position: absolute;
margin: 20px; margin: 20px;

8476
public/assets/scripts/Start.js
View file

File diff suppressed because one or more lines are too long

128
src/com/Base.js
View file

@ -1,9 +1,9 @@
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();
@ -21,33 +21,35 @@ export default class Base {
//-------------------------- //--------------------------
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")) { if (document.getElementById('dash-form')) {
document document
.getElementById("login-btn") .getElementById('login-btn')
.addEventListener("click", (e) => this.handleLogin(e)); .addEventListener('click', e => this.handleLogin(e));
} else { } else {
document document
.getElementById("init-blog") .getElementById('init-blog')
.addEventListener("click", (e) => this.handleSetup(e)); .addEventListener('click', e => this.handleSetup(e));
document document
.getElementById("blog-restore") .getElementById('blog-restore')
.addEventListener("click", (e) => this.handleRestore(e)); .addEventListener('click', e => this.handleRestore(e));
} }
} else if (document.getElementById("dash-reset")) { } else if (document.getElementById('dash-reset')) {
document document
.getElementById("get-secret-btn") .getElementById('get-secret-btn')
.addEventListener("click", (e) => this.handleReset(e)); .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();
} }
@ -60,13 +62,12 @@ export default class Base {
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);
@ -74,11 +75,11 @@ export default class Base {
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);
}); });
@ -89,11 +90,13 @@ export default class Base {
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(
document.getElementById('init-form')
);
let mm = new Maintenance(); let mm = new Maintenance();
this.processing = true; this.processing = true;
mm.create(setUpForm) mm.create(setUpForm)
.then((response) => { .then(response => {
if (response.type === DataEvent.API_INIT_LAME) { if (response.type === DataEvent.API_INIT_LAME) {
self.processing = false; self.processing = false;
notify.alert(response.message, false); notify.alert(response.message, false);
@ -101,11 +104,11 @@ export default class Base {
self.processing = false; self.processing = false;
notify.alert(response.message, true); notify.alert(response.message, true);
setTimeout(() => { setTimeout(() => {
window.location = "/dashboard"; window.location = '/dashboard';
}, 700); }, 700);
} }
}) })
.catch((err) => { .catch(err => {
self.processing = false; self.processing = false;
notify.alert(err, false); notify.alert(err, false);
}); });
@ -117,10 +120,10 @@ export default class Base {
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);
@ -128,11 +131,11 @@ export default class Base {
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);
}); });
@ -143,49 +146,50 @@ export default class Base {
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 =
response.secret;
notify.alert(response.message, true); notify.alert(response.message, true);
} else { } else {
if (response.type == "mailSent") { if (response.type == 'mailSent') {
notify.alert(response.message, true); notify.alert(response.message, true);
} else { } else {
notify.alert(response.message, false); notify.alert(response.message, false);
} }
} }
}) })
.catch((err) => { .catch(err => {
self.processing = false; self.processing = false;
notify.alert(err, false); notify.alert(err, false);
}); });
} else { } else {
let data = { let data = {
newPass: document.getElementById("new_password").value, newPass: document.getElementById('new_password').value,
newPassConfirm: document.getElementById("new_password2").value, newPassConfirm: document.getElementById('new_password2').value,
secret: document.getElementById("secret").value secret: document.getElementById('secret').value
}; };
mm.newPass(data) mm.newPass(data)
.then((response) => { .then(response => {
self.processing = false; self.processing = false;
if (response.type == "passNotCreated") { if (response.type == 'passNotCreated') {
notify.alert(response.message, false); notify.alert(response.message, false);
} else { } else {
notify.alert(response.message, true); notify.alert(response.message, true);
setTimeout(() => { setTimeout(() => {
window.location = "/dashboard"; window.location = '/dashboard';
}, 1000); }, 1000);
} }
}) })
.catch((err) => { .catch(err => {
self.processing = false; self.processing = false;
notify.alert(err, false); notify.alert(err, false);
}); });
@ -194,20 +198,20 @@ export default class Base {
handleOptions(e) { handleOptions(e) {
e.stopPropagation(); e.stopPropagation();
e.preventDefault(); e.preventDefault();
let init = document.getElementById("dash-init"); let init = document.getElementById('dash-init');
let restore = document.getElementById("dash-restore"); let restore = document.getElementById('dash-restore');
if (e.target.id === "init-switch-restore") { if (e.target.id === 'init-switch-restore') {
init.style.display = "none"; init.style.display = 'none';
init.style.visibility = "hidden"; 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';
} }
} }
} }

13
src/com/actions/PageActions.js
View file

@ -7,7 +7,7 @@ export default class PostActions {
//-------------------------- //--------------------------
// methods // methods
//-------------------------- //--------------------------
collectInfo(image) { collectInfo(files) {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
let pageInfo = new FormData(); let pageInfo = new FormData();
let txt = document.createElement("textarea"); let txt = document.createElement("textarea");
@ -64,12 +64,15 @@ export default class PostActions {
"form_token", "form_token",
document.getElementById("form_token").value document.getElementById("form_token").value
); );
if (image != null || image != undefined) { if (files.length > 0 && files != null) {
if (image.type.match("image.*")) { for (var i = 0; i < files.length; i++) {
pageInfo.append("feature_image", image, image.name); var file = files[i];
if (file.type.match("image.*")) {
pageInfo.append("page_files[]", file, file.name);
} else { } else {
reject("Not an image file"); reject("Not an image file");
} }
}
} else { } else {
//check to see if image exists //check to see if image exists
if (document.getElementById("featured-image")) { if (document.getElementById("featured-image")) {
@ -81,7 +84,7 @@ export default class PostActions {
//pageInfo.append("feature_image", null); //pageInfo.append("feature_image", null);
} }
} }
//console.log("FILES", files);
resolve(pageInfo); resolve(pageInfo);
}); });
} }

18
src/com/controllers/DashManager.js
View file

@ -1,14 +1,14 @@
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]);
} }
//-------------------------- //--------------------------
@ -17,15 +17,15 @@ export default class DashManager {
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;

215
src/com/controllers/PageEditor.js
View file

@ -3,14 +3,15 @@ import FipamoAdminAPI, {
TASK_PAGE_CREATE, TASK_PAGE_CREATE,
TASK_PAGE_EDIT, TASK_PAGE_EDIT,
TASK_PAGE_DELETE TASK_PAGE_DELETE
} from "../../libraries/FipamoAdminAPI"; } from '../../libraries/FipamoAdminAPI';
import Maintenance from "./MaintenanceManager"; import Maintenance from './MaintenanceManager';
import * as DataEvent from "../events/DataEvent"; import * as DataEvent from '../events/DataEvent';
import PageActions from "../actions/PageActions"; import PageActions from '../actions/PageActions';
import * as EditorEvent from "../events/EditorEvent"; import * as EditorEvent from '../events/EditorEvent';
//import TinyDatePicker from 'tiny-date-picker'; TODO: Reactivate for scheduled publishing //import TinyDatePicker from 'tiny-date-picker'; TODO: Reactivate for scheduled publishing
import TextEditor from "../ui/TextEditor"; import TextEditor from '../ui/TextEditor';
import Notfications from "../ui/Notifications"; import Notfications from '../ui/Notifications';
import FileManager from '../ui/FileManager';
const notify = new Notfications(); const notify = new Notfications();
export default class PostEditor { export default class PostEditor {
//-------------------------- //--------------------------
@ -21,35 +22,40 @@ export default class PostEditor {
let self = this; let self = this;
this.admin = new FipamoAdminAPI( this.admin = new FipamoAdminAPI(
null, null,
document.getElementById("notify-progress") document.getElementById('notify-progress')
); );
this.mm = new Maintenance( this.mm = new Maintenance(
null, null,
null, null,
document.getElementById("notify-progress") document.getElementById('notify-progress')
); );
this.urlPieces = document.URL.split("/"); this.urlPieces = document.URL.split('/');
this.post = []; this.post = [];
this.postID = null; this.postID = null;
this.postUUID = null; this.postUUID = null;
this.postLayout = null; this.postLayout = null;
if (document.getElementById("post-edit-index").getAttribute("data-index")) { this.fm = null;
if (
document
.getElementById('post-edit-index')
.getAttribute('data-index')
) {
this.postID = document this.postID = document
.getElementById("post-edit-index") .getElementById('post-edit-index')
.getAttribute("data-index"); .getAttribute('data-index');
this.postUUID = document this.postUUID = document
.getElementById("post-edit-index") .getElementById('post-edit-index')
.getAttribute("data-uuid"); .getAttribute('data-uuid');
this.postLayout = document this.postLayout = document
.getElementById("post-edit-index") .getElementById('post-edit-index')
.getAttribute("data-layout"); .getAttribute('data-layout');
} }
if (document.getElementById("edit")) { if (document.getElementById('edit')) {
this.editor = new TextEditor( this.editor = new TextEditor(
document.getElementById("edit"), document.getElementById('edit'),
document.getElementById("header").offsetHeight + document.getElementById('header').offsetHeight +
document.getElementById("post-header").offsetHeight + document.getElementById('post-header').offsetHeight +
document.getElementById("post-feature").offsetHeight document.getElementById('post-feature').offsetHeight
); );
this.editor.addListener( this.editor.addListener(
EditorEvent.EDITOR_DELETE, EditorEvent.EDITOR_DELETE,
@ -58,7 +64,10 @@ export default class PostEditor {
); );
this.editor.addListener( this.editor.addListener(
EditorEvent.EDITOR_UPLOAD_POST_IMAGE, EditorEvent.EDITOR_UPLOAD_POST_IMAGE,
() => this.handleEditorOptions(EditorEvent.EDITOR_UPLOAD_POST_IMAGE), () =>
this.handleEditorOptions(
EditorEvent.EDITOR_UPLOAD_POST_IMAGE
),
false false
); );
this.editor.addListener( this.editor.addListener(
@ -71,9 +80,9 @@ export default class PostEditor {
() => this.handleEditorOptions(EditorEvent.EDITOR_SAVE), () => this.handleEditorOptions(EditorEvent.EDITOR_SAVE),
false false
); );
document.getElementById("post-image-upload").addEventListener( document.getElementById('post-image-upload').addEventListener(
"change", 'change',
(e) => { e => {
self.handleImageUpload(e.target.id, e.target.files); self.handleImageUpload(e.target.id, e.target.files);
}, },
false false
@ -94,28 +103,19 @@ export default class PostEditor {
// methods // methods
//-------------------------- //--------------------------
start() { start() {
if (document.getElementById("featured-image-drop")) { if (document.getElementById('page-file-drop')) {
document //insert fileManager here
.getElementById("featured-image-drop") this.fm = new FileManager(
.addEventListener("dragover", this.handleImageActions, false); document.getElementById('page-file-drop'),
document document.getElementById('page-files-upload'),
.getElementById("featured-image-drop") document.getElementById('page-images-list'),
.addEventListener("drop", this.handleImageActions, false); document.getElementById('page-files-list')
document );
.getElementById("featured-image-upload") var optionButtons = document.querySelectorAll('.post-option-btn');
.addEventListener("change", (e) => this.handleImageActions(e), false);
if (document.getElementById("new-feature-upload")) {
document
.getElementById("new-feature-upload")
.addEventListener("click", () => {
document.getElementById("featured-image-upload").click();
});
}
var optionButtons = document.querySelectorAll(".post-option-btn");
for (var i = 0, length = optionButtons.length; i < length; i++) { for (var i = 0, length = optionButtons.length; i < length; i++) {
optionButtons[i].addEventListener( optionButtons[i].addEventListener(
"click", 'click',
(e) => this.handlePostOptions(e), e => this.handlePostOptions(e),
false false
); );
} }
@ -127,24 +127,24 @@ export default class PostEditor {
handlePostOptions(e) { handlePostOptions(e) {
let currentOption = null; let currentOption = null;
switch (e.target.id) { switch (e.target.id) {
case "option-page-icon": case 'option-page-icon':
case "option-menu-pin": case 'option-menu-pin':
currentOption = document.getElementById("option-menu-pin"); currentOption = document.getElementById('option-menu-pin');
break; break;
case "option-feature-icon": case 'option-feature-icon':
case "option-feature": case 'option-feature':
currentOption = document.getElementById("option-feature"); currentOption = document.getElementById('option-feature');
break; break;
case "option-published-icon": case 'option-published-icon':
case "option-published": case 'option-published':
currentOption = document.getElementById("option-published"); currentOption = document.getElementById('option-published');
break; break;
} }
if (currentOption != null) { if (currentOption != null) {
let active = currentOption.getAttribute("data-active"); let active = currentOption.getAttribute('data-active');
active == "false" active == 'false'
? currentOption.setAttribute("data-active", "true") ? currentOption.setAttribute('data-active', 'true')
: currentOption.setAttribute("data-active", "false"); : currentOption.setAttribute('data-active', 'false');
} }
} }
handleEditorOptions(e) { handleEditorOptions(e) {
@ -153,20 +153,17 @@ export default class PostEditor {
switch (e) { switch (e) {
case EditorEvent.EDITOR_SAVE: case EditorEvent.EDITOR_SAVE:
case EditorEvent.EDITOR_UPDATE: case EditorEvent.EDITOR_UPDATE:
var task = ""; var task = '';
e === EditorEvent.EDITOR_SAVE e === EditorEvent.EDITOR_SAVE
? (task = TASK_PAGE_CREATE) ? (task = TASK_PAGE_CREATE)
: (task = TASK_PAGE_EDIT); : (task = TASK_PAGE_EDIT);
new PageActions()
.collectInfo( new PageActions().collectInfo(this.fm.getFiles()).then(page => {
document.getElementById("featured-image-upload").files[0]
)
.then((page) => {
self.processing = true; self.processing = true;
notify.alert("Writing down changes", null); notify.alert('Writing down changes', null);
self.admin self.admin
.pageActions(task, page) .pageActions(task, page)
.then((r) => { .then(r => {
self.processing = false; self.processing = false;
if ( if (
r.type === DataEvent.PAGE_ERROR || r.type === DataEvent.PAGE_ERROR ||
@ -178,35 +175,39 @@ export default class PostEditor {
notify.alert(r.message, true); notify.alert(r.message, true);
} else { } else {
notify.alert(r.message, true); notify.alert(r.message, true);
window.location = "/dashboard/page/edit/" + r.id; window.location =
'/dashboard/page/edit/' + r.id;
} }
} }
}) })
.catch((err) => { .catch(err => {
self.processing = false; self.processing = false;
notify.alert(err, false); notify.alert(err, false);
}); });
}); });
break; break;
case EditorEvent.EDITOR_DELETE: case EditorEvent.EDITOR_DELETE:
if (this.postLayout === "index") { if (this.postLayout === 'index') {
notify.alert("Index cannot be deleted", false); notify.alert('Index cannot be deleted', false);
return; return;
} }
if (confirm("AYE! You know you're deleting this post, right?")) { if (
confirm("AYE! You know you're deleting this post, right?")
) {
new PageActions() new PageActions()
.collectInfo( .collectInfo(
document.getElementById("featured-image-upload").files[0] document.getElementById('featured-image-upload')
.files[0]
) )
.then((page) => { .then(page => {
self.processing = true; self.processing = true;
this.admin this.admin
.pageActions(TASK_PAGE_DELETE, page) .pageActions(TASK_PAGE_DELETE, page)
.then(() => { .then(() => {
self.processing = false; self.processing = false;
window.location = "/dashboard/pages"; window.location = '/dashboard/pages';
}) })
.catch((err) => { .catch(err => {
self.processing = false; self.processing = false;
notify.alert(err, false); notify.alert(err, false);
}); });
@ -217,70 +218,30 @@ export default class PostEditor {
} }
break; break;
case EditorEvent.EDITOR_UPLOAD_POST_IMAGE: case EditorEvent.EDITOR_UPLOAD_POST_IMAGE:
document.getElementById("post-image-upload").click(); document.getElementById('post-image-upload').click();
break; break;
} }
} }
handleImageActions(e) {
e.stopPropagation();
e.preventDefault();
switch (e.type) {
case "dragover":
e.dataTransfer.dropEffect = "copy"; // Explicitly show this is a copy.
break;
case "change":
case "drop":
e.type == "drop"
? (PostEditor.uploadFiles = e.dataTransfer.files)
: (PostEditor.uploadFiles = e.target.files);
for (var i = 0, f; (f = PostEditor.uploadFiles[i]); i++) {
// Only process image files.
//console.log("FILE TYPE", f.type);
if (!f.type.match("image.*")) {
alert("This is not an image. \nBad user. BAD.");
continue;
}
var reader = new FileReader();
// Closure to capture the file information.
reader.onload = (function (theFile) {
return function (f) {
// Render thumbnail.
var image = document.createElement("img");
image.src = f.target.result;
image.title = escape(theFile.name);
var span = document.createElement("div");
span.innerHTML = [
'<img src="',
f.target.result,
'" title="',
escape(theFile.name),
'"/>'
].join("");
document.getElementById("featured-image-drop").innerHTML = "";
document.getElementById("featured-image-drop").appendChild(image);
};
})(f);
// Read in the image file as a data URL.
reader.readAsDataURL(f);
}
}
}
handleImageUpload(type, files) { handleImageUpload(type, files) {
let self = this; let self = this;
notify.alert("Uploading Image", null); notify.alert('Uploading Image', null);
self.mm self.mm
.imageUpload(type, files) .imageUpload(type, files)
.then((r) => { .then(r => {
if (r.type == DataEvent.POST_IMAGE_ADDED) { if (r.type == DataEvent.POST_IMAGE_ADDED) {
self.editor.notify(EditorEvent.EDITOR_UPLOAD_POST_IMAGE, r.url); self.editor.notify(
notify.alert("Image Added to Entry", true); EditorEvent.EDITOR_UPLOAD_POST_IMAGE,
r.url
);
notify.alert('Image Added to Entry', true);
} else { } else {
notify.alert("Uh oh. Image not added", false); notify.alert('Uh oh. Image not added', false);
} }
}) })
.catch(() => { .catch(() => {
notify.alert("Uh oh. Image not added", false); notify.alert('Uh oh. Image not added', false);
//console.log('ERROR', err); //console.log('ERROR', err);
}); });
} }

146
src/com/ui/FileManager.js Normal file
View file

@ -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;
}
}
}

15
src/com/utils/DataUtils.js
View file

@ -11,13 +11,13 @@ export default class DataUtils {
'use strict'; 'use strict';
// Create new promise with the Promise() constructor; // Create new promise with the Promise() constructor;
// This has as its argument a function with two parameters, resolve and reject // This has as its argument a function with two parameters, resolve and reject
return new Promise(function(resolve, reject) { return new Promise(function (resolve, reject) {
// Standard XHR to load an image // Standard XHR to load an image
var request = new XMLHttpRequest(); var request = new XMLHttpRequest();
request.open('GET', url); request.open('GET', url);
request.responseType = 'blob'; request.responseType = 'blob';
// When the request loads, check whether it was successful // When the request loads, check whether it was successful
request.onload = function() { request.onload = function () {
if (request.status === 200) { if (request.status === 200) {
// If successful, resolve the promise by passing back the request response // If successful, resolve the promise by passing back the request response
resolve(request.response); resolve(request.response);
@ -25,12 +25,13 @@ export default class DataUtils {
// If it fails, reject the promise with a error message // If it fails, reject the promise with a error message
reject( reject(
new Error( new Error(
"Image didn't load successfully; error code:" + request.statusText "Image didn't load successfully; error code:" +
request.statusText
) )
); );
} }
}; };
request.onerror = function() { request.onerror = function () {
// Also deal with the case when the entire request fails to begin with // Also deal with the case when the entire request fails to begin with
// This is probably a network error, so reject the promise with an appropriate message // This is probably a network error, so reject the promise with an appropriate message
reject(new Error('There was a network error.')); reject(new Error('There was a network error.'));
@ -42,14 +43,14 @@ export default class DataUtils {
loadImage(src) { loadImage(src) {
'use strict'; 'use strict';
let self = this; let self = this;
return new Promise(function(resolve, reject) { return new Promise(function (resolve, reject) {
// Get a reference to the body element, and create a new image object // Get a reference to the body element, and create a new image object
var myImage = new Image(); var myImage = new Image();
myImage.crossOrigin = ''; // or "anonymous" myImage.crossOrigin = ''; // or "anonymous"
// Call the function with the URL we want to load, but then chain the // Call the function with the URL we want to load, but then chain the
// promise then() method on to the end of it. This contains two callbacks // promise then() method on to the end of it. This contains two callbacks
self.imgLoad(src).then( self.imgLoad(src).then(
function(response) { function (response) {
// The first runs when the promise resolves, with the request.reponse specified within the resolve() method. // The first runs when the promise resolves, with the request.reponse specified within the resolve() method.
var imageURL = window.URL.createObjectURL(response); var imageURL = window.URL.createObjectURL(response);
resolve(imageURL); resolve(imageURL);
@ -58,7 +59,7 @@ export default class DataUtils {
//body.appendChild(myImage); //body.appendChild(myImage);
// The second runs when the promise is rejected, and logs the Error specified with the reject() method. // The second runs when the promise is rejected, and logs the Error specified with the reject() method.
}, },
function(Error) { function (Error) {
reject(Error); reject(Error);
} }
); );

34
src/styles/main/_posts.sass
View file

@ -258,30 +258,54 @@
svg svg
fill: $primary fill: $primary
#featured-image-upload, #post-image-upload #page-files-upload, #post-image-upload
display: none display: none
#post-feature #post-feature
width: 100% width: 100%
#featured-image-drop #page-file-manager
background: $tertiary
width: 100%
min-height: 300px
#page-file-wrapper
width: 100%
max-width: 900px
padding: 10px
margin: 0 auto
font-weight: bold
font-color: $primary
font-size: 1em
#page-file-drop
display: flex display: flex
align-items: center align-items: center
justify-content: center justify-content: center
width: 100% width: 100%
min-height: 200px min-height: 100px
background: color.adjust($primary, $lightness: -50%) background: $white
color: $primary color: $primary
vertical-align: middle vertical-align: middle
font-family: $monoType border-radius: 5px
margin: 0 0 10px 0
label label
cursor: pointer cursor: pointer
font-weight: 600px
text-transform: capitalize
img img
width: 100% width: 100%
margin: 0 margin: 0
padding: 0 padding: 0
#page-images-list
padding: 10px 0 0 0
.img-item
height: 150px
width: 23.8%
border-radius: 3px
margin: 0 10px 10px 0
display: inline-block
cursor: pointer
#featured-new-image-btn #featured-new-image-btn
position: absolute position: absolute