Commit bc25efc1 authored by christian's avatar christian
Browse files

initial commit

parents
html,button,input,select,textarea{color:#222}
hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}
img{vertical-align:middle}
fieldset{border:0;margin:0;padding:0}
textarea{resize:none}
.chromeframe{background:#ccc;color:#000;margin:.2em 0;padding:.2em 0}
::-moz-selection,::selection{background:#b3d4fc;text-shadow:none}
a, a:hover, a:active, a:focus{outline: 0}
/*HELPER*/
.ir{background-color:transparent;border:0;overflow:hidden;text-indent:-9999px}
.ir:before{content:"";display:block;width:0;height:100%}
.hidden{display:none!important;visibility:hidden}
.visuallyhidden{border:0;clip:rect(0000);height:1px;overflow:hidden;position:absolute;width:1px;margin:-1px;padding:0}
.visuallyhidden.focusable:active,.visuallyhidden.focusable:focus{clip:auto;height:auto;overflow:visible;position:static;width:auto;margin:0}
.invisible{visibility:hidden}
.clearfix:before,.clearfix:after{content:" ";display:table}
.clearfix{clear:both;*zoom:1}
@import "normalize.min.css";
@import "helper.css";
/*MAIN STYLE*/
html, body {
width: 100%;
height: 100%;
min-width: 1020px;
}
body {
background: #f9f9f9;
}
.wrapper {
width: 1020px;
margin: 0 auto;
}
header {
}
header hgroup h1, header hgroup h2 {
margin: 0;
text-align: center;
color: #e9e9e9;
text-shadow: 1px 1px 1px #808080;
}
header hgroup {
}
header {
padding: 1%;
}
nav {
padding: 1% 0;
}
nav ul {
margin: 0;
padding: 1%;
display: -webkit-flex;
-webkit-flex-flow: row;
-webkit-justify-content: flex-start;
-webkit-align-items: flex-start;
}
nav ul li {
border: 1px dashed #ddd;
padding: 1%;
height: auto;
-webkit-flex: 1 1 1 1;
}
nav ul li:nth-child(even) {
margin: 0 10px;
}
nav ul li:nth-last-child() {
margin: 0;
}
nav ul li h3 {
background: #eee;
margin: 0;
font-weight: 400;
text-align: center;
line-height: 1.4em;
}
#outer-canvas {
-webkit-flex: 3;
}
#outer-layer {
width: 250px;
background: #eee;
border: 1px solid #cdcdcd;
-webkit-flex: 1;
padding: 1%;
display: -webkit-flex;
-webkit-flex-direction: column;
-webkit-flex-flow: column;
-webkit-align-items: center;
-webkit-align-content: center;
}
section#main-canvas-section {
display: -webkit-flex;
-webkit-flex-direction: row;
}
#outer-layer > .layerRowItem, #outer-layer > .selected {
border: 1px solid orange;
display: -webkit-flex;
-webkit-flex-direction: row;
width: 220px;
-webkit-align-items: center;
height: 40px;
padding: 1%;
margin-bottom: 1%;
}
#outer-layer > .selected {
background: #fff;
}
.layerRowItem > .infoIcon, .selected > .infoIcon {
background-size: contain;
margin-right: 10px;
}
.layerRowItem > .infoContainer, .selected > .infoContainer {
display: -webkit-flex;
-webkit-flex-direction: column;
-webkit-align-content: center;
}
.layerRowItem > .infoContainer > p, .selected > .infoContainer > p {
-webkit-flex: auto;
width: 140px;
margin: 0;
padding: 0;
font-size: .8em;
-webkit-justify-content: center;
}
.layerRowItem > .infoVisible, .selected > .infoVisible {
-webkit-flex: 1;
-webkit-align-content: flex-end;
-webkit-align-items: flex-end;
-webkit-justify-content: flex-end;
}
/*.size-fader{display: none;}*/
/*BUTTONS*/
button {
outline: none;
}
button:active {
position: relative;
top: 10px;
}
#landscape {
width: 48px;
height: 28px;
background-color: rgba(205,205,205,.3);
border: solid 1px #cdcdcd;
position: absolute;
top: 50%;
left: 50%;
margin: -14px 0 0 -24px;
}
#portrait {
width: 28px;
height: 48px;
background-color: rgba(205,205,205,.3);
border: solid 1px #cdcdcd;
position: absolute;
top: 50%;
left: 50%;
margin: -24px 0 0 -14px;
}
#circle {
width: 48px;
height: 48px;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
background-color: rgba(205,205,205,.3);
border: solid 1px #cdcdcd;
position: absolute;
top: 50%;
left: 50%;
margin: -24px 0 0 -24px;
}
.format {
width: 60px;
height: 60px;
background: #fff;
float: left;
position: relative;
}
.format:nth-child(even) {
margin: 0 10px;
}
input[type="color"] {
border: 0 none;
background-color: rgba(205,205,205,.3);
border: solid 1px #cdcdcd;
display: block;
padding: 3px 10px;
cursor: pointer;
outline: none;
}
/*CANVAS*/
#backlayer {
display: block;
position: relative;
z-index: 100;
}
#outer-canvas {
}
#outer-canvas h3 {
margin: 0;
font-weight: 400;
text-align: center;
padding: 0;
text-align: center;
display: block;
width: 200px;
margin: 1% 1% 1% 2%;
}
#inner-canvas {
margin-left: 1%;
}
#drop-target {
width: 100px;
height: 100px;
background-color: #eee;
border: 1px solid #ccc;
text-align: center;
padding: 12px;
line-height: 100px;
font-size: .8em;
}
/*! normalize.css v1.1.1 | MIT License | git.io/normalize */
article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}
audio,canvas,video{display:inline;zoom:1}
audio:not([controls]){display:none;height:0}
[hidden]{display:none}
html{background:#fff;color:#000;font-size:100%;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}
html,button,input,select,textarea{font-family:sans-serif}
a:focus{outline:thin dotted}
a:active,a:hover{outline:0}
h1{font-size:2em;margin:.67em 0}
h2{font-size:1.5em;margin:.83em 0}
h3{font-size:1.17em;margin:1em 0}
h4{font-size:1em;margin:1.33em 0}
h5{font-size:.83em;margin:1.67em 0}
h6{font-size:.67em;margin:2.33em 0}
abbr[title]{border-bottom:1px dotted}
b,strong{font-weight:700}
blockquote{margin:1em 40px}
dfn{font-style:italic}
hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}
mark{background:#ff0;color:#000}
code,kbd,pre,samp{font-family:monospace, serif;_font-family:'courier new', monospace;font-size:1em}
pre{white-space:pre-wrap;word-wrap:break-word}
q{quotes:none}
q:before,q:after{content:none}
small{font-size:80%}
sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}
sup{top:-.5em}
sub{bottom:-.25em}
dd{margin:0 0 0 40px}
menu,ol,ul{padding:0 0 0 40px}
nav ul,nav ol{list-style:none;list-style-image:none}
img{border:0;-ms-interpolation-mode:bicubic}
svg:not(:root){overflow:hidden}
fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}
legend{border:0;white-space:normal;margin-left:-7px;padding:0}
button,input,select,textarea{font-size:100%;vertical-align:middle;margin:0}
button,input{line-height:normal}
button,select{text-transform:none}
button,html input[type=button],/* 1 */
input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer;overflow:visible}
button[disabled],html input[disabled]{cursor:default}
input[type=checkbox],input[type=radio]{box-sizing:border-box;height:13px;width:13px;padding:0}
input[type=search]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}
input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}
button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}
textarea{overflow:auto;vertical-align:top}
table{border-collapse:collapse;border-spacing:0}
body,figure,form{margin:0}
p,pre,dl,menu,ol,ul{margin:1em 0}
\ No newline at end of file
img/hidden.png

