Reversible function for replacing colors in a corner

Question

I have a function that returns an array of colors:

default: function () { // Get our colours array var colours = [service.kits.kit.colour1, service.kits.kit.colour2, service.kits.kit.colour3]; // If our third colour is blank if (!colours[2]) { // Is our first or second colour white var isWhite = colours[0] === 'ffffff' || colours[1] === 'ffffff'; // Set our thrid colour colours[2] = isWhite ? 'a6a6a6' : 'ffffff'; } // Return our colours return colours; }, 

which I then use like this:

 // Checks to see what colour was selected for Colour 1 and 2 and sets the 3rd colour var setSelectedColours = function () { // Get our default colours var colours = service.colours.default(); // Apply to our selected colours service.colours.selected = angular.copy(colours); service.colours.selectedLeisure = angular.copy(colours); }; 

I have a directive that I use to replace colors, which looks like this:

 .directive('colourSwapper', function () { return { restrict: 'A', controller: 'ColourSwapperController', link: function (scope, element, attrs, controller) { // Get to see if we are working with the leisure colours or not var leisurewear = attrs.hasOwnProperty('leisurewear'); // Create our function element.bind('click', function (e) { // Apply the scope scope.$apply(function () { // Use the algorithm for leisurwear items controller.swapColours(leisurewear); }); // Prevent any other actions e.preventDefault(); }); } }; }) 

pretty straight forward. The function for replacing colors is held in my controller, for example:

 .controller('ColourSwapperController', ['ConfiguratorService', function (shared) { var self = this; // Assign our private properties var defaultColours = shared.colours.default(), tempColour, leisureColour = '000e31', leisureColours = [leisureColour, '001444']; // Used to swap the colours for a garment self.swapColours = function (leisurewear) { // Get our colours var colours = leisurewear ? shared.colours.selectedLeisure : shared.colours.selected; // If we are leisurewear and colour 1 and 2 are not navy and we don't have a temp colour if (leisurewear && leisureColours.indexOf(defaultColours[0]) === -1 && leisureColours.indexOf(defaultColours[1]) === -1 && !tempColour) { // Assign our first colour to our temp colour tempColour = colours[0]; // Make our first colour our colours[0] = leisureColour; // If we are playingwear or we have a tempColour } else { // If we have a tempColour if (tempColour) { // Set our first colour to our tempColour colours[0] = tempColour; // Reset our tempColour tempColour = null; } // If our last colour is the hightlight colour and we have not swapped, and our first colour is not the same as our second colour if (colours[2] === defaultColours[2] && colours[0] === defaultColours[0] && defaultColours[0] !== defaultColours[1]) { // Get colour 1 var c1 = colours.shift(); // Move it to the middle colours.splice(1, 0, c1); // If our last colour is our highlight colour and we have already swapped } else if (colours[2] === defaultColours[2]) { // Get our highlight colour var h1 = colours.pop(); // Move it to the middle colours.splice(1, 0, h1); // If our highlight colour is in the middle and our first colour is actually our second colour, and we our first colour is not the same as our second colour } else if (colours[1] === defaultColours[2] && colours[0] === defaultColours[1] && defaultColours[0] !== defaultColours[1]) { // Get colour 1 and 2 var c1 = colours.pop(); var c2 = colours.shift(); // Swap our colours colours.splice(0, 0, c1); colours.push(c2); // If our hightlight colour is in the middle and our first colour is in the original place, move our hightlight colour back to the last position } else if (colours[1] === defaultColours[2]) { // If we have a tempColour if (tempColour) { // Set our first colour to our tempColour colours[0] = tempColour; // Reset our tempColour tempColour = null; } // Get colour 2 var c2 = colours.pop(); // Insert c2 into the middel colours.splice(1, 0, c2); } } }; }]) 

Now it is a little more complicated. There are 3 colors, they can be arranged so that color 3 can only be in position 1 and 2, but colors 1 and 2 can be in any position.

If the colors are intended for leisure, then the same rule applies , but a different color is placed between each step at position 0 (if this color is not already selected and is in position 1 or 2).

My function works fine, but it is linear in that if the button is pressed, it will always go in one direction. I would like it to go in two directions, so there is a back and forth button that cancels the function.

Does anyone know how I can do this with my current function?

Answer 1

create an array in which the sequence of colors is stored

 var colorsOrderSet=[]; 

when you press the button

 var colorChangeNumber = 0; 

when it clicks, it should store information in an array

 colorsOrderSet[colorChangeNumber] = colours; 

and then increase it by one so that it stores the number

 colorChangeNumber++; 

return function will be onclick

 ColorChangeNumber--; colorsOrderSet[colorChangeNumber] = colours;