Skip to content

Commit

Permalink
Minor refactoring
Browse files Browse the repository at this point in the history
  • Loading branch information
@bobkovalex
bobkovalex committed May 22, 2018
1 parent e76e705 commit 67782fc
Show file tree
Hide file tree
Showing 3 changed files with 55 additions and 55 deletions.
2 changes: 1 addition & 1 deletion README.md
View file
Original file line number Diff line number Diff line change
@@ -1,2 +1,2 @@
# Canvas Stamp Generator
###### v0.0.3
###### v0.1.0
42 changes: 21 additions & 21 deletions resources/css/stampGenerator.css
View file
Original file line number Diff line number Diff line change
@@ -1,31 +1,31 @@
#canvas-container{
#csg-container{
font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
background-color: #ffffff;
position: relative;
width: 100%;
height: 100%;
}

#canvas-container input{
#csg-container input{
border: 1px solid #dcdcdc;
padding: 5px;
color: #9c9c9c;
font-weight: 300;
}

#canvas-container input[type="file"]{
#csg-container input[type="file"]{
border: 0;
}

#canvas-container input:focus, button:focus{
#csg-container input:focus, button:focus{
outline: none;
}

#canvas-params-header{
#csg-params-header{
text-align: center;
}

#canvas-params-header > button{
#csg-params-header > button{
background-color: #2e84b9;
color: #ffffff;
text-transform: uppercase;
Expand All @@ -35,7 +35,7 @@
padding: 7px 10px;
}

#canvas-params-container{
#csg-params-container{
position: absolute;
background-color: #e2e2e2;
width: 300px;
Expand All @@ -44,23 +44,23 @@
overflow: scroll;
}

