Added Clipboard to Image Manager

Image Manager Completed

api/functions/organizr-functions.php

@@ -239,3 +239,23 @@ function getImages(){
     }
     return $allIcons;
 }
+function editImages(){
+    $array = array();
+    $postCheck = array_filter($_POST);
+    $filesCheck = array_filter($_FILES);
+    if(!empty($postCheck)){
+        if($_POST['data']['action'] == 'deleteImage'){
+            if(file_exists(dirname(__DIR__,2).DIRECTORY_SEPARATOR.$_POST['data']['imagePath'])){
+                writeLog('success', 'Image Manager Function -  Deleted Image ['.$_POST['data']['imageName'].']', $GLOBALS['organizrUser']['username']);
+                return (unlink(dirname(__DIR__,2).DIRECTORY_SEPARATOR.$_POST['data']['imagePath'])) ? true : false;
+            }
+        }
+    }
+    if(!empty($filesCheck)){
+        $tempFile = $_FILES['file']['tmp_name'];
+        $targetPath = dirname(__DIR__,2).DIRECTORY_SEPARATOR.'plugins'.DIRECTORY_SEPARATOR.'images'.DIRECTORY_SEPARATOR.'tabs'.DIRECTORY_SEPARATOR;
+        $targetFile =  $targetPath. $_FILES['file']['name'];
+        return (move_uploaded_file($tempFile,$targetFile)) ? true : false;
+    }
+    return false;
+}

api/index.php

