Add dyslexic font option

TJScalzo commented 8 years ago

Things left to do:

[ ] Use specific style sheet with Open Dyslexic because it messes with the spacing (?)
[x] Find way to change font inside of popup for when they change to Open Dyslexic
[x] Add toggle switch to change settings
[x] Add functionality on mobile:

Basically, add a button somewhere that sets all of the fonts on the site to Open Dyslexic. I feel like it'd be an awesome way to make the site more accessible to more people. We could use code along the lines of:

<button onClick="changeFont">Change font?</button>

function changeFont() {
    if document.getElementById("body").style.fontFamily = "Open Sans" {
        document.getElementById("*:not(#nforcers)").style.fontFamily = "OpenDyslexic";
    }
    else {
        document.getElementById("*:not(#nforcers)").style.fontFamily = "Open Sans";
    }
}

(BTW: I made up this code using stuff from here)

gisellegk commented 8 years ago

Yesss! I saw a feature like this on an author's website (scroll to the bottom) and thought it was a great touch.

TJScalzo commented 8 years ago

The main problem I can see is that if you navigate to a different page the original font will be used. Somehow we'll need to store their choice of font. Maybe cookies?

gisellegk commented 8 years ago

yep, cookies are a good way to go for something like this.

I haven't done much with cookies aside from picoCTF but here's a resource I used that hopefully will help: http://www.quirksmode.org/js/cookies.html

TJScalzo commented 8 years ago

@gisellegk Having read through that page, I think it'll work. I'll see if/when I'll be able to work on writing this.

TJScalzo commented 8 years ago

Premade popup to use because I'm lazy and don't feel like coding one myself:

https://limonte.github.io/sweetalert2

TJScalzo commented 8 years ago

I've got almost everything working. The main problem that I'm facing is actually the way that I change/check the font family.

function setFont() {
  if (font != null) {
    document.getElementsByTagName("body").style.fontFamily = font;
  }
}

It looks like it should work. But it keeps throwing this error:

TypeError: undefined is not an object (evaluating 'document.getElementsByTagName("body").style.fontFamily = font')
column: 51
line: 75

The error is thrown right after style and before .fontFamily. from my googling I've found that that error probably means it can't find the element that's been specified. I'm not sure why that is though... Do you think you could help me out @gisellegk? I'm stuck.

TJScalzo commented 8 years ago

Never mind, @gisellegk, I've figured it out. This works:

function setFont() {
  if (font != null) {
    document.body.style.fontFamily = font;
  }
}

Now all I need to do is add Open Dyslexic as a font on the site and make sure the cookies work the way I'm pretty sure they do.

gisellegk commented 8 years ago

@TJScalzo glad you figured it out!

TJScalzo commented 8 years ago

I think this would work well as a toggle switch. I'll look into it more.

TJScalzo commented 8 years ago

Things left to do:

[x] Find way to change font inside of popup for when they change to Open Dyslexic
[x] Add toggle switch to temporarily change the font (X)
[x] Add button for showing popup to change settings
[ ] Use different style sheet for when Open Dyslexic is used because it messes with all of the spacing?

TJScalzo commented 8 years ago

I'm going to do this to toggle the font temporarily. Do you see anything wrong with how this'll work @gisellegk?

<input id="font-switch" onclick="toggleFont()" type="checkbox" />

function toggleFont() {
  if (document.body.style.fontFamily = "Open Sans") {
    font = "Open Dyslexic";
  } else {
    font = "Open Sans";
  }
  setFont();
  setFontSwitch();
} 
function setFontSwitch() {
  if (font == "Open Dyslexic") {
    $( "#font-switch" ).prop( "checked", true );
  } else {
    $( "#font-switch" ).prop( "checked", false );
  }
}

gisellegk commented 8 years ago

@TJScalzo is "font" defined as a global variable/outside of the two functions?

it might be better off if you make font a local variable in toggleFont and pass it as a parameter in setFontSwitch.

I'd say try it! it will probably work, and it's fine if you ignore the above suggestion, i just usually like to avoid global variables, i guess for security and namespace reasons but it's not particularly critical in this situation lol

TJScalzo commented 8 years ago

@gisellegk yeah, font's used as a global variable. It's mainly to make it easy for me to test everything. I also have it as a global variable because setFontSwitch will be run when the page loads to set the toggle switch correctly based on what font is elsewhere in the code. I'm not sure how easy it'd be to make font into a local variable and still make it possible for toggleFont to detect how font has been set. I'll probably attempt to change it to a local variable once everything else is working properly.

gisellegk commented 8 years ago

@TJScalzo Is it possible just to get it from the CSS?

like here

(document.body.style.fontFamily = "Open Sans")

also == not = but you might have already caught that lol

TJScalzo commented 8 years ago

@gisellegk That'd definitely work. I didn't do it that way because I was worried about how much it'd add to load time. I assume it won't be much. I'll try and make it work with font as a local variable.

TJScalzo commented 8 years ago

