Skip to content

Commit

Permalink
Merge pull request #258 from hannu/shorthand-support
Browse files Browse the repository at this point in the history
Support 3-character shorthand CSS colors
  • Loading branch information
Juuso Backman committed Nov 25, 2014
2 parents 51c35f5 + 2b0a26d commit 26937ac
Show file tree
Hide file tree
Showing 2 changed files with 56 additions and 4 deletions.
38 changes: 34 additions & 4 deletions lib/app/js/directives/variable.js
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,28 @@ angular.module('sgApp')
link: function(scope) {
var colorRegex = /#[0-9a-f]{3,6}/i;
scope.color = {};

function shorthandFormat(str) {
if (str.length === 7 && str[0] === '#' && str[1] == str[2] && str[3] == str[4] && str[5] == str[6]) {
return '#' + str[1] + str[3] + str[5];
}
return str;
}

function extendedFormat(str) {
if (str.length === 4 && str[0] === '#') {
return '#' + str[1] + str[1] + str[2] + str[2] + str[3] + str[3];
}
return str;
}

function findColor(str) {
var match = colorRegex.exec(str);
if (match) {
return match[0];
}
}

scope.hasColor = function(value) {
return colorRegex.test(value);
}
Expand All @@ -17,17 +39,25 @@ angular.module('sgApp')
scope.$watch(function() {
return scope.variable.value;
}, function(newVal, oldVal) {
var match = colorRegex.exec(newVal);
if (match) {
scope.color.value = match[0];
var color = findColor(scope.variable.value);
if (color) {
// Store original format. This is needed when we store value back
scope.color.useShorthand = (color.length === 4);
// Since color picker does not support compact format we need to always extend it
scope.color.value = extendedFormat(color);
}
});

// Set changed color back to the string
scope.$watch(function() {
return scope.color.value;
}, function(newVal, oldVal) {
scope.variable.value = scope.variable.value.replace(colorRegex, newVal);
var color = newVal;
// If color was originally stored in the compact format try to convert it
if (scope.color.useShorthand) {
color = shorthandFormat(color);
}
scope.variable.value = scope.variable.value.replace(colorRegex, color);
});
}
};
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -51,4 +51,26 @@ describe('Variable directive', function() {
$scope.$apply();
expect($scope.variable.value).to.eql('test #cccccc !default');
});

it('should extend colors stored in the compact format', function() {
$scope.variable.value = '#c4f';
$scope.$apply();
expect($scope.color.value).to.eql('#cc44ff');
});

it('should store value back in the compact format if it was originally in that format', function() {
$scope.variable.value = '#c4f';
$scope.$apply();
$scope.color.value = '#ff55dd';
$scope.$apply();
expect($scope.variable.value).to.eql('#f5d');
});

it('should store value back in the extended format if it was originally in that format', function() {
$scope.variable.value = '#cc44ff';
$scope.$apply();
$scope.color.value = '#ff55dd';
$scope.$apply();
expect($scope.variable.value).to.eql('#ff55dd');
});
});

0 comments on commit 26937ac

Please sign in to comment.