.canvas-params{
.csg-params{
background-color: #f7f7f7;
padding: 15px 20px;
margin-bottom: 10px;
position: relative;
border: 1px solid #ddd;
}

.canvas-params h2{
.csg-params h2{
text-transform: uppercase;
font-weight: 400;
font-size: 13px;
margin: 0;
margin-left: -5px;
}

.canvas-params h3{
.csg-params h3{
text-transform: uppercase;
letter-spacing: 1px;
font-weight: 300;
Expand All @@ -69,61 +69,61 @@
margin-top: 15px;
}

.canvas-params thead td{
.csg-params thead td{
font-size: 12px;
font-weight: 300;
color: #adadad;
}

.canvas-params > div{
.csg-params > div{
display: none;
}

.canvas-params input[type="number"]{
.csg-params input[type="number"]{
width: 50px;
}

.canvas-params input[type="text"]{
.csg-params input[type="text"]{
width: 125px;
}

.canvas-params .jscolor{
.csg-params .jscolor{
width: 70px;
}

.canvas-params .canvas-params-toggle{
.csg-params .csg-params-toggle{
position: absolute;
top: 15px;
right: 50px;
}

.canvas-params .canvas-shape-remove{
.csg-params .csg-shape-remove{
position: absolute;
top: 15px;
right: 15px;
}

.canvas-params button{
.csg-params button{
background: none;
border: 0;
}

#canvas-preview-container{
#csg-preview-container{
position: absolute;
left: 320px;
width: calc(100% - 320px);
height: 100%;
}

#canvas-footer-container{
#csg-footer-container{
position: absolute;
bottom: 0;
width: 100%;
height: 20px;
padding: 5px 20px;
}

.canvas-preview{
.csg-preview{
position: absolute;
top: 50px;
}
66 changes: 33 additions & 33 deletions resources/js/stampGenerator.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,29 +3,29 @@
* Copyright (c) 2018 Alex Bobkov <[email protected]>
* Licensed under MIT
* @author Alexandr Bobkov
* @version 0.0.3
* @version 0.1.0
*/

$(document).ready(function(){

// Add Shape
$('#canvas-params-container').on('click', 'button#canvas-shape-add', function(){
$('#csg-params-container').on('click', 'button#csg-shape-add', function(){
$.fn.stampGenerator.addShape($(this));
});

// Remove Shape
$('#canvas-params-container').on('click', 'button.canvas-shape-remove', function(){
$('#csg-params-container').on('click', 'button.csg-shape-remove', function(){
$.fn.stampGenerator.removeShape($(this));
});

// Toggle Shape
$('#canvas-params-container').on('click', 'button.canvas-params-toggle', function(){
$('#csg-params-container').on('click', 'button.csg-params-toggle', function(){
$.fn.stampGenerator.toggleShape($(this));
});

// Preview/Draw Shapes
$('#canvas-params-container').bind('input', function(){
$.fn.stampGenerator.drawStamp();
$('#csg-params-container').bind('input', function(){
$.fn.stampGenerator.drawShape();
});
});

Expand All @@ -50,15 +50,15 @@ $(document).ready(function(){
addShape : function(elem){
canvasCount++;
elem.parent().parent().append($.fn.stampGenerator.shapeHtml(canvasCount));
$.fn.stampGenerator.drawStamp();
$.fn.stampGenerator.drawShape();
},

removeShape : function(elem){
elem.parent().fadeOut(300, function(){
// get canvas id
var canvasId = $(this).attr('id').replace('canvas-params-', '');
var canvasId = $(this).attr('id').replace('csg-params-', '');
// remove canvas
$('#canvas-stamp-' + canvasId).remove();
$('#csg-stamp-' + canvasId).remove();
// remove canvas params container
$(this).remove();
});
Expand All @@ -70,24 +70,24 @@ $(document).ready(function(){
elem.text(text == 'Edit' ? 'Close' : 'Edit');
},

drawStamp : function(){
drawShape : function(){
// clear all canvas containers
$('.canvas-preview').each(function(){
$('.csg-preview').each(function(){
$(this).remove();
});
// draw canvas
var i = 1;
$('.canvas-params').each(function(){
$('.csg-params').each(function(){
// get shape params
var radius = $(this).find('#canvas-radius').val();
var text = $(this).find('#canvas-text').val();
var bgColor = $(this).find('#canvas-bg-color').val();
var strokeColor = $(this).find('#canvas-stroke-color').val();
var fgColor = $(this).find('#canvas-fg-color').val();
var radius = $(this).find('#csg-radius').val();
var text = $(this).find('#csg-text').val();
var bgColor = $(this).find('#csg-bg-color').val();
var strokeColor = $(this).find('#csg-stroke-color').val();
var fgColor = $(this).find('#csg-fg-color').val();
// append canvas container
$('#canvas-preview-container').prepend($.fn.stampGenerator.canvasHtml(i));
$('#csg-preview-container').prepend($.fn.stampGenerator.canvasHtml(i));
// get canvas container
var c = document.getElementById('canvas-stamp-' + i);
var c = document.getElementById('csg-stamp-' + i);
var ctx = c.getContext('2d');
// draw canvas
ctx.drawCircle(radius, xCoord, yCoord, bgColor, strokeColor);
Expand All @@ -103,27 +103,27 @@ $(document).ready(function(){
},

baseHtml : function(){
var html = '<div id="canvas-container">' +
'<div id="canvas-params-container">' +
'<div id="canvas-params-header">' +
'<button id="canvas-shape-add">Add shape</button>' +
var html = '<div id="csg-container">' +
'<div id="csg-params-container">' +
'<div id="csg-params-header">' +
'<button id="csg-shape-add">Add shape</button>' +
'</div>' +
'</div>' +
'<div id="canvas-preview-container"></div>' +
'<div id="csg-preview-container"></div>' +
'</div>';
return html;
},

canvasHtml : function(num){
var html = '<canvas id="canvas-stamp-' + num + '" class="canvas-preview" width="400" height="200"></canvas>';
var html = '<canvas id="csg-stamp-' + num + '" class="csg-preview" width="400" height="200"></canvas>';
return html;
},

shapeHtml : function(num){
var html = '<div class="canvas-params" id="canvas-params-' + num + '">'+
var html = '<div class="csg-params" id="csg-params-' + num + '">'+
'<h2>Shape #' + num + '</h2>' +
'<button class="canvas-params-toggle">Edit</button>' +
'<button class="canvas-shape-remove">X</button>' +
'<button class="csg-params-toggle">Edit</button>' +
'<button class="csg-shape-remove">X</button>' +
'<div>' +
'<h3>Circle Properties</h3>' +
'<table>' +
Expand All @@ -136,9 +136,9 @@ $(document).ready(function(){
'</thead>' +
'<tbody>' +
'<tr>' +
'<td><input type="number" id="canvas-radius" value="50"/></td>' +
'<td><input class="jscolor" id="canvas-bg-color" value="#FFFFFF"/></td>' +
'<td><input class="jscolor" id="canvas-stroke-color" value="#000000"/></td>' +
'<td><input type="number" id="csg-radius" value="50"/></td>' +
'<td><input class="jscolor" id="csg-bg-color" value="#FFFFFF"/></td>' +
'<td><input class="jscolor" id="csg-stroke-color" value="#000000"/></td>' +
'</tr>' +
'</tbody>' +
'</table>' +
Expand All @@ -152,8 +152,8 @@ $(document).ready(function(){
'</thead>' +
'<tbody>' +
'<tr>' +
'<td><input type="text" id="canvas-text" value="this is my text"/></td>' +
'<td><input class="jscolor" id="canvas-fg-color" value="#000000"/></td>' +
'<td><input type="text" id="csg-text" value="this is my text"/></td>' +
'<td><input class="jscolor" id="csg-fg-color" value="#000000"/></td>' +
'</tr>' +
'</tbody>' +
'</table>' +
Expand Down

0 comments on commit 67782fc

Please sign in to comment.