Hurray! I did it @gisellegk!

gisellegk commented 8 years ago

yay! btw, i can't see the toggle button for some reason. I'm on chrome on ubuntu. IDK

On Sat, Jun 4, 2016 at 9:43 PM, Tim Scalzo notifications@github.com wrote:

Hurray! I did it @gisellegk https://github.com/gisellegk!

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/team178/team178.github.io/issues/113#issuecomment-223788116, or mute the thread https://github.com/notifications/unsubscribe/AC4tv-4W3lR8ibYyg2KuP-s_-ai6pq8Pks5qIinBgaJpZM4ImKar .

Giselle Koo

TJScalzo commented 8 years ago

@gisellegk I've commented it out for right now because I don't want things being seen yet. I'm still working on styling the switch to look nice, then I'll make things public. Another thing that's commented out is the code that has fontCookieCheck run when the page loads.

gisellegk commented 8 years ago

OK, cool, got it!

On Sat, Jun 4, 2016 at 10:01 PM, Tim Scalzo notifications@github.com wrote:

@gisellegk https://github.com/gisellegk I've commented it out for right now because I don't want things being seen yet. I'm still working on styling the switch to look nice, then I'll make things public. Another thing that's commented out is the code that has fontCookieCheck run when the page loads.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/team178/team178.github.io/issues/113#issuecomment-223788660, or mute the thread https://github.com/notifications/unsubscribe/AC4tvycBiNaogj7EBydByDE33Jm7DYlFks5qIi36gaJpZM4ImKar .

Giselle Koo

TJScalzo commented 8 years ago

A start on how to style the switch? (X)

TJScalzo commented 8 years ago

I've made this: X It's much easier to work with and is simpler. It's all CSS!

TJScalzo commented 8 years ago

@gisellegk basically everything's done with this. I'd love it if you could look everything over and see if you can find any problems. You'll just need to un-comment out the toggle and button in the footer and the line at the bottom of change-font.js for everything to work. Let me know if there are any problems at all.

The last thing I'd like to try and do is make another css file that alters styles and spacing when the font is different because everything ends up looking a little off when Open Dyslexic is being used.

TJScalzo commented 8 years ago

@gisellegk I've set up this page to serve as a place to test everything out. I was going to use /website-testing but since it's a different repo Jekyll layouts and includes work differently.

gisellegk commented 8 years ago

hi i'm just checking out that test page, is it supposed to have the modals/popups or is it just the toggle button?

The toggle button seems to work fine (of course I can't switch pages) but the debug cookie buttons aren't doing anything

wait-- i got the pop up to come up and IDK what I did.

On Tue, Aug 2, 2016 at 7:53 PM, Tim Scalzo notifications@github.com wrote:

@gisellegk https://github.com/gisellegk I've set up this page http://farmingtonrobotics.org/test/ to serve as a place to test everything out. I was going to use /website-testing https://github.com/team178/website-testing but since it's a different repo Jekyll layouts and includes work differently.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/team178/team178.github.io/issues/113#issuecomment-237086637, or mute the thread https://github.com/notifications/unsubscribe-auth/AC4tv27VPQ9k_dciAdwglvZi9qLrPR67ks5qb9hrgaJpZM4ImKar .

Giselle Koo

gisellegk commented 8 years ago

OK now I refreshed the page and the cookie says "true" but the font is regular? I need to check this on my laptop...

On Thu, Aug 11, 2016 at 4:21 PM, Giselle Koo gisellegk@gmail.com wrote:

hi i'm just checking out that test page, is it supposed to have the modals/popups or is it just the toggle button?

The toggle button seems to work fine (of course I can't switch pages) but the debug cookie buttons aren't doing anything

wait-- i got the pop up to come up and IDK what I did.

On Tue, Aug 2, 2016 at 7:53 PM, Tim Scalzo notifications@github.com wrote:

@gisellegk https://github.com/gisellegk I've set up this page http://farmingtonrobotics.org/test/ to serve as a place to test everything out. I was going to use /website-testing https://github.com/team178/website-testing but since it's a different repo Jekyll layouts and includes work differently.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/team178/team178.github.io/issues/113#issuecomment-237086637, or mute the thread https://github.com/notifications/unsubscribe-auth/AC4tv27VPQ9k_dciAdwglvZi9qLrPR67ks5qb9hrgaJpZM4ImKar .

Giselle Koo

Giselle Koo

TJScalzo commented 8 years ago

@gisellegk The only thing that will actually be on the site is the toggle switch. The function run by "Check for Cookie" will be run every time the page loads (it doesn't right now because it'd also affect the main site). If the cookie checker doesn't find a cookie it should show a modal of some kind asking you to set the font. If it sees a cookie it sets the font and the toggle to that font and doesn't display a popup. I removed the second modal that sets the font settings and made the toggle switch save to the cookie. This means you'll only see a modal if you don't have a cookie on your computer. (Hence the "Remove Cookie" button allowing you to remove the cookie.)

team178 / team178.github.io