After the program finds the element in the records it takes its colors, which are stored in an array of their rgb or rgba components. It then multiplies the blue components by the model value of the blue color filter component. The value is then stored and the elements gets its colors changed with jQuery. The blue color filter component is similar to the lineSpace and textSize ones. It has a textfieldSlider for large screens and textfieldButtons for small screens. They both have a min value of 0, a max value of 1 and a step of 0.1. The default value is 0, which mean no change, and the max 1 means 100% blue color filter or no blue component. Specific icons for the component need to be added.
I faced the problem that the blue color filter has to be applied whenever an element is removed or added to the DOM. To do that I used a Mutation Observer (https://developer.mozilla.org/en/docs/Web/API/MutationObserver). This was a new feature for since it has been released in 2015. I found it quite useful an and quickly solved my problem. I even used it to track an element's attribute to determine if the UI panel is opened and then add/remove a class to the responsive hide/show button to style it properly. However, there is a small issue with Safari. It throws and error even if you a webkit prefix for the MutationObserver. This issue has to be solved by someone on a Mac, because the latest version of Safari for Windows is 5.1 and MutationObservers are supported in 6+.
Adding image filters for contrast themes
I used the CSS property filter to change the color of the images in the page to make them match the contrast theme. Two issue came up as I was implementing the feature.
When a contrast theme is applied the blue color filter has to be disable, because they are not compatible.When a theme is selected the slider and the textfield disappear and a message is shown. The problem is that the blue color filter panel gets updated only when the UI panel is closed and reopened or the page is reloaded. The code that makes the image appear is vanilla CSS and is strange that it does get applied immediately. I talked to Jon and he said that there was an old issue, which involved the iframe and its changes not being applied at run time. I tried using some js to add a class to the blue color filter when it had to display the message, but jQuery could not detect the elements in the iframe. I can go through the code and find where the iframe is being build, but this will make the program really messy and I am not sure if it will fix anything.
The other issue is on webkit browsers. When you apply the filter option to multiple images some of them disappear. I have no I idea why this happens. I saw that people have had this issue for years, but no one had a working fix.