started implementation of multiple file uploads and sorting
This commit is contained in:
Ro
parent
8f9021bb7d
commit
3c52bca8ba
21 changed files with 9549 additions and 818 deletions
138
.eslintrc
138
.eslintrc
|
|
@ -1,70 +1,70 @@
|
|||
{
|
||||
"parserOptions": {
|
||||
"ecmaVersion": 7,
|
||||
"sourceType": "module",
|
||||
"ecmaFeatures": {}
|
||||
},
|
||||
"rules": {
|
||||
"constructor-super": 2,
|
||||
"for-direction": 2,
|
||||
"getter-return": 2,
|
||||
"no-case-declarations": 2,
|
||||
"no-class-assign": 2,
|
||||
"no-compare-neg-zero": 2,
|
||||
"no-cond-assign": 2,
|
||||
"no-console": 1,
|
||||
"no-const-assign": 2,
|
||||
"no-constant-condition": 2,
|
||||
"no-control-regex": 1,
|
||||
"no-debugger": 2,
|
||||
"no-delete-var": 2,
|
||||
"no-dupe-args": 2,
|
||||
"no-dupe-class-members": 2,
|
||||
"no-dupe-keys": 2,
|
||||
"no-duplicate-case": 2,
|
||||
"no-empty": 2,
|
||||
"no-empty-character-class": 2,
|
||||
"no-empty-pattern": 2,
|
||||
"no-ex-assign": 2,
|
||||
"no-extra-boolean-cast": 2,
|
||||
"no-extra-semi": 2,
|
||||
"no-fallthrough": 2,
|
||||
"no-func-assign": 2,
|
||||
"no-global-assign": 2,
|
||||
"no-inner-declarations": 2,
|
||||
"no-invalid-regexp": 2,
|
||||
"no-irregular-whitespace": 2,
|
||||
"no-mixed-spaces-and-tabs": 2,
|
||||
"no-new-symbol": 2,
|
||||
"no-obj-calls": 2,
|
||||
"no-octal": 2,
|
||||
"no-redeclare": 2,
|
||||
"no-regex-spaces": 2,
|
||||
"no-self-assign": 2,
|
||||
"no-sparse-arrays": 2,
|
||||
"no-this-before-super": 2,
|
||||
"no-undef": 2,
|
||||
"no-unexpected-multiline": 2,
|
||||
"no-unreachable": 2,
|
||||
"no-unsafe-finally": 2,
|
||||
"no-unsafe-negation": 2,
|
||||
"no-unused-labels": 2,
|
||||
"no-unused-vars": 2,
|
||||
"no-useless-escape": 1,
|
||||
"require-yield": 2,
|
||||
"use-isnan": 2,
|
||||
"valid-typeof": 2,
|
||||
"no-duplicate-imports": 2
|
||||
},
|
||||
"env": {
|
||||
"node": true,
|
||||
"browser": true,
|
||||
"es6": true
|
||||
},
|
||||
"globals": {
|
||||
"_": false,
|
||||
"hljs": false,
|
||||
"Sortable": false,
|
||||
"Prism": false
|
||||
}
|
||||
}
|
||||
"parserOptions": {
|
||||
"ecmaVersion": 7,
|
||||
"sourceType": "module",
|
||||
"ecmaFeatures": {}
|
||||
},
|
||||
"rules": {
|
||||
"constructor-super": 2,
|
||||
"for-direction": 2,
|
||||
"getter-return": 2,
|
||||
"no-case-declarations": 2,
|
||||
"no-class-assign": 2,
|
||||
"no-compare-neg-zero": 2,
|
||||
"no-cond-assign": 2,
|
||||
"no-console": 1,
|
||||
"no-const-assign": 2,
|
||||
"no-constant-condition": 2,
|
||||
"no-control-regex": 1,
|
||||
"no-debugger": 2,
|
||||
"no-delete-var": 2,
|
||||
"no-dupe-args": 2,
|
||||
"no-dupe-class-members": 2,
|
||||
"no-dupe-keys": 2,
|
||||
"no-duplicate-case": 2,
|
||||
"no-empty": 2,
|
||||
"no-empty-character-class": 2,
|
||||
"no-empty-pattern": 2,
|
||||
"no-ex-assign": 2,
|
||||
"no-extra-boolean-cast": 2,
|
||||
"no-extra-semi": 2,
|
||||
"no-fallthrough": 2,
|
||||
"no-func-assign": 2,
|
||||
"no-global-assign": 2,
|
||||
"no-inner-declarations": 2,
|
||||
"no-invalid-regexp": 2,
|
||||
"no-irregular-whitespace": 2,
|
||||
"no-mixed-spaces-and-tabs": 2,
|
||||
"no-new-symbol": 2,
|
||||
"no-obj-calls": 2,
|
||||
"no-octal": 2,
|
||||
"no-redeclare": 2,
|
||||
"no-regex-spaces": 2,
|
||||
"no-self-assign": 2,
|
||||
"no-sparse-arrays": 2,
|
||||
"no-this-before-super": 2,
|
||||
"no-undef": 2,
|
||||
"no-unexpected-multiline": 2,
|
||||
"no-unreachable": 2,
|
||||
"no-unsafe-finally": 2,
|
||||
"no-unsafe-negation": 2,
|
||||
"no-unused-labels": 2,
|
||||
"no-unused-vars": 1,
|
||||
"no-useless-escape": 1,
|
||||
"require-yield": 2,
|
||||
"use-isnan": 2,
|
||||
"valid-typeof": 2,
|
||||
"no-duplicate-imports": 2
|
||||
},
|
||||
"env": {
|
||||
"node": true,
|
||||
"browser": true,
|
||||
"es6": true
|
||||
},
|
||||
"globals": {
|
||||
"_": false,
|
||||
"hljs": false,
|
||||
"Sortable": false,
|
||||
"Prism": false
|
||||
}
|
||||
}
|
||||
|
|
|
|||
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
|
||||
}
|
||||
|
|
@ -7,183 +7,194 @@ include "../brain/data/Book.inc.php";
|
|||
|
||||
class DashControl
|
||||
{
|
||||
public static function start(
|
||||
ServerRequestInterface $request,
|
||||
ResponseInterface $response,
|
||||
array $args
|
||||
): ResponseInterface {
|
||||
$view = Twig::fromRequest($request);
|
||||
$pageOptions = [];
|
||||
$template = "";
|
||||
if (Setup::status()) {
|
||||
switch (isset($args["second"]) ? $args["second"] : "index") {
|
||||
case "settings":
|
||||
if (Session::active()) {
|
||||
$config = new Settings();
|
||||
$settings = $config->getSettings();
|
||||
$themes = (new Themes())->getThemes(); //$config->getThemes();
|
||||
$template = "dash/settings.twig";
|
||||
$member = Session::get("member");
|
||||
$form_token = Session::get("form_token");
|
||||
$updated = new \Moment\Moment($settings["global"]["last_backup"]);
|
||||
$pageOptions = [
|
||||
"title" => "Dash Settings",
|
||||
"private" => $settings["global"]["private"],
|
||||
"renderOnSave" => $settings["global"]["renderOnSave"],
|
||||
"background" => $settings["global"]["background"],
|
||||
"member" => $member,
|
||||
"ftoken" => $form_token,
|
||||
"siteTitle" => $settings["global"]["title"],
|
||||
"baseUrl" => $settings["global"]["base_url"],
|
||||
"desc" => $settings["global"]["descriptions"],
|
||||
"lastBackup" => $updated->format("Y M D d"),
|
||||
"currentTheme" => $settings["global"]["theme"],
|
||||
"themes" => $themes,
|
||||
"apiStatus" => isset($settings["global"]["externalAPI"])
|
||||
? $settings["global"]["externalAPI"]
|
||||
: "false",
|
||||
"dynamicRenderStatus" => isset(
|
||||
$settings["global"]["dynamicRender"]
|
||||
)
|
||||
? $settings["global"]["dynamicRender"]
|
||||
: "false",
|
||||
"mailOption" => $settings["email"]["active"],
|
||||
"mailConfig" => $settings["email"],
|
||||
"status" => Session::active(),
|
||||
];
|
||||
} else {
|
||||
header("Location: /dashboard");
|
||||
die();
|
||||
}
|
||||
public static function start(
|
||||
ServerRequestInterface $request,
|
||||
ResponseInterface $response,
|
||||
array $args
|
||||
): ResponseInterface {
|
||||
$view = Twig::fromRequest($request);
|
||||
$pageOptions = [];
|
||||
$template = "";
|
||||
if (Setup::status()) {
|
||||
switch (isset($args["second"]) ? $args["second"] : "index") {
|
||||
case "settings":
|
||||
if (Session::active()) {
|
||||
$config = new Settings();
|
||||
$settings = $config->getSettings();
|
||||
$themes = (new Themes())->getThemes(); //$config->getThemes();
|
||||
$template = "dash/settings.twig";
|
||||
$member = Session::get("member");
|
||||
$form_token = Session::get("form_token");
|
||||
$updated = new \Moment\Moment($settings["global"]["last_backup"]);
|
||||
$pageOptions = [
|
||||
"title" => "Dash Settings",
|
||||
"private" => $settings["global"]["private"],
|
||||
"renderOnSave" => $settings["global"]["renderOnSave"],
|
||||
"background" => $settings["global"]["background"],
|
||||
"member" => $member,
|
||||
"ftoken" => $form_token,
|
||||
"siteTitle" => $settings["global"]["title"],
|
||||
"baseUrl" => $settings["global"]["base_url"],
|
||||
"desc" => $settings["global"]["descriptions"],
|
||||
"lastBackup" => $updated->format("Y M D d"),
|
||||
"currentTheme" => $settings["global"]["theme"],
|
||||
"themes" => $themes,
|
||||
"apiStatus" => isset($settings["global"]["externalAPI"])
|
||||
? $settings["global"]["externalAPI"]
|
||||
: "false",
|
||||
"dynamicRenderStatus" => isset(
|
||||
$settings["global"]["dynamicRender"]
|
||||
)
|
||||
? $settings["global"]["dynamicRender"]
|
||||
: "false",
|
||||
"mailOption" => $settings["email"]["active"],
|
||||
"mailConfig" => $settings["email"],
|
||||
"status" => Session::active(),
|
||||
];
|
||||
} else {
|
||||
header("Location: /dashboard");
|
||||
die();
|
||||
}
|
||||
|
||||
break;
|
||||
case "navigation":
|
||||
if (Session::active()) {
|
||||
$config = new Settings();
|
||||
$settings = $config->getSettings();
|
||||
$template = "dash/navigation.twig";
|
||||
$pageOptions = [
|
||||
"title" => "Edit Dash Navigation",
|
||||
"status" => Session::active(),
|
||||
"menu" => $settings["menu"],
|
||||
];
|
||||
} else {
|
||||
header("Location: /dashboard");
|
||||
die();
|
||||
}
|
||||
break;
|
||||
case "pages":
|
||||
if (Session::active()) {
|
||||
$currentPage = isset($args["fourth"]) ? $args["fourth"] : 1;
|
||||
$filter = isset($args["third"]) ? $args["third"] : "all";
|
||||
$data = (new Book())->getPages($currentPage, 4, $filter);
|
||||
$template = "dash/book.twig";
|
||||
$pageOptions = [
|
||||
"entryCount" => $data["entryCount"],
|
||||
"numOfPages" => $data["numOfPages"],
|
||||
"currentPage" => $currentPage,
|
||||
"filter" => $data["paginate"]["sort"],
|
||||
"stats" => $data["stats"],
|
||||
"pages" => $data["pages"],
|
||||
"paginate" => $data["paginate"],
|
||||
"status" => Session::active(),
|
||||
];
|
||||
} else {
|
||||
header("Location: /dashboard");
|
||||
die();
|
||||
}
|
||||
break;
|
||||
case "page":
|
||||
if (Session::active()) {
|
||||
$template = "dash/page-edit.twig";
|
||||
$mode = $args["third"];
|
||||
$uuid = $args["fourth"];
|
||||
break;
|
||||
case "navigation":
|
||||
if (Session::active()) {
|
||||
$config = new Settings();
|
||||
$settings = $config->getSettings();
|
||||
$template = "dash/navigation.twig";
|
||||
$pageOptions = [
|
||||
"title" => "Edit Dash Navigation",
|
||||
"status" => Session::active(),
|
||||
"menu" => $settings["menu"],
|
||||
];
|
||||
} else {
|
||||
header("Location: /dashboard");
|
||||
die();
|
||||
}
|
||||
break;
|
||||
case "pages":
|
||||
if (Session::active()) {
|
||||
$currentPage = isset($args["fourth"]) ? $args["fourth"] : 1;
|
||||
$filter = isset($args["third"]) ? $args["third"] : "all";
|
||||
$data = (new Book())->getPages($currentPage, 4, $filter);
|
||||
$template = "dash/book.twig";
|
||||
$pageOptions = [
|
||||
"entryCount" => $data["entryCount"],
|
||||
"numOfPages" => $data["numOfPages"],
|
||||
"currentPage" => $currentPage,
|
||||
"filter" => $data["paginate"]["sort"],
|
||||
"stats" => $data["stats"],
|
||||
"pages" => $data["pages"],
|
||||
"paginate" => $data["paginate"],
|
||||
"status" => Session::active(),
|
||||
];
|
||||
} else {
|
||||
header("Location: /dashboard");
|
||||
die();
|
||||
}
|
||||
break;
|
||||
case "page":
|
||||
if (Session::active()) {
|
||||
$template = "dash/page-edit.twig";
|
||||
$mode = $args["third"];
|
||||
$uuid = $args["fourth"];
|
||||
|
||||
switch ($mode) {
|
||||
case "edit":
|
||||
$page = (new Book())->findPageById($uuid);
|
||||
$views = [];
|
||||
if (str_contains($page["layout"], "index")) {
|
||||
$views = (new Themes())->getCustomIndex();
|
||||
} else {
|
||||
$views = (new Themes())->getCustomViews();
|
||||
}
|
||||
$pageOptions = [
|
||||
"title" => "Fipamo | Edit Page",
|
||||
"page" => $page,
|
||||
"mode" => $mode,
|
||||
"token" => Session::get("form_token"),
|
||||
"status" => Session::active(),
|
||||
"views" => $views,
|
||||
];
|
||||
break;
|
||||
case "preview":
|
||||
$config = new Settings();
|
||||
$settings = $config->getSettings();
|
||||
$loader = new \Twig\Loader\FilesystemLoader(
|
||||
"../content/themes"
|
||||
);
|
||||
$display = new \Twig\Environment($loader, []);
|
||||
switch ($mode) {
|
||||
case "edit":
|
||||
$page = (new Book())->findPageById($uuid);
|
||||
$views = [];
|
||||
if (str_contains($page["layout"], "index")) {
|
||||
$views = (new Themes())->getCustomIndex();
|
||||
} else {
|
||||
$views = (new Themes())->getCustomViews();
|
||||
}
|
||||
|
||||
$book = new Book();
|
||||
$page = $book->findPageById($uuid);
|
||||
$pageOptions = Sorting::page($page);
|
||||
$preview =
|
||||
$settings["global"]["theme"] .
|
||||
"/" .
|
||||
$page["layout"] .
|
||||
".twig";
|
||||
$html = $display->render($preview, $pageOptions);
|
||||
$response->getBody()->write($html);
|
||||
return $response;
|
||||
break;
|
||||
default:
|
||||
$pageOptions = [
|
||||
"title" => "Fipamo | Create Page",
|
||||
"token" => Session::get("form_token"),
|
||||
"mode" => $mode,
|
||||
"status" => Session::active(),
|
||||
];
|
||||
$imageList = explode(",", $page["feature"]);
|
||||
$images = [];
|
||||
foreach ($imageList as $item) {
|
||||
$image = trim($item);
|
||||
if ($item != null || $item != "") {
|
||||
array_push($images, $item);
|
||||
}
|
||||
}
|
||||
|
||||
$pageOptions = [
|
||||
"title" => "Fipamo | Edit Page",
|
||||
"page" => $page,
|
||||
"mode" => $mode,
|
||||
"token" => Session::get("form_token"),
|
||||
"status" => Session::active(),
|
||||
"images" => $images,
|
||||
"views" => $views,
|
||||
];
|
||||
break;
|
||||
case "preview":
|
||||
$config = new Settings();
|
||||
$settings = $config->getSettings();
|
||||
$loader = new \Twig\Loader\FilesystemLoader(
|
||||
"../content/themes"
|
||||
);
|
||||
$display = new \Twig\Environment($loader, []);
|
||||
|
||||
$book = new Book();
|
||||
$page = $book->findPageById($uuid);
|
||||
$pageOptions = Sorting::page($page);
|
||||
$preview =
|
||||
$settings["global"]["theme"] .
|
||||
"/" .
|
||||
$page["layout"] .
|
||||
".twig";
|
||||
$html = $display->render($preview, $pageOptions);
|
||||
$response->getBody()->write($html);
|
||||
return $response;
|
||||
break;
|
||||
default:
|
||||
$pageOptions = [
|
||||
"title" => "Fipamo | Create Page",
|
||||
"token" => Session::get("form_token"),
|
||||
"mode" => $mode,
|
||||
"status" => Session::active(),
|
||||
];
|
||||
break;
|
||||
}
|
||||
} else {
|
||||
header("Location: /dashboard");
|
||||
die();
|
||||
}
|
||||
break;
|
||||
case "logout":
|
||||
Session::kill();
|
||||
header("Location: /dashboard");
|
||||
die();
|
||||
break;
|
||||
case "reset-password":
|
||||
$template = "dash/reset-password.twig";
|
||||
$pageOptions = [
|
||||
"title" => "Reset Password",
|
||||
];
|
||||
break;
|
||||
|
||||
default:
|
||||
$template = "dash/start.twig";
|
||||
if (Session::active()) {
|
||||
$pageOptions = [
|
||||
"title" => "Welcome Back",
|
||||
"status" => Session::active(),
|
||||
"data" => (new Book())->getPages(1, 4),
|
||||
];
|
||||
} else {
|
||||
$pageOptions = [
|
||||
"title" => "Welcome to Fipamo",
|
||||
"status" => Session::active(),
|
||||
];
|
||||
}
|
||||
break;
|
||||
}
|
||||
} else {
|
||||
header("Location: /dashboard");
|
||||
die();
|
||||
}
|
||||
break;
|
||||
case "logout":
|
||||
Session::kill();
|
||||
header("Location: /dashboard");
|
||||
die();
|
||||
break;
|
||||
case "reset-password":
|
||||
$template = "dash/reset-password.twig";
|
||||
$pageOptions = [
|
||||
"title" => "Reset Password",
|
||||
];
|
||||
break;
|
||||
} else {
|
||||
$template = "dash/init.twig";
|
||||
$pageOptions = ["title" => "Fipamo Setup"];
|
||||
}
|
||||
|
||||
default:
|
||||
$template = "dash/start.twig";
|
||||
if (Session::active()) {
|
||||
$pageOptions = [
|
||||
"title" => "Welcome Back",
|
||||
"status" => Session::active(),
|
||||
"data" => (new Book())->getPages(1, 4),
|
||||
];
|
||||
} else {
|
||||
$pageOptions = [
|
||||
"title" => "Welcome to Fipamo",
|
||||
"status" => Session::active(),
|
||||
];
|
||||
}
|
||||
break;
|
||||
}
|
||||
} else {
|
||||
$template = "dash/init.twig";
|
||||
$pageOptions = ["title" => "Fipamo Setup"];
|
||||
return $view->render($response, $template, $pageOptions);
|
||||
}
|
||||
|
||||
return $view->render($response, $template, $pageOptions);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -40,7 +40,8 @@ class Book
|
|||
}
|
||||
|
||||
$page = find($content, ["uuid" => $body["uuid"]]);
|
||||
$image = $request->getUploadedFiles();
|
||||
$files = $request->getUploadedFiles();
|
||||
|
||||
$member = Session::get("member");
|
||||
|
||||
if ($task != "create") {
|
||||
|
|
@ -52,13 +53,29 @@ class Book
|
|||
$path = date("Y") . "/" . date("m");
|
||||
}
|
||||
|
||||
if (isset($image["feature_image"])) {
|
||||
if (isset($files)) {
|
||||
//var_dump($files);
|
||||
if ($task != "create") {
|
||||
$feature =
|
||||
"/assets/images/blog/" .
|
||||
$path .
|
||||
"/" .
|
||||
$image["feature_image"]->getClientFileName();
|
||||
$imageList = "";
|
||||
$imagesPath = "/assets/images/blog/" . $path . "/";
|
||||
foreach ($files["page_files"] as $file) {
|
||||
$type = $file->getClientMediaType();
|
||||
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 {
|
||||
$feature =
|
||||
"/assets/images/blog/" .
|
||||
|
|
@ -66,11 +83,6 @@ class Book
|
|||
"/" .
|
||||
$image["feature_image"]->getClientFileName();
|
||||
}
|
||||
|
||||
FileUploader::uploadFile(
|
||||
"../public/assets/images/blog/" . $path . "/",
|
||||
$image["feature_image"]
|
||||
);
|
||||
} else {
|
||||
if (isset($body["feature_image"])) {
|
||||
$url = explode("/", $body["feature_image"]);
|
||||
|
|
|
|||
|
|
@ -85,7 +85,7 @@ class Contents
|
|||
"extensions" => ["basic", "relative-a", "relative-image", "iframe"],
|
||||
"tags" => [
|
||||
"div" => [
|
||||
"allowed_attributes" => ["class", "title"],
|
||||
"allowed_attributes" => ["class", "title", "id", "style"],
|
||||
],
|
||||
"img" => [
|
||||
"allowed_attributes" => ["src", "alt", "title", "class"],
|
||||
|
|
@ -100,6 +100,15 @@ class Contents
|
|||
|
||||
$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
|
||||
$page = [
|
||||
"id" => $meta["id"],
|
||||
|
|
@ -124,6 +133,7 @@ class Contents
|
|||
"filePath" => $file,
|
||||
"content" => $parsed->getContent(),
|
||||
"html" => $scrubbed,
|
||||
"media" => $images,
|
||||
];
|
||||
//checks for duplicates
|
||||
$uuid = $meta["uuid"];
|
||||
|
|
|
|||
|
|
@ -12,6 +12,7 @@ class Render
|
|||
public function __construct()
|
||||
{
|
||||
$config = new Settings();
|
||||
//TODO: Add theme folder to loader
|
||||
$this->loader = new \Twig\Loader\FilesystemLoader("../content/themes");
|
||||
$this->twig = new \Twig\Environment($this->loader, []);
|
||||
$settings = $config->getSettings();
|
||||
|
|
@ -51,6 +52,7 @@ class Render
|
|||
}
|
||||
|
||||
//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")) {
|
||||
unlink("../public/assets/css/base.css");
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<div id="dash-login">
|
||||
<div id="dash-form" class="dash-form">
|
||||
<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="password" name="password" class="form-control" placeholder="Password" required">
|
||||
<button id="login-btn" class='login-btn' type='submit'>
|
||||
|
|
|
|||
|
|
@ -14,6 +14,7 @@
|
|||
{% set content = page['content'] %}
|
||||
{% set date = page['created'] %}
|
||||
{% set updated = page['updated'] %}
|
||||
{% set media = page['media'] %}
|
||||
{% else %}
|
||||
{% set id = '' %}
|
||||
{% set uuid = '' %}
|
||||
|
|
@ -25,6 +26,7 @@
|
|||
{% set content = '' %}
|
||||
{% set date = '' %}
|
||||
{% set updated = '' %}
|
||||
{% set media = '' %}
|
||||
{% endif %}
|
||||
|
||||
{% block title %}
|
||||
|
|
@ -32,7 +34,7 @@
|
|||
{% endblock %}
|
||||
|
||||
{% 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 %}
|
||||
|
||||
{% block mainContent %}
|
||||
|
|
@ -44,15 +46,26 @@
|
|||
DRAG AND DROP IMAGE OR <label for="featured-image-upload">CLICK TO CHOSE</label>
|
||||
</div>
|
||||
{% else %}
|
||||
<div id="featured-new-image-btn">
|
||||
<button id="new-feature-upload">
|
||||
<svg id="new-feature-upload" viewbox="0 0 20 20" class="icons"><use xlink:href="/assets/images/global/sprite.svg#entypo-image-inverted"/></svg>
|
||||
</button>
|
||||
<div id="page-file-manager">
|
||||
<div id="page-file-wrapper">
|
||||
<div id="page-file-drop">
|
||||
<label for="page-files-upload">DRAG AND DROP FILES OR CLICK TO SELECT</label>
|
||||
</div>
|
||||
IMAGES AND VIDEO
|
||||
<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 id="featured-image-drop">
|
||||
<img id="featured-image" src="{{ feature }}"/>
|
||||
</div>
|
||||
|
||||
{% endif %}
|
||||
|
||||
</div>
|
||||
|
|
@ -95,7 +108,7 @@
|
|||
<span id="post-date" type="text">
|
||||
{{ updated }}
|
||||
</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="form_token" name="token" type="hidden" value="{{ token }}">
|
||||
</div>
|
||||
|
|
@ -119,5 +132,5 @@
|
|||
{% endblock %}
|
||||
|
||||
{% block javascripts %}
|
||||
<script src="/assets/scripts/Start.js" type="text/javascript"></script>
|
||||
<script src="/assets/scripts/Start.js?=dfgbg" type="text/javascript"></script>
|
||||
{% endblock %}
|
||||
|
|
@ -25,7 +25,7 @@
|
|||
<br/>
|
||||
{% if data["entryCount"] != 0 %}
|
||||
{% 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>
|
||||
{{ page.title }}
|
||||
</label>
|
||||
|
|
|
|||
21
package-lock.json
generated
21
package-lock.json
generated
|
|
@ -27,7 +27,8 @@
|
|||
"babel-cli": "^6.26.0",
|
||||
"eslint": "^8.5.0",
|
||||
"eslint-plugin-babel": "^5.3.1",
|
||||
"parcel": "^2.0.1"
|
||||
"parcel": "^2.0.1",
|
||||
"prettier": "^2.5.1"
|
||||
}
|
||||
},
|
||||
"node_modules/@babel/code-frame": {
|
||||
|
|
@ -11558,6 +11559,18 @@
|
|||
"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": {
|
||||
"version": "1.25.0",
|
||||
"resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.25.0.tgz",
|
||||
|
|
@ -23110,6 +23123,12 @@
|
|||
"dev": 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": {
|
||||
"version": "1.25.0",
|
||||
"resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.25.0.tgz",
|
||||
|
|
|
|||
|
|
@ -12,7 +12,8 @@
|
|||
"babel-cli": "^6.26.0",
|
||||
"eslint": "^8.5.0",
|
||||
"eslint-plugin-babel": "^5.3.1",
|
||||
"parcel": "^2.0.1"
|
||||
"parcel": "^2.0.1",
|
||||
"prettier": "^2.5.1"
|
||||
},
|
||||
"dependencies": {
|
||||
"@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 {
|
||||
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;
|
||||
}
|
||||
#post-edit-index #post-edit-index-wrapper #post-feature {
|
||||
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;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
min-height: 200px;
|
||||
background: black;
|
||||
min-height: 100px;
|
||||
background: #EFEBE3;
|
||||
color: #1D3040;
|
||||
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;
|
||||
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%;
|
||||
margin: 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 {
|
||||
position: absolute;
|
||||
margin: 20px;
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
406
src/com/Base.js
406
src/com/Base.js
|
|
@ -1,213 +1,217 @@
|
|||
import FipamoAdminAPI from "../libraries/FipamoAdminAPI";
|
||||
import Maintenance from "./controllers/MaintenanceManager";
|
||||
import DataUitls from "./utils/DataUtils";
|
||||
import * as DataEvent from "./events/DataEvent";
|
||||
import DashManager from "./controllers/DashManager";
|
||||
import Notfications from "./ui/Notifications";
|
||||
import FipamoAdminAPI from '../libraries/FipamoAdminAPI';
|
||||
import Maintenance from './controllers/MaintenanceManager';
|
||||
import DataUitls from './utils/DataUtils';
|
||||
import * as DataEvent from './events/DataEvent';
|
||||
import DashManager from './controllers/DashManager';
|
||||
import Notfications from './ui/Notifications';
|
||||
const data = new DataUitls();
|
||||
const notify = new Notfications();
|
||||
|
||||
export default class Base {
|
||||
//--------------------------
|
||||
// constructor
|
||||
//--------------------------
|
||||
constructor() {
|
||||
this.processing = false;
|
||||
this.start();
|
||||
}
|
||||
//--------------------------
|
||||
// constructor
|
||||
//--------------------------
|
||||
constructor() {
|
||||
this.processing = false;
|
||||
this.start();
|
||||
}
|
||||
|
||||
//--------------------------
|
||||
// methods
|
||||
//--------------------------
|
||||
start() {
|
||||
if (
|
||||
document.getElementById("dash-form") ||
|
||||
document.getElementById("dash-init")
|
||||
) {
|
||||
var options = document.getElementsByClassName("init-option");
|
||||
for (let index = 0; index < options.length; index++) {
|
||||
options[index].addEventListener("click", (e) => this.handleOptions(e));
|
||||
}
|
||||
if (document.getElementById("dash-form")) {
|
||||
document
|
||||
.getElementById("login-btn")
|
||||
.addEventListener("click", (e) => this.handleLogin(e));
|
||||
} else {
|
||||
document
|
||||
.getElementById("init-blog")
|
||||
.addEventListener("click", (e) => this.handleSetup(e));
|
||||
document
|
||||
.getElementById("blog-restore")
|
||||
.addEventListener("click", (e) => this.handleRestore(e));
|
||||
}
|
||||
} else if (document.getElementById("dash-reset")) {
|
||||
document
|
||||
.getElementById("get-secret-btn")
|
||||
.addEventListener("click", (e) => this.handleReset(e));
|
||||
//--------------------------
|
||||
// methods
|
||||
//--------------------------
|
||||
start() {
|
||||
if (
|
||||
document.getElementById('dash-form') ||
|
||||
document.getElementById('dash-init')
|
||||
) {
|
||||
var options = document.getElementsByClassName('init-option');
|
||||
for (let index = 0; index < options.length; index++) {
|
||||
options[index].addEventListener('click', e =>
|
||||
this.handleOptions(e)
|
||||
);
|
||||
}
|
||||
if (document.getElementById('dash-form')) {
|
||||
document
|
||||
.getElementById('login-btn')
|
||||
.addEventListener('click', e => this.handleLogin(e));
|
||||
} else {
|
||||
document
|
||||
.getElementById('init-blog')
|
||||
.addEventListener('click', e => this.handleSetup(e));
|
||||
document
|
||||
.getElementById('blog-restore')
|
||||
.addEventListener('click', e => this.handleRestore(e));
|
||||
}
|
||||
} else if (document.getElementById('dash-reset')) {
|
||||
document
|
||||
.getElementById('get-secret-btn')
|
||||
.addEventListener('click', e => this.handleReset(e));
|
||||
|
||||
document
|
||||
.getElementById("reset-btn")
|
||||
.addEventListener("click", (e) => this.handleReset(e));
|
||||
} else {
|
||||
new DashManager();
|
||||
}
|
||||
}
|
||||
//--------------------------
|
||||
// event handlers
|
||||
//--------------------------
|
||||
handleLogin(e) {
|
||||
if (this.processing) return;
|
||||
let self = this;
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
let authForm = data.formDataToJSON(document.getElementById("login"));
|
||||
notify.alert("Looking, hold up", null);
|
||||
let api = new FipamoAdminAPI();
|
||||
this.processing = true;
|
||||
api
|
||||
.login(authForm)
|
||||
.then((response) => {
|
||||
self.processing = false;
|
||||
if (response.type === DataEvent.REQUEST_LAME) {
|
||||
notify.alert(response.message, false);
|
||||
} else {
|
||||
notify.alert(response.message, true);
|
||||
e.target.innerHTML = response.message;
|
||||
setTimeout(() => {
|
||||
window.location = "/dashboard";
|
||||
}, 500);
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
self.processing = false;
|
||||
notify.alert(err, false);
|
||||
});
|
||||
}
|
||||
document
|
||||
.getElementById('reset-btn')
|
||||
.addEventListener('click', e => this.handleReset(e));
|
||||
} else {
|
||||
new DashManager();
|
||||
}
|
||||
}
|
||||
//--------------------------
|
||||
// event handlers
|
||||
//--------------------------
|
||||
handleLogin(e) {
|
||||
if (this.processing) return;
|
||||
let self = this;
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
let authForm = data.formDataToJSON(document.getElementById('login'));
|
||||
notify.alert('Looking, hold up', null);
|
||||
let api = new FipamoAdminAPI();
|
||||
this.processing = true;
|
||||
api.login(authForm)
|
||||
.then(response => {
|
||||
self.processing = false;
|
||||
if (response.type === DataEvent.REQUEST_LAME) {
|
||||
notify.alert(response.message, false);
|
||||
} else {
|
||||
notify.alert(response.message, true);
|
||||
e.target.innerHTML = response.message;
|
||||
setTimeout(() => {
|
||||
window.location = '/dashboard';
|
||||
}, 500);
|
||||
}
|
||||
})
|
||||
.catch(err => {
|
||||
self.processing = false;
|
||||
notify.alert(err, false);
|
||||
});
|
||||
}
|
||||
|
||||
handleSetup(e) {
|
||||
if (this.processing) return;
|
||||
let self = this;
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
let setUpForm = data.formDataToJSON(document.getElementById("init-form"));
|
||||
let mm = new Maintenance();
|
||||
this.processing = true;
|
||||
mm.create(setUpForm)
|
||||
.then((response) => {
|
||||
if (response.type === DataEvent.API_INIT_LAME) {
|
||||
self.processing = false;
|
||||
notify.alert(response.message, false);
|
||||
} else {
|
||||
self.processing = false;
|
||||
notify.alert(response.message, true);
|
||||
setTimeout(() => {
|
||||
window.location = "/dashboard";
|
||||
}, 700);
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
self.processing = false;
|
||||
notify.alert(err, false);
|
||||
});
|
||||
}
|
||||
handleSetup(e) {
|
||||
if (this.processing) return;
|
||||
let self = this;
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
let setUpForm = data.formDataToJSON(
|
||||
document.getElementById('init-form')
|
||||
);
|
||||
let mm = new Maintenance();
|
||||
this.processing = true;
|
||||
mm.create(setUpForm)
|
||||
.then(response => {
|
||||
if (response.type === DataEvent.API_INIT_LAME) {
|
||||
self.processing = false;
|
||||
notify.alert(response.message, false);
|
||||
} else {
|
||||
self.processing = false;
|
||||
notify.alert(response.message, true);
|
||||
setTimeout(() => {
|
||||
window.location = '/dashboard';
|
||||
}, 700);
|
||||
}
|
||||
})
|
||||
.catch(err => {
|
||||
self.processing = false;
|
||||
notify.alert(err, false);
|
||||
});
|
||||
}
|
||||
|
||||
handleRestore(e) {
|
||||
if (this.processing) return;
|
||||
let self = this;
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
let mm = new Maintenance();
|
||||
var form = document.getElementById("init-restore");
|
||||
this.processing = true;
|
||||
mm.restore(form)
|
||||
.then((response) => {
|
||||
if (response.type === DataEvent.REQUEST_LAME) {
|
||||
self.processing = false;
|
||||
notify.alert(response.message, false);
|
||||
} else {
|
||||
self.processing = false;
|
||||
notify.alert(response.message, true);
|
||||
setTimeout(() => {
|
||||
window.location = "/dashboard";
|
||||
}, 1500);
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
self.processing = false;
|
||||
notify.alert(err, false);
|
||||
});
|
||||
}
|
||||
handleRestore(e) {
|
||||
if (this.processing) return;
|
||||
let self = this;
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
let mm = new Maintenance();
|
||||
var form = document.getElementById('init-restore');
|
||||
this.processing = true;
|
||||
mm.restore(form)
|
||||
.then(response => {
|
||||
if (response.type === DataEvent.REQUEST_LAME) {
|
||||
self.processing = false;
|
||||
notify.alert(response.message, false);
|
||||
} else {
|
||||
self.processing = false;
|
||||
notify.alert(response.message, true);
|
||||
setTimeout(() => {
|
||||
window.location = '/dashboard';
|
||||
}, 1500);
|
||||
}
|
||||
})
|
||||
.catch(err => {
|
||||
self.processing = false;
|
||||
notify.alert(err, false);
|
||||
});
|
||||
}
|
||||
|
||||
handleReset(e) {
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
let self = this;
|
||||
let mm = new Maintenance();
|
||||
if (e.target.id == "get-secret-btn") {
|
||||
let data = {
|
||||
email: document.getElementById("email").value,
|
||||
task: "retrieveSecret"
|
||||
};
|
||||
this.processing = true;
|
||||
mm.secret(data)
|
||||
.then((response) => {
|
||||
self.processing = false;
|
||||
if (response.secret) {
|
||||
document.getElementById("secret").value = response.secret;
|
||||
notify.alert(response.message, true);
|
||||
} else {
|
||||
if (response.type == "mailSent") {
|
||||
notify.alert(response.message, true);
|
||||
} else {
|
||||
notify.alert(response.message, false);
|
||||
}
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
self.processing = false;
|
||||
notify.alert(err, false);
|
||||
});
|
||||
} else {
|
||||
let data = {
|
||||
newPass: document.getElementById("new_password").value,
|
||||
newPassConfirm: document.getElementById("new_password2").value,
|
||||
secret: document.getElementById("secret").value
|
||||
};
|
||||
mm.newPass(data)
|
||||
.then((response) => {
|
||||
self.processing = false;
|
||||
if (response.type == "passNotCreated") {
|
||||
notify.alert(response.message, false);
|
||||
} else {
|
||||
notify.alert(response.message, true);
|
||||
setTimeout(() => {
|
||||
window.location = "/dashboard";
|
||||
}, 1000);
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
self.processing = false;
|
||||
notify.alert(err, false);
|
||||
});
|
||||
}
|
||||
}
|
||||
handleOptions(e) {
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
let init = document.getElementById("dash-init");
|
||||
let restore = document.getElementById("dash-restore");
|
||||
if (e.target.id === "init-switch-restore") {
|
||||
init.style.display = "none";
|
||||
init.style.visibility = "hidden";
|
||||
handleReset(e) {
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
let self = this;
|
||||
let mm = new Maintenance();
|
||||
if (e.target.id == 'get-secret-btn') {
|
||||
let data = {
|
||||
email: document.getElementById('email').value,
|
||||
task: 'retrieveSecret'
|
||||
};
|
||||
this.processing = true;
|
||||
mm.secret(data)
|
||||
.then(response => {
|
||||
self.processing = false;
|
||||
if (response.secret) {
|
||||
document.getElementById('secret').value =
|
||||
response.secret;
|
||||
notify.alert(response.message, true);
|
||||
} else {
|
||||
if (response.type == 'mailSent') {
|
||||
notify.alert(response.message, true);
|
||||
} else {
|
||||
notify.alert(response.message, false);
|
||||
}
|
||||
}
|
||||
})
|
||||
.catch(err => {
|
||||
self.processing = false;
|
||||
notify.alert(err, false);
|
||||
});
|
||||
} else {
|
||||
let data = {
|
||||
newPass: document.getElementById('new_password').value,
|
||||
newPassConfirm: document.getElementById('new_password2').value,
|
||||
secret: document.getElementById('secret').value
|
||||
};
|
||||
mm.newPass(data)
|
||||
.then(response => {
|
||||
self.processing = false;
|
||||
if (response.type == 'passNotCreated') {
|
||||
notify.alert(response.message, false);
|
||||
} else {
|
||||
notify.alert(response.message, true);
|
||||
setTimeout(() => {
|
||||
window.location = '/dashboard';
|
||||
}, 1000);
|
||||
}
|
||||
})
|
||||
.catch(err => {
|
||||
self.processing = false;
|
||||
notify.alert(err, false);
|
||||
});
|
||||
}
|
||||
}
|
||||
handleOptions(e) {
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
let init = document.getElementById('dash-init');
|
||||
let restore = document.getElementById('dash-restore');
|
||||
if (e.target.id === 'init-switch-restore') {
|
||||
init.style.display = 'none';
|
||||
init.style.visibility = 'hidden';
|
||||
|
||||
restore.style.display = "flex";
|
||||
restore.style.visibility = "visible";
|
||||
} else {
|
||||
init.style.display = "flex";
|
||||
init.style.visibility = "visible";
|
||||
restore.style.display = 'flex';
|
||||
restore.style.visibility = 'visible';
|
||||
} else {
|
||||
init.style.display = 'flex';
|
||||
init.style.visibility = 'visible';
|
||||
|
||||
restore.style.display = "none";
|
||||
restore.style.visibility = "hidden";
|
||||
}
|
||||
}
|
||||
restore.style.display = 'none';
|
||||
restore.style.visibility = 'hidden';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ export default class PostActions {
|
|||
//--------------------------
|
||||
// methods
|
||||
//--------------------------
|
||||
collectInfo(image) {
|
||||
collectInfo(files) {
|
||||
return new Promise((resolve, reject) => {
|
||||
let pageInfo = new FormData();
|
||||
let txt = document.createElement("textarea");
|
||||
|
|
@ -64,11 +64,14 @@ export default class PostActions {
|
|||
"form_token",
|
||||
document.getElementById("form_token").value
|
||||
);
|
||||
if (image != null || image != undefined) {
|
||||
if (image.type.match("image.*")) {
|
||||
pageInfo.append("feature_image", image, image.name);
|
||||
} else {
|
||||
reject("Not an image file");
|
||||
if (files.length > 0 && files != null) {
|
||||
for (var i = 0; i < files.length; i++) {
|
||||
var file = files[i];
|
||||
if (file.type.match("image.*")) {
|
||||
pageInfo.append("page_files[]", file, file.name);
|
||||
} else {
|
||||
reject("Not an image file");
|
||||
}
|
||||
}
|
||||
} else {
|
||||
//check to see if image exists
|
||||
|
|
@ -81,7 +84,7 @@ export default class PostActions {
|
|||
//pageInfo.append("feature_image", null);
|
||||
}
|
||||
}
|
||||
|
||||
//console.log("FILES", files);
|
||||
resolve(pageInfo);
|
||||
});
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,41 +1,41 @@
|
|||
import PostIndex from "./PostIndex";
|
||||
import SettingsIndex from "./SettingsIndex";
|
||||
import NaviIndex from "./NavIndex";
|
||||
import PostIndex from './PostIndex';
|
||||
import SettingsIndex from './SettingsIndex';
|
||||
import NaviIndex from './NavIndex';
|
||||
|
||||
export default class DashManager {
|
||||
//--------------------------
|
||||
// constructor
|
||||
//--------------------------
|
||||
constructor() {
|
||||
this.currentDisplay = "";
|
||||
this.urlPieces = document.URL.split("/");
|
||||
this.chooseDisplay(this.urlPieces[4], this.urlPieces[5]);
|
||||
}
|
||||
//--------------------------
|
||||
// methods
|
||||
//--------------------------
|
||||
start() {}
|
||||
//--------------------------
|
||||
// constructor
|
||||
//--------------------------
|
||||
constructor() {
|
||||
this.currentDisplay = '';
|
||||
this.urlPieces = document.URL.split('/');
|
||||
this.chooseDisplay(this.urlPieces[4], this.urlPieces[5]);
|
||||
}
|
||||
//--------------------------
|
||||
// methods
|
||||
//--------------------------
|
||||
start() {}
|
||||
|
||||
chooseDisplay(section, page) {
|
||||
this.currentDisplay = "";
|
||||
switch (section) {
|
||||
case "page":
|
||||
this.currentDisplay = new PostIndex(page);
|
||||
break;
|
||||
case "settings":
|
||||
this.currentDisplay = new SettingsIndex();
|
||||
break;
|
||||
case "navigation":
|
||||
this.currentDisplay = new NaviIndex();
|
||||
break;
|
||||
chooseDisplay(section, page) {
|
||||
this.currentDisplay = '';
|
||||
switch (section) {
|
||||
case 'page':
|
||||
this.currentDisplay = new PostIndex(page);
|
||||
break;
|
||||
case 'settings':
|
||||
this.currentDisplay = new SettingsIndex();
|
||||
break;
|
||||
case 'navigation':
|
||||
this.currentDisplay = new NaviIndex();
|
||||
break;
|
||||
|
||||
default:
|
||||
//just chill
|
||||
break;
|
||||
}
|
||||
this.start();
|
||||
}
|
||||
//--------------------------
|
||||
// event handlers
|
||||
//--------------------------
|
||||
default:
|
||||
//just chill
|
||||
break;
|
||||
}
|
||||
this.start();
|
||||
}
|
||||
//--------------------------
|
||||
// event handlers
|
||||
//--------------------------
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,84 +1,93 @@
|
|||
//TOOLS
|
||||
import FipamoAdminAPI, {
|
||||
TASK_PAGE_CREATE,
|
||||
TASK_PAGE_EDIT,
|
||||
TASK_PAGE_DELETE
|
||||
} from "../../libraries/FipamoAdminAPI";
|
||||
import Maintenance from "./MaintenanceManager";
|
||||
import * as DataEvent from "../events/DataEvent";
|
||||
import PageActions from "../actions/PageActions";
|
||||
import * as EditorEvent from "../events/EditorEvent";
|
||||
TASK_PAGE_CREATE,
|
||||
TASK_PAGE_EDIT,
|
||||
TASK_PAGE_DELETE
|
||||
} from '../../libraries/FipamoAdminAPI';
|
||||
import Maintenance from './MaintenanceManager';
|
||||
import * as DataEvent from '../events/DataEvent';
|
||||
import PageActions from '../actions/PageActions';
|
||||
import * as EditorEvent from '../events/EditorEvent';
|
||||
//import TinyDatePicker from 'tiny-date-picker'; TODO: Reactivate for scheduled publishing
|
||||
import TextEditor from "../ui/TextEditor";
|
||||
import Notfications from "../ui/Notifications";
|
||||
import TextEditor from '../ui/TextEditor';
|
||||
import Notfications from '../ui/Notifications';
|
||||
import FileManager from '../ui/FileManager';
|
||||
const notify = new Notfications();
|
||||
export default class PostEditor {
|
||||
//--------------------------
|
||||
// constructor
|
||||
//--------------------------
|
||||
constructor() {
|
||||
this.processing = false;
|
||||
let self = this;
|
||||
this.admin = new FipamoAdminAPI(
|
||||
null,
|
||||
document.getElementById("notify-progress")
|
||||
);
|
||||
this.mm = new Maintenance(
|
||||
null,
|
||||
null,
|
||||
document.getElementById("notify-progress")
|
||||
);
|
||||
this.urlPieces = document.URL.split("/");
|
||||
this.post = [];
|
||||
this.postID = null;
|
||||
this.postUUID = null;
|
||||
this.postLayout = null;
|
||||
if (document.getElementById("post-edit-index").getAttribute("data-index")) {
|
||||
this.postID = document
|
||||
.getElementById("post-edit-index")
|
||||
.getAttribute("data-index");
|
||||
this.postUUID = document
|
||||
.getElementById("post-edit-index")
|
||||
.getAttribute("data-uuid");
|
||||
this.postLayout = document
|
||||
.getElementById("post-edit-index")
|
||||
.getAttribute("data-layout");
|
||||
}
|
||||
if (document.getElementById("edit")) {
|
||||
this.editor = new TextEditor(
|
||||
document.getElementById("edit"),
|
||||
document.getElementById("header").offsetHeight +
|
||||
document.getElementById("post-header").offsetHeight +
|
||||
document.getElementById("post-feature").offsetHeight
|
||||
);
|
||||
this.editor.addListener(
|
||||
EditorEvent.EDITOR_DELETE,
|
||||
() => this.handleEditorOptions(EditorEvent.EDITOR_DELETE),
|
||||
false
|
||||
);
|
||||
this.editor.addListener(
|
||||
EditorEvent.EDITOR_UPLOAD_POST_IMAGE,
|
||||
() => this.handleEditorOptions(EditorEvent.EDITOR_UPLOAD_POST_IMAGE),
|
||||
false
|
||||
);
|
||||
this.editor.addListener(
|
||||
EditorEvent.EDITOR_UPDATE,
|
||||
() => this.handleEditorOptions(EditorEvent.EDITOR_UPDATE),
|
||||
false
|
||||
);
|
||||
this.editor.addListener(
|
||||
EditorEvent.EDITOR_SAVE,
|
||||
() => this.handleEditorOptions(EditorEvent.EDITOR_SAVE),
|
||||
false
|
||||
);
|
||||
document.getElementById("post-image-upload").addEventListener(
|
||||
"change",
|
||||
(e) => {
|
||||
self.handleImageUpload(e.target.id, e.target.files);
|
||||
},
|
||||
false
|
||||
);
|
||||
/*
|
||||
//--------------------------
|
||||
// constructor
|
||||
//--------------------------
|
||||
constructor() {
|
||||
this.processing = false;
|
||||
let self = this;
|
||||
this.admin = new FipamoAdminAPI(
|
||||
null,
|
||||
document.getElementById('notify-progress')
|
||||
);
|
||||
this.mm = new Maintenance(
|
||||
null,
|
||||
null,
|
||||
document.getElementById('notify-progress')
|
||||
);
|
||||
this.urlPieces = document.URL.split('/');
|
||||
this.post = [];
|
||||
this.postID = null;
|
||||
this.postUUID = null;
|
||||
this.postLayout = null;
|
||||
this.fm = null;
|
||||
if (
|
||||
document
|
||||
.getElementById('post-edit-index')
|
||||
.getAttribute('data-index')
|
||||
) {
|
||||
this.postID = document
|
||||
.getElementById('post-edit-index')
|
||||
.getAttribute('data-index');
|
||||
this.postUUID = document
|
||||
.getElementById('post-edit-index')
|
||||
.getAttribute('data-uuid');
|
||||
this.postLayout = document
|
||||
.getElementById('post-edit-index')
|
||||
.getAttribute('data-layout');
|
||||
}
|
||||
if (document.getElementById('edit')) {
|
||||
this.editor = new TextEditor(
|
||||
document.getElementById('edit'),
|
||||
document.getElementById('header').offsetHeight +
|
||||
document.getElementById('post-header').offsetHeight +
|
||||
document.getElementById('post-feature').offsetHeight
|
||||
);
|
||||
this.editor.addListener(
|
||||
EditorEvent.EDITOR_DELETE,
|
||||
() => this.handleEditorOptions(EditorEvent.EDITOR_DELETE),
|
||||
false
|
||||
);
|
||||
this.editor.addListener(
|
||||
EditorEvent.EDITOR_UPLOAD_POST_IMAGE,
|
||||
() =>
|
||||
this.handleEditorOptions(
|
||||
EditorEvent.EDITOR_UPLOAD_POST_IMAGE
|
||||
),
|
||||
false
|
||||
);
|
||||
this.editor.addListener(
|
||||
EditorEvent.EDITOR_UPDATE,
|
||||
() => this.handleEditorOptions(EditorEvent.EDITOR_UPDATE),
|
||||
false
|
||||
);
|
||||
this.editor.addListener(
|
||||
EditorEvent.EDITOR_SAVE,
|
||||
() => this.handleEditorOptions(EditorEvent.EDITOR_SAVE),
|
||||
false
|
||||
);
|
||||
document.getElementById('post-image-upload').addEventListener(
|
||||
'change',
|
||||
e => {
|
||||
self.handleImageUpload(e.target.id, e.target.files);
|
||||
},
|
||||
false
|
||||
);
|
||||
/*
|
||||
TinyDatePicker(document.getElementById('post-date'), {
|
||||
mode: 'dp-below',
|
||||
format() {
|
||||
|
|
@ -87,202 +96,154 @@ export default class PostEditor {
|
|||
});
|
||||
*/
|
||||
|
||||
this.start();
|
||||
}
|
||||
}
|
||||
//--------------------------
|
||||
// methods
|
||||
//--------------------------
|
||||
start() {
|
||||
if (document.getElementById("featured-image-drop")) {
|
||||
document
|
||||
.getElementById("featured-image-drop")
|
||||
.addEventListener("dragover", this.handleImageActions, false);
|
||||
document
|
||||
.getElementById("featured-image-drop")
|
||||
.addEventListener("drop", this.handleImageActions, false);
|
||||
document
|
||||
.getElementById("featured-image-upload")
|
||||
.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++) {
|
||||
optionButtons[i].addEventListener(
|
||||
"click",
|
||||
(e) => this.handlePostOptions(e),
|
||||
false
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
//--------------------------
|
||||
// event handlers
|
||||
//--------------------------
|
||||
handlePostOptions(e) {
|
||||
let currentOption = null;
|
||||
switch (e.target.id) {
|
||||
case "option-page-icon":
|
||||
case "option-menu-pin":
|
||||
currentOption = document.getElementById("option-menu-pin");
|
||||
break;
|
||||
case "option-feature-icon":
|
||||
case "option-feature":
|
||||
currentOption = document.getElementById("option-feature");
|
||||
break;
|
||||
case "option-published-icon":
|
||||
case "option-published":
|
||||
currentOption = document.getElementById("option-published");
|
||||
break;
|
||||
}
|
||||
if (currentOption != null) {
|
||||
let active = currentOption.getAttribute("data-active");
|
||||
active == "false"
|
||||
? currentOption.setAttribute("data-active", "true")
|
||||
: currentOption.setAttribute("data-active", "false");
|
||||
}
|
||||
}
|
||||
handleEditorOptions(e) {
|
||||
if (this.processing) return;
|
||||
let self = this;
|
||||
switch (e) {
|
||||
case EditorEvent.EDITOR_SAVE:
|
||||
case EditorEvent.EDITOR_UPDATE:
|
||||
var task = "";
|
||||
e === EditorEvent.EDITOR_SAVE
|
||||
? (task = TASK_PAGE_CREATE)
|
||||
: (task = TASK_PAGE_EDIT);
|
||||
new PageActions()
|
||||
.collectInfo(
|
||||
document.getElementById("featured-image-upload").files[0]
|
||||
)
|
||||
.then((page) => {
|
||||
self.processing = true;
|
||||
notify.alert("Writing down changes", null);
|
||||
self.admin
|
||||
.pageActions(task, page)
|
||||
.then((r) => {
|
||||
self.processing = false;
|
||||
if (
|
||||
r.type === DataEvent.PAGE_ERROR ||
|
||||
r.type === DataEvent.API_REQUEST_LAME
|
||||
) {
|
||||
notify.alert(r.message, false);
|
||||
} else {
|
||||
if (r.type === DataEvent.PAGE_UPDATED) {
|
||||
notify.alert(r.message, true);
|
||||
} else {
|
||||
notify.alert(r.message, true);
|
||||
window.location = "/dashboard/page/edit/" + r.id;
|
||||
}
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
self.processing = false;
|
||||
notify.alert(err, false);
|
||||
});
|
||||
});
|
||||
break;
|
||||
case EditorEvent.EDITOR_DELETE:
|
||||
if (this.postLayout === "index") {
|
||||
notify.alert("Index cannot be deleted", false);
|
||||
return;
|
||||
}
|
||||
if (confirm("AYE! You know you're deleting this post, right?")) {
|
||||
new PageActions()
|
||||
.collectInfo(
|
||||
document.getElementById("featured-image-upload").files[0]
|
||||
)
|
||||
.then((page) => {
|
||||
self.processing = true;
|
||||
this.admin
|
||||
.pageActions(TASK_PAGE_DELETE, page)
|
||||
.then(() => {
|
||||
self.processing = false;
|
||||
window.location = "/dashboard/pages";
|
||||
})
|
||||
.catch((err) => {
|
||||
self.processing = false;
|
||||
notify.alert(err, false);
|
||||
});
|
||||
})
|
||||
.catch(() => {});
|
||||
} else {
|
||||
// Do nothing!
|
||||
}
|
||||
break;
|
||||
case EditorEvent.EDITOR_UPLOAD_POST_IMAGE:
|
||||
document.getElementById("post-image-upload").click();
|
||||
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) {
|
||||
let self = this;
|
||||
notify.alert("Uploading Image", null);
|
||||
this.start();
|
||||
}
|
||||
}
|
||||
//--------------------------
|
||||
// methods
|
||||
//--------------------------
|
||||
start() {
|
||||
if (document.getElementById('page-file-drop')) {
|
||||
//insert fileManager here
|
||||
this.fm = new FileManager(
|
||||
document.getElementById('page-file-drop'),
|
||||
document.getElementById('page-files-upload'),
|
||||
document.getElementById('page-images-list'),
|
||||
document.getElementById('page-files-list')
|
||||
);
|
||||
var optionButtons = document.querySelectorAll('.post-option-btn');
|
||||
for (var i = 0, length = optionButtons.length; i < length; i++) {
|
||||
optionButtons[i].addEventListener(
|
||||
'click',
|
||||
e => this.handlePostOptions(e),
|
||||
false
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
//--------------------------
|
||||
// event handlers
|
||||
//--------------------------
|
||||
handlePostOptions(e) {
|
||||
let currentOption = null;
|
||||
switch (e.target.id) {
|
||||
case 'option-page-icon':
|
||||
case 'option-menu-pin':
|
||||
currentOption = document.getElementById('option-menu-pin');
|
||||
break;
|
||||
case 'option-feature-icon':
|
||||
case 'option-feature':
|
||||
currentOption = document.getElementById('option-feature');
|
||||
break;
|
||||
case 'option-published-icon':
|
||||
case 'option-published':
|
||||
currentOption = document.getElementById('option-published');
|
||||
break;
|
||||
}
|
||||
if (currentOption != null) {
|
||||
let active = currentOption.getAttribute('data-active');
|
||||
active == 'false'
|
||||
? currentOption.setAttribute('data-active', 'true')
|
||||
: currentOption.setAttribute('data-active', 'false');
|
||||
}
|
||||
}
|
||||
handleEditorOptions(e) {
|
||||
if (this.processing) return;
|
||||
let self = this;
|
||||
switch (e) {
|
||||
case EditorEvent.EDITOR_SAVE:
|
||||
case EditorEvent.EDITOR_UPDATE:
|
||||
var task = '';
|
||||
e === EditorEvent.EDITOR_SAVE
|
||||
? (task = TASK_PAGE_CREATE)
|
||||
: (task = TASK_PAGE_EDIT);
|
||||
|
||||
self.mm
|
||||
.imageUpload(type, files)
|
||||
.then((r) => {
|
||||
if (r.type == DataEvent.POST_IMAGE_ADDED) {
|
||||
self.editor.notify(EditorEvent.EDITOR_UPLOAD_POST_IMAGE, r.url);
|
||||
notify.alert("Image Added to Entry", true);
|
||||
} else {
|
||||
notify.alert("Uh oh. Image not added", false);
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
notify.alert("Uh oh. Image not added", false);
|
||||
//console.log('ERROR', err);
|
||||
});
|
||||
}
|
||||
new PageActions().collectInfo(this.fm.getFiles()).then(page => {
|
||||
self.processing = true;
|
||||
notify.alert('Writing down changes', null);
|
||||
self.admin
|
||||
.pageActions(task, page)
|
||||
.then(r => {
|
||||
self.processing = false;
|
||||
if (
|
||||
r.type === DataEvent.PAGE_ERROR ||
|
||||
r.type === DataEvent.API_REQUEST_LAME
|
||||
) {
|
||||
notify.alert(r.message, false);
|
||||
} else {
|
||||
if (r.type === DataEvent.PAGE_UPDATED) {
|
||||
notify.alert(r.message, true);
|
||||
} else {
|
||||
notify.alert(r.message, true);
|
||||
window.location =
|
||||
'/dashboard/page/edit/' + r.id;
|
||||
}
|
||||
}
|
||||
})
|
||||
.catch(err => {
|
||||
self.processing = false;
|
||||
notify.alert(err, false);
|
||||
});
|
||||
});
|
||||
break;
|
||||
case EditorEvent.EDITOR_DELETE:
|
||||
if (this.postLayout === 'index') {
|
||||
notify.alert('Index cannot be deleted', false);
|
||||
return;
|
||||
}
|
||||
if (
|
||||
confirm("AYE! You know you're deleting this post, right?")
|
||||
) {
|
||||
new PageActions()
|
||||
.collectInfo(
|
||||
document.getElementById('featured-image-upload')
|
||||
.files[0]
|
||||
)
|
||||
.then(page => {
|
||||
self.processing = true;
|
||||
this.admin
|
||||
.pageActions(TASK_PAGE_DELETE, page)
|
||||
.then(() => {
|
||||
self.processing = false;
|
||||
window.location = '/dashboard/pages';
|
||||
})
|
||||
.catch(err => {
|
||||
self.processing = false;
|
||||
notify.alert(err, false);
|
||||
});
|
||||
})
|
||||
.catch(() => {});
|
||||
} else {
|
||||
// Do nothing!
|
||||
}
|
||||
break;
|
||||
case EditorEvent.EDITOR_UPLOAD_POST_IMAGE:
|
||||
document.getElementById('post-image-upload').click();
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
handleImageUpload(type, files) {
|
||||
let self = this;
|
||||
notify.alert('Uploading Image', null);
|
||||
|
||||
self.mm
|
||||
.imageUpload(type, files)
|
||||
.then(r => {
|
||||
if (r.type == DataEvent.POST_IMAGE_ADDED) {
|
||||
self.editor.notify(
|
||||
EditorEvent.EDITOR_UPLOAD_POST_IMAGE,
|
||||
r.url
|
||||
);
|
||||
notify.alert('Image Added to Entry', true);
|
||||
} else {
|
||||
notify.alert('Uh oh. Image not added', false);
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
notify.alert('Uh oh. Image not added', false);
|
||||
//console.log('ERROR', err);
|
||||
});
|
||||
}
|
||||
}
|
||||
PostEditor.uploadFiles = [];
|
||||
|
|
|
|||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -11,13 +11,13 @@ export default class DataUtils {
|
|||
'use strict';
|
||||
// Create new promise with the Promise() constructor;
|
||||
// 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
|
||||
var request = new XMLHttpRequest();
|
||||
request.open('GET', url);
|
||||
request.responseType = 'blob';
|
||||
// When the request loads, check whether it was successful
|
||||
request.onload = function() {
|
||||
request.onload = function () {
|
||||
if (request.status === 200) {
|
||||
// If successful, resolve the promise by passing back the request response
|
||||
resolve(request.response);
|
||||
|
|
@ -25,12 +25,13 @@ export default class DataUtils {
|
|||
// If it fails, reject the promise with a error message
|
||||
reject(
|
||||
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
|
||||
// This is probably a network error, so reject the promise with an appropriate message
|
||||
reject(new Error('There was a network error.'));
|
||||
|
|
@ -42,14 +43,14 @@ export default class DataUtils {
|
|||
loadImage(src) {
|
||||
'use strict';
|
||||
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
|
||||
var myImage = new Image();
|
||||
myImage.crossOrigin = ''; // or "anonymous"
|
||||
// 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
|
||||
self.imgLoad(src).then(
|
||||
function(response) {
|
||||
function (response) {
|
||||
// The first runs when the promise resolves, with the request.reponse specified within the resolve() method.
|
||||
var imageURL = window.URL.createObjectURL(response);
|
||||
resolve(imageURL);
|
||||
|
|
@ -58,7 +59,7 @@ export default class DataUtils {
|
|||
//body.appendChild(myImage);
|
||||
// The second runs when the promise is rejected, and logs the Error specified with the reject() method.
|
||||
},
|
||||
function(Error) {
|
||||
function (Error) {
|
||||
reject(Error);
|
||||
}
|
||||
);
|
||||
|
|
|
|||
|
|
@ -258,30 +258,54 @@
|
|||
svg
|
||||
fill: $primary
|
||||
|
||||
#featured-image-upload, #post-image-upload
|
||||
#page-files-upload, #post-image-upload
|
||||
display: none
|
||||
|
||||
#post-feature
|
||||
width: 100%
|
||||
|
||||
#featured-image-drop
|
||||
display: flex
|
||||
align-items: center
|
||||
justify-content: center
|
||||
#page-file-manager
|
||||
background: $tertiary
|
||||
width: 100%
|
||||
min-height: 200px
|
||||
background: color.adjust($primary, $lightness: -50%)
|
||||
color: $primary
|
||||
vertical-align: middle
|
||||
font-family: $monoType
|
||||
|
||||
label
|
||||
cursor: pointer
|
||||
|
||||
img
|
||||
min-height: 300px
|
||||
#page-file-wrapper
|
||||
width: 100%
|
||||
margin: 0
|
||||
padding: 0
|
||||
max-width: 900px
|
||||
padding: 10px
|
||||
margin: 0 auto
|
||||
font-weight: bold
|
||||
font-color: $primary
|
||||
font-size: 1em
|
||||
#page-file-drop
|
||||
display: flex
|
||||
align-items: center
|
||||
justify-content: center
|
||||
width: 100%
|
||||
min-height: 100px
|
||||
background: $white
|
||||
color: $primary
|
||||
vertical-align: middle
|
||||
border-radius: 5px
|
||||
margin: 0 0 10px 0
|
||||
|
||||
label
|
||||
cursor: pointer
|
||||
font-weight: 600px
|
||||
text-transform: capitalize
|
||||
|
||||
img
|
||||
width: 100%
|
||||
margin: 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
|
||||
position: absolute
|
||||
|
|
|
|||
Loading…
Reference in a new issue