Unfortunately your browser doesn't support the following requirements:
Javascript enabled
Native JSON
CSS Background Gradients
Border Radius
HTML5 Canvas
HTML5 Flexbox
RGB Alpha-Channel
Box Shadows
Please update your browser.
================================================
FILE: js/application.js
================================================
/*!
* _ ________ _
* | | | ______| | |
* | | | | _ | |
* | | _____ ___ ___ _____ _____ | |______ _| |_ ___ ___ | | _____ _____
* | | | _ |\ \/ /| _ || __| |______ ||_ _|\ \/ / | | | _ || ___|
* | |_____ | |_| | / / | ___|| | ______| | | | / / | |___ | ___||___ |
* |_______||___,\|/___/ |_____||__| |________| |_| /___/ |_____||_____||_____|
*
* http://www.layerstyles.org
*
* Copyright (c) 2011 Felix Niklas
* This script is freely distributable under the terms of the MIT license.
*/
localStorage['version'] = "0.1";
var movePos = { x: 0, y: 0 }, bytes, reader;
var $body = $('body');
var $overlay = $('#overlay');
var $workspace = $('#workspace');
var dimensions = { width: $workspace.width(), height: $workspace.height() };
var $dialog = $('#dialog');
var $layerstyle = $('#layerstyle');
var $navElements = $('#nav ul li');
var $holderElements = $('#holder > div');
var $pots = $('.pot');
var potDimensions = {'height': 40, 'width': 40};
var $sliders = $('.slider'), shouldEase = false;
var $numericalInputs = $('input[type=text]', $dialog);
var $buttons = { 'ok': $('#ok'), 'cancel': $('#cancel'), 'newStyle': $('#new_style') };
var $layer = $('#layer');
var resizeArea = $('#resize');
var $backgroundLayer = $('#background_layer');//.css("height", dimensions.height);
var $parallelUniverse = $('#parallel_universe').attr({height: dimensions.height, width: dimensions.width});
var pu = $parallelUniverse.get(0).getContext('2d');
var $innerShadowUniverse = $('#innerShadow_universe').attr({height: dimensions.height, width: dimensions.width});
var iu = $innerShadowUniverse.get(0).getContext('2d');
var moveAreas = $('.moveable'), movingWindow;
var offset = { x: 0, y: 0 };
var $colorfields = $('.color_field');
var currentStyle, lang;
var background = {
background: [{
stops: [[255,255,255,1], [255,255,255,0]],
style: 'radial',
position: 'center',
angle: 90
},
{
stops: [[226, 226, 226], [171, 171, 171]],
style: 'linear',
angle: 90
}
]
};
// array compare function - thanks to David and Anentropic
// http://stackoverflow.com/questions/1773069/using-jquery-to-compare-two-arrays
// (sort removed and extended to deep comparison)
// syntax: $.compare(a, b);
jQuery.extend({
compare: function (b, a) {
if (a.length != b.length) { return false; }
for (var i = 0, l = a.length; i < l; i++) {
if (a[i] !== b[i]) {
if(typeof a[i] === 'object'){
return jQuery.compare(a[i],b[i]);
} else {
return false;
}
}
}
return true;
}
});
// Object.create implementation for older browsers
// by Ben Newman
if(Object.create === undefined){
Object.create = function( proto, props ) {
var ctor = function( ps ) {
if ( ps )
Object.defineProperties( this, ps );
};
ctor.prototype = proto;
return new ctor( props );
};
}
/*
things to store:
- styles, gradients and colors
- layerstyles version
- currentStyle
*/
var defaults = {
height: 300,
width: 300,
ratio: 1,
globalAngle: 90,
dropShadow: {
isActive: true,
color: [0,0,0],
opacity: 75,
angle: 90,
hasGlobalLight: false,
distance: 1,
blur: 5,
size: 0
},
innerShadow: {
isActive: false,
color: [255,255,255],
opacity: 100,
angle: 90,
hasGlobalLight: false,
distance: 1,
blur: 0,
size: 0,
isInset: true
},
background: {
isActive: true,
opacity: 100,
stops: [[252, 252, 252], 23, [[242, 242, 242], 12], 89, [191, 191, 191]],
isReverse: false,
style: 'linear',
angle: 90,
hasGlobalLight: false
},
border: {
isActive: true,
color: [0,0,0],
opacity: 100,
size: 1,
style: 'solid'
},
borderRadius: {
isActive: false,
radii: [[0, "px"],[0, "px"],[0, "px"],[0, "px"]],
isSelected: [true,true,true,true],
hasPercentage: [false, false, false, false]
}
};
var nav = {
$el: $layerstyle,
$pages: null,
width: null,
page: null,
prev: null,
speed: 0,
goTo: function(pageNr){
// parse Int
pageNr = pageNr*1;
localStorage["pageNr"] = pageNr;
if(pageNr === -1){
pageNr = this.prev; // go back
}
else {
pageNr--; // pages area 1,2,3 - but in the array they are 0,1,2
}
var goPage = this.$pages.eq(pageNr);
var currentPage = this.$pages.eq(this.page);
var direction = pageNr > this.page ? 1 : -1; // 1 = right, -1 = left
var offset = this.width;
this.$el.css('overflow', 'hidden');
currentPage
.animate({
'margin-left': -direction*offset+'px',
'opacity': 0
}, this.speed, function(){ nav.$pages.eq(nav.page).css('visibility', 'hidden'); });
goPage
.css({
'margin-left': direction*offset+'px',
'visibility': 'visible',
'opacity': 0
})
.animate({
'margin-left': 0,
'opacity': 1
}, this.speed, function(){ nav.$el.css('overflow', 'visible'); });
this.prev = this.page;
this.page = pageNr;
},
show: function(pageNr){
pageNr--;
$(this.$pages[pageNr]).css('visibility', 'visible');
this.page = pageNr;
},
init: function(){
this.width = this.$el.width();
this.$pages = $('> .window', this.$el);
this.show(1);
}
}
function moveWindow(event){
movingWindow.css({ top: event.pageY - movePos.y, left: event.pageX - movePos.x });
}
function resizeLayer(event, x, y){
var halfWidth, halfHeight, maxWidth, maxHeight;
halfWidth = parseInt(( x != null ? x/2 : event.pageX - dimensions.width/2 + offset.x), 10);
halfHeight = event != null && event.shiftKey ? halfWidth / currentStyle.ratio : parseInt(( y != null ? y/2 : event.pageY - dimensions.height/2 + offset.y), 10);
maxWidth = dimensions.width/2;
maxHeight = dimensions.height/2;
halfWidth = halfWidth < 8 ? 8 : halfWidth > maxWidth ? maxWidth : halfWidth;
halfHeight = halfHeight < 8 ? 8 : halfHeight > maxHeight ? maxHeight : halfHeight;
currentStyle.width = halfWidth*2;
currentStyle.height = halfHeight*2;
$layer.css({
'width': currentStyle.width,
'height': currentStyle.height,
'margin-top': -halfHeight,
'margin-left': -halfWidth
});
}
function showSlide(pos){
$navElements.removeClass('active');
$navElements.eq(pos).addClass('active');
$holderElements.removeClass('active').eq(pos).addClass('active');
}
function dragenter(e) {
e.stopPropagation();
e.preventDefault();
$body.addClass("dragging");
}
function dragleave(e) {
e.stopPropagation();
e.preventDefault();
$body.removeClass("dragging");
}
function dragover(e) {
e.stopPropagation();
e.preventDefault();
}
function drop(e) {
e.stopPropagation();
e.preventDefault();
dropPos = { x: e.pageX, y: e.pageY };
var dt = e.dataTransfer;
var files = dt.files;
for (var i = 0, l=files.length; i < l; i++) {
var data = files[i];
//bytes = new Stream(data);
reader = new FileReader();
reader.onload = function(e){
var img = new Image(),
$canvas = $("