preview after every input

Jeff Balicki
Showing 3 changed files with 126 additions and 131 deletions
app/Http/Controllers/ApiController.php
app/Http/routes.php
public/files/js/interfaceGdrive.js
--- a/app/Http/Controllers/ApiController.php
View file @dfb4012
+++ b/app/Http/Controllers/ApiController.php
View file @dfb4012
@@ -33,8 +33,7 @@ class ApiController extends Controller
 	    // $json = '{"pdf":[{"name":"Sample PDF Document","folder":"Sample","pdfLocation":"http://hotelpodlipou.sk/uploads/files/sample.pdf"}],"changes":[{"label":"none","locationUp":"400","locationRight":90,"pages":"1","content":"logo-sample-text_355-558.jpg","z-index":null,"idstylesPDF":1,"order":"2","style":null,"idchange_typePDF":2,"change_type":"2","fileLocation":"https://image.freepik.com/free-vector/logo-sample-text_355-558.jpg"},{"label":"text style","locationUp":"60","locationRight":290,"pages":"1","content":"519.642.4404 London","z-index":null,"idstylesPDF":2,"order":"1","style":"a:3:{s:11:\"font-family\";s:11:\"TradeGothic\";s:9:\"font-size\";s:2:\"14\";s:10:\"font-color\";s:16:\"cmyk 0 0.6 0.5 0\";}","idchange_typePDF":1,"change_type":"1"}]}';
+        //$styles = serialize(array("font-family"=>"Barber","font-size"=>"20","font-color"=>"cmyk 0 0 0 0","alignment"=>"left"));
-//$styles = serialize(array("font-family"=>"Barber","font-size"=>"20","font-color"=>"cmyk 0 0 0 0","alignment"=>"left"));
 		//print_r($styles);
 		//die();
        $apiCallId = new pdfModel();
@@ -43,10 +42,6 @@ class ApiController extends Controller
        $pdfId = new pdfModel();
        $pdfId = $pdfId->addPdf($apiCallId, $json);
        $json = json_decode($json);
        $storagePath = Storage::disk('public')->getDriver()->getAdapter()->getPathPrefix();
        $folder = str_replace(' ', '-', $json->pdf[0]->name); // Replaces all spaces with hyphens.
        $folder = preg_replace('/[^A-Za-z0-9\-]/', '', $folder);
@@ -66,10 +61,6 @@ class ApiController extends Controller
            $curl->download($pdfLocation, $storagePath . $folder . '/' . $file);
            $curl->close();
            $fileEntry = New FileEntryController();
-           // echo $storagePath . $folder . '/' . $file;
-            //$fileEntry->addfile( $folder . '/' . $file);
            $im = new Imagick();
            $im->setResolution(300, 300);     //set the resolution of the resulting jpg
            if (! is_readable($storagePath . $folder . '/' . $file)) {
@@ -92,32 +83,55 @@ class ApiController extends Controller
                $curl->close();
            }
