blinker / firefox.plugin / data / scripts / text / pieKeyboard.js @ 76dd22bd
History | View | Annotate | Download (9.169 KB)
1 |
/*
|
---|---|
2 |
* Copyright 2015 Thies Pfeiffer and Dimitri Heil and Kevin Taron
|
3 |
* Blinker is distributed under the terms of the GNU General Public License
|
4 |
*
|
5 |
* This file is part of Blinker.
|
6 |
*
|
7 |
* Blinker is free software: you can redistribute it and/or modify
|
8 |
* it under the terms of the GNU General Public License as published by
|
9 |
* the Free Software Foundation, either version 3 of the License, or
|
10 |
* (at your option) any later version.
|
11 |
*
|
12 |
* Blinker is distributed in the hope that it will be useful,
|
13 |
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
14 |
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
15 |
* GNU General Public License for more details.
|
16 |
*
|
17 |
* You should have received a copy of the GNU General Public License
|
18 |
* along with Blinker. If not, see <http://www.gnu.org/licenses/>.
|
19 |
*/
|
20 |
|
21 |
function getInputType(element) { |
22 |
elementArray = []; |
23 |
textArray = ['LNDZF', 'AEIOU', 'HSCJK', 'BYRVG', 'ßQ.,', 'XMTWP']; |
24 |
|
25 |
$(textArray).each(function(index, el) { |
26 |
elementArryElement = "<div data-gaze='true' data-gaze-type='text' data-gaze-model='piemenu' gaze-piemenu='submenu'>";
|
27 |
var arrValues = el.split(''); |
28 |
$.each(arrValues, function (intIndex, objValue) { |
29 |
elementArryElement += "<div gaze-piemenu-submenu='option' gaze-piemenu-option-value=" + objValue + ">"; |
30 |
elementArryElement += objValue; |
31 |
elementArryElement += "</div>";
|
32 |
}) |
33 |
elementArryElement += "</div>";
|
34 |
elementArray.push(elementArryElement); |
35 |
}); |
36 |
|
37 |
return elementArray;
|
38 |
} |
39 |
|
40 |
|
41 |
function getInputSubMenu(element) { |
42 |
elementArray = []; |
43 |
var submenuElements = $(element).children(''); |
44 |
|
45 |
$(submenuElements).each(function(index, el) { |
46 |
var elementValue = $(el).html(); |
47 |
if($(el).attr('gaze-piemenu-option-value') != null) { |
48 |
elementValue = $(el).attr('gaze-piemenu-option-value'); |
49 |
} |
50 |
|
51 |
elementArryElement = "<div data-gaze='true' data-gaze-type='action' data-gaze-model='dwell'>";
|
52 |
elementArryElement += elementValue; |
53 |
elementArryElement += "</div>";
|
54 |
|
55 |
elementArray.push(elementArryElement); |
56 |
}); |
57 |
|
58 |
return elementArray;
|
59 |
} |
60 |
|
61 |
|
62 |
function createKeyboard(element) { |
63 |
if($('body').children('.gaze-piemenuKeyboard').length <= 0) { |
64 |
$('body').append('<div class="gaze-piemenuKeyboard"></div>'); |
65 |
$('.gaze-piemenuKeyboard').append('<div class="gaze-piemenuKeyboard-background"></div>'); |
66 |
$('.gaze-piemenuKeyboard').append('<div class="gaze-piemenuKeyboard-content"></div>'); |
67 |
|
68 |
createKeyboardLayout(); |
69 |
createKeyboardFunctions(); |
70 |
} |
71 |
showKeyboard(element); |
72 |
} |
73 |
|
74 |
|
75 |
function createKeyboardLayout() { |
76 |
var vContent = '.gaze-piemenuKeyboard-content'; |
77 |
|
78 |
// Top Line
|
79 |
var vContentTopLine = '<div class="gTopline"></div>'; |
80 |
$(vContent).append(vContentTopLine);
|
81 |
|
82 |
$('.gTopline').append('<div class="gTopline-left"></div>'); |
83 |
$('.gTopline').append('<div class="gTopline-middle"></div>'); |
84 |
$('.gTopline').append('<div class="gTopline-right"></div>'); |
85 |
|
86 |
$('.gTopline-left').append('<button class="keyboardSpace" data-gaze="true" data-gaze-type="action" data-gaze-model="piemenu" data-gaze-function-Close="closePieMenu()" data-gaze-function-After="closePieMenu()">Space</button>'); |
87 |
$('.gTopline-middle').append('<div class="keyBoardInput"><div class="keyboardInner"></div></div>'); |
88 |
createKeyboardInputs(); |
89 |
$('.gTopline-right').append('<button class="saveClose" data-gaze="true" data-gaze-type="action" data-gaze-model="piemenu" data-gaze-function="closePieMenuKeyboard">Accept</button>'); |
90 |
|
91 |
// Bottom Line
|
92 |
var vContentBottomLine = '<div class="gBottomline"></div>'; |
93 |
$(vContent).append(vContentBottomLine);
|
94 |
|
95 |
$('.gBottomline').append('<div class="gBottomline-left"></div>'); |
96 |
$('.gBottomline').append('<div class="gBottomline-middle"></div>'); |
97 |
$('.gBottomline').append('<div class="gBottomline-right"></div>'); |
98 |
|
99 |
$('.gBottomline-left').append('<button class="toggleFontSize small" data-gaze="true" data-gaze-type="action" data-gaze-model="piemenu" data-gaze-function-Close="closePieMenu()" data-gaze-function-After="closePieMenu()">abc</button>'); |
100 |
$('.gBottomline-middle').append('<textarea class="inputPreview"></textarea>'); |
101 |
$('.gBottomline-right').append('<button class="Bksp" data-gaze="true" data-gaze-type="action"' + |
102 |
'data-gaze-model="piemenu" data-gaze-function-Close="closePieMenu()" data-gaze-function-After="closePieMenu()">Bksp</button>');
|
103 |
} |
104 |
|
105 |
|
106 |
function createKeyboardInputs() { |
107 |
var kInput = '.gaze-piemenuKeyboard-content .keyBoardInput .keyboardInner'; |
108 |
|
109 |
$(kInput).append('<div class="kInput-content"></div>'); |
110 |
$(kInput).append('<div class="kInput-background"></div>'); |
111 |
|
112 |
addPieMenuTextInput(); |
113 |
} |
114 |
|
115 |
function addPieMenuTextInput() { |
116 |
var kInputContent = '.gaze-piemenuKeyboard-content .keyBoardInput .kInput-content'; |
117 |
$(kInputContent).html(''); |
118 |
|
119 |
elementArray = []; |
120 |
textArray = ['LNDZF', 'AEIOU', 'HSCJK', 'BYRVG', 'ßQ!.,', 'XMTWP']; |
121 |
|
122 |
$(textArray).each(function(index, el) { |
123 |
elementArryElement = "<div data-gaze='true' data-gaze-type='text' data-gaze-model='piemenu' gaze-piemenu='submenu'>";
|
124 |
var arrValues = el.split(''); |
125 |
$.each(arrValues, function (intIndex, objValue) { |
126 |
elementArryElement += "<div gaze-piemenu-submenu='option' gaze-piemenu-option-value=" + objValue + ">"; |
127 |
elementArryElement += objValue; |
128 |
elementArryElement += "</div>";
|
129 |
}) |
130 |
elementArryElement += "</div>";
|
131 |
elementArray.push(elementArryElement); |
132 |
$(kInputContent).append(elementArryElement);
|
133 |
}); |
134 |
|
135 |
|
136 |
|
137 |
} |
138 |
|
139 |
|
140 |
function createKeyboardFunctions() { |
141 |
$('.inputPreview').focus(); |
142 |
|
143 |
$('.gaze-piemenuKeyboard .saveClose').click(function(event) { |
144 |
savePreviewToInput(); |
145 |
closePieMenuKeyboard(); |
146 |
}); |
147 |
|
148 |
$('.gaze-piemenuKeyboard .Bksp').click(function(event) { |
149 |
var inputs = $('.inputPreview').val(); |
150 |
$('.inputPreview').val(inputs.slice(0, -1)); |
151 |
}); |
152 |
|
153 |
$('.gaze-piemenuKeyboard .keyboardSpace').click(function(event) { |
154 |
var inputs = $('.inputPreview').val(); |
155 |
$('.inputPreview').val(inputs + " "); |
156 |
}); |
157 |
|
158 |
$('.gaze-piemenuKeyboard .toggleFontSize').click(function(event) { |
159 |
var elementss = $('div[gaze-piemenu-submenu="option"]'); |
160 |
closeSubmenu(); |
161 |
|
162 |
$(elementss).each(function(index, el) { |
163 |
var char = $(el).html(); |
164 |
|
165 |
if($('.gaze-piemenuKeyboard .toggleFontSize').hasClass('small')) { |
166 |
var newchar = char.toLowerCase(); |
167 |
} else {
|
168 |
var newchar = char.toUpperCase(); |
169 |
} |
170 |
|
171 |
$(el).html(newchar);
|
172 |
$(el).attr('gaze-piemenu-option-value', newchar); |
173 |
}); |
174 |
|
175 |
if($('.gaze-piemenuKeyboard .toggleFontSize').hasClass('small')) { |
176 |
$('.gaze-piemenuKeyboard .toggleFontSize').addClass('large'); |
177 |
$('.gaze-piemenuKeyboard .toggleFontSize').removeClass('small'); |
178 |
$('.gaze-piemenuKeyboard .toggleFontSize').html('ABC'); |
179 |
} else {
|
180 |
$('.gaze-piemenuKeyboard .toggleFontSize').removeClass('large'); |
181 |
$('.gaze-piemenuKeyboard .toggleFontSize').addClass('small'); |
182 |
$('.gaze-piemenuKeyboard .toggleFontSize').html('abc'); |
183 |
} |
184 |
|
185 |
}); |
186 |
} |
187 |
|
188 |
function showKeyboard(element) { |
189 |
var myval = $('.inputGazeKeyboard').val() || ''; |
190 |
$('.gaze-piemenuKeyboard .inputPreview').val(myval); |
191 |
$('.gaze-piemenuKeyboard').show(); |
192 |
} |
193 |
|
194 |
|
195 |
function addKeyboardSubmenu(element) { |
196 |
if($('.gaze-piemenuKeyboard .gTopline').children('.gaze-piemenuKeyboard-submenu').length <= 0) { |
197 |
$('.gaze-piemenuKeyboard .gTopline').append('<div class="gaze-piemenuKeyboard-submenu"></div>'); |
198 |
$('.gaze-piemenuKeyboard-submenu').append('<div class="gaze-piemenuKeyboard-submenu-content"></div>'); |
199 |
} |
200 |
|
201 |
$('.gaze-piemenuKeyboard-submenu-content').html(''); |
202 |
|
203 |
elementArray = []; |
204 |
var submenuElements = $(element).children(''); |
205 |
|
206 |
$(submenuElements).each(function(index, el) { |
207 |
var elementValue = $(el).html(); |
208 |
if($(el).attr('gaze-piemenu-option-value') != null) { |
209 |
elementValue = $(el).attr('gaze-piemenu-option-value'); |
210 |
} |
211 |
|
212 |
elementArryElement = "<button data-gaze='true' data-gaze-type='action' data-gaze-model='piemenu' data-gaze-function-Close='closePieMenu()' data-gaze-function-After='closePieMenu()'>";
|
213 |
elementArryElement += elementValue; |
214 |
elementArryElement += "</button>";
|
215 |
|
216 |
$('.gaze-piemenuKeyboard-submenu-content').append(elementArryElement); |
217 |
}); |
218 |
|
219 |
// $('.gaze-piemenuKeyboard-submenu-content > button:last-child').after("<button data-gaze='true' data-gaze-type='action' data-gaze-model='piemenu' data-gaze-function='closeSubmenu()'" +
|
220 |
// "data-gaze-function-Close='closeSubmenu()' data-gaze-function-After='closePieMenu()'>Close</div>");
|
221 |
|
222 |
showKeyboardSubmenu(); |
223 |
} |
224 |
|
225 |
|
226 |
function showKeyboardSubmenu() { |
227 |
closePieMenu(); |
228 |
|
229 |
$( ".gaze-piemenuKeyboard-submenu" ).position({ |
230 |
my: "left-400 bottom+200", |
231 |
at: "left top", |
232 |
of: ".keyboardInner" |
233 |
}); |
234 |
|
235 |
addSubmenuClickFunction(); |
236 |
$('.gaze-piemenuKeyboard-submenu').show(); |
237 |
} |
238 |
|
239 |
|
240 |
function closeSubmenu() { |
241 |
$('.gaze-piemenuKeyboard-submenu').hide(); |
242 |
$('.openedSubMenu').removeClass('openedSubMenu'); |
243 |
} |
244 |
|
245 |
function addItemToPreview(item) { |
246 |
var inputs = $('.inputPreview').val(); |
247 |
inputs += item; |
248 |
var inputs = $('.inputPreview').val(inputs); |
249 |
closeSubmenu(); |
250 |
} |
251 |
|
252 |
function addSubmenuClickFunction() { |
253 |
$('.gaze-piemenuKeyboard-submenu button').click(function(event) { |
254 |
var elementValue = $(this).html(); |
255 |
addItemToPreview(elementValue); |
256 |
}); |
257 |
} |
258 |
|
259 |
function savePreviewToInput() { |
260 |
var inputs = $('.inputPreview').val(); |
261 |
$('.inputGazeKeyboard').val(inputs); |
262 |
} |