From 4b99f5a5275fa469d8cc2024aa8176a23d1df4e4 Mon Sep 17 00:00:00 2001 From: LabLamb Date: Wed, 28 Aug 2019 16:38:35 +0800 Subject: [PATCH 1/3] Created placeholders to fill --- src/index.html | 1 + src/js/app.js | 5 ++- src/js/controllers.js | 1 + src/js/controllers/ui-to-all.js | 59 +++++++++++++++++++++++++++++++++ src/templates/ui-to-all.html | 47 ++++++++++++++++++++++++++ 5 files changed, 112 insertions(+), 1 deletion(-) create mode 100644 src/js/controllers/ui-to-all.js create mode 100644 src/templates/ui-to-all.html diff --git a/src/index.html b/src/index.html index f6e3433..b31fe0d 100644 --- a/src/index.html +++ b/src/index.html @@ -42,6 +42,7 @@

UIColor is a website used to convert HEX & RGB colors to
HEX + UIColor RGB
diff --git a/src/js/app.js b/src/js/app.js index 535e207..1cd4d30 100644 --- a/src/js/app.js +++ b/src/js/app.js @@ -37,7 +37,10 @@ app.config(['$routeProvider', templateUrl: 'templates/rgb-to-ui.html', controller: 'RgbToUICtrl', }) - + .when('/ui-to-all', { + templateUrl: 'templates/ui-to-all.html', + controller: 'UiToAllCtrl', + }) .otherwise({ redirectTo: '/hex-to-ui' }); diff --git a/src/js/controllers.js b/src/js/controllers.js index 43a541a..4ea515b 100644 --- a/src/js/controllers.js +++ b/src/js/controllers.js @@ -4,5 +4,6 @@ angular.module('controllers', [ 'controllers.header', 'controllers.hextoui', 'controllers.rgbtoui', + 'controllers.uitoall' ]); \ No newline at end of file diff --git a/src/js/controllers/ui-to-all.js b/src/js/controllers/ui-to-all.js new file mode 100644 index 0000000..9083a09 --- /dev/null +++ b/src/js/controllers/ui-to-all.js @@ -0,0 +1,59 @@ +var app = angular.module('controllers.uitoall', ['ngRoute', 'ui.bootstrap', 'colorpicker.module']); + +app.controller("UiToAllCtrl", function(appConfig, $scope, $filter, $rootScope) { + + $scope.title = "UIColor to RGB / HEX Converter"; + + // Roll Tide + $scope.uiColorValid = true; + $scope.uiColorString = ""; + + function convertRgbToUi(color) { + $scope.color.rgb = color; + $scope.color.r = color.replace(/^rgba?\(|\s+|\)$/g,'').split(',')[0]; + $scope.color.g = color.replace(/^rgba?\(|\s+|\)$/g,'').split(',')[1]; + $scope.color.b = color.replace(/^rgba?\(|\s+|\)$/g,'').split(',')[2]; + + $scope.uiColor = { + "r": ($scope.color.r / 255).toFixed(2), + "g": ($scope.color.g / 255).toFixed(2), + "b": ($scope.color.b / 255).toFixed(2), + }; + + console.log($scope.color); + updateCopyText(); + $rootScope.$broadcast('ColorChanged', $scope.color); + } + + $scope.$watch('color', function(newVal, oldval){ + if (newVal.r && newVal.g && newVal.b) { + + if (!isNaN(newVal.r) && !isNaN(newVal.g) && !isNaN(newVal.b)) { + $scope.color.rgb = "rgb(" + $scope.color.r + "," + $scope.color.g + "," + $scope.color.b + ")"; + convertRgbToUi($scope.color.rgb); + } else { + $rootScope.$broadcast('ColorChanged', appConfig.themePrimary); + $scope.rgbValid = false; + console.log("Invalid RGB."); + } + + } else { + $rootScope.$broadcast('ColorChanged', appConfig.themePrimary); + } + }, true); + + $scope.$watch('rgb', function(newVal, oldval){ + if (newVal) { + convertRgbToUi(newVal); + // console.log(newVal); + } else { + $rootScope.$broadcast('ColorChanged', appConfig.themePrimary); + } + }, true); + + function updateCopyText() { + $scope.copyRgb = "rgba(" + $scope.uiColor.r + ", " + $scope.uiColor.g + ", " + $scope.uiColor.b + ");"; + $scope.copyHex = ""; + } + +}); \ No newline at end of file diff --git a/src/templates/ui-to-all.html b/src/templates/ui-to-all.html new file mode 100644 index 0000000..7a47b86 --- /dev/null +++ b/src/templates/ui-to-all.html @@ -0,0 +1,47 @@ +

{{ title }}

+ +
+
+ +
+
+
UIColor
+ +
+
+ + + +
+ + + +
+ +
+ + + +
+

RGB

+ {{ copyRgb }} + +
+ + +
+

HEX

+ {{ copyHex }} + +
+
+ +
+
\ No newline at end of file From a2ffc2391db9d2f9bc83b8d1cb270d9f136c0ac5 Mon Sep 17 00:00:00 2001 From: LabLamb Date: Fri, 30 Aug 2019 10:32:50 +0800 Subject: [PATCH 2/3] Completed UI to All page --- src/js/controllers/ui-to-all.js | 75 +++++++++++++++++---------------- src/templates/ui-to-all.html | 19 +++------ 2 files changed, 46 insertions(+), 48 deletions(-) diff --git a/src/js/controllers/ui-to-all.js b/src/js/controllers/ui-to-all.js index 9083a09..6bd0a4e 100644 --- a/src/js/controllers/ui-to-all.js +++ b/src/js/controllers/ui-to-all.js @@ -1,59 +1,62 @@ var app = angular.module('controllers.uitoall', ['ngRoute', 'ui.bootstrap', 'colorpicker.module']); -app.controller("UiToAllCtrl", function(appConfig, $scope, $filter, $rootScope) { +app.controller("UiToAllCtrl", function (appConfig, $scope, $filter, $rootScope) { - $scope.title = "UIColor to RGB / HEX Converter"; + $scope.title = "UIColor to Hex & Rgb Converter"; // Roll Tide $scope.uiColorValid = true; $scope.uiColorString = ""; - function convertRgbToUi(color) { - $scope.color.rgb = color; - $scope.color.r = color.replace(/^rgba?\(|\s+|\)$/g,'').split(',')[0]; - $scope.color.g = color.replace(/^rgba?\(|\s+|\)$/g,'').split(',')[1]; - $scope.color.b = color.replace(/^rgba?\(|\s+|\)$/g,'').split(',')[2]; - - $scope.uiColor = { - "r": ($scope.color.r / 255).toFixed(2), - "g": ($scope.color.g / 255).toFixed(2), - "b": ($scope.color.b / 255).toFixed(2), - }; - - console.log($scope.color); - updateCopyText(); - $rootScope.$broadcast('ColorChanged', $scope.color); - } + $scope.color = { + "r": "", + "g": "", + "b": "", + "hex": "" + }; + + function convertUiToRgbAndHex(r, g, b) { + $scope.color.r = Math.round(r * 255); + $scope.color.g = Math.round(g * 255); + $scope.color.b = Math.round(b * 255); - $scope.$watch('color', function(newVal, oldval){ - if (newVal.r && newVal.g && newVal.b) { + $scope.color.hex = $scope.color.r.toString(16) + $scope.color.g.toString(16) + $scope.color.b.toString(16); + } - if (!isNaN(newVal.r) && !isNaN(newVal.g) && !isNaN(newVal.b)) { - $scope.color.rgb = "rgb(" + $scope.color.r + "," + $scope.color.g + "," + $scope.color.b + ")"; - convertRgbToUi($scope.color.rgb); + $scope.$watch('uiColorString', function (newVal, oldval) { + if (newVal !== "") { + var parseRegex = /[rR]ed: ?([\d.]*?)f?,? green: ?([\d.]*?)f?,? blue: ?([\d.]*?)f?,? /; + var parsedGroups = parseRegex.exec(newVal); + + if (parsedGroups) { + var red = parseFloat(parsedGroups[1]); + var green = parseFloat(parsedGroups[2]); + var blue = parseFloat(parsedGroups[3]); + + if (red <= 1 && green <= 1 && blue <= 1) { + convertUiToRgbAndHex(red, green, blue); + updateCopyText(); + $rootScope.$broadcast('ColorChanged', $scope.color.hex); + $scope.uiColorValid = true; + } else { + $rootScope.$broadcast('ColorChanged', appConfig.themePrimary); + $scope.uiColorValid = false; + console.log("Invalid UIColor."); + } } else { $rootScope.$broadcast('ColorChanged', appConfig.themePrimary); - $scope.rgbValid = false; - console.log("Invalid RGB."); + $scope.uiColorValid = false; + console.log("Invalid UIColor."); } - } else { $rootScope.$broadcast('ColorChanged', appConfig.themePrimary); } - }, true); - $scope.$watch('rgb', function(newVal, oldval){ - if (newVal) { - convertRgbToUi(newVal); - // console.log(newVal); - } else { - $rootScope.$broadcast('ColorChanged', appConfig.themePrimary); - } }, true); function updateCopyText() { - $scope.copyRgb = "rgba(" + $scope.uiColor.r + ", " + $scope.uiColor.g + ", " + $scope.uiColor.b + ");"; - $scope.copyHex = ""; + $scope.copyRgb = "rgb(" + $scope.color.r + ", " + $scope.color.g + ", " + $scope.color.b + ")"; + $scope.copyHex = "#" + $scope.color.hex; } }); \ No newline at end of file diff --git a/src/templates/ui-to-all.html b/src/templates/ui-to-all.html index 7a47b86..10d9310 100644 --- a/src/templates/ui-to-all.html +++ b/src/templates/ui-to-all.html @@ -3,7 +3,7 @@

{{ title }}

-
+
UIColor
{{ title }}
- - -
+
- +
-
- +
+

RGB

{{ copyRgb }} -