+		}
+	}
+	 public function preview()
+    {
+        $json = Input::all();
+        $json = json_encode($json);
+        $json = json_decode($json);
+		$pdfLocation = $json->pdf[0]->pdfLocation;
+        $cust_id = $json->pdf[0]->custId;
+		$storagePath = Storage::disk('public')->getDriver()->getAdapter()->getPathPrefix();
+		foreach ($json->changes as $change) {
+            if ($change->change_type == 'img') {
+				$folder = str_replace(' ', '-', $json->pdf[0]->folder); // Replaces all spaces with hyphens.
+                $folder = preg_replace('/[^A-Za-z0-9\-]/', '', $folder);
+                $fileLocation = $change->fileLocation;
+                $file = explode('\\', $change->content);
+				$file = end($file);
+				$fileClean = str_replace(' ', '-', $file); 
+                $curl = new Curl();
+                $curl->download($fileLocation.'/'.$fileClean , $storagePath . $folder . '/' . $fileClean);
+                $curl->close();
+			}
        }
+        $json = json_encode($json);
+        $apiCallId = "3";
+        $pdfId = new pdfModel();
+        $pdfId = $pdfId->changePdf($apiCallId, $json);
+        $pdf = new PdfController();
+        $pdf =  $pdf->pdf($pdfId);
+        $response = $pdfId;
+        $statusCode = 200;
+        return Response::json( $response, $statusCode);
   }
     public function update()
    {
        $json = Input::all();
        $json = json_encode($json);
        $json = json_decode($json);
 		$pdfLocation = $json->pdf[0]->pdfLocation;
        $cust_id = $json->pdf[0]->custId;
 		$storagePath = Storage::disk('public')->getDriver()->getAdapter()->getPathPrefix();
 		foreach ($json->changes as $change) {
            if ($change->change_type == 'img') {
 				$folder = str_replace(' ', '-', $json->pdf[0]->folder); // Replaces all spaces with hyphens.
                $folder = preg_replace('/[^A-Za-z0-9\-]/', '', $folder);
                $fileLocation = $change->fileLocation;
@@ -127,35 +141,25 @@ class ApiController extends Controller
                $curl = new Curl();
                $curl->download($fileLocation.'/'.$fileClean , $storagePath . $folder . '/' . $fileClean);
                $curl->close();
-				// chmod( $storagePath . $folder . '/' . $fileClean, 0777);
 			}
        }
        $json = json_encode($json);
-       // $json = '{"pdf":[{"name":"Sample PDF Document","folder":"Sample","pdfLocation":"http://hotelpodlipou.sk/uploads/files/sample.pdf"}],"changes":[{"label":"none","locationUp":"400","locationRight":90,"pages":"1","content":"logo-sample-text_355-558.jpg","z-index":null,"idstylesPDF":1,"order":"2","style":null,"idchange_typePDF":2,"change_type":"2","fileLocation":"https://image.freepik.com/free-vector/logo-sample-text_355-558.jpg"},{"label":"text style","locationUp":"60","locationRight":290,"pages":"1","content":"519.642.4404 London","z-index":null,"idstylesPDF":2,"order":"1","style":"a:3:{s:11:\"font-family\";s:11:\"TradeGothic\";s:9:\"font-size\";s:2:\"14\";s:10:\"font-color\";s:16:\"cmyk 0 0.6 0.5 0\";}","idchange_typePDF":1,"change_type":"1"}]}';
        //$apiCallId = new pdfModel();
        // $apiCallId = $apiCallId->addApiCall('1',$json);
        $apiCallId = "3";
        $pdfId = new pdfModel();
        $pdfId = $pdfId->changePdf($apiCallId, $json);
        $pdf = new PdfController();
        $pdf =  $pdf->pdf($pdfId);
        $response = $pdfId;
        $statusCode = 200;
-        //$UploaqdPdf = new GoogledriveuploadpdfController();
-        //$UploaqdPdf->google_drive_upload($folder, 'new_'.$pdfLocation,$pdfId,$cust_id);
-        return Response::json( $response, $statusCode);
+        return Response::json( $response, $statusCode);
+		$UploaqdPdf = new GoogledriveuploadpdfController();
+        $UploaqdPdf->google_drive_upload($folder, 'new_'.$pdfLocation,$pdfId,$cust_id);
    }
   public function getList($json)
    {
        $rows = new pdfModel();
@@ -170,8 +174,6 @@ class ApiController extends Controller
    public function getPdf($json)
    {
        $rows = new pdfModel();
        $rows = $rows->getpdf($json)->get();
        $response = $rows;
@@ -181,8 +183,6 @@ class ApiController extends Controller
    }
 	  public function getPdfPriev($json)
    {
        $rows = new pdfModel();
        $rows = $rows->getpdf($json)->get();
        $response = $rows;
@@ -195,8 +195,6 @@ class ApiController extends Controller
 		$rows = new pdfModel();
        $id = $rows->getpdfid($json)->get();
 		$rows = $rows->getpdf($id[0]->pdfid)->get();
        $response = $rows;
        $statusCode = 200;
--- a/app/Http/routes.php
View file @dfb4012
+++ b/app/Http/routes.php
View file @dfb4012
@@ -23,34 +23,29 @@ Route::get('pdf/{id}', 'PdfController@pdf');
 Route::group(array('prefix' => 'api/v1'), function($json)
 {
 	Route::resource('add', 'ApiController@insert');
    Route::resource('get-list', 'ApiController@getList');
    Route::resource('get-pdf', 'ApiController@getpdf');
    Route::resource('api', 'FileEntryController@getApi');
 	Route::resource('get-pdf-google', 'ApiController@getpdfgoogle');
 });
 Route::any('api/update',   'ApiController@update');
+Route::any('api/preview',  'ApiController@preview');
 Route::post('api/authenticate', 'AuthenticateController@authenticate');
 Route::get('api/authenticate/user', 'AuthenticateController@getAuthenticatedUser');
-Route::any('fileentry/postUpload',  'FileEntryController@postUpload');
-Route::get('fileentry/get/{filename}', [
-    'as' => 'getentry', 'uses' => 'FileEntryController@get']);
+Route::any('fileentry/postUpload',  'FileEntryController@postUpload');
+Route::get('fileentry/get/{filename}', [ 'as' => 'getentry', 'uses' => 'FileEntryController@get']);
 Route::get('fileentry', 'FileEntryController@index');
 Route::get('fileentry/getImage/{folder}/{filename}',  'FileEntryController@getImage');
 Route::get('fileentry/getPDF/{folder}/{filename}',  'FileEntryController@getPDF');
+Route::post('fileentry/add',[ 'as' => 'addentry', 'uses' => 'FileEntryController@add']);
-Route::post('fileentry/add',[
-    'as' => 'addentry', 'uses' => 'FileEntryController@add']);
 Route::get('api/googlePdfUpload/{folder}/{filename}/{pdfid}/{id}', 'GoogledriveuploadpdfController@google_drive_upload');
 Route::get('auth/google/callback', 'GoogledriveuploadpdfController@google_drive_upload');
--- a/public/files/js/interfaceGdrive.js
View file @dfb4012
+++ b/public/files/js/interfaceGdrive.js
View file @dfb4012
-var pluginUrl = window.location.protocol+'//'+window.location.host+'/commonwell';
+//var pluginUrl = window.location.protocol + '//' + window.location.host + '/commonwell';
-var pdf_customizer = "http://localhost:8888/pdf-customizer/public";
+//var pdf_customizer = "http://localhost:8888/pdf-customizer/public";
-//var pluginUrl = "http://contact.gotenzing.com";
+var pluginUrl = window.location.protocol + '//' + window.location.host;
-//var pdf_customizer = "http://pdf-customizer.synapsus.co";
+var pdf_customizer = "http://pdf-customizer.synapsus.co";
- var imageHeight="";
+var imageHeight = "";
- var imageWidth="";
+var imageWidth = "";
- var edit = false;
+var edit = false;
@@ -50,15 +50,15 @@ function offFocus(id) {
    });
 }
