diff --git a/lib/app/js/directives/variable.js b/lib/app/js/directives/variable.js index 820b7909..0e199a91 100644 --- a/lib/app/js/directives/variable.js +++ b/lib/app/js/directives/variable.js @@ -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); } @@ -17,9 +39,12 @@ 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); } }); @@ -27,7 +52,12 @@ angular.module('sgApp') 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); }); } }; diff --git a/test/angular/directives/variable.js b/test/angular/directives/variable.test.js similarity index 67% rename from test/angular/directives/variable.js rename to test/angular/directives/variable.test.js index ba5f7d6f..1ab213c7 100644 --- a/test/angular/directives/variable.js +++ b/test/angular/directives/variable.test.js @@ -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'); + }); });