Statistics
| Branch: | Revision:

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
}