implemented video uploading, updated styles and templates

This commit is contained in:
Ro 2022-02-23 15:48:11 -08:00
parent 3c52bca8ba
commit f24a6b5099
19 changed files with 640 additions and 528 deletions

View file

@ -33,6 +33,8 @@ class RouteControl
): ResponseInterface {
switch (isset($args["first"]) ? $args["first"] : "index") {
case "api":
//$result = APIControl::post($request, $response, $args);
//var_dump($result);
return APIControl::post($request, $response, $args);
break;
default:

View file

@ -57,7 +57,7 @@ class Book
//var_dump($files);
if ($task != "create") {
$imageList = "";
$imagesPath = "/assets/images/blog/" . $path . "/";
//var_dump($files["page_files"] );
foreach ($files["page_files"] as $file) {
$type = $file->getClientMediaType();
switch ($type) {
@ -65,17 +65,30 @@ class Book
case "image/png":
case "image/gif":
case "image/svg":
$imagesPath = "/assets/images/blog/" . $path . "/";
$imageList =
$imageList . $imagesPath . $file->getClientFileName() . ", ";
$imageList . $imagesPath . urlencode($file->getClientFileName()). ", ";
FileUploader::uploadFile(
"../public/assets/images/blog/" . $path . "/",
$file
);
break;
case "video/mp4":
$videosPath = "/assets/video/blog/" . $path . "/";
$imageList =
$imageList . $videosPath . urlencode($file->getClientFileName()) . ", ";
FileUploader::uploadFile(
"../public/assets/video/blog/" . $path . "/",
$file
);
break;
}
}
$feature = $imageList;
//var_dump($feature);
//return ["message" => "JUST DEBUGGING"];
} else {
$feature =
"/assets/images/blog/" .

View file

@ -100,12 +100,13 @@ class Contents
$scrubbed = $sanitizer->sanitize($result->getContent());
$imageList = explode(",", $meta["feature"]);
$images = [];
foreach ($imageList as $item) {
$image = trim($item);
$featureList = explode(",", $meta["feature"]);
$media = [];
foreach ($featureList as $file) {
$item = trim($file);
$ext = explode(".", $item);
if ($item != null || $item != "") {
array_push($images, $item);
array_push($media, ["file"=>$item, "type"=>trim($ext[1])]);
}
}
@ -133,7 +134,7 @@ class Contents
"filePath" => $file,
"content" => $parsed->getContent(),
"html" => $scrubbed,
"media" => $images,
"media" => $media,
];
//checks for duplicates
$uuid = $meta["uuid"];

View file

@ -21,7 +21,7 @@ class FileUploader
//echo "**FILE** " . $file->getClientFileName();
$file->moveTo($directory . "/" . $file->getClientFileName());
$file->moveTo($directory . "/" . urlencode($file->getClientFileName()));
} catch (RuntimeException $e) {
echo "ERROR " . $e->getMessage();

View file

@ -34,7 +34,7 @@
{% endblock %}
{% block stylesheets %}
<link rel="stylesheet" type="text/css" href="/assets/css/dash.css?=weret">
<link rel="stylesheet" type="text/css" href="/assets/css/dash.css?=dfdfd">
{% endblock %}
{% block mainContent %}
@ -54,14 +54,19 @@
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>
{% for item in media %}
{% if item.type == "mp4"%}
<div id="{{loop.index0}}" class="video-item" data-source="{{ item.file }}"></div>
{% else %}
<div id="{{loop.index0}}" class="img-item" style="background: url({{ item.file }}) no-repeat center center / cover"></div>
{% endif %}
{% endfor %}
{% else %}
<div id="0" class="img-item" style="background: url({{ media[0] }}) no-repeat center center / cover">
{% endif %}
</div>
FILES
<div id="page-files-list"></div>
</div>
@ -132,5 +137,5 @@
{% endblock %}
{% block javascripts %}
<script src="/assets/scripts/Start.js?=dfgbg" type="text/javascript"></script>
<script src="/assets/scripts/Start.js?=dfnmf" type="text/javascript"></script>
{% endblock %}

View file

@ -25,53 +25,24 @@
<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.media[0] }}) no-repeat center center / cover">
<label>
{{ page.title }}
</label>
<div id="options">
{% if page.menu == 'true' %}
{% set menu = "true" %}
{% else %}
{% set menu = "false" %}
{% endif %}
{% if page.published == 'true' %}
{% set published = "true" %}
{% else %}
{% set published = "false" %}
{% endif %}
{% if page.featured == 'true' %}
{% set featured = "true" %}
{% else %}
{% set featured = "false" %}
{% endif %}
<div id="option-left">
{% if page.media[0].type == 'mp4' %}
<button data-active="{{ menu }}">
<svg>
<use xlink:href="/assets/images/global/sprite.svg#entypo-add-to-list"/>
</svg>
</button>
<button data-active="{{ published }}">
<svg>
<use xlink:href="/assets/images/global/sprite.svg#entypo-globe"/>
</svg>
</button>
<a href="/dashboard/page/edit/{{ page.uuid }}" id="{{ page.uuid }}" class="post-video-link">
<video class="post-video" loop muted autoplay>
<source src="{{ page.media[0].file }}" type="video/mp4">
<button data-active="{{ featured }}">
<svg>
<use xlink:href="/assets/images/global/sprite.svg#entypo-star"/>
</svg>
</button>
</div>
<div id="option-right">
<span>
{{ page.updated }}
</span>
</div>
</div>
Sorry, your browser doesn't support embedded videos.
</video>
{{ include("dash/partials/recent-options.twig") }}
</a>
{% else %}
<a href="/dashboard/page/edit/{{ page.uuid }}" id="{{ page.uuid }}" class="post-link" style="background: url({{ page.media[0].file }}) no-repeat center center / cover">
{{ include("dash/partials/recent-options.twig") }}
</a>
{% endif %}
{% endfor %}
{% else %}
There are no pages