197 Bytes

img/resize.png

140 Bytes

img/rotate.png

438 Bytes

<!DOCTYPE html>
<html lang="de" class="no-js">
<head>
<meta charset="utf-8">
<title>Quicker sticker</title>
<meta name="description" content="create your own sticker - NOW!">
<link rel="stylesheet" href="css/main.css">
<script src="js/lib/modernizr-2.6.2.min.js"></script>
<script src="js/lib/jquery-1.10.2.min.js"></script>
<script src="js/bind.js"></script>
<script src="js/plugins.js"></script>
<script src="js/event-manager.js"></script>
<script src="js/image-manager.js"></script>
<script src="js/error-manager.js"></script>
<script src="js/canvas-manager.js"></script>
<script src="js/info-manager.js"></script>
<script src="js/main.js"></script>
</head>
<body>
<div class="wrapper">
<header>
<hgroup>
<h1>Quicker Sticker</h1>
<h2>create your own sticker - NOW!</h2>
</hgroup>
</header>
<nav>
<ul>
<li><h3>Choose format</h3><br>
<span class="format"><button class="format-button" id="portrait"></button></span>
<span class="format"><button class="format-button" id="landscape"></button></span>
<span class="format"><button class="format-button" id="circle"></button></span><br class="clearfix"><br>
<h3>Border <input type="checkbox" name="border-check" id="border-check" value="border"></h3>
</li>
<li><h3>Size</h3><br>
<input class="size-fader" id="size-slider" type="range" min="300" max="400" value="300" step="25"><br><br>
<h3>Size - <output for="size-fader" id="size-width">1</output></h3>
</li>
<li><h3>Background color</h3><br>
<input id="bg-color" type="color" value="#efefef"></input><br>
<div class="hidden" id="show-border-color">
<h3>Border color</h3><br>
<input id="border-color" type="color"></input>
</div>
</li>
<li class="hidden"><h3>Image File</h3><br>
<div id="drop-target">Drop image here</div>
<output for="drop-target" id="target-src"></output>
</li>
<li class="hidden"><button id="reset">reset</button></li>
</ul>
</nav>
<section id="main-canvas-section">
<div id="outer-canvas">
<div id="inner-canvas">
<canvas id="backlayer" width="0" height="0"></canvas>
</div>
<h3>&#8593; Drop image here &#8593;</h3>
</div>
<div id="outer-layer"></div>
</section>
</div>
</body>
</html>
Function.prototype.bind = Function.prototype.bind || function (target) {
var self = this;
return function (args) {
if (!(args instanceof Array)) {
args = [args];
}
self.apply(target, args);
};
};
\ No newline at end of file
function CanvasManager(elements, EventManager, ImageManager, ErrorManager, InfoManager) {
if (typeof CanvasManager.instance === 'object') { return CanvasManager.instance; }
CanvasManager.instance = this;
this.elements = elements;
this.canvasId = elements[0];
this.tempCanvasId = elements[1];
this.outerLayer = document.getElementById('outer-layer');
//this.outerLayer.setAttribute('dropzone', 'move');
this.eventManager = new EventManager;
this.imageManager = new ImageManager(this.canvasId);
this.errorManager = new ErrorManager;
this.infoManager = new InfoManager;
this.eventManager.on('getShape', this.changeShape.bind(this));
this.eventManager.on('getFormatSize', this.changeShapeSize.bind(this));
this.eventManager.on('getColor', this.changeColor.bind(this));
this.eventManager.on('resetAll', this.resetCanvas.bind(this));
this.eventManager.on('checkShapeBorder', this.checkShapeBorder.bind(this));
this.eventManager.on('mouseMove', this.mouseMoveEvent.bind(this));
this.eventManager.on('mouseOut', this.mouseOutEvent.bind(this));
this.eventManager.on('mouseUp', this.mouseUpEvent.bind(this));
this.eventManager.on('mouseLeave', this.mouseLeaveEvent.bind(this));
this.eventManager.on('mouseDown', this.mouseDownEvent.bind(this));
//this.eventManager.on('mouseOver', this.mouseOverEvent.bind(this));
//this.eventManager.on('dragOverTarget', this.handleDragOver.bind(this));
this.eventManager.on('dropTarget', this.handleDrop.bind(this));
//this.eventManager.on('layerRowItemClick', this.changeSelectedLayer.bind(this));
this.imageManager.layers = this.imageManager.getLayers();
this.reader = new FileReader();
this.reader.onload = this.fileReader.bind(this);
this.reader.onerror = this.fileReader.bind(this);
this.fileImage;
this.setup('landscape');
}
CanvasManager.prototype.setup = function (shape) {
this.shape = shape;
var initWidth = document.getElementById('size-slider').value,
initColor = document.getElementById('bg-color').value,
initBorderColor = document.getElementById('border-color').value,
checkBorder = document.getElementById('border-check').checked,
borderWidth = checkBorder ? initWidth - (initWidth * 0.92) : 0;
if (shape === 'portrait') {
this.canvasId.setAttribute('width', initWidth);
this.canvasId.setAttribute('height', initWidth * 1.25);
this.tempCanvasId.style.width = ((initWidth * 1) + (initWidth * 1 - (initWidth * 0.92)) / 4) - Math.round((initWidth * 1 - (initWidth * 0.99)) * 2) + 'px';
this.tempCanvasId.style.height = ((initWidth * 1.25) + (initWidth * 1 - (initWidth * 0.92)) / 4) - Math.round((initWidth * 1 - (initWidth * 0.99)) * 2) + 'px';
}
if (shape === 'landscape') {
this.canvasId.setAttribute('width', initWidth * 1.5);
this.canvasId.setAttribute('height', initWidth);
this.tempCanvasId.style.width = ((initWidth * 1.5) + (initWidth * 1 - (initWidth * 0.92)) / 4) - Math.round((initWidth * 1 - (initWidth * 0.99)) * 2) + 'px';
this.tempCanvasId.style.height = ((initWidth * 1) + (initWidth * 1 - (initWidth * 0.92)) / 4) - Math.round((initWidth * 1 - (initWidth * 0.99)) * 2) + 'px';
}
if (shape === 'circle') {
this.canvasId.setAttribute('width', initWidth * 1.15);
this.canvasId.setAttribute('height', initWidth * 1.15);
this.tempCanvasId.style.width = ((initWidth * 1.15) + (initWidth * 1 - (initWidth * 0.92)) / 4) - Math.round((initWidth * 1 - (initWidth * 0.99)) * 2) + 'px';
this.tempCanvasId.style.height = ((initWidth * 1.15) + (initWidth * 1 - (initWidth * 0.92)) / 4) - Math.round((initWidth * 1 - (initWidth * 0.99)) * 2) + 'px';
}
this.tempCanvasId.style.padding = ((initWidth * 1 - (initWidth * 0.92)) - Math.round((initWidth * 1 - (initWidth * 0.99)))) + 'px';
this.tempCanvasId.style.border = Math.round((initWidth * 1 - (initWidth * 0.99))) + 'px dashed #cdcdcd';
this.tempCanvasId.parentNode.parentNode.style.height = (parseInt(this.tempCanvasId.style.height) + parseInt(this.tempCanvasId.style.border) * 2 + parseInt(this.tempCanvasId.style.padding) * 2) + 'px';
this.color = initColor;
this.borderColor = initBorderColor;
this.createCanvas(this.canvasId, this.shape, this.color, checkBorder, borderWidth, this.borderColor);
}
CanvasManager.prototype.createCanvas = function (element, canvasShape, canvasBgColor, canvasBorder, canvasBorderWidth, canvasBorderColor) {
var canvasShape = canvasShape,
canvasBorder = canvasBorder,
bgColor = canvasBgColor,
borderColor = canvasBorderColor,
canvas = element,
context = canvas.getContext('2d'),
lineW = canvasBorderWidth,
centerX = canvas.width,
centerY = canvas.height;
context.beginPath();
if (canvasShape === 'circle') {
centerX = centerX / 2;
centerY = centerY / 2;
lineW -= lineW / 2;
var radius = centerX - (lineW / 2);
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
}
if (/^(landscape|portrait)$/.test(canvasShape)) { context.rect(0, 0, centerX, centerY) }
context.fillStyle = bgColor;
context.fill();
if (canvasBorder) {
context.lineWidth = lineW;
context.strokeStyle = borderColor;
context.stroke();
}
this.imageManager.layers = this.imageManager.getLayers();
for (i in this.imageManager.layers) {
//console.log(this.imageManager.layers[i].visible)
if (this.imageManager.layers[i].isVisible()) {
context.save();
//context.globalAlpha = this.imageManager.layers[i].getOpacity();
context.globalCompositeOperation = this.imageManager.layers[i].getCompositeOperation();
//context.shadowColor = "#000";
//context.shadowOffsetX = 0;
//context.shadowOffsetY = 0;
//context.shadowBlur = 15;
//context.save();
//context.translate(this.imageManager.layers[i].offsetX, this.imageManager.layers[i].offsetY);
context.translate(this.imageManager.layers[i].offsetX + (this.imageManager.layers[i].width / 2), this.imageManager.layers[i].offsetY + (this.imageManager.layers[i].height / 2));
context.drawImage(this.imageManager.layers[i].getCanvas(), 0 - (this.imageManager.layers[i].width / 2), 0 - (this.imageManager.layers[i].height / 2));
context.restore();
}
} // end for loop
//if (this.imageManager.layers.length > 0)
// fileInfo.appendChild(this.info);
context.closePath();
}
CanvasManager.prototype.changeSelectedLayer = function () {
var oldSelect = document.getElementsByClassName('selected')[0];
oldSelect.className = 'layerRowItem';
event.currentTarget.className = 'selected'
}
CanvasManager.prototype.changeVisibillity = function (event) {
event.preventDefault();
event.stopPropagation();
this.x = this.imageManager.getLayer((event.currentTarget).parentNode.getAttribute('id').substr(6));
this.x.toggleVisible();
console.log(this.x)
//if(!this.visible){
// var hidden = document.getElementsByClassName('visible')[0];
// hidden.className = 'infoVisible hidden';
// hidden.style.background = 'url(img/hidden.png) no-repeat center right';
//}
this.infoVisible.style.background = !this.imageManager.getLayer((event.currentTarget).parentNode.getAttribute('id').substr(6)).isVisible() ? 'url(img/hidden.png) no-repeat center right' : 'url(img/visible.png) no-repeat center right';
this.changeShape(false);
}
CanvasManager.prototype.createLayerRow = function (id, layer) {
String.prototype.trunc = String.prototype.trunc ||
function (n) {
return this.length > n ? this.substr(0, n - 1) + '&hellip; ' + this.substr(-4, n) : this;
};
//if (!bool) {
// this.infoSize.innerHTML = 'w: ' + Math.round(layer.width) + ' * ' + 'h: ' + Math.round(layer.height) + ' pixel';
// return;
//};
//this.bool = bool;
//console.log(bool)
this.info = document.createElement('div');
this.info.setAttribute('id', 'layer-' + id);
this.info.setAttribute('class', 'layerRowItem');
//this.info.className = this.bool ? 'layerRowItem' : 'selected'
this.info.addEventListener('click', this.changeSelectedLayer.bind(this));
//create icon
this.infoIcon = document.createElement('div');
this.infoIcon.className = 'infoIcon';
this.infoIcon.style.backgroundImage = 'url(' + layer.img.src + ')';
this.infoIcon.style.backgroundColor = '#fff '
this.infoIcon.style.backgroundSize = 'cover';
this.infoIcon.style.width = 40 + 'px';
this.infoIcon.style.height = 40 + 'px';
this.infoContainer = document.createElement('div');
this.infoContainer.className = 'infoContainer';
this.infoText = document.createElement('p');
this.infoSize = document.createElement('p');
this.infoText.innerHTML = layer.title.trunc(11);
this.infoText.setAttribute('title', layer.title);
this.infoSize.innerHTML = 'w: ' + Math.round(layer.width) + ' * ' + 'h: ' + Math.round(layer.height) + ' pixel';
this.infoVisible = document.createElement('div');
this.infoVisible.className = layer.isVisible() ? 'infoVisible visible' : 'infoVisible';
this.infoVisible.addEventListener('click', this.changeVisibillity.bind(this));
//console.log(layer.isVisible())
if (layer.isVisible()) {
this.infoVisible.style.background = 'url(img/visible.png) no-repeat center right';