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.
This commit is contained in:
Ro
parent
fcca7357bc
commit
1b89d1d072
10 changed files with 560 additions and 407 deletions
|
|
@ -3,6 +3,8 @@
|
|||
namespace brain\api\v1;
|
||||
|
||||
use brain\utility\FileUploader;
|
||||
use brain\data\Settings;
|
||||
use brain\data\Member;
|
||||
|
||||
class FilesAPI
|
||||
{
|
||||
|
|
@ -13,17 +15,35 @@ class FilesAPI
|
|||
public static function uploadFiles($request, $type = null)
|
||||
{
|
||||
$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
|
||||
$type = $file->getClientMediaType();
|
||||
$filesPath = '';
|
||||
$path = date('Y') . '/' . date('m');
|
||||
$response = [];
|
||||
|
||||
switch ($type) {
|
||||
case 'image/jpeg':
|
||||
case 'image/png':
|
||||
case 'image/gif':
|
||||
case 'image/svg':
|
||||
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;
|
||||
case 'video/mp4':
|
||||
|
|
|
|||
|
|
@ -1,4 +1,9 @@
|
|||
<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">
|
||||
<button>
|
||||
<svg role="icon">
|
||||
|
|
|
|||
11
brain/views/dash/partials/submenu_settings.twig
Normal file
11
brain/views/dash/partials/submenu_settings.twig
Normal file
|
|
@ -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 %}
|
||||
|
||||
{% 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 %}
|
||||
|
||||
{% block mainContent %}
|
||||
<div id="settings-actions">
|
||||
<div id="buttons">
|
||||
<button id="save-toggle" title="save settings">
|
||||
<svg id="submit-update" class="icons">
|
||||
<use id="submit-update" xlink:href="/assets/images/global/sprite.svg#entypo-save"/>
|
||||
</svg>
|
||||
</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">
|
||||
<article role="settings">
|
||||
<h1>Settings</h1>
|
||||
<section role="member-settings">
|
||||
<div role="member-avatar">
|
||||
<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">
|
||||
<div role="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">
|
||||
<div>
|
||||
<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">
|
||||
<div>
|
||||
<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">
|
||||
<div>
|
||||
<textarea id="settings-desc" type='text' name='settings_desc' class='settings-dec' placeholder='description stuff' , autofocus>{{ desc }}</textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="feature-settings">
|
||||
<div id="features" class="columns">
|
||||
<div class="column">
|
||||
<div id="feature-api">
|
||||
</section>
|
||||
<section role="site-settings">
|
||||
<div role="features">
|
||||
<label>Options</label>
|
||||
<br>
|
||||
{% if apiStatus is defined and apiStatus == "true" %}
|
||||
<button id="api-access-toggle" title="allow external api" data-enabled="true">
|
||||
<svg id="api-access-toggle" class="icons">
|
||||
<use id="api-access-toggle" xlink:href="/assets/images/global/sprite.svg#entypo-landline"/>
|
||||
</svg>
|
||||
<span id="api-status">EXTERNAL API ACCESS ENABLED</span>
|
||||
<i class="ti ti-phone-incoming"></i>
|
||||
<span id="api-status">API ACCESS ENABLED</span>
|
||||
</button>
|
||||
|
||||
{% else %}
|
||||
<button id="api-access-toggle" title="allow external api" data-enabled="false">
|
||||
<svg id="api-access-toggle" class="icons">
|
||||
<use id="api-access-toggle" xlink:href="/assets/images/global/sprite.svg#entypo-landline"/>
|
||||
</svg>
|
||||
<span id="api-status">EXTERNAL API ACCESS NOT ENABLED</span>
|
||||
<i class="ti ti-phone-incoming"></i>
|
||||
<span id="api-status">API ACCESS NOT ENABLED</span>
|
||||
</button>
|
||||
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="column">
|
||||
<div id="dynamic-api">
|
||||
{% if dynamicRenderStatus is defined and dynamicRenderStatus == "true" %}
|
||||
<button id="dynamic-render-toggle" title="allow external api" data-enabled="true">
|
||||
<svg id="dynamic-render-toggle" class="icons">
|
||||
<use id="dynamic-render-toggle" xlink:href="/assets/images/global/sprite.svg#entypo-text-document-inverted"/>
|
||||
</svg>
|
||||
<i class="ti ti-arrow-merge"></i>
|
||||
<span id="dynamic-render-status">DYNAMIC PAGE RENDERING</span>
|
||||
</button>
|
||||
|
||||
{% else %}
|
||||
<button id="dynamic-render-toggle" title="allow external api" data-enabled="false">
|
||||
<svg id="dynamic-render-toggle" class="icons">
|
||||
<use id="dynamic-render-toggle" xlink:href="/assets/images/global/sprite.svg#entypo-text-document-inverted"/>
|
||||
</svg>
|
||||
<i class="ti ti-arrow-merge"></i>
|
||||
<span id="dynamic-render-status">STATIC PAGE RENDERING</span>
|
||||
</button>
|
||||
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="column"></div>
|
||||
<div class="column"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="option-settings" class="columns">
|
||||
<div id="theme-settings" class="column">
|
||||
<label>THEMES</label>
|
||||
<div role="theme">
|
||||
<label>Themes</label><br/>
|
||||
{% for theme in themes %}
|
||||
{% if theme.name == currentTheme %}
|
||||
<a href="#" id="{{ theme.name }}" class="theme-select" data-enabled="true">{{ theme['display-name'] }}</a>
|
||||
|
|
@ -120,8 +74,8 @@
|
|||
|
||||
{% endfor %}
|
||||
</div>
|
||||
<div id="mail-settings" class="column">
|
||||
<label>EMAIL</label>
|
||||
<div role="mail">
|
||||
<label>EMAIL</label><br/>
|
||||
{% if mailOption == "option-none" or mailOption == "" %}
|
||||
<a href="#" class="mail-option" id="option-none" data-enabled="true">NONE</a>
|
||||
{% else %}
|
||||
|
|
@ -143,47 +97,26 @@
|
|||
{% endapply %}
|
||||
<button id="send-mail">TEST MAIL</button>
|
||||
<br/><br/>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div id="token-settings">
|
||||
<div id="keys-tokens" class="columns">
|
||||
</section>
|
||||
<section role="data-settings">
|
||||
<div class="column">
|
||||
<label>API KEY</label>
|
||||
<div id="member-api-key">
|
||||
<br/>
|
||||
{{ member['key'] }}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="column">
|
||||
<label>FORM TOKEN</label>
|
||||
<div id="form-token">
|
||||
<br/>
|
||||
<label>FORM TOKEN</label><br/>
|
||||
{{ ftoken }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div id="backup-settings">
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<button id="create-backup">BACK UP YOUR SITE</button><br/>
|
||||
</div>
|
||||
<div class="column">
|
||||
{% if lastBackup != '' %}
|
||||
<div class="backup-meta">
|
||||
LAST BACK UP
|
||||
LAST BACK UP<br/>
|
||||
<a href="/api/v1/files">{{ lastBackup }}</a><br/>
|
||||
</div>
|
||||
{% else %}
|
||||
<span>span No back ups. Frowny face.</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
</article>
|
||||
{% endblock %}
|
||||
|
|
|
|||
|
|
@ -90,6 +90,25 @@ header > nav > div[role="nav-right"] button {
|
|||
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"] {
|
||||
margin: 15% auto;
|
||||
padding: 10px;
|
||||
|
|
|
|||
160
public/assets/css/dash/settings.css
Normal file
160
public/assets/css/dash/settings.css
Normal file
|
|
@ -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("page-editor.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.append("upload_files[]", files[0], files[0].name);
|
||||
this.mm.filesUpload(files[0].type, upload).then((result)=>{
|
||||
console.log("RESULT".result);
|
||||
if (result.message == "File Uploaded. Great!") {
|
||||
self.editor.notify($0d6abf40542266b3$export$80082ca64f03d0e9, result.filePath);
|
||||
$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));
|
||||
//handle page render on save toggle
|
||||
document.getElementById("render-toggle").addEventListener("click", (e)=>this.toggleRender(e));
|
||||
document.getElementById("render-toggle-icon").addEventListener("click", (e)=>this.toggleRender(e));
|
||||
//handle theme toggle
|
||||
let themeBtns = document.querySelectorAll(".theme-select");
|
||||
for(var i = 0, length = themeBtns.length; i < length; i++)themeBtns[i].addEventListener("click", (e)=>this.handleThemes(e));
|
||||
|
|
@ -7406,13 +7404,19 @@ class $b33d1a942dce8554$export$2e2bcd8739ae039 {
|
|||
}
|
||||
handleImageUpload(type, files) {
|
||||
$b33d1a942dce8554$var$notify.alert("Uploading Image... ", null);
|
||||
this.mm.imageUpload(type, files).then((r)=>{
|
||||
if (r.type == $995f55a4eccd256d$export$9b65f586914397ef) {
|
||||
let self = this;
|
||||
$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);
|
||||
document.getElementById("avatar").src = r.url;
|
||||
document.getElementById("avatar").src = r.filePath;
|
||||
} else {
|
||||
$b33d1a942dce8554$var$notify.alert(r.message, true);
|
||||
document.getElementById("background").src = r.url;
|
||||
document.getElementById("background").src = r.filePath;
|
||||
}
|
||||
}).catch(()=>{
|
||||
//console.log(err)
|
||||
|
|
|
|||
|
|
@ -211,7 +211,6 @@ export default class PostEditor {
|
|||
this.mm
|
||||
.filesUpload(files[0].type, upload)
|
||||
.then(result => {
|
||||
console.log('RESULT'.result);
|
||||
if (result.message == 'File Uploaded. Great!') {
|
||||
self.editor.notify(
|
||||
EditorEvent.EDITOR_UPLOAD_POST_IMAGE,
|
||||
|
|
|
|||
|
|
@ -1,11 +1,9 @@
|
|||
import SettingsActions from "../actions/SettingsActions";
|
||||
import Maintenance from "./MaintenanceManager";
|
||||
import FipamoAdminAPI, {
|
||||
TASK_SYNC_SETTNIGS
|
||||
} from "../../libraries/FipamoAdminAPI";
|
||||
import * as DataEvent from "../../../src/com/events/DataEvent";
|
||||
import Mailer from "../actions/Mailer";
|
||||
import Notifications from "../ui/Notifications";
|
||||
import SettingsActions from '../actions/SettingsActions';
|
||||
import Maintenance from './MaintenanceManager';
|
||||
import FipamoAdminAPI, { TASK_SYNC_SETTNIGS } from '../../libraries/FipamoAdminAPI';
|
||||
import * as DataEvent from '../../../src/com/events/DataEvent';
|
||||
import Mailer from '../actions/Mailer';
|
||||
import Notifications from '../ui/Notifications';
|
||||
const notify = new Notifications();
|
||||
export default class SettingsIndex {
|
||||
//--------------------------
|
||||
|
|
@ -23,12 +21,12 @@ export default class SettingsIndex {
|
|||
start() {
|
||||
let self = this;
|
||||
//handle save button
|
||||
document.getElementById("save-toggle").addEventListener("click", () =>
|
||||
document.getElementById('save-toggle').addEventListener('click', () =>
|
||||
new SettingsActions()
|
||||
.getInfo()
|
||||
.then((data) => {
|
||||
notify.alert("Saving Settings", null);
|
||||
self.admin.sync(TASK_SYNC_SETTNIGS, data).then((r) => {
|
||||
.then(data => {
|
||||
notify.alert('Saving Settings', null);
|
||||
self.admin.sync(TASK_SYNC_SETTNIGS, data).then(r => {
|
||||
if (r.type == DataEvent.SETTINGS_UPDATED) {
|
||||
notify.alert(r.message, true);
|
||||
} else {
|
||||
|
|
@ -41,84 +39,81 @@ export default class SettingsIndex {
|
|||
})
|
||||
);
|
||||
//handle set up image uploads
|
||||
document.getElementById("avatar").addEventListener("click", () => {
|
||||
document.getElementById("avatar-upload").click();
|
||||
document.getElementById('avatar').addEventListener('click', () => {
|
||||
document.getElementById('avatar-upload').click();
|
||||
});
|
||||
document.getElementById("background").addEventListener("click", () => {
|
||||
document.getElementById("background-upload").click();
|
||||
document.getElementById('background').addEventListener('click', () => {
|
||||
document.getElementById('background-upload').click();
|
||||
});
|
||||
document.getElementById("avatar-upload").addEventListener(
|
||||
"change",
|
||||
(e) => {
|
||||
document.getElementById('avatar-upload').addEventListener(
|
||||
'change',
|
||||
e => {
|
||||
self.handleImageUpload(e.target.id, e.target.files);
|
||||
},
|
||||
false
|
||||
);
|
||||
document.getElementById("background-upload").addEventListener(
|
||||
"change",
|
||||
(e) => {
|
||||
document.getElementById('background-upload').addEventListener(
|
||||
'change',
|
||||
e => {
|
||||
self.handleImageUpload(e.target.id, e.target.files);
|
||||
},
|
||||
false
|
||||
);
|
||||
//handle api access toggle
|
||||
var apiButton = document.getElementById("api-access-toggle");
|
||||
var apiStatus = document.getElementById("api-status");
|
||||
apiButton.addEventListener("click", (e) => {
|
||||
var apiButton = document.getElementById('api-access-toggle');
|
||||
var apiStatus = document.getElementById('api-status');
|
||||
apiButton.addEventListener('click', e => {
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
if (apiButton.getAttribute("data-enabled") == "false") {
|
||||
apiButton.setAttribute("data-enabled", "true");
|
||||
apiStatus.innerHTML = "EXTERNAL API ACCESS IS ENABLED";
|
||||
if (apiButton.getAttribute('data-enabled') == 'false') {
|
||||
apiButton.setAttribute('data-enabled', 'true');
|
||||
apiStatus.innerHTML = 'EXTERNAL API ACCESS IS ENABLED';
|
||||
} else {
|
||||
apiButton.setAttribute("data-enabled", "false");
|
||||
apiStatus.innerHTML = "EXTERNAL API ACCESS IS NOT ENABLED";
|
||||
apiButton.setAttribute('data-enabled', 'false');
|
||||
apiStatus.innerHTML = 'EXTERNAL API ACCESS IS NOT ENABLED';
|
||||
}
|
||||
});
|
||||
|
||||
//handle dynamic page rendering
|
||||
var dynamicRenderButton = document.getElementById("dynamic-render-toggle");
|
||||
var dynamicRenderStatus = document.getElementById("dynamic-render-status");
|
||||
dynamicRenderButton.addEventListener("click", (e) => {
|
||||
var dynamicRenderButton = document.getElementById('dynamic-render-toggle');
|
||||
var dynamicRenderStatus = document.getElementById('dynamic-render-status');
|
||||
dynamicRenderButton.addEventListener('click', e => {
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
if (dynamicRenderButton.getAttribute("data-enabled") == "false") {
|
||||
dynamicRenderButton.setAttribute("data-enabled", "true");
|
||||
dynamicRenderStatus.innerHTML = "DYNAMIC PAGE RENDERING";
|
||||
if (dynamicRenderButton.getAttribute('data-enabled') == 'false') {
|
||||
dynamicRenderButton.setAttribute('data-enabled', 'true');
|
||||
dynamicRenderStatus.innerHTML = 'DYNAMIC PAGE RENDERING';
|
||||
} else {
|
||||
dynamicRenderButton.setAttribute("data-enabled", "false");
|
||||
dynamicRenderStatus.innerHTML = "STATIC PAGE RENDERING";
|
||||
dynamicRenderButton.setAttribute('data-enabled', 'false');
|
||||
dynamicRenderStatus.innerHTML = 'STATIC PAGE RENDERING';
|
||||
}
|
||||
});
|
||||
|
||||
document
|
||||
.getElementById("send-mail")
|
||||
.addEventListener("click", (e) => this.handleMailer(e));
|
||||
.getElementById('send-mail')
|
||||
.addEventListener('click', e => this.handleMailer(e));
|
||||
document
|
||||
.getElementById("publish-pages")
|
||||
.addEventListener("click", (e) => this.handlePublished(e));
|
||||
.getElementById('publish-pages')
|
||||
.addEventListener('click', e => this.handlePublished(e));
|
||||
//handle page render on save toggle
|
||||
document
|
||||
.getElementById("render-toggle")
|
||||
.addEventListener("click", (e) => this.toggleRender(e));
|
||||
document
|
||||
.getElementById("render-toggle-icon")
|
||||
.addEventListener("click", (e) => this.toggleRender(e));
|
||||
.getElementById('render-toggle')
|
||||
.addEventListener('click', e => this.toggleRender(e));
|
||||
//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));
|
||||
themeBtns[i].addEventListener('click', e => this.handleThemes(e));
|
||||
}
|
||||
//handle mail options
|
||||
let mailBtn = document.querySelectorAll(".mail-option");
|
||||
let mailBtn = document.querySelectorAll('.mail-option');
|
||||
for (i = 0, length = mailBtn.length; i < length; i++) {
|
||||
mailBtn[i].addEventListener("click", (e) => this.handleMailOptions(e));
|
||||
mailBtn[i].addEventListener('click', e => this.handleMailOptions(e));
|
||||
}
|
||||
//handle backup from settings [disabled]
|
||||
|
||||
document
|
||||
.getElementById("create-backup")
|
||||
.addEventListener("click", (e) => this.handleBackup(e));
|
||||
.getElementById('create-backup')
|
||||
.addEventListener('click', e => this.handleBackup(e));
|
||||
|
||||
/*
|
||||
document
|
||||
|
|
@ -132,23 +127,23 @@ export default class SettingsIndex {
|
|||
togglePrivacy(e) {
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
if (e.target.getAttribute("data-private") == "false") {
|
||||
e.target.setAttribute("data-private", "true");
|
||||
e.target.innerHTML = "SITE IS PUBLIC";
|
||||
if (e.target.getAttribute('data-private') == 'false') {
|
||||
e.target.setAttribute('data-private', 'true');
|
||||
e.target.innerHTML = 'SITE IS PUBLIC';
|
||||
} else {
|
||||
e.target.setAttribute("data-private", "false");
|
||||
e.target.innerHTML = "SITE IS PRIVATE";
|
||||
e.target.setAttribute('data-private', 'false');
|
||||
e.target.innerHTML = 'SITE IS PRIVATE';
|
||||
}
|
||||
}
|
||||
toggleRender(e) {
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
let button = document.getElementById("render-toggle");
|
||||
if (button.getAttribute("data-render") == "false") {
|
||||
button.setAttribute("data-render", "true");
|
||||
let button = document.getElementById('render-toggle');
|
||||
if (button.getAttribute('data-render') == 'false') {
|
||||
button.setAttribute('data-render', 'true');
|
||||
//e.target.innerHTML = 'RENDER PAGES ON SAVE';
|
||||
} else {
|
||||
button.setAttribute("data-render", "false");
|
||||
button.setAttribute('data-render', 'false');
|
||||
//e.target.innerHTML = "DON'T RENDER PAGES ON SAVE";
|
||||
}
|
||||
}
|
||||
|
|
@ -160,49 +155,55 @@ export default class SettingsIndex {
|
|||
handleThemes(e) {
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
let themes = document.querySelectorAll(".theme-select");
|
||||
let themes = document.querySelectorAll('.theme-select');
|
||||
for (var i = 0, length = themes.length; i < length; i++) {
|
||||
e.target.id == themes[i].id
|
||||
? themes[i].setAttribute("data-enabled", "true")
|
||||
: themes[i].setAttribute("data-enabled", "false");
|
||||
? themes[i].setAttribute('data-enabled', 'true')
|
||||
: themes[i].setAttribute('data-enabled', 'false');
|
||||
}
|
||||
}
|
||||
handleMailOptions(e) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
let smtp = document.getElementById("mail-smtp");
|
||||
let mailgun = document.getElementById("mail-mg");
|
||||
let mail = document.querySelectorAll(".mail-option");
|
||||
let smtp = document.getElementById('mail-smtp');
|
||||
let mailgun = document.getElementById('mail-mg');
|
||||
let mail = document.querySelectorAll('.mail-option');
|
||||
for (var i = 0, length = mail.length; i < length; i++) {
|
||||
if (e.target.id == mail[i].id) {
|
||||
mail[i].setAttribute("data-enabled", "true");
|
||||
if (e.target.id == "option-smtp") {
|
||||
smtp.setAttribute("data-enabled", "true");
|
||||
mailgun.setAttribute("data-enabled", "false");
|
||||
} else if (e.target.id == "option-none") {
|
||||
smtp.setAttribute("data-enabled", "false");
|
||||
mailgun.setAttribute("data-enabled", "false");
|
||||
mail[i].setAttribute('data-enabled', 'true');
|
||||
if (e.target.id == 'option-smtp') {
|
||||
smtp.setAttribute('data-enabled', 'true');
|
||||
mailgun.setAttribute('data-enabled', 'false');
|
||||
} else if (e.target.id == 'option-none') {
|
||||
smtp.setAttribute('data-enabled', 'false');
|
||||
mailgun.setAttribute('data-enabled', 'false');
|
||||
} else {
|
||||
smtp.setAttribute("data-enabled", "false");
|
||||
mailgun.setAttribute("data-enabled", "true");
|
||||
smtp.setAttribute('data-enabled', 'false');
|
||||
mailgun.setAttribute('data-enabled', 'true');
|
||||
}
|
||||
} else {
|
||||
mail[i].setAttribute("data-enabled", "false");
|
||||
mail[i].setAttribute('data-enabled', 'false');
|
||||
}
|
||||
}
|
||||
}
|
||||
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
|
||||
.imageUpload(type, files)
|
||||
.then((r) => {
|
||||
if (r.type == DataEvent.AVATAR_UPLOADED) {
|
||||
.filesUpload(files[0].type, upload)
|
||||
.then(r => {
|
||||
if (type == 'avatar-upload') {
|
||||
notify.alert(r.message, true);
|
||||
document.getElementById("avatar").src = r.url;
|
||||
document.getElementById('avatar').src = r.filePath;
|
||||
} else {
|
||||
notify.alert(r.message, true);
|
||||
document.getElementById("background").src = r.url;
|
||||
document.getElementById('background').src = r.filePath;
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
|
|
@ -214,16 +215,16 @@ export default class SettingsIndex {
|
|||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
let self = this;
|
||||
let task = { task: "PUBLISH_ALL" };
|
||||
let task = { task: 'PUBLISH_ALL' };
|
||||
this.processing = true;
|
||||
notify.alert("Publishing site...", null);
|
||||
notify.alert('Publishing site...', null);
|
||||
this.admin
|
||||
.publish(task)
|
||||
.then((r) => {
|
||||
.then(r => {
|
||||
self.processing = false;
|
||||
notify.alert(r.message, true);
|
||||
})
|
||||
.catch((err) => {
|
||||
.catch(err => {
|
||||
self.processing = false;
|
||||
notify.alert(err, false);
|
||||
});
|
||||
|
|
@ -232,13 +233,13 @@ export default class SettingsIndex {
|
|||
handleBackup(e) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
notify.alert("Creating backup", null);
|
||||
notify.alert('Creating backup', null);
|
||||
this.mm
|
||||
.backup()
|
||||
.then((r) => {
|
||||
.then(r => {
|
||||
notify.alert(r.message, true);
|
||||
})
|
||||
.catch((err) => {
|
||||
.catch(err => {
|
||||
notify.alert(err, false);
|
||||
});
|
||||
}
|
||||
|
|
@ -248,16 +249,16 @@ export default class SettingsIndex {
|
|||
let self = this;
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
let task = { task: "cleanup pages indexes" };
|
||||
let task = { task: 'cleanup pages indexes' };
|
||||
this.processing = true;
|
||||
notify.alert("Cleaning up page indexes", null);
|
||||
notify.alert('Cleaning up page indexes', null);
|
||||
this.admin
|
||||
.handleReindex(task)
|
||||
.then((r) => {
|
||||
.then(r => {
|
||||
self.processing = false;
|
||||
notify.alert(r.message, true);
|
||||
})
|
||||
.catch((err) => {
|
||||
.catch(err => {
|
||||
self.processing = false;
|
||||
notify.alert(err, false);
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in a new issue