1 // atgs[0] : SelectWidgetItemClassのリスト
2 // args[1] : 選択完了時のコールバック 引数: Cancel->null, Ok->SelectWidgetItemClassの「リスト」(複数選択不可の時も) (省略可)
3 // args[2] : 複数選択可(省略可、初期値はfalse)
4 // args[3] : 初期選択位置(省略可、初期値は0);
5 // args[4] : 最下部にメッセージを表示するかどうか(省略可、初期値はtrue);
6 var SelectWidgetClass = function(manager, args){
7 SelectWidgetClass.base.apply(this, arguments);
10 this.size = new Point2D(600, 440);
11 this.origin = new Point2D(20, 20);
14 this.items = args[0].slice(0);
15 this.callback = args[1]; //省略可
16 this.multiSelect = args[2] != undefined ? args[2] : false;
17 this.defaultCursor = args[3] != undefined ? args[3] : 0;
19 this.showMessage = args[4] != undefined ? args[4] : true;
20 this.fixedMessage = "";
22 this.enableCancel = true; //キャンセルボタンを有効にする
25 this.padding = 20; //選択画面内の上下左右の余白
26 this.itemPadding = 20; //アイテムの間隔
27 this.messageHeight = this.showMessage ? 166 : 0; //メッセージ部分の高さ(マージン部分を含む)
28 this.messageMergin = 32; //メッセージ周囲のマージン
29 this.messageBorder = "3px orange solid"; //メッセージの外郭
30 this.buttonHeight = 16; //ボタン部分の高さ
31 this.buttonWidth = 96; //一つのボタンの幅
32 this.backColor = "rgba(0, 0, 0, 0.75)"; //画面の背景色
33 this.border = "1px white solid"; //画面の最外郭
39 this.cancelButton = null;
40 this.leftKeyPressed = true;
41 this.rightKeyPressed = true;
42 this.selectKeyPressed = true;
43 this.isHidden = false;
45 }.extend(WidgetClass, {
47 var wBox, wItem, wMessage, bOk, bCancel;
48 wBox = document.createElement('div');
51 style.position = "absolute";
52 style.top = this.origin.y + "px";
53 style.left = this.origin.x + "px";
54 style.width = this.size.x + "px";
55 style.height = this.size.y + "px";
56 style.backgroundColor = this.backColor;
57 style.border = this.border;
60 wItem = document.createElement('div');
63 style.position = "absolute";
64 style.top = this.padding + "px";
65 style.left = this.padding + "px";
66 style.width = (this.size.x - (this.padding * 2)) + "px";
67 style.height = (this.size.y - (this.padding * 2) - this.buttonHeight - this.messageHeight) + "px";
68 style.overflow = "hidden";
70 wBox.appendChild(wItem);
72 var xloc = this.itemPadding, yloc = this.itemPadding;
74 for(var i = 0; i < this.items.length; i++)
76 var w = this.items[i];
77 if(xloc + w.size.x > (this.size.x - (this.padding * 2)) - this.itemPadding)
79 xloc = this.itemPadding;
80 yloc += maxHeight + this.itemPadding;
84 wItem.appendChild(w.createHtmlElement(xloc, yloc));
87 xloc += w.size.x + this.itemPadding;
89 if(maxHeight < w.size.y) maxHeight = w.size.y;
93 wMessage = createMessageBox(
95 this.size.x - (this.padding * 2) - (this.messageMergin * 2), //width
96 this.messageHeight - (this.messageMergin * 2), //height
97 this.messageMergin + this.padding, //x
98 this.size.y - this.padding - this.buttonHeight - this.messageHeight + this.messageMergin, //y
104 wMessage.style.border = this.messageBorder;
105 changeMessageBox(wMessage, "", false); //初めは空の文字列にしておく
106 this.wMessage = wMessage;
107 this.okButton = new SelectWidgetItemClass(true, "決定", new Point2D(this.buttonWidth, this.buttonHeight), false, "決定します。");
108 bOk = this.okButton.createHtmlElement(this.size.x - this.padding - this.buttonWidth, this.size.y - this.padding - this.buttonHeight)
109 wBox.appendChild(bOk);
111 if(this.enableCancel)
113 this.cancelButton = new SelectWidgetItemClass(true, "キャンセル", new Point2D(this.buttonWidth, this.buttonHeight), false, "キャンセルします。");
114 bCancel = this.cancelButton.createHtmlElement(this.size.x - this.padding - (this.buttonWidth * 2) - this.itemPadding * 2, this.size.y - this.padding - this.buttonHeight);
115 wBox.appendChild(bCancel);
116 this.items.push(this.cancelButton);
118 this.items.push(this.okButton);
120 this.manager.mainArea.appendChild(wBox);
124 this.moveCursor(this.defaultCursor);
126 this.manager.pauseStage(function()
128 // pauseStageに直接tickを設置するとtick内のthisでmanagerが取得されてしまう
131 w.manager.resumeStage();
132 //w.manager.removeWidget(w);
137 this.manager.mainArea.removeChild(this.wBox);
138 this.manager.resumeStage();
141 this.callback(this.callbackArg);
152 if(this.manager.UIManager.keyState.cursorLeft)
154 if(!this.leftKeyPressed)
156 this.leftKeyPressed = true;
157 this.moveCursor(this.cursor - 1);
161 this.leftKeyPressed = false;
163 if(this.manager.UIManager.keyState.cursorRight)
165 if(!this.rightKeyPressed)
167 this.rightKeyPressed = true;
168 this.moveCursor(this.cursor + 1);
172 this.rightKeyPressed = false;
174 if(this.manager.UIManager.keyState.select)
176 if(!this.selectKeyPressed)
178 this.selectKeyPressed = true;
179 if(!this.select(this.cursor))
181 this.isHidden = true;
186 this.selectKeyPressed = false;
190 moveCursor : function(c){
192 if(c >= this.items.length) c = this.items.length - 1;
194 if(this.cursor != -1)
196 this.items[this.cursor].isActive = false;
197 this.items[this.cursor].updateHtmlElement();
201 this.items[this.cursor].isActive = true;
202 this.items[this.cursor].updateHtmlElement();
204 var message = this.items[this.cursor].message
205 if(this.fixedMessage != "") message = this.fixedMessage;
206 changeMessageBox(this.wMessage, message, false);
208 select : function(c){ //Widgetを閉じるときはfalseで帰る
209 if(c < this.items.length - (this.enableCancel ? 2 : 1))
213 this.items[c].isSelected = !this.items[c].isSelected;
214 this.items[c].updateHtmlElement();
217 for(var i = 0; i < this.items.length; i++)
219 this.items[i].isSelected = i == c;
220 this.items[i].updateHtmlElement();
225 if((c == this.items.length - 2 && this.enableCancel)) //cancel button
229 this.callbackArg = null;
236 for(var i = 0; i < this.items.length; i++)
238 if(this.items[i].isSelected)
240 list.push(this.items[i]);
243 this.callbackArg = list;
252 // showAsLabel ... true : 第二引数をテキストとして表示する
253 // value : 表示する文字列または画像
254 // size : 要素のサイズ(Point2D)
255 // selected : 初めから選択されているか(省略可 : 初期値false)
256 // message : SelectWidgetClassの下に表示する文字列
257 var SelectWidgetItemClass = function(showAsLabel, value, size, selected, message)
261 this.showAsLabel = showAsLabel;
263 this.size = size ? size : new Point2D(48, 48);
264 this.isActive = false;
265 this.isSelected = selected != undefined ? selected : false;
266 this.message = message ? message : "";
269 this.border = "none";
270 this.borderSelected = "1px orange solid";
272 this.backSelected = "orange";
277 SelectWidgetItemClass.prototype = {
278 createHtmlElement : function(x, y)
280 if(this.element == null)
282 var element = document.createElement('div');
285 style.position = "absolute";
286 style.top = y + "px";
287 style.left = x + "px";
288 style.width = this.size.x + "px";
289 style.height = this.size.y + "px";
290 style.padding = "6px"; //showAsLabelの時のための設定。
291 style.overflow = "hidden";
292 style.borderRadius = "6px";
293 style.border = this.border;
294 style.backgroundColor = this.back;
295 style.color = "white";
300 element.innerText = this.value;
303 var child = document.createElement('img')
304 child.src = "images/" + this.value;
307 style.position = "absolute";
310 style.width = "100%";
311 style.height = "100%";
313 element.appendChild(child);
316 this.element = element;
321 updateHtmlElement : function()
323 if(this.element != null)
327 style.border = this.isActive ? this.borderSelected : this.border;
328 style.backgroundColor = this.isSelected ? this.backSelected : this.back;