Restyled Settings UI

Rebuilt the css for the Settings UI, which also led to some changed in
the FilesAPI so it knows what to do with specific targets. There's still
some additional styling needed to polish it, but the core structure is
in place so now it can just be tweaked. The controller for this page was
adjusted as needed.

Also moved the settings sub nav convtrols to the header menu since it's
sticky now.
toggle-buttons-#109
Ro 2 years ago
parent fcca7357bc
commit 1b89d1d072
Signed by: are0h
GPG Key ID: 29B551CDBD4D3B50

@ -3,6 +3,8 @@
namespace brain\api\v1; namespace brain\api\v1;
use brain\utility\FileUploader; use brain\utility\FileUploader;
use brain\data\Settings;
use brain\data\Member;
class FilesAPI class FilesAPI
{ {
@ -13,17 +15,35 @@ class FilesAPI
public static function uploadFiles($request, $type = null) public static function uploadFiles($request, $type = null)
{ {
$upload = $request->getUploadedFiles(); //grab uploaded files $upload = $request->getUploadedFiles(); //grab uploaded files
$options = $request->getParsedBody();
$file = $upload['upload_files'][0]; //front end sends one by one for progress tracking, so grab first $file = $upload['upload_files'][0]; //front end sends one by one for progress tracking, so grab first
$type = $file->getClientMediaType(); $type = $file->getClientMediaType();
$filesPath = ''; $filesPath = '';
$path = date('Y') . '/' . date('m'); $path = date('Y') . '/' . date('m');
$response = []; $response = [];
switch ($type) { switch ($type) {
case 'image/jpeg': case 'image/jpeg':
case 'image/png': case 'image/png':
case 'image/gif': case 'image/gif':
case 'image/svg': case 'image/svg':
$filesPath = '/assets/images/blog/' . $path . '/'; if (isset($options["source"])) {
if ($options["source"] == "avatar-upload") {
$filesPath = '/assets/images/user/' . $path . '/';
Member::updateData(
'avi',
$filesPath . $file->getClientFileName()
);
} else {
$filesPath = '/assets/images/user/' . $path . '/';
Settings::updateGlobalData(
'background',
$filesPath . '/' . $file->getClientFileName()
);
}
} else {
$filesPath = '/assets/images/blog/' . $path . '/';
}
break; break;
case 'video/mp4': case 'video/mp4':

@ -1,4 +1,9 @@
<div role="menu"> <div role="menu">
{% if title == "Dash Settings" %}
{% apply spaceless %}
{{ include("dash/partials/submenu_settings.twig") }}
{% endapply %}
{% endif %}
<a id="settings" href="/dashboard/settings" title="settings"> <a id="settings" href="/dashboard/settings" title="settings">
<button> <button>
<svg role="icon"> <svg role="icon">

@ -0,0 +1,11 @@
<div role="submenu">
<button id="save-toggle" title="save settings">
<i class="ti ti-device-floppy"></i>
</button>
<button id="publish-pages" title="publish site">
<i class="ti ti-world-upload"></i>
</button>
<button id="render-toggle" title="render on save toggle" data-render="{{ renderOnSave }}">
<i class="ti ti-circle-dashed"></i>
</button>
</div>

@ -5,112 +5,66 @@
{% endblock %} {% endblock %}
{% block stylesheets %} {% block stylesheets %}
<link rel="stylesheet" type="text/css" href="/assets/css/dash.css?=cvnbm"> <link rel="stylesheet" type="text/css" href="/assets/css/dash/start.css?=cvnbm">
{% endblock %} {% endblock %}
{% block mainContent %} {% block mainContent %}
<div id="settings-actions"> <article role="settings">
<div id="buttons"> <h1>Settings</h1>
<button id="save-toggle" title="save settings"> <section role="member-settings">
<svg id="submit-update" class="icons"> <div role="member-avatar">
<use id="submit-update" xlink:href="/assets/images/global/sprite.svg#entypo-save"/> <img id="avatar" src="{{ member['avatar'] }}" for="avatar-upload"/>
</svg> <input id="avatar-upload" type="file" name="avatar-upload"/>
</button>
<button id="publish-pages" title="publish site">
<svg id="submit-update" class="icons">
<use id="submit-update" xlink:href="/assets/images/global/sprite.svg#entypo-publish"/>
</svg>
</button>
<button id="render-toggle" title="render on save toggle" data-render="{{ renderOnSave }}">
<svg id="render-toggle-icon" class="icons">
<use xlink:href="/assets/images/global/sprite.svg#entypo-circular-graph"/>
</svg>
</button>
</div>
</div>
<div id="settings-index">
<div id="settings-index-wrapper">
<div id="member-settings">
<div id="member-images" class="columns">
<div class="column is-one-third">
<div id="member-avatar-drop">
<img id="avatar" src="{{ member['avatar'] }}" for="avatar-upload"/>
<input id="avatar-upload" type="file" name="avatar-upload"/>
</div>
</div>
<div class="column is-two-thirds">
<div id="site-background">
<img id="background" src="{{ background }}" alt="image for site background" for="background-upload"/>
<input id="background-upload" type="file" name="backgrond-upload"/>
</div>
</div>
</div>
<div id="member-meta" class="columns">
<div class="column is-one-third">
<input type='text' name='handle' id='settings-handle' placeholder='handle' value="{{ member['handle'] }}" autofocus/>
<input type='text' name='email' id='settings-email' placeholder='email' value="{{ member['email'] }}" autofocus/>
</div>
<div class="column is-one-third">
<input type='text' name='base-url' id='settings-url' placeholder='url' value="{{ baseUrl }}" autofocus/>
<input type='text' name='base-title' id='settings-title' placeholder='site title' value="{{ siteTitle }}" autofocus/>
</div>
<div class="column is-one-third">
<textarea id="settings-desc" type='text' name='settings_desc' class='settings-dec' placeholder='description stuff' , autofocus>{{ desc }}</textarea>
</div>
</div>
</div> </div>
<div id="feature-settings"> <div role="site-background">
<div id="features" class="columns"> <img id="background" src="{{ background }}" alt="image for site background" for="background-upload"/>
<div class="column"> <input id="background-upload" type="file" name="backgrond-upload"/>
<div id="feature-api"> </div>
{% if apiStatus is defined and apiStatus == "true" %} <div>
<button id="api-access-toggle" title="allow external api" data-enabled="true"> <input type='text' name='handle' id='settings-handle' placeholder='handle' value="{{ member['handle'] }}" autofocus/>
<svg id="api-access-toggle" class="icons"> <input type='text' name='email' id='settings-email' placeholder='email' value="{{ member['email'] }}" autofocus/>
<use id="api-access-toggle" xlink:href="/assets/images/global/sprite.svg#entypo-landline"/> </div>
</svg> <div>
<span id="api-status">EXTERNAL API ACCESS ENABLED</span> <input type='text' name='base-url' id='settings-url' placeholder='url' value="{{ baseUrl }}" autofocus/>
</button> <input type='text' name='base-title' id='settings-title' placeholder='site title' value="{{ siteTitle }}" autofocus/>
</div>
{% else %} <div>
<button id="api-access-toggle" title="allow external api" data-enabled="false"> <textarea id="settings-desc" type='text' name='settings_desc' class='settings-dec' placeholder='description stuff' , autofocus>{{ desc }}</textarea>
<svg id="api-access-toggle" class="icons"> </div>
<use id="api-access-toggle" xlink:href="/assets/images/global/sprite.svg#entypo-landline"/> </section>
</svg> <section role="site-settings">
<span id="api-status">EXTERNAL API ACCESS NOT ENABLED</span> <div role="features">
</button> <label>Options</label>
<br>
{% if apiStatus is defined and apiStatus == "true" %}
<button id="api-access-toggle" title="allow external api" data-enabled="true">
<i class="ti ti-phone-incoming"></i>
<span id="api-status">API ACCESS ENABLED</span>
</button>
{% endif %} {% else %}
</div> <button id="api-access-toggle" title="allow external api" data-enabled="false">
<i class="ti ti-phone-incoming"></i>
<span id="api-status">API ACCESS NOT ENABLED</span>
</button>
</div> {% endif %}
<div class="column"> {% if dynamicRenderStatus is defined and dynamicRenderStatus == "true" %}
<div id="dynamic-api"> <button id="dynamic-render-toggle" title="allow external api" data-enabled="true">
{% if dynamicRenderStatus is defined and dynamicRenderStatus == "true" %} <i class="ti ti-arrow-merge"></i>
<button id="dynamic-render-toggle" title="allow external api" data-enabled="true"> <span id="dynamic-render-status">DYNAMIC PAGE RENDERING</span>
<svg id="dynamic-render-toggle" class="icons"> </button>
<use id="dynamic-render-toggle" xlink:href="/assets/images/global/sprite.svg#entypo-text-document-inverted"/>
</svg>
<span id="dynamic-render-status">DYNAMIC PAGE RENDERING</span>
</button>
{% else %} {% else %}
<button id="dynamic-render-toggle" title="allow external api" data-enabled="false"> <button id="dynamic-render-toggle" title="allow external api" data-enabled="false">
<svg id="dynamic-render-toggle" class="icons"> <i class="ti ti-arrow-merge"></i>
<use id="dynamic-render-toggle" xlink:href="/assets/images/global/sprite.svg#entypo-text-document-inverted"/> <span id="dynamic-render-status">STATIC PAGE RENDERING</span>
</svg> </button>
<span id="dynamic-render-status">STATIC PAGE RENDERING</span>
</button>
{% endif %} {% endif %}
</div>
</div>
<div class="column"></div>
<div class="column"></div>
</div> </div>
</div> <div role="theme">
<div id="option-settings" class="columns"> <label>Themes</label><br/>
<div id="theme-settings" class="column">
<label>THEMES</label>
{% for theme in themes %} {% for theme in themes %}
{% if theme.name == currentTheme %} {% if theme.name == currentTheme %}
<a href="#" id="{{ theme.name }}" class="theme-select" data-enabled="true">{{ theme['display-name'] }}</a> <a href="#" id="{{ theme.name }}" class="theme-select" data-enabled="true">{{ theme['display-name'] }}</a>
@ -120,8 +74,8 @@
{% endfor %} {% endfor %}
</div> </div>
<div id="mail-settings" class="column"> <div role="mail">
<label>EMAIL</label> <label>EMAIL</label><br/>
{% if mailOption == "option-none" or mailOption == "" %} {% if mailOption == "option-none" or mailOption == "" %}
<a href="#" class="mail-option" id="option-none" data-enabled="true">NONE</a> <a href="#" class="mail-option" id="option-none" data-enabled="true">NONE</a>
{% else %} {% else %}
@ -143,47 +97,26 @@
{% endapply %} {% endapply %}
<button id="send-mail">TEST MAIL</button> <button id="send-mail">TEST MAIL</button>
<br/><br/> <br/><br/>
</div> </div>
</div> </section>
<div id="token-settings"> <section role="data-settings">
<div id="keys-tokens" class="columns"> <div class="column">
<div class="column"> <label>API KEY</label>
<label>API KEY</label> <br/>
<div id="member-api-key"> {{ member['key'] }}
{{ member['key'] }} <br/>
</div> <label>FORM TOKEN</label><br/>
{{ ftoken }}
</div>
<div class="column">
<label>FORM TOKEN</label>
<div id="form-token">
{{ ftoken }}
</div>
</div>
</div> </div>
<div class="column">
</div> <button id="create-backup">BACK UP YOUR SITE</button><br/>
<div id="backup-settings"> {% if lastBackup != '' %}
<div class="columns"> LAST BACK UP<br/>
<div class="column"> <a href="/api/v1/files">{{ lastBackup }}</a><br/>
<button id="create-backup">BACK UP YOUR SITE</button><br/> {% else %}
</div> <span>span No back ups. Frowny face.</span>
<div class="column"> {% endif %}
{% if lastBackup != '' %}
<div class="backup-meta">
LAST BACK UP
<a href="/api/v1/files">{{ lastBackup }}</a><br/>
</div>
{% else %}
<span>span No back ups. Frowny face.</span>
{% endif %}
</div>
</div> </div>
</section>
</div> </article>
{% endblock %}
</div>
</div>
{% endblock %}

@ -90,6 +90,25 @@ header > nav > div[role="nav-right"] button {
margin-left: 5px; margin-left: 5px;
} }
header > nav > div[role="nav-right"] div[role="submenu"] {
display: inline;
}
header > nav > div[role="nav-right"] div[role="submenu"] button {
background: var(--primary);
color: var(--white);
font-size: 0.8em;
}
header
> nav
> div[role="nav-right"]
div[role="submenu"]
button[data-render="true"] {
background: var(--tertiary);
color: var(--primary);
}
section[role="login"] { section[role="login"] {
margin: 15% auto; margin: 15% auto;
padding: 10px; padding: 10px;

@ -0,0 +1,160 @@
article[role="settings"] {
margin: 100px auto;
width: 100%;
max-width: 900px;
}
article[role="settings"] h1 {
color: var(--white);
}
section label {
background: var(--primary);
color: var(--white);
padding: 3px;
border-radius: 3px;
margin-bottom: 10px;
display: inline-block;
}
section[role="member-settings"],
section[role="site-settings"],
section[role="data-settings"],
section[role="backup-settings"] {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 10px;
width: 100%;
max-width: 900px;
margin: 10px auto;
background: var(--white);
}
section[role="member-settings"] div {
width: 98%;
padding: 5px;
}
section[role="member-settings"] div input[type="file"] {
display: none;
visibility: hidden;
}
section[role="member-settings"] div input[type="text"] {
width: 96%;
height: 30px;
padding: 5px;
margin-bottom: 10px;
}
section[role="member-settings"] div textarea {
background: var(--primary);
width: 91%;
padding: 5px;
height: 79%;
}
section[role="member-settings"] div:nth-child(1) {
grid-column: 1/2;
}
section[role="member-settings"] div:nth-child(2) {
grid-column: 2/4;
}
section[role="member-settings"] div img {
width: 100%;
}
section[role="site-settings"] > div {
padding: 10px;
}
section[role="site-settings"] > div[role="features"] button {
width: 100%;
text-align: left;
}
section[role="site-settings"] > div[role="features"] button > span {
font-size: 0.8em;
display: inline;
top: -10px;
position: relative;
}
section[role="site-settings"]
> div[role="features"]
button[data-enabled="true"] {
color: var(--white);
}
section[role="site-settings"]
> div[role="features"]
button[data-enabled="false"] {
color: var(--primary);
background: var(--secondary);
}
section[role="site-settings"] > div[role="theme"] a[data-enabled="true"] {
color: var(--white);
background: var(--highlight);
display: block;
border-radius: 3px;
padding: 3px;
}
section[role="site-settings"] > div[role="theme"] a[data-enabled="false"] {
color: var(--primary);
background: var(--secondary);
display: block;
border-radius: 3px;
padding: 3px;
}
section[role="site-settings"] > div[role="mail"] a {
margin-right: 3px;
}
section[role="site-settings"] > div[role="mail"] a[data-enabled="true"] {
color: var(--primary);
font-weight: bold;
text-decoration: underline;
}
section[role="site-settings"] > div[role="mail"] div[data-enabled="false"] {
visibility: hidden;
display: none;
}
section[role="site-settings"] > div[role="mail"] input {
width: 96%;
height: 30px;
padding: 5px;
margin-bottom: 10px;
}
section[role="site-settings"] > div[role="mail"] button {
width: 96%;
height: 30px;
padding: 5px;
}
section[role="data-settings"] div {
padding: 10px;
}
section[role="data-settings"] div:nth-child(1) {
grid-column: 1/3;
word-wrap: break-word;
}
section[role="data-settings"] button {
width: 96%;
height: 30px;
padding: 5px;
}
section[role="data-settings"] a {
font-weight: bold;
text-decoration: underline;
}

@ -8,3 +8,4 @@
@import url("book.css"); @import url("book.css");
@import url("page-editor.css"); @import url("page-editor.css");
@import url("page-editor-highlights.css"); @import url("page-editor-highlights.css");
@import url("settings.css");

@ -7120,7 +7120,6 @@ class $371d2518d50c1748$export$2e2bcd8739ae039 {
upload.enctype = "multipart/form-data"; upload.enctype = "multipart/form-data";
upload.append("upload_files[]", files[0], files[0].name); upload.append("upload_files[]", files[0], files[0].name);
this.mm.filesUpload(files[0].type, upload).then((result)=>{ this.mm.filesUpload(files[0].type, upload).then((result)=>{
console.log("RESULT".result);
if (result.message == "File Uploaded. Great!") { if (result.message == "File Uploaded. Great!") {
self.editor.notify($0d6abf40542266b3$export$80082ca64f03d0e9, result.filePath); self.editor.notify($0d6abf40542266b3$export$80082ca64f03d0e9, result.filePath);
$371d2518d50c1748$var$notify.alert("Image Added to Entry", true); $371d2518d50c1748$var$notify.alert("Image Added to Entry", true);
@ -7338,7 +7337,6 @@ class $b33d1a942dce8554$export$2e2bcd8739ae039 {
document.getElementById("publish-pages").addEventListener("click", (e)=>this.handlePublished(e)); document.getElementById("publish-pages").addEventListener("click", (e)=>this.handlePublished(e));
//handle page render on save toggle //handle page render on save toggle
document.getElementById("render-toggle").addEventListener("click", (e)=>this.toggleRender(e)); document.getElementById("render-toggle").addEventListener("click", (e)=>this.toggleRender(e));
document.getElementById("render-toggle-icon").addEventListener("click", (e)=>this.toggleRender(e));
//handle theme toggle //handle theme toggle
let themeBtns = document.querySelectorAll(".theme-select"); let themeBtns = document.querySelectorAll(".theme-select");
for(var i = 0, length = themeBtns.length; i < length; i++)themeBtns[i].addEventListener("click", (e)=>this.handleThemes(e)); for(var i = 0, length = themeBtns.length; i < length; i++)themeBtns[i].addEventListener("click", (e)=>this.handleThemes(e));
@ -7348,10 +7346,10 @@ class $b33d1a942dce8554$export$2e2bcd8739ae039 {
//handle backup from settings [disabled] //handle backup from settings [disabled]
document.getElementById("create-backup").addEventListener("click", (e)=>this.handleBackup(e)); document.getElementById("create-backup").addEventListener("click", (e)=>this.handleBackup(e));
/* /*
document document
.getElementById("reindex-pages") .getElementById("reindex-pages")
.addEventListener("click", (e) => this.handleReindex(e)); .addEventListener("click", (e) => this.handleReindex(e));
*/ } */ }
//-------------------------- //--------------------------
// event handlers // event handlers
//-------------------------- //--------------------------
@ -7406,13 +7404,19 @@ class $b33d1a942dce8554$export$2e2bcd8739ae039 {
} }
handleImageUpload(type, files) { handleImageUpload(type, files) {
$b33d1a942dce8554$var$notify.alert("Uploading Image... ", null); $b33d1a942dce8554$var$notify.alert("Uploading Image... ", null);
this.mm.imageUpload(type, files).then((r)=>{ let self = this;
if (r.type == $995f55a4eccd256d$export$9b65f586914397ef) { $b33d1a942dce8554$var$notify.alert("Uploading Image", null);
let upload = new FormData();
upload.enctype = "multipart/form-data";
upload.append("source", type);
upload.append("upload_files[]", files[0], files[0].name);
this.mm.filesUpload(files[0].type, upload).then((r)=>{
if (type == "avatar-upload") {
$b33d1a942dce8554$var$notify.alert(r.message, true); $b33d1a942dce8554$var$notify.alert(r.message, true);
document.getElementById("avatar").src = r.url; document.getElementById("avatar").src = r.filePath;
} else { } else {
$b33d1a942dce8554$var$notify.alert(r.message, true); $b33d1a942dce8554$var$notify.alert(r.message, true);
document.getElementById("background").src = r.url; document.getElementById("background").src = r.filePath;
} }
}).catch(()=>{ }).catch(()=>{
//console.log(err) //console.log(err)

@ -211,7 +211,6 @@ export default class PostEditor {
this.mm this.mm
.filesUpload(files[0].type, upload) .filesUpload(files[0].type, upload)
.then(result => { .then(result => {
console.log('RESULT'.result);
if (result.message == 'File Uploaded. Great!') { if (result.message == 'File Uploaded. Great!') {
self.editor.notify( self.editor.notify(
EditorEvent.EDITOR_UPLOAD_POST_IMAGE, EditorEvent.EDITOR_UPLOAD_POST_IMAGE,

@ -1,265 +1,266 @@
import SettingsActions from "../actions/SettingsActions"; import SettingsActions from '../actions/SettingsActions';
import Maintenance from "./MaintenanceManager"; import Maintenance from './MaintenanceManager';
import FipamoAdminAPI, { import FipamoAdminAPI, { TASK_SYNC_SETTNIGS } from '../../libraries/FipamoAdminAPI';
TASK_SYNC_SETTNIGS import * as DataEvent from '../../../src/com/events/DataEvent';
} from "../../libraries/FipamoAdminAPI"; import Mailer from '../actions/Mailer';
import * as DataEvent from "../../../src/com/events/DataEvent"; import Notifications from '../ui/Notifications';
import Mailer from "../actions/Mailer";
import Notifications from "../ui/Notifications";
const notify = new Notifications(); const notify = new Notifications();
export default class SettingsIndex { export default class SettingsIndex {
//-------------------------- //--------------------------
// constructor // constructor
//-------------------------- //--------------------------
constructor() { constructor() {
this.processing = false; this.processing = false;
this.start(); this.start();
this.admin = new FipamoAdminAPI(null); this.admin = new FipamoAdminAPI(null);
this.mm = new Maintenance(null, null); this.mm = new Maintenance(null, null);
} }
//-------------------------- //--------------------------
// methods // methods
//-------------------------- //--------------------------
start() { start() {
let self = this; let self = this;
//handle save button //handle save button
document.getElementById("save-toggle").addEventListener("click", () => document.getElementById('save-toggle').addEventListener('click', () =>
new SettingsActions() new SettingsActions()
.getInfo() .getInfo()
.then((data) => { .then(data => {
notify.alert("Saving Settings", null); notify.alert('Saving Settings', null);
self.admin.sync(TASK_SYNC_SETTNIGS, data).then((r) => { self.admin.sync(TASK_SYNC_SETTNIGS, data).then(r => {
if (r.type == DataEvent.SETTINGS_UPDATED) { if (r.type == DataEvent.SETTINGS_UPDATED) {
notify.alert(r.message, true); notify.alert(r.message, true);
} else { } else {
notify.alert(r.message, true); notify.alert(r.message, true);
} }
}); });
}) })
.catch(() => { .catch(() => {
//console.log(err); //console.log(err);
}) })
); );
//handle set up image uploads //handle set up image uploads
document.getElementById("avatar").addEventListener("click", () => { document.getElementById('avatar').addEventListener('click', () => {
document.getElementById("avatar-upload").click(); document.getElementById('avatar-upload').click();
}); });
document.getElementById("background").addEventListener("click", () => { document.getElementById('background').addEventListener('click', () => {
document.getElementById("background-upload").click(); document.getElementById('background-upload').click();
}); });
document.getElementById("avatar-upload").addEventListener( document.getElementById('avatar-upload').addEventListener(
"change", 'change',
(e) => { e => {
self.handleImageUpload(e.target.id, e.target.files); self.handleImageUpload(e.target.id, e.target.files);
}, },
false false
); );
document.getElementById("background-upload").addEventListener( document.getElementById('background-upload').addEventListener(
"change", 'change',
(e) => { e => {
self.handleImageUpload(e.target.id, e.target.files); self.handleImageUpload(e.target.id, e.target.files);
}, },
false false
); );
//handle api access toggle //handle api access toggle
var apiButton = document.getElementById("api-access-toggle"); var apiButton = document.getElementById('api-access-toggle');
var apiStatus = document.getElementById("api-status"); var apiStatus = document.getElementById('api-status');
apiButton.addEventListener("click", (e) => { apiButton.addEventListener('click', e => {
e.stopPropagation(); e.stopPropagation();
e.preventDefault(); e.preventDefault();
if (apiButton.getAttribute("data-enabled") == "false") { if (apiButton.getAttribute('data-enabled') == 'false') {
apiButton.setAttribute("data-enabled", "true"); apiButton.setAttribute('data-enabled', 'true');
apiStatus.innerHTML = "EXTERNAL API ACCESS IS ENABLED"; apiStatus.innerHTML = 'EXTERNAL API ACCESS IS ENABLED';
} else { } else {
apiButton.setAttribute("data-enabled", "false"); apiButton.setAttribute('data-enabled', 'false');
apiStatus.innerHTML = "EXTERNAL API ACCESS IS NOT ENABLED"; apiStatus.innerHTML = 'EXTERNAL API ACCESS IS NOT ENABLED';
} }
}); });
//handle dynamic page rendering //handle dynamic page rendering
var dynamicRenderButton = document.getElementById("dynamic-render-toggle"); var dynamicRenderButton = document.getElementById('dynamic-render-toggle');
var dynamicRenderStatus = document.getElementById("dynamic-render-status"); var dynamicRenderStatus = document.getElementById('dynamic-render-status');
dynamicRenderButton.addEventListener("click", (e) => { dynamicRenderButton.addEventListener('click', e => {
e.stopPropagation(); e.stopPropagation();
e.preventDefault(); e.preventDefault();
if (dynamicRenderButton.getAttribute("data-enabled") == "false") { if (dynamicRenderButton.getAttribute('data-enabled') == 'false') {
dynamicRenderButton.setAttribute("data-enabled", "true"); dynamicRenderButton.setAttribute('data-enabled', 'true');
dynamicRenderStatus.innerHTML = "DYNAMIC PAGE RENDERING"; dynamicRenderStatus.innerHTML = 'DYNAMIC PAGE RENDERING';
} else { } else {
dynamicRenderButton.setAttribute("data-enabled", "false"); dynamicRenderButton.setAttribute('data-enabled', 'false');
dynamicRenderStatus.innerHTML = "STATIC PAGE RENDERING"; dynamicRenderStatus.innerHTML = 'STATIC PAGE RENDERING';
} }
}); });
document document
.getElementById("send-mail") .getElementById('send-mail')
.addEventListener("click", (e) => this.handleMailer(e)); .addEventListener('click', e => this.handleMailer(e));
document document
.getElementById("publish-pages") .getElementById('publish-pages')
.addEventListener("click", (e) => this.handlePublished(e)); .addEventListener('click', e => this.handlePublished(e));
//handle page render on save toggle //handle page render on save toggle
document document
.getElementById("render-toggle") .getElementById('render-toggle')
.addEventListener("click", (e) => this.toggleRender(e)); .addEventListener('click', e => this.toggleRender(e));
document //handle theme toggle
.getElementById("render-toggle-icon") let themeBtns = document.querySelectorAll('.theme-select');
.addEventListener("click", (e) => this.toggleRender(e)); for (var i = 0, length = themeBtns.length; i < length; i++) {
//handle theme toggle themeBtns[i].addEventListener('click', e => this.handleThemes(e));
let themeBtns = document.querySelectorAll(".theme-select"); }
for (var i = 0, length = themeBtns.length; i < length; i++) { //handle mail options
themeBtns[i].addEventListener("click", (e) => this.handleThemes(e)); let mailBtn = document.querySelectorAll('.mail-option');
} for (i = 0, length = mailBtn.length; i < length; i++) {
//handle mail options mailBtn[i].addEventListener('click', e => this.handleMailOptions(e));
let mailBtn = document.querySelectorAll(".mail-option"); }
for (i = 0, length = mailBtn.length; i < length; i++) { //handle backup from settings [disabled]
mailBtn[i].addEventListener("click", (e) => this.handleMailOptions(e));
}
//handle backup from settings [disabled]
document document
.getElementById("create-backup") .getElementById('create-backup')
.addEventListener("click", (e) => this.handleBackup(e)); .addEventListener('click', e => this.handleBackup(e));
/* /*
document document
.getElementById("reindex-pages") .getElementById("reindex-pages")
.addEventListener("click", (e) => this.handleReindex(e)); .addEventListener("click", (e) => this.handleReindex(e));
*/ */
} }
//-------------------------- //--------------------------
// event handlers // event handlers
//-------------------------- //--------------------------
togglePrivacy(e) { togglePrivacy(e) {
e.stopPropagation(); e.stopPropagation();
e.preventDefault(); e.preventDefault();
if (e.target.getAttribute("data-private") == "false") { if (e.target.getAttribute('data-private') == 'false') {
e.target.setAttribute("data-private", "true"); e.target.setAttribute('data-private', 'true');
e.target.innerHTML = "SITE IS PUBLIC"; e.target.innerHTML = 'SITE IS PUBLIC';
} else { } else {
e.target.setAttribute("data-private", "false"); e.target.setAttribute('data-private', 'false');
e.target.innerHTML = "SITE IS PRIVATE"; e.target.innerHTML = 'SITE IS PRIVATE';
} }
} }
toggleRender(e) { toggleRender(e) {
e.stopPropagation(); e.stopPropagation();
e.preventDefault(); e.preventDefault();
let button = document.getElementById("render-toggle"); let button = document.getElementById('render-toggle');
if (button.getAttribute("data-render") == "false") { if (button.getAttribute('data-render') == 'false') {
button.setAttribute("data-render", "true"); button.setAttribute('data-render', 'true');
//e.target.innerHTML = 'RENDER PAGES ON SAVE'; //e.target.innerHTML = 'RENDER PAGES ON SAVE';
} else { } else {
button.setAttribute("data-render", "false"); button.setAttribute('data-render', 'false');
//e.target.innerHTML = "DON'T RENDER PAGES ON SAVE"; //e.target.innerHTML = "DON'T RENDER PAGES ON SAVE";
} }
} }
handleMailer() { handleMailer() {
let mailer = new Mailer(); let mailer = new Mailer();
mailer.testMail(); mailer.testMail();
//mailer.sendMail(); //mailer.sendMail();
} }
handleThemes(e) { handleThemes(e) {
e.stopPropagation(); e.stopPropagation();
e.preventDefault(); e.preventDefault();
let themes = document.querySelectorAll(".theme-select"); let themes = document.querySelectorAll('.theme-select');
for (var i = 0, length = themes.length; i < length; i++) { for (var i = 0, length = themes.length; i < length; i++) {
e.target.id == themes[i].id e.target.id == themes[i].id
? themes[i].setAttribute("data-enabled", "true") ? themes[i].setAttribute('data-enabled', 'true')
: themes[i].setAttribute("data-enabled", "false"); : themes[i].setAttribute('data-enabled', 'false');
} }
} }
handleMailOptions(e) { handleMailOptions(e) {
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();
let smtp = document.getElementById("mail-smtp"); let smtp = document.getElementById('mail-smtp');
let mailgun = document.getElementById("mail-mg"); let mailgun = document.getElementById('mail-mg');
let mail = document.querySelectorAll(".mail-option"); let mail = document.querySelectorAll('.mail-option');
for (var i = 0, length = mail.length; i < length; i++) { for (var i = 0, length = mail.length; i < length; i++) {
if (e.target.id == mail[i].id) { if (e.target.id == mail[i].id) {
mail[i].setAttribute("data-enabled", "true"); mail[i].setAttribute('data-enabled', 'true');
if (e.target.id == "option-smtp") { if (e.target.id == 'option-smtp') {
smtp.setAttribute("data-enabled", "true"); smtp.setAttribute('data-enabled', 'true');
mailgun.setAttribute("data-enabled", "false"); mailgun.setAttribute('data-enabled', 'false');
} else if (e.target.id == "option-none") { } else if (e.target.id == 'option-none') {
smtp.setAttribute("data-enabled", "false"); smtp.setAttribute('data-enabled', 'false');
mailgun.setAttribute("data-enabled", "false"); mailgun.setAttribute('data-enabled', 'false');
} else { } else {
smtp.setAttribute("data-enabled", "false"); smtp.setAttribute('data-enabled', 'false');
mailgun.setAttribute("data-enabled", "true"); mailgun.setAttribute('data-enabled', 'true');
} }
} else { } else {
mail[i].setAttribute("data-enabled", "false"); mail[i].setAttribute('data-enabled', 'false');
} }
} }
} }
handleImageUpload(type, files) { handleImageUpload(type, files) {
notify.alert("Uploading Image... ", null); notify.alert('Uploading Image... ', null);
let self = this;
notify.alert('Uploading Image', null);
let upload = new FormData();
upload.enctype = 'multipart/form-data';
upload.append('source', type);
upload.append('upload_files[]', files[0], files[0].name);
this.mm this.mm
.imageUpload(type, files) .filesUpload(files[0].type, upload)
.then((r) => { .then(r => {
if (r.type == DataEvent.AVATAR_UPLOADED) { if (type == 'avatar-upload') {
notify.alert(r.message, true); notify.alert(r.message, true);
document.getElementById("avatar").src = r.url; document.getElementById('avatar').src = r.filePath;
} else { } else {
notify.alert(r.message, true); notify.alert(r.message, true);
document.getElementById("background").src = r.url; document.getElementById('background').src = r.filePath;
} }
}) })
.catch(() => { .catch(() => {
//console.log(err) //console.log(err)
}); });
} }
handlePublished(e) { handlePublished(e) {
if (this.processing) return; if (this.processing) return;
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();
let self = this; let self = this;
let task = { task: "PUBLISH_ALL" }; let task = { task: 'PUBLISH_ALL' };
this.processing = true; this.processing = true;
notify.alert("Publishing site...", null); notify.alert('Publishing site...', null);
this.admin this.admin
.publish(task) .publish(task)
.then((r) => { .then(r => {
self.processing = false; self.processing = false;
notify.alert(r.message, true); notify.alert(r.message, true);
}) })
.catch((err) => { .catch(err => {
self.processing = false; self.processing = false;
notify.alert(err, false); notify.alert(err, false);
}); });
} }
handleBackup(e) { handleBackup(e) {
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();
notify.alert("Creating backup", null); notify.alert('Creating backup', null);
this.mm this.mm
.backup() .backup()
.then((r) => { .then(r => {
notify.alert(r.message, true); notify.alert(r.message, true);
}) })
.catch((err) => { .catch(err => {
notify.alert(err, false); notify.alert(err, false);
}); });
} }
handleReindex(e) { handleReindex(e) {
if (this.processing) return; if (this.processing) return;
let self = this; let self = this;
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();
let task = { task: "cleanup pages indexes" }; let task = { task: 'cleanup pages indexes' };
this.processing = true; this.processing = true;
notify.alert("Cleaning up page indexes", null); notify.alert('Cleaning up page indexes', null);
this.admin this.admin
.handleReindex(task) .handleReindex(task)
.then((r) => { .then(r => {
self.processing = false; self.processing = false;
notify.alert(r.message, true); notify.alert(r.message, true);
}) })
.catch((err) => { .catch(err => {
self.processing = false; self.processing = false;
notify.alert(err, false); notify.alert(err, false);
}); });
} }
} }

Loading…
Cancel
Save