Permalink
Browse files

font color, font size and background color

  • Loading branch information...
1 parent 074829d commit f1f6d3de308386d08977f40bc417c4c1ac0b3eb9 @anwar3746 committed Jul 5, 2016
Showing with 103 additions and 2 deletions.
  1. +56 −1 braille.js
  2. +47 −1 index.html
View
@@ -7,6 +7,13 @@ var language_no = 0;
var keycode_map;
+var background_color;
+
+var font_color;
+
+var font_size = 20;
+
+
$( document ).ready(function(){
@@ -55,6 +62,34 @@ $( document ).ready(function(){
$("#brailletextarea").val("");
});
+ var combo = document.getElementById("fontsize");
+ for (var i = 6; i < 98; i++) {
+ var option = document.createElement("option");
+ option.text = i
+ option.value = i
+ try {
+ combo.add(option, null); //Standard
+ }catch(error) {
+ combo.add(option); // IE only
+ }
+ }
+
+
+ $('#backgroundcolor').change(function(){
+ background_color = $(this).val()
+ $("#brailletextarea").css({'background-color':background_color});
+ });
+
+ $('#foregroundcolor').change(function(){
+ font_color = $(this).val()
+ $("#brailletextarea").css({'color':font_color});
+ });
+
+ $('#fontsize').change(function(){
+ font_size = $('option:selected',$(this)).index();
+ $("#brailletextarea").css({'font-size':$(this).val()});
+ });
+
// 7 - Abbreviation key 8 - Captitol/Chill 9 - Letter Deletion 0 - punctuation -1 - Swich between lists
keycode_map = $.jStorage.get("braille-input-tool-keycode-map");
@@ -124,6 +159,9 @@ $( document ).ready(function(){
simple_mode = $.jStorage.get("braille-input-tool-simple-mode");
caps_lock = $.jStorage.get("braille-input-tool-caps-lock");
language_no = $.jStorage.get("braille-input-tool-language");
+ font_color = $.jStorage.get("braille-input-tool-font-color");
+ font_size = $.jStorage.get("braille-input-tool-font-size");
+ background_color = $.jStorage.get("braille-input-tool-background-color");
$('#isSimpleMode').prop('checked', simple_mode);
$('#isCapsLock').prop('checked', caps_lock);
@@ -134,7 +172,21 @@ $( document ).ready(function(){
simple_mode = 0;
if(caps_lock == null)
caps_lock = 0;
-
+ if(background_color == null)
+ background_color = "White";
+ if(font_color == null)
+ font_color = "Black";
+
+ $('#backgroundcolor').val(background_color);
+ $("#brailletextarea").css({'background-color':background_color});
+ $('#foregroundcolor').val(font_color);
+ $("#brailletextarea").css({'color':font_color});
+
+ if(font_size != null){
+ $('#fontsize option')[font_size].selected = true;
+ var fs = $('#fontsize').val();
+ $("#brailletextarea").css({'font-size':fs});
+ }
var braille_letter_map_pos = 0;
$('#braillelanguage option')[language_no].selected = true;
@@ -494,5 +546,8 @@ $( window ).unload(function(){
$.jStorage.set("braille-input-tool-simple-mode",simple_mode);
$.jStorage.set("braille-input-tool-language",language_no);
$.jStorage.set("braille-input-tool-keycode-map",keycode_map);
+ $.jStorage.set("braille-input-tool-font-color",font_color);
+ $.jStorage.set("braille-input-tool-font-size",font_size);
+ $.jStorage.set("braille-input-tool-background-color",background_color);
});
View
@@ -17,8 +17,54 @@
<br>
<button id="new_button">New</button>
<button id="save_button">Save</button>
- <br>
+ Font Size<select id="fontsize"></select>
+
+ Fore Color<select name="foreground" id="foregroundcolor">
+ <option value="Black">Black</option>
+ <option value="BlueViolet">BlueViolet</option>
+ <option value="Brown">Brown</option>
+ <option value="Cyan">Cyan</option>
+ <option value="DarkGreen">DarkGreen</option>
+ <option value="DeepPink">DeepPink</option>
+ <option value="Gold">Gold</option>
+ <option value="Green">Green</option>
+ <option value="GreenYellow">GreenYellow</option>
+ <option value="Lime">Lime</option>
+ <option value="Magenta">Magenta</option>
+ <option value="Maroon">Maroon</option>
+ <option value="Navy">Navy</option>
+ <option value="Olive">Olive</option>
+ <option value="Orange">Orange</option>
+ <option value="Pink">Pink</option>
+ <option value="Red">Red</option>
+ <option value="Violet">Violet</option>
+ <option value="White">White</option>
+ <option value="Yellow">Yellow</option>
+ </select>
+ Background Color<select name="backgroundcolor" id="backgroundcolor">
+ <option value="Black">Black</option>
+ <option value="BlueViolet">BlueViolet</option>
+ <option value="Brown">Brown</option>
+ <option value="Cyan">Cyan</option>
+ <option value="DarkGreen">DarkGreen</option>
+ <option value="DeepPink">DeepPink</option>
+ <option value="Gold">Gold</option>
+ <option value="Green">Green</option>
+ <option value="GreenYellow">GreenYellow</option>
+ <option value="Lime">Lime</option>
+ <option value="Magenta">Magenta</option>
+ <option value="Maroon">Maroon</option>
+ <option value="Navy">Navy</option>
+ <option value="Olive">Olive</option>
+ <option value="Orange">Orange</option>
+ <option value="Pink">Pink</option>
+ <option value="Red">Red</option>
+ <option value="Violet">Violet</option>
+ <option value="White">White</option>
+ <option value="Yellow">Yellow</option>
+ </select>
+ <br>
<textarea id="brailletextarea" cols=60 rows=30 type="textarea" style="width:100%" > </textarea>
<button id="configure_button">Configure Keys</button>

0 comments on commit f1f6d3d

Please sign in to comment.