Skip to content

Tenzing / pdf-customizer

Go to a project
Toggle navigation
Toggle navigation pinning
6511af0d by Jeff Balicki
Options

stage one complete

1 parent 2adbdfda
Inline Side-by-side
Showing 2 changed files with 51 additions and 18 deletions
...@@ -35,7 +35,8 @@ class pdfModel extends Model ...@@ -35,7 +35,8 @@ class pdfModel extends Model
35 ->join('changesPDF', 'PDF_idPDF', '=', 'idPDF') 35 ->join('changesPDF', 'PDF_idPDF', '=', 'idPDF')
36 ->join('stylesPDF', 'stylesPDF_idstylesPDF', '=', 'idstylesPDF') 36 ->join('stylesPDF', 'stylesPDF_idstylesPDF', '=', 'idstylesPDF')
37 ->join('change_typePDF', 'idchange_typePDF', '=', 'change_typePDF_idchange_typePDF') 37 ->join('change_typePDF', 'idchange_typePDF', '=', 'change_typePDF_idchange_typePDF')
38 ->where('PDF.idPDF','=', $id); 38 ->where('PDF.idPDF','=', $id)
39 ->orderBy('changesPDF.order', 'asc');
39 40
40 41
41 return $rows; 42 return $rows;
......
1 var pluginUrl = "http://localhost:8888/Forms"; 1 // var pluginUrl = "http://localhost:8888/Forms";
2 var pdf_customizer = "http://localhost:8888/pdf-customizer/public"; 2 // var pdf_customizer = "http://localhost:8888/pdf-customizer/public";
3 3
4 // var pluginUrl = "http://contact.gotenzing.com"; 4 var pluginUrl = "http://contact.gotenzing.com";
5 // var pdf_customizer = "http://pdf-customizer.synapsus.co"; 5 var pdf_customizer = "http://pdf-customizer.synapsus.co";
6 6
7 function getAuth() { 7 function getAuth() {
8 8
...@@ -64,10 +64,12 @@ ...@@ -64,10 +64,12 @@
64 }); 64 });
65 } 65 }
66 66
67 function ShowBox(pheight, pwidth,up, right, height, width, example) { 67 function ShowBox(pheight, pwidth,up, right, height, width, count, example) {
68 68
69 69
70 jQuery(document).ready(function($) { 70 jQuery(document).ready(function($) {
71 $('span').hide();
72 $('#span'+count).show();
71 $('#Canvas').css("background-image", "url(" + pdf_customizer + '/fileentry/getImage/' +example+")"); 73 $('#Canvas').css("background-image", "url(" + pdf_customizer + '/fileentry/getImage/' +example+")");
72 74
73 var Qc = document.getElementById("Canvas"); 75 var Qc = document.getElementById("Canvas");
...@@ -101,9 +103,9 @@ ...@@ -101,9 +103,9 @@
101 103
102 104
103 function HideBox() { 105 function HideBox() {
104
105
106 jQuery(document).ready(function($) { 106 jQuery(document).ready(function($) {
107 $('span').hide();
108
107 var cnv = document.getElementById("Canvas"); 109 var cnv = document.getElementById("Canvas");
108 var ctx = cnv.getContext('2d'); // gets reference to canvas context 110 var ctx = cnv.getContext('2d'); // gets reference to canvas context
109 ctx.beginPath(); // clear existing drawing paths 111 ctx.beginPath(); // clear existing drawing paths
...@@ -200,32 +202,33 @@ ...@@ -200,32 +202,33 @@
200 var pdflist = ""; 202 var pdflist = "";
201 var pdfChange = ""; 203 var pdfChange = "";
202 var f = 0; 204 var f = 0;
203 pdflist += '<div class="column" style="position: static; width: 212px; height: 10px; display: block; vertical-align: baseline; float: left;">'; 205 pdflist += '<div id="pdfPreview" class="column">';
204 // pdflist += '<img id="pdfimage" src="' + pdf_customizer + '/fileentry/getImage/' + json[0].folder + '/' + json[0].example + '" width="300px">'; 206 // pdflist += '<img id="pdfimage" src="' + pdf_customizer + '/fileentry/getImage/' + json[0].folder + '/' + json[0].example + '" width="300px">';
205 pdflist += '<canvas id="Canvas" width="252px" height="504px" style=" margin-top:60px; border-style: solid; background-image: url(' + pdf_customizer + '/fileentry/getImage/' + json[0].folder + '/' + json[0].example + '); background-size:252px 504px;"></div>'; 207 pdflist += '<canvas id="Canvas" width="252px" height="504px" style=" margin-top:60px; border-style: solid; border-width:1px; background-image: url(' + pdf_customizer + '/fileentry/getImage/' + json[0].folder + '/' + json[0].example + '); background-size:252px 504px;"></div>';
206 pdfChange += '<form id="changes" name="changes" enctype="multipart/form-data" action="#" METHOD="POST"><h4>' + json[0].name + '</h4>'; 208 pdfChange += '<form id="changes" name="changes" enctype="multipart/form-data" action="" METHOD="POST"><h4>' + json[0].name + '</h4>';
207 pdfChange += '<input type="hidden" id="id" name="id" value="' + json[0].idPDF + '">'; 209 pdfChange += '<input type="hidden" id="id" name="id" value="' + json[0].idPDF + '">';
208 for (i = 0; i < json.length; ++i) { 210 for (i = 0; i < json.length; ++i) {
209 var example = json[0].folder + '/' +json[i].example 211 var example = json[0].folder + '/' +json[i].example
210 212
211 if (json[i].change_type == "textflow") { 213 if (json[i].change_type == "textflow") {
212 pdfChange += json[i].names + ': <textarea onfocus="ShowBox('+json[0].pheight+','+json[0].pwidth+','+ json[i].locationUp+','+json[i].locationRight+','+json[i].height+','+json[i].width + ',\''+ example + '\')" title="' + json[i].names + '" id="changescontent'+[f]+'" class="textarea" value="' + json[i].content + '" name="content">' + json[i].content + '</textarea>'; 214 pdfChange += json[i].names + ': <textarea onfocus="ShowBox('+json[0].pheight+','+json[0].pwidth+','+ json[i].locationUp+','+json[i].locationRight+','+json[i].height+','+json[i].width +','+ i + ',\''+ example + '\')" title="' + json[i].names + '" id="changescontent'+[f]+'" class="textarea" value="' + json[i].content + '" name="content">' + json[i].content + '</textarea>';
213 ++f 215 ++f
214 } 216 }
215 if (json[i].change_type == "text") { 217 if (json[i].change_type == "text") {
216 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 +',\''+ example + '\')" title="' + json[i].names + '" id="changescontent" type="text" name="content" value="' + json[i].content + '"">'; 218 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 + '\')" title="' + json[i].names + '" id="changescontent" type="text" name="content" value="' + json[i].content + '"">';
217 } 219 }
218 if (json[i].change_type == "img") { 220 if (json[i].change_type == "img") {
219 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 + ',\''+ example + '\')" title="' + json[i].names + '" class="fileupload" id="changescontent" style="display: block; box-sizing: border-box; width: 100%; height: 2.4375rem; padding: .5rem; border: 1px solid #cacaca; margin: 0 0 1rem; font-family: inherit; font-size: 1rem; color: #8a8a8a; background-color: #fefefe; box-shadow: inset 0 1px 2px rgba(10,10,10,.1); border-radius: 0; transition: box-shadow .5s,border-color .25s ease-in-out; -webkit-appearance: none; -moz-appearance: none;" type="file" name="content" >'; 221 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 + '\')" title="' + json[i].names + '" class="fileupload" id="changescontent" style="display: block; box-sizing: border-box; width: 100%; height: 2.4375rem; padding: .5rem; border: 1px solid #cacaca; margin: 0 0 1rem; font-family: inherit; font-size: 1rem; color: #8a8a8a; background-color: #fefefe; box-shadow: inset 0 1px 2px rgba(10,10,10,.1); border-radius: 0; transition: box-shadow .5s,border-color .25s ease-in-out; -webkit-appearance: none; -moz-appearance: none;" type="file" name="content" >';
220 } 222 }
223 pdfChange += '<span id="span'+i+'">'+json[i].tips+'</span><br/>';
221 } 224 }
222 pdfChange += '<input type="submit" value="Submit">'; 225 pdfChange += '<input type="submit" value="Submit">';
223 pdfChange += '</form>'; 226 pdfChange += '</form>';
224 227
225 strVar2 += ' <div class="callout primary"><div class="row column"><h1>Welcome to Synapsus Online PDF Editor</h1>'; 228 strVar2 += ' <div class="callout primary"><div class="row column"><h1>Welcome to Synapsus Online PDF Editor</h1>';
226 strVar2 += '<p class="lead">Please make your changes or return <a href="#" onclick="location.reload();">back to the list</a></p>'; 229 strVar2 += '<p class="lead">Please make your changes or return <a href="#" onclick="location.reload();">back to the list</a></p>';
227 strVar2 += ' </div></div><div class="row small-up-2 medium-up-3 large-up-3">'; 230 strVar2 += ' </div></div><div id="wrapper" class="row small-up-2 medium-up-3 large-up-3">';
228 strVar2 += pdflist + '<div class="column" style="margin-left:300px; width:300px;">' + pdfChange + '</div></div><div style="height: 200px; margin-top: 50px;padding: 10px;position: relative;"></div>'; 231 strVar2 += pdflist + '<div id="changesColumn" class="column" >' + pdfChange + '</div><div id="pdfFooter"></div></div>';
229 232
230 233
231 234
...@@ -235,11 +238,40 @@ ...@@ -235,11 +238,40 @@
235 jQuery(function($) { 238 jQuery(function($) {
236 239
237 240
241 var stickySidebar = $('#pdfPreview');
242
243 if (stickySidebar.length > 0) {
244 var stickyHeight = stickySidebar.height(),
245 sidebarTop = stickySidebar.offset().top;
246 }
238 247
239 $("#Canvas").stick_in_parent(); 248 // on scroll move the sidebar
249 $(window).scroll(function () {
250 if (stickySidebar.length > 0) {
251 var scrollTop = $(window).scrollTop();
240 252
253 if (sidebarTop < scrollTop) {
254 stickySidebar.css('top', scrollTop - sidebarTop);
241 255
256 // stop the sticky sidebar at the footer to avoid overlapping
257 var sidebarBottom = stickySidebar.offset().top + stickyHeight,
258 stickyStop = $('#changesColumn').offset().top + $('#changesColumn').height();
259 if (stickyStop < sidebarBottom) {
260 var stopPosition = $('#changesColumn').height() - stickyHeight;
261 stickySidebar.css('top', stopPosition);
262 }
263 }
264 else {
265 stickySidebar.css('top', '0');
266 }
267 }
268 });
242 269
270 $(window).resize(function () {
271 if (stickySidebar.length > 0) {
272 stickyHeight = stickySidebar.height();
273 }
274 });
243 275
244 276
245 277
...@@ -285,7 +317,7 @@ ...@@ -285,7 +317,7 @@
285 317
286 if (el.id) 318 if (el.id)
287 document.getElementById(el.id).value = el.getContent(); 319 document.getElementById(el.id).value = el.getContent();
288 console.log(el.id); 320 ///console.log(el.id);
289 tinymce.get(el.id).remove(); 321 tinymce.get(el.id).remove();
290 322
291 323
......