-CanvasRenderingContext2D.prototype.roundRect = function (x, y, w, h, r) {
+CanvasRenderingContext2D.prototype.roundRect = function(x, y, w, h, r) {
    if (w < 2 * r) r = w / 2;
    if (h < 2 * r) r = h / 2;
    this.beginPath();
-  this.moveTo(x+r, y);
+    this.moveTo(x + r, y);
-  this.arcTo(x+w, y,   x+w, y+h, r);
+    this.arcTo(x + w, y, x + w, y + h, r);
-  this.arcTo(x+w, y+h, x,   y+h, r);
+    this.arcTo(x + w, y + h, x, y + h, r);
-  this.arcTo(x,   y+h, x,   y,   r);
+    this.arcTo(x, y + h, x, y, r);
-  this.arcTo(x,   y,   x+w, y,   r);
+    this.arcTo(x, y, x + w, y, r);
    this.closePath();
    return this;
 }
@@ -87,8 +87,8 @@ function ShowBox(pheight, pwidth, up, right, height, width, count, example) {
        var c = document.getElementById("Canvas");
        var ctx = c.getContext("2d");
        ctx.save();
-    ctx.lineWidth=2;
+        ctx.lineWidth = 2;
-    ctx.strokeStyle= $('.callout').css("background-color")
+        ctx.strokeStyle = $('.callout').css("background-color")
        ctx.roundRect(scaleRight, scaleDown, scalewidth, scaleheight, 5).stroke();
    });
