Fix for #76, editing upload que

Whew it took a bit but now the upload que on the page edit page is
editable. You can add and remove files as needed without having to add
all your files at once, which us how it previously worked. Still needs
to be tested a bit but the plumbing is up and running.

Also removed a stray php format config as it is no longer needed.
This commit is contained in:
Are0h 2022-05-18 16:41:25 -07:00
parent a31dff94cb
commit 8734baf85e
8 changed files with 282 additions and 287 deletions

View file

@ -10,13 +10,9 @@ use function _\find;
class Render class Render
{ {
public $loader; public $loader;
public $twig; public $twig;
public $pageInfo; public $pageInfo;
public $menu; public $menu;
public $background; public $background;
public function __construct() public function __construct()
@ -37,7 +33,8 @@ class Render
'baseURL' => $settings['global']['base_url'], 'baseURL' => $settings['global']['base_url'],
]; ];
//move global theme image assets to public folder //move global theme image assets to public folder
foreach (new \DirectoryIterator('../content/themes/' . $this->theme . '/assets/images/global/') as $file foreach (
new \DirectoryIterator('../content/themes/' . $this->theme . '/assets/images/global/') as $file
) { ) {
if ($file->isDot()) { if ($file->isDot()) {
continue; continue;

View file

@ -36,7 +36,7 @@
{% endblock %} {% endblock %}
{% block stylesheets %} {% block stylesheets %}
<link rel="stylesheet" type="text/css" href="/assets/css/dash.css?=dfehuim"> <link rel="stylesheet" type="text/css" href="/assets/css/dash.css?=dfdf">
{% endblock %} {% endblock %}
{% block mainContent %} {% block mainContent %}
@ -66,18 +66,30 @@
<div id="page-images-list"> <div id="page-images-list">
{% if media|length > 1 %} {% if media|length > 1 %}
{% for item in media %} {% for item in media %}
{% set fileName = item.file|split('/') %}
{% if item.type == "mp4" %} {% if item.type == "mp4" %}
<div id="{{ loop.index0 }}" class="video-item" data-source="{{ item.file }}"></div>
<div id="{{ loop.index0 }}" class="video-item" data-source="{{ item.file }}" data-file-name="{{ fileName[6] }}">
<button id="{{ loop.index0 }}" class="media-remove">X</button>
</div>
{% else %} {% else %}
<div id="{{ loop.index0 }}" class="img-item" style="background: url({{ item.file }}) no-repeat center center / cover"></div> <div id="{{ loop.index0 }}" class="img-item" style="background: url({{ item.file }}) no-repeat center center / cover" data-file-name="{{ fileName[6] }}">
<button id="{{ loop.index0 }}" class="media-remove">X</button>
</div>
{% endif %} {% endif %}
{% endfor %} {% endfor %}
{% else %} {% else %}
{% if media[0] != '' %} {% if media[0] != '' %}
{% set fileName = media[0].file|split('/') %}
{% if media[0].type == "mp4" %} {% if media[0].type == "mp4" %}
<div id="0" class="video-item" data-source="{{ media[0].file }}"></div> <div id="0" class="video-item" data-source="{{ media[0].file }}" date-file-name="{{ fileName[6] }}">
<button id="{{ loop.index0 }}" class="media-remove">X</button>
</div>
{% else %} {% else %}
<div id="0" class="img-item" style="background: url({{ media[0].file }}) no-repeat center center / cover"></div> <div id="0" class="img-item" style="background: url({{ media[0].file }}) no-repeat center center / cover" data-file-name="{{ fileName[6] }}">
<button id="{{ loop.index0 }}" class="media-remove">X</button>
</div>
{% endif %} {% endif %}
{% else %} {% else %}
{% endif %} {% endif %}
@ -88,18 +100,28 @@
<div id="page-files-list"> <div id="page-files-list">
{% if files|length > 1 %} {% if files|length > 1 %}
{% for item in files %} {% for item in files %}
{% set fileName = item.file|split('/') %}
{% if item.type == "mp3" %} {% if item.type == "mp3" %}
<div id="{{ loop.index0 }}" class="audio-item" data-source="{{ item.file }}"></div> <div id="{{ loop.index0 }}" class="audio-item" data-source="{{ item.file }}" data-file-name="{{ fileName[6] }}">
<button id="{{ loop.index0 }}" class="media-remove">X</button>
</div>
{% else %} {% else %}
<div id="{{ loop.index0 }}" class="file-item" data-source="{{ item.file }}"></div> <div id="{{ loop.index0 }}" class="file-item" data-source="{{ item.file }}" data-file-name="{{ fileName[6] }}">
<button id="{{ loop.index0 }}" class="media-remove">X</button>
</div>
{% endif %} {% endif %}
{% endfor %} {% endfor %}
{% else %} {% else %}
{% if files[0] != '' %} {% if files[0] != '' %}
{% set fileName = files[0].file|split('/') %}
{% if files[0].type == "mp3" %} {% if files[0].type == "mp3" %}
<div id="0" class="audio-item" data-source="{{ files[0].file }}"></div> <div id="0" class="audio-item" data-source="{{ files[0].file }}" data-file-name="{{ fileName[6] }}">
<button id="{{ loop.index0 }}" class="media-remove">X</button>
</div>
{% else %} {% else %}
<div id="0" class="file-item" data-source="{{ files[0].file }}"></div> <div id="0" class="file-item" data-source="{{ files[0].file }}" data-file-name="{{ fileName[6] }}">
<button id="{{ loop.index0 }}" class="media-remove">X</button>
</div>
{% endif %} {% endif %}
{% else %} {% else %}
@ -172,5 +194,5 @@
{% endblock %} {% endblock %}
{% block javascripts %} {% block javascripts %}
<script src="/assets/scripts/Start.js?=wryui" type="text/javascript"></script> <script src="/assets/scripts/Start.js?=wadfdfd" type="text/javascript"></script>
{% endblock %} {% endblock %}

156
phpcs.xml
View file

@ -1,156 +0,0 @@
<?xml version="1.0"?>
<ruleset xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" name="PHP_CodeSniffer" xsi:noNamespaceSchemaLocation="phpcs.xsd">
<description>The coding standard for PHP_CodeSniffer itself.</description>
<file>autoload.php</file>
<file>bin</file>
<file>scripts</file>
<file>src</file>
<file>tests</file>
<exclude-pattern>*/src/Standards/*/Tests/*\.(inc|css|js)$</exclude-pattern>
<exclude-pattern>*/tests/Core/*/*\.(inc|css|js)$</exclude-pattern>
<arg name="basepath" value="."/>
<arg name="colors"/>
<arg name="parallel" value="75"/>
<arg value="np"/>
<!-- Don't hide tokenizer exceptions -->
<rule ref="Internal.Tokenizer.Exception">
<type>error</type>
</rule>
<!-- Include the whole PEAR standard -->
<rule ref="PEAR">
<exclude name="PEAR.NamingConventions.ValidFunctionName"/>
<exclude name="PEAR.NamingConventions.ValidVariableName"/>
<exclude name="PEAR.Commenting.ClassComment"/>
<exclude name="PEAR.Commenting.FileComment.MissingCategoryTag"/>
<exclude name="PEAR.Commenting.FileComment.MissingPackageTag"/>
<exclude name="PEAR.Commenting.FileComment.MissingLinkTag"/>
<exclude name="PEAR.Commenting.FileComment.MissingVersion"/>
<exclude name="PEAR.Commenting.InlineComment"/>
</rule>
<!-- Include some sniffs from other standards that don't conflict with PEAR -->
<rule ref="Squiz.Arrays.ArrayBracketSpacing"/>
<rule ref="Squiz.Arrays.ArrayDeclaration"/>
<rule ref="Squiz.Commenting.ClosingDeclarationComment"/>
<rule ref="Squiz.ControlStructures.ControlSignature"/>
<rule ref="Squiz.ControlStructures.ElseIfDeclaration"/>
<rule ref="Squiz.Commenting.BlockComment"/>
<rule ref="Squiz.Commenting.DocCommentAlignment"/>
<rule ref="Squiz.Commenting.EmptyCatchComment"/>
<rule ref="Squiz.Commenting.InlineComment"/>
<rule ref="Squiz.Commenting.LongConditionClosingComment"/>
<rule ref="Squiz.Commenting.PostStatementComment"/>
<rule ref="Squiz.Commenting.VariableComment"/>
<rule ref="Squiz.Formatting.OperatorBracket"/>
<rule ref="Squiz.Functions.FunctionDeclarationArgumentSpacing"/>
<rule ref="Squiz.Operators.ComparisonOperatorUsage"/>
<rule ref="Squiz.PHP.DisallowInlineIf"/>
<rule ref="Squiz.Scope.MethodScope"/>
<rule ref="Squiz.Strings.ConcatenationSpacing">
<severity>0</severity>
</rule>
<rule ref="Squiz.WhiteSpace.ControlStructureSpacing"/>
<rule ref="Squiz.WhiteSpace.FunctionClosingBraceSpace"/>
<rule ref="Squiz.WhiteSpace.FunctionSpacing"/>
<rule ref="Squiz.WhiteSpace.MemberVarSpacing"/>
<rule ref="Squiz.WhiteSpace.OperatorSpacing"/>
<rule ref="Squiz.WhiteSpace.SuperfluousWhitespace"/>
<rule ref="Generic.Arrays.DisallowLongArraySyntax"/>
<rule ref="Generic.Commenting.Todo"/>
<rule ref="Generic.ControlStructures.DisallowYodaConditions"/>
<rule ref="Generic.ControlStructures.InlineControlStructure"/>
<rule ref="Generic.Formatting.DisallowMultipleStatements"/>
<rule ref="Generic.Formatting.SpaceAfterCast"/>
<rule ref="Generic.NamingConventions.ConstructorName"/>
<rule ref="Generic.PHP.DeprecatedFunctions"/>
<rule ref="Generic.PHP.LowerCaseKeyword"/>
<rule ref="Generic.Strings.UnnecessaryStringConcat"/>
<rule ref="Generic.WhiteSpace.IncrementDecrementSpacing"/>
<rule ref="PSR2.Classes.PropertyDeclaration"/>
<rule ref="PSR2.Methods.MethodDeclaration"/>
<rule ref="PSR2.Files.EndFileNewline"/>
<rule ref="PSR12.Files.OpenTag"/>
<rule ref="Zend.Files.ClosingTag"/>
<!-- PEAR uses warnings for inline control structures, so switch back to errors -->
<rule ref="Generic.ControlStructures.InlineControlStructure">
<properties>
<property name="error" value="true"/>
</properties>
</rule>
<!-- We use custom indent rules for arrays -->
<rule ref="Generic.Arrays.ArrayIndent"/>
<rule ref="Squiz.Arrays.ArrayDeclaration.KeyNotAligned">
<severity>0</severity>
</rule>
<rule ref="Squiz.Arrays.ArrayDeclaration.ValueNotAligned">
<severity>0</severity>
</rule>
<rule ref="Squiz.Arrays.ArrayDeclaration.CloseBraceNotAligned">
<severity>0</severity>
</rule>
<rule ref="Squiz.Arrays.ArrayDeclaration.CloseBraceNewLine">
<severity>0</severity>
</rule>
<!-- Check var names, but we don't want leading underscores for private vars -->
<rule ref="Squiz.NamingConventions.ValidVariableName"/>
<rule ref="Squiz.NamingConventions.ValidVariableName.PrivateNoUnderscore">
<severity>0</severity>
</rule>
<!-- Only one argument per line in multi-line function calls -->
<rule ref="PEAR.Functions.FunctionCallSignature">
<properties>
<property name="allowMultipleArguments" value="false"/>
</properties>
</rule>
<!-- Have 12 chars padding maximum and always show as errors -->
<rule ref="Generic.Formatting.MultipleStatementAlignment">
<properties>
<property name="maxPadding" value="12"/>
<property name="error" value="true"/>
</properties>
</rule>
<!-- Ban some functions -->
<rule ref="Generic.PHP.ForbiddenFunctions">
<properties>
<property name="forbiddenFunctions" type="array">
<element key="sizeof" value="count"/>
<element key="delete" value="unset"/>
<element key="print" value="echo"/>
<element key="is_null" value="null"/>
<element key="create_function" value="null"/>
</property>
</properties>
</rule>
<!-- Private methods MUST not be prefixed with an underscore -->
<rule ref="PSR2.Methods.MethodDeclaration.Underscore">
<type>error</type>
</rule>
<!-- Private properties MUST not be prefixed with an underscore -->
<rule ref="PSR2.Classes.PropertyDeclaration.Underscore">
<type>error</type>
</rule>
<!-- The testing bootstrap file uses string concats to stop IDEs seeing the class aliases -->
<rule ref="Generic.Strings.UnnecessaryStringConcat">
<exclude-pattern>tests/bootstrap\.php</exclude-pattern>
</rule>
<!-- This test file specifically *needs* Windows line endings for testing purposes. -->
<rule ref="Generic.Files.LineEndings.InvalidEOLChar">
<exclude-pattern>tests/Core/Tokenizer/StableCommentWhitespaceWinTest\.php</exclude-pattern>
</rule>
</ruleset>

View file

@ -3409,6 +3409,15 @@ select {
#post-edit-index #post-edit-index-wrapper #post-feature #page-file-manager #page-file-wrapper #page-files-list { #post-edit-index #post-edit-index-wrapper #post-feature #page-file-manager #page-file-wrapper #page-files-list {
padding: 10px 0 0; padding: 10px 0 0;
} }
#post-edit-index #post-edit-index-wrapper #post-feature #page-file-manager #page-file-wrapper #page-images-list button.media-remove,
#post-edit-index #post-edit-index-wrapper #post-feature #page-file-manager #page-file-wrapper #page-files-list button.media-remove {
height: 35px;
width: 30px;
background: #f64747;
color: #efebe3;
float: right;
margin: 5px 5px 0;
}
#post-edit-index #post-edit-index-wrapper #post-feature #page-file-manager #page-file-wrapper #page-images-list .img-item, #post-edit-index #post-edit-index-wrapper #post-feature #page-file-manager #page-file-wrapper #page-images-list .img-item,
#post-edit-index #post-edit-index-wrapper #post-feature #page-file-manager #page-file-wrapper #page-files-list .img-item { #post-edit-index #post-edit-index-wrapper #post-feature #page-file-manager #page-file-wrapper #page-files-list .img-item {
height: 150px; height: 150px;

View file

@ -1810,7 +1810,7 @@ class PostActions {
if (files.length > 0 && files != null) for(var i = 0; i < files.length; i++){ if (files.length > 0 && files != null) for(var i = 0; i < files.length; i++){
var file = files[i]; var file = files[i];
if (file.type.match('image.*') || file.type.match('video.mp4') || file.type.match('audio.mpeg') || file.type.match('application.pdf') || file.type.match('text.plain') || file.type.match('text.rtf')) pageInfo.append('page_files[]', file, file.name); if (file.type.match('image.*') || file.type.match('video.mp4') || file.type.match('audio.mpeg') || file.type.match('application.pdf') || file.type.match('text.plain') || file.type.match('text.rtf')) pageInfo.append('page_files[]', file, file.name);
else reject('Not an image file'); else reject('Not an image file: ' + file.type);
} }
else //check to see if image exists else //check to see if image exists
if (document.getElementById('featured-image')) { if (document.getElementById('featured-image')) {
@ -5424,6 +5424,20 @@ class FileManager {
this.files = []; this.files = [];
this.sortedFiles = []; this.sortedFiles = [];
this.storage = []; this.storage = [];
this.mediaSort = _sortablejsDefault.default.create(this.imageList, {
animation: 150,
onUpdate: ()=>{
notify.alert('REINDEXING MEDIA', null);
this.updateFiles();
}
});
this.fileSort = _sortablejsDefault.default.create(this.fileList, {
animation: 150,
onUpdate: ()=>{
notify.alert('REINDEXING FILES', null);
this.updateFiles();
}
});
this.start(); this.start();
} }
// methods // methods
@ -5435,38 +5449,9 @@ class FileManager {
, false); , false);
this.input.addEventListener('change', (e)=>this.handleFileActions(e) this.input.addEventListener('change', (e)=>this.handleFileActions(e)
, false); , false);
_sortablejsDefault.default.create(this.imageList, { var removeMedia = document.querySelectorAll('.media-remove');
onUpdate: (e)=>{ for(var i = 0, length = removeMedia.length; i < length; i++)removeMedia[i].addEventListener('click', (e)=>this.removeFile(e, 'media')
notify.alert('REINDEXING FILES', null); , false);
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({
earl: url
});
}
this.reindexFiles(currentFiles, 0);
}
});
_sortablejsDefault.default.create(this.fileList, {
onUpdate: (e)=>{
notify.alert('REINDEXING FILES', null);
let currentFiles = [];
let items = e.target.children;
for(let index = 0; index < items.length; index++){
var item = items[index];
let url = item.getAttribute('data-source');
currentFiles.push({
earl: url
});
}
this.reindexFiles(currentFiles, 0);
}
});
} }
getFiles() { getFiles() {
return this.files; return this.files;
@ -5475,28 +5460,37 @@ class FileManager {
let count = sortOrder.length; let count = sortOrder.length;
if (step == 0) this.files = []; if (step == 0) this.files = [];
var utils = new _dataUtilsDefault.default(); var utils = new _dataUtilsDefault.default();
var path = sortOrder[step].earl.split('/');
utils.imgLoad(sortOrder[step].earl).then((blob)=>{ utils.imgLoad(sortOrder[step].earl).then((blob)=>{
var fresh = new File([ var fresh = new File([
blob blob
], path[6], { ], sortOrder[step].fileName, {
type: blob.type type: blob.type
}); });
console.log('FRESH', fresh);
this.files.push(fresh); this.files.push(fresh);
if (this.files.length <= count - 1) this.reindexFiles(sortOrder, ++step); var limit = count - 1;
else notify.alert('FILES READY TO UPLOAD', true); if (this.files.length <= limit) {
step = step + 1;
this.reindexFiles(sortOrder, step);
} else notify.alert('FILES READY TO UPLOAD', true);
}); });
} }
sortFiles(files) { sortFiles(files) {
var self = this; var self = this; //this.files = []; //clear files array
this.files = []; //clear files array //this.imageList.innerHTML = '';
this.imageList.innerHTML = ''; //this.fileList.innerHTML = '';
this.fileList.innerHTML = '';
for(var i = 0, file1; file1 = files[i]; i++){ for(var i = 0, file1; file1 = files[i]; i++){
var reader = new FileReader(); // Closure to capture the file information var reader = new FileReader(); // Closure to capture the file information
reader.onload = ((theFile)=>{ reader.onload = ((theFile)=>{
return function(f) { return function(f) {
// sort files //create remove button object
var remove = document.createElement('button');
remove.className = 'media-remove';
remove.innerHTML = 'X';
remove.addEventListener('click', (e)=>self.removeFile(e, 'media')
, false); //get counts for lists
var mediaCount = self.imageList.childNodes.length;
var fileCount = self.fileList.childNodes.length; // sort files
switch(theFile.type){ switch(theFile.type){
case 'image/jpg': case 'image/jpg':
case 'image/jpeg': case 'image/jpeg':
@ -5504,13 +5498,12 @@ class FileManager {
case 'image/svg': case 'image/svg':
case 'image/png': case 'image/png':
//create element and add to list //create element and add to list
var image = document.createElement('img'); //var image = document.createElement('img');
image.src = f.target.result; //image.src = f.target.result;
image.title = escape(theFile.name); //image.title = escape(theFile.name);
var span = document.createElement('div'); var span = document.createElement('div');
span.style.background = 'url(' + f.target.result + ') no-repeat center center / cover'; span.style.background = 'url(' + f.target.result + ') no-repeat center center / cover';
span.className = 'img-item'; span.className = 'img-item'; //image.setAttribute('id', i);
image.setAttribute('id', i);
self.storage.push([ self.storage.push([
{ {
id: 'page_image' + i, id: 'page_image' + i,
@ -5519,22 +5512,33 @@ class FileManager {
name: escape(theFile.name) name: escape(theFile.name)
} }
]); ]);
self.imageList.appendChild(span); //add to files list if (mediaCount < 0) mediaCount = 0;
self.files.push(theFile); span.setAttribute('id', mediaCount);
remove.setAttribute('id', mediaCount);
span.setAttribute('data-file-name', theFile.name);
span.appendChild(remove);
self.imageList.appendChild(span);
break; break;
case 'video/mp4': case 'video/mp4':
var video = document.createElement('div'); var video = document.createElement('div');
video.className = 'video-item'; video.className = 'video-item';
video.setAttribute('data-source', f.target.result); video.setAttribute('data-source', f.target.result);
if (mediaCount < 0) mediaCount = 0;
video.setAttribute('id', mediaCount);
remove.setAttribute('id', mediaCount);
video.setAttribute('data-file-name', theFile.name);
video.appendChild(remove);
self.imageList.appendChild(video); self.imageList.appendChild(video);
self.files.push(theFile);
break; break;
case 'audio/mpeg': case 'audio/mpeg':
var sound = document.createElement('div'); var sound = document.createElement('div');
sound.className = 'audio-item'; sound.className = 'audio-item';
sound.setAttribute('data-source', f.target.result); sound.setAttribute('data-source', f.target.result);
sound.setAttribute('id', fileCount);
remove.setAttribute('id', fileCount);
sound.setAttribute('data-file-name', theFile.name);
sound.appendChild(remove);
self.fileList.appendChild(sound); self.fileList.appendChild(sound);
self.files.push(theFile);
break; break;
case 'application/pdf': case 'application/pdf':
case 'text/plain': case 'text/plain':
@ -5542,31 +5546,75 @@ class FileManager {
var file = document.createElement('div'); var file = document.createElement('div');
file.className = 'file-item'; file.className = 'file-item';
file.setAttribute('data-source', f.target.result); file.setAttribute('data-source', f.target.result);
file.setAttribute('id', fileCount);
remove.setAttribute('id', fileCount);
file.setAttribute('data-file-name', theFile.name);
file.appendChild(remove);
self.fileList.appendChild(file); self.fileList.appendChild(file);
self.files.push(theFile);
break; break;
} }
}; };
})(file1); // Read in the image file as a data URL. })(file1); // Read in the image file as a data URL.
reader.readAsDataURL(file1); reader.readAsDataURL(file1);
} } //give the script a beat to add the child nodes, then update it all
setTimeout(()=>{
self.updateFiles();
}, 50);
} }
// event handlers // event handlers
//-------------------------- //--------------------------
handleFileActions(e) { updateFiles() {
e.stopPropagation(); let currentFiles = []; //store current list
e.preventDefault(); let items = []; //get files from media and files list
for(let index = 0; index < this.imageList.childNodes.length; index++)items.push(this.imageList.childNodes[index]);
for(let index1 = 0; index1 < this.fileList.childNodes.length; index1++)items.push(this.fileList.childNodes[index1]);
for(let index2 = 0; index2 < items.length; index2++){
var item = items[index2];
let url = '';
if (item.className == 'img-item') url = item.style.backgroundImage.slice(4, -1).replace(/"/g, '');
else url = item.getAttribute('data-source');
currentFiles.push({
earl: url,
fileName: item.getAttribute('data-file-name')
});
}
this.reindexFiles(currentFiles, 0);
}
removeFile(e) {
var list = [];
switch(e.target.parentNode.className){
case 'img-item':
case 'video-item':
list = this.imageList;
break;
case 'audio-item':
case 'file-item':
list = this.fileList;
break;
}
for(let index = 0; index < list.childNodes.length; index++){
let media = list.childNodes[index];
if (media.id == e.target.id) {
list.removeChild(media);
notify.alert('REINDEXING MEDIA', null);
this.updateFiles();
}
}
}
handleFileActions(e1) {
e1.stopPropagation();
e1.preventDefault();
let self = this; let self = this;
let rawList = []; let rawList = [];
let sortedList = []; let sortedList = [];
let notOnTheList = []; let notOnTheList = [];
switch(e.type){ switch(e1.type){
case 'dragover': case 'dragover':
e.dataTransfer.dropEffect = 'copy'; // Explicitly show this is a copy. e1.dataTransfer.dropEffect = 'copy'; // Explicitly show this is a copy.
break; break;
case 'change': case 'change':
case 'drop': case 'drop':
e.type == 'drop' ? rawList = e.dataTransfer.files : rawList = e.target.files; e1.type == 'drop' ? rawList = e1.dataTransfer.files : rawList = e1.target.files;
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
if (this.accetableFiles.includes(f.type)) sortedList.push(f); if (this.accetableFiles.includes(f.type)) sortedList.push(f);
else notOnTheList.push(f); else notOnTheList.push(f);

View file

@ -71,7 +71,7 @@ export default class PostActions {
) { ) {
pageInfo.append('page_files[]', file, file.name); pageInfo.append('page_files[]', file, file.name);
} else { } else {
reject('Not an image file'); reject('Not an image file: ' + file.type);
} }
} }
} else { } else {

View file

@ -26,6 +26,20 @@ export default class FileManager {
this.files = []; this.files = [];
this.sortedFiles = []; this.sortedFiles = [];
this.storage = []; this.storage = [];
this.mediaSort = Sortable.create(this.imageList, {
animation: 150,
onUpdate: () => {
notify.alert('REINDEXING MEDIA', null);
this.updateFiles();
}
});
this.fileSort = Sortable.create(this.fileList, {
animation: 150,
onUpdate: () => {
notify.alert('REINDEXING FILES', null);
this.updateFiles();
}
});
this.start(); this.start();
} }
//-------------------------- //--------------------------
@ -35,46 +49,15 @@ export default class FileManager {
this.upload.addEventListener('dragover', e => this.handleFileActions(e), false); this.upload.addEventListener('dragover', e => this.handleFileActions(e), false);
this.upload.addEventListener('drop', e => this.handleFileActions(e), false); this.upload.addEventListener('drop', e => this.handleFileActions(e), false);
this.input.addEventListener('change', e => this.handleFileActions(e), false); this.input.addEventListener('change', e => this.handleFileActions(e), false);
var removeMedia = document.querySelectorAll('.media-remove');
Sortable.create(this.imageList, { for (var i = 0, length = removeMedia.length; i < length; i++) {
onUpdate: e => { removeMedia[i].addEventListener(
notify.alert('REINDEXING FILES', null); 'click',
let currentFiles = []; //store current list e => this.removeFile(e, 'media'),
let items = e.target.children; false
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({
earl: url
});
} }
this.reindexFiles(currentFiles, 0);
}
});
Sortable.create(this.fileList, {
onUpdate: e => {
notify.alert('REINDEXING FILES', null);
let currentFiles = [];
let items = e.target.children;
for (let index = 0; index < items.length; index++) {
var item = items[index];
let url = item.getAttribute('data-source');
currentFiles.push({
earl: url
});
}
this.reindexFiles(currentFiles, 0);
}
});
}
getFiles() { getFiles() {
return this.files; return this.files;
} }
@ -83,12 +66,14 @@ export default class FileManager {
let count = sortOrder.length; let count = sortOrder.length;
if (step == 0) this.files = []; if (step == 0) this.files = [];
var utils = new DataUtils(); var utils = new DataUtils();
var path = sortOrder[step].earl.split('/');
utils.imgLoad(sortOrder[step].earl).then(blob => { utils.imgLoad(sortOrder[step].earl).then(blob => {
var fresh = new File([blob], path[6], { type: blob.type }); var fresh = new File([blob], sortOrder[step].fileName, { type: blob.type });
console.log('FRESH', fresh);
this.files.push(fresh); this.files.push(fresh);
if (this.files.length <= count - 1) { var limit = count - 1;
this.reindexFiles(sortOrder, ++step); if (this.files.length <= limit) {
step = step + 1;
this.reindexFiles(sortOrder, step);
} else { } else {
notify.alert('FILES READY TO UPLOAD', true); notify.alert('FILES READY TO UPLOAD', true);
} }
@ -97,15 +82,27 @@ export default class FileManager {
sortFiles(files) { sortFiles(files) {
var self = this; var self = this;
this.files = []; //clear files array //this.files = []; //clear files array
this.imageList.innerHTML = ''; //this.imageList.innerHTML = '';
this.fileList.innerHTML = ''; //this.fileList.innerHTML = '';
for (var i = 0, file; (file = files[i]); i++) { for (var i = 0, file; (file = files[i]); i++) {
var reader = new FileReader(); var reader = new FileReader();
// Closure to capture the file information // Closure to capture the file information
reader.onload = (theFile => { reader.onload = (theFile => {
return function (f) { return function (f) {
//create remove button object
var remove = document.createElement('button');
remove.className = 'media-remove';
remove.innerHTML = 'X';
remove.addEventListener(
'click',
e => self.removeFile(e, 'media'),
false
);
//get counts for lists
var mediaCount = self.imageList.childNodes.length;
var fileCount = self.fileList.childNodes.length;
// sort files // sort files
switch (theFile.type) { switch (theFile.type) {
case 'image/jpg': case 'image/jpg':
@ -114,16 +111,17 @@ export default class FileManager {
case 'image/svg': case 'image/svg':
case 'image/png': case 'image/png':
//create element and add to list //create element and add to list
var image = document.createElement('img'); //var image = document.createElement('img');
image.src = f.target.result; //image.src = f.target.result;
image.title = escape(theFile.name); //image.title = escape(theFile.name);
var span = document.createElement('div'); var span = document.createElement('div');
span.style.background = span.style.background =
'url(' + 'url(' +
f.target.result + f.target.result +
') no-repeat center center / cover'; ') no-repeat center center / cover';
span.className = 'img-item'; span.className = 'img-item';
image.setAttribute('id', i);
//image.setAttribute('id', i);
self.storage.push([ self.storage.push([
{ {
id: 'page_image' + i, id: 'page_image' + i,
@ -132,24 +130,34 @@ export default class FileManager {
name: escape(theFile.name) name: escape(theFile.name)
} }
]); ]);
if (mediaCount < 0) mediaCount = 0;
span.setAttribute('id', mediaCount);
remove.setAttribute('id', mediaCount);
span.setAttribute('data-file-name', theFile.name);
span.appendChild(remove);
self.imageList.appendChild(span); self.imageList.appendChild(span);
//add to files list
self.files.push(theFile);
break; break;
case 'video/mp4': case 'video/mp4':
var video = document.createElement('div'); var video = document.createElement('div');
video.className = 'video-item'; video.className = 'video-item';
video.setAttribute('data-source', f.target.result); video.setAttribute('data-source', f.target.result);
if (mediaCount < 0) mediaCount = 0;
video.setAttribute('id', mediaCount);
remove.setAttribute('id', mediaCount);
video.setAttribute('data-file-name', theFile.name);
video.appendChild(remove);
self.imageList.appendChild(video); self.imageList.appendChild(video);
self.files.push(theFile);
break; break;
case 'audio/mpeg': case 'audio/mpeg':
var sound = document.createElement('div'); var sound = document.createElement('div');
sound.className = 'audio-item'; sound.className = 'audio-item';
sound.setAttribute('data-source', f.target.result); sound.setAttribute('data-source', f.target.result);
sound.setAttribute('id', fileCount);
remove.setAttribute('id', fileCount);
sound.setAttribute('data-file-name', theFile.name);
sound.appendChild(remove);
self.fileList.appendChild(sound); self.fileList.appendChild(sound);
self.files.push(theFile);
break; break;
case 'application/pdf': case 'application/pdf':
case 'text/plain': case 'text/plain':
@ -157,8 +165,11 @@ export default class FileManager {
var file = document.createElement('div'); var file = document.createElement('div');
file.className = 'file-item'; file.className = 'file-item';
file.setAttribute('data-source', f.target.result); file.setAttribute('data-source', f.target.result);
file.setAttribute('id', fileCount);
remove.setAttribute('id', fileCount);
file.setAttribute('data-file-name', theFile.name);
file.appendChild(remove);
self.fileList.appendChild(file); self.fileList.appendChild(file);
self.files.push(theFile);
break; break;
} }
}; };
@ -166,11 +177,66 @@ export default class FileManager {
// Read in the image file as a data URL. // Read in the image file as a data URL.
reader.readAsDataURL(file); reader.readAsDataURL(file);
} }
//give the script a beat to add the child nodes, then update it all
setTimeout(() => {
self.updateFiles();
}, 50);
} }
//-------------------------- //--------------------------
// event handlers // event handlers
//-------------------------- //--------------------------
updateFiles() {
let currentFiles = []; //store current list
let items = [];
//get files from media and files list
for (let index = 0; index < this.imageList.childNodes.length; index++) {
items.push(this.imageList.childNodes[index]);
}
for (let index = 0; index < this.fileList.childNodes.length; index++) {
items.push(this.fileList.childNodes[index]);
}
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({
earl: url,
fileName: item.getAttribute('data-file-name')
});
}
this.reindexFiles(currentFiles, 0);
}
removeFile(e) {
var list = [];
switch (e.target.parentNode.className) {
case 'img-item':
case 'video-item':
list = this.imageList;
break;
case 'audio-item':
case 'file-item':
list = this.fileList;
break;
}
for (let index = 0; index < list.childNodes.length; index++) {
let media = list.childNodes[index];
if (media.id == e.target.id) {
list.removeChild(media);
notify.alert('REINDEXING MEDIA', null);
this.updateFiles();
}
}
}
handleFileActions(e) { handleFileActions(e) {
e.stopPropagation(); e.stopPropagation();
e.preventDefault(); e.preventDefault();

View file

@ -393,6 +393,15 @@
#page-files-list { #page-files-list {
padding: 10px 0 0; padding: 10px 0 0;
button.media-remove {
height: 35px;
width: 30px;
background: $event-lame;
color: $white;
float: right;
margin: 5px 5px 0;
}
.img-item { .img-item {
height: 150px; height: 150px;
width: 23.8%; width: 23.8%;