@@ -216,7 +216,7 @@ switch ($function) {
                 if(qualifyRequest(1)){
                     $result['status'] = 'success';
                     $result['statusText'] = 'success';
-                    $result['data'] = $pageSettingsImageManagerView;
+                    $result['data'] = $pageSettingsImageManager;
                 }else{
                     $result['status'] = 'error';
                     $result['statusText'] = 'API/Token invalid or not set';
@@ -227,37 +227,7 @@ switch ($function) {
                 if(qualifyRequest(1)){
                     $result['status'] = 'success';
                     $result['statusText'] = 'success';
-                    $result['data'] = adminEditGroup($_POST);
-                }else{
-                    $result['status'] = 'error';
-                    $result['statusText'] = 'API/Token invalid or not set';
-                    $result['data'] = null;
-                }
-                break;
-            default:
-                $result['status'] = 'error';
-                $result['statusText'] = 'The function requested is not defined for method: '.$method;
-                break;
-        }
-        break;
-    case 'v1_settings_image_manager_upload':
-        switch ($method) {
-            case 'GET':
-                if(qualifyRequest(1)){
-                    $result['status'] = 'success';
-                    $result['statusText'] = 'success';
-                    $result['data'] = $pageSettingsImageManagerUpload;
-                }else{
-                    $result['status'] = 'error';
-                    $result['statusText'] = 'API/Token invalid or not set';
-                    $result['data'] = null;
-                }
-                break;
-            case 'POST':
-                if(qualifyRequest(1)){
-                    $result['status'] = 'success';
-                    $result['statusText'] = 'success';
-                    $result['data'] = adminEditGroup($_POST);
+                    $result['data'] = editImages();
                 }else{
                     $result['status'] = 'error';
                     $result['statusText'] = 'API/Token invalid or not set';

api/pages/settings-image-manager-upload.php

@@ -1,15 +0,0 @@
-<?php
-
-$pageSettingsImageManagerUpload = '
-<script>
-</script>
-<div class="panel bg-theme-dark panel-info">
-    <div class="panel-heading">
-		<span lang="en">View Images</span>
-	</div>
-    <div class="panel-wrapper collapse in" aria-expanded="true">
-        <div class="panel-body bg-theme-dark">
-        </div>
-    </div>
-</div>
-';

api/pages/settings-image-manager-view.php

@@ -1,17 +0,0 @@
-<?php
-
-$pageSettingsImageManagerView = '
-<script>
-	buildImageManagerView();
-</script>
-<div class="panel bg-theme-dark panel-info">
-    <div class="panel-heading">
-		<span lang="en">View Images</span>
-	</div>
-    <div class="panel-wrapper collapse in" aria-expanded="true">
-        <div class="panel-body bg-theme-dark" >
-        <div class="row el-element-overlay m-b-40" id="settings-image-manager-list"></div>
-        </div>
-    </div>
-</div>
-';

api/pages/settings-image-manager.php

@@ -0,0 +1,35 @@
+<?php
+
+$pageSettingsImageManager = '
+<script>
+	buildImageManagerView();
+    var myDropzone = new Dropzone("#new-image-form", {
+      url: "api/?v1/settings/image/manager/view",
+      init: function() {
+        this.on("complete", function(file) {
+            buildImageManagerView();
+            //$.magnificPopup.close();
+        });
+      }
+    });
+
+</script>
+<div class="panel bg-theme-dark panel-info">
+    <div class="panel-heading">
+		<span lang="en">View Images</span>
+        <button type="button" class="btn btn-success btn-circle pull-right popup-with-form m-r-5" href="#new-image-form" data-effect="mfp-3d-unfold"><i class="fa fa-upload"></i> </button>
+	</div>
+    <div class="panel-wrapper collapse in" aria-expanded="true">
+        <div class="panel-body bg-theme-dark" >
+        <div class="row el-element-overlay m-b-40" id="settings-image-manager-list"></div>
+        </div>
+    </div>
+</div>
+<form action="#" id="new-image-form" class="mfp-hide white-popup-block mfp-with-anim dropzone">
+    <h1 lang="en">Upload Image</h1>
+    <div class="fallback">
+        <input name="file" type="file" multiple />
+    </div>
+    <div class="clearfix"></div>
+</form>
+';

api/pages/settings.php

@@ -33,7 +33,7 @@ $pageSettings = '
                         <li onclick="changeSettingsMenu(\'Settings::Tab Editor\')"><a href="#settings-main-tab-editor" class="sticon ti-layout-tab-v"><span lang="en">Tab Editor</span></a></li>
                         <li onclick="changeSettingsMenu(\'Settings::Customize\')"><a href="#settings-main-customize" class="sticon ti-paint-bucket"><span lang="en">Customize</span></a></li>
                         <li onclick="changeSettingsMenu(\'Settings::User Management\')"><a href="#settings-main-user-management" class="sticon ti-user"><span lang="en">User Management</span></a></li>
-                        <li onclick="changeSettingsMenu(\'Settings::Image Manager\')"><a href="#settings-main-image-manager" class="sticon ti-image"><span lang="en">Image Manager</span></a></li>
+                        <li onclick="changeSettingsMenu(\'Settings::Image Manager\');loadSettingsPage(\'api/?v1/settings/image/manager/view\',\'#settings-image-manager-view\',\'Image Viewer\');"><a href="#settings-main-image-manager" class="sticon ti-image"><span lang="en">Image Manager</span></a></li>
     					<li onclick="changeSettingsMenu(\'Settings::Plugins\')"><a href="#settings-main-plugins" class="sticon ti-plug"><span lang="en">Plugins</span></a></li>
                         <li onclick="changeSettingsMenu(\'Settings::System Settings\')"><a href="#settings-main-system-settings" class="sticon ti-settings"><span lang="en">System Settings</span></a></li>
                     </ul>
@@ -94,15 +94,9 @@ $pageSettings = '
                     </section>
                     <! -- IMAGE MANAGER -->
                     <section id="settings-main-image-manager">
-                        <ul class="nav customtab2 nav-tabs" role="tablist">
-                            <li onclick="changeSettingsMenu(\'Settings::Image Manager::View\');loadSettingsPage(\'api/?v1/settings/image/manager/view\',\'#settings-image-manager-view\',\'Image Viewer\');" role="presentation"><a href="#settings-image-manager-view" aria-controls="home" role="tab" data-toggle="tab" aria-expanded="true"><span class="visible-xs"><i class="ti-image"></i></span><span class="hidden-xs" lang="en"> View</span></a>
-                            </li>
-                            <li onclick="changeSettingsMenu(\'Settings::Image Manager::Upload\')" role="presentation"><a href="#settings-image-manager-upload" aria-controls="home" role="tab" data-toggle="tab" aria-expanded="true"><span class="visible-xs"><i class="ti-upload"></i></span><span class="hidden-xs" lang="en"> Upload</span></a>
-                            </li>
-                        </ul>
                         <!-- Tab panes -->
                         <div class="tab-content">
-                            <div role="tabpanel" class="tab-pane fade" id="settings-image-manager-view">
+                            <div role="tabpanel" class="tab-pane fade active in" id="settings-image-manager-view">
                                 <h2 lang="en">Loading...</h2>
                                 <div class="clearfix"></div>
                             </div>

index.php

@@ -114,6 +114,7 @@
 	<script src="js/jquery-ui.min.js"></script>
 	<script src="js/jquery.serializeToJSON.js"></script>
 	<script src="js/lazyload.min.js"></script>
+	<script src="js/clipboard.js"></script>
 	<script src="plugins/bower_components/blockUI/jquery.blockUI.js"></script>
 	<script src="plugins/bower_components/datatables/jquery.dataTables.min.js"></script>
 	<script src="plugins\bower_components\datatables-plugins\sorting\datetime-moment.js"></script>

js/custom.js

@@ -7,6 +7,12 @@ $(document).ajaxComplete(function () {
 });
 $(document).ready(function () {
     pageLoad();
+    var clipboard = new Clipboard('.clipboard');
+    clipboard.on('success', function(e) {
+        message('Clipboard',e.text,'bottom-right','#FFF','info','5000');
+        e.clearSelection();
+    });
+
     /* ===========================================================
         Loads the correct sidebar on window load.
         collapses the sidebar on window resize.
@@ -987,6 +993,36 @@ $(document).on('change asColorPicker::close', '#customize-appearance-form :input
     settingsAPI(post,callbacks);
 
 });
+//DELETE IMAGE
+$(document).on("click", ".deleteImage", function () {
+    var image = $(this);
+    swal({
+        title: window.lang.translate('Delete ')+image.attr("data-image-name")+'?',
+        type: "warning",
+        showCancelButton: true,
+        confirmButtonColor: "#DD6B55",
+        confirmButtonText: window.lang.translate('Yes'),
+        cancelButtonText: window.lang.translate('No'),
+        closeOnConfirm: true,
+        closeOnCancel: true
+    }, function(isConfirm){
+        if (isConfirm) {
+            //Create POST Array
+            var post = {
+                action:'deleteImage',
+                api:'api/?v1/settings/image/manager/view',
+                imageName:image.attr("data-image-name"),
+                imagePath:image.attr("data-image-path"),
+                messageTitle:'',
+                messageBody:window.lang.translate('Deleted Image')+': '+image.attr("data-image-name"),
+                error:'Organizr Function: User API Connection Failed'
+            };
+            var callbacks = $.Callbacks();
+            callbacks.add( buildImageManagerView );
+            settingsAPI(post,callbacks);
+        }
+    });
+});
 // RELOAD Page
 $(document).on("click", ".reload", function () {
     location.reload();

js/functions.js

@@ -506,14 +506,14 @@ function buildImageManagerViewItem(array){
 			var filepath = v.split("/");
 			var name = filepath[3].split(".");
 			imageListing += `
-			<div class="col-lg-2 col-md-3 col-sm-4 col-xs-4">
-				<div class="white-box">
+			<div class="col-lg-1 col-md-3 col-sm-4 col-xs-4">
+				<div class="white-box bg-theme-dark">
 					<div class="el-card-item p-0">
 						<div class="el-card-avatar el-overlay-1"> <img class="lazyload" data-src="`+v+`">
 							<div class="el-overlay">
 								<ul class="el-info">
-									<li><a class="btn default btn-outline" href="javascript:void(0);"><i class="ti-clipboard"></i></a></li>
-									<li><a class="btn default btn-outline" href="javascript:void(0);"><i class="icon-trash"></i></a></li>
+									<li><a class="btn default btn-outline clipboard" data-clipboard-text="`+v+`" href="javascript:void(0);"><i class="ti-clipboard"></i></a></li>
+									<li><a class="btn default btn-outline deleteImage" href="javascript:void(0);" data-image-path="`+v+`" data-image-name="`+name[0]+`"><i class="icon-trash"></i></a></li>
 								</ul>
 							</div>
 						</div>
@@ -532,7 +532,6 @@ function buildImageManagerView(){
 	ajaxloader(".content-wrap","in");
 	organizrAPI('GET','api/?v1/image/list').success(function(data) {
 		var response = JSON.parse(data);
-		console.log(response);
 		$('#settings-image-manager-list').html(buildImageManagerViewItem(response.data));
 		;
 	}).fail(function(xhr) {