Permalink
Browse files

Percent button

  • Loading branch information...
1 parent c7aae09 commit d07c5198ba9f61b6537cc6323ee104ffbe6df0b2 @jakearchibald committed Jun 26, 2012
Showing with 37 additions and 6 deletions.
  1. +27 −3 www/assets/7/script/CssOutput.js
  2. +10 −3 www/assets/7/script/base.js
View
30 www/assets/7/script/CssOutput.js
@@ -1,10 +1,22 @@
spriteCow.CssOutput = (function() {
- function bgPosVal(offset) {
+ function bgPixelVal(offset) {
if (offset) {
return ' -' + offset + 'px';
}
return ' 0';
}
+
+ function bgPercentVal(offset) {
+ if (offset) {
+ return ' ' + round(offset * 100, 3) + '%';
+ }
+ return ' 0';
+ }
+
+ function round(num, afterDecimal) {
+ var multiplier = Math.pow(10, afterDecimal || 0);
+ return Math.round(num * multiplier) / multiplier;
+ }
function CssOutput($appendTo) {
var $container = $('<div class="css-output"></div>').appendTo( $appendTo );
@@ -13,8 +25,11 @@ spriteCow.CssOutput = (function() {
this.backgroundFileName = '';
this.path = 'cssOutputPath' in localStorage ? localStorage.getItem('cssOutputPath') : 'imgs/';
this.rect = new spriteCow.Rect(0, 0, 0, 0);
+ this.imgWidth = 0;
+ this.imgHeight = 0;
this.useTabs = true;
this.useBgUrl = true;
+ this.percentPos = false;
this.selector = '.sprite';
this._addEditEvents();
}
@@ -36,16 +51,25 @@ spriteCow.CssOutput = (function() {
$file = $('<span class="file"/>')
.append( $('<span class="file-path"/>').text( this.path ) )
.append( $('<span class="file-name"/>').text( this.backgroundFileName ) );
-
$code.append( $file ).append( "') no-repeat" );
}
else {
$code.append( indent + "background-position:" );
}
+
+ if (this.percentPos) {
+ $code.append(
+ bgPercentVal( rect.x / -(rect.width - this.imgWidth) ) +
+ bgPercentVal( rect.y / -(rect.height - this.imgHeight) ) +
+ ';\n'
+ );
+ }
+ else {
+ $code.append( bgPixelVal(rect.x) + bgPixelVal(rect.y) + ';\n' );
+ }
$code.append(
- bgPosVal(rect.x) + bgPosVal(rect.y) + ';\n' +
indent + 'width: ' + rect.width + 'px;\n' +
indent + 'height: ' + rect.height + 'px;\n' +
'}'
View
13 www/assets/7/script/base.js
@@ -53,6 +53,9 @@
spriteCanvasView.bind('rectChange', function(rect) {
cssOutput.rect = rect;
+ cssOutput.imgWidth = spriteCanvas.canvas.width;
+ cssOutput.imgHeight = spriteCanvas.canvas.height;
+
cssOutput.update();
if (rect.width === spriteCanvas.canvas.width && rect.height === spriteCanvas.canvas.height) {
// if the rect is the same size as the whole canvas,
@@ -92,15 +95,19 @@
imgInput.fileClickjackFor( toolbarTop.$container.find('div.open-img') );
- toolbarTop.bind('invert-bg', function() {
- var toolName = 'invert-bg';
- if ( toolbarTop.isActive(toolName) ) {
+ toolbarTop.bind('invert-bg', function(event) {
+ if ( event.isActive ) {
spriteCanvasView.setBg('#fff');
}
else {
spriteCanvasView.setBg('#000');
}
});
+
+ toolbarBottom.bind('percent', function(event) {
+ cssOutput.percentPos = !event.isActive;
+ cssOutput.update();
+ });
$tutorialLink.click(function(event) {
imgInput.loadImgUrl( this.href );

0 comments on commit d07c519

Please sign in to comment.