View file

@ -0,0 +1,45 @@
<label>
{{ page.title }}
</label>
<div id="options">
{% if page.menu == 'true' %}
{% set menu = "true" %}
{% else %}
{% set menu = "false" %}
{% endif %}
{% if page.published == 'true' %}
{% set published = "true" %}
{% else %}
{% set published = "false" %}
{% endif %}
{% if page.featured == 'true' %}
{% set featured = "true" %}
{% else %}
{% set featured = "false" %}
{% endif %}
<div id="option-left">
<button data-active="{{ menu }}">
<svg>
<use xlink:href="/assets/images/global/sprite.svg#entypo-add-to-list"/>
</svg>
</button>
<button data-active="{{ published }}">
<svg>
<use xlink:href="/assets/images/global/sprite.svg#entypo-globe"/>
</svg>
</button>
<button data-active="{{ featured }}">
<svg>
<use xlink:href="/assets/images/global/sprite.svg#entypo-star"/>
</svg>
</button>
</div>
<div id="option-right">
<span>
{{ page.updated }}
</span>
</div>
</div>

View file

@ -5,7 +5,7 @@
{% endblock %}
{% block stylesheets %}
<link rel="stylesheet" type="text/css" href="/assets/css/dash.css?=adfd">
<link rel="stylesheet" type="text/css" href="/assets/css/dash.css?=rerre">
{% endblock %}
{% block mainContent %}
@ -23,5 +23,5 @@
{% endblock %}
{% block javascripts %}
<script src="/assets/scripts/Start.js" type="text/javascript"></script>
<script src="/assets/scripts/Start.js?=ghji" type="text/javascript"></script>
{% endblock %}

View file

