forked from projects/fipamo
started implementation of multiple file uploads and sorting
This commit is contained in:
parent
8f9021bb7d
commit
3c52bca8ba
21 changed files with 9549 additions and 818 deletions
|
@ -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
7
.prettierignore
Normal file
|
@ -0,0 +1,7 @@
|
||||||
|
.babelrc
|
||||||
|
README.md
|
||||||
|
*.twig
|
||||||
|
*.sass
|
||||||
|
*.json
|
||||||
|
*.php
|
||||||
|
*.md
|
17
.prettierrc
Normal file
17
.prettierrc
Normal 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
|
||||||
|
}
|
|
@ -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;
|
||||||
|
|
|
@ -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"]);
|
||||||
|
|
|
@ -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"];
|
||||||
|
|
|
@ -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");
|
||||||
}
|
}
|
||||||
|
|
|
@ -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'>
|
||||||
|
|
|
@ -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 %}
|
|
@ -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
21
package-lock.json
generated
|
@ -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",
|
||||||
|
|
|
@ -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",
|
||||||
|
|
|
@ -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;
|
||||||
|
|
File diff suppressed because one or more lines are too long
128
src/com/Base.js
128
src/com/Base.js
|
@ -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';
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
|
@ -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;
|
||||||
|
|
||||||
|
|
|
@ -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
146
src/com/ui/FileManager.js
Normal 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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
|
@ -25,7 +25,8 @@ 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
|
||||||
)
|
)
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -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
|
||||||
|
|
Loading…
Reference in a new issue