@@ -111,7 +111,7 @@ function HideBox(kind) {
        var Qctx = Qc.getContext("2d");
        Qctx.clearRect(0, 0, Qc.width, Qc.height);
        Qctx.restore();
-     if(kind !='file'){
+        if (kind != 'file') {
            document.getElementById("preview").checked = true;
            $('#changes').trigger('submit');
        }
@@ -133,13 +133,14 @@ function HideBoxwithdate() {
 }
-  function fullScreen() {
+function fullScreen() {
    jQuery(document).ready(function($) {
        $('#bbox').toggleClass('fullscreen');
        //$('#bbox').animate({ width: "100%", height: "100%", position: "fixed", top: "0", left: "0" }); 
    });
- }
+}
 function getJson(user_id) {
    jQuery(document).ready(function($) {
        $.getJSON("" + pdf_customizer + "/api/v1/get-list/" + user_id, function(data) {
@@ -158,10 +159,11 @@ function getOneJson(id) {
            var json = JSON.stringify(data);
            edit = false;
-      changePdfOptions(json,edit);
+            changePdfOptions(json, edit);
        });
    });
 }
 function getBackOneJson(id) {
    jQuery(document).ready(function($) {
        $.getJSON("" + pdf_customizer + "/api/v1/get-pdf/" + id, function(data) {
@@ -171,7 +173,7 @@ function getBackOneJson(id) {
            edit = true;
-      changePdfOptions(json,edi);
+            changePdfOptions(json, edi);
        });
    });
 }
@@ -204,9 +206,9 @@ function pickPdfFromList(json) {
 function changePdfOptions(json, edit) {
    jQuery(function($) {
-    if(edit == false){
+        if (edit == false) {
            $('#contentAreaOver').hide();
-}
+        }
@@ -233,14 +235,14 @@ function changePdfOptions(json, edit) {
            $("#changes").validate({
                errorPlacement: function(error, element) {
                    var isFile = $(element).attr('type') == 'file';
-    if(isFile) {
+                    if (isFile) {
                        error.insertAfter($(element).parent('label'));
                    } else {
                        error.insertAfter(element);
                    }
                }
-});
+            });
        });
        var strVar2 = "";
@@ -258,14 +260,14 @@ function changePdfOptions(json, edit) {
        //console.log( windowWidth+'  '+windowHeight);
        //console.log( pwidth+' '+pheight);
-   if(pwidth > pheight){
+        if (pwidth > pheight) {
            //console.log('wide')
            var scaleImage = windowWidth / pwidth;
            var imageHeight = pheight * scaleImage;
            var imageWidth = windowWidth;
            var imgLeft = 0;
            var imgTop = 40;
-  }else{  
+        } else {
            var scaleImage = windowHeight / pheight;
            var imageHeight = windowHeight;
            var imageWidth = pwidth * scaleImage;
@@ -277,8 +279,8 @@ function changePdfOptions(json, edit) {
        // console.log('windowWidth'+windowWidth ,'windowHeight'+windowHeight,'pheight'+json[0].pheight,'pwidth'+json[0].pwidth,'imageWidth'+imageWidth, 'imageHeight'+imageHeight);
        pdflist += '<div id="pdfPreview" style="" class="column">';
+        // pdflist += '<img id="pdfimage"  src="' + pdf_customizer + '/fileentry/getImage/' + json[0].folder + '/' + json[0].example + '" width="300px">';
-    pdflist += '<canvas id="Canvas" width="' + imageWidth + '" height="' + imageHeight + '" style=" background-image: url(' + pdf_customizer + '/fileentry/getImage/' + json[0].folder + '/' + json[0].example + '); background-size:' + imageWidth + 'px  ' + imageHeight + 'px;   position: relative; z-index: 10; margin-top:'+imgTop+'%; display: block; margin-left: auto;  margin-right:  auto;   border-style: solid;  border-width:1px; background-size:' + imageWidth + 'px  ' + imageHeight + 'px"></canvas><div id="pdfPreviewInner" style="    position: relative; top: -'+imageHeight+'px;"></div></div>';
+        pdflist += '<canvas id="Canvas" width="' + imageWidth + '" height="' + imageHeight + '" style=" background-image: url(' + pdf_customizer + '/fileentry/getImage/' + json[0].folder + '/' + json[0].example + '); background-size:' + imageWidth + 'px  ' + imageHeight + 'px;   position: relative; z-index: 10; margin-top:' + imgTop + '%; display: block; margin-left: auto;  margin-right:  auto;   border-style: solid;  border-width:1px; background-size:' + imageWidth + 'px  ' + imageHeight + 'px"></canvas><div id="pdfPreviewInner" style="    position: relative; top: -' + imageHeight + 'px;"></div></div>';
        pdfChange += '<form id="changes" name="changes" enctype="multipart/form-data" action=""  METHOD="POST"></br><h4>' + json[0].name + '</h4>';
        pdfChange += '<input type="hidden" id="id" name="id" value="' + json[0].idPDF + '">';
        for (i = 0; i < json.length; ++i) {
@@ -294,12 +296,12 @@ function changePdfOptions(json, edit) {
                pdfChange += '<span class="tip" id="span' + i + '">' + json[i].tips + '</span><br/>';
            }
            if (json[i].change_type == "img") {
-         if(edit == true){
+                if (edit == true) {
-        pdfChange += '<input value="'+json[i].content+'" tabindex="-1"  class="required"  id="hiddenchangescontent[' + i + ']"   type="hidden" name="content[' + i + ']"  >';
+                    pdfChange += '<input value="' + json[i].content + '" tabindex="-1"  class="required"  id="hiddenchangescontent[' + i + ']"   type="hidden" name="content[' + i + ']"  >';
-        pdfChange += json[i].names + ':<label onfocusout="HideBox(\'file\')"  onfocus=" ShowBox(' + json[0].pheight + ',' + json[0].pwidth + ',' + json[i].locationUp + ',' + json[i].locationRight + ',' + json[i].height + ',' + json[i].width + ',' + i + ',\'' + example + '\')"  id="focusButton' + i + '" class="custom-file-input" tabindex="0"><input tabindex="-1"  class="fileupload upload"  id="changescontent[' + i + ']"   type="file" name="content[' + i + ']"  ><span class="file-button"><span class="file-name file-button">'+json[i].content+'</span><strong>Browse</strong></span></label>';
+                    pdfChange += json[i].names + ':<label onfocusout="HideBox(\'file\')"  onfocus=" ShowBox(' + json[0].pheight + ',' + json[0].pwidth + ',' + json[i].locationUp + ',' + json[i].locationRight + ',' + json[i].height + ',' + json[i].width + ',' + i + ',\'' + example + '\')"  id="focusButton' + i + '" class="custom-file-input" tabindex="0"><input tabindex="-1"  class="fileupload upload"  id="changescontent[' + i + ']"   type="file" name="content[' + i + ']"  ><span class="file-button"><span class="file-name file-button">' + json[i].content + '</span><strong>Browse</strong></span></label>';
-           }else{
+                } else {
-        pdfChange += json[i].names + ':<label onfocusout="HideBox(\'file\')"  onfocus=" ShowBox(' + json[0].pheight + ',' + json[0].pwidth + ',' + json[i].locationUp + ',' + json[i].locationRight + ',' + json[i].height + ',' + json[i].width + ',' + i + ',\'' + example + '\')"  id="focusButton' + i + '" class="custom-file-input" tabindex="0"><input value="'+json[i].content+'" tabindex="-1"  class="fileupload upload required"  id="changescontent[' + i + ']"   type="file" name="content[' + i + ']"  ><span class="file-button"><span class="file-name file-button">'+json[i].content+'</span><strong>Browse</strong></span></label>';
+                    pdfChange += json[i].names + ':<label onfocusout="HideBox(\'file\')"  onfocus=" ShowBox(' + json[0].pheight + ',' + json[0].pwidth + ',' + json[i].locationUp + ',' + json[i].locationRight + ',' + json[i].height + ',' + json[i].width + ',' + i + ',\'' + example + '\')"  id="focusButton' + i + '" class="custom-file-input" tabindex="0"><input value="' + json[i].content + '" tabindex="-1"  class="fileupload upload required"  id="changescontent[' + i + ']"   type="file" name="content[' + i + ']"  ><span class="file-button"><span class="file-name file-button">' + json[i].content + '</span><strong>Browse</strong></span></label>';
                }
                pdfChange += '<span class="tip"  id="span' + i + '">' + json[i].tips + '</span><br/>';
@@ -311,12 +313,13 @@ function changePdfOptions(json, edit) {
            }
            if (json[i].change_type == "user") {
                var str = json[i].content;
-        if(str.startsWith('*')){ 
+                if (str.startsWith('*')) {
-          var s =json[i].content.substr(1);
+                    var s = json[i].content.substr(1);
                    //findUserInfoMatch(s);
                    var content_string = eval(s);
-        }else{
+                } else {
-          var content_string =json[i].content; }
+                    var content_string = json[i].content;
+                }
                pdfChange += json[i].names + ': <input onfocusout="HideBox()"  onfocus="ShowBox(' + json[0].pheight + ',' + json[0].pwidth + ',' + json[i].locationUp + ',' + json[i].locationRight + ',' + json[i].height + ',' + json[i].width + ',' + i + ',\'' + example + '\')"  id="changescontent[' + i + ']" type="text" class="required"   name="content[' + i + ']" value="' + content_string + '"">';
                pdfChange += '<span class="tip" id="span' + i + '">' + json[i].tips + '</span><br/>';
@@ -331,18 +334,18 @@ function changePdfOptions(json, edit) {
        strVar2 += '';
        strVar2 += '';
-    strVar2 += '</div><div id="wrapper" class="black small-up-2 medium-up-3 large-up-3" style="height:'+windowHBG+'px;"> <a class="closeEditer"><i class="fa fa-times fa-1x"></i></a>';
+        strVar2 += '</div><div id="wrapper" class="black small-up-2 medium-up-3 large-up-3" style="height:' + windowHBG + 'px;"> <a class="closeEditer"><i class="fa fa-times fa-1x"></i></a>';
-    strVar2 += pdflist + '<div id="changesColumn" style="height:'+windowHBG+'px;"  class="column" >' + pdfChange + '<div id="tezingLogo"></div><div id="controls"></div></div><div id="pdfFooter"></div></div>';
+        strVar2 += pdflist + '<div id="changesColumn" style="height:' + windowHBG + 'px;"  class="column" >' + pdfChange + '<div id="tezingLogo"></div><div id="controls"></div></div><div id="pdfFooter"></div></div>';
        document.getElementById('contentAreaOver').innerHTML = strVar2;
-    if(edit == false){
+        if (edit == false) {
            $("#contentAreaOver").slideToggle();
            $('#google_drive').slideToggle();
            //document.getElementById('google_drive').innerHTML = " ";
-}
+        }
        var tinymces = tinymce.init({
@@ -383,7 +386,7 @@ function changePdfOptions(json, edit) {
        });
        $('.closeEditer').click(function() {
-   $("#contentAreaOver").slideToggle(function(){
+            $("#contentAreaOver").slideToggle(function() {
                edit = false;
                tinyMCE.remove();
            });
@@ -398,11 +401,11 @@ function changePdfOptions(json, edit) {
            files = e.target.files;
            // console.log(files);
-      if(files.length >= 1) {
+            if (files.length >= 1) {
                for (var i = 0, file; file = files[i]; i++) {
                    var fileName = file.name;
                    // insert file name
-          if(fileName) {
+                    if (fileName) {
                        $(target).parent('label').find('.file-name').text(fileName);
                    } else {
                        $(target).parent('label').find('.file-name').text('');
@@ -415,7 +418,7 @@ function changePdfOptions(json, edit) {
                $(target).parent('label').find('.file-name').text('');
            }
            $(target).parent('label').trigger('focus');
-      if( $(target).val()){
+            if ($(target).val()) {
                document.getElementById("preview").checked = true;
                $('#changes').trigger('submit');
            }
@@ -423,7 +426,7 @@ function changePdfOptions(json, edit) {
        });
        $('.custom-file-input').keypress(function(event) {
-  if(event.which == 13) {
+            if (event.which == 13) {
                $(this).trigger('click');
            }
@@ -432,9 +435,9 @@ function changePdfOptions(json, edit) {
        $("#changes").submit(function(e) {
            e.preventDefault();
- if($('#preview').prop('checked')==true){
+            if ($('#preview').prop('checked') == true) {
-$(tinymce.get()).each(function(i, el) {
+                $(tinymce.get()).each(function(i, el) {
                    if (el.id)
                        document.getElementById(el.id).value = el.getContent();
@@ -443,20 +446,21 @@ $(tinymce.get()).each(function(i, el) {
                });
-         var ids =[];
+                var ids = [];
-         if(edit == true){
+                if (edit == true) {
                    $("#changes input[type=file]").each(function() {
-                  if($(this).get(0).files.length == 0 ){
+                        if ($(this).get(0).files.length == 0) {
                            document.getElementById(this.id).remove();
-                  }else{
+                        } else {
-                    console.log("hidden"+this.id);
+                            console.log("hidden" + this.id);
-                    document.getElementById("hidden"+this.id).remove();
+                            document.getElementById("hidden" + this.id).remove();
                        }
-         });}
+                    });
+                }
                var form = $("#changes");
                //console.log(form);
@@ -503,7 +507,7 @@ $(tinymce.get()).each(function(i, el) {
                $("#changes").validate().cancelSubmit = true;
- }else{
+            } else {
@@ -519,20 +523,21 @@ $(tinymce.get()).each(function(i, el) {
                    });
-         var ids =[];
+                    var ids = [];
-         if(edit == true){
+                    if (edit == true) {
                        $("#changes input[type=file]").each(function() {
-                  if($(this).get(0).files.length == 0 ){
+                            if ($(this).get(0).files.length == 0) {
                                document.getElementById(this.id).remove();
-                  }else{
+                            } else {
                                //console.log("hidden"+this.id);
-                    document.getElementById("hidden"+this.id).remove();
+                                document.getElementById("hidden" + this.id).remove();
                            }
-         });}
+                        });
+                    }
                    var form = $("#changes");
                    //console.log(form);
@@ -568,7 +573,7 @@ function returnfileOptions(files, form, preview) {
            contentType: false, // Set content type to false as jQuery will tell the server its a query string request
            success: function(data, textStatus, jqXHR) {
                if (typeof data.error === 'undefined') {
-          returnOptions(form , preview);
+                    returnOptions(form, preview);
                } else {
                    // Handle errors here
@@ -600,7 +605,7 @@ function returnOptions(form, preview) {
-      var jsonReturn = '{"pdf":[{"name":"' + json[0].name + '", "folder":"' + json[0].folder + '", "pdfLocation":"' + json[0].file + '","pageWidth":"' + json[0].pwidth + '","pageHeight":"' + json[0].pheight + '", "custId":"' +user_id + '"}],"changes":['
+            var jsonReturn = '{"pdf":[{"name":"' + json[0].name + '", "folder":"' + json[0].folder + '", "pdfLocation":"' + json[0].file + '","pageWidth":"' + json[0].pwidth + '","pageHeight":"' + json[0].pheight + '", "custId":"' + user_id + '"}],"changes":['
            var e = 1;
            var o = 1;
            for (i = 0; i < json.length; ++i) {
@@ -611,13 +616,13 @@ function returnOptions(form, preview) {
                //console.log(form[0][e].value);
                //console.log(json[i].label+' '+json[i].order);
-        if(content != '""') {
+                if (content != '""') {
                    if (o !== 1) {
                        jsonReturn += ',';
                    }
-        jsonReturn += '{"label":"' + json[i].label + '", "locationUp":"' + json[i].locationUp + '", "locationRight":"' + json[i].locationRight + '","width":"' + json[i].width + '","height":"' + json[i].height + '", "pages":"' + json[i].pages + '", "content":' + content + ', "z-index":null, "idstylesPDF":"' + json[i].idstylesPDF + '", "style":' + style +', "names":"' + json[i].names +'", "example":"' + json[i].example  +'", "tips":"' + json[i].tips + '", "order":"' + json[i].order + '", "idchange_typePDF":"' + json[i].idchange_typePDF + '", "change_type":"' + json[i].change_type + '", "fileLocation":"' + pluginUrl + '/wp-content/uploads/pdf/"}';
+                    jsonReturn += '{"label":"' + json[i].label + '", "locationUp":"' + json[i].locationUp + '", "locationRight":"' + json[i].locationRight + '","width":"' + json[i].width + '","height":"' + json[i].height + '", "pages":"' + json[i].pages + '", "content":' + content + ', "z-index":null, "idstylesPDF":"' + json[i].idstylesPDF + '", "style":' + style + ', "names":"' + json[i].names + '", "example":"' + json[i].example + '", "tips":"' + json[i].tips + '", "order":"' + json[i].order + '", "idchange_typePDF":"' + json[i].idchange_typePDF + '", "change_type":"' + json[i].change_type + '", "fileLocation":"' + pluginUrl + '/wp-content/uploads/pdf/"}';
                    ++o
@@ -631,8 +636,6 @@ function returnOptions(form, preview) {
            var windowWidth = 0.90 * $(".layout-grid").width();
            var windowHeight = 0.90 * $(".layout-grid").height();
@@ -643,14 +646,14 @@ function returnOptions(form, preview) {
            //console.log( windowWidth+'  '+windowHeight);
            //console.log( pwidth+' '+pheight);
-   if(pwidth > pheight){
+            if (pwidth > pheight) {
                //console.log('wide')
                var scaleImage = windowWidth / pwidth;
                var imageHeight = pheight * scaleImage;
                var imageWidth = windowWidth;
                var imgLeft = 0;
                var imgTop = 40;
-  }else{  
+            } else {
                var scaleImage = windowHeight / pheight;
                var imageHeight = windowHeight;
                var imageWidth = pwidth * scaleImage;
@@ -660,12 +663,12 @@ function returnOptions(form, preview) {
            }
            // console.log(jsonReturn);
-      if(preview == false){
+            if (preview == false) {
-        $("#Canvas").css('z-index','0');
+                $("#Canvas").css('z-index', '0');
                $('#changes').hide();
                $('#controls').show();
                url = 'update';
-       }else{
+            } else {
                $("#changes").validate().cancelSubmit = false;
                document.getElementById("preview").checked = false;
                url = 'preview';
@@ -676,7 +679,7 @@ function returnOptions(form, preview) {
            $.ajax({
-        url: "" + pdf_customizer + "/api/"+url,
+                url: "" + pdf_customizer + "/api/" + url,
                type: "POST",
                dataType: 'json',
                data: jsonReturn,
@@ -686,23 +689,25 @@ function returnOptions(form, preview) {
                success: function(data) {
                    var strVar2 = ""
-          strVar2 += '<div id="seepdf" style=" width:'+imageWidth+'px; height: '+imageHeight+'px; overflow: hidden;" ><embed src="' + pdf_customizer + '/fileentry/getPDF/' + json[0].folder + '/new_' + json[0].file + '#page=1&toolbar=0&navpanes=0&scrollbar=0statusbar=0" width="'+imageWidth+'" height="'+imageHeight+'" type="application/pdf" id="pdfloaded"><div id="holddf" style="opacity: 0.0;"></div> </div>';
+                    strVar2 += '<div id="seepdf" style=" width:' + imageWidth + 'px; height: ' + imageHeight + 'px; overflow: hidden;" ><embed src="' + pdf_customizer + '/fileentry/getPDF/' + json[0].folder + '/new_' + json[0].file + '#page=1&toolbar=0&navpanes=0&scrollbar=0statusbar=0" width="' + imageWidth + '" height="' + imageHeight + '" type="application/pdf" id="pdfloaded"><div id="holddf" style="opacity: 0.0;"></div> </div>';
                    document.getElementById('pdfPreviewInner').innerHTML = strVar2;
-         var strVar3 ='<div id="button"><input id="editMe"  type="submit"  value="Edit"><a href="' + pdf_customizer + '/fileentry/getPDF/' + json[0].folder + '/new_' + json[0].file + '"  download="' + json[0].file + '" ><input id="downloadMe"  type="submit"  value="Download"></a> </div>';
+                    var strVar3 = '<div id="button"><input id="editMe"  type="submit"  value="Edit"><a href="' + pdf_customizer + '/fileentry/getPDF/' + json[0].folder + '/new_' + json[0].file + '"  download="' + json[0].file + '" ><input id="downloadMe"  type="submit"  value="Download"></a> </div>';
                    document.getElementById('controls').innerHTML = strVar3;
-         $.LoadingOverlaySetup({ color : "rgba(0, 0, 0, 0.9)"});
+                    $.LoadingOverlaySetup({
+                        color: "rgba(0, 0, 0, 0.9)"
+                    });
                    $('#Canvas').LoadingOverlay("show");
                    $('#Canvas').delay(600).queue(function() {
                        $(this).css("background-image", "");
                    });
-        setTimeout(function(){
+                    setTimeout(function() {
                        $('#Canvas').LoadingOverlay("hide", true);
                    }, 600);
-	   if(preview == false){
+                    if (preview == false) {
                        $('#controls').show();
                    }
@@ -713,15 +718,12 @@ function returnOptions(form, preview) {
                        $('#controls').hide();
                        $('#changes').show();
                        $("#Canvas").show();
-          	$("#Canvas").css('z-index','10');
+                        $("#Canvas").css('z-index', '10');
                    });
                    $('#downloadMe').click(function() {
                        $(".closeEditer").click();
                    });
                },
                error: function(xhr, ajaxOptions, thrownError) { //Add these parameters to display the required response
                    alert(xhr.status);