@ -2278,7 +2278,7 @@ svg.icons {
height: 20px;
fill: #EFEBE3;
}
#dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a.post-link {
#dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a.post-link, #dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a.post-video-link {
font-size: 1.5em;
font-weight: 300;
display: inline-block;
@ -2286,8 +2286,13 @@ svg.icons {
vertical-align: top;
text-decoration: none;
position: relative;
overflow: hidden;
}
#dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a.post-link label {
#dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a.post-link .post-video, #dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a.post-video-link .post-video {
width: 100%;
position: absolute;
}
#dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a.post-link label, #dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a.post-video-link label {
font-size: 1.4em;
font-weight: 700;
color: #EFEBE3;
@ -2301,53 +2306,53 @@ svg.icons {
top: 35%;
text-shadow: 2px 2px 0 #32302f;
}
#dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a.post-link div#options {
#dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a.post-link div#options, #dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a.post-video-link div#options {
width: 100%;
position: absolute;
bottom: 0;
border-radius: 0 0 3px 3px;
background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.65) 100%);
}
#dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a.post-link div#options #option-left {
#dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a.post-link div#options #option-left, #dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a.post-video-link div#options #option-left {
display: inline-block;
vertical-align: top;
width: 50%;
position: relative;
background: none;
}
#dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a.post-link div#options #option-left button {
#dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a.post-link div#options #option-left button, #dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a.post-video-link div#options #option-left button {
border-radius: 3px;
background: #1D3040;
margin: 0 0 10px 10px;
}
#dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a.post-link div#options #option-left button svg {
#dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a.post-link div#options #option-left button svg, #dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a.post-video-link div#options #option-left button svg {
width: 40px;
height: 20px;
fill: #b2cce5;
}
#dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a.post-link div#options #option-left .item-options {
#dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a.post-link div#options #option-left .item-options, #dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a.post-video-link div#options #option-left .item-options {
border-radius: 3px;
margin: 5px;
display: inline-block;
}
#dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a.post-link div#options #option-left button[data-active=false] {
#dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a.post-link div#options #option-left button[data-active=false], #dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a.post-video-link div#options #option-left button[data-active=false] {
background: #1D3040;
}
#dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a.post-link div#options #option-left button[data-active=false] svg {
#dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a.post-link div#options #option-left button[data-active=false] svg, #dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a.post-video-link div#options #option-left button[data-active=false] svg {
fill: #b2cce5;
}
#dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a.post-link div#options #option-left button[data-active=true] {
#dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a.post-link div#options #option-left button[data-active=true], #dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a.post-video-link div#options #option-left button[data-active=true] {
background: #f5ab35;
}
#dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a.post-link div#options #option-left button[data-active=true] svg {
#dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a.post-link div#options #option-left button[data-active=true] svg, #dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a.post-video-link div#options #option-left button[data-active=true] svg {
fill: #1D3040;
}
#dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a.post-link div#options #option-right {
#dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a.post-link div#options #option-right, #dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a.post-video-link div#options #option-right {
display: inline-block;
width: 50%;
text-align: right;
}
#dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a.post-link div#options #option-right span {
#dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a.post-link div#options #option-right span, #dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a.post-video-link div#options #option-right span {
font-weight: bold;
display: block;
background: #EFEBE3;
@ -2911,7 +2916,7 @@ select {
margin-left: 10px;
width: 55px;
}
#post-index #post-index-wrapper #post-index-header #post-index-header-right a button svg {
#post-index #post-index-wrapper #post-index-header #post-index-header-right a svg {
width: 20px;
height: 17px;
fill: #EFEBE3;
@ -2947,6 +2952,8 @@ select {
height: 350px;
background-color: #fc6399;
position: relative;
text-shadow: 2px 2px 0 #32302f;
text-shadow: 2px 2px 0 #32302f;
}
#post-index #post-index-wrapper #posts-list a.page-link div.page-bg label {
font-size: 2em;
@ -2960,8 +2967,6 @@ select {
text-align: center;
position: relative;
top: 35%;
text-shadow: 2px 2px 0 #32302f;
text-shadow: 2px 2px 0 #32302f;
}
#post-index #post-index-wrapper #posts-list a.page-link div.page-bg #meta {
width: 100%;
@ -2989,7 +2994,7 @@ select {
background: #1D3040;
margin: 0 0 10px 10px;
}
#post-index #post-index-wrapper #posts-list a.page-link div.page-bg #meta #options #option-left button svg {
#post-index #post-index-wrapper #posts-list a.page-link div.page-bg #meta #options #option-left svg {
width: 40px;
height: 20px;
fill: #b2cce5;
@ -3002,13 +3007,13 @@ select {
#post-index #post-index-wrapper #posts-list a.page-link div.page-bg #meta #options #option-left button[data-active=false] {
background: #1D3040;
}
#post-index #post-index-wrapper #posts-list a.page-link div.page-bg #meta #options #option-left button[data-active=false] svg {
#post-index #post-index-wrapper #posts-list a.page-link div.page-bg #meta #options #option-left svg {
fill: #b2cce5;
}
#post-index #post-index-wrapper #posts-list a.page-link div.page-bg #meta #options #option-left button[data-active=true] {
background: #f5ab35;
}
#post-index #post-index-wrapper #posts-list a.page-link div.page-bg #meta #options #option-left button[data-active=true] svg {
#post-index #post-index-wrapper #posts-list a.page-link div.page-bg #meta #options #option-left svg {
fill: #1D3040;
}
#post-index #post-index-wrapper #posts-list a.page-link div.page-bg #meta #options #option-right {
@ -3217,6 +3222,26 @@ select {
display: inline-block;
cursor: pointer;
}
#post-edit-index #post-edit-index-wrapper #post-feature #page-file-manager #page-file-wrapper #page-images-list .audio-item {
height: 150px;
width: 23.8%;
border-radius: 3px;
margin: 0 10px 10px 0;
display: inline-block;
cursor: pointer;
background: #1D3040;
background: url("/assets/images/global/upload-audio.png") no-repeat center center/cover;
}
#post-edit-index #post-edit-index-wrapper #post-feature #page-file-manager #page-file-wrapper #page-images-list .video-item {
height: 150px;
width: 23.8%;
border-radius: 3px;
margin: 0 10px 10px 0;
display: inline-block;
cursor: pointer;
background: #1D3040;
background: url("/assets/images/global/upload-video.png") no-repeat center center/cover;
}
#post-edit-index #post-edit-index-wrapper #post-feature #featured-new-image-btn {
position: absolute;
margin: 20px;
@ -3245,17 +3270,6 @@ select {
}
#post-edit-index #post-edit-index-wrapper #edit-post #edit-post-wrapper #edit, #post-edit-index #post-edit-index-wrapper #edit-post #edit-post-wrapper #highlight {
/* Both elements need the same text and space styling so they are directly on top of each other */
border: 0;
width: 100%;
min-height: 300px;
height: auto;
position: absolute;
top: 0;
left: 0;
overflow: auto;
word-wrap: normal;
white-space: pre-wrap;
line-break: normal;
}
#post-edit-index #post-edit-index-wrapper #edit-post #edit-post-wrapper #highlight-content {
word-wrap: normal;

