Skip to content

Commit

Permalink
New colours variations and random colour generator
Browse files Browse the repository at this point in the history
  • Loading branch information
skjnldsv committed May 11, 2016
1 parent eea2721 commit 63ccc7b
Show file tree
Hide file tree
Showing 5 changed files with 181 additions and 46 deletions.
9 changes: 7 additions & 2 deletions css/calendarlist.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -191,12 +191,17 @@
align-items: center;
}
.colorpicker .colorpicker-list li {
height: 26px;
width: 26px !important;
height: 24px;
width: 24px !important;
}
.colorpicker .colorpicker-list li.selected {
border: 1px solid #333;
}
.colorpicker .colorpicker-list li.randomcolour {
background-image: url('../img/random.svg');
background-repeat: no-repeat;
background-position: center center;
}

/*scroll issues */
#scrollable {
Expand Down
1 change: 1 addition & 0 deletions img/random.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
45 changes: 37 additions & 8 deletions js/app/directives/colorpickerDirective.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,24 +14,30 @@
*
* This library is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU AFFERO GENERAL PUBLIC LICENSE for more details.
*
* You should have received a copy of the GNU Affero General Public
* License along with this library. If not, see <http://www.gnu.org/licenses/>.
*
*/

/* https://github.com/kayellpeee/hsl_rgb_converter
* expected hue range: [0, 360)
* expected saturation range: [0, 1]
* expected lightness range: [0, 1]
*/
var hslToRgb = function(hue, saturation, lightness) {
'use strict';
// based on algorithm from http://en.wikipedia.org/wiki/HSL_and_HSV#Converting_to_RGB
if (hue == undefined) {
if(Array.isArray(hue)) {
[hue, saturation, lightness] = hue;
}
if (hue === undefined) {
return [0, 0, 0];
}
saturation /= 100;
lightness /= 100;

var chroma = (1 - Math.abs((2 * lightness) - 1)) * saturation;
var huePrime = hue / 60;
Expand Down Expand Up @@ -77,6 +83,25 @@ var hslToRgb = function(hue, saturation, lightness) {

};

/*
* Convert rgb array to hex string
*/
var rgbToHex = function(r, g, b) {
'use strict';
if(Array.isArray(r)) {
[r, g, b] = r;
}
return '#' + parseInt(r, 10).toString(16) + parseInt(g, 10).toString(16) + parseInt(b, 10).toString(16);
};


/*
* Generate a random colour with the core generator
*/
var randColour = function() {
'use strict';
return rgbToHex(hslToRgb(Math.random().toString().toHsl()));
};

/**
* Directive: Colorpicker
Expand All @@ -100,13 +125,11 @@ app.directive('colorpicker', function() {
var hsl = "";
var hslcolour = "";
// 0 40 80 120 160 200 240 280 320
listofcolours = ["15", "9", "4", "b", "6", "11", "e", "f", "57"];
listofcolours = ["15", "9", "4", "b", "6", "11", "74", "f", "57"];
listofcolours.forEach(function(hash, index) {
hsl = hash.toHsl();
hslcolour = hslToRgb(Math.round(hsl[0]/40)*40, hsl[1]/100, hsl[2]/100);
listofcolours[index] = '#' + parseInt(hslcolour[0], 10).toString(16)+
parseInt(hslcolour[1], 10).toString(16)+
parseInt(hslcolour[2], 10).toString(16)
hslcolour = hslToRgb(hsl);
listofcolours[index] = rgbToHex(hslcolour);
});
}
return {
Expand All @@ -119,6 +142,12 @@ app.directive('colorpicker', function() {
link: function(scope, element, attr) {
scope.colors = scope.customizedColors || listofcolours;
scope.selected = scope.selected || scope.colors[0];
scope.random = "#000000";

scope.randomizeColour = function() {
scope.random = randColour();
scope.pick(scope.random);
};

scope.pick = function(color) {
scope.selected = color;
Expand Down
160 changes: 129 additions & 31 deletions js/public/app.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1557,41 +1557,139 @@ app.controller('VAlarmController', ["$scope", function($scope) {
};
}]);

/* https://github.com/kayellpeee/hsl_rgb_converter
* expected hue range: [0, 360)
* expected saturation range: [0, 1]
* expected lightness range: [0, 1]
*/
var hslToRgb = function(hue, saturation, lightness) {
'use strict';
// based on algorithm from http://en.wikipedia.org/wiki/HSL_and_HSV#Converting_to_RGB
if(Array.isArray(hue)) {
[hue, saturation, lightness] = hue;
}
if (hue === undefined) {
return [0, 0, 0];
}
saturation /= 100;
lightness /= 100;

var chroma = (1 - Math.abs((2 * lightness) - 1)) * saturation;
var huePrime = hue / 60;
var secondComponent = chroma * (1 - Math.abs((huePrime % 2) - 1));

huePrime = Math.floor(huePrime);
var red;
var green;
var blue;

if (huePrime === 0) {
red = chroma;
green = secondComponent;
blue = 0;
} else if (huePrime === 1) {
red = secondComponent;
green = chroma;
blue = 0;
} else if (huePrime === 2) {
red = 0;
green = chroma;
blue = secondComponent;
} else if (huePrime === 3) {
red = 0;
green = secondComponent;
blue = chroma;
} else if (huePrime === 4) {
red = secondComponent;
green = 0;
blue = chroma;
} else if (huePrime === 5) {
red = chroma;
green = 0;
blue = secondComponent;
}

var lightnessAdjustment = lightness - (chroma / 2);
red += lightnessAdjustment;
green += lightnessAdjustment;
blue += lightnessAdjustment;

return [Math.round(red * 255), Math.round(green * 255), Math.round(blue * 255)];

};

/*
* Convert rgb array to hex string
*/
var rgbToHex = function(r, g, b) {
'use strict';
if(Array.isArray(r)) {
[r, g, b] = r;
}
return '#' + parseInt(r, 10).toString(16) + parseInt(g, 10).toString(16) + parseInt(b, 10).toString(16);
};


/*
* Generate a random colour with the core generator
*/
var randColour = function() {
'use strict';
return rgbToHex(hslToRgb(Math.random().toString().toHsl()));
};

/**
* Directive: Colorpicker
* Description: Colorpicker for the Calendar app.
*/
* Directive: Colorpicker
* Description: Colorpicker for the Calendar app.
*/


app.directive('colorpicker', function() {
'use strict';
var listofcolours = [
'#31CC7C',
'#317CCC',
'#FF7A66',
'#F1DB50',
'#7C31CC',
'#CC317C',
'#3A3B3D',
'#CACBCD'
];
return {
scope: {
selected: '=',
customizedColors: '=colors'
},
restrict: 'AE',
templateUrl: OC.filePath('calendar','templates', 'colorpicker.html'),
link: function (scope, element, attr) {
scope.colors = scope.customizedColors || listofcolours;
scope.selected = scope.selected || scope.colors[0];

scope.pick = function (color) {
scope.selected = color;
};

}
};
'use strict';
var listofcolours = [
'#31CC7C',
'#317CCC',
'#FF7A66',
'#F1DB50',
'#7C31CC',
'#CC317C',
'#3A3B3D',
'#CACBCD'
];
if (typeof String.prototype.toHsl === 'function') {
var hsl = "";
var hslcolour = "";
// 0 40 80 120 160 200 240 280 320
listofcolours = ["15", "9", "4", "b", "6", "11", "74", "f", "57"];
listofcolours.forEach(function(hash, index) {
hsl = hash.toHsl();
hslcolour = hslToRgb(hsl);
listofcolours[index] = rgbToHex(hslcolour);
});
}
return {
scope: {
selected: '=',
customizedColors: '=colors'
},
restrict: 'AE',
templateUrl: OC.filePath('calendar', 'templates', 'colorpicker.html'),
link: function(scope, element, attr) {
scope.colors = scope.customizedColors || listofcolours;
scope.selected = scope.selected || scope.colors[0];
scope.random = "#000000";

scope.randomizeColour = function() {
scope.random = randColour();
scope.pick(scope.random);
};

scope.pick = function(color) {
scope.selected = color;
};

}
};

});

Expand Down
12 changes: 7 additions & 5 deletions templates/colorpicker.html
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,9 @@
<ul class="colorpicker-list">
<li
ng-repeat="color in colors"
ng-class="{ selected: (color===selected) }"
ng-click="pick(color)"
ng-style="{ 'background-color':color}; "></li>
<li ng-repeat="color in colors"
ng-class="{ selected: (color===selected) }"
ng-click="pick(color)"
ng-style="{ 'background-color':color}; "></li>
<li class="randomcolour"
ng-click="randomizeColour()"
ng-style="{ 'background-color':random}; "></li>
</ul>

0 comments on commit 63ccc7b

Please sign in to comment.