Binary file not shown.

After

Width:  |  Height:  |  Size: 8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.3 KiB

View file

@ -140,9 +140,9 @@
this[globalName] = mainExports;
}
}
})({"fQadY":[function(require,module,exports) {
})({"jRsG2":[function(require,module,exports) {
var HMR_HOST = null;
var HMR_PORT = 59457;
var HMR_PORT = 1234;
var HMR_SECURE = false;
var HMR_ENV_HASH = "4a236f9275d0a351";
module.bundle.HMR_BUNDLE_ID = "770375bf412ba982";
@ -1639,7 +1639,7 @@ class PostEditor {
//--------------------------
constructor(){
this.processing = false;
let self = this;
let self = "this";
this.admin = new _fipamoAdminAPIDefault.default(null, document.getElementById('notify-progress'));
this.mm = new _maintenanceManagerDefault.default(null, null, document.getElementById('notify-progress'));
this.urlPieces = document.URL.split('/');
@ -1789,34 +1789,34 @@ class PostActions {
collectInfo(files) {
return new Promise((resolve, reject)=>{
let pageInfo = new FormData();
let txt = document.createElement("textarea");
txt.innerHTML = document.getElementById("highlight-content").innerHTML;
let txt = document.createElement('textarea');
txt.innerHTML = document.getElementById('highlight-content').innerHTML;
let html = txt.value;
html = html.replace(/<\/?span[^>]*>/g, ""); //removes prism styling
html = html.replace(/<\/?br[^>]*>/g, "\n"); //convert back to encoded line break for storage
pageInfo.append("id", document.getElementById("post-edit-index").getAttribute("data-index"));
pageInfo.append("uuid", document.getElementById("post-edit-index").getAttribute("data-uuid"));
pageInfo.append("layout", document.getElementById("post-edit-index").getAttribute("data-layout"));
pageInfo.append("current_title", document.getElementById("post-edit-index").getAttribute("data-slug"));
pageInfo.append("content", html);
pageInfo.append("title", document.getElementById("post_title").value);
pageInfo.append("created", document.getElementById("post-date").getAttribute("data-raw"));
pageInfo.append("slug", new _stringUtilsDefault.default().cleanString(document.getElementById("post_title").value));
pageInfo.append("tags", document.getElementById("post_tags").value);
pageInfo.append("menu", document.getElementById("option-menu-pin").getAttribute("data-active"));
pageInfo.append("featured", document.getElementById("option-feature").getAttribute("data-active"));
pageInfo.append("published", document.getElementById("option-published").getAttribute("data-active"));
pageInfo.append("layout", document.getElementById("page-templates").value);
pageInfo.append("form_token", document.getElementById("form_token").value);
html = html.replace(/<\/?span[^>]*>/g, ''); //removes prism styling
html = html.replace(/<\/?br[^>]*>/g, '\n'); //convert back to encoded line break for storage
pageInfo.append('id', document.getElementById('post-edit-index').getAttribute('data-index'));
pageInfo.append('uuid', document.getElementById('post-edit-index').getAttribute('data-uuid'));
pageInfo.append('layout', document.getElementById('post-edit-index').getAttribute('data-layout'));
pageInfo.append('current_title', document.getElementById('post-edit-index').getAttribute('data-slug'));
pageInfo.append('content', html);
pageInfo.append('title', document.getElementById('post_title').value);
pageInfo.append('created', document.getElementById('post-date').getAttribute('data-raw'));
pageInfo.append('slug', new _stringUtilsDefault.default().cleanString(document.getElementById('post_title').value));
pageInfo.append('tags', document.getElementById('post_tags').value);
pageInfo.append('menu', document.getElementById('option-menu-pin').getAttribute('data-active'));
pageInfo.append('featured', document.getElementById('option-feature').getAttribute('data-active'));
pageInfo.append('published', document.getElementById('option-published').getAttribute('data-active'));
pageInfo.append('layout', document.getElementById('page-templates').value);
pageInfo.append('form_token', document.getElementById('form_token').value);
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");
if (file.type.match('image.*') || file.type.match('video.mp4')) pageInfo.append('page_files[]', file, file.name);
else reject('Not an image file');
}
else //check to see if image exists
if (document.getElementById("featured-image")) {
var imageURL = document.getElementById("featured-image").src;
imageURL != null || imageURL != undefined ? pageInfo.append("feature_image", imageURL) : pageInfo.append("feature_image", null);
if (document.getElementById('featured-image')) {
var imageURL = document.getElementById('featured-image').src;
imageURL != null || imageURL != undefined ? pageInfo.append('feature_image', imageURL) : pageInfo.append('feature_image', null);
}
//console.log("FILES", files);
resolve(pageInfo);
@ -5399,6 +5399,9 @@ var _sortablejs = require("sortablejs");
var _sortablejsDefault = parcelHelpers.interopDefault(_sortablejs);
var _dataUtils = require("../utils/DataUtils");
var _dataUtilsDefault = parcelHelpers.interopDefault(_dataUtils);
var _notificationsJs = require("./Notifications.js");
var _notificationsJsDefault = parcelHelpers.interopDefault(_notificationsJs);
const notify = new _notificationsJsDefault.default();
class FileManager {
//--------------------------
// constructor
@ -5412,7 +5415,9 @@ class FileManager {
'image/jpeg',
'image/gif',
'image/png',
'image/svg'
'image/svg',
'audio/mpeg',
'video/mp4'
];
this.files = [];
this.sortedFiles = [];
@ -5430,13 +5435,17 @@ class FileManager {
, false);
_sortablejsDefault.default.create(this.imageList, {
onUpdate: (e)=>{
notify.alert('REINDEXING FILES', null);
let currentFiles = []; //store current list
let items = e.target.children;
for(let index = 0; index < items.length; index++){
var item = items[index];
let url = '';
if (item.className == 'img-item') url = item.style.backgroundImage.slice(4, -1).replace(/"/g, '');
else url = item.getAttribute('data-source');
currentFiles.push({
id: item.getAttribute('id'),
earl: item.style.backgroundImage.slice(4, -1).replace(/"/g, '')
earl: url
});
}
this.reindexFiles(currentFiles, 0);
@ -5457,8 +5466,10 @@ class FileManager {
], path[6], {
type: blob.type
});
console.log('FRESH FILE', fresh);
this.files.push(fresh);
if (this.files.length <= count - 1) this.reindexFiles(sortOrder, ++step);
else notify.alert('FILES READY TO UPLOAD', true);
});
}
sortFiles(files) {
@ -5482,7 +5493,7 @@ class FileManager {
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';
span.className = 'img-item'; //span.setAttribute('data-source', theFile.name);
image.setAttribute('id', i);
self.storage.push([
{
@ -5495,6 +5506,18 @@ class FileManager {
self.imageList.appendChild(span); //add to files list
self.files.push(theFile);
break;
case 'video/mp4':
var video = document.createElement('div');
video.className = 'video-item';
video.setAttribute('data-source', f.target.result);
self.imageList.appendChild(video);
self.files.push(theFile);
break;
case 'audio/mpeg':
var sound = document.createElement('div');
sound.className = 'audio-item';
self.fileList.appendChild(sound);
break;
}
};
})(file); // Read in the image file as a data URL.
@ -5517,10 +5540,12 @@ class FileManager {
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
for(var i = 0, f; f = rawList[i]; i++){
// check witch files are cool to upload
console.log('TYPE', f.type);
if (this.accetableFiles.includes(f.type)) sortedList.push(f);
else notOnTheList.push(f);
//send for sorting
} //send for sorting
self.sortFiles(sortedList);
break;
}
@ -5528,7 +5553,7 @@ class FileManager {
}
exports.default = FileManager;
},{"sortablejs":"fLJM6","../utils/DataUtils":"lpIyf","@parcel/transformer-js/src/esmodule-helpers.js":"ciiiV"}],"fLJM6":[function(require,module,exports) {
},{"sortablejs":"fLJM6","../utils/DataUtils":"lpIyf","@parcel/transformer-js/src/esmodule-helpers.js":"ciiiV","./Notifications.js":"fmUxI"}],"fLJM6":[function(require,module,exports) {
var parcelHelpers = require("@parcel/transformer-js/src/esmodule-helpers.js");
parcelHelpers.defineInteropFlag(exports);
parcelHelpers.export(exports, "MultiDrag", ()=>MultiDragPlugin
@ -8475,6 +8500,6 @@ class NavActions {
}
exports.default = NavActions;
},{"@parcel/transformer-js/src/esmodule-helpers.js":"ciiiV"}]},["fQadY","bEyX8"], "bEyX8", "parcelRequiredac0")
},{"@parcel/transformer-js/src/esmodule-helpers.js":"ciiiV"}]},["jRsG2","bEyX8"], "bEyX8", "parcelRequiredac0")
//# sourceMappingURL=Start.js.map

View file

@ -26,9 +26,7 @@ export default class Base {
) {
var options = document.getElementsByClassName('init-option');
for (let index = 0; index < options.length; index++) {
options[index].addEventListener('click', e =>
this.handleOptions(e)
);
options[index].addEventListener('click', e => this.handleOptions(e));
}
if (document.getElementById('dash-form')) {
document
@ -90,9 +88,7 @@ export default class Base {
let self = this;
e.stopPropagation();
e.preventDefault();
let setUpForm = data.formDataToJSON(
document.getElementById('init-form')
);
let setUpForm = data.formDataToJSON(document.getElementById('init-form'));
let mm = new Maintenance();
this.processing = true;
mm.create(setUpForm)
@ -156,8 +152,7 @@ export default class Base {
.then(response => {
self.processing = false;
if (response.secret) {
document.getElementById('secret').value =
response.secret;
document.getElementById('secret').value = response.secret;
notify.alert(response.message, true);
} else {
if (response.type == 'mailSent') {

View file

@ -1,4 +1,4 @@
import StringUtils from "../utils/StringUtils";
import StringUtils from '../utils/StringUtils';
export default class PostActions {
//--------------------------
// constructor
@ -10,76 +10,68 @@ export default class PostActions {
collectInfo(files) {
return new Promise((resolve, reject) => {
let pageInfo = new FormData();
let txt = document.createElement("textarea");
txt.innerHTML = document.getElementById("highlight-content").innerHTML;
let txt = document.createElement('textarea');
txt.innerHTML = document.getElementById('highlight-content').innerHTML;
let html = txt.value;
html = html.replace(/<\/?span[^>]*>/g, ""); //removes prism styling
html = html.replace(/<\/?br[^>]*>/g, "\n"); //convert back to encoded line break for storage
html = html.replace(/<\/?span[^>]*>/g, ''); //removes prism styling
html = html.replace(/<\/?br[^>]*>/g, '\n'); //convert back to encoded line break for storage
pageInfo.append(
"id",
document.getElementById("post-edit-index").getAttribute("data-index")
'id',
document.getElementById('post-edit-index').getAttribute('data-index')
);
pageInfo.append(
"uuid",
document.getElementById("post-edit-index").getAttribute("data-uuid")
'uuid',
document.getElementById('post-edit-index').getAttribute('data-uuid')
);
pageInfo.append(
"layout",
document.getElementById("post-edit-index").getAttribute("data-layout")
'layout',
document.getElementById('post-edit-index').getAttribute('data-layout')
);
pageInfo.append(
"current_title",
document.getElementById("post-edit-index").getAttribute("data-slug")
'current_title',
document.getElementById('post-edit-index').getAttribute('data-slug')
);
pageInfo.append("content", html);
pageInfo.append("title", document.getElementById("post_title").value);
pageInfo.append('content', html);
pageInfo.append('title', document.getElementById('post_title').value);
pageInfo.append(
"created",
document.getElementById("post-date").getAttribute("data-raw")
'created',
document.getElementById('post-date').getAttribute('data-raw')
);
pageInfo.append(
"slug",
new StringUtils().cleanString(
document.getElementById("post_title").value
)
'slug',
new StringUtils().cleanString(document.getElementById('post_title').value)
);
pageInfo.append("tags", document.getElementById("post_tags").value);
pageInfo.append('tags', document.getElementById('post_tags').value);
pageInfo.append(
"menu",
document.getElementById("option-menu-pin").getAttribute("data-active")
'menu',
document.getElementById('option-menu-pin').getAttribute('data-active')
);
pageInfo.append(
"featured",
document.getElementById("option-feature").getAttribute("data-active")
'featured',
document.getElementById('option-feature').getAttribute('data-active')
);
pageInfo.append(
"published",
document.getElementById("option-published").getAttribute("data-active")
);
pageInfo.append(
"layout",
document.getElementById("page-templates").value
);
pageInfo.append(
"form_token",
document.getElementById("form_token").value
'published',
document.getElementById('option-published').getAttribute('data-active')
);
pageInfo.append('layout', document.getElementById('page-templates').value);
pageInfo.append('form_token', document.getElementById('form_token').value);
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);
if (file.type.match('image.*') || file.type.match('video.mp4')) {
pageInfo.append('page_files[]', file, file.name);
} else {
reject("Not an image file");
reject('Not an image file');
}
}
} else {
//check to see if image exists
if (document.getElementById("featured-image")) {
var imageURL = document.getElementById("featured-image").src;
if (document.getElementById('featured-image')) {
var imageURL = document.getElementById('featured-image').src;
imageURL != null || imageURL != undefined
? pageInfo.append("feature_image", imageURL)
: pageInfo.append("feature_image", null);
? pageInfo.append('feature_image', imageURL)
: pageInfo.append('feature_image', null);
} else {
//pageInfo.append("feature_image", null);
}

View file

@ -19,27 +19,16 @@ export default class PostEditor {
//--------------------------
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')
);
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')
) {
if (document.getElementById('post-edit-index').getAttribute('data-index')) {
this.postID = document
.getElementById('post-edit-index')
.getAttribute('data-index');
@ -64,10 +53,7 @@ export default class PostEditor {
);
this.editor.addListener(
EditorEvent.EDITOR_UPLOAD_POST_IMAGE,
() =>
this.handleEditorOptions(
EditorEvent.EDITOR_UPLOAD_POST_IMAGE
),
() => this.handleEditorOptions(EditorEvent.EDITOR_UPLOAD_POST_IMAGE),
false
);
this.editor.addListener(
@ -175,8 +161,7 @@ export default class PostEditor {
notify.alert(r.message, true);
} else {
notify.alert(r.message, true);
window.location =
'/dashboard/page/edit/' + r.id;
window.location = '/dashboard/page/edit/' + r.id;
}
}
})
@ -191,13 +176,10 @@ export default class PostEditor {
notify.alert('Index cannot be deleted', false);
return;
}
if (
confirm("AYE! You know you're deleting this post, right?")
) {
if (confirm("AYE! You know you're deleting this post, right?")) {
new PageActions()
.collectInfo(
document.getElementById('featured-image-upload')
.files[0]
document.getElementById('featured-image-upload').files[0]
)
.then(page => {
self.processing = true;
@ -231,10 +213,7 @@ export default class PostEditor {
.imageUpload(type, files)
.then(r => {
if (r.type == DataEvent.POST_IMAGE_ADDED) {
self.editor.notify(
EditorEvent.EDITOR_UPLOAD_POST_IMAGE,
r.url
);
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);

View file

@ -1,5 +1,7 @@
import Sortable from 'sortablejs';
import DataUtils from '../utils/DataUtils';
import Notfications from './Notifications.js';
const notify = new Notfications();
export default class FileManager {
//--------------------------
@ -10,7 +12,14 @@ export default class FileManager {
this.input = input;
this.imageList = imageList;
this.fileList = fileList;
this.accetableFiles = ['image/jpeg', 'image/gif', 'image/png', 'image/svg'];
this.accetableFiles = [
'image/jpeg',
'image/gif',
'image/png',
'image/svg',
'audio/mpeg',
'video/mp4'
];
this.files = [];
this.sortedFiles = [];
this.storage = [];
@ -26,13 +35,21 @@ export default class FileManager {
Sortable.create(this.imageList, {
onUpdate: e => {
notify.alert('REINDEXING FILES', null);
let currentFiles = []; //store current list
let items = e.target.children;
for (let index = 0; index < items.length; index++) {
var item = items[index];
let url = '';
if (item.className == 'img-item') {
url = item.style.backgroundImage.slice(4, -1).replace(/"/g, '');
} else {
url = item.getAttribute('data-source');
}
currentFiles.push({
id: item.getAttribute('id'),
earl: item.style.backgroundImage.slice(4, -1).replace(/"/g, '')
earl: url
});
}
this.reindexFiles(currentFiles, 0);
@ -51,11 +68,12 @@ export default class FileManager {
var path = sortOrder[step].earl.split('/');
utils.imgLoad(sortOrder[step].earl).then(blob => {
var fresh = new File([blob], path[6], { type: blob.type });
console.log('FRESH FILE', fresh);
this.files.push(fresh);
if (this.files.length <= count - 1) {
this.reindexFiles(sortOrder, ++step);
} else {
//console.log('FILES', this.files);
notify.alert('FILES READY TO UPLOAD', true);
}
});
}
@ -87,6 +105,7 @@ export default class FileManager {
f.target.result +
') no-repeat center center / cover';
span.className = 'img-item';
//span.setAttribute('data-source', theFile.name);
image.setAttribute('id', i);
self.storage.push([
{
@ -100,6 +119,38 @@ export default class FileManager {
//add to files list
self.files.push(theFile);
break;
case 'video/mp4':
var video = document.createElement('div');
video.className = 'video-item';
video.setAttribute('data-source', f.target.result);
self.imageList.appendChild(video);
self.files.push(theFile);
/*
var video = document.createElement('video');
video.setAttribute('id', escape(theFile.name));
video.className = 'video-item';
video.src = f.target.result;
video.controls = 'controls';
video.type = f.type;
self.imageList.appendChild(video);
*/
break;
case 'audio/mpeg':
var sound = document.createElement('div');
sound.className = 'audio-item';
self.fileList.appendChild(sound);
/*
var sound = document.createElement('audio');
sound.setAttribute('id', escape(theFile.name));
sound.className = 'audio-item';
sound.src = f.target.result;
sound.controls = 'controls';
sound.type = f.type;
self.imageList.appendChild(sound);
*/
break;
}
};
@ -132,6 +183,7 @@ export default class FileManager {
//this.sortFiles(freshList);
for (var i = 0, f; (f = rawList[i]); i++) {
// check witch files are cool to upload
console.log('TYPE', f.type);
if (this.accetableFiles.includes(f.type)) {
sortedList.push(f);
} else {

View file

@ -147,7 +147,7 @@
height: 20px
fill: $white
a.post-link
a.post-link, a.post-video-link
font-size: 1.5em
font-weight: 300
display: inline-block
@ -155,6 +155,10 @@
vertical-align: top
text-decoration: none
position: relative
overflow: hidden
.post-video
width: 100%
position: absolute
label
font-size: 1.4em

View file

@ -152,7 +152,6 @@
font-size: 1.5em
color: $tertiary
#post-edit-index
width: 100%
overflow: hidden
@ -190,7 +189,6 @@
padding: 5px
margin: 0 0 5px 0
#calendar-icon
background: color.adjust($primary, $lightness: -15%)
border-radius: 3px 0 0 3px
@ -236,7 +234,6 @@
button
border-radius: 0 3px 3px 0 !important
button
width: 25%
height: 45px
@ -306,6 +303,24 @@
margin: 0 10px 10px 0
display: inline-block
cursor: pointer
.audio-item
height: 150px
width: 23.8%
border-radius: 3px
margin: 0 10px 10px 0
display: inline-block
cursor: pointer
background: $primary
background: url('/assets/images/global/upload-audio.png') no-repeat center center / cover
.video-item
height: 150px
width: 23.8%
border-radius: 3px
margin: 0 10px 10px 0
display: inline-block
cursor: pointer
background: $primary
background: url('/assets/images/global/upload-video.png') no-repeat center center / cover
#featured-new-image-btn
position: absolute
@ -371,7 +386,6 @@
#highlight
z-index: 0
//pre
margin: 0
code